From 0f6ef0a44a76348c839391615ec849b2810ff680 Mon Sep 17 00:00:00 2001
From: Thomas Porter <thomporter@gmail.com>
Date: Sun, 24 Aug 2014 14:34:36 -0400
Subject: [PATCH] feat(auth) add confirm password to signup and settings

also adding for attribute to labels with and ids to associated elements
confirm password powered by directive: https://github.com/wongatech/angular-confirm-field
Files Modified:
app/index.js
app/templates/_bower.json
app/templates/client/app/account(auth)/settings/settings(html).html
app/templates/client/app/account(auth)/settings/settings(jade).jade
app/templates/client/app/account(auth)/signup/signup(html).html
app/templates/client/app/account(auth)/signup/signup(jade).jade
app/templates/karma.conf.js
test/fixtures/bower.json

take note of new dependency in test/fixtures/bower.json (re-run bower install on current clones...)
---
 app/index.js                                  |  1 +
 app/templates/_bower.json                     |  3 +-
 .../settings/settings(html).html              | 24 ++++++++++++----
 .../settings/settings(jade).jade              | 15 +++++++---
 .../account(auth)/signup/signup(html).html    | 28 +++++++++++++++----
 .../account(auth)/signup/signup(jade).jade    | 20 +++++++++----
 app/templates/karma.conf.js                   |  3 +-
 test/fixtures/bower.json                      |  3 +-
 8 files changed, 74 insertions(+), 23 deletions(-)

diff --git a/app/index.js b/app/index.js
index 4154db1f2..fa5d94e8f 100644
--- 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";
   },
diff --git a/app/templates/_bower.json b/app/templates/_bower.json
index 1681050a2..46fac9b66 100644
--- a/app/templates/_bower.json
+++ b/app/templates/_bower.json
@@ -16,7 +16,8 @@
     "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.*",
diff --git a/app/templates/client/app/account(auth)/settings/settings(html).html b/app/templates/client/app/account(auth)/settings/settings(html).html
index 94d0ee013..f02708292 100644
--- a/app/templates/client/app/account(auth)/settings/settings(html).html
+++ b/app/templates/client/app/account(auth)/settings/settings(html).html
@@ -28,9 +28,9 @@ <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">
               {{ errors.other }}
@@ -38,9 +38,9 @@ <h1><% if (filters.oauth) { %>{{ user.localEnabled ? 'Change' : 'Set' }}<% } els
         </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,20 @@ <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="new" class="form-control" ng-model="passwordConfirm"
+                 ng-confirm-field
+                 confirm-against="user.newPassword"
+                 ng-minlength="3"
+                 required />
+          <p class="help-block"
+             ng-show="form.passwordConfirm.$error.noMatch && submitted">
+            Passwords must match.
+          </p>
+        </div>
+
         <p class="help-block"> {{ message }} </p>
 
         <button class="btn btn-lg btn-primary" type="submit">Save changes</button>
@@ -63,4 +77,4 @@ <h1>Social accounts</h1>
     <div class="col-sm-12"></div>
   </div> -->
   <% } %>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/templates/client/app/account(auth)/settings/settings(jade).jade b/app/templates/client/app/account(auth)/settings/settings(jade).jade
index 8565781c2..4b167301c 100644
--- a/app/templates/client/app/account(auth)/settings/settings(jade).jade
+++ b/app/templates/client/app/account(auth)/settings/settings(jade).jade
@@ -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
diff --git a/app/templates/client/app/account(auth)/signup/signup(html).html b/app/templates/client/app/account(auth)/signup/signup(html).html
index 59faed568..76b409be5 100644
--- 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"
+                 ng-minlength="3"
+                 id="passwordConfirm"
+                 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
diff --git a/app/templates/client/app/account(auth)/signup/signup(jade).jade b/app/templates/client/app/account(auth)/signup/signup(jade).jade
index 43815a21c..98b84755f 100644
--- 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')
diff --git a/app/templates/karma.conf.js b/app/templates/karma.conf.js
index 57b3fa6f2..cf289b507 100644
--- 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',
diff --git a/test/fixtures/bower.json b/test/fixtures/bower.json
index dea41015a..f968212fd 100644
--- a/test/fixtures/bower.json
+++ b/test/fixtures/bower.json
@@ -16,7 +16,8 @@
     "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.*",