Work on the user account system

Allow a user to modifies its name, username, initials, and password.

Fixes username handling on sandstorm.

Fixes #149.

6 files changed, 42 insertions, 20 deletions

diff --git a/client/components/main/header.styl b/client/components/main/header.styl
index 8e1682eb..e6f13239 100644
--- a/client/components/main/header.styl
+++ b/client/components/main/header.styl
@@ -47,12 +47,14 @@
     #header-user-bar
       margin: 2px 0
 
-      .member
-        width: 24px
-        height: @width
+      .header-user-bar-avatar
         float: left
-        margin: 0
-        margin-top: 1px
+
+        .member
+          width: 24px
+          height: @width
+          margin: 0
+          margin-top: 1px
 
       .header-user-bar-name
         margin: 4px 8px 0 0
diff --git a/client/components/main/layouts.jade b/client/components/main/layouts.jade
index 18df4d9e..d1ea36b5 100644
--- a/client/components/main/layouts.jade
+++ b/client/components/main/layouts.jade
@@ -5,9 +5,10 @@ head
   link(rel="shortcut icon" href="/favicon.png")
 
 template(name="userFormsLayout")
-  h1.at-form-landing-logo
-    img(src="/logo.png" title="LibreBoard")
-  +yield
+  section.auth-layout
+    h1.at-form-landing-logo
+      img(src="/logo.png" title="LibreBoard")
+    +yield
 
 template(name="defaultLayout")
   #surface
diff --git a/client/components/main/popup.js b/client/components/main/popup.js
index 48847525..8672d08a 100644
--- a/client/components/main/popup.js
+++ b/client/components/main/popup.js
@@ -31,6 +31,19 @@ Popup.template.events({
   },
   'click .js-confirm': function() {
     this.__afterConfirmAction.call(this);
+  },
+  // This handler intends to solve a pretty tricky bug with our popup
+  // transition. The transition is implemented using a large container
+  // (.content-container) that is moved on the x-axis (from 0 to n*PopupSize)
+  // inside a wrapper (.container-wrapper) with a hidden overflow. The problem
+  // is that sometimes the wrapper is scrolled -- even if there are no
+  // scrollbars. This happen for instance when the newly opened popup has some
+  // focused field, the browser will automatically scroll the wrapper, resulting
+  // in moving the whole popup container outside of the popup wrapper. To
+  // disable this behavior we have to manually reset the scrollLeft position
+  // whenever it is modified.
+  'scroll .content-wrapper': function(evt) {
+    evt.currentTarget.scrollLeft = 0;
   }
 });
 
diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl
index cf1fd46e..43b0dae7 100644
--- a/client/components/main/popup.styl
+++ b/client/components/main/popup.styl
@@ -6,8 +6,6 @@
   border: 1px solid #dbdbdb
   border-bottom-color: #c2c2c2
   box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
-  display: none
-  overflow: hidden
   position: absolute
   width: 300px
   z-index: 99999
@@ -20,12 +18,10 @@
   input[type="text"],
   input[type="email"],
   input[type="password"]
+  input[type="file"]
     margin: 4px 0 12px
     width: 100%
 
-  input[type="file"]
-    width: 240px
-
   select
     width: 100%
     margin-bottom: 14px
@@ -35,9 +31,6 @@
     margin: 4px 0 12px
     width: 100%
 
-  img
-    max-width: 270px
-
   .header
     height: 36px
     position: relative
@@ -80,6 +73,7 @@
 
   .content-wrapper
     width: 100%
+    overflow: hidden
 
   .content-container
     width: 5000px
@@ -92,7 +86,7 @@
       float: left
 
       &.no-height
-        height: 0
+        height: 20px
 
   .quiet
     padding: 6px 6px 4px
@@ -113,6 +107,17 @@
         height: 4px
         width: 4px
 
+  .at-form
+    .at-error, .at-result
+      padding: 8px 12px
+      margin: -8px -10px 10px
+
+    .at-error
+      background: #ef9a9a
+
+    .at-result
+      background: #b2dfdb
+
 .select-members-list
   margin-bottom: 8px
 
diff --git a/client/components/main/popup.tpl.jade b/client/components/main/popup.tpl.jade
index dade8449..be528f46 100644
--- a/client/components/main/popup.tpl.jade
+++ b/client/components/main/popup.tpl.jade
@@ -1,8 +1,8 @@
-.pop-over.clearfix(
+.pop-over(
   class="{{#unless title}}miniprofile{{/unless}}"
   class=currentBoard.colorClass
   class="{{#unless title}}no-title{{/unless}}"
-  style="display:block; left:{{offset.left}}px; top:{{offset.top}}px;")
+  style="left:{{offset.left}}px; top:{{offset.top}}px;")
   .header
     a.back-btn.js-back-view(class="{{#unless hasPopupParent}}is-hidden{{/unless}}")
       i.fa.fa-chevron-left
@@ -20,3 +20,4 @@
           Hopefully the @last helper will come soon (or at least @index)
         .content(class="{{#unless $eq popupName ../popupName}}no-height{{/unless}}")
           +Template.dynamic(template=popupName data=dataContext)
+      .clearfix
diff --git a/client/components/main/templates.html b/client/components/main/templates.html
index 4828663a..c252f1e4 100644
--- a/client/components/main/templates.html
+++ b/client/components/main/templates.html
@@ -5,7 +5,7 @@
 <template name='message'>
     <div class="big-message quiet {{ color }}">
         <h1>{{_ label}}</h1>
-        {{#with pathFor route='Login'}}
+        {{#with pathFor route='atSignIn'}}
             <p>{{{_ 'page-maybe-private' this}}}</p>
         {{/with}}
     </div>