feat(auth): add confirm password to signup and settings

Originally submitted by @thomporter

Closes #484

Author: kingcody

Diff for: app/generator.js

@@ -374,6 +374,7 @@ export default class Generator extends Base {
         if(this.filters.socketio) angModules.push("'btford.socket-io'");
         if(this.filters.uirouter) angModules.push("'ui.router'");
         if(this.filters.uibootstrap) angModules.push("'ui.bootstrap'");
+        if(this.filters.auth) angModules.push("'validation.match'");
 
         this.angularModules = '\n  ' + angModules.join(',\n  ') +'\n';
       }

Diff for: app/templates/_bower.json

@@ -4,18 +4,19 @@
   "dependencies": {
     "angular": "~1.4.0",
     "json3": "~3.3.1",
-    "es5-shim": "~3.0.1",<% if(filters.bootstrap) { %><% if (filters.sass) { %>
+    "es5-shim": "~3.0.1",<% if(filters.bootstrap) { if (filters.sass) { %>
     "bootstrap-sass-official": "~3.1.1",<% } %>
     "bootstrap": "~3.1.1",<% } %>
     "angular-resource": "~1.4.0",
     "angular-cookies": "~1.4.0",
     "angular-sanitize": "~1.4.0",<% if (filters.ngroute) { %>
-    "angular-route": "~1.4.0",<% } %><% if (filters.uibootstrap) { %>
+    "angular-route": "~1.4.0",<% } if (filters.uibootstrap) { %>
     "angular-bootstrap": "~0.13.0",<% } %>
     "font-awesome": ">=4.1.0",
     "lodash": "~2.4.1"<% if(filters.socketio) { %>,
-    "angular-socket-io": "~0.7.0"<% } %><% if(filters.uirouter) { %>,
-    "angular-ui-router": "~0.2.15"<% } %>
+    "angular-socket-io": "~0.7.0"<% } if (filters.uirouter) { %>,
+    "angular-ui-router": "~0.2.15"<% } if (filters.auth) { %>,
+    "angular-validation-match": "~1.5.2"<% } %>
   },
   "devDependencies": {
     "angular-mocks": "~1.4.0"

Diff for: app/templates/client/app/account(auth)/settings/settings(html).html

@@ -30,6 +30,20 @@ <h1>Change Password</h1>
           </p>
         </div>
 
+        <div class="form-group">
+          <label>Confirm New Password</label>
+
+          <input type="password" name="confirmPassword" class="form-control" ng-model="user.confirmPassword"
+                 match="user.newPassword"
+                 ng-minlength="3"
+                 required=""/>
+          <p class="help-block"
+             ng-show="form.confirmPassword.$error.match && submitted">
+            Passwords must match.
+          </p>
+
+        </div>
+
         <p class="help-block"> {{ message }} </p>
 
         <button class="btn btn-lg btn-primary" type="submit">Save changes</button>

Diff for: app/templates/client/app/account(auth)/settings/settings(jade).jade

@@ -7,14 +7,29 @@ navbar
       form.form(name='form', ng-submit='changePassword(form)', novalidate='')
         .form-group
           label Current Password
-          input.form-control(type='password', name='password', ng-model='user.oldPassword', mongoose-error='')
+          input.form-control(type='password'
+            name='password'
+            ng-model='user.oldPassword'
+            mongoose-error='')
           p.help-block(ng-show='form.password.$error.mongoose')
             | {{ errors.other }}
         .form-group
           label New Password
-          input.form-control(type='password', name='newPassword', ng-model='user.newPassword', ng-minlength='3', required='')
+          input.form-control(type='password'
+            name='newPassword'
+            ng-model='user.newPassword'
+            ng-minlength='3', required='')
           p.help-block(ng-show='(form.newPassword.$error.minlength || form.newPassword.$error.required) && (form.newPassword.$dirty || submitted)')
             | Password must be at least 3 characters.
+        .form-group
+          label Confirm New Password
+          input.form-control(type='password'
+            name='confirmPassword'
+            ng-model='user.confirmPassword'
+            match="user.newPassword"
+            ng-minlength='3', required='')
+          p.help-block(ng-show='form.confirmPassword.$error.match && submitted')
+            | Passwords must match.
 
         p.help-block  {{ message }}
 

Diff for: app/templates/client/app/account(auth)/signup/signup(html).html

@@ -54,6 +54,18 @@ <h1>Sign up</h1>
           </p>
         </div>
 
+        <div class="form-group" ng-class="{ 'has-success': form.confirmPassword.$valid && submitted,
+                                            'has-error': form.confirmPassword.$invalid && submitted }">
+          <label>Confirm Password</label>
+          <input type="password" name="confirmPassword" class="form-control" ng-model="user.confirmPassword"
+                 match="user.password"
+                 ng-minlength="3" required/>
+          <p class="help-block"
+             ng-show="form.confirmPassword.$error.match && submitted">
+            Passwords must match.
+          </p>
+        </div>
+
         <div>
           <button class="btn btn-inverse btn-lg btn-register" type="submit">
             Sign up

Diff for: app/templates/client/app/account(auth)/signup/signup(jade).jade

@@ -26,12 +26,27 @@ navbar
         .form-group(ng-class='{ "has-success": form.password.$valid && submitted,\
         "has-error": form.password.$invalid && submitted }')
           label Password
-          input.form-control(type='password', name='password', ng-model='user.password', ng-minlength='3', required='', mongoose-error='')
+          input.form-control(type='password'
+            name='password'
+            ng-model='user.password'
+            mongoose-error=''
+            ng-minlength='3', required='')
           p.help-block(ng-show='(form.password.$error.minlength || form.password.$error.required) && submitted')
             | Password must be at least 3 characters.
           p.help-block(ng-show='form.password.$error.mongoose')
             | {{ errors.password }}
 
+        .form-group(ng-class='{ "has-success": form.confirmPassword.$valid && submitted,\
+        "has-error": form.confirmPassword.$invalid && submitted }')
+          label Confirm Password
+          input.form-control(type='password'
+            name='confirmPassword'
+            ng-model='user.confirmPassword'
+            match="user.password"
+            ng-minlength='3', required='')
+          p.help-block(ng-show='form.confirmPassword.$error.match && submitted')
+            | Passwords must match.
+
         div
           button.btn.btn-inverse.btn-lg.btn-register(type='submit')
             | Sign up

Diff for: app/templates/e2e/account(auth)/signup/signup.po.js

@@ -10,6 +10,7 @@ var SignupPage = function() {
   this.form.name = this.form.element(by.model('user.name'));
   this.form.email = this.form.element(by.model('user.email'));
   this.form.password = this.form.element(by.model('user.password'));
+  this.form.confirmPassword = this.form.element(by.model('user.confirmPassword'))
   this.form.submit = this.form.element(by.css('.btn-register'));
 
   this.signup = function(data) {

Diff for: app/templates/e2e/account(auth)/signup/signup.spec(jasmine).js

@@ -16,7 +16,8 @@ describe('Signup View', function() {
   var testUser = {
     name: 'Test',
     email: '[email protected]',
-    password: 'test'
+    password: 'test',
+    confirmPassword: 'test'
   };
 
   beforeEach(function() {
@@ -30,6 +31,8 @@ describe('Signup View', function() {
     expect(page.form.email.getAttribute('name')).toBe('email');
     expect(page.form.password.getAttribute('type')).toBe('password');
     expect(page.form.password.getAttribute('name')).toBe('password');
+    expect(page.form.confirmPassword.getAttribute('type')).toBe('password');
+    expect(page.form.confirmPassword.getAttribute('name')).toBe('confirmPassword');
     expect(page.form.submit.getAttribute('type')).toBe('submit');
     expect(page.form.submit.getText()).toBe('Sign up');
   });

Diff for: app/templates/e2e/account(auth)/signup/signup.spec(mocha).js

@@ -16,7 +16,8 @@ describe('Signup View', function() {
   var testUser = {
     name: 'Test',
     email: '[email protected]',
-    password: 'test'
+    password: 'test',
+    confirmPassword: 'test'
   };
 
   before(function() {
@@ -35,6 +36,8 @@ describe('Signup View', function() {
     <%= expect() %>page.form.email.getAttribute('name')<%= to() %>.eventually.equal('email');
     <%= expect() %>page.form.password.getAttribute('type')<%= to() %>.eventually.equal('password');
     <%= expect() %>page.form.password.getAttribute('name')<%= to() %>.eventually.equal('password');
+    <%= expect() %>page.form.confirmPassword.getAttribute('type')<%= to() %>.eventually.equal('password');
+    <%= expect() %>page.form.confirmPassword.getAttribute('name')<%= to() %>.eventually.equal('confirmPassword');
     <%= expect() %>page.form.submit.getAttribute('type')<%= to() %>.eventually.equal('submit');
     <%= expect() %>page.form.submit.getText()<%= to() %>.eventually.equal('Sign up');
   });