feat: better repeat-password-form

Author: snitin315

app/components/forms/reset-password-form.js

@@ -34,6 +34,20 @@ export default Component.extend(FormMixin, {
             {
               type   : 'empty',
               prompt : this.l10n.t('Please enter your new password')
+            },
+            {
+              type   : 'minLength[8]',
+              prompt : this.l10n.t('Your password must have at least {ruleValue} characters')
+            }
+          ]
+        },
+
+        passwordRepeat: {
+          identifier : 'password_repeat',
+          rules      : [
+            {
+              type   : 'match[password]',
+              prompt : this.l10n.t('Passwords do not match')
             }
           ]
         }
@@ -42,6 +56,15 @@ export default Component.extend(FormMixin, {
   },
 
   actions: {
+
+    showNewPassword() {
+      this.toggleProperty('showNewPass');
+    },
+
+    showConfirmPassword() {
+      this.toggleProperty('showConfirmPass');
+    },
+
     submit() {
       this.onValid(() => {
         let payload = {};

app/templates/components/forms/reset-password-form.hbs

@@ -19,8 +19,23 @@
           <div class="field">
             {{#if token}}
               <div class="ui left icon input">
-                <i class="key icon"></i>
-                {{input type='password' name='password' placeholder=(t 'password') value=password}}
+                <i class="lock icon"></i>
+                  {{input type=(if showNewPass 'text' 'password') name='password' placeholder=(t 'Password') value=password}}
+                <div class="ui small basic icon buttons">
+                  <button class="ui button" id="eye2" {{ action 'showNewPassword'}}>
+                    <i class="{{if showNewPass 'hide' 'unhide'}} basic icon"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="ui hidden divider"></div>
+              <div class="ui left icon input">
+                <i class="lock icon"></i>
+                  {{input type=(if showConfirmPass 'text' 'password') name='password_repeat' placeholder=(t 'Confirm Password')}}
+                <div class="ui small basic icon buttons">
+                  <button class="ui button" id="eye2" {{ action 'showConfirmPassword'}}>
+                    <i class="{{if showConfirmPass 'hide' 'unhide'}} basic icon"></i>
+                  </button>
+                </div>
               </div>
             {{else}}
               <div class="ui left icon input">