Improve authentication forms

Trustroots · Aug 4, 2017 · b5f66d5 · b5f66d5
1 parent 4cfa4be
commit b5f66d5
Show file tree

Hide file tree

Showing 14 changed files with 90 additions and 49 deletions.
diff --git a/modules/core/client/directives/tr-boards.client.directive.js b/modules/core/client/directives/tr-boards.client.directive.js
@@ -142,6 +142,13 @@
             'license_url': 'https://unsplash.com/license',
             'file': 'mh-woman-bridge.jpg'
           },
+          'sahara': {
+            'name': 'Nova Togatorop',
+            'url': 'http://novatogatorop.com/',
+            'license': 'CC',
+            'license_url': 'https://unsplash.com/license',
+            'file': 'sahara.jpg'
+          },
           'sahara-backpacker': {
             'name': 'Nova Togatorop',
             'url': 'http://novatogatorop.com/',

diff --git a/modules/core/client/img/board/sahara.jpg b/modules/core/client/img/board/sahara.jpg
diff --git a/modules/pages/client/views/faq-general.client.view.html b/modules/pages/client/views/faq-general.client.view.html
@@ -43,6 +43,26 @@ <h3>Why is Trustroots invite only?</h3>
   Read more from our <a href="https://ideas.trustroots.org/2017/03/25/trustroots-goes-invitation-only/">blog post</a>.
 </div>
 
+<div class="faq-question" id="how-waitinglist-works">
+  <h3>How waiting list works?</h3>
+  <ul>
+    <li>You sign up to the list.</li>
+    <li>You verify your email.</li>
+    <li>You get your own invite link.</li>
+    <li>You invite friends by giving them your link.</li>
+    <li>Once you have 5 friends on the waiting list, we send you and your friends a link to join the site.</li>
+  </ul>
+  <p ng-if="!app.user" class="text-center">
+    <br>
+    <a ui-sref="signup" class="btn btn-lg btn-primary">Sign up!</a>
+  </p>
+</div>
+
+<div class="faq-question" id="i-did-not-receive-invite-code">
+  <h3>I did not receive invite code</h3>
+  If you know that you should've received invite code from the waiting list, check first your email spam folder. If you don't find the email there, please <a ui-sref="support">contact us</a>.
+</div>
+
 <div class="faq-question" id="why-is-there-facebook-connection">
   <h3>Why is there Facebook connection?</h3>
   So that people who have their data, photos and connections on Facebook can release their information to Trustroots. Using Facebook from Trustroots is optional. <a href="https://ideas.trustroots.org/2014/12/29/life-outside-big-blue-box/">Read our blog post</a> about this.

diff --git a/modules/pages/client/views/faq.client.view.html b/modules/pages/client/views/faq.client.view.html
@@ -49,6 +49,12 @@ <h3 class="panel-title">
               <a ui-sref=".general({'#': 'why-is-trustroots-invite-only'})" class="list-group-item">
                 Why is Trustroots invite only?
               </a>
+              <a ui-sref=".general({'#': 'how-waitinglist-works'})" class="list-group-item">
+                How waitinglist works?
+              </a>
+              <a ui-sref=".general({'#': 'i-did-not-receive-invite-code'})" class="list-group-item">
+                I did not receive invite code
+              </a>
               <a ui-sref=".general({'#': 'why-is-there-facebook-connection'})" class="list-group-item">
                 Why is there Facebook connection?
               </a>

diff --git a/modules/users/client/less/authentication.less b/modules/users/client/less/authentication.less
@@ -11,6 +11,9 @@
   input:focus {
     box-shadow: 0 0 10px rgba(0,0,0,.1);
   }
+  label.lead {
+    margin-bottom: 5px;
+  }
 }
 
 .btn.btn-default.btn-password-toggle {

diff --git a/modules/users/client/views/authentication/confirm-email-invalid.client.view.html b/modules/users/client/views/authentication/confirm-email-invalid.client.view.html
@@ -4,8 +4,8 @@
 
       <div class="row">
         <div class="col-xs-12 text-center">
-          <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" />
-          <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" />
+          <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" aria-hidden="true">
+          <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" aria-hidden="true">
           <br><br>
         </div>
       </div>

diff --git a/modules/users/client/views/authentication/confirm-email.client.view.html b/modules/users/client/views/authentication/confirm-email.client.view.html
@@ -4,8 +4,8 @@
 
       <div class="row">
         <div class="col-xs-12 text-center">
-          <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" />
-          <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" />
+          <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" aria-hidden="true">
+          <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" aria-hidden="true">
           <br><br>
         </div>
       </div>

diff --git a/modules/users/client/views/authentication/signin.client.view.html b/modules/users/client/views/authentication/signin.client.view.html
@@ -1,22 +1,16 @@
-<section class="container board container-fullscreen" tr-boards="'bokeh'">
+<section class="container board container-fullscreen" tr-boards="'sahara'">
   <div class="middle-wrapper middle-wrapper-horizontal">
     <div class="middle-content">
 
       <div class="row">
-        <div class="col-xs-12 text-center">
-          <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" />
-          <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" />
-          <br><br>
-          <p class="lead" ng-show="auth.continue">Sign in to continue.</p>
-        </div>
-        <div class="col-xs-offset-2 col-xs-8 col-sm-offset-4 col-sm-4 col-lg-offset-5 col-lg-2">
+        <div class="col-xs-12 col-sm-offset-4 col-sm-4 col-lg-offset-5 col-lg-2">
           <form name="signinForm"
                 class="form-auth"
                 autocomplete="off"
                 ng-submit="auth.signin()" >
             <fieldset>
               <div class="form-group">
-                <label for="username" class="sr-only">Email or username</label>
+                <label for="username" class="lead">Email or username</label>
                 <input type="text"
                        autocapitalize="off"
                        required
@@ -28,7 +22,7 @@
                        ng-disabled="auth.isLoading">
               </div>
               <div class="form-group">
-                <label for="password" class="sr-only">Password</label>
+                <label for="password" class="lead">Password</label>
                 <div class="input-group">
                   <input required
                          id="password"
@@ -52,11 +46,20 @@
                   </span>
                 </div>
               </div>
+              <a ui-sref="forgot({ userhandle: auth.credentials.username })"
+                 class="btn btn-inverse"
+                 ng-class="{ 'btn-lg btn-block': auth.authError }">
+                Forgot?
+                <span ng-if="auth.authError">Recover your password</span>
+              </a>
               <div class="text-center form-group">
+                <br><br>
                 <button type="submit"
                         class="btn btn-default btn-lg"
                         ng-disabled="auth.isLoading">
-                  <span ng-if="!auth.isLoading">Login</span>
+                  <span ng-if="!auth.isLoading">
+                    {{ auth.continue ? 'Sign in to continue' : 'Login' }}
+                  </span>
                   <span ng-if="auth.isLoading">Wait...</span>
                 </button>
               </div>
@@ -67,22 +70,11 @@
       <div class="row">
         <div class="col-xs-12 text-center text-white">
           <p>
-            <br>
-            <a ui-sref="forgot({
-              userhandle: auth.credentials.username
-            })"
-               class="btn btn-link"
-               ng-class="{
-                'btn-sm': !auth.authError,
-                'btn-lg': auth.authError
-               }">
-              Forgot your password?
-            </a><br>
-            <a ui-sref="signup" class="btn btn-link btn-sm">Become a member</a>
+            <a ui-sref="signup" class="btn btn-inverse">Become a member</a>
           </p>
           <p class="visible-xs-block">
             <br>
-            <a ui-sref="home" class="btn btn-inverse">Back home</a>
+            <a ui-sref="home" class="btn btn-link">Back home</a>
           </p>
         </div>
       </div><!-- .row-->

diff --git a/modules/users/client/views/authentication/signup.client.view.html b/modules/users/client/views/authentication/signup.client.view.html
@@ -13,7 +13,7 @@ <h3>Join Trustroots</h3>
           <br>
           Trustroots is invitation only.
           <a ui-sref="faq.general({ '#': 'why-is-trustroots-invite-only' })" class="text-muted">
-            Read more
+            <u>Read more</u>
           </a>
           <br><br>
         </p>
@@ -49,9 +49,13 @@ <h3>Join Trustroots</h3>
 
           <p class="lead text-muted">
             <br><br>
-            No invite code? Trustroots is a trust network.
-            To join with friends, sign up to the waiting list
-            below and we’ll email you details.
+            <strong>No invite code?</strong>
+            You can join together as a group with trusted friends.
+            Sign up to the waiting list below and we’ll email you details.
+            <br>
+            <a ui-sref="faq.general({ '#': 'how-waitinglist-works' })" class="text-muted">
+              <u>Read more</u>
+            </a>
           </p>
 
           <br>

diff --git a/modules/users/client/views/authentication/welcome.client.view.html b/modules/users/client/views/authentication/welcome.client.view.html
@@ -1,8 +1,8 @@
 <section class="container container-fullscreen board page-welcome" tr-boards="'bokeh'">
   <div class="row">
     <div class="col-xs-offset-2 col-xs-8 col-md-offset-3 col-md-6 text-center">
-      <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" />
-      <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" />
+      <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" aria-hidden="true">
+      <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" aria-hidden="true">
       <h2>Hey, welcome!</h2>
       <p class="lead">
         Being able to rely on strangers, on communities, on trust, are values that are worth preserving. Go travel & spread the word.

diff --git a/modules/users/client/views/password/forgot-password.client.view.html b/modules/users/client/views/password/forgot-password.client.view.html
@@ -1,28 +1,27 @@
 <section class="container container-spacer board container-fullscreen" tr-boards="'bokeh'">
   <div class="row">
     <div class="col-xs-12 text-center">
-      <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" />
-      <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" />
+      <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" aria-hidden="true">
+      <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" aria-hidden="true">
     </div>
   </div>
   <div class="row">
     <h3 class="col-xs-12 text-center">Restore your password</h3>
-    <div class="col-xs-offset-2 col-xs-8 col-sm-offset-4 col-sm-4 col-md-offset-5 col-md-2">
+    <div class="col-xs-offset-1 col-xs-10 col-sm-offset-4 col-sm-4 col-md-offset-5 col-md-2">
       <br>
       <form name="resetForm"
             ng-submit="forgotPassword.askForPasswordReset()"
             class="form-auth form-horizontal"
             autocomplete="off">
         <fieldset>
-          <div class="form-group">
-            <label for="username" class="sr-only">Email or username</label>
+          <div class="form-group text-center">
+            <label for="username">Email or username</label>
             <input type="text"
                    required
                    id="username"
                    name="username"
                    class="form-control input-lg"
                    ng-model="forgotPassword.credentials.username"
-                   placeholder="Email or username"
                    ng-disabled="forgotPassword.isLoading">
           </div>
           <div class="text-center form-group">

diff --git a/modules/users/client/views/password/reset-password-invalid.client.view.html b/modules/users/client/views/password/reset-password-invalid.client.view.html
@@ -1,8 +1,8 @@
 <section class="container container-spacer board container-fullscreen" tr-boards="'bokeh'">
   <div class="row">
     <div class="col-xs-12 text-center">
-      <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" />
-      <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" />
+      <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" aria-hidden="true">
+      <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" aria-hidden="true">
     </div>
   </div>
   <div class="row">

diff --git a/modules/users/client/views/password/reset-password-success.client.view.html b/modules/users/client/views/password/reset-password-success.client.view.html
@@ -1,8 +1,8 @@
 <section class="container container-spacer board container-fullscreen" tr-boards="'bokeh'">
   <div class="row">
     <div class="col-xs-12 text-center">
-      <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" />
-      <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" />
+      <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" aria-hidden="true">
+      <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" aria-hidden="true">
     </div>
   </div>
   <div class="row">

diff --git a/modules/users/client/views/password/reset-password.client.view.html b/modules/users/client/views/password/reset-password.client.view.html
@@ -1,13 +1,13 @@
 <section class="container container-spacer board container-fullscreen" tr-boards="'bokeh'">
   <div class="row">
     <div class="col-xs-12 text-center">
-      <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" />
-      <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" />
+      <img class="hidden-xs" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="120" height="120" aria-hidden="true">
+      <img class="visible-xs-inline-block" src="/modules/core/img/tree-color.svg" alt="Trustroots" width="80" height="80" aria-hidden="true">
     </div>
   </div>
   <div class="row">
     <h3 class="col-xs-12 text-center">Reset your password</h3>
-    <div class="col-xs-offset-2 col-xs-8 col-sm-offset-4 col-sm-4 col-md-offset-5 col-md-2">
+    <div class="col-xs-offset-1 col-xs-10 col-sm-offset-4 col-sm-4 col-md-offset-5 col-md-2">
       <br>
       <form name="resetForm" ng-submit="resetPassword.resetUserPassword()" class="form-horizontal form-auth" autocomplete="off">
         <fieldset>
@@ -21,7 +21,13 @@ <h3 class="col-xs-12 text-center">Reset your password</h3>
                    placeholder="New Password"
                    ng-model="resetPassword.passwordDetails.newPassword"
                    ng-minlength="8"
-                   tr-trustpass="{ special: false, number: false, lowercase: false, uppercase: false, messageDone: 'Your password is secure and you are good to go!' }">
+                   tr-trustpass="{
+                     special: false,
+                     number: false,
+                     lowercase: false,
+                     uppercase: false,
+                     messageDone: 'Your password is secure and you are good to go!'
+                   }">
           </div>
           <div class="form-group">
             <label for="verifyPassword">Verify Password</label>
@@ -35,7 +41,11 @@ <h3 class="col-xs-12 text-center">Reset your password</h3>
                    ng-model="resetPassword.passwordDetails.verifyPassword">
           </div>
           <div class="text-center form-group">
-            <button type="submit" class="btn btn-lg btn-default" ng-disabled="resetForm.$invalid">Update Password</button>
+            <button type="submit"
+                    class="btn btn-lg btn-default"
+                    ng-disabled="resetForm.$invalid">
+              Update Password
+            </button>
           </div>
           <div ng-if="resetPassword.error" class="text-center alert alert-danger" role="alert">
             <strong ng-bind="resetPassword.error"></strong>