From 8b579a2a878f512a777b7850b5d301c6ef166308 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 6 Aug 2019 11:47:03 -0500 Subject: [PATCH] Add create-user-session modal --- app/builtin-pages/com/editor/settings-form.js | 12 +- app/lib/strings.js | 15 ++ app/modals.js | 3 + app/modals/create-user-session.js | 156 ++++++++++++++++++ 4 files changed, 180 insertions(+), 6 deletions(-) create mode 100644 app/modals/create-user-session.js diff --git a/app/builtin-pages/com/editor/settings-form.js b/app/builtin-pages/com/editor/settings-form.js index 5f7c6961f7..44ea9e8973 100644 --- a/app/builtin-pages/com/editor/settings-form.js +++ b/app/builtin-pages/com/editor/settings-form.js @@ -72,7 +72,7 @@ export function render (workingCheckout, isReadonly, archiveInfo, workingDatJson isReadonly, label: 'Follows API', documentation: 'dat://unwalled.garden/docs/api/follows', - perm: 'unwalled.garden/perm/follows', + perm: 'unwalled.garden/api/follows', caps: [ {id: 'read', description: 'Read the user\'s followers'}, {id: 'write', description: 'Follow and unfollow users'} @@ -82,7 +82,7 @@ export function render (workingCheckout, isReadonly, archiveInfo, workingDatJson isReadonly, label: 'Posts API', documentation: 'dat://unwalled.garden/docs/api/posts', - perm: 'unwalled.garden/perm/posts', + perm: 'unwalled.garden/api/posts', caps: [ {id: 'read', description: 'Read the user\'s feed'}, {id: 'write', description: 'Post to the user\'s feed'} @@ -92,7 +92,7 @@ export function render (workingCheckout, isReadonly, archiveInfo, workingDatJson isReadonly, label: 'Bookmarks API', documentation: 'dat://unwalled.garden/docs/api/bookmarks', - perm: 'unwalled.garden/perm/bookmarks', + perm: 'unwalled.garden/api/bookmarks', caps: [ {id: 'read', description: 'Read the user\'s bookmarks'}, {id: 'write', description: 'Create and edit the user\'s bookmarks'} @@ -102,7 +102,7 @@ export function render (workingCheckout, isReadonly, archiveInfo, workingDatJson isReadonly, label: 'Comments API', documentation: 'dat://unwalled.garden/docs/api/comments', - perm: 'unwalled.garden/perm/comments', + perm: 'unwalled.garden/api/comments', caps: [ {id: 'read', description: 'Read the user\'s comments'}, {id: 'write', description: 'Create and edit the user\'s comments'} @@ -112,7 +112,7 @@ export function render (workingCheckout, isReadonly, archiveInfo, workingDatJson isReadonly, label: 'Reactions API', documentation: 'dat://unwalled.garden/docs/api/reactions', - perm: 'unwalled.garden/perm/reactions', + perm: 'unwalled.garden/api/reactions', caps: [ {id: 'read', description: 'Read the user\'s reactions'}, {id: 'write', description: 'Create and edit the user\'s reactions'} @@ -122,7 +122,7 @@ export function render (workingCheckout, isReadonly, archiveInfo, workingDatJson isReadonly, label: 'Votes API', documentation: 'dat://unwalled.garden/docs/api/votes', - perm: 'unwalled.garden/perm/votes', + perm: 'unwalled.garden/api/votes', caps: [ {id: 'read', description: 'Read the user\'s votes'}, {id: 'write', description: 'Create and edit the user\'s votes'} diff --git a/app/lib/strings.js b/app/lib/strings.js index 7fdbf7f7ab..2e48adf11c 100644 --- a/app/lib/strings.js +++ b/app/lib/strings.js @@ -1,6 +1,7 @@ /* globals window */ const URL = typeof window === 'undefined' ? require('url').URL : window.URL +export const DAT_KEY_REGEX = /[0-9a-f]{64}/i export function ucfirst (str) { if (!str) str = '' @@ -51,3 +52,17 @@ export function getHostname (str) { return str } } + +export function toNiceUrl (str) { + if (!str) return '' + try { + var urlParsed = new URL(str) + if (DAT_KEY_REGEX.test(urlParsed.hostname)) { + urlParsed.hostname = `${urlParsed.hostname.slice(0, 4)}..${urlParsed.hostname.slice(-2)}` + } + return urlParsed.toString() + } catch (e) { + // ignore, not a url + } + return str +} \ No newline at end of file diff --git a/app/modals.js b/app/modals.js index 0d5adb1b25..aef65381c5 100644 --- a/app/modals.js +++ b/app/modals.js @@ -9,6 +9,7 @@ import './modals/select-file' import './modals/prompt' import './modals/basic-auth' import './modals/user' +import './modals/create-user-session' import './modals/install-application' class ModalsWrapper extends LitElement { @@ -79,6 +80,8 @@ class ModalsWrapper extends LitElement { return html`` case 'user': return html`` + case 'create-user-session': + return html`` case 'install-application': return html`` } diff --git a/app/modals/create-user-session.js b/app/modals/create-user-session.js new file mode 100644 index 0000000000..af45436542 --- /dev/null +++ b/app/modals/create-user-session.js @@ -0,0 +1,156 @@ +/* globals customElements */ +import { LitElement, html, css } from '../vendor/lit-element/lit-element' +import { classMap } from '../vendor/lit-element/lit-html/directives/class-map' +import { repeat } from '../vendor/lit-element/lit-html/directives/repeat' +import { toNiceUrl } from '../lib/strings' +import * as bg from './bg-process-rpc' +import commonCSS from './common.css' +import inputsCSS from './inputs.css' +import buttonsCSS from './buttons2.css' + +class CreateUserSessionModal extends LitElement { + constructor () { + super() + this.cbs = null + this.site = null + this.user = null + this.permissions = null + } + + async init (params, cbs) { + this.cbs = cbs + this.site = params.site + this.user = params.user + this.permissions = params.permissions + await this.requestUpdate() + } + + // rendering + // = + + render () { + if (!this.site || !this.user) { + return html`
` + } + return html` + +
+
+
+ +
+
${this.user.title}
+
${toNiceUrl(this.user.url)}
+
+
+ +

This site would like to:

+
+
Read your public profile
+ ${repeat(this.permissions, perm => html` +
+ + ${perm.description} + ${perm.caps.join(', ')} +
+ `)} +
+ +
+ + +
+
+
+ ` + } + + // event handlers + // = + + updated () { + // adjust height based on rendering + var width = this.shadowRoot.querySelector('div').clientWidth + var height = this.shadowRoot.querySelector('div').clientHeight + bg.modals.resizeSelf({width, height}) + } + + onClickCancel (e) { + e.preventDefault() + this.cbs.reject(new Error('Canceled')) + } + + async onSubmit (e) { + e.preventDefault() + this.cbs.resolve(true) + } +} +CreateUserSessionModal.styles = [commonCSS, inputsCSS, buttonsCSS, css` +.wrapper { + padding: 12px 15px 12px; + width: 340px; +} + +form { + padding: 0; + margin: 0; +} + +.user { + text-align: center; +} + +.user img { + width: 80px; + height: 80px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 10px; +} + +.user .title { + font-size: 18px; + font-weight: 500; +} + +h3 { + margin: 1em 0; + font-weight: 600; + text-align: center; +} + +.permissions { + margin-bottom: 10px; + font-size: 13px; + border: 1px solid #e5e5e5; + border-bottom: 0; + border-radius: 3px; + background: #fafafa; + color: #555; +} + +.permissions > div { + padding: 10px; + border-bottom: 1px solid #e5e5e5; +} + +.permissions .fa-fw { + margin-right: 5px; +} + +.permissions .caps { + float: right; + font-weight: 500; +} + +.form-actions { + display: flex; + justify-content: space-between; +} + +.form-actions button { + padding: 8px 12px; +} +`] + +customElements.define('create-user-session-modal', CreateUserSessionModal) \ No newline at end of file