From 38fb1dfd01033359d09e117d38dd178c197b4878 Mon Sep 17 00:00:00 2001
From: Avital Oliver <avital@thewe.net>
Date: Mon, 8 Oct 2012 23:18:39 -0700
Subject: [PATCH] accounts-ui improvements

- additional class on the element with class "login-link-and-dropdown-list"
  with information about which of the three password flows we are in
- a wrapper element around each label/input pair in the password forms
- links to go back to the sign up flow from create account or forgot password
---
 .../login_buttons_dropdown.html               | 55 +++++++++++++------
 .../login_buttons_dropdown.js                 | 40 +++++++++++++-
 packages/accounts-ui/login_buttons.less       |  4 ++
 3 files changed, 78 insertions(+), 21 deletions(-)

diff --git a/packages/accounts-ui-unstyled/login_buttons_dropdown.html b/packages/accounts-ui-unstyled/login_buttons_dropdown.html
index d533f0be00..976d2a05a8 100644
--- a/packages/accounts-ui-unstyled/login_buttons_dropdown.html
+++ b/packages/accounts-ui-unstyled/login_buttons_dropdown.html
@@ -46,7 +46,7 @@
 <!-- LOGGED OUT -->
 <!--            -->
 <template name="loginButtonsLoggedOutDropdown">
-  <div class="login-link-and-dropdown-list">
+  <div class="login-link-and-dropdown-list {{additionalClasses}}">
     <a class="login-link-text" id="login-sign-in-link">Sign in ▾</a>
     {{#if dropdownVisible}}
     <div id="login-dropdown-list" class="accounts-dialog">
@@ -62,13 +62,8 @@
   {{#each services}}
     {{#if isPasswordService}}
       {{#if hasOtherServices}} {{! the password service will always come last }}
-        <div class="or">
-          <span class="hline">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-          <span class="or-text">or</span>
-          <span class="hline">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        </div>
+        {{> loginButtonsLoggedOutPasswordServiceSeparator}}
       {{/if}}
-
       {{> loginButtonsLoggedOutPasswordService}}
     {{else}}
       {{> loginButtonsLoggedOutSingleLoginButton}}
@@ -80,6 +75,14 @@
   {{/unless}}
 </template>
 
+<template name="loginButtonsLoggedOutPasswordServiceSeparator">
+  <div class="or">
+    <span class="hline">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+    <span class="or-text">or</span>
+    <span class="hline">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+  </div>
+</template>
+
 <template name="loginButtonsLoggedOutPasswordService">
   {{#if inForgotPasswordFlow}}
     {{> forgotPasswordForm}}
@@ -110,32 +113,48 @@
           </div>
         {{/if}}
       {{/if}}
-    </div>
-  {{/if}}
-</template>
 
-<template name="loginButtonsFormField">
-  {{#if visible}}
-    <label id="login-{{fieldName}}-label" for="login-{{fieldName}}">
-      {{fieldLabel}}
-    </label>
-    <input id="login-{{fieldName}}" type="{{inputType}}" />
+      {{#if inSignupFlow}}
+        {{> loginButtonsBackToLoginLink}}
+      {{/if}}
+    </div>
   {{/if}}
 </template>
 
 <template name="forgotPasswordForm">
   <div class="login-form">
-    <label id="forgot-password-email-label" for="forgot-password-email">Email</label>
-    <input id="forgot-password-email"/>
+    <div id="forgot-password-email-label-and-input"> {{! XXX we should probably use loginButtonsFormField }}
+      <label id="forgot-password-email-label" for="forgot-password-email">Email</label>
+      <input id="forgot-password-email"/>
+    </div>
 
     {{> loginButtonsMessages}}
 
     <div class="login-button login-button-form-submit" id="login-buttons-forgot-password">
       Reset password
     </div>
+
+    {{> loginButtonsBackToLoginLink}}
   </div>
 </template>
 
+<template name="loginButtonsBackToLoginLink">
+  <div class="additional-link-container">
+    <a id="back-to-login-link" class="additional-link">Sign in</a>
+  </div>
+</template>
+
+<template name="loginButtonsFormField">
+  {{#if visible}}
+    <div id="login-{{fieldName}}-label-and-input">
+      <label id="login-{{fieldName}}-label" for="login-{{fieldName}}">
+        {{fieldLabel}}
+      </label>
+      <input id="login-{{fieldName}}" type="{{inputType}}" />
+    </div>
+  {{/if}}
+</template>
+
 <template name="loginButtonsChangePassword">
   {{#each fields}}
     {{> loginButtonsFormField}}
diff --git a/packages/accounts-ui-unstyled/login_buttons_dropdown.js b/packages/accounts-ui-unstyled/login_buttons_dropdown.js
index 8177229c48..5ef41b25c7 100644
--- a/packages/accounts-ui-unstyled/login_buttons_dropdown.js
+++ b/packages/accounts-ui-unstyled/login_buttons_dropdown.js
@@ -96,10 +96,9 @@
           document.getElementById('login-username').value = usernameOrEmail;
       else
         document.getElementById('login-email').value = usernameOrEmail;
+      // "login-password" is preserved thanks to the preserve-inputs package
 
-      document.getElementById('login-password').value = password;
-
-      // Forge redrawing the `login-dropdown-list` element because of
+      // Force redrawing the `login-dropdown-list` element because of
       // a bizarre Chrome bug in which part of the DIV is not redrawn
       // in case you had tried to unsuccessfully log in before
       // switching to the signup form.
@@ -131,12 +130,47 @@
           document.getElementById('forgot-password-email').value = usernameOrEmail;
 
     },
+    'click #back-to-login-link': function () {
+      loginButtonsSession.resetMessages();
+
+      var username = elementValueById('login-username');
+      var email = elementValueById('login-email')
+            || elementValueById('forgot-password-email'); // Ughh. Standardize on names?
+
+      loginButtonsSession.set('inSignupFlow', false);
+      loginButtonsSession.set('inForgotPasswordFlow', false);
+      // force the ui to update so that we have the approprate fields to fill in
+      Meteor.flush();
+
+      if (document.getElementById('login-username'))
+        document.getElementById('login-username').value = username;
+      if (document.getElementById('login-email'))
+        document.getElementById('login-email').value = email;
+      // "login-password" is preserved thanks to the preserve-inputs package
+      if (document.getElementById('login-username-or-email'))
+        document.getElementById('login-username-or-email').value = email || username;
+    },
     'keypress #login-username, keypress #login-email, keypress #login-username-or-email, keypress #login-password, keypress #login-password-again': function (event) {
       if (event.keyCode === 13)
         loginOrSignup();
     }
   });
 
+  // additional classes that can be helpful in styling the dropdown
+  Template.loginButtonsLoggedOutDropdown.additionalClasses = function () {
+    if (!Accounts.password) {
+      return false;
+    } else {
+      if (loginButtonsSession.get('inSignupFlow')) {
+        return 'login-form-create-account';
+      } else if (loginButtonsSession.get('inForgotPasswordFlow')) {
+        return 'login-form-forgot-password';
+      } else {
+        return 'login-form-sign-in';
+      }
+    }
+  };
+
   Template.loginButtonsLoggedOutDropdown.dropdownVisible = function () {
     return loginButtonsSession.get('dropdownVisible');
   };
diff --git a/packages/accounts-ui/login_buttons.less b/packages/accounts-ui/login_buttons.less
index 55857ce3bc..b372650cf5 100644
--- a/packages/accounts-ui/login_buttons.less
+++ b/packages/accounts-ui/login_buttons.less
@@ -190,6 +190,10 @@
     float: left;
 }
 
+#login-buttons #back-to-login-link {
+    float: right;
+}
+
 .accounts-centered-dialog {
     font-family: 'Helvetica Neue', Helvetica, Arial, default;