feat(auth) add confirm password to signup and settings

confirm password powered by directive: https://github.com/wongatech/angular-confirm-field + adding for attribute to labels and ids to associated elements + fixing invalid password error in settings HTML to ref pwd.old. instead of form.password... (Jade was ok) take note of new dependency in test/fixtures/bower.json (re-run bower install on current clones...)
angular-fullstack · Aug 25, 2014 · 2d8a6ec · 2d8a6ec
1 parent 16f928b
commit 2d8a6ec
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 34 deletions.
diff --git a/app/index.js b/app/index.js
@@ -248,6 +248,7 @@ var AngularFullstackGenerator = yeoman.generators.Base.extend({
     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("'ng.confirmField'");
 
     this.angularModules = "\n  " + angModules.join(",\n  ") +"\n";
   },
@@ -264,4 +265,4 @@ var AngularFullstackGenerator = yeoman.generators.Base.extend({
   }
 });
 
-module.exports = AngularFullstackGenerator;
+module.exports = AngularFullstackGenerator;
diff --git a/app/templates/_bower.json b/app/templates/_bower.json
@@ -16,10 +16,11 @@
     "font-awesome": ">=4.1.0",
     "lodash": "~2.4.1"<% if(filters.socketio) { %>,
     "angular-socket-io": "~0.6.0"<% } %><% if(filters.uirouter) { %>,
-    "angular-ui-router": "~0.2.10"<% } %>
+    "angular-ui-router": "~0.2.10"<% } %><% if(filters.auth) { %>,
+    "angular-confirm-field": "~0.1.2"<% } %>
   },
   "devDependencies": {
     "angular-mocks": ">=1.2.*",
     "angular-scenario": ">=1.2.*"
   }
-}
+}
diff --git a/app/templates/client/app/account(auth)/settings/settings(html).html b/app/templates/client/app/account(auth)/settings/settings(html).html
@@ -9,8 +9,8 @@ <h1>Email</h1>
       <form role="form" name="email" ng-submit="changeEmail()" novalidate>
 
         <div class="form-group has-feedback">
-          <label>Current Email</label>
-          <input type="email" name="email" class="form-control" ng-model="user.email" placeholder='ex. [email protected]' />
+          <label for="email">Current Email</label>
+          <input type="email" id="email" name="email" class="form-control" ng-model="user.email" placeholder='ex. [email protected]' />
           <p class="help-block" ng-show="!email.email.$valid">
               | Email not valid
           </p>
@@ -28,19 +28,19 @@ <h1><% if (filters.oauth) { %>{{ user.localEnabled ? 'Change' : 'Set' }}<% } els
       <form name="pwd" ng-submit="<% if(filters.oauth) { %>!user.localEnabled ? setPassword() : <% } %>changePassword()" novalidate>
 
         <div class="form-group">
-          <label>Current Password</label>
+          <label for="oldPass">Current Password</label>
 
-          <input type="password" name="old" placeholder='ex. password123' class="form-control" ng-model="user.oldPassword"
+          <input type="password" id="oldPass" name="old" placeholder='ex. password123' class="form-control" ng-model="user.oldPassword"
                  mongoose-error <% if (filters.oauth) { %>ng-disabled='!user.localEnabled' <% } %>/>
-          <p class="help-block" ng-show="form.password.$error.mongoose">
+          <p class="help-block" ng-show="pwd.old.$error.mongoose">
               {{ errors.other }}
           </p>
         </div>
 
         <div class="form-group">
-          <label>New Password</label>
+          <label for="newPass">New Password</label>
 
-          <input type="password" name="new" placeholder='ex. GoofyM1ckeyDonald&Pluto' class="form-control" ng-model="user.newPassword"
+          <input type="password" id="newPass" name="new" placeholder='ex. GoofyM1ckeyDonald&Pluto' class="form-control" ng-model="user.newPassword"
                  ng-minlength="3"
                  required />
           <p class="help-block"
@@ -49,6 +49,21 @@ <h1><% if (filters.oauth) { %>{{ user.localEnabled ? 'Change' : 'Set' }}<% } els
           </p>
         </div>
 
+        <div class="form-group">
+          <label for="passwordConfirm">Confirm New Password</label>
+
+          <input type="password" id="passwordConfirm" name="passwordConfirm" class="form-control"
+                 ng-model="passwordConfirm"
+                 ng-confirm-field
+                 confirm-against="user.newPassword"
+                 ng-minlength="3"
+                 required />
+          <p class="help-block"
+             ng-show="pwd.passwordConfirm.$error.noMatch && pwd.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 --git a/app/templates/client/app/account(auth)/settings/settings(jade).jade b/app/templates/client/app/account(auth)/settings/settings(jade).jade
@@ -8,8 +8,8 @@ div(ng-include='"components/navbar/navbar.html"')
       form(role='form', name='email', ng-submit='changeEmail()', novalidate)
 
         .form-group.has-feedback
-          label Current Email
-          input.form-control(type='email', name='email', ng-model='user.email', placeholder='ex. [email protected]')
+          label(for="email") Current Email
+          input.form-control#email(type='email', name='email', ng-model='user.email', placeholder='ex. [email protected]')
           span.glyphicon.glyphicon-ok.form-control-feedback(ng-if='email.confirmed', title='email confirmed')
           p.help-block(ng-show='!email.email.$valid')
             | Email not valid
@@ -24,17 +24,24 @@ div(ng-include='"components/navbar/navbar.html"')
       form(role='form', name='pwd', ng-submit='<% if(filters.oauth) { %>!user.localEnabled ? setPassword() : <% } %>changePassword()', novalidate)
 
         .form-group
-          label Current Password
-          input.form-control(type='password', name='old', placeholder='ex. password123', ng-model='user.oldPassword', <% if (filters.oauth) { %>ng-disabled='!user.localEnabled', <% } %>mongoose-error='')
+          label(for="oldPass") Current Password
+          input.form-control#oldPass(type='password', name='old', placeholder='ex. password123', ng-model='user.oldPassword', <% if (filters.oauth) { %>ng-disabled='!user.localEnabled', <% } %>mongoose-error='')
           p.help-block(ng-show='pwd.old.$error.mongoose')
             | {{ errors.other }}
 
         .form-group
-          label New Password
-          input.form-control(type='password', name='new', placeholder='ex. GoofyM1ckeyDonald&Pluto', ng-model='user.newPassword', ng-minlength='3', required)
+          label(for="newPass") New Password
+          input.form-control#newPass(type='password', name='new', placeholder='ex. GoofyM1ckeyDonald&Pluto', ng-model='user.newPassword', ng-minlength='3', required)
           p.help-block(ng-show='(pwd.new.$error.minlength || pwd.new.$error.required) && (pwd.new.$dirty || pwd.submitted)')
             | Password must be at least 3 characters.
 
+        .form-group
+          label(for="passwordConfirm") Confirm New Password
+          input.form-control#passwordConfirm(type='password', name='passwordConfirm', ng-model='passwordConfirm', ng-minlength='3', required='\
+          ', ng-confirm-field='', confirm-against="user.newPassword")
+          p.help-block(ng-show='form.passwordConfirm.$error.noMatch && pwd.submitted')
+            | Passwords must match.
+
         p.help-block {{ message }}
 
         button.btn.btn-lg.btn-primary(type='submit') Save changes
@@ -45,4 +52,4 @@ div(ng-include='"components/navbar/navbar.html"')
   //-     h1 Social accounts
 
   //-   .col-sm-12
-<% } %>
+<% } %>
diff --git a/app/templates/client/app/account(auth)/signup/signup(html).html b/app/templates/client/app/account(auth)/signup/signup(html).html
@@ -10,9 +10,9 @@ <h1>Sign up</h1>
 
         <div class="form-group" ng-class="{ 'has-success': form.name.$valid && submitted,
                                             'has-error': form.name.$invalid && submitted }">
-          <label>Name</label>
+          <label for="name">Name</label>
 
-          <input type="text" name="name" class="form-control" ng-model="user.name"
+          <input type="text" id="name" name="name" class="form-control" ng-model="user.name"
                  required/>
           <p class="help-block" ng-show="form.name.$error.required && submitted">
             A name is required
@@ -21,9 +21,9 @@ <h1>Sign up</h1>
 
         <div class="form-group" ng-class="{ 'has-success': form.email.$valid && submitted,
                                             'has-error': form.email.$invalid && submitted }">
-          <label>Email</label>
+          <label for="email">Email</label>
 
-          <input type="email" name="email" class="form-control" ng-model="user.email"
+          <input type="email" id="email" name="email" class="form-control" ng-model="user.email"
                  required
                  mongoose-error/>
           <p class="help-block" ng-show="form.email.$error.email && submitted">
@@ -39,9 +39,10 @@ <h1>Sign up</h1>
 
         <div class="form-group" ng-class="{ 'has-success': form.password.$valid && submitted,
                                             'has-error': form.password.$invalid && submitted }">
-          <label>Password</label>
+          <label for="password">Password</label>
 
           <input type="password" name="password" class="form-control" ng-model="user.password"
+                 id="password"
                  ng-minlength="3"
                  required
                  mongoose-error/>
@@ -54,6 +55,23 @@ <h1>Sign up</h1>
           </p>
         </div>
 
+        <div class="form-group" ng-class="{ 'has-success': form.passwordConfirm.$valid && submitted,
+                                            'has-error': form.passwordConfirm.$invalid && submitted }">
+          <label for="passwordConfirm">Confirm Password</label>
+
+          <input type="password" name="passwordConfirm" class="form-control" ng-model="passwordConfirm"
+                 id="passwordConfirm"
+                 ng-minlength="3"
+                 ng-confirm-field
+                 confirm-against="user.password"
+                 required/>
+          <p class="help-block"
+             ng-show="form.passwordConfirm.$error.noMatch && submitted">
+            Passwords must match.
+          </p>
+
+        </div>
+
         <div>
           <button class="btn btn-inverse btn-lg btn-login" type="submit">
             Sign up
@@ -79,4 +97,4 @@ <h1>Sign up</h1>
     </div>
   </div>
   <hr>
-</div>
+</div>
diff --git a/app/templates/client/app/account(auth)/signup/signup(jade).jade b/app/templates/client/app/account(auth)/signup/signup(jade).jade
@@ -7,15 +7,15 @@ div(ng-include='"components/navbar/navbar.html"')
       form.form(name='form', ng-submit='register(form)', novalidate='')
         .form-group(ng-class='{ "has-success": form.name.$valid && submitted,\
         "has-error": form.name.$invalid && submitted }')
-          label Name
-          input.form-control(type='text', name='name', ng-model='user.name', required='')
+          label(for="name") Name
+          input.form-control#name(type='text', name='name', ng-model='user.name', required='')
           p.help-block(ng-show='form.name.$error.required && submitted')
             | A name is required
 
         .form-group(ng-class='{ "has-success": form.email.$valid && submitted,\
         "has-error": form.email.$invalid && submitted }')
-          label Email
-          input.form-control(type='email', name='email', ng-model='user.email', required='', mongoose-error='')
+          label(for="email") Email
+          input.form-control#email(type='email', name='email', ng-model='user.email', required='', mongoose-error='')
           p.help-block(ng-show='form.email.$error.email && submitted')
             | Doesn't look like a valid email.
           p.help-block(ng-show='form.email.$error.required && submitted')
@@ -25,12 +25,20 @@ div(ng-include='"components/navbar/navbar.html"')
 
         .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='')
+          label(for="password") Password
+          input.form-control#password(type='password', name='password', ng-model='user.password', ng-minlength='3', required='', mongoose-error='')
           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.passwordConfirm.$valid && submitted,\
+        "has-error": form.passwordConfirm.$invalid && submitted }')
+          label(for="passwordConfirm") Confirm Password
+          input.form-control#passwordConfirm(type='password', name='passwordConfirm', ng-model='passwordConfirm', ng-minlength='3', required='', mongoose-error='\
+          ' ng-confirm-field="", confirm-against="user.password")
+          p.help-block(ng-show='form.passwordConfirm.$error.noMatch && submitted')
+            | Passwords must match.
 
         div
           button.btn.btn-inverse.btn-lg.btn-login(type='submit')
@@ -54,4 +62,4 @@ div(ng-include='"components/navbar/navbar.html"')
           a.btn.btn-twitter(href='', ng-click='loginOauth("twitter")')
             i.fa.fa-twitter
             |  Connect with Twitter<% } %><% } %>
-  hr
+  hr
diff --git a/app/templates/karma.conf.js b/app/templates/karma.conf.js
@@ -21,7 +21,8 @@ module.exports = function(config) {
       'client/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',<% } %>
       'client/bower_components/lodash/dist/lodash.compat.js',<% if(filters.socketio) { %>
       'client/bower_components/angular-socket-io/socket.js',<% } %><% if(filters.uirouter) { %>
-      'client/bower_components/angular-ui-router/release/angular-ui-router.js',<% } %>
+      'client/bower_components/angular-ui-router/release/angular-ui-router.js',<% } %><% if(filters.auth) { %>
+      'client/bower_components/angular-confirm-field/app/package/js/angular-confirm-field.min.js',<% } %>
       'client/app/app.js',
       'client/app/app.coffee',
       'client/app/**/*.js',
@@ -78,4 +79,4 @@ module.exports = function(config) {
     // if true, it capture browsers, run tests and exit
     singleRun: false
   });
-};
+};
diff --git a/test/fixtures/bower.json b/test/fixtures/bower.json
@@ -16,10 +16,11 @@
     "font-awesome": ">=4.1.0",
     "lodash": "~2.4.1",
     "angular-socket-io": "~0.6.0",
-    "angular-ui-router": "~0.2.10"
+    "angular-ui-router": "~0.2.10",
+    "angular-confirm-field": "~0.1.2"
   },
   "devDependencies": {
     "angular-mocks": ">=1.2.*",
     "angular-scenario": ">=1.2.*"
   }
-}
+}