refactor(client:account): use controller as and classes

Author: Awk34

app/templates/client/app/account(auth)/account.js

@@ -5,7 +5,8 @@ angular.module('<%= scriptAppName %>')
     $routeProvider
       .when('/login', {
         templateUrl: 'app/account/login/login.html',
-        controller: 'LoginCtrl'
+        controller: 'LoginController',
+        controllerAs: 'vm'
       })
       .when('/logout', {
         name: 'logout',
@@ -21,11 +22,13 @@ angular.module('<%= scriptAppName %>')
       })
       .when('/signup', {
         templateUrl: 'app/account/signup/signup.html',
-        controller: 'SignupCtrl'
+        controller: 'SignupController',
+        controllerAs: 'vm'
       })
       .when('/settings', {
         templateUrl: 'app/account/settings/settings.html',
-        controller: 'SettingsCtrl',
+        controller: 'SettingsController',
+        controllerAs: 'vm',
         authenticate: true
       });
   })
@@ -40,7 +43,8 @@ angular.module('<%= scriptAppName %>')
       .state('login', {
         url: '/login',
         templateUrl: 'app/account/login/login.html',
-        controller: 'LoginCtrl'
+        controller: 'LoginController',
+        controllerAs: 'vm'
       })
       .state('logout', {
         url: '/logout?referrer',
@@ -57,12 +61,14 @@ angular.module('<%= scriptAppName %>')
       .state('signup', {
         url: '/signup',
         templateUrl: 'app/account/signup/signup.html',
-        controller: 'SignupCtrl'
+        controller: 'SignupController',
+        controllerAs: 'vm'
       })
       .state('settings', {
         url: '/settings',
         templateUrl: 'app/account/settings/settings.html',
-        controller: 'SettingsCtrl',
+        controller: 'SettingsController',
+        controllerAs: 'vm',
         authenticate: true
       });
   })

app/templates/client/app/account(auth)/login/login(html).html

@@ -8,29 +8,29 @@ <h1>Login</h1>
       <p>Admin account is <code>admin@example.com</code> / <code>admin</code></p>
     </div>
     <div class="col-sm-12">
-      <form class="form" name="form" ng-submit="login(form)" novalidate>
+      <form class="form" name="form" ng-submit="vm.login(form)" novalidate>
 
         <div class="form-group">
           <label>Email</label>
 
-          <input type="email" name="email" class="form-control" ng-model="user.email" required>
+          <input type="email" name="email" class="form-control" ng-model="vm.user.email" required>
         </div>
 
         <div class="form-group">
           <label>Password</label>
 
-          <input type="password" name="password" class="form-control" ng-model="user.password" required>
+          <input type="password" name="password" class="form-control" ng-model="vm.user.password" required>
         </div>
 
         <div class="form-group has-error">
-          <p class="help-block" ng-show="form.email.$error.required && form.password.$error.required && submitted">
+          <p class="help-block" ng-show="form.email.$error.required && form.password.$error.required && vm.submitted">
              Please enter your email and password.
           </p>
-          <p class="help-block" ng-show="form.email.$error.email && submitted">
+          <p class="help-block" ng-show="form.email.$error.email && vm.submitted">
              Please enter a valid email.
           </p>
 
-          <p class="help-block">{{ errors.other }}</p>
+          <p class="help-block">{{ vm.errors.other }}</p>
         </div>
 
         <div>

app/templates/client/app/account(auth)/login/login(jade).jade

@@ -17,18 +17,18 @@ navbar
         code admin
 
     .col-sm-12
-      form.form(name='form', ng-submit='login(form)', novalidate='')
+      form.form(name='form', ng-submit='vm.login(form)', novalidate='')
         .form-group
           label Email
-          input.form-control(type='email', name='email', ng-model='user.email')
+          input.form-control(type='email', name='email', ng-model='vm.user.email')
         .form-group
           label Password
-          input.form-control(type='password', name='password', ng-model='user.password')
+          input.form-control(type='password', name='password', ng-model='vm.user.password')
 
         .form-group.has-error
-          p.help-block(ng-show='form.email.$error.required && form.password.$error.required && submitted')
+          p.help-block(ng-show='form.email.$error.required && form.password.$error.required && vm.submitted')
             | Please enter your email and password.
-          p.help-block {{ errors.other }}
+          p.help-block {{ vm.errors.other }}
 
         div
           button.btn.btn-inverse.btn-lg.btn-login(type='submit')

app/templates/client/app/account(auth)/login/login.controller.js

@@ -1,26 +1,34 @@
 'use strict';
 
-angular.module('<%= scriptAppName %>')
-  .controller('LoginCtrl', function($scope, Auth<% if (filters.ngroute) { %>, $location<% } %><% if (filters.uirouter) { %>, $state<% } %>) {
-    $scope.user = {};
-    $scope.errors = {};
+class LoginController {
+  user = {};
+  errors = {};
+  submitted = false;
+
+  constructor(Auth<% if (filters.ngroute) { %>, $location<% } %><% if (filters.uirouter) { %>, $state<% } %>) {
+    this.Auth = Auth;<% if (filters.ngroute) { %>
+    this.$location = $location;<% } if (filters.uirouter) { %>
+    this.$state = $state;<% } %>
+  }
 
-    $scope.login = function(form) {
-      $scope.submitted = true;
+  login(form) {
+    this.submitted = true;
 
-      if (form.$valid) {
-        Auth.login({
-          email: $scope.user.email,
-          password: $scope.user.password
-        })
-        .then(function() {
-          // Logged in, redirect to home
-          <% if (filters.ngroute) { %>$location.path('/');<% } %><% if (filters.uirouter) { %>$state.go('main');<% } %>
-        })
-        .catch(function(err) {
-          $scope.errors.other = err.message;
-        });
-      }
-    };
+    if (form.$valid) {
+      this.Auth.login({
+        email: this.user.email,
+        password: this.user.password
+      })
+      .then(() => {
+        // Logged in, redirect to home
+        <% if (filters.ngroute) { %>this.$location.path('/');<% } %><% if (filters.uirouter) { %>this.$state.go('main');<% } %>
+      })
+      .catch(err => {
+        this.errors.other = err.message;
+      });
+    }
+  }
+}
 
-  });
+angular.module('<%= scriptAppName %>')
+  .controller('LoginController', LoginController);

app/templates/client/app/account(auth)/settings/settings(html).html

@@ -6,45 +6,45 @@
       <h1>Change Password</h1>
     </div>
     <div class="col-sm-12">
-      <form class="form" name="form" ng-submit="changePassword(form)" novalidate>
+      <form class="form" name="form" ng-submit="vm.changePassword(form)" novalidate>
 
         <div class="form-group">
           <label>Current Password</label>
 
-          <input type="password" name="password" class="form-control" ng-model="user.oldPassword"
+          <input type="password" name="password" class="form-control" ng-model="vm.user.oldPassword"
                  mongoose-error/>
           <p class="help-block" ng-show="form.password.$error.mongoose">
-              {{ errors.other }}
+              {{ vm.errors.other }}
           </p>
         </div>
 
         <div class="form-group">
           <label>New Password</label>
 
-          <input type="password" name="newPassword" class="form-control" ng-model="user.newPassword"
+          <input type="password" name="newPassword" class="form-control" ng-model="vm.user.newPassword"
                  ng-minlength="3"
                  required/>
           <p class="help-block"
-             ng-show="(form.newPassword.$error.minlength || form.newPassword.$error.required) && (form.newPassword.$dirty || submitted)">
+             ng-show="(form.newPassword.$error.minlength || form.newPassword.$error.required) && (form.newPassword.$dirty || vm.submitted)">
             Password must be at least 3 characters.
           </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"
+          <input type="password" name="confirmPassword" class="form-control" ng-model="vm.user.confirmPassword"
+                 match="vm.user.newPassword"
                  ng-minlength="3"
                  required=""/>
           <p class="help-block"
-             ng-show="form.confirmPassword.$error.match && submitted">
+             ng-show="form.confirmPassword.$error.match && vm.submitted">
             Passwords must match.
           </p>
 
         </div>
 
-        <p class="help-block"> {{ message }} </p>
+        <p class="help-block"> {{ vm.message }} </p>
 
         <button class="btn btn-lg btn-primary" type="submit">Save changes</button>
       </form>

app/templates/client/app/account(auth)/settings/settings(jade).jade

@@ -4,33 +4,33 @@ navbar
     .col-sm-12
       h1 Change Password
     .col-sm-12
-      form.form(name='form', ng-submit='changePassword(form)', novalidate='')
+      form.form(name='form', ng-submit='vm.changePassword(form)', novalidate='')
         .form-group
           label Current Password
           input.form-control(type='password'
             name='password'
-            ng-model='user.oldPassword'
+            ng-model='vm.user.oldPassword'
             mongoose-error='')
           p.help-block(ng-show='form.password.$error.mongoose')
-            | {{ errors.other }}
+            | {{ vm.errors.other }}
         .form-group
           label New Password
           input.form-control(type='password'
             name='newPassword'
-            ng-model='user.newPassword'
+            ng-model='vm.user.newPassword'
             ng-minlength='3', required='')
-          p.help-block(ng-show='(form.newPassword.$error.minlength || form.newPassword.$error.required) && (form.newPassword.$dirty || submitted)')
+          p.help-block(ng-show='(form.newPassword.$error.minlength || form.newPassword.$error.required) && (form.newPassword.$dirty || vm.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-model='vm.user.confirmPassword'
+            match="vm.user.newPassword"
             ng-minlength='3', required='')
-          p.help-block(ng-show='form.confirmPassword.$error.match && submitted')
+          p.help-block(ng-show='fvm.orm.confirmPassword.$error.match && vm.submitted')
             | Passwords must match.
 
-        p.help-block  {{ message }}
+        p.help-block  {{ vm.message }}
 
         button.btn.btn-lg.btn-primary(type='submit') Save changes

app/templates/client/app/account(auth)/settings/settings.controller.js

@@ -1,21 +1,29 @@
 'use strict';
 
-angular.module('<%= scriptAppName %>')
-  .controller('SettingsCtrl', function($scope, User, Auth) {
-    $scope.errors = {};
+class SettingsController {
+  errors = {};
+  submitted = false;
+
+  constructor(Auth) {
+    this.Auth = Auth;
+  }
+
+  changePassword(form) {
+    this.submitted = true;
 
-    $scope.changePassword = function(form) {
-      $scope.submitted = true;
-      if (form.$valid) {
-        Auth.changePassword($scope.user.oldPassword, $scope.user.newPassword)
-          .then(function() {
-            $scope.message = 'Password successfully changed.';
-          })
-          .catch(function() {
-            form.password.$setValidity('mongoose', false);
-            $scope.errors.other = 'Incorrect password';
-            $scope.message = '';
-          });
-      }
-    };
-  });
+    if (form.$valid) {
+      this.Auth.changePassword(this.user.oldPassword, this.user.newPassword)
+        .then(() => {
+          this.message = 'Password successfully changed.';
+        })
+        .catch(() => {
+          form.password.$setValidity('mongoose', false);
+          this.errors.other = 'Incorrect password';
+          this.message = '';
+        });
+    }
+  }
+}
+
+angular.module('<%= scriptAppName %>')
+  .controller('SettingsController', SettingsController);

app/templates/client/app/account(auth)/signup/signup(html).html

@@ -6,62 +6,62 @@
       <h1>Sign up</h1>
     </div>
     <div class="col-sm-12">
-      <form class="form" name="form" ng-submit="register(form)" novalidate>
+      <form class="form" name="form" ng-submit="vm.register(form)" novalidate>
 
-        <div class="form-group" ng-class="{ 'has-success': form.name.$valid && submitted,
-                                            'has-error': form.name.$invalid && submitted }">
+        <div class="form-group" ng-class="{ 'has-success': form.name.$valid && vm.submitted,
+                                            'has-error': form.name.$invalid && vm.submitted }">
           <label>Name</label>
 
-          <input type="text" name="name" class="form-control" ng-model="user.name"
+          <input type="text" name="name" class="form-control" ng-model="vm.user.name"
                  required/>
-          <p class="help-block" ng-show="form.name.$error.required && submitted">
+          <p class="help-block" ng-show="form.name.$error.required && vm.submitted">
             A name is required
           </p>
         </div>
 
-        <div class="form-group" ng-class="{ 'has-success': form.email.$valid && submitted,
-                                            'has-error': form.email.$invalid && submitted }">
+        <div class="form-group" ng-class="{ 'has-success': form.email.$valid && vm.submitted,
+                                            'has-error': form.email.$invalid && vm.submitted }">
           <label>Email</label>
 
-          <input type="email" name="email" class="form-control" ng-model="user.email"
+          <input type="email" name="email" class="form-control" ng-model="vm.user.email"
                  required
                  mongoose-error/>
-          <p class="help-block" ng-show="form.email.$error.email && submitted">
+          <p class="help-block" ng-show="form.email.$error.email && vm.submitted">
             Doesn't look like a valid email.
           </p>
-          <p class="help-block" ng-show="form.email.$error.required && submitted">
+          <p class="help-block" ng-show="form.email.$error.required && vm.submitted">
             What's your email address?
           </p>
           <p class="help-block" ng-show="form.email.$error.mongoose">
-            {{ errors.email }}
+            {{ vm.errors.email }}
           </p>
         </div>
 
-        <div class="form-group" ng-class="{ 'has-success': form.password.$valid && submitted,
-                                            'has-error': form.password.$invalid && submitted }">
+        <div class="form-group" ng-class="{ 'has-success': form.password.$valid && vm.submitted,
+                                            'has-error': form.password.$invalid && vm.submitted }">
           <label>Password</label>
 
-          <input type="password" name="password" class="form-control" ng-model="user.password"
+          <input type="password" name="password" class="form-control" ng-model="vm.user.password"
                  ng-minlength="3"
                  required
                  mongoose-error/>
           <p class="help-block"
-             ng-show="(form.password.$error.minlength || form.password.$error.required) && submitted">
+             ng-show="(form.password.$error.minlength || form.password.$error.required) && vm.submitted">
             Password must be at least 3 characters.
           </p>
           <p class="help-block" ng-show="form.password.$error.mongoose">
-            {{ errors.password }}
+            {{ vm.errors.password }}
           </p>
         </div>
 
-        <div class="form-group" ng-class="{ 'has-success': form.confirmPassword.$valid && submitted,
-                                            'has-error': form.confirmPassword.$invalid && submitted }">
+        <div class="form-group" ng-class="{ 'has-success': form.confirmPassword.$valid && vm.submitted,
+                                            'has-error': form.confirmPassword.$invalid && vm.submitted }">
           <label>Confirm Password</label>
-          <input type="password" name="confirmPassword" class="form-control" ng-model="user.confirmPassword"
-                 match="user.password"
+          <input type="password" name="confirmPassword" class="form-control" ng-model="vm.user.confirmPassword"
+                 match="vm.user.password"
                  ng-minlength="3" required/>
           <p class="help-block"
-             ng-show="form.confirmPassword.$error.match && submitted">
+             ng-show="form.confirmPassword.$error.match && vm.submitted">
             Passwords must match.
           </p>
         </div>