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/signup.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('signup', {
+        url: '/signup',
+        templateUrl: 'views/signup.html',
+        controller: 'SignUpCtrl'
+      })
+      .state('verifyEmail', {
+        url: '/verify-email/{accessToken:string}',
+        templateUrl: 'views/login.html',
+        controller: 'LoginCtrl',
+        resolve: {
+          accessToken: function($stateParams) {
+            return $stateParams.accessToken;
+          }
+        }
+      })
+      .state('forgotPassword', {
+        url: '/forgot-password',
+        templateUrl: 'views/forgot-password.html',
+        controller: 'ForgotPasswordCtrl'
+      })
+      .state('resetPassword', {
+        url: '/reset-password/{accessToken:string}',
+        templateUrl: 'views/reset-password.html',
+        controller: 'ResetPasswordCtrl',
+        resolve: {
+          accessToken: function($stateParams) {
+            return $stateParams.accessToken;
+          }
+        }
       })
       .state('dashboard', {
         abstract: true,
@@ -172,7 +207,7 @@ angular
 
         'response': function(result) {
           if (result.data.access_token) {
-            localStorageService.set('access_token', result.data.access_token);
+            Auth.setAccessToken(result.data.access_token);
           }
           return result;
         },

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

@@ -0,0 +1,33 @@
+'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() {
+      // Reset the error message for each request.
+      $scope.ErrorMsg = false;
+
+      Auth.resetPassword($scope.email).then(function () {
+          $scope.passwordResetSent = true;
+        },
+        function(response) {
+          $scope.ErrorMsg = response.data.title;
+
+          // Too many requests.
+          if (response.status == 429) {
+            $scope.ErrorMsg = response.statusText;
+            $scope.TooManyRequests = 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 ($state.current.name == 'verifyEmail' && 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,37 @@
+'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, accessToken) {
+
+    // If 'access-token' is not provided redirect to login.
+    if (!accessToken) {
+      $state.go('login');
+    }
+
+    // Determine if password was reset successfully.
+    $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) {
+      Auth.setAccessToken(accessToken);
+
+      Account.get().then(function(user) {
+        Auth.savePassword(user.id, password).then(function() {
+          $scope.passwordSaved = true;
+        });
+      });
+    };
+  });

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

@@ -0,0 +1,39 @@
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name clientApp.controller:SignUpCtrl
+ * @description
+ * # SignUpCtrl
+ * Controller of the clientApp
+ */
+angular.module('clientApp')
+  .controller('SignUpCtrl', function ($scope, Auth) {
+
+    // Reset the flags.
+    $scope.emailAvailable = true;
+    $scope.usernameAvailable = true;
+
+    /**
+     * Send a password reset link.
+     */
+    $scope.signUp = function(user) {
+      // Clear the error before each request.
+      $scope.signupError = undefined;
+
+      Auth.usersAvailability(user).then(function(response) {
+        $scope.usernameAvailable = response.data.data.available.name;
+        $scope.emailAvailable = response.data.data.available.mail;
+
+        if ($scope.emailAvailable && $scope.usernameAvailable) {
+          Auth.signUp(user).then(function() {
+            // User registered successfully.
+            $scope.signedUp = true;
+          }, function (response) {
+            // Error trying to register the user.
+            $scope.signupError = response.data.detail;
+          });
+        }
+      });
+    };
+  });

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, Auth) {
 
     // A private cache key.
     var cache = {};
@@ -43,6 +43,26 @@ angular.module('clientApp')
       return deferred.promise;
     }
 
+    /**
+     * Verify a user.
+     *
+     * @param accessToken
+     * @returns {*}
+     */
+    this.verifyEmail = function(accessToken) {
+      Auth.setAccessToken(accessToken);
+
+      // 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

@@ -10,6 +10,15 @@
 angular.module('clientApp')
   .service('Auth', function ($injector, $rootScope, Utils, localStorageService, Config) {
 
+    /**
+     * An access token setter.
+     *
+     * @param accessToken
+     */
+    this.setAccessToken = function(accessToken) {
+      localStorageService.set('access_token', accessToken);
+    };
+
     /**
      * Login by calling the Drupal REST server.
      *
@@ -29,6 +38,69 @@ 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 users availability.
+     *
+     * @param user
+     * @returns {*}
+     */
+    this.usersAvailability = function(user) {
+      var params = 'name=' + user.name + '&mail=' + user.mail;
+
+      return $injector.get('$http')({
+        method: 'GET',
+        url: Config.backend + '/api/users-availability?' + params
+      });
+    };
+
+    /**
+     * 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>
+          An email with instructions has been sent to "{{ email }}".
+        </div>
+
+        <div class="alert alert-danger fade in" ng-show="ErrorMsg">
+          <i class="fa fa-times-circle fa-fw fa-lg"></i>
+          {{ ErrorMsg }}
+        </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 || TooManyRequests" 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 || TooManyRequests" 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>