Registration & Reset password

app/templates/client/app/index.html

@@ -81,6 +81,9 @@ <h3>Login with demo / 1234</h3>
         <script src="scripts/controllers/companies.js"></script>
         <script src="scripts/controllers/events.js"></script>
         <script src="scripts/controllers/login.js"></script>
+        <script src="scripts/controllers/sign-up.js"></script>
+        <script src="scripts/controllers/forgot-password.js"></script>
+        <script src="scripts/controllers/reset-password.js"></script>
         <script src="scripts/services/auth.js"></script>
         <script src="scripts/services/utils.js"></script>
         <script src="scripts/services/events.js"></script>

app/templates/client/app/scripts/app.js

@@ -55,7 +55,42 @@ angular
       .state('login', {
         url: '/login',
         templateUrl: 'views/login.html',
-        controller: 'LoginCtrl'
+        controller: 'LoginCtrl',
+        resolve: {
+          accessToken: function($stateParams) {
+            return null;
+          }
+        }
+      })
+      .state('sign-up', {
+        url: '/sign-up',
+        templateUrl: 'views/sign-up.html',
+        controller: 'SignUpCtrl'
+      })
+      .state('verify-email', {
+        url: '/verify-email/{accessToken:string}',
+        templateUrl: 'views/login.html',
+        controller: 'LoginCtrl',
+        resolve: {
+          accessToken: function($stateParams) {
+            return $stateParams.accessToken;
+          }
+        }
+      })
+      .state('forgot-password', {
+        url: '/forgot-password',
+        templateUrl: 'views/forgot-password.html',
+        controller: 'ForgotPasswordCtrl'
+      })
+      .state('reset-password', {
+        url: '/reset-password/{accessToken:string}',
+        templateUrl: 'views/reset-password.html',
+        controller: 'ResetPasswordCtrl',
+        resolve: {
+          accessToken: function($stateParams) {
+            return $stateParams.accessToken;
+          }
+        }
       })
       .state('dashboard', {
         abstract: true,

app/templates/client/app/scripts/controllers/forgot-password.js

@@ -0,0 +1,27 @@
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name clientApp.controller:ForgotPasswordCtrl
+ * @description
+ * # ForgotPasswordCtrl
+ * Controller of the clientApp
+ */
+angular.module('clientApp')
+  .controller('ForgotPasswordCtrl', function ($scope, Auth) {
+
+    /**
+     * Send a password reset link.
+     */
+    $scope.forgotPassword = function() {
+      Auth.resetPassword($scope.email).then(function () {
+          $scope.passwordResetSent = true;
+        },
+        function(response) {
+          // Too many requests.
+          if (response.status == 429) {
+            $scope.ErrorMsg = true;
+          }
+        });
+    };
+  });

app/templates/client/app/scripts/controllers/login.js

@@ -8,7 +8,14 @@
  * Controller of the clientApp
  */
 angular.module('clientApp')
-  .controller('LoginCtrl', function ($scope, Auth, $state) {
+  .controller('LoginCtrl', function ($scope, Auth, $state, Account, accessToken) {
+
+    // Try to verify the email when access token is being passed.
+    if (accessToken) {
+      Account.verifyEmail(accessToken).then(function () {
+        $scope.emailVerified = true;
+      });
+    }
 
     // Will be FALSE during login GET period - will cause the login button to be
     // disabled.

app/templates/client/app/scripts/controllers/reset-password.js

@@ -0,0 +1,35 @@
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name clientApp.controller:ResetPasswordCtrl
+ * @description
+ * # ResetPasswordCtrl
+ * Controller of the clientApp
+ */
+angular.module('clientApp')
+  .controller('ResetPasswordCtrl', function ($scope, Auth, $state, $location, Account, localStorageService, accessToken) {
+
+    // If 'access-token' is not provided as a URL parameter, redirect to login.
+    if (!accessToken) {
+      $state.go('login');
+    }
+
+    $scope.passwordSaved = false;
+
+    /**
+     * Setting the access token in the localStorage so we can get the account
+     * information and pull out the user ID from it to PATCH the user entity.
+     *
+     * @param password
+     *  The new password.
+     */
+    $scope.saveNewPassword = function(password) {
+      localStorageService.set('access_token', accessToken);
+      Account.get().then(function(user) {
+        Auth.savePassword(user.id, password).then(function() {
+          $scope.passwordSaved = true;
+        });
+      });
+    };
+  });

app/templates/client/app/scripts/controllers/sign-up.js

@@ -0,0 +1,44 @@
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name clientApp.controller:SignUpCtrl
+ * @description
+ * # SignUpCtrl
+ * Controller of the clientApp
+ */
+angular.module('clientApp')
+  .controller('SignUpCtrl', function ($scope, Auth) {
+
+    /**
+     * Send a password reset link.
+     */
+    $scope.signUp = function(user) {
+
+      // Reset the flags before each request.
+      $scope.emailNotAvailable = false;
+      $scope.usernameNotAvailable = false;
+
+      Auth.usernameAvailable(user.username).then(function(response) {
+        if (response.data.data.available) {
+          Auth.emailAvailable(user.email).then(function(response) {
+            if (response.data.data.available) {
+              // Email is available.
+              Auth.signUp(user).then(function() {
+                // User registered successfully.
+                $scope.signedUp = true;
+              });
+            }
+            else {
+              // Email is not available.
+              $scope.emailNotAvailable = true;
+            }
+          });
+        }
+        else {
+          // Username is not available.
+          $scope.usernameNotAvailable = true;
+        }
+      });
+    };
+  });

app/templates/client/app/scripts/services/account.js

@@ -8,7 +8,7 @@
  * Service in the clientApp.
  */
 angular.module('clientApp')
-  .service('Account', function ($q, $http, $timeout, Config, $rootScope, $log) {
+  .service('Account', function ($q, $http, $timeout, Config, $rootScope, $log, localStorageService) {
 
     // A private cache key.
     var cache = {};
@@ -43,6 +43,26 @@ angular.module('clientApp')
       return deferred.promise;
     }
 
+    /**
+     * Verify a user.
+     *
+     * @param token
+     * @returns {*}
+     */
+    this.verifyEmail = function(token) {
+      localStorageService.set('access_token', token);
+
+      // After setting the access token in the local storage, try to get the
+      // user account from the data, if succeed then change its status.
+      return getDataFromBackend().then(function(user) {
+        return $http({
+          method: 'PATCH',
+          url: Config.backend + '/api/users-update/' + user.id,
+          data: {status: 1}
+        });
+      });
+    };
+
     /**
      * Save meters in cache, and broadcast en event to inform that the meters data changed.
      *

app/templates/client/app/scripts/services/auth.js

@@ -29,6 +29,82 @@ angular.module('clientApp')
       });
     };
 
+    /**
+     * If email is available then send to it an email with instructions.
+     *
+     * @param email
+     *  The email of the user.
+     *
+     * @returns {*}
+     */
+    this.resetPassword = function(email) {
+      return $injector.get('$http')({
+        method: 'POST',
+        url: Config.backend + '/api/reset-password',
+        data: {email: email}
+      });
+    };
+
+    /**
+     * Save new password for a user.
+     *
+     * @param uid
+     *  User id.
+     * @param password
+     *  A new password to set.
+     *
+     * @returns {*}
+     */
+    this.savePassword = function(uid, password) {
+      return $injector.get('$http')({
+        method: 'PATCH',
+        url: Config.backend + '/api/users-update/' + uid,
+        data: {password: password}
+      });
+    };
+
+    /**
+     * Checks if email is available.
+     *
+     * @param email
+     * @returns {*}
+     */
+    this.emailAvailable = function(email) {
+      return $injector.get('$http')({
+        method: 'POST',
+        url: Config.backend + '/api/email-available',
+        data: {email: email}
+      });
+    };
+
+    /**
+     * Checks if username is available.
+     *
+     * @param username
+     * @returns {*}
+     */
+    this.usernameAvailable = function(username) {
+      return $injector.get('$http')({
+        method: 'POST',
+        url: Config.backend + '/api/username-available',
+        data: {username: username}
+      });
+    };
+
+    /**
+     * Sign Up new user.
+     *
+     * @param data
+     * @returns {*}
+     */
+    this.signUp = function(data) {
+      return $injector.get('$http')({
+        method: 'POST',
+        url: Config.backend + '/api/users-update',
+        data: data
+      });
+    };
+
     /**
      * Logout current user.
      *

app/templates/client/app/styles/main.scss

@@ -12,3 +12,7 @@
   min-height: 500px;
 }
 
+.vertical-space {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}

app/templates/client/app/views/forgot-password.html

@@ -0,0 +1,53 @@
+<div id="dashboard-forgot-password">
+  <div class="page-forgot-password">
+    <div class="forgot-password-header">
+      <section class="logo text-center">
+        <h1>Skeleton</h1>
+      </section>
+    </div>
+
+    <div class="forgot-password-body">
+      <div class="container">
+
+        <div class="alert alert-success fade in" ng-show="passwordResetSent">
+          <i class="fa fa-check-circle fa-fw fa-lg"></i>
+          If the username is registered in our system we'll send you an email with instructions.
+        </div>
+
+        <div class="alert alert-danger fade in" ng-show="ErrorMsg">
+          <i class="fa fa-times-circle fa-fw fa-lg"></i>
+          Request failed.
+        </div>
+
+        <h4>Forgot your password?</h4>
+        <p>Enter your email to recover your password.</p>
+
+        <div class="form-container">
+          <form class="form-horizontal" id="login" ng-submit="forgotPassword()">
+            <fieldset>
+              <div class="form-group">
+                <div class="input-group input-group-first">
+                <span class="input-group-addon">
+                    <span class="ti-email"></span>
+                </span>
+                  <input ng-disabled="passwordResetSent" ng-model="email" name="email" type="text" class="form-control input-lg" placeholder="Email" required>
+                </div>
+              </div>
+
+              <div class="form-group">
+                <input ng-disabled="passwordResetSent || ErrorMsg" type="submit" class="btn btn-primary btn-lg btn-block text-center" id="submit" value="Recover Password" />
+              </div>
+
+              <div class="row">
+                <div class="col-xs-6">
+                  <a ui-sref="login">Back to login</a>
+                </div>
+              </div>
+            </fieldset>
+          </form>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

app/templates/client/app/views/login.html

@@ -8,7 +8,20 @@ <h1>Skeleton</h1>
 
     <div class="signin-body">
       <div class="container">
+
+        <div class="row vertical-space">
+          <div class="col-xs-6">
+            <a ui-sref="sign-up">Sing up</a>
+          </div>
+        </div>
+
+        <div class="alert alert-success fade in" ng-show="emailVerified">
+          <i class="fa fa-check-circle fa-fw fa-lg"></i>
+          Your email has been verified successfully.
+        </div>
+
         <div class="form-container">
+
           <form class="form-horizontal" id="login" ng-submit="login(user)">
             <fieldset>
               <div class="form-group">
@@ -34,6 +47,12 @@ <h1>Skeleton</h1>
                 <input ng-disabled="!loginButtonEnabled" type="submit" class="btn btn-primary btn-lg btn-block text-center" id="submit" value="Log in" />
               </div>
 
+              <div id="remember-me-wrapper" class="row">
+                <div class="col-xs-6">
+                  <a ui-sref="forgot-password" id="login-forget-link">Forgot your password?</a>
+                </div>
+              </div>
+
               <div class="divider divider-xl"></div>
 
               <div class="message error">