Merge branch 'login-block' into 'master'

Login block Added the Noosfero basic login-block. See merge request !12

Merge branch 'login-block' into 'master'
Login block Added the Noosfero basic login-block. See merge request !12
Carlos Purificação
2 parents 7921e436 f68015db
Showing 10 changed files with 224 additions and 4 deletions Show diff stats
src/app/layout/blocks/login-block/index.ts
src/app/layout/blocks/login-block/login-block.component.spec.ts
src/app/layout/blocks/login-block/login-block.component.ts
src/app/layout/blocks/login-block/login-block.html
src/app/login/session.service.ts
src/app/main/main.component.ts
src/lib/ng-noosfero-api/interfaces/person.ts
src/lib/ng-noosfero-api/interfaces/profile.ts
src/spec/component-test-helper.ts
src/spec/mocks.ts
@@ -0,0 +1,110 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Injectable, Provider, provide} from "ng-forward";
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {LoginBlockComponent} from './login-block.component';
+import * as helpers from "./../../../../spec/helpers";
+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../../login";
+
+const htmlTemplate: string = '<noosfero-login-block></noosfero-login-block>';
+
+describe("Components", () => {
+
+    describe("Login Block Component", () => {
+        let helper: ComponentTestHelper<LoginBlockComponent>;
+        let person: any = null;
+
+        /**
+         * Mock objects
+         */
+        let authService: any = helpers.mocks.authService;
+        let user = <noosfero.User>{ person: person };
+        let sessionService: any = <any>helpers.mocks.sessionWithCurrentUser(user);
+        let state = jasmine.createSpyObj("$state", ["go"]);
+        let scope = helpers.mocks.scopeWithEvents;
+
+        let providers = [
+            new Provider('SessionService', { useValue: sessionService }),
+            new Provider('$state', { useValue: state }),
+            new Provider('AuthService', { useValue: authService }),
+            new Provider('$scope', { useValue: scope })
+        ];
+
+        beforeEach( angular.mock.module("templates") );
+
+        beforeEach( (done: Function) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [LoginBlockComponent],
+                providers: providers,
+                properties: {}
+            });
+            helper = new ComponentTestHelper<LoginBlockComponent>(cls, done);
+        });
+
+        it("expect person to be null with no logged in user", () => {
+            expect(helper.component.currentUser).toBeNull;
+        });
+
+        it("expect person to be defined when user login", () => {
+            // Executes the login method on the component
+            doComponentLogin();
+            expect(helper.component.currentUser.person).toBe(person);
+        });
+
+        it("expect person to be null when user logout", () => {
+            // First do a login
+            doComponentLogin();
+            // The logout the user
+            doComponentLogout();
+            // Check if the current user was cleared
+            expect(helper.component.currentUser).toBeNull;
+        });
+
+        /**
+         * Execute the logout method on the target component
+         */
+        function doComponentLogout() {
+            // Create a mock for the AuthService logout method
+            spyOn(authService, "logout");
+            helper.component.logout();
+            expect(authService.logout).toHaveBeenCalled();
+            // After the component logout method execution, fire the
+            // AuthService event
+            simulateLogoutEvent();
+        }
+
+        /**
+         * Execute the login method on the target component
+         */
+        function doComponentLogin() {
+            // Create a mock for the AuthService login method
+            spyOn(authService, "login");
+            helper.component.login();
+            expect(authService.login).toHaveBeenCalled();
+            // After the component login method execution, fire the
+            // AuthService event
+            simulateLoginEvent();
+        }
+
+        /**
+         * Simulate the AuthService loginSuccess event
+         */
+        function simulateLoginEvent() {
+            let successEvent: string = AuthEvents[AuthEvents.loginSuccess];
+
+            (<any>helper.component.authService)[successEvent].next(user);
+        }
+
+        /**
+         * Simulate the AuthService logoutSuccess event
+         */
+        function simulateLogoutEvent() {
+            let successEvent: string = AuthEvents[AuthEvents.logoutSuccess];
+
+            (<any>helper.component.authService)[successEvent].next(user);
+        }
+    });
+
+});
 \ No newline at end of file
@@ -0,0 +1,73 @@
+import {Input, Inject, Component} from "ng-forward";
+import {SessionService, AuthService, AuthEvents} from "./../../../login";
+
+/**
+ * @ngdoc controller
+ * @name layout.blocks.LoginBlockComponent
+ * @description
+ *  The Noosfero block responible for presenting a login form and user status 
+ */
+@Component({
+    selector: "noosfero-login-block",
+    templateUrl: 'app/layout/blocks/login-block/login-block.html',
+})
+@Inject("SessionService", "$state", 'AuthService', "$scope")
+export class LoginBlockComponent {
+
+    /**
+     * @ngdoc property
+     * @name currentUser
+     * @propertyOf layout.blocks.LoginBlockComponent
+     * @description
+     *  The current loged in user
+     */
+    currentUser: noosfero.User;
+
+    /**
+     * @ngdoc property
+     * @name credentials
+     * @propertyOf layout.blocks.LoginBlockComponent
+     * @description
+     *  The credentials of the currentUser
+     */
+    credentials: noosfero.Credentials;
+
+    constructor(
+        private session: SessionService,
+        private $state: ng.ui.IStateService,
+        public authService: AuthService,
+        private $scope: ng.IScope) {
+        this.currentUser = this.session.currentUser();
+
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
+            this.currentUser = this.session.currentUser();
+        });
+
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
+            this.currentUser = this.session.currentUser();
+        });
+
+    }
+
+    /**
+     * @ngdoc method
+     * @name login
+     * @methodOf layout.blocks.LoginBlockComponent
+     * @description
+     *  Logs in the user using its credentials
+     */
+    login() {
+        this.authService.login(this.credentials);
+    }
+
+    /**
+     * @ngdoc method
+     * @name logout
+     * @methodOf layout.blocks.LoginBlockComponent
+     * @description
+     *  Logout the user
+     */
+    logout() {
+        this.authService.logout();
+    };
+}
@@ -0,0 +1,27 @@
+<div class="logged-user-info" ng-show="ctrl.currentUser">
+    <h4>Logged in as {{ctrl.currentUser.person.identifier}}</h4>
+    <ul>
+        <li>User since 
+            <span class="time">
+                <span am-time-ago="ctrl.currentUser.person.created_at | dateFormat"></span>
+            </span>        
+        </li>
+      <li><a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})">Profile Homepage</a></li>
+    </ul>
+    <div class="user-actions">
+      <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" | translate}}</a>
+    </div>    
+</div>
+<div class="logged-user-info" ng-show="!ctrl.currentUser">
+  <form>
+    <div class="form-group">
+      <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
+      <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="ctrl.credentials.username">
+    </div>
+    <div class="form-group">
+      <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
+      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="ctrl.credentials.password">
+    </div>
+    <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" | translate}}</button>
+  </form>
+</div>
 \ No newline at end of file
@@ -11,13 +11,11 @@ export class SessionService {
     create(data: UserResponse): noosfero.User {
         this.$localStorage.currentUser = data.user;
-        this.$log.debug('User session created.', this.$localStorage.currentUser);
         return this.$localStorage.currentUser;
     };
     destroy() {
         delete this.$localStorage.currentUser;
-        this.$log.debug('User session destroyed.');
     };
     currentUser(): noosfero.User {
@@ -19,6 +19,7 @@ import {StatisticsBlockComponent} from &quot;../layout/blocks/statistics/statistics-b
 import {MembersBlockComponent} from "./../layout/blocks/members/members-block.component";
 import {CommunitiesBlockComponent} from "./../layout/blocks/communities/communities-block.component";
+import {LoginBlockComponent} from "../layout/blocks/login-block/login-block.component";
 import {NoosferoTemplate} from "../shared/pipes/noosfero-template.filter";
 import {DateFormat} from "../shared/pipes/date-format.filter";
@@ -96,7 +97,8 @@ export class EnvironmentContent {
         EnvironmentComponent, PeopleBlockComponent,
         LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
-        MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent
+        MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
+        LoginBlockComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService]
@@ -6,6 +6,5 @@ namespace noosfero {
      *  A representation of a Person in Noosfero.
      */
     export interface Person extends Profile {
-
     }
 }
 \ No newline at end of file
@@ -22,6 +22,14 @@ namespace noosfero {
          * @returns {string} The unque identifier for the Profile
          */
         identifier: string;
+        
+        /**
+         * @ngdoc property
+         * @name created_at
+         * @propertyOf noofero.Profile
+         * @returns {string} The timestamp this object was created
+         */        
+        created_at: string;
         /**
          * @ngdoc property
@@ -2,6 +2,7 @@ import { Component } from &quot;ng-forward&quot;;
 import { TestComponentBuilder, ngClass } from 'ng-forward/cjs/testing/test-component-builder';
 import { INgForwardJQuery } from "ng-forward/cjs/util/jqlite-extensions";
 import { ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder';
+import * as helpers from './helpers';
 /**
  * @ngdoc object
@@ -149,6 +150,7 @@ export function createClass({
     providers = <any[]>[],
     properties = <any>{}
 }): any {
+    providers = providers.concat(helpers.provideFilters("translateFilter"));
     @Component({ selector: 'component-test-helper-container', template, directives, providers })
     class Test {
         constructor() {
@@ -68,6 +68,7 @@ export var mocks: any = {
                 mocks.authService['logoutSuccess'].event(param);
             }
         },
+        login: () => { },
         logout: () => { },
         subscribe: (eventName: string, fn: Function) => {
             mocks.authService[eventName].subscribe(fn);
	@@ -0,0 +1,110 @@		@@ -0,0 +1,110 @@
		1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
		2	+import {Injectable, Provider, provide} from "ng-forward";
		3	+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
		4	+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
		5	+import {providers} from 'ng-forward/cjs/testing/providers';
		6	+import {LoginBlockComponent} from './login-block.component';
		7	+import * as helpers from "./../../../../spec/helpers";
		8	+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../../login";
		9	+
		10	+const htmlTemplate: string = '<noosfero-login-block></noosfero-login-block>';
		11	+
		12	+describe("Components", () => {
		13	+
		14	+ describe("Login Block Component", () => {
		15	+ let helper: ComponentTestHelper<LoginBlockComponent>;
		16	+ let person: any = null;
		17	+
		18	+ /**
		19	+ * Mock objects
		20	+ */
		21	+ let authService: any = helpers.mocks.authService;
		22	+ let user = <noosfero.User>{ person: person };
		23	+ let sessionService: any = <any>helpers.mocks.sessionWithCurrentUser(user);
		24	+ let state = jasmine.createSpyObj("$state", ["go"]);
		25	+ let scope = helpers.mocks.scopeWithEvents;
		26	+
		27	+ let providers = [
		28	+ new Provider('SessionService', { useValue: sessionService }),
		29	+ new Provider('$state', { useValue: state }),
		30	+ new Provider('AuthService', { useValue: authService }),
		31	+ new Provider('$scope', { useValue: scope })
		32	+ ];
		33	+
		34	+ beforeEach( angular.mock.module("templates") );
		35	+
		36	+ beforeEach( (done: Function) => {
		37	+ let cls = createClass({
		38	+ template: htmlTemplate,
		39	+ directives: [LoginBlockComponent],
		40	+ providers: providers,
		41	+ properties: {}
		42	+ });
		43	+ helper = new ComponentTestHelper<LoginBlockComponent>(cls, done);
		44	+ });
		45	+
		46	+ it("expect person to be null with no logged in user", () => {
		47	+ expect(helper.component.currentUser).toBeNull;
		48	+ });
		49	+
		50	+ it("expect person to be defined when user login", () => {
		51	+ // Executes the login method on the component
		52	+ doComponentLogin();
		53	+ expect(helper.component.currentUser.person).toBe(person);
		54	+ });
		55	+
		56	+ it("expect person to be null when user logout", () => {
		57	+ // First do a login
		58	+ doComponentLogin();
		59	+ // The logout the user
		60	+ doComponentLogout();
		61	+ // Check if the current user was cleared
		62	+ expect(helper.component.currentUser).toBeNull;
		63	+ });
		64	+
		65	+ /**
		66	+ * Execute the logout method on the target component
		67	+ */
		68	+ function doComponentLogout() {
		69	+ // Create a mock for the AuthService logout method
		70	+ spyOn(authService, "logout");
		71	+ helper.component.logout();
		72	+ expect(authService.logout).toHaveBeenCalled();
		73	+ // After the component logout method execution, fire the
		74	+ // AuthService event
		75	+ simulateLogoutEvent();
		76	+ }
		77	+
		78	+ /**
		79	+ * Execute the login method on the target component
		80	+ */
		81	+ function doComponentLogin() {
		82	+ // Create a mock for the AuthService login method
		83	+ spyOn(authService, "login");
		84	+ helper.component.login();
		85	+ expect(authService.login).toHaveBeenCalled();
		86	+ // After the component login method execution, fire the
		87	+ // AuthService event
		88	+ simulateLoginEvent();
		89	+ }
		90	+
		91	+ /**
		92	+ * Simulate the AuthService loginSuccess event
		93	+ */
		94	+ function simulateLoginEvent() {
		95	+ let successEvent: string = AuthEvents[AuthEvents.loginSuccess];
		96	+
		97	+ (<any>helper.component.authService)[successEvent].next(user);
		98	+ }
		99	+
		100	+ /**
		101	+ * Simulate the AuthService logoutSuccess event
		102	+ */
		103	+ function simulateLogoutEvent() {
		104	+ let successEvent: string = AuthEvents[AuthEvents.logoutSuccess];
		105	+
		106	+ (<any>helper.component.authService)[successEvent].next(user);
		107	+ }
		108	+ });
		109	+
		110	+});
0	\ No newline at end of file	111	\ No newline at end of file
@@ -0,0 +1,73 @@		@@ -0,0 +1,73 @@
	1	+import {Input, Inject, Component} from "ng-forward";
	2	+import {SessionService, AuthService, AuthEvents} from "./../../../login";
	3	+
	4	+/**
	5	+ * @ngdoc controller
	6	+ * @name layout.blocks.LoginBlockComponent
	7	+ * @description
	8	+ * The Noosfero block responible for presenting a login form and user status
	9	+ */
	10	+@Component({
	11	+ selector: "noosfero-login-block",
	12	+ templateUrl: 'app/layout/blocks/login-block/login-block.html',
	13	+})
	14	+@Inject("SessionService", "$state", 'AuthService', "$scope")
	15	+export class LoginBlockComponent {
	16	+
	17	+ /**
	18	+ * @ngdoc property
	19	+ * @name currentUser
	20	+ * @propertyOf layout.blocks.LoginBlockComponent
	21	+ * @description
	22	+ * The current loged in user
	23	+ */
	24	+ currentUser: noosfero.User;
	25	+
	26	+ /**
	27	+ * @ngdoc property
	28	+ * @name credentials
	29	+ * @propertyOf layout.blocks.LoginBlockComponent
	30	+ * @description
	31	+ * The credentials of the currentUser
	32	+ */
	33	+ credentials: noosfero.Credentials;
	34	+
	35	+ constructor(
	36	+ private session: SessionService,
	37	+ private $state: ng.ui.IStateService,
	38	+ public authService: AuthService,
	39	+ private $scope: ng.IScope) {
	40	+ this.currentUser = this.session.currentUser();
	41	+
	42	+ this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
	43	+ this.currentUser = this.session.currentUser();
	44	+ });
	45	+
	46	+ this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
	47	+ this.currentUser = this.session.currentUser();
	48	+ });
	49	+
	50	+ }
	51	+
	52	+ /**
	53	+ * @ngdoc method
	54	+ * @name login
	55	+ * @methodOf layout.blocks.LoginBlockComponent
	56	+ * @description
	57	+ * Logs in the user using its credentials
	58	+ */
	59	+ login() {
	60	+ this.authService.login(this.credentials);
	61	+ }
	62	+
	63	+ /**
	64	+ * @ngdoc method
	65	+ * @name logout
	66	+ * @methodOf layout.blocks.LoginBlockComponent
	67	+ * @description
	68	+ * Logout the user
	69	+ */
	70	+ logout() {
	71	+ this.authService.logout();
	72	+ };
	73	+}
	@@ -0,0 +1,27 @@		@@ -0,0 +1,27 @@
		1	+<div class="logged-user-info" ng-show="ctrl.currentUser">
		2	+ <h4>Logged in as {{ctrl.currentUser.person.identifier}}</h4>
		3	+ <ul>
		4	+ <li>User since
		5	+ <span class="time">
		6	+ <span am-time-ago="ctrl.currentUser.person.created_at \| dateFormat"></span>
		7	+ </span>
		8	+ </li>
		9	+ <li><a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})">Profile Homepage</a></li>
		10	+ </ul>
		11	+ <div class="user-actions">
		12	+ <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" \| translate}}</a>
		13	+ </div>
		14	+</div>
		15	+<div class="logged-user-info" ng-show="!ctrl.currentUser">
		16	+ <form>
		17	+ <div class="form-group">
		18	+ <label for="exampleInputEmail1">{{"auth.form.login" \| translate}}</label>
		19	+ <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="ctrl.credentials.username">
		20	+ </div>
		21	+ <div class="form-group">
		22	+ <label for="exampleInputPassword1">{{"auth.form.password" \| translate}}</label>
		23	+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="ctrl.credentials.password">
		24	+ </div>
		25	+ <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" \| translate}}</button>
		26	+ </form>
		27	+</div>
0	\ No newline at end of file	28	\ No newline at end of file
	@@ -22,6 +22,14 @@ namespace noosfero {		@@ -22,6 +22,14 @@ namespace noosfero {
22	* @returns {string} The unque identifier for the Profile	22	* @returns {string} The unque identifier for the Profile
23	*/	23	*/
24	identifier: string;	24	identifier: string;
		25	+
		26	+ /**
		27	+ * @ngdoc property
		28	+ * @name created_at
		29	+ * @propertyOf noofero.Profile
		30	+ * @returns {string} The timestamp this object was created
		31	+ */
		32	+ created_at: string;
25		33
26	/**	34	/**
27	* @ngdoc property	35	* @ngdoc property