Michel Felipe · Michel Felipe · Michel Felipe · Leandro Santos · Victor Costa · Victor Costa
Showing 74 changed files Show diff stats
bower.json
gulp/watch.js
src/app/environment/environment.component.ts
src/app/index.config.ts
src/app/known-events.ts
src/app/layout/blocks/profile-image/profile-image-block.component.spec.ts
src/app/layout/blocks/profile-image/profile-image-block.component.ts
src/app/layout/blocks/profile-image/profile-image-block.html
src/app/layout/blocks/profile-image/profile-image-block.scss
src/app/layout/navbar/navbar.html
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/login/new-password.component.spec.ts
src/app/login/new-password.component.ts
src/app/login/new-password.html
src/app/main/main.component.spec.ts
@@ -40,12 +40,19 @@
     "ng-ckeditor": "^0.2.1",
     "angular-tag-cloud": "^0.3.0",
     "angular-ui-switch": "^0.1.1",
-    "angular-password": "^1.0.1"
+    "angular-password": "^1.0.1",
+    "ng-file-upload": "^12.0.4",
+    "ng-img-crop": "^0.3.2"
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0"
   },
   "overrides": {
+    "ng-file-upload": {
+      "main": [
+        "ng-file-upload-all.js"
+      ]
+    },
     "ng-ckeditor": {
       "main": [
         "ng-ckeditor.js",
@@ -46,6 +46,7 @@ gulp.task(&#39;watch&#39;, [&#39;inject&#39;], function () {
     watchPaths.push(path.join(src, '/app/**/*.html'));
     watchPaths.push(path.join(src, conf.paths.plugins, '/**/*.html'));
   });
+  watchPaths.push(stylePaths);
   gulp.watch(watchPaths, function(event) {
     browserSync.reload(event.path);
   });
@@ -32,7 +32,7 @@ import {SearchComponent} from &quot;../search/search.component&quot;;
         }
     },
     {
-        url: '^/search?query',
+        url: '^/search?query&per_page',
         component: SearchComponent,
         name: 'main.environment.search',
         views: {
@@ -25,13 +25,16 @@ export function noosferoModuleConfig($logProvider: ng.ILogProvider,
 }
 function configTranslation($translateProvider: angular.translate.ITranslateProvider, tmhDynamicLocaleProvider: any) {
+    let defaultLanguage = (<any>navigator)['languages'] ? (<any>navigator)['languages'][0] : (navigator.language || (<any>navigator)['userLanguage']);
+    defaultLanguage = defaultLanguage ? defaultLanguage.replace(/-br|-us/i, '') : 'en';
+
     $translateProvider.useStaticFilesLoader({
         prefix: '/languages/',
         suffix: '.json'
     });
     $translateProvider.addInterpolation('$translateMessageFormatInterpolation');
     $translateProvider.useMissingTranslationHandlerLog();
-    $translateProvider.preferredLanguage('en');
+    $translateProvider.preferredLanguage(defaultLanguage);
     $translateProvider.useSanitizeValueStrategy('escape');
     tmhDynamicLocaleProvider.localeLocationPattern('bower_components/angular-i18n/angular-locale_{{locale}}.js');
     tmhDynamicLocaleProvider.useCookieStorage();
 import { EventsHubKnownEventNames } from './shared/services/events-hub.service';
-export class NoosferoKnownEvents implements EventsHubKnownEventNames  {
+export class NoosferoKnownEvents implements EventsHubKnownEventNames {
     IMAGE_PROFILE_UPDATED: string = 'IMAGE_PROFILE_UPDATED';
     PROFILE_INFO_UPDATED: string = 'PROFILE_INFO_UPDATED';
     ARTICLE_UPDATED: string = 'ARTICLE_UPDATED';
+    TASK_CLOSED: string = 'TASK_CLOSED';
     constructor() {
     }
@@ -11,4 +12,4 @@ export class NoosferoKnownEvents implements EventsHubKnownEventNames  {
     getNames() {
         return Object.getOwnPropertyNames(this);
     }
-}
 \ No newline at end of file
+}
-import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
+import { TestComponentBuilder, ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder';
+import { Pipe, Input, provide, Component } from 'ng-forward';
-import {ProfileImageBlockComponent} from './profile-image-block.component';
+import { ProfileImageBlockComponent } from './profile-image-block.component';
 import * as helpers from "./../../../../spec/helpers";
@@ -14,6 +14,7 @@ describe(&quot;Components&quot;, () =&gt; {
     describe("Profile Image Block Component", () => {
         beforeEach(angular.mock.module("templates"));
+        let personService = jasmine.createSpyObj("personService", ["upload"]);
         let profileService = jasmine.createSpyObj("ProfileService", ["isMember", "addMember", "removeMember"]);
         profileService.isMember = jasmine.createSpy("isMember").and.returnValue(Promise.resolve(false));
@@ -24,6 +25,8 @@ describe(&quot;Components&quot;, () =&gt; {
             directives: [ProfileImageBlockComponent],
             providers: [
                 helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
+                helpers.createProviderToValue("PersonService", personService),
+                helpers.createProviderToValue("$uibModal", helpers.mocks.$modal),
                 helpers.createProviderToValue('ProfileService', profileService),
                 helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
             ].concat(helpers.provideFilters("translateFilter"))
@@ -31,8 +34,7 @@ describe(&quot;Components&quot;, () =&gt; {
         class BlockContainerComponent {
             block = { type: 'Block' };
             owner = { name: 'profile-name' };
-            constructor() {
-            }
+            constructor() { }
         }
         it("show image if present", () => {
@@ -52,7 +54,19 @@ describe(&quot;Components&quot;, () =&gt; {
         it("display button to join community", (done: Function) => {
             helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
                 let elProfile = fixture.debugElement.componentViewChildren[0];
-                expect(elProfile.query('.actions .join').length).toEqual(1);
+                expect(elProfile.componentInstance.displayOrganizationActions()).toBeTruthy();
+                expect(elProfile.query('.actions .organization-actions .join').length).toEqual(1);
+                done();
+            });
+        });
+
+        it("not display button to join community for person", (done: Function) => {
+            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let elProfile = fixture.debugElement.componentViewChildren[0];
+                elProfile.componentInstance.owner = { name: 'person-name', type: 'Person' };
+                fixture.detectChanges();
+                expect(elProfile.componentInstance.displayOrganizationActions()).toBeFalsy();
+                expect(elProfile.queryAll('.actions .organization-actions .join').length).toEqual(0);
                 done();
             });
         });
-import {Inject, Input, Component} from "ng-forward";
-import {ProfileImageComponent} from "./../../../profile/image/image.component";
-import {ProfileService} from "../../../../lib/ng-noosfero-api/http/profile.service";
-import {SessionService} from "./../../../login";
-import {NotificationService} from "../../../shared/services/notification.service";
+import { Inject, Input, Component } from "ng-forward";
+import { ProfileImageComponent } from "./../../../profile/image/image.component";
+import { ProfileService } from "../../../../lib/ng-noosfero-api/http/profile.service";
+import { SessionService } from "./../../../login";
+import { NotificationService } from "../../../shared/services/notification.service";
 @Component({
     selector: "noosfero-profile-image-block",
@@ -48,4 +48,8 @@ export class ProfileImageBlockComponent {
             this.loadMembership();
         });
     }
+
+    displayOrganizationActions() {
+        return this.owner.type !== 'Person';
+    }
 }
 <div class="center-block text-center profile-image-block">
   <a ui-sref="main.profile.info({profile: ctrl.owner.identifier})">
-    <noosfero-profile-image [profile]="ctrl.owner"></noosfero-profile-image>
+    <noosfero-profile-image [profile]="ctrl.owner" [editable]="true" [edit-class]="'profile-image-block-editable'"></noosfero-profile-image>
   </a>
   <a class="settings-link" target="_self" ui-sref="main.profile.settings({profile: ctrl.owner.identifier})">{{"blocks.profile_image.control_panel" | translate}}</a>
   <div class="actions" ng-show="ctrl.isMember!=null">
-    <a ng-if="!ctrl.isMember" ng-click="ctrl.join()" class="btn btn-primary btn-sm join" href="#">{{"blocks.profile_image.join" | translate}}</a>
-    <a ng-if="ctrl.isMember" ng-click="ctrl.leave()" class="btn btn-warning btn-sm leave" href="#">{{"blocks.profile_image.leave" | translate}}</a>
+    <div class="organization-actions" ng-if="ctrl.displayOrganizationActions()">
+      <a ng-if="!ctrl.isMember" ng-click="ctrl.join()" class="btn btn-primary btn-sm join" href="#">{{"blocks.profile_image.join" | translate}}</a>
+      <a ng-if="ctrl.isMember" ng-click="ctrl.leave()" class="btn btn-warning btn-sm leave" href="#">{{"blocks.profile_image.leave" | translate}}</a>
+    </div>
   </div>
 </div>
@@ -2,4 +2,22 @@
   .settings-link {
     display: block;
   }
+  .upload-camera-container {
+	top: 77%;
+	left: 6%;
+  }
+}
+
+.profile-image-block-editable {
+	top: 68%;
+    width: 284px;
+    font-weight: 700;
+    height: 43px;
+    padding-left: 30px;
+    padding-top: 13px;
 }
+
+
+
+
+
@@ -45,10 +45,12 @@
           </ul>
         </li>
       </ul>
-
       <ul class="nav navbar-nav navbar-right">
         <language-selector class="nav navbar-nav navbar-right"></language-selector>
       </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <tasks-menu class="nav navbar-nav navbar-right"></tasks-menu>
+      </ul>
       <div ui-view="actions"></div>
       <div class="nav navbar-nav search navbar-right">
         <search-form></search-form>
 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;
+      }
+    }
   }
 }
@@ -0,0 +1,87 @@
+import { ComponentTestHelper, createClass } from "../../spec/component-test-helper";
+import * as helpers from "../../spec/helpers";
+import { PasswordComponent } from "./new-password.component";
+
+
+describe("Password Component", () => {
+   const htmlTemplate: string = '<new-password></new-password>';
+
+   let helper: ComponentTestHelper<PasswordComponent>;
+   let passwordService = helpers.mocks.passwordService;
+   let stateService = jasmine.createSpyObj("$state", ["transitionTo"]);
+   let stateParams = jasmine.createSpyObj("$stateParams", ["code"]);
+   let notificationService = helpers.mocks.notificationService;
+   notificationService.success = jasmine.createSpy('success');
+   notificationService.error = jasmine.createSpy('error');
+
+
+   let data: any;
+
+   beforeEach(() => {
+        angular.mock.module('templates');
+        angular.mock.module('ngSanitize');
+        angular.mock.module('ngMessages');
+        angular.mock.module('ngPassword');
+    });
+
+    beforeEach((done) => {
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [PasswordComponent],
+            providers: [
+                helpers.createProviderToValue('$state', stateService),
+                helpers.createProviderToValue('$stateParams', stateParams),
+                helpers.createProviderToValue('PasswordService', passwordService),
+                helpers.createProviderToValue('NotificationService', notificationService),
+            ]
+        });
+        helper = new ComponentTestHelper<PasswordComponent>(cls, done);
+    });
+
+    it('new password page was rendered', () => {
+        expect(helper.debugElement.query('div.new-password-page').length).toEqual(1);
+    });
+
+    it("changes the user password", done => {
+        data = {
+           code: '1234567890',
+           password: 'test',
+           passwordConfirmation: 'test'
+        };
+
+        helper.component.code = data.code;
+        helper.component.password = data.password;
+        helper.component.passwordConfirmation = data.passwordConfirmation;
+
+        passwordService.new_password = jasmine.createSpy("new_password").and.returnValue(Promise.resolve());
+
+        helper.component.sendNewPassword();
+        expect(passwordService.new_password).toHaveBeenCalledWith('1234567890', 'test', 'test');
+
+        expect(notificationService.success).toHaveBeenCalled();
+
+        done();
+    });
+
+    it("fails when try to change the user password", done => {
+        data = {
+           code: '1234567890',
+           password: 'test',
+           passwordConfirmation: 'test-invalid'
+        };
+
+        helper.component.code = data.code;
+        helper.component.password = data.password;
+        helper.component.passwordConfirmation = data.passwordConfirmation;
+
+        passwordService.new_password = jasmine.createSpy("new_password").and.returnValue(Promise.reject({data: {message: 'Error'}}));
+
+        helper.component.sendNewPassword();
+        expect(passwordService.new_password).toHaveBeenCalledWith('1234567890', 'test', 'test-invalid');
+
+        expect(notificationService.error).toHaveBeenCalled();
+
+        done();
+    });
+
+});
@@ -0,0 +1,36 @@
+import { StateConfig, Component, Inject, provide } from 'ng-forward';
+
+import { PasswordService } from "../../lib/ng-noosfero-api/http/password.service";
+import { NotificationService } from "./../shared/services/notification.service";
+import { AuthController } from "./auth.controller";
+
+@Component({
+    selector: 'new-password',
+    templateUrl: 'app/login/new-password.html',
+    providers: [provide('passwordService', { useClass: PasswordService })]
+})
+@Inject(PasswordService, "$state", "$stateParams", NotificationService)
+export class PasswordComponent {
+
+    code: string;
+    password: string;
+    passwordConfirmation: string;
+
+    constructor(
+        public passwordService: PasswordService,
+        private $state: ng.ui.IStateService,
+        private $stateParams: ng.ui.IStateParamsService,
+        private notificationService: NotificationService) {
+
+        this.code = this.$stateParams['code'];
+    }
+
+    sendNewPassword() {
+        this.passwordService.new_password(this.code, this.password, this.passwordConfirmation).then((response) => {
+            this.notificationService.success({ title: "newPasswd.success.title", message: "newPasswd.success.message", timer: 5000 });
+            this.$state.transitionTo('main.environment');
+        }).catch((response) => {
+            this.notificationService.error({ title: "newPasswd.failed.title", message: "newPasswd.failed.message" });
+        });
+    }
+}
@@ -0,0 +1,31 @@
+<div class="new-password-page col-xs-4 col-xs-offset-4">
+  <h1>{{"new_password.welcomeMessageTitle" | translate }}</h1>
+
+  <form name="newPasswdForm">
+    <div class="form-group" ng-class="{'has-error': newPasswdForm.password.$invalid && newPasswdForm.password.$touched }">
+      <div class="input-group">
+        <span class="input-group-addon"><i class="fa fa-lock"></i></span>
+        <input type="password" class="form-control" id="password" name="password" placeholder="{{'account.register.passwordLabel' | translate }}" ng-model="vm.password" required minlength="4">
+      </div>
+      <div class="help-block" ng-show="newPasswdForm.password.$touched" ng-messages="newPasswdForm.password.$error">
+        <ul class="list-unstyled">
+          <li ng-messages-include="app/shared/messages/form-errors.html"></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="form-group" ng-class="{'has-error': newPasswdForm.passwordConfirm.$invalid && newPasswdForm.passwordConfirm.$touched }">
+      <div class="input-group">
+        <span class="input-group-addon"><i class="fa fa-unlock-alt"></i></span>
+        <input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" match-password="password" placeholder="{{'account.register.passwordConfirmationLabel' | translate}}" ng-model="vm.passwordConfirmation" required>
+      </div>
+      <div class="help-block" ng-show="newPasswdForm.passwordConfirm.$touched" ng-messages="newPasswdForm.passwordConfirm.$error">
+        <ul class="list-unstyled">
+          <li ng-messages-include="app/shared/messages/form-errors.html"></li>
+          <li ng-message="passwordMatch" translate="messages.invalid.passwordMatch"></li>
+        </ul>
+      </div>
+    </div>
+    <button type="submit" class="btn btn-default btn-block" ng-click="vm.sendNewPassword()" ng-disabled="newPasswdForm.$invalid">{{"newPasswdForm.submit" | translate}}</button>
+  </form>
+</div>
@@ -40,7 +40,8 @@ describe(&quot;MainComponent&quot;, function () {
                     useValue: [
                         'IMAGE_PROFILE_UPDATED',
                         'PROFILE_INFO_UPDATED',
-                        'ARTICLE_UPDATED'
+                        'ARTICLE_UPDATED',
+                        'TASK_CLOSED'
                     ]
                 }),
         ]
@@ -4,6 +4,7 @@ import { ArticleBlogComponent } from &quot;./../article/types/blog/blog.component&quot;;
 import { ArticleViewComponent } from "./../article/article-default-view.component";
+import { PasswordComponent } from "../login/new-password.component";
 import { ProfileComponent } from "../profile/profile.component";
 import { BoxesComponent } from "../layout/boxes/boxes.component";
 import { BlockContentComponent } from "../layout/blocks/block-content.component";
@@ -49,9 +50,11 @@ import { HtmlEditorComponent } from &quot;../shared/components/html-editor/html-edito
 import { PermissionDirective } from "../shared/components/permission/permission.directive";
 import { SearchComponent } from "../search/search.component";
 import { SearchFormComponent } from "../search/search-form/search-form.component";
-
 import { EVENTS_HUB_KNOW_EVENT_NAMES, EventsHubService } from "../shared/services/events-hub.service";
 import { NoosferoKnownEvents } from "../known-events";
+import { TasksMenuComponent } from "../task/tasks-menu/tasks-menu.component";
+import { TaskListComponent } from "../task/task-list/task-list.component";
+
 /**
  * @ngdoc controller
  * @name main.MainContentComponent
@@ -118,16 +121,17 @@ export class EnvironmentContent {
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
         LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent,
         PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent,
-        ProfileImagesPluginProfileImagesBlockComponent, BlockComponent, RegisterComponent
+        ProfileImagesPluginProfileImagesBlockComponent, BlockComponent, RegisterComponent, TasksMenuComponent, TaskListComponent,
+        PasswordComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
-    providers: [AuthService, SessionService, NotificationService, BodyStateClassesService, RegisterService,
+    providers: [AuthService, SessionService, NotificationService, BodyStateClassesService,
         "ngAnimate", "ngCookies", "ngStorage", "ngTouch",
         "ngSanitize", "ngMessages", "ngAria", "restangular",
         "ui.router", "ui.bootstrap", "toastr", "ngCkeditor",
         "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
         "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
         "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
-        "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch", "ngPassword"]
+        "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch", "ngFileUpload", "ngImgCrop"]
 })
 @StateConfig([
     {
@@ -148,6 +152,7 @@ export class EnvironmentContent {
         url: '/',
         component: EnvironmentComponent,
         name: 'main.environment',
+        abstract: true,
         views: {
             "content": {
                 templateUrl: "app/environment/environment.html",
@@ -169,6 +174,18 @@ export class EnvironmentContent {
         }
     },
     {
+        url: "/account/new_password/:code",
+        component: PasswordComponent,
+        name: 'main.newPasswd',
+        views: {
+            "content": {
+                templateUrl: "app/login/new-password.html",
+                controller: PasswordComponent,
+                controllerAs: "vm"
+            }
+        }
+    },
+    {
         url: "^/:profile",
         abstract: true,
         component: ProfileComponent,
@@ -4,48 +4,72 @@
  * @description
  *  This file contains the tests for the {@link components.noosfero.profile-image.ProfileImage} component.
  */
-
-import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
+import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
+import { TestComponentBuilder, ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder';
+import { Pipe, Input, provide, Component } from 'ng-forward';
+import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service";
 import * as helpers from "../../../spec/helpers";
-import {ProfileImageComponent} from "./image.component";
+import { ProfileImageComponent } from "./image.component";
-const tcb = new TestComponentBuilder();
+const htmlTemplate: string = '<noosfero-profile-image [editable]="true" [edit-class]="editable-class" [profile]="ctrl.profile"></noosfero-profile-image>';
 describe("Components", () => {
     describe("Profile Image Component", () => {
+        let helper: ComponentTestHelper<ProfileImageComponent>;
+
         beforeEach(angular.mock.module("templates"));
-        it("show community users image if profile is not Person", done => {
-            helpers.tcb.createAsync(ProfileImageComponent).then(fixture => {
-                let profileImageComponent: ProfileImageComponent = fixture.componentInstance;
-                let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Community" };
-                profileImageComponent.profile = profile;
-                profileImageComponent.ngOnInit();
-
-                // Check the attribute
-                expect(profileImageComponent.defaultIcon).toBe("fa-users", "The default icon should be community users");
-                // var elProfile = fixture.debugElement.componentViewChildren[0];
-                // expect(elProfile.query('div.profile-image-block').length).toEqual(1);
-                done();
+        beforeEach((done) => {
+            let scope = helpers.mocks.scopeWithEvents;
+            let personService = jasmine.createSpyObj("personService", ["upload"]);
+            let properties = { profile: { custom_footer: "footer" } };
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [ProfileImageComponent],
+                properties: properties,
+                providers: [
+                    helpers.createProviderToValue("PersonService", personService),
+                    helpers.createProviderToValue("$uibModal", helpers.mocks.$modal),
+                    helpers.createProviderToValue("$scope", scope)
+                ]
             });
+            helper = new ComponentTestHelper<ProfileImageComponent>(cls, done);
         });
-        it("show Person image if profile is Person", done => {
-            tcb.createAsync(ProfileImageComponent).then(fixture => {
-                let profileImageComponent: ProfileImageComponent = fixture.componentInstance;
-                let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Person" };
-                profileImageComponent.profile = profile;
-                profileImageComponent.ngOnInit();
-                // Check the attribute
-                expect(profileImageComponent.defaultIcon).toEqual("fa-user", "The default icon should be person user");
-                done();
-            });
+        it("set modal instance when select files modal", () => {
+            helper.component['$uibModal'].open = jasmine.createSpy("open");
+            helper.component.fileSelected("file", []);
+            expect(helper.component['$uibModal'].open).toHaveBeenCalled();
+        });
+
+
+        it("show community users image if profile is not Person", (done) => {
+
+            let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Community" };
+            helper.component.profile = profile;
+            helper.component.ngOnInit();
+
+            // Check the attribute
+            expect(helper.component.defaultIcon).toBe("fa-users", "The default icon should be community users");
+            // var elProfile = fixture.debugElement.componentViewChildren[0];
+            // expect(elProfile.query('div.profile-image-block').length).toEqual(1);
+            done();
+
+        });
+
+        it("show Person image if profile is Person", (done) => {
+
+            let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Person" };
+            helper.component.profile = profile;
+            helper.component.ngOnInit();
+            // Check the attribute
+            expect(helper.component.defaultIcon).toEqual("fa-user", "The default icon should be person user");
+            done();
         });
     });
-});
 \ No newline at end of file
+});
-import {Inject, Input, Component} from "ng-forward";
-
+import { Inject, Input, Component, provide } from "ng-forward";
+import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service";
+import { ProfileImageEditorComponent } from "./profile-image-editor.component";
 /**
  * @ngdoc controller
@@ -10,14 +11,16 @@ import {Inject, Input, Component} from &quot;ng-forward&quot;;
 @Component({
     selector: "noosfero-profile-image",
     templateUrl: 'app/profile/image/image.html',
+    providers: [provide('personService', { useClass: PersonService })]
 })
+@Inject(PersonService, "$uibModal", "$scope")
 export class ProfileImageComponent {
     /**
      * @ngdoc property
      * @name profile
      * @propertyOf components.noosfero.profile-image.ProfileImage
-     * @description 
+     * @description
      *  The Noosfero {@link models.Profile} holding the image.
      */
     @Input() profile: noosfero.Profile;
@@ -30,12 +33,53 @@ export class ProfileImageComponent {
      */
     defaultIcon: string;
+    @Input() editable: boolean;
+
+    @Input() editClass: string;
+
+    picFile: any;
+    croppedDataUrl: any;
+    modalInstance: any;
+
+    constructor(private personService: PersonService, private $uibModal: ng.ui.bootstrap.IModalService, private $scope: ng.IScope) {
+    }
+
+    fileSelected(file: any, errFiles: any) {
+        if (file) {
+            this.picFile = file;
+            this.modalInstance = this.$uibModal.open({
+                templateUrl: 'app/profile/image/profile-image-editor.html',
+                controller: ProfileImageEditorComponent,
+                controllerAs: 'ctrl',
+                scope: this.$scope,
+                bindToController: true,
+                backdrop: 'static',
+                resolve: {
+                    picFile: this.picFile,
+                    profile: this.profile,
+                    personService: this.personService
+                }
+            });
+        }
+    }
+
+    private _showCamera: boolean = false;
+
+    showChange(show: boolean) {
+        this._showCamera = show;
+    }
+
+    showCamera() {
+        return this._showCamera;
+    }
+
+
     /**
      * @ngdoc method
      * @name ngOnInit
      * @methodOf components.noosfero.profile-image.ProfileImage
-     * @description 
-     *  Initializes the icon names to their corresponding values depending on the profile type passed to the controller 
+     * @description
+     *  Initializes the icon names to their corresponding values depending on the profile type passed to the controller
      */
     ngOnInit() {
         this.defaultIcon = 'fa-users';
@@ -43,5 +87,5 @@ export class ProfileImageComponent {
             this.defaultIcon = 'fa-user';
         }
     }
-}
+}
-<span class="profile-image-wrap" title="{{ctrl.profile.name}}">
-  <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
-  <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
-</span>
+<div id="profile-image-container" style="">
+    <div class="profile-image-wrap" title="{{ctrl.profile.name}}" ng-mouseenter="ctrl.showChange(true)" ng-mouseleave="ctrl.showChange(false)">
+        <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
+        <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
+        <div ng-if="ctrl.editable" class="upload-camera-container">
+            <i id="camera" class="fa fa-camera upload-camera" aria-hidden="true"></i>
+        </div>
+        <div ng-if="ctrl.editable" id="select-photo-container" name="select-photo-container" class="select-photo-container container" ng-class="ctrl.editClass">
+            <a id="upload-container" class="upload-container" href="#" rel="dialog" role="button">
+                <!-- The upload button hidden behind the camera -->
+                <div class="upload-button" ngf-select="ctrl.fileSelected($file)"
+                    ngf-pattern="'image/*'" ngf-accept="'image/*'"
+                    ngf-max-size="20MB"	ngf-resize="{width: 100, height: 100}"
+                    data-toggle="modal" data-target=".crop-dialog">
+                    {{"profile.image.upload" | translate}}
+                </div>
+            </a>
+        </div>
+
+    </div>
+</div>
@@ -5,3 +5,91 @@ i.profile-image {
   background-clip: padding-box;
   margin-bottom: 15px;
 }
+
+.profile-image-wrap {
+    display: inline;
+}
+
+#profile-image-container {
+    display: inline;
+}
+
+#profile-image-container:hover {
+    .select-photo-container {
+        z-index: 1;
+    }
+    .upload-camera-container {
+        transform: scale(.75);
+    }
+}
+
+.upload-camera-container {
+    text-align: left;
+    position: absolute;
+    z-index: 5;
+}
+
+.upload-camera {
+    color: white;
+    position: absolute;
+    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
+    opacity: 1;
+}
+
+.select-photo-container {
+    position: absolute;
+    z-index: -1;
+    background: #000;
+    background: rgba(0, 0, 0, .6);
+    background: linear-gradient(transparent, rgba(0, 0, 0, .6) 70%, rgba(0, 0, 0, .6) 100%);
+    transition: top .13s ease-out;
+}
+
+#upload-container {
+    position: relative;
+    text-decoration: none;
+}
+
+.upload-container a:hover {
+    text-decoration: none;
+}
+
+.upload-button {
+    -webkit-font-smoothing: antialiased;
+    color: #fff;
+}
+
+.upload-container {
+    color:#fff;
+    display: block;
+    overflow: hidden;
+    position: relative;
+    text-align: left;
+    min-width: 89px;
+}
+
+.cropArea {
+    background: #E4E4E4;
+    overflow: hidden;
+    width:300px;
+    height:150px;
+}
+
+.crop-area {
+    display: none;
+}
+
+form .progress {
+    line-height: 15px;
+}
+
+.progress {
+    display: inline-block;
+    width: 100px;
+    border: 3px groove #CCC;
+}
+.progress div {
+    font-size: smaller;
+    background: orange;
+    width: 0;
+}
@@ -0,0 +1,61 @@
+import { Pipe, Input, provide, Component } from 'ng-forward';
+import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
+import * as helpers from "../../../spec/helpers";
+
+import { ProfileImageEditorComponent } from "./profile-image-editor.component";
+
+describe("Components", () => {
+
+    describe("Profile Image Editor Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        let expectedData = "iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQ…Cm2OLHvfdNPte3zrH709Q0esN1LPQ0t7DL696ERpu+9/8BVPLIpElf7VYAAAAASUVORK5CYII=";
+        let testDataUrl = "data:image/png;base64," + expectedData;
+
+        let profile = <noosfero.Profile>{ name: "profile_name", id: 1, identifier: "test" };
+        let modal = helpers.mocks.$modal;
+        let modalInstance = jasmine.createSpyObj("$uibModalInstance", ["close"]);
+        let picFile = { type: "png" };
+        let $q: ng.IQService;
+        let personServiceMock: any;
+        let $rootScope: ng.IRootScopeService;
+
+        beforeEach(inject((_$q_: ng.IQService, _$rootScope_: ng.IRootScopeService) => {
+            $q = _$q_;
+            $rootScope = _$rootScope_;
+        }));
+
+        let comp = new ProfileImageEditorComponent(picFile, this.profile, personServiceMock, modalInstance);
+
+        it("get data", done => {
+
+            let result = comp.getData(testDataUrl);
+            expect(result).toBe(expectedData);
+            done();
+        });
+
+        it("get image name", done => {
+            let imageName = "image1";
+            let expectedName = "profile_name_" + imageName;
+            comp['profile'] = profile;
+            let result = comp.getImageName(imageName);
+            expect(result).toBe(expectedName);
+            done();
+        });
+
+        it("upload image", done => {
+            let imageName = "image1";
+            personServiceMock = jasmine.createSpyObj("personServiceMock", ["uploadImage"]);
+            let deferredUploadImage = $q.defer();
+            personServiceMock.uploadImage = jasmine.createSpy('uploadImage').and.returnValue(deferredUploadImage.promise);
+            comp.personService = personServiceMock;
+            comp.uploadImage(testDataUrl, imageName);
+            deferredUploadImage.resolve();
+            $rootScope.$apply();
+            expect(comp.modalInstance.close).toHaveBeenCalled();
+            done();
+        });
+
+    });
+});
@@ -0,0 +1,43 @@
+import { StateConfig, Component, Input, Output, Inject, provide } from 'ng-forward';
+import { TranslateProfile } from "../../shared/pipes/translate-profile.filter";
+import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service";
+
+export class ProfileImageEditorComponent {
+
+    activities: any;
+    croppedDataUrl: string;
+    static $inject = ["picFile", "profile", "personService", "$uibModalInstance"];
+
+    constructor(public picFile: any, public profile: noosfero.Profile, public personService: PersonService,
+        public modalInstance: ng.ui.bootstrap.IModalServiceInstance) {
+    }
+
+    uploadImage(dataUrl: any, name: any) {
+        let base64ImageJson = this.getBase64ImageJson(dataUrl, name);
+        this.personService.uploadImage(this.profile, base64ImageJson).then((result: any) => {
+            this.modalInstance.close(name);
+        });
+    }
+
+    getBase64ImageJson(dataUrl: any, name: any): any {
+        let data = this.getData(dataUrl);
+        let image_name = this.getImageName(name);
+        return {
+            tempfile: data,
+            filename: image_name,
+            type: this.picFile.type
+        };
+    }
+
+    getImageName(name: any): string {
+        return this.profile.name + "_" + name;
+    }
+
+    getData(dataUrl: any): string {
+        return dataUrl.substring(dataUrl.indexOf('base64,') + 7);
+    }
+
+    cancel() {
+        this.modalInstance.close();
+    }
+}
@@ -0,0 +1,24 @@
+<div class="modal-header">
+  <h3>{{"profile.image.edit" | translate}}</h3>
+</div>
+<div class="modal-body">
+  <form class="">
+		<div ngf-drop ng-model="ctrl.picFile" ngf-pattern="image/*" class="cropArea">
+			<img-crop image="ctrl.picFile  | ngfDataUrl" area-type="square"
+				result-image="ctrl.croppedDataUrl" ng-init="ctrl.croppedDataUrl=''">
+			</img-crop>
+		</div>
+		<div>
+			<img ng-src="{{ctrl.croppedDataUrl}}" />
+		</div>
+		<span class="progress" ng-show="progress >= 0">
+			<div style="width: {{progress" ng-bind="progress + '%'"></div>
+		</span> <span ng-show="ctrl.result">Upload Successful</span> <span class="err"
+			ng-show="ctrl.errorMsg">{{errorMsg}}</span>
+  </form>
+
+  <div class="actions">
+    <button type="submit" class="btn btn-default" (click)="ctrl.uploadImage(ctrl.croppedDataUrl, ctrl.picFile.name)">Upload</button>
+    <button type="submit" class="btn btn-danger" (click)="ctrl.cancel()">Cancel</button>
+  </div>
+</div>
@@ -6,10 +6,12 @@
         <h2>{{vm.profile.name}}</h2>
       </header>
       <div id="profile-left" class="main-box-body clearfix">
-        <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block"></noosfero-profile-image>
-        <span class="label" ng-class="{'label-danger': vm.profile.type == 'Community', 'label-info': vm.profile.type == 'Person'}">{{vm.profile | translateProfile}}</span>
-        <div class="profile-since">
-          {{"profile.member_since" | translate}}: {{vm.profile.created_at | amDateFormat:'MMMM YYYY'}}
+        <noosfero-profile-image [profile]="vm.profile" [editable]="true" [edit-class]="'profile-info-editable'" class="img-responsive center-block profile-info"></noosfero-profile-image>
+        <div id="profile-info-extrainfo" class="profile-info-extrainfo">
+          <span class="label" ng-class="{'label-danger': vm.profile.type == 'Community', 'label-info': vm.profile.type == 'Person'}">{{vm.profile | translateProfile}}</span>
+          <div class="profile-since">
+            {{"profile.member_since" | translate}}: {{vm.profile.created_at | amDateFormat:'MMMM YYYY'}}
+          </div>
         </div>
       </div>
     </div>
@@ -0,0 +1,25 @@
+.profile-info {
+  .upload-camera-container {
+      top: 55%;
+      left: 39px;
+  }
+}
+
+.profile-info-editable {
+    top: 51%;
+    width: 103px;
+    height: 28px;
+}
+
+.profile-info-editable {
+  .upload-button {
+  	font-size: 0.8em;
+      padding-top: 9px;
+      padding-left: 6px;
+      font-weight: bold;
+  }
+}
+
+.profile-info-extrainfo {
+	margin-top: 10px;
+}
-import {StateConfig, Component, Inject, provide} from 'ng-forward';
-import {ProfileInfoComponent} from './info/profile-info.component';
-import {ProfileHomeComponent} from './profile-home.component';
-import {BasicEditorComponent} from '../article/cms/basic-editor/basic-editor.component';
-import {CmsComponent} from '../article/cms/cms.component';
-import {ContentViewerComponent} from "../article/content-viewer/content-viewer.component";
-import {ContentViewerActionsComponent} from "../article/content-viewer/content-viewer-actions.component";
-import {ActivitiesComponent} from "./activities/activities.component";
-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
-import {NotificationService} from "../shared/services/notification.service";
-import {MyProfileComponent} from "./myprofile.component";
-import {ProfileActionsComponent} from "./profile-actions.component";
-import {ConfigBarComponent} from "./config-bar.component";
+import { StateConfig, Component, Inject, provide } from 'ng-forward';
+import { ProfileInfoComponent } from './info/profile-info.component';
+import { ProfileHomeComponent } from './profile-home.component';
+import { BasicEditorComponent } from '../article/cms/basic-editor/basic-editor.component';
+import { CmsComponent } from '../article/cms/cms.component';
+import { ContentViewerComponent } from "../article/content-viewer/content-viewer.component";
+import { ContentViewerActionsComponent } from "../article/content-viewer/content-viewer-actions.component";
+import { ActivitiesComponent } from "./activities/activities.component";
+import { ProfileService } from "../../lib/ng-noosfero-api/http/profile.service";
+import { NotificationService } from "../shared/services/notification.service";
+import { MyProfileComponent } from "./myprofile.component";
+import { ProfileActionsComponent } from "./profile-actions.component";
+import { ConfigBarComponent } from "./config-bar.component";
+import { TasksComponent } from "../task/tasks/tasks.component";
+
 /**
  * @ngdoc controller
  * @name profile.Profile
@@ -92,6 +94,18 @@ import {ConfigBarComponent} from &quot;./config-bar.component&quot;;
         }
     },
     {
+        name: 'main.profile.tasks',
+        url: "^/myprofile/:profile/tasks",
+        component: TasksComponent,
+        views: {
+            "mainBlockContent": {
+                templateUrl: "app/task/tasks/tasks.html",
+                controller: TasksComponent,
+                controllerAs: "vm"
+            }
+        }
+    },
+    {
         name: 'main.profile.home',
         url: "",
         component: ProfileHomeComponent,
@@ -8,7 +8,7 @@ describe(&quot;Components&quot;, () =&gt; {
     describe("Search Component", () => {
         let helper: ComponentTestHelper<SearchComponent>;
-        let stateParams = { query: 'query' };
+        let stateParams = { query: 'query', per_page: 20 };
         let articleService = jasmine.createSpyObj("ArticleService", ["search"]);
         let result = Promise.resolve({ data: [{ id: 1 }], headers: (param: string) => { return 1; } });
         articleService.search = jasmine.createSpy("search").and.returnValue(result);
@@ -30,7 +30,7 @@ describe(&quot;Components&quot;, () =&gt; {
         });
         it("load first page with search results", () => {
-            expect(articleService.search).toHaveBeenCalledWith({ query: 'query', per_page: 10, page: 0 });
+            expect(articleService.search).toHaveBeenCalledWith({ query: 'query', per_page: 20, page: 0 });
         });
         it("display search results", () => {
@@ -19,6 +19,7 @@ export class SearchComponent {
     constructor(private articleService: ArticleService, private $stateParams: ng.ui.IStateParamsService, private $state: ng.ui.IStateService) {
         this.query = this.$stateParams['query'];
+        this.perPage = this.$stateParams['per_page'] || this.perPage;
         this.loadPage();
     }
+$green-color: #6e9e7b;
+
 .search-results {
   .summary {
     color: #bbbbbb;
@@ -13,10 +15,10 @@
     }
     .info {
       .profile {
-        color: #6e9e7b;
+        color: $green-color;
       }
       .time {
-        color: #6e9e7b;
+        color: $green-color;
         font-size: 12px;
       }
       .bullet-separator {
@@ -31,13 +31,13 @@ export class EventsHubService {
     emitEvent(eventType: string, payload?: any) {
         this.checkKnownEvent(eventType);
         let event = this.emitters.get(eventType);
-        if ( event ) this.emitters.get(eventType).next(payload);
+        if (event) this.emitters.get(eventType).next(payload);
     }
     subscribeToEvent<T>(eventType: string, generatorOrNext?: ((p?: T) => void), error?: any, complete?: any) {
         this.checkKnownEvent(eventType);
         let event = this.emitters.get(eventType);
-        if (event)  event.subscribe(generatorOrNext, error, complete);
+        if (event) event.subscribe(generatorOrNext, error, complete);
     }
     private setupEmitters() {
@@ -53,4 +53,4 @@ export class EventsHubService {
     }
-}
 \ No newline at end of file
+}
@@ -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({
@@ -0,0 +1,10 @@
+<div class="task-accept task-confirmation">
+  <div class="accept-title confirmation-title">{{"tasks.actions.accept.confirmation.title" | translate}}</div>
+  <div class="accept-fields confirmation-details">
+    <task-accept ng-if="ctrl.currentTask.accept_details" [task]="ctrl.currentTask" [confirmation-task]="ctrl.confirmationTask"></task-accept>
+  </div>
+  <div class="actions">
+    <button type="submit" class="btn btn-default" ng-click="ctrl.callAccept()">{{"tasks.actions.confirmation.yes" | translate}}</button>
+    <button type="button" class="btn btn-warning" ng-click="ctrl.cancel()">{{"tasks.actions.confirmation.cancel" | translate}}</button>
+  </div>
+</div>
@@ -0,0 +1,10 @@
+<div class="task-reject task-confirmation">
+  <div class="reject-title confirmation-title">{{"tasks.actions.reject.confirmation.title" | translate}}</div>
+  <div class="reject-fields confirmation-details">
+    <input ng-model="ctrl.confirmationTask.reject_explanation" id="rejectionExplanationInput" type="text" placeholder="{{'tasks.actions.reject.explanation.label' | translate}}" class="rejection-explanation form-control">
+  </div>
+  <div class="actions">
+    <button type="submit" class="btn btn-default" ng-click="ctrl.callReject()">{{"tasks.actions.confirmation.yes" | translate}}</button>
+    <button type="button" class="btn btn-warning" ng-click="ctrl.cancel()">{{"tasks.actions.confirmation.cancel" | translate}}</button>
+  </div>
+</div>
@@ -0,0 +1,33 @@
+import { Provider, provide, Component } from 'ng-forward';
+import * as helpers from "../../../spec/helpers";
+import { TaskAcceptComponent } from './task-accept.component';
+
+const htmlTemplate: string = '<task-accept [task]="ctrl.task"></task-accept>';
+
+describe("Components", () => {
+    describe("Task Accept Component", () => {
+
+        let task = { id: 1, type: "AddMember" };
+        let roleService = jasmine.createSpyObj("roleService", ["getByProfile"]);
+
+        beforeEach(angular.mock.module("templates"));
+
+        function createComponent() {
+            return helpers.quickCreateComponent({
+                template: htmlTemplate,
+                directives: [TaskAcceptComponent],
+                properties: { task: task },
+                providers: [
+                    helpers.createProviderToValue("RoleService", roleService)
+                ].concat(helpers.provideFilters("translateFilter"))
+            });
+        }
+
+        it("replace element with the specific task accept component", (done: Function) => {
+            createComponent().then(fixture => {
+                expect(fixture.debugElement.queryAll("add-member-task-accept").length).toBe(1);
+                done();
+            });
+        });
+    });
+});
@@ -0,0 +1,22 @@
+import { Input, Inject, Component } from 'ng-forward';
+import { AddMemberTaskAcceptComponent } from "../types/add-member/add-member-task-accept.component";
+
+@Component({
+    selector: 'task-accept',
+    template: '<div></div>',
+    directives: [AddMemberTaskAcceptComponent]
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class TaskAcceptComponent {
+
+    @Input() task: noosfero.Task;
+    @Input() confirmationTask: noosfero.Task;
+
+    ngOnInit() {
+        let componentName = this.task.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        componentName += "-task-accept";
+        this.$element.replaceWith(this.$compile(`<${componentName} [task]="ctrl.task" [confirmation-task]="ctrl.confirmationTask"></${componentName}>`)(this.$scope));
+    }
+
+    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) { }
+}
@@ -0,0 +1,106 @@
+import { Provider, provide, Component } from 'ng-forward';
+import * as helpers from "../../../spec/helpers";
+import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
+import { TaskListComponent } from './task-list.component';
+
+const htmlTemplate: string = '<task-list [task]="ctrl.task"></task-list>';
+
+describe("Components", () => {
+    describe("Task List Component", () => {
+
+        let helper: ComponentTestHelper<TaskListComponent>;
+        let taskService = jasmine.createSpyObj("taskService", ["getAllPending"]);
+        let tasks = [{ id: 1 }, { id: 2 }];
+        let modal = helpers.mocks.$modal;
+        let eventsHubService = jasmine.createSpyObj("eventsHubService", ["subscribeToEvent", "emitEvent"]);
+        taskService.getAllPending = jasmine.createSpy("getAllPending").and.returnValue(Promise.resolve({ headers: () => { }, data: tasks }));
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [TaskListComponent],
+                providers: [
+                    helpers.createProviderToValue("TaskService", taskService),
+                    helpers.createProviderToValue("EventsHubService", eventsHubService),
+                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+                    helpers.createProviderToValue('$uibModal', modal),
+                ].concat(helpers.provideFilters("groupByFilter")),
+                properties: { tasks: tasks }
+            });
+            helper = new ComponentTestHelper<TaskListComponent>(cls, done);
+        });
+
+        it("return specific template for a task", () => {
+            let task = { type: "AddMember" };
+            expect(helper.component.getTaskTemplate(<any>task)).toEqual("app/task/types/add-member/add-member.html");
+        });
+
+        it("return the default template for a task", () => {
+            let task = { type: "" };
+            expect(helper.component.getTaskTemplate(<any>task)).toEqual("app/task/types/default.html");
+        });
+
+        it("open confirmation modal when it has details to accept a task", () => {
+            let task = { accept_details: true };
+            helper.component.accept(<any>task);
+            expect(modal.open).toHaveBeenCalled();
+        });
+
+        it("open confirmation modal when it has details to reject a task", () => {
+            let task = { reject_details: true };
+            helper.component.reject(<any>task);
+            expect(modal.open).toHaveBeenCalled();
+        });
+
+        it("call api directly when it has no details to accept a task", () => {
+            let task = { accept_details: false };
+            helper.component.callAccept = jasmine.createSpy("callAccept");
+            helper.component.accept(<any>task);
+            expect(helper.component.callAccept).toHaveBeenCalled();
+        });
+
+        it("call api directly when it has no details to reject a task", () => {
+            let task = { accept_details: false };
+            helper.component.callReject = jasmine.createSpy("callReject");
+            helper.component.reject(<any>task);
+            expect(helper.component.callReject).toHaveBeenCalled();
+        });
+
+        it("call cancel and emit event when accept was called successfully", () => {
+            helper.component.currentTask = <any>{ id: 1 };
+            let result = helpers.mocks.promiseResultTemplate({ data: { id: 1 } });
+            taskService.closeTask = jasmine.createSpy("closeTask").and.returnValue(result);
+            helper.component.cancel = jasmine.createSpy("cancel");
+            helper.component.callAccept();
+            expect(helper.component.cancel).toHaveBeenCalled();
+            expect((<any>helper.component)['eventsHubService'].emitEvent).toHaveBeenCalled();
+        });
+
+        it("call cancel and emit event when reject was called successfully", () => {
+            helper.component.currentTask = <any>{ id: 1 };
+            let result = helpers.mocks.promiseResultTemplate({ data: { id: 1 } });
+            taskService.closeTask = jasmine.createSpy("closeTask").and.returnValue(result);
+            helper.component.cancel = jasmine.createSpy("cancel");
+            helper.component.callReject();
+            expect(helper.component.cancel).toHaveBeenCalled();
+            expect((<any>helper.component)['eventsHubService'].emitEvent).toHaveBeenCalled();
+        });
+
+        it("reset currentTask and close modal when call cancel", () => {
+            let modalInstance = jasmine.createSpyObj("modalInstance", ["close"]);
+            helper.component["modalInstance"] = modalInstance;
+            helper.component.currentTask = <any>{ id: 1 };
+            helper.component.cancel();
+            expect(modalInstance.close).toHaveBeenCalled();
+            expect(helper.component.currentTask).toBeNull();
+        });
+
+        it("not fail when call cancel with no modalInstance", () => {
+            helper.component["modalInstance"] = null;
+            helper.component.currentTask = null;
+            helper.component.cancel();
+        });
+    });
+});
@@ -0,0 +1,107 @@
+import { Component, Input, Inject, provide } from "ng-forward";
+import { NotificationService } from "../../shared/services/notification.service";
+import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
+import { TaskAcceptComponent } from "./task-accept.component";
+import { Arrays } from "../../../lib/util/arrays";
+import { EventsHubService } from "../../shared/services/events-hub.service";
+import { NoosferoKnownEvents } from "../../known-events";
+
+@Component({
+    selector: "task-list",
+    templateUrl: "app/task/task-list/task-list.html",
+    directives: [TaskAcceptComponent],
+    providers: [
+        provide('eventsHubService', { useClass: EventsHubService })
+    ]
+})
+@Inject(NotificationService, "$scope", "$uibModal", TaskService, EventsHubService)
+export class TaskListComponent {
+
+    @Input() tasks: noosfero.Task[];
+
+    private taskTemplates = ["AddFriend", "AddMember", "CreateCommunity", "SuggestArticle", "AbuseComplaint"];
+
+    currentTask: noosfero.Task;
+    confirmationTask: noosfero.Task;
+    eventsNames: NoosferoKnownEvents;
+    private modalInstance: any = null;
+
+    constructor(private notificationService: NotificationService,
+        private $scope: ng.IScope,
+        private $uibModal: any,
+        private taskService: TaskService,
+        private eventsHubService: EventsHubService) {
+
+        this.eventsNames = new NoosferoKnownEvents();
+    }
+
+    ngOnInit() {
+        this.eventsHubService.subscribeToEvent(this.eventsNames.TASK_CLOSED, (task: noosfero.Task) => {
+            Arrays.remove(this.tasks, task);
+        });
+    }
+
+    getTaskTemplate(task: noosfero.Task) {
+        if (this.taskTemplates.indexOf(task.type) >= 0) {
+            let templateName = this.getTemplateName(task);
+            return `app/task/types/${templateName}/${templateName}.html`;
+        } else {
+            return 'app/task/types/default.html';
+        }
+    }
+
+    accept(task: noosfero.Task) {
+        this.closeTask(task, task.accept_details, "app/task/task-list/accept.html", () => { this.callAccept(); });
+    }
+
+    reject(task: noosfero.Task) {
+        this.closeTask(task, task.reject_details, "app/task/task-list/reject.html", () => { this.callReject(); });
+    }
+
+    private closeTask(task: noosfero.Task, hasDetails: boolean, templateUrl: string, confirmationFunction: Function) {
+        this.currentTask = task;
+        this.confirmationTask = <any>{ id: task.id };
+        if (hasDetails) {
+            this.modalInstance = this.$uibModal.open({
+                templateUrl: templateUrl,
+                controller: TaskListComponent,
+                controllerAs: 'modal',
+                bindToController: true,
+                scope: this.$scope
+            });
+        } else {
+            confirmationFunction();
+        }
+    }
+
+    callAccept() {
+        this.callCloseTask("finish", "tasks.actions.accept.title", "tasks.actions.accept.message");
+    }
+
+    callReject() {
+        this.callCloseTask("cancel", "tasks.actions.reject.title", "tasks.actions.reject.message");
+    }
+
+    private callCloseTask(action: string, title: string, message: string) {
+        this.taskService.closeTask(this.confirmationTask, action).then(() => {
+            this.eventsHubService.emitEvent(this.eventsNames.TASK_CLOSED, this.currentTask);
+            this.notificationService.success({ title: title, message: message });
+        }).finally(() => {
+            this.cancel();
+        });
+    }
+
+    cancel() {
+        if (this.modalInstance) {
+            this.modalInstance.close();
+            this.modalInstance = null;
+        }
+        this.currentTask = null;
+        this.confirmationTask = null;
+    }
+
+    private getTemplateName(task: noosfero.Task) {
+        return task.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    }
+
+}
@@ -0,0 +1,24 @@
+<ul class="task-list">
+  <li class="task-group" ng-repeat="(target, tasks) in ctrl.tasks | groupBy: 'target.name'">
+    <div class="task-target">
+      <noosfero-profile-image ng-if="tasks[0].target.type" [profile]="tasks[0].target"></noosfero-profile-image>
+      <div class="target-name">{{target}}</div>
+    </div>
+    <div class="task-body" ng-repeat="task in tasks | orderBy: 'created_at':true">
+      <div class="task">
+        <ng-include src="ctrl.getTaskTemplate(task)"></ng-include>
+      </div>
+      <div class="actions">
+        <a href="#" ng-if="!task.accept_disabled" ng-click="ctrl.accept(task)" class="accept" uib-tooltip="{{'tasks.actions.accept' | translate}}">
+          <i class="fa fa-check"></i>
+        </a>
+        <a href="#" ng-if="!task.reject_disabled" ng-click="ctrl.reject(task)" class="reject" uib-tooltip="{{'tasks.actions.reject' | translate}}">
+          <i class="fa fa-close"></i>
+        </a>
+      </div>
+      <span class="time">
+        <span class="bullet-separator">•</span> <span am-time-ago="task.created_at | dateFormat"></span>
+      </span>
+    </div>
+  </li>
+</ul>
@@ -0,0 +1,86 @@
+$task-action-accept-color: #77c123;
+$task-action-reject-color: #d64e18;
+
+.task-list {
+  width: 100%;
+  padding: 0;
+  list-style-type: none;
+  .task-group {
+    border-top: 1px solid #f3f3f3;
+    padding: 4px 16px 8px 16px;
+  }
+  .task-target {
+    margin-top: 12px;
+    .profile-image {
+      color: #2c3e50;
+      font-size: 25px;
+      width: 25px;
+      display: inline-block;
+      @extend .img-rounded;
+    }
+    .target-name {
+      display: inline-block;
+      margin-left: 10px;
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+  .task-body {
+    margin-left: 35px;
+    padding: 2px;
+    .task {
+      display: inline-block;
+      color: #949494;
+      .task-icon {
+        font-size: 18px;
+        color: #e84e40;
+      }
+      .requestor, .target {
+         font-style: italic;
+         color: #676767;
+      }
+    }
+    .actions {
+      display: inline-block;
+      font-size: 19px;
+      a {
+        text-decoration: none;
+      }
+      .accept {
+        color: $task-action-accept-color;
+        &:hover {
+          color: darken($task-action-accept-color, 10%);
+        }
+      }
+      .reject {
+        color: $task-action-reject-color;
+        &:hover {
+          color: darken($task-action-reject-color, 10%);
+        }
+      }
+    }
+    .time {
+      color: #c1c1c1;
+      font-size: 12px;
+      .bullet-separator {
+        font-size: 10px;
+        color: #d1d1d1;
+      }
+    }
+  }
+}
+.task-confirmation {
+  @extend .form-group;
+  .confirmation-details {
+    margin-bottom: 20px;
+  }
+  .confirmation-title {
+    text-align: center;
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+  .actions {
+    text-align: center;
+  }
+}
@@ -0,0 +1,44 @@
+import { Provider, provide, Component } from 'ng-forward';
+import * as helpers from "../../../spec/helpers";
+import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
+import { TasksMenuComponent } from './tasks-menu.component';
+import { AuthEvents } from "./../../login";
+
+const htmlTemplate: string = '<tasks-menu></tasks-menu>';
+
+describe("Components", () => {
+    describe("Task Menu Component", () => {
+
+        let helper: ComponentTestHelper<TasksMenuComponent>;
+        let taskService = jasmine.createSpyObj("taskService", ["getAllPending"]);
+        let tasks = [{ id: 1 }, { id: 2 }];
+        let eventsHubService = jasmine.createSpyObj("eventsHubService", ["subscribeToEvent", "emitEvent"]);
+        taskService.getAllPending = jasmine.createSpy("getAllPending").and.returnValue(Promise.resolve({ headers: () => { }, data: tasks }));
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [TasksMenuComponent],
+                providers: [
+                    helpers.createProviderToValue("TaskService", taskService),
+                    helpers.createProviderToValue("EventsHubService", eventsHubService),
+                    helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
+                ]
+            });
+            helper = new ComponentTestHelper<TasksMenuComponent>(cls, done);
+        });
+
+        it("load person tasks", () => {
+            expect(taskService.getAllPending).toHaveBeenCalled();
+        });
+
+        it("load person tasks when receive a login event", () => {
+            helper.component.loadTasks = jasmine.createSpy("loadTasks");
+            helper.component.ngOnInit();
+            (<any>helper.component['authService'])[AuthEvents[AuthEvents.loginSuccess]].next({});
+            expect(helper.component.loadTasks).toHaveBeenCalled();
+        });
+    });
+});
@@ -0,0 +1,46 @@
+import { Component, Inject } from "ng-forward";
+import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
+import { AuthService, SessionService, AuthEvents } from "./../../login";
+import { EventsHubService } from "../../shared/services/events-hub.service";
+import { NoosferoKnownEvents } from "../../known-events";
+
+@Component({
+    selector: "tasks-menu",
+    templateUrl: "app/task/tasks-menu/tasks-menu.html"
+})
+@Inject(TaskService, SessionService, AuthService, EventsHubService)
+export class TasksMenuComponent {
+
+    tasks: noosfero.Task[];
+    total: number;
+    perPage = 5;
+    person: noosfero.Person;
+    eventsNames: NoosferoKnownEvents;
+
+    constructor(private taskService: TaskService,
+        private session: SessionService,
+        private authService: AuthService,
+        private eventsHubService: EventsHubService) {
+
+        this.eventsNames = new NoosferoKnownEvents();
+    }
+
+    ngOnInit() {
+        this.eventsHubService.subscribeToEvent(this.eventsNames.TASK_CLOSED, (task: noosfero.Task) => {
+            this.total--;
+        });
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
+            this.loadTasks();
+        });
+        this.loadTasks();
+    }
+
+    loadTasks() {
+        if (!this.session.currentUser()) return;
+        this.person = this.session.currentUser().person;
+        this.taskService.getAllPending({ per_page: this.perPage }).then((result: noosfero.RestResult<noosfero.Task[]>) => {
+            this.total = result.headers('total');
+            this.tasks = result.data;
+        });
+    }
+}
@@ -0,0 +1,11 @@
+<li class="btn-nav tasks-menu" uib-dropdown  ng-show="ctrl.total > 0" ng-if="ctrl.total">
+  <a href="#" uib-dropdown-toggle>
+    <i class="fa fa-bell-o fa-fw fa-2x"></i>
+    <span class="badge">{{ctrl.total}}</span>
+  </a>
+  <div class="dropdown-menu task-panel" uib-dropdown-menu>
+    <div class="task-menu-header">{{"tasks.menu.header" | translate:{tasks: ctrl.total}:"messageformat"}}</div>
+    <task-list [tasks]="ctrl.tasks"></task-list>
+    <a ui-sref="main.profile.tasks({profile: ctrl.person.identifier})" class="all-tasks btn btn-default btn-xs">{{"tasks.menu.all" | translate}}</a>
+  </div>
+</li>
@@ -0,0 +1,29 @@
+tasks-menu {
+  .tasks-menu {
+    position: relative;
+    margin-right: 0;
+    .badge {
+      position: absolute;
+      top: 1px;
+      right: 8px;
+      border-radius: 6px;
+      background-color: #e84e40;
+      color: #fff;
+    }
+    .all-tasks {
+      text-align: center;
+      width: 100%;
+      display: block;
+      line-height: 25px;
+    }
+    .task-panel {
+      width: 550px;
+      padding: 0;
+    }
+    .task-menu-header {
+      text-align: center;
+      padding: 7px;
+      font-weight: bold;
+    }
+  }
+}
@@ -0,0 +1,34 @@
+import { Provider, provide, Component } from 'ng-forward';
+import * as helpers from "../../../spec/helpers";
+import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
+import { TasksComponent } from './tasks.component';
+import { AuthEvents } from "./../../login";
+
+const htmlTemplate: string = '<tasks></tasks>';
+
+describe("Components", () => {
+    describe("Task Menu Component", () => {
+
+        let helper: ComponentTestHelper<TasksComponent>;
+        let taskService = jasmine.createSpyObj("taskService", ["getAllPending"]);
+        let tasks = [{ id: 1 }, { id: 2 }];
+        taskService.getAllPending = jasmine.createSpy("getAllPending").and.returnValue(Promise.resolve({ headers: () => { }, data: tasks }));
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [TasksComponent],
+                providers: [
+                    helpers.createProviderToValue("TaskService", taskService)
+                ]
+            });
+            helper = new ComponentTestHelper<TasksComponent>(cls, done);
+        });
+
+        it("load person tasks", () => {
+            expect(taskService.getAllPending).toHaveBeenCalled();
+        });
+    });
+});
@@ -0,0 +1,30 @@
+import { Component, Inject, provide } from "ng-forward";
+import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
+
+@Component({
+    selector: "tasks",
+    templateUrl: "app/task/tasks/tasks.html",
+    providers: [
+        provide('taskService', { useClass: TaskService })
+    ]
+})
+@Inject(TaskService)
+export class TasksComponent {
+
+    tasks: noosfero.Task[];
+    total: number;
+    currentPage: number;
+    perPage = 5;
+
+    constructor(private taskService: TaskService) {
+        this.loadPage();
+    }
+
+    loadPage() {
+        this.taskService.getAllPending({ page: this.currentPage, per_page: this.perPage }).then((result: noosfero.RestResult<noosfero.Task[]>) => {
+            this.total = result.headers('total');
+            this.tasks = result.data;
+        });
+    }
+
+}
@@ -0,0 +1,8 @@
+<h3>{{"tasks.header" | translate}}</h3>
+
+<task-list [tasks]="vm.tasks"></task-list>
+
+<uib-pagination ng-model="vm.currentPage" total-items="vm.total" class="pagination-sm center-block"
+  boundary-links="true" items-per-page="vm.perPage" ng-change="vm.loadPage()"
+  first-text="«" last-text="»" previous-text="‹" next-text="›">
+</uib-pagination>
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-fw fa-user-times"></i>
+<span class="requestor">{{task.requestor.name}}</span> {{"tasks.abuse_complaint.message" | translate}}
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-fw fa-user-plus"></i>
+<span class="requestor">{{task.requestor.name}}</span> {{"tasks.add_friend.message" | translate}} <span class="target">{{task.target.name}}</span>
@@ -0,0 +1,11 @@
+<div class="add-member-details">
+  <label>{{"tasks.add_member.accept.select_role" | translate}}</label>
+  <div class="form-group roles">
+    <div class="checkbox-nice" ng-repeat="role in ctrl.roles">
+      <input type="checkbox" id="role_{{role.name}}" (click)="ctrl.toggleSelection(role)">
+      <label for="role_{{role.name}}">
+        {{role.name}}
+      </label>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,44 @@
+import { Provider, provide, Component } from 'ng-forward';
+import * as helpers from "../../../../spec/helpers";
+import { ComponentTestHelper, createClass } from '../../../../spec/component-test-helper';
+import { AddMemberTaskAcceptComponent } from './add-member-task-accept.component';
+
+const htmlTemplate: string = '<add-member-task-accept [task]="ctrl.task" [confirmation-task]="ctrl.confirmationTask"></add-member-task-accept>';
+
+describe("Components", () => {
+    describe("Add Member Task Accept Component", () => {
+
+        let helper: ComponentTestHelper<AddMemberTaskAcceptComponent>;
+        let roleService = jasmine.createSpyObj("roleService", ["getByProfile"]);
+        let roles = [{ id: 1 }, { id: 2 }];
+        let task = <any>{ target: { id: 5 } };
+        roleService.getByProfile = jasmine.createSpy("getByProfile").and.returnValue(Promise.resolve({ headers: () => { }, data: roles }));
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [AddMemberTaskAcceptComponent],
+                providers: [
+                    helpers.createProviderToValue("RoleService", roleService)
+                ].concat(helpers.provideFilters("translateFilter")),
+                properties: { task: task, confirmationTask: task }
+            });
+            helper = new ComponentTestHelper<AddMemberTaskAcceptComponent>(cls, done);
+        });
+
+        it("insert role id in roles list when toggle selection", () => {
+            let role = { id: 1 };
+            helper.component.toggleSelection(<any>role);
+            expect(helper.component.confirmationTask.roles).toEqual([role.id]);
+        });
+
+        it("remove role id from roles list when toggle selection", () => {
+            let role = { id: 1 };
+            helper.component.confirmationTask.roles = [role.id];
+            helper.component.toggleSelection(<any>role);
+            expect(helper.component.confirmationTask.roles).toEqual([]);
+        });
+    });
+});
@@ -0,0 +1,33 @@
+import { Component, Input, Inject } from "ng-forward";
+import { RoleService } from "../../../../lib/ng-noosfero-api/http/role.service";
+
+@Component({
+    selector: "add-member-task-accept",
+    templateUrl: "app/task/types/add-member/add-member-accept.html",
+})
+@Inject(RoleService)
+export class AddMemberTaskAcceptComponent {
+
+    @Input() task: noosfero.Task;
+    @Input() confirmationTask: noosfero.AddMemberTask;
+    roles: noosfero.Role[];
+
+    constructor(private roleService: RoleService) { }
+
+    ngOnInit() {
+        if (!this.task.target) return;
+        this.confirmationTask.roles = [];
+        this.roleService.getByProfile(this.task.target.id).then((result: noosfero.RestResult<noosfero.Role[]>) => {
+            this.roles = result.data;
+        });
+    }
+
+    toggleSelection(role: noosfero.Role) {
+        let index = this.confirmationTask.roles.indexOf(role.id);
+        if (index >= 0) {
+            this.confirmationTask.roles.splice(index, 1);
+        } else {
+            this.confirmationTask.roles.push(role.id);
+        }
+    }
+}
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-fw fa-user-plus"></i>
+<span class="requestor">{{task.requestor.name}}</span> {{"tasks.add_member.message" | translate}} <span class="target">{{task.target.name}}</span>
@@ -0,0 +1,5 @@
+.add-member-details {
+  .roles {
+    margin-left: 40px;
+  }
+}
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-fw fa-users"></i>
+<span class="requestor">{{task.requestor.name}}</span> {{"tasks.create_community.message" | translate}} <span class="target">{{task.data.name}}</span>
@@ -0,0 +1 @@
+<!-- not implemented yet -->
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-fw fa-file-text"></i>
+<span class="requestor">{{task.requestor.name}}</span> {{"tasks.suggest_article.message" | translate}} <span class="target">{{task.data.article.name}}</span>
@@ -23,6 +23,8 @@
   "profile.others_info": "Others",
   "profile.community.title": "Community",
   "profile.person.title": "Person",
+  "profile.image.edit": "Crop photo",
+  "profile.image.upload": "Upload Photo",
   "activities.title": "Activities",
   "activities.create_article.description": "has published on",
   "activities.scrap.description": "wrote in its timeline",
@@ -32,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",
@@ -41,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",
@@ -124,5 +135,26 @@
   "messages.invalid.maxlength": "This field is too long",
   "messages.invalid.minlength": "This field is too short",
   "messages.invalid.email": "This needs to be a valid email",
-  "messages.invalid.passwordMatch": "Your passwords did not match"
+  "messages.invalid.passwordMatch": "Your passwords did not match",
+  "tasks.menu.all": "All tasks",
+  "tasks.menu.all": "See all tasks",
+  "tasks.menu.header": "You have {tasks, plural, one{one pending task} other{# pending tasks}}",
+  "tasks.actions.accept": "Accept",
+  "tasks.actions.reject": "Reject",
+  "tasks.header": "Tasks",
+  "tasks.actions.accept.confirmation.title": "Confirm task acceptance?",
+  "tasks.actions.reject.confirmation.title": "Confirm task rejection?",
+  "tasks.actions.confirmation.yes": "Yes",
+  "tasks.actions.confirmation.cancel": "Cancel",
+  "tasks.actions.accept.title": "Good job!",
+  "tasks.actions.reject.title": "Good job!",
+  "tasks.actions.accept.message": "Task Accepted",
+  "tasks.actions.reject.message": "Task Rejected",
+  "tasks.actions.reject.explanation.label": "Rejection explanation",
+  "tasks.add_member.accept.select_role": "Select Roles:",
+  "tasks.abuse_complaint.message": "was reported due to inappropriate behavior",
+  "tasks.add_friend.message": "wants to be friend of",
+  "tasks.add_member.message": "wants to join",
+  "tasks.create_community.message": "wants to create a new community:",
+  "tasks.suggest_article.message": "suggested a new article:"
 }
@@ -23,6 +23,8 @@
   "profile.others_info": "Outras informações",
   "profile.community.title": "Comunidade",
   "profile.person.title": "Pessoa",
+  "profile.image.edit": "Recortar photo",
+  "profile.image.upload": "Enviar photo",
   "activities.title": "Atividades",
   "activities.create_article.description": "publicou em",
   "activities.scrap.description": "escreveu em sua linha do tempo",
@@ -32,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",
@@ -41,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",
@@ -127,5 +138,26 @@
   "messages.invalid.maxlength": "O valor é muito longo",
   "messages.invalid.minlength": "O valor é muito curto",
   "messages.invalid.email": "Informe um email válido",
-  "messages.invalid.passwordMatch": "As senhas não coincidem"
+  "messages.invalid.passwordMatch": "As senhas não coincidem",
+  "tasks.menu.all": "Todas as tarefas",
+  "tasks.menu.all": "Veja todas as tarefas",
+  "tasks.menu.header": "Você tem {tasks, plural, one{uma tarefa pendente} other{# tarefas pendentes}}",
+  "tasks.actions.accept": "Aceitar",
+  "tasks.actions.reject": "Rejeitar",
+  "tasks.header": "Tarefas",
+  "tasks.actions.accept.confirmation.title": "Confirmar aprovação da tarefa?",
+  "tasks.actions.reject.confirmation.title": "Confirmar reprovação da tarefa?",
+  "tasks.actions.confirmation.yes": "Sim",
+  "tasks.actions.confirmation.cancel": "Cancelar",
+  "tasks.actions.accept.title": "Bom trabalho!",
+  "tasks.actions.reject.title": "Bom trabalho!",
+  "tasks.actions.accept.message": "Tarefa Aceita",
+  "tasks.actions.reject.message": "Tarefa Rejeitada",
+  "tasks.actions.reject.explanation.label": "Motivo da rejeição",
+  "tasks.add_member.accept.select_role": "Selecionar papéis:",
+  "tasks.abuse_complaint.message": "foi notificado por comportamento inadequado",
+  "tasks.add_friend.message": "quer ser amigo de",
+  "tasks.add_member.message": "quer entrar em",
+  "tasks.create_community.message": "quer criar uma nova comunidade:",
+  "tasks.suggest_article.message": "sugeriu um novo artigo:"
 }
@@ -0,0 +1,41 @@
+import { PasswordService } from "./password.service";
+
+describe("Services", () => {
+
+    describe("Password Service", () => {
+
+        let $httpBackend: ng.IHttpBackendService;
+        let passwordService: PasswordService;
+        let $rootScope: ng.IRootScopeService;
+        let data: any;
+
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
+            $translateProvider.translations('en', {});
+        }));
+
+        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService,
+_PasswordService_: PasswordService, _$rootScope_: ng.IRootScopeService) => {
+            $httpBackend = _$httpBackend_;
+            passwordService = _PasswordService_;
+            $rootScope = _$rootScope_;
+        }));
+
+        describe("Succesfull request", () => {
+
+            it("should change user password", (done) => {
+               data = {
+                  code: '1234567890',
+                  password: 'test',
+                  password_confirmation: 'test'
+                };
+
+                $httpBackend.expectPATCH(`/api/v1/new_password?code=${data.code}&password=${data.password}&password_confirmation=${data.password_confirmation}`).respond(201, [{ login: "test" }]);
+                passwordService.new_password('1234567890', 'test', 'test').then((response: restangular.IResponse) => {
+                    expect(response.data[0].login).toEqual("test");
+                    done();
+                });
+                $httpBackend.flush();
+            });
+        });
+    });
+});
@@ -0,0 +1,14 @@
+import { Injectable, Inject } from "ng-forward";
+import { RestangularService } from "./restangular_service";
+
+@Injectable()
+@Inject("Restangular")
+export class PasswordService {
+    constructor(private Restangular: restangular.IService) {
+        this.Restangular = Restangular;
+    }
+
+    new_password(code: string, password: string, password_confirmation: string): ng.IPromise<noosfero.RestResult<noosfero.User>> {
+        return this.Restangular.all("").customOperation("patch", "new_password", {code: code, password: password, password_confirmation: password_confirmation });
+    }
+}
 import { Injectable, Inject } from "ng-forward";
-import {RestangularService} from "./restangular_service";
-import {ProfileService} from "./profile.service";
+import { RestangularService } from "./restangular_service";
+import { ProfileService } from "./profile.service";
 @Injectable()
 @Inject("Restangular", "$q", "$log", ProfileService)
@@ -28,4 +28,19 @@ export class PersonService extends RestangularService&lt;noosfero.Person&gt; {
         p.catch(this.getHandleErrorFunction<noosfero.RestResult<any>>(deferred));
         return deferred.promise;
     }
+
+    uploadImage(profile: noosfero.Profile, base64ImageJson: any) {
+        let headers = { 'Content-Type': 'application/json' };
+        let deferred = this.$q.defer<noosfero.RestResult<noosfero.Profile>>();
+        // TODO dynamically copy the selected attributes to update
+        let attributesToUpdate: any = {
+            person: { image_builder: base64ImageJson }
+        };
+        let restRequest: ng.IPromise<noosfero.RestResult<any>> =
+            this.getElement(profile.id).customPOST(attributesToUpdate, null, null, headers);
+        restRequest.then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+        return deferred.promise;
+    }
+
 }
@@ -0,0 +1,33 @@
+import { RoleService } from "./role.service";
+
+describe("Services", () => {
+
+    describe("Role Service", () => {
+
+        let $httpBackend: ng.IHttpBackendService;
+        let roleService: RoleService;
+
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
+            $translateProvider.translations('en', {});
+        }));
+
+        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _RoleService_: RoleService) => {
+            $httpBackend = _$httpBackend_;
+            roleService = _RoleService_;
+        }));
+
+
+        describe("Succesfull requests", () => {
+
+            it("list organization roles", (done) => {
+                $httpBackend.expectGET(`/api/v1/profiles/1/roles`).respond(200, { roles: [{ id: 1 }] });
+                roleService.getByProfile(1).then((result: noosfero.RestResult<noosfero.Role[]>) => {
+                    expect(result.data).toEqual([{ id: 1 }]);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,27 @@
+import { Injectable, Inject } from "ng-forward";
+import { RestangularService } from "./restangular_service";
+
+@Injectable()
+@Inject("Restangular", "$q", "$log")
+export class RoleService extends RestangularService<noosfero.Role> {
+
+    constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService) {
+        super(Restangular, $q, $log);
+    }
+
+    getResourcePath() {
+        return "roles";
+    }
+
+    getDataKeys() {
+        return {
+            singular: 'role',
+            plural: 'roles'
+        };
+    }
+
+    getByProfile(profileId: number, params: any = {}) {
+        return this.list(this.restangularService.one("profiles", profileId), params);
+    }
+
+}
@@ -0,0 +1,56 @@
+import { TaskService } from "./task.service";
+
+
+describe("Services", () => {
+
+    describe("Task Service", () => {
+
+        let $httpBackend: ng.IHttpBackendService;
+        let taskService: TaskService;
+
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
+            $translateProvider.translations('en', {});
+        }));
+
+        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _TaskService_: TaskService) => {
+            $httpBackend = _$httpBackend_;
+            taskService = _TaskService_;
+        }));
+
+
+        describe("Succesfull requests", () => {
+
+            it("list pending tasks", (done) => {
+                $httpBackend.expectGET(`/api/v1/tasks?all_pending=true&status=1`).respond(200, { tasks: [{ id: 1 }] });
+                taskService.getAllPending().then((result: noosfero.RestResult<noosfero.Task[]>) => {
+                    expect(result.data).toEqual([{ id: 1 }]);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("finish a task", (done) => {
+                let taskId = 1;
+                let task: noosfero.Task = <any>{ id: taskId };
+                $httpBackend.expectPUT(`/api/v1/tasks/${taskId}/finish`).respond(200, { task: { id: taskId } });
+                taskService.finishTask(task).then((result: noosfero.RestResult<noosfero.Task>) => {
+                    expect(result.data).toEqual({ id: 1 });
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("cancel a task", (done) => {
+                let taskId = 1;
+                let task: noosfero.Task = <any>{ id: taskId };
+                $httpBackend.expectPUT(`/api/v1/tasks/${taskId}/cancel`).respond(200, { task: { id: taskId } });
+                taskService.cancelTask(task).then((result: noosfero.RestResult<noosfero.Task>) => {
+                    expect(result.data).toEqual({ id: 1 });
+                    done();
+                });
+                $httpBackend.flush();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,46 @@
+import { Injectable, Inject } from "ng-forward";
+import { RestangularService } from "./restangular_service";
+
+@Injectable()
+@Inject("Restangular", "$q", "$log")
+export class TaskService extends RestangularService<noosfero.Task> {
+
+    constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService) {
+        super(Restangular, $q, $log);
+    }
+
+    getResourcePath() {
+        return "tasks";
+    }
+
+    getDataKeys() {
+        return {
+            singular: 'task',
+            plural: 'tasks'
+        };
+    }
+
+    getAllPending(params: any = {}) {
+        params['all_pending'] = true;
+        params['status'] = 1;
+        return this.list(null, params);
+    }
+
+    finishTask(task: noosfero.Task) {
+        return this.closeTask(task, "finish");
+    }
+
+    cancelTask(task: noosfero.Task) {
+        return this.closeTask(task, "cancel");
+    }
+
+    closeTask(task: noosfero.Task, action: string) {
+        let element = this.getElement(task.id);
+        delete task.id;
+        let put = element.customPUT({ task: task }, action);
+        let deferred = this.$q.defer<noosfero.RestResult<noosfero.Task>>();
+        put.then(this.getHandleSuccessFunction<noosfero.RestResult<noosfero.Task>>(deferred));
+        put.catch(this.getHandleErrorFunction<noosfero.RestResult<noosfero.Task>>(deferred));
+        return deferred.promise;
+    }
+}
@@ -0,0 +1,11 @@
+namespace noosfero {
+    /**
+     * @ngdoc interface
+     * @name noosfero.AddMemberTask
+     * @description
+     *  A representation of an AddMemberTask in Noosfero.
+     */
+    export interface AddMemberTask extends Task {
+        roles: number[];
+    }
+}
@@ -0,0 +1,12 @@
+namespace noosfero {
+    /**
+     * @ngdoc interface
+     * @name noosfero.Role
+     * @description
+     *  A representation of a Role in Noosfero.
+     */
+    export interface Role extends RestModel {
+        name: string;
+        key: string;
+    }
+}
@@ -0,0 +1,14 @@
+namespace noosfero {
+    /**
+     * @ngdoc interface
+     * @name noosfero.Task
+     * @description
+     *  A representation of a Task in Noosfero.
+     */
+    export interface Task extends RestModel {
+        type: string;
+        accept_details: boolean;
+        reject_details: boolean;
+        target: noosfero.Profile | noosfero.Environment;
+    }
+}
@@ -237,11 +237,16 @@ export var mocks: any = {
         }
     },
     promiseResultTemplate: (response?: {}) => {
-
-        return {
-            then: (func?: (response: any) => void) => {
-                if (func) { return func(response); }
+        let callback = (func?: (response: any) => any) => {
+            if (func) {
+                let ret = func(response);
+                if (ret && typeof ret.then === "function") return ret;
             }
+            return mocks.promiseResultTemplate(response);
+        };
+        return {
+            then: callback,
+            finally: callback
         };
     },
     $log: {
@@ -252,6 +257,11 @@ export var mocks: any = {
         changeLanguage: (lang: string) => { },
         translate: (text: string) => { return text; }
     },
+    passwordService: {
+        new_password: (param: any) => {
+            return Promise.resolve({ status: 201 });
+        }
+    },
     notificationService: {
         success: () => { },
         confirmation: () => { },
	@@ -32,7 +32,7 @@ import {SearchComponent} from "../search/search.component";		@@ -32,7 +32,7 @@ import {SearchComponent} from "../search/search.component";
32	}	32	}
33	},	33	},
34	{	34	{
35	- url: '^/search?query',	35	+ url: '^/search?query&per_page',
36	component: SearchComponent,	36	component: SearchComponent,
37	name: 'main.environment.search',	37	name: 'main.environment.search',
38	views: {	38	views: {
	@@ -2,4 +2,22 @@		@@ -2,4 +2,22 @@
2	.settings-link {	2	.settings-link {
3	display: block;	3	display: block;
4	}	4	}
		5	+ .upload-camera-container {
		6	+ top: 77%;
		7	+ left: 6%;
		8	+ }
		9	+}
		10	+
		11	+.profile-image-block-editable {
		12	+ top: 68%;
		13	+ width: 284px;
		14	+ font-weight: 700;
		15	+ height: 43px;
		16	+ padding-left: 30px;
		17	+ padding-top: 13px;
5	}	18	}
		19	+
		20	+
		21	+
		22	+
		23	+
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
@@ -0,0 +1,87 @@		@@ -0,0 +1,87 @@
	1	+import { ComponentTestHelper, createClass } from "../../spec/component-test-helper";
	2	+import * as helpers from "../../spec/helpers";
	3	+import { PasswordComponent } from "./new-password.component";
	4	+
	5	+
	6	+describe("Password Component", () => {
	7	+ const htmlTemplate: string = '<new-password></new-password>';
	8	+
	9	+ let helper: ComponentTestHelper<PasswordComponent>;
	10	+ let passwordService = helpers.mocks.passwordService;
	11	+ let stateService = jasmine.createSpyObj("$state", ["transitionTo"]);
	12	+ let stateParams = jasmine.createSpyObj("$stateParams", ["code"]);
	13	+ let notificationService = helpers.mocks.notificationService;
	14	+ notificationService.success = jasmine.createSpy('success');
	15	+ notificationService.error = jasmine.createSpy('error');
	16	+
	17	+
	18	+ let data: any;
	19	+
	20	+ beforeEach(() => {
	21	+ angular.mock.module('templates');
	22	+ angular.mock.module('ngSanitize');
	23	+ angular.mock.module('ngMessages');
	24	+ angular.mock.module('ngPassword');
	25	+ });
	26	+
	27	+ beforeEach((done) => {
	28	+ let cls = createClass({
	29	+ template: htmlTemplate,
	30	+ directives: [PasswordComponent],
	31	+ providers: [
	32	+ helpers.createProviderToValue('$state', stateService),
	33	+ helpers.createProviderToValue('$stateParams', stateParams),
	34	+ helpers.createProviderToValue('PasswordService', passwordService),
	35	+ helpers.createProviderToValue('NotificationService', notificationService),
	36	+ ]
	37	+ });
	38	+ helper = new ComponentTestHelper<PasswordComponent>(cls, done);
	39	+ });
	40	+
	41	+ it('new password page was rendered', () => {
	42	+ expect(helper.debugElement.query('div.new-password-page').length).toEqual(1);
	43	+ });
	44	+
	45	+ it("changes the user password", done => {
	46	+ data = {
	47	+ code: '1234567890',
	48	+ password: 'test',
	49	+ passwordConfirmation: 'test'
	50	+ };
	51	+
	52	+ helper.component.code = data.code;
	53	+ helper.component.password = data.password;
	54	+ helper.component.passwordConfirmation = data.passwordConfirmation;
	55	+
	56	+ passwordService.new_password = jasmine.createSpy("new_password").and.returnValue(Promise.resolve());
	57	+
	58	+ helper.component.sendNewPassword();
	59	+ expect(passwordService.new_password).toHaveBeenCalledWith('1234567890', 'test', 'test');
	60	+
	61	+ expect(notificationService.success).toHaveBeenCalled();
	62	+
	63	+ done();
	64	+ });
	65	+
	66	+ it("fails when try to change the user password", done => {
	67	+ data = {
	68	+ code: '1234567890',
	69	+ password: 'test',
	70	+ passwordConfirmation: 'test-invalid'
	71	+ };
	72	+
	73	+ helper.component.code = data.code;
	74	+ helper.component.password = data.password;
	75	+ helper.component.passwordConfirmation = data.passwordConfirmation;
	76	+
	77	+ passwordService.new_password = jasmine.createSpy("new_password").and.returnValue(Promise.reject({data: {message: 'Error'}}));
	78	+
	79	+ helper.component.sendNewPassword();
	80	+ expect(passwordService.new_password).toHaveBeenCalledWith('1234567890', 'test', 'test-invalid');
	81	+
	82	+ expect(notificationService.error).toHaveBeenCalled();
	83	+
	84	+ done();
	85	+ });
	86	+
	87	+});
@@ -0,0 +1,36 @@		@@ -0,0 +1,36 @@
	1	+import { StateConfig, Component, Inject, provide } from 'ng-forward';
	2	+
	3	+import { PasswordService } from "../../lib/ng-noosfero-api/http/password.service";
	4	+import { NotificationService } from "./../shared/services/notification.service";
	5	+import { AuthController } from "./auth.controller";
	6	+
	7	+@Component({
	8	+ selector: 'new-password',
	9	+ templateUrl: 'app/login/new-password.html',
	10	+ providers: [provide('passwordService', { useClass: PasswordService })]
	11	+})
	12	+@Inject(PasswordService, "$state", "$stateParams", NotificationService)
	13	+export class PasswordComponent {
	14	+
	15	+ code: string;
	16	+ password: string;
	17	+ passwordConfirmation: string;
	18	+
	19	+ constructor(
	20	+ public passwordService: PasswordService,
	21	+ private $state: ng.ui.IStateService,
	22	+ private $stateParams: ng.ui.IStateParamsService,
	23	+ private notificationService: NotificationService) {
	24	+
	25	+ this.code = this.$stateParams['code'];
	26	+ }
	27	+
	28	+ sendNewPassword() {
	29	+ this.passwordService.new_password(this.code, this.password, this.passwordConfirmation).then((response) => {
	30	+ this.notificationService.success({ title: "newPasswd.success.title", message: "newPasswd.success.message", timer: 5000 });
	31	+ this.$state.transitionTo('main.environment');
	32	+ }).catch((response) => {
	33	+ this.notificationService.error({ title: "newPasswd.failed.title", message: "newPasswd.failed.message" });
	34	+ });
	35	+ }
	36	+}
@@ -0,0 +1,31 @@		@@ -0,0 +1,31 @@
	1	+<div class="new-password-page col-xs-4 col-xs-offset-4">
	2	+ <h1>{{"new_password.welcomeMessageTitle" \| translate }}</h1>
	3	+
	4	+ <form name="newPasswdForm">
	5	+ <div class="form-group" ng-class="{'has-error': newPasswdForm.password.$invalid && newPasswdForm.password.$touched }">
	6	+ <div class="input-group">
	7	+ <span class="input-group-addon"><i class="fa fa-lock"></i></span>
	8	+ <input type="password" class="form-control" id="password" name="password" placeholder="{{'account.register.passwordLabel' \| translate }}" ng-model="vm.password" required minlength="4">
	9	+ </div>
	10	+ <div class="help-block" ng-show="newPasswdForm.password.$touched" ng-messages="newPasswdForm.password.$error">
	11	+ <ul class="list-unstyled">
	12	+ <li ng-messages-include="app/shared/messages/form-errors.html"></li>
	13	+ </ul>
	14	+ </div>
	15	+ </div>
	16	+
	17	+ <div class="form-group" ng-class="{'has-error': newPasswdForm.passwordConfirm.$invalid && newPasswdForm.passwordConfirm.$touched }">
	18	+ <div class="input-group">
	19	+ <span class="input-group-addon"><i class="fa fa-unlock-alt"></i></span>
	20	+ <input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" match-password="password" placeholder="{{'account.register.passwordConfirmationLabel' \| translate}}" ng-model="vm.passwordConfirmation" required>
	21	+ </div>
	22	+ <div class="help-block" ng-show="newPasswdForm.passwordConfirm.$touched" ng-messages="newPasswdForm.passwordConfirm.$error">
	23	+ <ul class="list-unstyled">
	24	+ <li ng-messages-include="app/shared/messages/form-errors.html"></li>
	25	+ <li ng-message="passwordMatch" translate="messages.invalid.passwordMatch"></li>
	26	+ </ul>
	27	+ </div>
	28	+ </div>
	29	+ <button type="submit" class="btn btn-default btn-block" ng-click="vm.sendNewPassword()" ng-disabled="newPasswdForm.$invalid">{{"newPasswdForm.submit" \| translate}}</button>
	30	+ </form>
	31	+</div>
1	-import {Inject, Input, Component} from "ng-forward";
2	-	1	+import { Inject, Input, Component, provide } from "ng-forward";
		2	+import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service";
		3	+import { ProfileImageEditorComponent } from "./profile-image-editor.component";
3		4
4	/**	5	/**
5	* @ngdoc controller	6	* @ngdoc controller
	@@ -10,14 +11,16 @@ import {Inject, Input, Component} from "ng-forward";		@@ -10,14 +11,16 @@ import {Inject, Input, Component} from "ng-forward";
10	@Component({	11	@Component({
11	selector: "noosfero-profile-image",	12	selector: "noosfero-profile-image",
12	templateUrl: 'app/profile/image/image.html',	13	templateUrl: 'app/profile/image/image.html',
		14	+ providers: [provide('personService', { useClass: PersonService })]
13	})	15	})
		16	+@Inject(PersonService, "$uibModal", "$scope")
14	export class ProfileImageComponent {	17	export class ProfileImageComponent {
15		18
16	/**	19	/**
17	* @ngdoc property	20	* @ngdoc property
18	* @name profile	21	* @name profile
19	* @propertyOf components.noosfero.profile-image.ProfileImage	22	* @propertyOf components.noosfero.profile-image.ProfileImage
20	- * @description	23	+ * @description
21	* The Noosfero {@link models.Profile} holding the image.	24	* The Noosfero {@link models.Profile} holding the image.
22	*/	25	*/
23	@Input() profile: noosfero.Profile;	26	@Input() profile: noosfero.Profile;
	@@ -30,12 +33,53 @@ export class ProfileImageComponent {		@@ -30,12 +33,53 @@ export class ProfileImageComponent {
30	*/	33	*/
31	defaultIcon: string;	34	defaultIcon: string;
32		35
		36	+ @Input() editable: boolean;
		37	+
		38	+ @Input() editClass: string;
		39	+
		40	+ picFile: any;
		41	+ croppedDataUrl: any;
		42	+ modalInstance: any;
		43	+
		44	+ constructor(private personService: PersonService, private $uibModal: ng.ui.bootstrap.IModalService, private $scope: ng.IScope) {
		45	+ }
		46	+
		47	+ fileSelected(file: any, errFiles: any) {
		48	+ if (file) {
		49	+ this.picFile = file;
		50	+ this.modalInstance = this.$uibModal.open({
		51	+ templateUrl: 'app/profile/image/profile-image-editor.html',
		52	+ controller: ProfileImageEditorComponent,
		53	+ controllerAs: 'ctrl',
		54	+ scope: this.$scope,
		55	+ bindToController: true,
		56	+ backdrop: 'static',
		57	+ resolve: {
		58	+ picFile: this.picFile,
		59	+ profile: this.profile,
		60	+ personService: this.personService
		61	+ }
		62	+ });
		63	+ }
		64	+ }
		65	+
		66	+ private _showCamera: boolean = false;
		67	+
		68	+ showChange(show: boolean) {
		69	+ this._showCamera = show;
		70	+ }
		71	+
		72	+ showCamera() {
		73	+ return this._showCamera;
		74	+ }
		75	+
		76	+
33	/**	77	/**
34	* @ngdoc method	78	* @ngdoc method
35	* @name ngOnInit	79	* @name ngOnInit
36	* @methodOf components.noosfero.profile-image.ProfileImage	80	* @methodOf components.noosfero.profile-image.ProfileImage
37	- * @description
38	- * Initializes the icon names to their corresponding values depending on the profile type passed to the controller	81	+ * @description
		82	+ * Initializes the icon names to their corresponding values depending on the profile type passed to the controller
39	*/	83	*/
40	ngOnInit() {	84	ngOnInit() {
41	this.defaultIcon = 'fa-users';	85	this.defaultIcon = 'fa-users';
	@@ -43,5 +87,5 @@ export class ProfileImageComponent {		@@ -43,5 +87,5 @@ export class ProfileImageComponent {
43	this.defaultIcon = 'fa-user';	87	this.defaultIcon = 'fa-user';
44	}	88	}
45	}	89	}
46	-}
47		90
		91	+}
1	-<span class="profile-image-wrap" title="{{ctrl.profile.name}}">
2	- <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
3	- <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
4	-</span>	1	+<div id="profile-image-container" style="">
		2	+ <div class="profile-image-wrap" title="{{ctrl.profile.name}}" ng-mouseenter="ctrl.showChange(true)" ng-mouseleave="ctrl.showChange(false)">
		3	+ <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
		4	+ <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
		5	+ <div ng-if="ctrl.editable" class="upload-camera-container">
		6	+ <i id="camera" class="fa fa-camera upload-camera" aria-hidden="true"></i>
		7	+ </div>
		8	+ <div ng-if="ctrl.editable" id="select-photo-container" name="select-photo-container" class="select-photo-container container" ng-class="ctrl.editClass">
		9	+ <a id="upload-container" class="upload-container" href="#" rel="dialog" role="button">
		10	+ <!-- The upload button hidden behind the camera -->
		11	+ <div class="upload-button" ngf-select="ctrl.fileSelected($file)"
		12	+ ngf-pattern="'image/'" ngf-accept="'image/'"
		13	+ ngf-max-size="20MB" ngf-resize="{width: 100, height: 100}"
		14	+ data-toggle="modal" data-target=".crop-dialog">
		15	+ {{"profile.image.upload" \| translate}}
		16	+ </div>
		17	+ </a>
		18	+ </div>
		19	+
		20	+ </div>
		21	+</div>