LT-102: Send a email which includes password reset link if Forgot Password option is selected

- Add custom Reset Password template  and reset password
- Show the first error instead showing all errors of invalidated input values in Sign Up and changePassword templates

Packages/active-entry/components/changePassword/changePassword.html

@@ -8,9 +8,9 @@
         <div id="changePasswordPageMessage" class="subtitle-auth" style="{{getChangePasswordMessageColor}}">{{getChangePasswordMessage}}</div>
 
         <form>
-            {{#if entryErrorMessages}}
+            {{#if changePasswordErrorMessages}}
                 <div id="errorMessages" class="list-errors">
-                    {{#each entryErrorMessages}}
+                    {{#each changePasswordErrorMessages}}
                         <div class="alert alert-danger list-item">{{this}}</div>
                     {{/each}}
                 </div>

Packages/active-entry/components/changePassword/changePassword.js

@@ -46,14 +46,19 @@ Template.changePassword.helpers({
     }
   },
 
-  entryErrorMessages: function() {
-    var errorMessages = [];
-    Object.keys(ActiveEntry.errorMessages.all()).forEach(function(key) {
-      if ((key === "password" || key === "confirm") &&  ActiveEntry.errorMessages.get(key)) {
-        errorMessages.push(ActiveEntry.errorMessages.get(key));
-      }
+  changePasswordErrorMessages: function() {
+    var allErrorMessages = Object.keys(ActiveEntry.errorMessages.all()).filter(function(key) {
+      return (key === "password" || key === "confirm") && ActiveEntry.errorMessages.get(key);
     });
-    return errorMessages;
+
+    if (allErrorMessages.length > 0) {
+      var errorMessage = ActiveEntry.errorMessages.get(allErrorMessages[0]);
+      if (errorMessage) {
+        return [errorMessage];
+      }
+    }
+
+    return;
   }
 });
 

Packages/active-entry/components/entrySignUp/entrySignUp.js

@@ -30,13 +30,18 @@ Template.entrySignUp.helpers({
     }
   },
   entryErrorMessages: function () {
-    var errorMessages = [];
-    Object.keys(ActiveEntry.errorMessages.all()).forEach(function(key) {
-      if (key !== "signInError" && ActiveEntry.errorMessages.get(key)) {
-        errorMessages.push(ActiveEntry.errorMessages.get(key));
-      }
+    var allErrorMessages = Object.keys(ActiveEntry.errorMessages.all()).filter(function(key) {
+      return key !== "signInError" && ActiveEntry.errorMessages.get(key);
     });
-    return errorMessages;
+
+    if (allErrorMessages.length > 0) {
+      var errorMessage = ActiveEntry.errorMessages.get(allErrorMessages[0]);
+      if (errorMessage) {
+        return [errorMessage];
+      }
+    }
+
+    return;
   },
   getButtonText: function () {
     if (ActiveEntry.errorMessages.get('signInError')) {

Packages/active-entry/components/forgotPassword/forgotPassword.html

@@ -5,7 +5,8 @@
         <div class="entryLogo" style="background-image: url('{{getLogoUrl}}')"></div>
 
         <h1 id="signInPageTitle" class="title-auth">Forgot Password</h1>
-        <div id="signInPageMessage" class="subtitle-auth" >Imdivrove your clincal practice with checklists.</div>
+        <div id="signInPageMessage" class="subtitle-auth" >Improve your clinical practice with checklists.</div>
+        <p id="signInPageMessage" class="subtitle-auth" style="{{getForgotPasswordMessageColor}}">{{{getForgotPasswordMessage}}}</p>
 
         <form>
           <div class="input-symbol">
@@ -15,6 +16,11 @@
           <br><br>
 
           <button id="sendReminderButton" type="submit" class="btn-gray btn-main btn-large" style="{{getButtonColor}}">Send Reminder</button><br><br>
+            {{#if forgotPasswordNotification}}
+                <div class="alert alert-success">
+                    {{{forgotPasswordNotification}}}
+                </div>
+            {{/if}}
 
         </form>
       </div>
@@ -22,3 +28,45 @@
     </div>
   </div>
 </template>
+
+<template name="resetPassword">
+    {{#if resetPassword}}
+        <div id="resetPassword" class="page entryPage" style="{{getOpacityWithCorner}}">
+            <div class="content-scrollable">
+                <div class="wrapper-auth">
+                    <div class="entryLogo" style="background-image: url('{{getLogoUrl}}')"></div>
+
+                    <h1 id="signInPageTitle" class="title-auth">Reset Password</h1>
+                    <div id="signInPageMessage" class="subtitle-auth" >Improve your clinical practice with checklists.</div>
+
+                    <form>
+                        {{#if resetPasswordErrorMessages}}
+                            <div id="errorMessages" class="list-errors">
+                                {{#each resetPasswordErrorMessages}}
+                                    <div class="alert alert-danger list-item">{{this}}</div>
+                                {{/each}}
+                            </div>
+                        {{/if}}
+                        <div class="input-symbol ">
+                            <input id="resetPasswordInput" type="password" name="password" placeholder="Password" style="{{getPasswordStyling}}" />
+                            <span class="fa fa-lock" title="Password"></span>
+                            <!-- <span class="icon-lock" title="Password"></span> -->
+                        </div>
+                        <br>
+                        <br>
+
+                        <div class="input-symbol">
+                            <input id="resetPasswordConfirmInput" type="password" name="confirm" placeholder="Confirm Password" style="{{getConfirmPasswordStyling}}" />
+                            <span class="fa fa-lock" title="Confirm Password"></span>
+                            <!-- <span class="icon-lock" title="Confirm Password"></span> -->
+                        </div>
+                        <br>
+                        <br>
+                    </form>
+                    <button id="resetPasswordButton" type="submit" class="btn-gray btn-main btn-large" style="{{getButtonColor}}">Reset Password</button><br><br>
+                </div>
+
+            </div>
+        </div>
+    {{/if}}
+</template>

Packages/active-entry/components/forgotPassword/forgotPassword.js

@@ -5,11 +5,33 @@ Router.route('/forgotPassword', {
   template: "forgotPassword"
 });
 
+Router.route('/resetPassword/:token', {
+  template: 'resetPassword',
+  name: 'resetPassword',
+    onBeforeAction: function() {
+        var token = this.params.token;
+        Session.set('_resetPasswordToken', token);
+        this.next();
+    }
+});
 
 Template.forgotPassword.helpers({
-  getForgotPasswordStyle: function (){
-    return "border: 1px solid gray";
-  }
+    getForgotPasswordMessageColor: function (){
+        if (ActiveEntry.errorMessages.get('forgotPassword')) {
+            return "color: #a94442; background-color: #f2dede; border-color: #ebccd1;"
+        } else {
+            return "color: black;"
+        }
+    },
+    getForgotPasswordMessage: function (){
+        return ActiveEntry.errorMessages.get('forgotPassword');
+    },
+    getForgotPasswordStyle: function (){
+        return "border: 1px solid gray";
+    },
+    forgotPasswordNotification: function() {
+        return ActiveEntry.successMessages.get("forgotPassword");
+    }
 });
 
 Template.forgotPassword.events({
@@ -17,6 +39,46 @@ Template.forgotPassword.events({
     event.preventDefault();
 
     console.log('send reminder!');
-    Accounts.forgotPassword({email: $('#signInPageEmailInput').val()});
+    var emailAddress = $('#signInPageEmailInput').val();
+    ActiveEntry.forgotPassword(emailAddress);
   }
 });
+
+// Reset password template
+Template.resetPassword.helpers({
+  resetPassword: function(){
+      return Session.get('_resetPasswordToken');
+  },
+  resetPasswordErrorMessages: function() {
+    if (ActiveEntry.errorMessages.get("password")) {
+      return [ActiveEntry.errorMessages.get("password")];
+    }
+    if (ActiveEntry.errorMessages.get("confirm")) {
+        return [ActiveEntry.errorMessages.get("confirm")];
+    }
+
+    return;
+  }
+});
+
+Template.resetPassword.events({
+    'keyup #resetPasswordInput': function (event, template) {
+        var password = $('#resetPasswordInput').val();
+        ActiveEntry.verifyPassword(password);
+        ActiveEntry.errorMessages.set('forgotPassword', null);
+    },
+    'keyup #resetPasswordConfirmInput': function (event, template) {
+
+        var password = $('#resetPasswordInput').val();
+        var confirmPassword = $('#resetPasswordConfirmInput').val();
+
+        ActiveEntry.verifyConfirmPassword(password, confirmPassword);
+        ActiveEntry.errorMessages.set('forgotPassword', null);
+    },
+    'click #resetPasswordButton': function(e, template) {
+        e.preventDefault();
+        var password = $('#resetPasswordInput').val();
+        var passwordConfirm = $('#resetPasswordConfirmInput').val();
+        ActiveEntry.resetPassword(password, passwordConfirm);
+    }
+});