Skip to content
This repository has been archived by the owner on Dec 27, 2022. It is now read-only.

Commit

Permalink
Add create-user-session modal
Browse files Browse the repository at this point in the history
  • Loading branch information
pfrazee committed Aug 6, 2019
1 parent 3e63dde commit 8b579a2
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 6 deletions.
12 changes: 6 additions & 6 deletions app/builtin-pages/com/editor/settings-form.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
Expand All @@ -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'}
Expand All @@ -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'}
Expand All @@ -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'}
Expand All @@ -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'}
Expand All @@ -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'}
Expand Down
15 changes: 15 additions & 0 deletions app/lib/strings.js
Original file line number Diff line number Diff line change
@@ -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 = ''
Expand Down Expand Up @@ -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
}
3 changes: 3 additions & 0 deletions app/modals.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -79,6 +80,8 @@ class ModalsWrapper extends LitElement {
return html`<basic-auth-modal></basic-auth-modal>`
case 'user':
return html`<user-modal></user-modal>`
case 'create-user-session':
return html`<create-user-session-modal></create-user-session-modal>`
case 'install-application':
return html`<install-application-modal></install-application-modal>`
}
Expand Down
156 changes: 156 additions & 0 deletions app/modals/create-user-session.js
Original file line number Diff line number Diff line change
@@ -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`<div></div>`
}
return html`
<link rel="stylesheet" href="beaker://assets/font-awesome.css">
<div class="wrapper">
<form @submit=${this.onSubmit}>
<div class="user">
<img src="asset:thumb:${this.user.url}">
<div class="details">
<div class="title">${this.user.title}</div>
<div class="url">${toNiceUrl(this.user.url)}</div>
</div>
</div>
<h3>This site would like to:</h3>
<div class="permissions">
<div><span class="fa-fw far fa-user-circle"></span> Read your public profile</div>
${repeat(this.permissions, perm => html`
<div>
<span class="fa-fw ${perm.icon}"></span>
${perm.description}
<span class="caps">${perm.caps.join(', ')}</span>
</div>
`)}
</div>
<div class="form-actions">
<button type="button" @click=${this.onClickCancel} class="cancel" tabindex="5">Deny</button>
<button type="submit" class="primary" tabindex="6">Allow</button>
</div>
</form>
</div>
`
}

// 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)

0 comments on commit 8b579a2

Please sign in to comment.