[WIP] add user accounts

app.js

@@ -29,6 +29,7 @@ app.use(require('./models/inspect'))
 app.use(require('./models/download'))
 app.use(require('./models/drag-drop'))
 app.use(require('./models/dats'))
+app.use(require('./models/user'))
 app.use(require('./models/error'))
 
 app.route('/', require('./pages/main'))

elements/header.js

@@ -1,10 +1,11 @@
 'use strict'
 
+const version = require('../package.json').version
 const microcomponent = require('microcomponent')
+const gravatar = require('gravatar')
 const html = require('choo/html')
 const assert = require('assert')
 const css = require('sheetify')
-const version = require('../package.json').version
 
 const button = require('./button')
 const DatImport = require('./dat-import')
@@ -30,7 +31,49 @@ const shareButtonIcon = css`
 
 const menuButtonIcon = css`
   :host {
-    width: 1.75em;
+    width: 1em;
+  }
+`
+
+const avatarButtonStyles = css`
+  :host {
+    border: 2px solid var(--color-neutral-40);
+    vertical-align: middle;
+    background-color: var(--color-pink);
+    &:hover, &:focus {
+      border-color: var(--color-white);
+    }
+  }
+`
+
+const menuStyles = css`
+  :host {
+    width: 14rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    position: absolute;
+    z-index: 2;
+    top: 3rem;
+    right: 0;
+    border: 1px solid var(--color-neutral-20);
+    border-radius: .25rem;
+    background-color: var(--color-white);
+    color: var(--color-neutral-60);
+    box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .1);
+    section {
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+      &:first-child {
+        border-bottom: 1px solid var(--color-neutral-20);
+      }
+    }
+    a {
+      text-decoration: none;
+      color: var(--color-neutral-80);
+      &:hover, &:focus {
+        color: var(--color-blue-hover);
+      }
+    }
   }
 `
 
@@ -42,7 +85,7 @@ function HeaderElement () {
   return component
 
   function render () {
-    var { isReady, onimport, oncreate, onreport } = this.props
+    var { isReady, session, onimport, oncreate, onreport, onlogin, onlogout, onprofile, onhomepage } = this.props
     var { showMenu, willShowMenu } = this.state
 
     if (typeof willShowMenu === 'boolean') {
@@ -65,16 +108,37 @@ function HeaderElement () {
       onclick: oncreate
     })
 
-    var loginButton = button.header('Log In', {
-      class: 'ml3 v-mid color-neutral-30 hover-color-white f7 f6-l dn'
+    var loginButton = button.green('Log In', {
+      class: 'ml3 v-mid color-neutral-30 hover-color-white f7 f6-l',
+      onclick: onlogin
     })
 
     var menuButton = button.icon('Open Menu', {
-      icon: icon('menu', { class: menuButtonIcon }),
+      icon: icon('info', { class: menuButtonIcon }),
       class: 'ml3 v-mid color-neutral-20 hover-color-white pointer',
       onclick: toggle
     })
 
+    var avatar = {
+      size: 26
+    }
+    if (session) {
+      avatar.url = gravatar.url(session.email, {
+        s: avatar.size * 2,
+        r: 'pg',
+        d: '404',
+        protocol: 'https'
+      })
+    }
+
+    var avatarButton = html`
+      <img  onclick=${toggle}
+            src=${avatar.url}
+            width=${avatar.size}
+            height=${avatar.size}
+            class="${avatarButtonStyles} ml4" />
+    `
+
     function toggle () {
       if (component.state.showMenu) hide()
       else show()
@@ -96,27 +160,59 @@ function HeaderElement () {
       if (!component._element.contains(e.target)) hide()
     }
 
+    function onclicklogout () {
+      component.state.willShowMenu = false
+      onlogout()
+    }
+
     return html`
       <header class="${header}">
         <div class="fr relative">
           ${importButton.render({
             onsubmit: onimport
           })}
           ${createButton}
-          ${loginButton}
-          ${menuButton}
+          ${session
+            ? html`
+                ${avatarButton}
+              `
+            : html`
+                <span>
+                  ${menuButton}
+                  ${loginButton}
+                </span>
+              `}
           ${showMenu
             ? html`
-            <div class="absolute right-0 w5 pa3 bg-neutral">
-              <h3 class="f6 f5-l mb2">
-                Dat Desktop ${version}
-              </h3>
-              <p class="f6 f5-l mb3">
-                Dat Desktop is a peer to peer sharing app built for humans by humans.
-              </p>
-              <p class="f6 f5-l">
-                <a onclick=${onreport} href="#" class="color-neutral-50  hover-color-neutral-70">Report Bug</a>
-              </p>
+            <div class="${menuStyles}">
+              ${session
+                ? html`
+                    <section class="f7">
+                      ${session.email}
+                    </section>
+                  `
+                : html`
+                    <section class="f7">
+                      Dat Desktop is a peer to peer sharing app built for humans by humans.
+                    </section>
+                  `}
+              <section>
+                ${session
+                  ? html`
+                      <a onclick=${onprofile} href="#" class="db ttu mb2">Profile</a>
+                    `
+                  : ''}
+                    <a onclick=${onreport} href="#" class="db ttu mb2">Report Bug</a>
+                ${session
+                  ? html`
+                      <a onclick=${onclicklogout} href="#" class="db ttu mb2">Log out</a>
+                    `
+                  : ''}
+              </section>
+              <section class="f7">
+                Version ${version} | Built by
+                <a onclick=${onhomepage} href="#">datproject.org</a>
+              </section>
             </div>
               `
             : ''}
@@ -127,6 +223,7 @@ function HeaderElement () {
 
   function update (props) {
     return props.isReady !== this.props.isReady ||
-      typeof this.state.willShowMenu === 'boolean'
+      typeof this.state.willShowMenu === 'boolean' ||
+      props.session !== this.props.session
   }
 }

elements/input.js

@@ -0,0 +1,82 @@
+'use strict'
+
+const microcomponent = require('microcomponent')
+const html = require('choo/html')
+const css = require('sheetify')
+const icon = require('./icon')
+
+var baseStyles = css`
+  :host {
+    --input-height: 2.75rem;
+    --icon-height: 1.2rem;
+    height: var(--input-height);
+    border: 0;
+    svg {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      padding-top: calc(var(--icon-height) - .35rem);
+      padding-left: .75rem;
+      pointer-events: none;
+      display: block;
+      width: var(--icon-height);
+      height: var(--icon-height);
+      transition: color .025s ease-out;
+      color: var(--color-neutral-30);
+    }
+    input {
+      width: 100%;
+      height: var(--input-height);
+      position: relative;
+      padding-top: 0;
+      padding-right: .5rem;
+      padding-bottom: 0;
+      padding-left: 2.5rem;
+      font-size: 1rem;
+      font-weight: 600;
+      border: 1px solid var(--color-neutral-20);
+      background-color: var(--color-white);
+      color: var(--color-green-hover);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      &:hover,
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+`
+
+module.exports = inputElement
+
+function inputElement (name) {
+  var component = microcomponent(`input-${name}`)
+  component.on('render', render)
+  component.on('update', update)
+  return component
+
+  function render () {
+    var { name, type, placeholder, value, icon: inputIcon } = this.props
+    var classNames = baseStyles
+    if (this.props.class) classNames += ' ' + this.props.class
+
+    return html`
+      <label
+        for="${name}"
+        class="relative mt2 mb2 db ${classNames}">
+        <input
+          type="${type}"
+          name="${name}"
+          placeholder="${placeholder}"
+          value="${value}">
+        ${icon(inputIcon)}
+      </label>
+    `
+  }
+
+  function update () {
+    return false
+  }
+}

elements/login.js

@@ -0,0 +1,93 @@
+var microcomponent = require('microcomponent')
+var html = require('choo/html')
+var input = require('./input')
+var button = require('./button')
+var FormData = window.FormData
+
+module.exports = function () {
+  var component = microcomponent({
+    name: 'login',
+    state: {
+      email: '',
+      password: '',
+      inputs: {
+        email: input('email'),
+        password: input('password')
+      }
+    }
+  })
+  component.on('render', render)
+  component.on('update', update)
+  return component
+
+  function render () {
+    var { onlogin, onregister, onresetpassword, onexit, error } = this.props
+    var { email, password, inputs } = this.state
+
+    function onsubmit (ev) {
+      ev.preventDefault()
+      var data = new FormData(ev.target)
+      var email = data.get('email')
+      var password = data.get('password')
+      onlogin({ email, password })
+      Object.assign(component.state, { email, password })
+    }
+
+    function onclickresetpassword (ev) {
+      ev.preventDefault()
+      onresetpassword()
+    }
+
+    function onclickregister (ev) {
+      ev.preventDefault()
+      onregister()
+    }
+
+    return html`
+      <main class="flex items-center">
+        <div class="mw5 mb5 center">
+          <h1 class="f4 mb3">Log In</h1>
+          <form onsubmit=${onsubmit}>
+
+            ${inputs.email.render({
+              type: 'email',
+              name: 'email',
+              placeholder: 'E-Mail',
+              icon: 'letter',
+              value: email
+            })}
+
+            ${inputs.password.render({
+              type: 'password',
+              name: 'password',
+              placeholder: 'Password',
+              icon: 'lock',
+              value: password
+            })}
+
+            ${button.green('Log In', {
+              class: 'w-100 mb3'
+            })}
+
+            <p class="f7">
+              <button onclick=${onclickresetpassword} class="mr3 pa0 bg-transparent color-blue hover-color-blue-hover">Forgot Password?</button>
+              <button onclick=${onclickregister} class="pa0 bg-transparent color-blue hover-color-blue-hover">No Account yet? Register »</button>
+            </p>
+          </form>
+          ${error
+            ? html`
+              <p class="mt3 f7 color-red">
+                Oops. ${error.message}
+              </p>
+              `
+            : ''}
+          <button onclick=${onexit}>Exit</button>
+        </div>
+      </main>
+    `
+  }
+
+  function update (props) {
+    return props.error !== this.props.error
+  }
+}