Implemented FxA

app/templates/expireInfo/index.js

@@ -3,7 +3,7 @@ const raw = require('choo/html/raw');
 const selectbox = require('../selectbox');
 const timeLimitText = require('../timeLimitText');
 
-module.exports = function(state) {
+module.exports = function(state, emit) {
   const el = html`<div> ${raw(
     state.translate('frontPageExpireInfo', {
       downloadCount: '<select id=dlCount></select>',
@@ -11,15 +11,25 @@ module.exports = function(state) {
     })
   )}
   </div>`;
+  if (el.__encoded) {
+    // we're rendering on the server
+    return el;
+  }
 
   const dlCountSelect = el.querySelector('#dlCount');
   el.replaceChild(
     selectbox(
       state.downloadCount || 1,
-      [1, 2, 3, 4, 5, 20],
+      [1, 2, 3, 4, 5, 20, 50, 100, 200],
       num => state.translate('downloadCount', { num }),
       value => {
+        const max = state.user.maxDownloads;
+        if (value > max) {
+          alert('todo: this setting requires an account');
+          value = max;
+        }
         state.downloadCount = value;
+        emit('render');
       }
     ),
     dlCountSelect
@@ -29,10 +39,16 @@ module.exports = function(state) {
   el.replaceChild(
     selectbox(
       state.timeLimit || 86400,
-      [300, 3600, 86400, 604800, 1209600],
+      [300, 3600, 86400, 604800],
       num => timeLimitText(state.translate, num),
       value => {
+        const max = state.user.maxExpireSeconds;
+        if (value > max) {
+          alert('todo: this setting requires an account');
+          value = max;
+        }
         state.timeLimit = value;
+        emit('render');
       }
     ),
     timeSelect

app/templates/userAccount/index.js

@@ -1,33 +1,41 @@
 const html = require('choo/html');
-const assets = require('../../../common/assets');
 
-// eslint-disable-next-line no-unused-vars
-module.exports = function(state) {
-  const notLoggedInMenu = html`
+module.exports = function(state, emit) {
+  const user = state.user;
+  const menu = user.loggedIn
+    ? html`
+    <ul class="account_dropdown">
+      <li class="account_dropdown__text">
+        ${user.email}
+      </li>
+      <li>
+        <a class="account_dropdown__link" onclick=${logout}>${state.translate(
+        'logOut'
+      )}</a>
+      </li>
+    </ul>`
+    : html`
     <ul class="account_dropdown"
           tabindex="-1"
     >
       <li>
-        <a class=account_dropdown__link>${state.translate(
-          'accountMenuOption'
-        )}</a>
-      </li>
-      <li>
-        <a href="/signin"
-          class=account_dropdown__link>${state.translate(
-            'signInMenuOption'
-          )}</a>
+        <a class="account_dropdown__link" onclick=${login}>${state.translate(
+        'signInMenuOption'
+      )}</a>
       </li>
     </ul>
   `;
 
   return html`
     <div class="account">
-      <img
-      src="${assets.get('user.svg')}"
-      onclick=${avatarClick}
-      alt="account"/>
-      ${notLoggedInMenu}
+      <div class="account__avatar">
+        <img
+          class="account__avatar"
+          src="${user.avatar}"
+          onclick=${avatarClick}
+        />
+      </div>
+      ${menu}
     </div>`;
 
   function avatarClick(event) {
@@ -37,6 +45,16 @@ module.exports = function(state) {
     dropdown.focus();
   }
 
+  function login(event) {
+    event.preventDefault();
+    emit('login');
+  }
+
+  function logout(event) {
+    event.preventDefault();
+    emit('logout');
+  }
+
   //the onblur trick makes links unclickable wtf
   /*
   function hideMenu(event) {

app/templates/userAccount/userAccount.css

@@ -5,12 +5,18 @@
   padding: 0;
 }
 
+.account__avatar {
+  height: 32px;
+  width: 32px;
+  border-radius: 50%;
+}
+
 .account_dropdown {
   z-index: 2;
   position: absolute;
   top: 30px;
   left: -15px;
-  width: 150px;
+  min-width: 150px;
   list-style-type: none;
   border: 1px solid #ccc;
   border-radius: 4px;
@@ -62,3 +68,11 @@
   background-color: var(--primaryControlBGColor);
   color: var(--primaryControlFGColor);
 }
+
+.account_dropdown__text {
+  display: block;
+  padding: 0 14px;
+  font-size: 13px;
+  color: var(--lightTextColor);
+  line-height: 24px;
+}