Work on the user account system

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

Fixes username handling on sandstorm.

Fixes #149.

client/components/boards/boardBody.styl

@@ -21,6 +21,7 @@
 
     &.is-dragging-active
 
+      .list-composer,
       .open-minicard-composer
         display: none
 

client/components/lists/main.styl

@@ -103,25 +103,22 @@
   .ps-scrollbar-y-rail
     transform: translateX(2px)
 
-.open-minicard-composer
-  border-radius: 2px
-  color: #8c8c8c
-  display: block
-  padding: 7px 10px
-  position: relative
-  text-decoration: none
-  animation: fadeIn 0.3s
+  .open-minicard-composer
+    border-radius: 2px
+    color: #8c8c8c
+    display: block
+    padding: 7px 10px
+    position: relative
+    text-decoration: none
+    animation: fadeIn 0.3s
 
-  i.fa
-    margin-right: 7px
+    i.fa
+      margin-right: 7px
 
-  &:hover
-    background: white
-    color: #222
-    box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-  &::selection
-    background: transparent
+    &:hover
+      background: #fafafa
+      color: #222
+      box-shadow: 0 1px 2px rgba(0,0,0,.2)
 
 @keyframes fadeIn
   from

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

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

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;
   }
 });
 

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
 

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

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>

client/components/sidebar/sidebarFilters.js

@@ -6,12 +6,12 @@ BlazeComponent.extendComponent({
   events: function() {
     return [{
       'click .js-toggle-label-filter': function(event) {
-        Filter.labelIds.toogle(this._id);
+        Filter.labelIds.toogle(this.currentData()._id);
         Filter.resetExceptions();
         event.preventDefault();
       },
       'click .js-toogle-member-filter': function(event) {
-        Filter.members.toogle(this._id);
+        Filter.members.toogle(this.currentData()._id);
         Filter.resetExceptions();
         event.preventDefault();
       },

client/components/users/router.js

@@ -1,5 +1,5 @@
-_.each(['signIn', 'signUp', 'resetPwd',
-  'forgotPwd', 'enrollAccount', 'changePwd'], function(routeName) {
+_.each(['signIn', 'signUp', 'resetPwd', 'forgotPwd', 'enrollAccount'],
+  function(routeName) {
   AccountsTemplates.configureRoute(routeName, {
     layoutTemplate: 'userFormsLayout'
   });
@@ -20,9 +20,3 @@ Router.route('/profile/:username', {
     };
   }
 });
-
-Router.route('/settings', {
-  name: 'Settings',
-  template: 'settings',
-  layoutTemplate: 'AuthLayout'
-});

client/components/users/userForm.styl

@@ -1,49 +1,50 @@
-.at-form-landing-logo
-  width: 275px
-  margin: auto
-  margin-top: 50px
-  margin-top: 17vh
-
-  img
+.auth-layout
+  .at-form-landing-logo
     width: 275px
+    margin: auto
+    margin-top: 50px
+    margin-top: 17vh
 
-.at-form
-  margin: auto
-  width: 275px
-  padding: 25px
-  margin-top: 20px
-  padding-bottom: 10px
-  background: #fff
-  border-radius: 3px
-  border: 1px solid #dbdbdb
-  border-bottom-color: #c2c2c2
-  box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
+    img
+      width: 275px
 
-  .at-link
-    color: darken(#27AE60, 40%)
+  .at-form
+    margin: auto
+    width: 275px
+    padding: 25px
+    margin-top: 20px
+    padding-bottom: 10px
+    background: #fff
+    border-radius: 3px
+    border: 1px solid #dbdbdb
+    border-bottom-color: #c2c2c2
+    box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
 
-  label
-    margin-bottom: 3px
+    .at-link
+      color: darken(#27AE60, 40%)
 
-  input
-    width: 100%
+    label
+      margin-bottom: 3px
 
-  .at-title
-    background: #F7F7F7
-    margin: -25px
-    padding: 15px 25px 5px
-    margin-bottom: 20px
-    border-bottom: 1px solid #dcdcdc
-    color: darken(white, 70%)
-    font-weight: bold
+    input
+      width: 100%
 
-  .at-signup-link,
-  .at-signin-link,
-  .at-forgotPwd
-    font-size: 0.9em
-    margin-top: 15px
-    color: darken(white, 70%)
-
-    .at-signUp,
-    .at-signIn
+    .at-title
+      background: #F7F7F7
+      margin: -25px
+      padding: 15px 25px 5px
+      margin-bottom: 20px
+      border-bottom: 1px solid #dcdcdc
+      color: darken(white, 70%)
       font-weight: bold
+
+    .at-signup-link,
+    .at-signin-link,
+    .at-forgotPwd
+      font-size: 0.9em
+      margin-top: 15px
+      color: darken(white, 70%)
+
+      .at-signUp,
+      .at-signIn
+        font-weight: bold

client/components/users/userHeader.jade

@@ -1,23 +1,44 @@
 template(name="headerUserBar")
-  a#header-user-bar.js-open-header-member-menu
-    .header-user-bar-name
+  a#header-user-bar
+    .header-user-bar-name.js-open-header-member-menu
       i.fa.fa-chevron-down
       if currentUser.profile.name
         = currentUser.profile.name
       else
         = currentUser.username
-    +userAvatar(user=currentUser)
+    .header-user-bar-avatar.js-change-avatar
+      +userAvatar(user=currentUser)
 
 template(name="memberMenuPopup")
   ul.pop-over-list
-    li: a(href="{{pathFor route='Profile' username=currentUser.username}}") {{_ 'profile'}}
-    li: a.js-language {{_ 'language'}}
-    li: a(href = "{{pathFor route='Settings'}}") {{_ 'settings'}}
+    with currentUser
+      li: a.js-edit-profile Edit Profile…
+    li: a.js-change-avatar Change Avatar…
+    li: a.js-change-password Change Password…
+    li: a.js-change-language Change Language…
   hr
   ul.pop-over-list
     li: a.js-logout {{_ 'log-out'}}
 
-template(name="setLanguagePopup")
+template(name="editProfilePopup")
+  form
+    label
+      | {{_ "fullname"}}
+      input.js-profile-fullname(type="text" value=profile.name autofocus)
+    label
+      | {{_ "username"}}
+      input.js-profile-username(type="text" value=username)
+    label
+      | Initials
+      input.js-profile-initials(type="text" value=profile.initials)
+    input.primary.wide(type="submit" value="{{_ 'save'}}")
+
+template(name="changeAvatarPopup")
+
+template(name="changePasswordPopup")
+  +atForm(state='changePwd')
+
+template(name="changeLanguagePopup")
   ul.pop-over-list
     each languages
       li(class="{{# if isCurrentLanguage}}active{{/if}}")

client/components/users/userHeader.js

@@ -1,8 +1,64 @@
 Template.headerUserBar.events({
-  'click .js-open-header-member-menu': Popup.open('memberMenu')
+  'click .js-open-header-member-menu': Popup.open('memberMenu'),
+  'click .js-change-avatar': Popup.open('changeAvatar')
 });
 
-Template.setLanguagePopup.helpers({
+Template.memberMenuPopup.events({
+  'click .js-edit-profile': Popup.open('editProfile'),
+  'click .js-change-avatar': Popup.open('changeAvatar'),
+  'click .js-change-password': Popup.open('changePassword'),
+  'click .js-change-language': Popup.open('changeLanguage'),
+  'click .js-logout': function(evt) {
+    evt.preventDefault();
+
+    AccountsTemplates.logout();
+  }
+});
+
+Template.editProfilePopup.events({
+  submit: function(evt, tpl) {
+    evt.preventDefault();
+    var fullname = $.trim(tpl.find('.js-profile-fullname').value);
+    var username = $.trim(tpl.find('.js-profile-username').value);
+    var initials = $.trim(tpl.find('.js-profile-initials').value);
+    Users.update(Meteor.userId(), {$set: {
+      'profile.fullname': fullname,
+      'profile.initials': initials
+    }});
+    // XXX We should report the error to the user.
+    if (username !== Meteor.user().username) {
+      Meteor.call('setUsername', username);
+    }
+    Popup.back();
+  }
+});
+
+// We display the form to change the password in a popup window that already
+// have a title, so we unset the title automatically displayed by useraccounts.
+AccountsTemplates.configure({
+  texts: {
+    title: {
+      changePwd: ''
+    }
+  }
+});
+
+AccountsTemplates.configureRoute('changePwd', {
+  redirect: function() {
+    // XXX We should emit a notification once we have a notification system.
+    // Currently the user has no indication that his modification has been
+    // applied.
+    Popup.back();
+  }
+});
+
+// XXX For some reason the useraccounts autofocus isnt working in this case.
+// See https://github.com/meteor-useraccounts/core/issues/384
+Template.changePasswordPopup.onRendered(function() {
+  this.find('#at-field-current_password').focus();
+});
+
+Template.changeLanguagePopup.helpers({
   languages: function() {
     return _.map(TAPi18n.getLanguages(), function(lang, tag) {
       return {
@@ -16,18 +72,7 @@ Template.setLanguagePopup.helpers({
   }
 });
 
-Template.memberMenuPopup.events({
-  'click .js-language': Popup.open('setLanguage'),
-  'click .js-logout': function(evt) {
-    evt.preventDefault();
-
-    Meteor.logout(function() {
-      Router.go('Home');
-    });
-  }
-});
-
-Template.setLanguagePopup.events({
+Template.changeLanguagePopup.events({
   'click .js-set-language': function(evt) {
     Users.update(Meteor.userId(), {
       $set: {