Ticket #107 Implementation of 'Forgot password'

Daniela Feitosa
1 parent afb4744a
Showing 9 changed files with 129 additions and 17 deletions Show diff stats
src/app/login/auth.controller.spec.ts
src/app/login/auth.controller.ts
src/app/login/auth.service.ts
src/app/login/forgot-password.html
src/app/login/login.html
src/app/login/login.scss
src/app/shared/services/notification.service.ts
src/languages/en.json
src/languages/pt.json
 import {AuthController} from "./auth.controller";
 import {AuthService} from "./auth.service";
+import * as helpers from "./../../spec/helpers";
 describe("Controllers", () => {
     describe("AuthController", () => {
-        it("calls authenticate on AuthService when login called", () => {
+        let $modal: any;
+        let notificationService = helpers.mocks.notificationService;
+        notificationService.success = jasmine.createSpy('info');
+        notificationService.error = jasmine.createSpy('error');
-            // creating a Mock AuthService
-            let AuthServiceMock: AuthService = jasmine.createSpyObj("AuthService", ["login"]);
+        let authController: any;
+        let AuthServiceMock: AuthService;
+        let username: string;
-            // pass AuthServiceMock into the constructor
-            let authController = new AuthController(null, null, AuthServiceMock);
+        beforeEach(() => {
+            $modal = helpers.mocks.$modal;
+            AuthServiceMock = jasmine.createSpyObj("AuthService", ["login",
+"forgotPassword"]);
+            authController = new AuthController(null, null, AuthServiceMock, $modal, notificationService);
+        });
-            // setup of authController -> set the credentials instance property
-            let credentials = { username: "username", password: "password" };
+        it("calls authenticate on AuthService when login called", () => {
+            let credentials = { username: "username", password: "password" };
             authController.credentials = credentials;
-
-            // calls the authController login method
             authController.login();
-
-            // checks if the method login of the injected AuthService has been called
             expect(AuthServiceMock.login).toHaveBeenCalledWith(credentials);
-
         });
+        it('should open forgot password on click', (done: Function) => {
+            spyOn($modal, "open");
+            authController.openForgotPassword();
+            expect($modal.open).toHaveBeenCalled();
+            expect($modal.open).toHaveBeenCalledWith({
+                templateUrl: 'app/login/forgot-password.html',
+                controller: AuthController,
+                controllerAs: 'vm',
+                bindToController: true
+            });
+            done();
+        });
+        it("calls forgotPassword on AuthService when sendPasswdInfo called", done => {
+            authController.username = "john";
+            AuthServiceMock.forgotPassword = jasmine.createSpy("forgotPassword").and.returnValue(Promise.resolve());
+            authController.sendPasswdInfo();
+            expect(AuthServiceMock.forgotPassword).toHaveBeenCalledWith("john");
+            done();
+        });
     });
 });
-import {AuthService} from "./auth.service";
+import { AuthService } from "./auth.service";
+import { NotificationService } from "./../shared/services/notification.service";
 export class AuthController {
-    static $inject = ["$log", "$stateParams", "AuthService"];
+    static $inject = ["$log", "$stateParams", "AuthService", "$uibModal", "NotificationService"];
+    modalInstance: ng.ui.bootstrap.IModalServiceInstance;
     constructor(
         private $log: ng.ILogService,
         private $stateParams: any,
-        private AuthService: AuthService
+        private AuthService: AuthService,
+        private $uibModal: ng.ui.bootstrap.IModalService,
+        private notificationService: NotificationService
     ) {
     }
     credentials: noosfero.Credentials;
+    username: string;
     login() {
         this.AuthService.login(this.credentials);
     }
+
+    openForgotPassword() {
+        this.modalInstance = this.$uibModal.open({
+            templateUrl: 'app/login/forgot-password.html',
+            controller: AuthController,
+            controllerAs: 'vm',
+            bindToController: true,
+        });
+    }
+
+    sendPasswdInfo() {
+        this.AuthService.forgotPassword(this.username).then((response) => {
+            this.notificationService.info({ title: "forgotPasswd.email_sent.title.info", message: "forgotPasswd.email_sent.message.info" });
+        }).catch((response) => {
+            this.notificationService.error({ title: "forgotPasswd.not_found.title.error", message: "forgotPasswd.not_found.message.error" });
+            this.openForgotPassword();
+        });
+    }
 }
@@ -2,11 +2,12 @@ import {Injectable, Inject, EventEmitter} from &quot;ng-forward&quot;;
 import {NoosferoRootScope, UserResponse} from "./../shared/models/interfaces";
 import {SessionService} from "./session.service";
+import { RestangularService } from "./../../lib/ng-noosfero-api/http/restangular_service";
 import {AuthEvents} from "./auth-events";
 @Injectable()
-@Inject("$http", SessionService, "$log")
+@Inject("$http", SessionService, "$log", "Restangular")
 export class AuthService {
     public loginSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();
@@ -15,7 +16,10 @@ export class AuthService {
     constructor(private $http: ng.IHttpService,
         private sessionService: SessionService,
-        private $log: ng.ILogService) {
+        private $log: ng.ILogService,
+        private Restangular: restangular.IService
+    ) {
+        this.Restangular = Restangular;
     }
     loginFromCookie() {
@@ -76,4 +80,9 @@ export class AuthService {
             throw new Error(`The event: ${eventName} not exists`);
         }
     }
+
+    forgotPassword(value: string): ng.IPromise<noosfero.RestResult<any>> {
+        return this.Restangular.all("").customPOST("", "forgot_password", {value: value});
+    }
+
 }
@@ -0,0 +1,20 @@
+<div class="modal-header">
+  <h3 class="modal-title">{{"auth.form.forgot_passwd" | translate}}</h3>
+</div>
+<div class="modal-body">
+  <form name="forgotPasswdForm">
+    <div class="form-group" ng-class="{'has-error': forgotPasswdForm.username.$error.required }">
+      <label for="forgotPasswdLogin">{{"auth.form.login" | translate}}</label>
+      <input type="text" name="username" class="form-control" id="forgotPasswdLogin" placeholder="{{'auth.form.login' | translate}}" ng-model="vm.username"  required>
+        <div class="help-block" ng-messages="forgotPasswdForm.username.$error">
+          <div ng-if="forgotPasswdForm.username.$touched">
+            <ul class="list-unstyled">
+              <li ng-messages-include="app/shared/messages/form-errors.html"></li>
+            </ul>
+          </div>
+        </div>
+    </div>
+    <button type="submit" class="btn btn-default btn-block" ng-click="vm.sendPasswdInfo(); $close()" ng-disabled="forgotPasswdForm.$invalid">{{"forgotPasswd.send_instructions_button" | translate}}</button>
+  </form>
+  <p>{{"forgotPasswd.info" | translate}}</p>
+</div>
@@ -18,6 +18,9 @@
           {{"auth.form.keepLoggedIn" | translate}}
         </label>
       </div>
+      <div class="pull-right">
+        <a ng-click="vm.openForgotPassword()" href="">{{"auth.form.forgot_passwd" | translate}}</a>
+      </div>
     </div>
     <button type="submit" class="btn btn-default btn-block" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
   </form>
@@ -10,6 +10,12 @@
       margin-top: 20px;
       text-transform: uppercase;
     }
+    .form-inline {
+      display: inline;
+      div {
+        display: inline-block;
+      }
+    }
   }
 }
@@ -14,6 +14,8 @@ export class NotificationService {
     public static DEFAULT_ERROR_TITLE = "notification.error.default.title";
     public static DEFAULT_ERROR_MESSAGE = "notification.error.default.message";
     public static DEFAULT_SUCCESS_TIMER = 1000;
+    public static DEFAULT_INFO_TITLE = "notification.info.default.title";
+    public static DEFAULT_INFO_MESSAGE = "notification.info.default.message";
     error({
         message = NotificationService.DEFAULT_ERROR_MESSAGE,
@@ -40,6 +42,14 @@ export class NotificationService {
         this.showMessage({ title: title, text: message, showCancelButton: showCancelButton, type: type, closeOnConfirm: false }, confirmationFunction);
     }
+    info({
+        message = NotificationService.DEFAULT_INFO_MESSAGE,
+        title = NotificationService.DEFAULT_INFO_TITLE,
+        showConfirmButton = true
+    } = {}) {
+        this.showMessage({ title: title, text: message, showConfirmButton: showConfirmButton, type: "info" });
+    }
+
     private showMessage({title, text, type = "success", timer = null, showConfirmButton = true, showCancelButton = false, closeOnConfirm = true}, confirmationFunction: Function = null) {
         this.$log.debug("Notification message:", title, text, type, this.translatorService.currentLanguage());
         this.SweetAlert.swal({
@@ -34,8 +34,15 @@
   "auth.form.login": "Username or Email address",
   "auth.form.password": "Password",
   "auth.form.keepLoggedIn": "Keep me logged in",
+  "auth.form.forgot_passwd": "Forgot your password?",
   "auth.form.login_button": "Login",
   "auth.createAccount": "Create account",
+  "forgotPasswd.send_instructions_button": "Send instructions",
+  "forgotPasswd.info": "Upon clicking on the button above, you'll receive an email with instructions on how to create a new password.",
+  "forgotPasswd.email_sent.title.info": "Change your password",
+  "forgotPasswd.email_sent.message.info": "Follow the instructions sent by email to change your password",
+  "forgotPasswd.not_found.title.error": "User not found",
+  "forgotPasswd.not_found.message.error": "Could not send password recovery for the user",
   "navbar.content_viewer_actions.new_item": "New Item",
   "navbar.profile_actions.new_item": "New Item",
   "navbar.content_viewer_actions.new_post": "New Post",
@@ -43,6 +50,8 @@
   "navbar.profile_actions.new_discussion": "New Discussion",
   "notification.error.default.message": "Something went wrong!",
   "notification.error.default.title": "Oops...",
+  "notification.info.default.message": "",
+  "notification.info.default.title": "Information",
   "notification.profile.not_found": "Page not found",
   "notification.http_error.401.message": "Unauthorized",
   "notification.http_error.500.message": "Server error",
@@ -34,8 +34,15 @@
   "auth.form.login": "Nome de usuário ou Email",
   "auth.form.password": "Senha",
   "auth.form.keepLoggedIn": "Continuar logado",
+  "auth.form.forgot_passwd": "Esqueceu sua senha?",
   "auth.form.login_button": "Login",
   "auth.createAccount": "Criar conta",
+  "forgotPasswd.send_instructions_button": "Send instructions",
+  "forgotPasswd.info": "Ao clicar no botão acima, você receberá um email com instruções para criar uma nova senha.",
+  "forgotPasswd.email_sent.title.info": "Altere sua senha",
+  "forgotPasswd.email_sent.message.info": "Siga as instruções enviadas por e-mail para alterar sua senha",
+  "forgotPasswd.not_found.title.error": "Usuário não encontrado",
+  "forgotPasswd.not_found.message.error": "Não foi possível recuperar a senha deste usuário",
   "navbar.content_viewer_actions.new_item": "Novo Item",
   "navbar.profile_actions.new_item": "Novo Item",
   "navbar.content_viewer_actions.new_post": "Novo Post",
@@ -43,6 +50,8 @@
   "navbar.profile_actions.new_discussion": "Nova Discussão",
   "notification.error.default.message": "Algo deu errado!",
   "notification.error.default.title": "Oops...",
+  "notification.info.default.message": "",
+  "notification.info.default.title": "Informação",
   "notification.profile.not_found": "Página não encontrada",
   "notification.http_error.401.message": "Não autorizado",
   "notification.http_error.500.message": "Erro no servidor",
1	-import {AuthService} from "./auth.service";	1	+import { AuthService } from "./auth.service";
		2	+import { NotificationService } from "./../shared/services/notification.service";
2		3
3	export class AuthController {	4	export class AuthController {
4		5
5	- static $inject = ["$log", "$stateParams", "AuthService"];	6	+ static $inject = ["$log", "$stateParams", "AuthService", "$uibModal", "NotificationService"];
		7	+ modalInstance: ng.ui.bootstrap.IModalServiceInstance;
6		8
7	constructor(	9	constructor(
8	private $log: ng.ILogService,	10	private $log: ng.ILogService,
9	private $stateParams: any,	11	private $stateParams: any,
10	- private AuthService: AuthService	12	+ private AuthService: AuthService,
		13	+ private $uibModal: ng.ui.bootstrap.IModalService,
		14	+ private notificationService: NotificationService
11	) {	15	) {
12		16
13	}	17	}
14		18
15	credentials: noosfero.Credentials;	19	credentials: noosfero.Credentials;
		20	+ username: string;
16		21
17	login() {	22	login() {
18	this.AuthService.login(this.credentials);	23	this.AuthService.login(this.credentials);
19	}	24	}
		25	+
		26	+ openForgotPassword() {
		27	+ this.modalInstance = this.$uibModal.open({
		28	+ templateUrl: 'app/login/forgot-password.html',
		29	+ controller: AuthController,
		30	+ controllerAs: 'vm',
		31	+ bindToController: true,
		32	+ });
		33	+ }
		34	+
		35	+ sendPasswdInfo() {
		36	+ this.AuthService.forgotPassword(this.username).then((response) => {
		37	+ this.notificationService.info({ title: "forgotPasswd.email_sent.title.info", message: "forgotPasswd.email_sent.message.info" });
		38	+ }).catch((response) => {
		39	+ this.notificationService.error({ title: "forgotPasswd.not_found.title.error", message: "forgotPasswd.not_found.message.error" });
		40	+ this.openForgotPassword();
		41	+ });
		42	+ }
20	}	43	}
@@ -0,0 +1,20 @@		@@ -0,0 +1,20 @@
	1	+<div class="modal-header">
	2	+ <h3 class="modal-title">{{"auth.form.forgot_passwd" \| translate}}</h3>
	3	+</div>
	4	+<div class="modal-body">
	5	+ <form name="forgotPasswdForm">
	6	+ <div class="form-group" ng-class="{'has-error': forgotPasswdForm.username.$error.required }">
	7	+ <label for="forgotPasswdLogin">{{"auth.form.login" \| translate}}</label>
	8	+ <input type="text" name="username" class="form-control" id="forgotPasswdLogin" placeholder="{{'auth.form.login' \| translate}}" ng-model="vm.username" required>
	9	+ <div class="help-block" ng-messages="forgotPasswdForm.username.$error">
	10	+ <div ng-if="forgotPasswdForm.username.$touched">
	11	+ <ul class="list-unstyled">
	12	+ <li ng-messages-include="app/shared/messages/form-errors.html"></li>
	13	+ </ul>
	14	+ </div>
	15	+ </div>
	16	+ </div>
	17	+ <button type="submit" class="btn btn-default btn-block" ng-click="vm.sendPasswdInfo(); $close()" ng-disabled="forgotPasswdForm.$invalid">{{"forgotPasswd.send_instructions_button" \| translate}}</button>
	18	+ </form>
	19	+ <p>{{"forgotPasswd.info" \| translate}}</p>
	20	+</div>
	@@ -10,6 +10,12 @@		@@ -10,6 +10,12 @@
10	margin-top: 20px;	10	margin-top: 20px;
11	text-transform: uppercase;	11	text-transform: uppercase;
12	}	12	}
		13	+ .form-inline {
		14	+ display: inline;
		15	+ div {
		16	+ display: inline-block;
		17	+ }
		18	+ }
13	}	19	}
14	}	20	}
15		21