Encapsulate the business logic in the account controller

webadmin/src/views/account.html

@@ -6,7 +6,7 @@
                 <h4 class="modal-title">Change Your Password</h4>
             </div>
             <div class="modal-body">
-                <form name="passwordChangeForm" role="form" novalidate ng-submit="doChangePassword()" autocomplete="off">
+                <form name="passwordChangeForm" role="form" novalidate ng-submit="passwordchange.submit()" autocomplete="off">
                     <input type="password" style="display: none;">
                     <div class="form-group" ng-class="{ 'has-error': (!passwordChangeForm.password.$dirty && passwordchange.error.password) || (passwordChangeForm.password.$dirty && passwordChangeForm.password.$invalid) }">
                         <label class="control-label" for="inputPasswordChangePassword">Current Password</label>
@@ -33,11 +33,11 @@
                         <input type="password" class="form-control" ng-model="passwordchange.newPasswordRepeat" id="inputPasswordChangeNewPasswordRepeat" name="newPasswordRepeat" required autofocus>
                     </div>
                     <input class="ng-hide" type="submit" ng-disabled="passwordChangeForm.$invalid"/>
-                </fieldset>
+                </form>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-danger" ng-click="doChangePassword()" ng-disabled="passwordChangeForm.$invalid || passwordchange.busy"><i class="fa fa-spinner fa-pulse" ng-show="passwordchange.busy"></i> Change</button>
+                <button type="button" class="btn btn-danger" ng-click="passwordchange.submit()" ng-disabled="passwordChangeForm.$invalid || passwordchange.busy"><i class="fa fa-spinner fa-pulse" ng-show="passwordchange.busy"></i> Change</button>
             </div>
         </div>
     </div>
@@ -51,8 +51,7 @@
                 <h4 class="modal-title">Change Your Email</h4>
             </div>
             <div class="modal-body">
-                <form name="emailChangeForm" role="form" novalidate ng-submit="doChangeEmail()" autocomplete="off">
-                    <input type="password" style="display: none;">
+                <form name="emailChangeForm" role="form" novalidate ng-submit="emailchange.submit()" autocomplete="off">
                     <div class="form-group" ng-class="{ 'has-error': (emailChangeForm.email.$dirty && emailChangeForm.email.$invalid) }">
                         <label class="control-label" for="inputEmailChangeEmail">New Email Address</label>
                         <div class="control-label" ng-show="(!emailChangeForm.email.$dirty && emailchange.error.email) || (emailChangeForm.email.$dirty && emailChangeForm.email.$invalid)">
@@ -66,7 +65,7 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-success" ng-click="doChangeEmail()" ng-disabled="emailChangeForm.$invalid || emailchange.busy"><i class="fa fa-spinner fa-pulse" ng-show="emailchange.busy"></i> Change</button>
+                <button type="button" class="btn btn-success" ng-click="emailchange.submit()" ng-disabled="emailChangeForm.$invalid || emailchange.busy"><i class="fa fa-spinner fa-pulse" ng-show="emailchange.busy"></i> Change</button>
             </div>
         </div>
     </div>
@@ -94,12 +93,12 @@
                     </tr>
                     <tr>
                         <td class="text-muted" style="vertical-align: top;">Email</td>
-                        <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ user.email }} <a href="" ng-click="showChangeEmail()"><i class="fa fa-pencil text-small"></i></a></td>
+                        <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ user.email }} <a href="" ng-click="emailchange.show()"><i class="fa fa-pencil text-small"></i></a></td>
                     </tr>
                     <tr>
                         <td class="text-right" colspan="2" style="vertical-align: top;">
                         <br/>
-                            <button class="btn btn-outline btn-xs btn-danger" ng-click="showChangePassword()">Change Password</button>
+                            <button class="btn btn-outline btn-xs btn-danger" ng-click="passwordchange.show()">Change Password</button>
                         </td>
                     </tr>
                 </table>

webadmin/src/views/account.js

@@ -22,8 +22,46 @@ angular.module('Application').controller('AccountController', ['$scope', '$locat
             $scope.passwordchange.newPassword = '';
             $scope.passwordchange.newPasswordRepeat = '';
 
-            $scope.passwordChangeForm.$setPristine();
             $scope.passwordChangeForm.$setUntouched();
+            $scope.passwordChangeForm.$setPristine();
+        },
+
+        show: function () {
+            $scope.passwordchange.reset();
+            $('#passwordChangeModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.passwordchange.error.password = null;
+            $scope.passwordchange.error.newPassword = null;
+            $scope.passwordchange.error.newPasswordRepeat = null;
+            $scope.passwordchange.busy = true;
+
+            Client.changePassword($scope.passwordchange.password, $scope.passwordchange.newPassword, function (error) {
+                $scope.passwordchange.busy = false;
+
+                if (error) {
+                    if (error.statusCode === 403) {
+                        $scope.passwordchange.error.password = true;
+                        $scope.passwordchange.password = '';
+                        $('#inputPasswordChangePassword').focus();
+                        $scope.passwordChangeForm.password.$setPristine();
+                    } else if (error.statusCode === 400) {
+                        $scope.passwordchange.error.newPassword = error.message;
+                        $scope.passwordchange.newPassword = '';
+                        $scope.passwordchange.newPasswordRepeat = '';
+                        $scope.passwordChangeForm.newPassword.$setPristine();
+                        $scope.passwordChangeForm.newPasswordRepeat.$setPristine();
+                        $('#inputPasswordChangeNewPassword').focus();
+                    } else {
+                        console.error('Unable to change password.', error);
+                    }
+                    return;
+                }
+
+                $scope.passwordchange.reset();
+                $('#passwordChangeModal').modal('hide');
+            });
         }
     };
 
@@ -37,77 +75,39 @@ angular.module('Application').controller('AccountController', ['$scope', '$locat
             $scope.emailchange.error.email = null;
             $scope.emailchange.email = '';
 
-            $scope.emailChangeForm.$setPristine();
             $scope.emailChangeForm.$setUntouched();
-        }
-    };
-
-    $scope.doChangePassword = function () {
-        $scope.passwordchange.error.password = null;
-        $scope.passwordchange.error.newPassword = null;
-        $scope.passwordchange.error.newPasswordRepeat = null;
-        $scope.passwordchange.busy = true;
-
-        Client.changePassword($scope.passwordchange.password, $scope.passwordchange.newPassword, function (error) {
-            $scope.passwordchange.busy = false;
-
-            if (error) {
-                if (error.statusCode === 403) {
-                    $scope.passwordchange.error.password = true;
-                    $scope.passwordchange.password = '';
-                    $('#inputPasswordChangePassword').focus();
-                    $scope.passwordchange_form.password.$setPristine();
-                } else if (error.statusCode === 400) {
-                    $scope.passwordchange.error.newPassword = error.message;
-                    $scope.passwordchange.newPassword = '';
-                    $scope.passwordchange.newPasswordRepeat = '';
-                    $scope.passwordchange_form.newPassword.$setPristine();
-                    $scope.passwordchange_form.newPasswordRepeat.$setPristine();
-                    $('#inputPasswordChangeNewPassword').focus();
-                } else {
-                    console.error('Unable to change password.', error);
-                }
-                return;
-            }
-
-            $scope.passwordchange.reset();
-            $('#passwordChangeModal').modal('hide');
-        });
-    };
-
-    $scope.doChangeEmail = function () {
-        $scope.emailchange.error.email = null;
-        $scope.emailchange.busy = true;
-
-        var user = {
-            id: $scope.user.id,
-            email: $scope.emailchange.email
-        };
-
-        Client.updateUser(user, function (error) {
-            $scope.emailchange.busy = false;
-
-            if (error) {
-                console.error('Unable to change email.', error);
-                return;
-            }
-
-            // update user info in the background
-            Client.refreshUserInfo();
+            $scope.emailChangeForm.$setPristine();
+        },
 
+        show: function () {
             $scope.emailchange.reset();
-            $('#emailChangeModal').modal('hide');
-        });
-    };
+            $('#emailChangeModal').modal('show');
+        },
 
-    $scope.showChangePassword = function () {
-        $scope.passwordchange.reset();
-        $('#passwordChangeModal').modal('show');
-    };
+        submit: function () {
+            $scope.emailchange.error.email = null;
+            $scope.emailchange.busy = true;
 
-    $scope.showChangeEmail = function () {
-        $scope.emailchange.reset();
-        $('#emailChangeModal').modal('show');
+            var user = {
+                id: $scope.user.id,
+                email: $scope.emailchange.email
+            };
+
+            Client.updateUser(user, function (error) {
+                $scope.emailchange.busy = false;
+
+                if (error) {
+                    console.error('Unable to change email.', error);
+                    return;
+                }
+
+                // update user info in the background
+                Client.refreshUserInfo();
+
+                $scope.emailchange.reset();
+                $('#emailChangeModal').modal('hide');
+            });
+        }
     };
 
     $scope.removeAccessTokens = function (client) {