Victor Costa · Caio Almeida · Ábner Oliveira · Ábner Oliveira · Ábner Oliveira · Ábner Oliveira
Showing 81 changed files Show diff stats
bower.json
src/app/account/index.ts
src/app/account/register-component.html
src/app/account/register-terms.html
src/app/account/register.component.spec.ts
src/app/account/register.component.ts
src/app/account/register.controller.ts
src/app/account/register.html
src/app/account/scss/register.scss
src/app/admin/layout-edit/designModeToggler.component.spec.ts
src/app/admin/layout-edit/designModeToggler.component.ts
src/app/admin/layout-edit/designModeToggler.html
src/app/admin/layout-edit/designModeToggler.scss
src/app/index.scss
src/app/index.ts
src/app/known-events.ts
src/app/layout/blocks/block.component.ts
src/app/layout/blocks/communities/communities-block.html
src/app/layout/blocks/communities/communities-block.scss
src/app/layout/blocks/container-block-plugin-container-block/container-block-plugin-container-block.component.ts
@@ -38,8 +38,9 @@
     "angular-bind-html-compile": "^1.2.1",
     "angular-click-outside": "^2.7.1",
     "ng-ckeditor": "^0.2.1",
-    "angular-bootstrap-toggle-switch": "^0.5.6",
-    "angular-tag-cloud": "^0.3.0"
+    "angular-tag-cloud": "^0.3.0",
+    "angular-ui-switch": "^0.1.1",
+    "angular-password": "^1.0.1"
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0"
@@ -0,0 +1 @@
+export * from "./register.component";
@@ -0,0 +1,77 @@
+<div class="register-page">
+  <div class="welcome-message">
+    <h1>{{"account.register.welcomeMessageTitle" | translate }}</h1>
+    <div class="environment-signup-intro" ng-bind-html="ctrl.environment.signup_intro"></div>
+  </div>
+  <form name="signupForm">
+    <div class="row">
+      <div class="col-md-12 register-field">
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-male"></i><i class="fa fa-female"></i></span>
+          <input type="text" class="form-control" id="name" name="fullName" placeholder="{{'account.register.fullNameLabel' | translate }}" ng-model="ctrl.account.name">
+        </div>
+      </div>
+
+      <div class="form-group col-md-12 register-field" ng-class="ctrl.isInvalid(signupForm.username)">
+        <div class="input-group">
+          <span class="input-group-addon" style="font-weight: bold;"><i class="fa fa-globe"></i>&nbsp;{{ ctrl.environment.host }}</span>
+          <input type="text" id="username" name="username" class="form-control" placeholder="{{'account.register.usernameLabel' | translate }}" ng-model="ctrl.account.login" required>
+        </div>
+        <div class="help-block" ng-show="signupForm.username.$touched" ng-messages="signupForm.username.$error">
+          <ul class="list-unstyled">
+            <li ng-messages-include="languages/messages.html"></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="form-group col-md-12 register-field" ng-class="ctrl.isInvalid(signupForm.email)">
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
+          <input type="email" class="form-control" id="email" name="email" placeholder="{{'account.register.emailLabel' | translate }}" ng-model="ctrl.account.email" required>
+        </div>
+        <div class="help-block" ng-show="signupForm.email.$touched" ng-messages="signupForm.email.$error">
+          <ul class="list-unstyled">
+            <li ng-messages-include="languages/messages.html"></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="form-group col-md-6 register-field" ng-class="ctrl.isInvalid(signupForm.password)">
+        <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="ctrl.account.password" required>
+        </div>
+        <div class="help-block" ng-show="signupForm.password.$touched" ng-messages="signupForm.password.$error">
+          <ul class="list-unstyled">
+            <li ng-messages-include="languages/messages.html"></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="form-group col-md-6 register-field" ng-class="ctrl.isInvalid(signupForm.passwordConfirm)">
+        <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="ctrl.account.passwordConfirmation" required>
+        </div>
+        <div class="help-block" ng-show="signupForm.passwordConfirm.$touched" ng-messages="signupForm.passwordConfirm.$error">
+          <ul class="list-unstyled">
+            <li ng-messages-include="languages/messages.html"></li>
+            <li ng-message="passwordMatch" translate="messages.invalid.passwordMatch"></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="col-md-12">
+        <p class="terms-info">{{"account.register.accountCreatingMessage" | translate}} <a (click)="ctrl.openTerms()" href="#">{{"account.register.termsOfUseMessage" | translate}}</a>.</p>
+      </div>
+
+      <div class="col-md-12">
+        <button type="submit" class="btn btn-default" ng-disabled="signupForm.$invalid" ng-click="ctrl.signup()">{{"account.register.signupMessage" | translate}}</button>
+      </div>
+
+    </div>
+  </form>
+
+  <p class="already-registered-message">{{"account.register.haveAccountMessage" | translate}}</p>
+
+</div>
@@ -0,0 +1,7 @@
+<div class="modal-header">
+  <h3 class="modal-title">Register terms</h3>
+</div>
+<div class="modal-body modal-body-overflow" ng-bind-html="ctrl.environment.terms_of_use"></div>
+<div class="modal-footer">
+    <button class="btn btn-primary" type="button" (click)="vm.closeTerms()">OK</button>
+</div>
@@ -0,0 +1,52 @@
+import { ComponentTestHelper, createClass } from "../../spec/component-test-helper";
+import * as helpers from "../../spec/helpers";
+import { RegisterComponent } from "./register.component";
+// import {RegisterService} from "../../lib/ng-noosfero-api/http/register.service"
+
+
+describe("Register Component", () => {
+    const htmlTemplate: string = '<noosfero-register></noosfero-register>';
+
+    let helper: ComponentTestHelper<RegisterComponent>;
+    let registerService = helpers.mocks.registerService;
+    let stateService = jasmine.createSpyObj("$state", ["transitionTo"]);
+    let notificationService = helpers.mocks.notificationService;
+    notificationService.success = jasmine.createSpy('success');
+    notificationService.error = jasmine.createSpy('error');
+
+
+    let account: any = {
+        id: 1,
+        login: 'test',
+        email: 'test@email.com',
+        password: 'xxx',
+        passwordConfirmation: 'xxx'
+    };
+
+    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: [RegisterComponent],
+            providers: [
+                helpers.createProviderToValue('$state', stateService),
+                helpers.createProviderToValue('$uibModal', helpers.mocks.$modal),
+                helpers.createProviderToValue('RegisterService', registerService),
+                helpers.createProviderToValue('NotificationService', notificationService),
+                helpers.createProviderToValue('EnvironmentService', helpers.mocks.environmentService)
+            ]
+        });
+        helper = new ComponentTestHelper<RegisterComponent>(cls, done);
+    });
+
+    it('register page was rendered', () => {
+        expect(helper.debugElement.query('div.register-page').length).toEqual(1);
+    });
+
+});
@@ -0,0 +1,66 @@
+import { Inject, Input, Component, Output, EventEmitter, provide } from 'ng-forward';
+import { RegisterService } from "./../../lib/ng-noosfero-api/http/register.service";
+import { NotificationService } from "./../shared/services/notification.service";
+import { EnvironmentService } from "../../lib/ng-noosfero-api/http/environment.service";
+import { RegisterController } from "./register.controller";
+import { IModalComponent } from "../shared/components/interfaces";
+
+@Component({
+    selector: 'noosfero-register',
+    templateUrl: 'app/account/register-component.html',
+    providers: [
+        provide('registerService', { useClass: RegisterService })
+    ]
+})
+
+@Inject('$state', '$uibModal', '$scope', RegisterService, NotificationService, EnvironmentService)
+export class RegisterComponent {
+    @Input() account: any;
+    environment: noosfero.Environment;
+
+    modalInstance: ng.ui.bootstrap.IModalServiceInstance;
+
+    constructor(
+        private $state: ng.ui.IStateService,
+        private $uibModal: ng.ui.bootstrap.IModalService,
+        private $scope: ng.IScope,
+        public registerService: RegisterService,
+        private notificationService: NotificationService,
+        private environmentService: EnvironmentService
+    ) {
+        this.account = {};
+        this.environment = environmentService.getCurrentEnvironment();
+    }
+
+    signup() {
+        if (this.account.password === this.account.passwordConfirmation) {
+            this.registerService.createAccount(this.account).then((response) => {
+
+                if (response.status === 201) {
+                    this.$state.transitionTo('main.environment');
+                    this.notificationService.success({ title: "account.register.success.title", message: "account.register.success.message" });
+                } else {
+                    throw new Error('Invalid attributes');
+                }
+            });
+        } else {
+            this.notificationService.error({ message: "account.register.passwordConfirmation.failed" });
+        }
+    }
+
+    isInvalid(field: any): any {
+        return { 'has-error': field['$touched'] && field['$invalid'] };
+    }
+
+    openTerms() {
+
+        this.modalInstance = this.$uibModal.open({
+            templateUrl: 'app/account/register-terms.html',
+            size: 'lg',
+            controller: RegisterController,
+            controllerAs: 'vm',
+            bindToController: true,
+            scope: this.$scope
+        });
+    }
+}
@@ -0,0 +1,17 @@
+import { Input } from "ng-forward";
+import { IModalComponent } from "../shared/components/interfaces";
+
+export class RegisterController {
+
+    static $inject = ["$log", "$stateParams", "$scope"];
+    ctrl: IModalComponent;
+
+    constructor(
+        private $log: ng.ILogService,
+        private $stateParams: any
+    ) { }
+
+    closeTerms() {
+        this.ctrl.modalInstance.dismiss('ok');
+    }
+}
@@ -0,0 +1,10 @@
+<div class="row">
+  <div class="col-md-3"></div>
+
+  <!-- component at center of page -->
+  <div class="col-md-6">
+    <noosfero-register></noosfero-register>
+  </div>
+
+  <div class="col-md-3"></div>
+</div>
@@ -0,0 +1,44 @@
+.modal .modal-body-overflow {
+    max-height: 420px;
+    overflow-y: auto;
+}
+
+.register-page button {
+    width: 100%;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+
+.register-page .light-text {
+    color: #BBB;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    font-weight: 600;
+}
+
+.register-page .terms-info {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    font-weight: bold;
+}
+
+.register-page .welcome-message {
+    text-align: center;
+}
+
+.register-page .already-registered-message {
+    margin-top: 60px;
+    text-align: center;
+}
+
+.register-page input {
+    height: 40px;
+}
+
+.register-page .register-field {
+    margin-bottom: 25px;
+}
+
+.register-page input:focus {
+    border: 2px solid #bbb;
+}
 import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
 import * as helpers from '../../../spec/helpers';
 import {DesignModeTogglerComponent} from './designModeToggler.component';
 import {DesignModeService} from './designMode.service';
 import {INoosferoLocalStorage} from "./../../shared/models/interfaces";
  
 describe('DesignModeToggler Component', () => {
-    const htmlTemplate: string = '<noosfero-design-toggler></noosfero-design-toggler>';
+    const htmlTemplate: string = '<design-toggler></design-toggler>';
  
     let helper: ComponentTestHelper<DesignModeTogglerComponent>;
     beforeEach(() => {
         angular.mock.module('templates');
         angular.mock.module('ngSanitize');
-        angular.mock.module('toggle-switch');
+        angular.mock.module('uiSwitch');
     });
  
     let designModeService: DesignModeService;
@@ -30,12 +31,12 @@ describe(&#39;DesignModeToggler Component&#39;, () =&gt; {
     });
  
     it('changes css classes representing the switch is on or off', () => {
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeTruthy();
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeFalsy();
+        let switchEl: INgForwardJQuery = helper.debugElement.query('span.switch');
+
+        expect(switchEl.hasClass('checked')).toBeFalsy();
         helper.component.inDesignMode = true;
         helper.detectChanges();
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeTruthy();
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeFalsy();
+        expect(switchEl.hasClass('checked')).toBeTruthy();
     });
  
     it('emits event with value "true" when changing inDesignMode to On', (done) => {
@@ -60,4 +61,4 @@ describe(&#39;DesignModeToggler Component&#39;, () =&gt; {
         helper.component.inDesignMode = false;
         helper.detectChanges();
     });
-});
 \ No newline at end of file
+});
-import {Component, Inject} from 'ng-forward';
+import {Component, Inject, Input} from 'ng-forward';
 import {DesignModeService} from './designMode.service';
 import {AuthService, AuthEvents} from '../../login';
  
 @Component({
-    selector: 'noosfero-design-toggler',
+    selector: 'design-toggler',
     templateUrl: 'app/admin/layout-edit/designModeToggler.html'
 })
-@Inject(DesignModeService, AuthService)
+@Inject(DesignModeService, AuthService, '$sce')
 export class DesignModeTogglerComponent {
  
-    icon: string = "&nbsp;<i class='glyphicon glyphicon-wrench'></i>&nbsp;";
+    private _inDesignMode: boolean = false;
  
-    constructor(private designModeService: DesignModeService, private authService: AuthService) {
+    constructor(private designModeService: DesignModeService, private authService: AuthService, private $sce: ng.ISCEService) {
         this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
             this.designModeService.destroy();
         });
     }
  
-    private _inDesignMode: boolean = false;
-
     get inDesignMode(): boolean {
         return this.designModeService.isInDesignMode();
     };
-<toggle-switch
-    html="true"
-    ng-model="ctrl.inDesignMode"
-    on-label="{{'designMode.toggle.ON' | translate}}"
-    off-label="{{'designMode.toggle.OFF' | translate}}"
-    class="switch-small"
-    knob-label="{{ ctrl.icon + ('designMode.label' | translate) }}">
-</toggle-switch>
 \ No newline at end of file
+<switch id="enabled" name="enabled" ng-model="ctrl.inDesignMode" on="ON" off="OFF" class="green"></switch>
@@ -0,0 +1,55 @@
+$off-text: #949494;
+$off-color: #EFEFEF;
+$blue-color: #36B4F6;
+$red-color: #DF3B3A;
+
+body.noosfero-design-on {
+
+    div.content-wrapper {
+        opacity: 0.5;
+    }
+}
+
+.switch {
+  @include not-select();
+  background-color: $off-color;
+
+  &[on][off] {
+    width: 60px;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.checked small {
+      left: initial;
+      right: 0px;
+  }
+
+  &.blue.checked {
+    background: $blue-color;
+    border-color: $blue-color;
+  }
+
+  &.red.checked {
+    background: $red-color;
+    border-color: $red-color;
+  }
+
+  %switch-label {
+    font-weight: bold;
+  }
+
+  .on {
+    @extend %switch-label;
+  }
+
+  .off {
+      @extend %switch-label;
+      right: 2px;
+      top: 25%;
+      color: $off-text;
+      text-align: center;
+  }
+}
@@ -39,6 +39,12 @@ $break-sm-min: 992px;
 $break-xxs-max: ($break-xxs-min - 1);
 $break-sm-max: ($break-sm-min - 1);
 $break-xs-max: ($break-xs-min - 1);
+// TODO: improve this method to collect all the paddings with a single var 
+$wrapper-padding: 15px 15px 35px 15px;
+$wrapper-padding-top: 15px;
+$wrapper-padding-right: 15px;
+$wrapper-padding-bottom: 35px;
+$wrapper-padding-left: 15px;
  
  
 @import "../../bower_components/bootswatch/flatly/_variables.scss";
-import {bootstrap} from "ng-forward";
+import {bootstrap, provide} from "ng-forward";
 import {noosferoModuleConfig} from "./index.config";
 import {noosferoAngularRunBlock} from "./index.run";
 import {MainComponent} from "./main/main.component";
@@ -22,4 +22,13 @@ angular.module(&#39;noosfero.init&#39;, [&#39;noosfero.templates.app&#39;, &#39;noosfero.templates.p
     run(noosferoAngularRunBlock).
     constant("moment", moment).
     constant("AuthEvents", AuthEvents);
-bootstrap(MainComponent);
+
+
+import { EVENTS_HUB_KNOW_EVENT_NAMES } from './shared/services/events-hub.service';
+import { NoosferoKnownEvents } from './known-events';
+
+bootstrap(MainComponent,
+    [
+        provide(EVENTS_HUB_KNOW_EVENT_NAMES, { useClass: NoosferoKnownEvents })
+    ]
+);
@@ -0,0 +1,14 @@
+import { EventsHubKnownEventNames } from './shared/services/events-hub.service';
+
+export class NoosferoKnownEvents implements EventsHubKnownEventNames  {
+    IMAGE_PROFILE_UPDATED: string = 'IMAGE_PROFILE_UPDATED';
+    PROFILE_INFO_UPDATED: string = 'PROFILE_INFO_UPDATED';
+    ARTICLE_UPDATED: string = 'ARTICLE_UPDATED';
+
+    constructor() {
+    }
+
+    getNames() {
+        return Object.getOwnPropertyNames(this);
+    }
+}
 \ No newline at end of file
@@ -18,7 +18,7 @@ export class BlockComponent {
     @Input() block: noosfero.Block;
     @Input() owner: noosfero.Profile | noosfero.Environment;
  
-    private modalInstance: any = null;
+    private modalInstance: ng.ui.bootstrap.IModalServiceInstance;
     originalBlock: noosfero.Block;
  
     currentUser: noosfero.User;
@@ -26,7 +26,8 @@ export class BlockComponent {
     editionMode = false;
     designMode = false;
  
-    constructor(private $uibModal: any,
+    constructor(
+        private $uibModal: ng.ui.bootstrap.IModalService,
         private $scope: ng.IScope,
         private $state: ng.ui.IStateService,
         private $rootScope: ng.IRootScopeService,
-<div class="communities-block">
-  <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile">
+<div ng-repeat="profile in ctrl.profiles" class="col-xs-2 col-md-4 block-item"> 
+  <a ui-sref="main.profile.home({profile: profile.identifier})">
     <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
   </a>
+  <p>{{profile.name}}</p>
 </div>
-.communities-block {
-  .profile {
+.communitiesblock {
+  .panel-body {
+    text-align: center;
     margin: 10px;
-    img, i.profile-image {
-      width: 60px;
-    }
     img {
       display: inline-block;
       vertical-align: top;
     }
     i.profile-image {
         text-align: center;
-        font-size: 4.5em;
+        font-size: 7rem;
+    }
+    p {
+      overflow: hidden;
+      font-size: 1rem;
+    }
+    .block-item {
+      padding: 0px;
     }
   }
 }
@@ -0,0 +1,27 @@
+import { Input, Inject, Component } from 'ng-forward';
+import {BlockService} from "../../../../lib/ng-noosfero-api/http/block.service";
+import {Arrays} from "./../../../../lib/util/arrays";
+
+@Component({
+    selector: 'noosfero-container-block-plugin-container-block',
+    templateUrl: 'app/layout/blocks/container-block-plugin-container-block/container-block-plugin-container-block.html'
+})
+@Inject(BlockService, "$state")
+export class ContainerBlockPluginContainerBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    profile: any;
+    blocks: any;
+
+    constructor(private blockService: BlockService, private $state: any) { }
+  
+    ngOnInit() {
+        this.profile = this.owner;
+        this.blocks = [];
+        this.blockService.getApiContent(this.block).then((content: any) => {
+            this.blocks = content.blocks;
+        });
+    }
+}
@@ -0,0 +1,6 @@
+<div>
+  <noosfero-block ng-repeat="block in ctrl.blocks | orderBy: 'position'" 
+    [block]="block" [owner]="ctrl.owner">
+  </noosfero-block>
+</div>
+
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./container-block-plugin-container-block.component";
@@ -15,11 +15,18 @@ describe(&quot;Components&quot;, () =&gt; {
  
         beforeEach(angular.mock.module("templates"));
  
+        let profileService = jasmine.createSpyObj("ProfileService", ["isMember", "addMember", "removeMember"]);
+        profileService.isMember = jasmine.createSpy("isMember").and.returnValue(Promise.resolve(false));
+
         @Component({
             selector: 'test-container-component',
             template: htmlTemplate,
             directives: [ProfileImageBlockComponent],
-            providers: helpers.provideFilters("translateFilter")
+            providers: [
+                helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
+                helpers.createProviderToValue('ProfileService', profileService),
+                helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
+            ].concat(helpers.provideFilters("translateFilter"))
         })
         class BlockContainerComponent {
             block = { type: 'Block' };
@@ -42,5 +49,42 @@ 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);
+                done();
+            });
+        });
+
+        it("display button to leave community", (done: Function) => {
+            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let elProfile = fixture.debugElement.componentViewChildren[0];
+                elProfile.componentInstance['isMember'] = true;
+                fixture.detectChanges();
+                expect(elProfile.query('.actions .leave').length).toEqual(1);
+                done();
+            });
+        });
+
+        it("join community", (done: Function) => {
+            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let elProfile = fixture.debugElement.componentViewChildren[0];
+                profileService.addMember = jasmine.createSpy("addMember").and.returnValue(Promise.resolve({ data: {} }));
+                elProfile.componentInstance.join();
+                expect(profileService.addMember).toHaveBeenCalled();
+                done();
+            });
+        });
+
+        it("leave community", (done: Function) => {
+            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let elProfile = fixture.debugElement.componentViewChildren[0];
+                profileService.removeMember = jasmine.createSpy("removeMember").and.returnValue(Promise.resolve({ data: {} }));
+                elProfile.componentInstance.leave();
+                expect(profileService.removeMember).toHaveBeenCalled();
+                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";
  
 @Component({
     selector: "noosfero-profile-image-block",
     templateUrl: 'app/layout/blocks/profile-image/profile-image-block.html',
     directives: [ProfileImageComponent]
 })
+@Inject(ProfileService, SessionService, NotificationService)
 export class ProfileImageBlockComponent {
  
     @Input() block: noosfero.Block;
     @Input() owner: noosfero.Profile;
  
+    private isMember: boolean;
+
+    constructor(private profileService: ProfileService, private session: SessionService, private notificationService: NotificationService) {
+    }
+
+    ngOnInit() {
+        this.loadMembership();
+    }
+
+    loadMembership() {
+        let person = this.session.currentUser() ? this.session.currentUser().person : null;
+        this.profileService.isMember(person, this.owner).then((val: boolean) => {
+            this.isMember = val;
+        });
+    }
+
+    join() {
+        let person = this.session.currentUser() ? this.session.currentUser().person : null;
+        this.profileService.addMember(person, this.owner).then((result: any) => {
+            if (result.data.pending) {
+                this.notificationService.success({ title: "blocks.profile_image.join.moderation.title", message: "blocks.profile_image.join.moderation.message" });
+            } else {
+                this.loadMembership();
+            }
+        });
+    }
+
+    leave() {
+        let person = this.session.currentUser() ? this.session.currentUser().person : null;
+        this.profileService.removeMember(person, this.owner).then(() => {
+            this.loadMembership();
+        });
+    }
 }
@@ -3,4 +3,8 @@
     <noosfero-profile-image [profile]="ctrl.owner"></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>
 </div>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./profile-images-plugin-profile-images-block.component";
@@ -0,0 +1,65 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+import {ProfileImagesPluginProfileImagesBlockComponent} from './profile-images-plugin-profile-images-block.component';
+import * as helpers from "./../../../../spec/helpers";
+
+const htmlTemplate: string = '<noosfero-profile-images-plugin-profile-images-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-profile-images-plugin-profile-images-block>';
+
+const tcb = new TestComponentBuilder();
+
+const images = [
+    {
+        title: 'Test',
+        id: 1,
+        view_url: { host: 'localhost', page: ['image'] },
+        path: '/articles/0000/0001/test.png'
+    }
+];
+
+describe("Components", () => {
+    describe("Profile Images Block Component", () => {
+
+        let settingsObj = {};
+        let person = <noosfero.Person>{ name: "Person" };
+        let mockedService = {
+            getApiContent: (block: noosfero.Block): any => {
+                return Promise.resolve({ images: images, headers: (name: string) => { return name; } });
+            }
+        };
+        beforeEach(angular.mock.module("templates"));
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+
+
+        function getProviders() {
+            return [
+                new Provider('$state', { useValue: state }),
+                new Provider('BlockService', {
+                    useValue: mockedService
+                })
+            ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
+        }
+        let componentClass: any = null;
+
+        function getComponent() {
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ProfileImagesPluginProfileImagesBlockComponent], providers: getProviders() })
+            class BlockContainerComponent {
+                block = { type: 'Block', settings: settingsObj };
+                owner = person;
+                constructor() {
+                }
+            }
+            return BlockContainerComponent;
+        }
+
+        it("get images from the block service", done => {
+            tcb.createAsync(getComponent()).then(fixture => {
+                let ProfileImagesPluginProfileImagesBlock: ProfileImagesPluginProfileImagesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(ProfileImagesPluginProfileImagesBlock.images).toEqual(images);
+                done();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,39 @@
+import {Component, Inject, Input} from "ng-forward";
+import {BlockService} from "./../../../../lib/ng-noosfero-api/http/block.service";
+import {Arrays} from "./../../../../lib/util/arrays";
+
+@Component({
+    selector: "noosfero-profile-images-plugin-profile-images-block",
+    templateUrl: 'app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.html'
+})
+@Inject(BlockService, "$state")
+export class ProfileImagesPluginProfileImagesBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    profile: any;
+    images: any;
+
+    constructor(private blockService: BlockService, private $state: any) { }
+
+    urlFor(params: any) {
+        let url = '//' + params.host;
+        if (params.port) {
+              url += ':' + params.port;
+        }
+        url += '/' + params.profile + '/';
+        if (params.page) {
+            url += params.page.join('/');
+        }
+        return url;
+    }
+
+    ngOnInit() {
+        this.profile = this.owner;
+        this.images = [];
+        this.blockService.getApiContent(this.block).then((content: any) => {
+            this.images = content.images;
+        });
+    }
+}
@@ -0,0 +1,8 @@
+<ul class="profile-images-plugin-profile-images">
+  <li ng-repeat="image in ctrl.images">
+    <a ng-href="{{ctrl.urlFor(image.view_url)}}" ng-style="{'background-image': 'url(' + image.path + ')'}">
+      <span>{{image.title}}</span>
+    </a>
+  </li>
+</ul>
+<br style="clear: both;" />
@@ -0,0 +1,29 @@
+.profile-images-plugin-profile-images {
+  padding: 0;
+  margin: 0;
+  display: block;
+  width: 100%;
+
+  li {
+    list-style: none;
+  }
+
+  a {
+    display: block;
+    width: 53px;
+    height: 53px;
+    float: left;
+    padding: 1px;
+    border: 1px solid #ccc;
+    margin: 4px;
+    background-size: cover;
+
+    &:hover {
+      border: 1px solid #000;
+    }
+
+    span {
+      display: none;
+    }
+  }  
+}
@@ -0,0 +1,3 @@
+<img ng-src="{{activity.params.first_image}}" ng-attr-alt="{{activity.params.name}}" class="event-image" />
+<p class="event-description"><b>{{activity.params.name}}</b><br />{{activity.params.lead | stripTags}}</p>
+<br style="clear: both;" />
@@ -18,7 +18,12 @@ export class RecentActivitiesPluginActivitiesBlockComponent {
     constructor(private blockService: BlockService, private $state: any) { }
  
     getActivityTemplate(activity: any) {
-        return 'app/layout/blocks/recent-activities-plugin-activities/activities/' + activity.verb + '.html';
+        if (activity.label === 'events') {
+          return 'app/layout/blocks/recent-activities-plugin-activities/activities/event.html';
+        }
+        else {
+          return 'app/layout/blocks/recent-activities-plugin-activities/activities/' + activity.verb + '.html';
+        }
     }
  
     urlFor(params: any) {
 <div class="deckgrid recent-activities-block">
   <div ng-repeat="activity in ctrl.activities" class="a-card panel media">
+
+    <div class="subheader">
+      <p ng-if="activity.label === 'events'">
+      {{ 'activities.event.description' | translate }} <b>{{ activity.start_date | date:longDate }}</b> {{ 'time.at' | translate }} {{ activity.start_date | date:'HH:mm' }} - <a ng-href="/{{activity.user.identifier}}">{{activity.user.name}}</a> <span class="activity-label">{{activity.label}}</span>
+      </p>
+
+      <p ng-if="activity.label !== 'events'">
+      {{ 'date.on' | translate }} <b>{{ activity.created_at | date:longDate }}</b> {{ 'time.at' | translate }} {{ activity.created_at | date:'HH:mm' }} - <a ng-href="/{{activity.user.identifier}}">{{activity.user.name}}</a> <span class="activity-label">{{activity.label}}</span>
+      </p>
+    </div>
+
     <div class="header media-body">
       <h5 class="title media-heading">
-        <a ng-href="/{{activity.user.identifier}}">{{activity.user.name}}</a>&nbsp;<ng-include src="ctrl.getActivityTemplate(activity)"></ng-include>
+        <ng-include src="ctrl.getActivityTemplate(activity)"></ng-include>
       </h5>
     </div>
-    <div class="subheader">
-      <span class="time">
-        <i class="fa fa-clock-o"></i> <span am-time-ago="activity.created_at | dateFormat"></span>
-      </span>
-    </div>
+
+    <hr />
   </div>
 </div>
@@ -20,4 +20,53 @@
       display: none;
     }
   }
+
+  .panel {
+    margin-bottom: 15px;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  h5 {
+    text-transform: capitalize;
+  }
+
+  .subheader {
+    p {
+      margin: 2px 0;
+      font-size: 11px;
+    }
+  }
+
+  hr {
+    border: 0;
+    height: 1px;
+    background: #ccc;
+    margin: 0;
+    margin-top: 15px;
+  }
+
+  .activity-label {
+    @include border-radius(2px);
+    font-size: 11px;
+    text-transform: capitalize;
+    background: #333;
+    color: #fff;
+    padding: 2px;
+    margin-left: 5px;
+    display: inline-block;
+  }
+
+  .event-image {
+    width: 15%;
+    height: auto;
+    float: left;
+  }
+
+  .event-description {
+    width: 83%;
+    margin: 2px 0 0 2px;
+    float: left;
+    display: block;
+  }
 }
@@ -11,6 +11,8 @@ export class DisplayBoxes {
  
         if (layout === "rightbar") {
           valid_boxes = this.visible_on_right_bar();
+        }else if(layout === "topleft") {
+          valid_boxes = this.visible_on_top_right_bar();
         }else {
           valid_boxes = this.visible_on_default();
         }
@@ -31,5 +33,9 @@ export class DisplayBoxes {
         return [1, 3];
     }
  
+    private visible_on_top_right_bar() {
+        return [1, 2, 3];
+    }
+
 }
  
@@ -6,6 +6,8 @@ export class SetBoxLayout {
     transform(pos: number, layout: string) {
         if (layout === "rightbar") {
           return this.right_bar(pos);
+        }else if(layout === "topleft") {
+          return this.top_right_bar(pos); 
         }else {
           return this.default(pos);
         }
@@ -29,4 +31,14 @@ export class SetBoxLayout {
         }
     }
  
+    private top_right_bar(position: number) {
+        if (position === 1) {
+          return "col-sm-12 col-md-8";
+        }else if(position == 2) {
+          return "col-sm-12 col-md-4";
+        }else {
+          return "col-sm-12 col-md-12";
+        }
+    }
+
 }
@@ -20,6 +20,12 @@
           <a ng-href="#" ng-click="ctrl.openLogin()">{{"navbar.login" | translate}}</a>
         </li>
  
+        <li ng-show="!ctrl.currentUser">
+          <a ui-sref="main.register">
+            Sign Up
+          </a>
+        </li>
+
         <li class="dropdown profile-menu" ng-show="ctrl.currentUser" uib-dropdown>
           <a href="#" class="dropdown-toggle" aria-expanded="false" uib-dropdown-toggle>
             <noosfero-profile-image [profile]="ctrl.currentUser.person" class="profile-image"></noosfero-profile-image>
-import {Component, Inject, EventEmitter, Input} from "ng-forward";
-import {LanguageSelectorComponent} from "../language-selector/language-selector.component";
-import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
-import {EnvironmentService} from "./../../../lib/ng-noosfero-api/http/environment.service";
-import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
-import {BodyStateClassesService} from '../services/body-state-classes.service';
-import {DesignModeTogglerComponent} from './../../admin/layout-edit/designModeToggler.component';
-import {BootstrapSwitcherComponent, BootstrapSwitcherItem} from './../../shared/components/bootstrap-switcher/bootstrap-switcher.component';
+import { Component, Inject, EventEmitter, Input } from "ng-forward";
+import { LanguageSelectorComponent } from "../language-selector/language-selector.component";
+import { SessionService, AuthService, AuthController, AuthEvents } from "./../../login";
+import { EnvironmentService } from "./../../../lib/ng-noosfero-api/http/environment.service";
+import { SidebarNotificationService } from "../sidebar/sidebar.notification.service";
+import { BodyStateClassesService } from '../services/body-state-classes.service';
+import { DesignModeTogglerComponent } from './../../admin/layout-edit/designModeToggler.component';
+import { BootstrapSwitcherComponent, BootstrapSwitcherItem } from './../../shared/components/bootstrap-switcher/bootstrap-switcher.component';
  
 @Component({
     selector: "acme-navbar",
@@ -17,14 +17,14 @@ import {BootstrapSwitcherComponent, BootstrapSwitcherItem} from &#39;./../../shared/
 export class Navbar {
  
     private currentUser: noosfero.User;
-    private modalInstance: any = null;
+    private modalInstance: ng.ui.bootstrap.IModalServiceInstance;
     public showHamburger: boolean = false;
     public currentEnvironment: noosfero.Environment = <any>{ name: '' };
     /**
      *
      */
     constructor(
-        private $uibModal: any,
+        private $uibModal: ng.ui.bootstrap.IModalService,
         public authService: AuthService,
         private session: SessionService,
         private $state: ng.ui.IStateService,
@@ -2,6 +2,10 @@ label {
   cursor: pointer;
 }
  
+.has-error .help-block {
+  font-weight: bold;
+}
+
 .checkbox-nice {
 	position: relative;
 	padding-left: 15px;
@@ -34,17 +34,4 @@
 	.main-box-body {
 		padding: 0 20px 20px 20px;
 	}
-}
-
-ul.nav > li.toggler-container {
-	position: relative;
-	padding-top: 12px;
-}
-
-.noosfero-main-toolbar {
-	padding: 5px;
-	@include make-row();
-	margin-left: 0px;
-	margin-right: 0px;
-	background-color: #edecec;
-}
+}
 \ No newline at end of file
@@ -4,6 +4,12 @@
 	background-clip: padding-box; /* stops bg color from leaking outside the border: */
 }
  
+@mixin box-shadow($args...) {
+	-webkit-box-shadow: $args;
+	-moz-box-shadow: $args;
+	box-shadow: $args;
+}
+
 @mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {
 	width: $width;
 	height: $height;
@@ -48,3 +54,31 @@
 		outline-width: $width;
 	}
 }
+
+@mixin not-select() {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;           /* Non-prefixed version, currently
+                                  not supported by any browser */
+}
+
+@mixin keyframes($animation-name) {
+	@-webkit-keyframes #{$animation-name} {
+		@content;
+	}
+	@-moz-keyframes #{$animation-name} {
+		@content;
+	}
+	@-ms-keyframes #{$animation-name} {
+		@content;
+	}
+	@-o-keyframes #{$animation-name} {
+		@content;
+	}
+	@keyframes #{$animation-name} {
+		@content;
+	}
+}
@@ -122,7 +122,7 @@ $whbl-font-color: #16191c;
 	  margin-bottom: 0;
 	  position: relative;
 	  min-height: 1200px;
-	  padding: 15px 15px 35px 15px;
+	  padding: $wrapper-padding;
 	  margin-left: 220px;
 		// border-left: 2px solid #e7ebee;
 	}
@@ -291,11 +291,7 @@ $whbl-font-color: #16191c;
 		background-color: #fff;
 	}
  
-	noosfero-design-toggler .ats-switch .knob i {
-		color: #999999;
-	}
-
-	.ats-switch .knob {
+    .ats-switch .knob {
 		padding-right: 15px;
 	}
  
@@ -193,7 +193,6 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
  
         service.start();
  
-        debugger;
         designModeService.setInDesignMode(true);
  
  
@@ -21,4 +21,7 @@
     </div>
     <button type="submit" class="btn btn-default btn-block" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
   </form>
+  <div class="text-center">
+    <a ui-sref="main.register" ng-click="$close()">{{"auth.createAccount" | translate}}</a>
+  </div>
 </div>
@@ -23,4 +23,4 @@ export class SessionService {
         return this.$localStorage.currentUser;
     };
  
-}
 \ No newline at end of file
+}
@@ -4,8 +4,9 @@ import {TestComponentBuilder, ComponentFixture} from &quot;ng-forward/cjs/testing/tes
  
 import {quickCreateComponent} from "../../spec/helpers";
 import {getAngularServiceFactory} from "../../spec/helpers";
+import { EVENTS_HUB_KNOW_EVENT_NAMES } from "../shared/services/events-hub.service";
  
-describe("MainComponent", function() {
+describe("MainComponent", function () {
  
     let localFixture: ComponentFixture;
     let $state: angular.ui.IStateService;
@@ -34,6 +35,14 @@ describe(&quot;MainComponent&quot;, function() {
                 {
                     useValue: environmentService
                 }),
+            provide(EVENTS_HUB_KNOW_EVENT_NAMES,
+                {
+                    useValue: [
+                        'IMAGE_PROFILE_UPDATED',
+                        'PROFILE_INFO_UPDATED',
+                        'ARTICLE_UPDATED'
+                    ]
+                }),
         ]
     })
     class MainComponentParent {
@@ -57,7 +66,7 @@ describe(&quot;MainComponent&quot;, function() {
                 // navigates to the environment home
                 $state.go("main.environment.home");
                 localFixture.detectChanges();
-                // after changes were detected it checks the current $state route 
+                // after changes were detected it checks the current $state route
                 expect($state.current.name).toEqual("main.environment.home");
                 done();
             });
 import * as plugins from "../../plugins";
-import {bundle, Component, StateConfig, Inject} from "ng-forward";
-import {ArticleBlogComponent} from "./../article/types/blog/blog.component";
-
-import {ArticleViewComponent} from "./../article/article-default-view.component";
-
-import {ProfileComponent} from "../profile/profile.component";
-import {BoxesComponent} from "../layout/boxes/boxes.component";
-import {BlockContentComponent} from "../layout/blocks/block-content.component";
-import {BlockComponent} from "../layout/blocks/block.component";
-import {EnvironmentComponent} from "../environment/environment.component";
-import {EnvironmentHomeComponent} from "../environment/environment-home.component";
-import {PeopleBlockComponent} from "../layout/blocks/people/people-block.component";
-import {DisplayContentBlockComponent} from "../layout/blocks/display-content/display-content-block.component";
-import {LinkListBlockComponent} from "../layout/blocks/link-list/link-list-block.component";
-import {RecentDocumentsBlockComponent} from "../layout/blocks/recent-documents/recent-documents-block.component";
-import {ProfileImageBlockComponent} from "../layout/blocks/profile-image/profile-image-block.component";
-import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html-block.component";
-import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-block.component";
-import {PersonTagsPluginInterestsBlockComponent} from "../layout/blocks/person-tags-plugin-interests/person-tags-plugin-interests-block.component";
-import {TagsBlockComponent} from "../layout/blocks/tags/tags-block.component";
-import {CustomContentComponent} from "../profile/custom-content/custom-content.component";
-import {RecentActivitiesPluginActivitiesBlockComponent} from "../layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.component";
-
-import {MembersBlockComponent} from "../layout/blocks/members/members-block.component";
-import {CommunitiesBlockComponent} from "../layout/blocks/communities/communities-block.component";
-
-import {LoginBlockComponent} from "../layout/blocks/login-block/login-block.component";
-
-import {NoosferoTemplate} from "../shared/pipes/noosfero-template.filter";
-import {DateFormat} from "../shared/pipes/date-format.filter";
-
-import {AuthService} from "../login/auth.service";
-import {SessionService} from "../login/session.service";
-import {EnvironmentService} from "./../../lib/ng-noosfero-api/http/environment.service";
-import {NotificationService} from "../shared/services/notification.service";
-
-import {BodyStateClassesService} from "./../layout/services/body-state-classes.service";
-
-import {Navbar} from "../layout/navbar/navbar";
-
-import {SidebarComponent} from "../layout/sidebar/sidebar.component";
-
-import {MainBlockComponent} from "../layout/blocks/main/main-block.component";
-import {HtmlEditorComponent} from "../shared/components/html-editor/html-editor.component";
-import {PermissionDirective} from "../shared/components/permission/permission.directive";
-import {SearchComponent} from "../search/search.component";
-import {SearchFormComponent} from "../search/search-form/search-form.component";
-
+import { bundle, Component, StateConfig, Inject } from "ng-forward";
+import { ArticleBlogComponent } from "./../article/types/blog/blog.component";
+
+import { ArticleViewComponent } from "./../article/article-default-view.component";
+
+import { ProfileComponent } from "../profile/profile.component";
+import { BoxesComponent } from "../layout/boxes/boxes.component";
+import { BlockContentComponent } from "../layout/blocks/block-content.component";
+import { BlockComponent } from "../layout/blocks/block.component";
+import { EnvironmentComponent } from "../environment/environment.component";
+import { EnvironmentHomeComponent } from "../environment/environment-home.component";
+import { PeopleBlockComponent } from "../layout/blocks/people/people-block.component";
+import { DisplayContentBlockComponent } from "../layout/blocks/display-content/display-content-block.component";
+import { LinkListBlockComponent } from "../layout/blocks/link-list/link-list-block.component";
+import { RecentDocumentsBlockComponent } from "../layout/blocks/recent-documents/recent-documents-block.component";
+import { ProfileImageBlockComponent } from "../layout/blocks/profile-image/profile-image-block.component";
+import { RawHTMLBlockComponent } from "../layout/blocks/raw-html/raw-html-block.component";
+import { StatisticsBlockComponent } from "../layout/blocks/statistics/statistics-block.component";
+import { PersonTagsPluginInterestsBlockComponent } from "../layout/blocks/person-tags-plugin-interests/person-tags-plugin-interests-block.component";
+import { TagsBlockComponent } from "../layout/blocks/tags/tags-block.component";
+import { CustomContentComponent } from "../profile/custom-content/custom-content.component";
+import { RecentActivitiesPluginActivitiesBlockComponent } from "../layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.component";
+import { ContainerBlockPluginContainerBlockComponent } from "../layout/blocks/container-block-plugin-container-block/container-block-plugin-container-block.component";
+import { ProfileImagesPluginProfileImagesBlockComponent } from "../layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component";
+import { RegisterComponent } from "../account/register.component";
+
+import { MembersBlockComponent } from "../layout/blocks/members/members-block.component";
+import { CommunitiesBlockComponent } from "../layout/blocks/communities/communities-block.component";
+
+import { LoginBlockComponent } from "../layout/blocks/login-block/login-block.component";
+
+import { NoosferoTemplate } from "../shared/pipes/noosfero-template.filter";
+import { DateFormat } from "../shared/pipes/date-format.filter";
+
+import { AuthService } from "../login/auth.service";
+import { SessionService } from "../login/session.service";
+import { EnvironmentService } from "./../../lib/ng-noosfero-api/http/environment.service";
+import { NotificationService } from "../shared/services/notification.service";
+import { RegisterService } from "./../../lib/ng-noosfero-api/http/register.service";
+
+import { BodyStateClassesService } from "./../layout/services/body-state-classes.service";
+
+import { Navbar } from "../layout/navbar/navbar";
+
+import { SidebarComponent } from "../layout/sidebar/sidebar.component";
+
+import { MainBlockComponent } from "../layout/blocks/main/main-block.component";
+import { HtmlEditorComponent } from "../shared/components/html-editor/html-editor.component";
+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";
 /**
  * @ngdoc controller
  * @name main.MainContentComponent
@@ -62,12 +68,16 @@ import {SearchFormComponent} from &quot;../search/search-form/search-form.component&quot;;
     templateUrl: "app/main/main.html",
     providers: [AuthService, SessionService]
 })
-@Inject(BodyStateClassesService)
+@Inject(BodyStateClassesService, EVENTS_HUB_KNOW_EVENT_NAMES)
 export class MainContentComponent {
  
     public themeSkin: string = 'skin-whbl';
  
-    constructor(private bodyStateClassesService: BodyStateClassesService) {
+    constructor(
+        private bodyStateClassesService: BodyStateClassesService,
+        eventsNames: NoosferoKnownEvents,
+        eventsHubService: EventsHubService
+    ) {
         bodyStateClassesService.start({
             skin: this.themeSkin
         });
@@ -88,7 +98,8 @@ export class EnvironmentContent {
  * @name main.Main
  * @requires AuthService, Session, Notification, ArticleBlog, ArticleView, Boxes, Block, LinkListBlock,
  * MainBlock, RecentDocumentsBlock, Navbar, ProfileImageBlock, MembersBlock,
- * NoosferoTemplate, DateFormat, RawHTMLBlock, PersonTagsPluginInterestsBlock, RecentActivitiesPluginActivitiesBlock,
+ * NoosferoTemplate, DateFormat, RawHTMLBlock, PersonTagsPluginInterestsBlock,
+ * RecentActivitiesPluginActivitiesBlock, ContainerBlockPluginContainerBlockComponent, ProfileImagesPluginProfileImages
  * @description
  *  The Main controller for the Noosfero Angular Theme application.
  *
@@ -107,16 +118,18 @@ export class EnvironmentContent {
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
         LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent,
-        PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent, BlockComponent
+        PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent,
+        ContainerBlockPluginContainerBlockComponent,
+        ProfileImagesPluginProfileImagesBlockComponent, BlockComponent, RegisterComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
-    providers: [AuthService, SessionService, NotificationService, BodyStateClassesService,
+    providers: [AuthService, SessionService, NotificationService, BodyStateClassesService, RegisterService,
         "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", "toggle-switch", "ngTagCloud", "noosfero.init"]
+        "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch", "ngPassword"]
 })
 @StateConfig([
     {
@@ -137,7 +150,6 @@ export class EnvironmentContent {
         url: '/',
         component: EnvironmentComponent,
         name: 'main.environment',
-        abstract: true,
         views: {
             "content": {
                 templateUrl: "app/environment/environment.html",
@@ -147,6 +159,18 @@ export class EnvironmentContent {
         }
     },
     {
+        url: '/account/signup',
+        component: RegisterComponent,
+        name: 'main.register',
+        views: {
+            "content": {
+                templateUrl: "app/account/register.html",
+                controller: RegisterComponent,
+                controllerAs: "vm"
+            }
+        }
+    },
+    {
         url: "^/:profile",
         abstract: true,
         component: ProfileComponent,
-<timeline>
-  <timeline-event ng-repeat="activity in ctrl.activities | orderBy: 'created_at':true">
-    <noosfero-activity [activity]="activity"></noosfero-activity>
-  </timeline-event>
-</timeline>
+<div class="row">
+  <hr class="divider"/>
+  <div id="atividades">
+      <h4>Atividades Recentes</h4>
+      <timeline>
+        <timeline-event ng-repeat="activity in vm.activities | orderBy: 'created_at':true">
+          <hr class="divider"/>
+          <noosfero-activity [activity]="activity"></noosfero-activity>
+        </timeline-event>
+      </timeline>
+      <button type="button" class="btn btn-sm btn-block">Carregar mais</button>
+  </div>
+</div>
@@ -12,6 +12,7 @@ const htmlTemplate: string = &#39;&lt;noosfero-activity [activity]=&quot;ctrl.activity&quot;&gt;&lt;/no
 describe("Components", () => {
  
     describe("Noosfero Activity", () => {
+        let activity = { name: "activity1", verb: "create_article" };
  
         beforeEach(angular.mock.module("templates"));
  
@@ -21,18 +22,54 @@ describe(&quot;Components&quot;, () =&gt; {
             directives: [ActivityComponent],
             providers: provideFilters("truncateFilter", "stripTagsFilter", "translateFilter")
         })
+
         class BlockContainerComponent {
-            activity = { name: "activity1", verb: "create_article" };
+            activity = activity;
         }
  
         it("render the specific template for an activity verb", done => {
             tcb.createAsync(BlockContainerComponent).then(fixture => {
                 let component: ActivityComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
                 expect(component.getActivityTemplate()).toEqual('app/profile/activities/activity/create_article.html');
+                done();
+            });
+        });
+
+        it("render create article template correctly", done => {
+            activity = { name: "activity1", verb: "create_article" };
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let component: ActivityComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
                 expect(fixture.debugElement.queryAll(".activity.create_article").length).toEqual(1);
                 done();
             });
         });
+
+        it("render add_member_in_community template correctly", done => {
+            activity = { name: "add_member_in_community1", verb: "add_member_in_community" };
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let component: ActivityComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(fixture.debugElement.queryAll(".activity.add_member_in_community").length).toEqual(1);
+                done();
+            });
+        });
+
+        it("render new_friendship template correctly", done => {
+            activity = { name: "new_friendship1", verb: "new_friendship" };
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let component: ActivityComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(fixture.debugElement.queryAll(".activity.new_friendship").length).toEqual(1);
+                done();
+            });
+        });
+
+        it("render leave scrap template correctly", done => {
+            activity = { name: "scrap1", verb: "leave_scrap" };
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let component: ActivityComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(fixture.debugElement.queryAll(".activity.leave_scrap").length).toEqual(1);
+                done();
+            });
+        });
     });
  
 });
@@ -0,0 +1,17 @@
+<timeline-badge class="success">
+  <i class="fa fa-commenting-o"></i>
+</timeline-badge>
+<timeline-panel>
+  <timeline-heading>
+    <h4 class="timeline-title">
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
+      <span> {{"activities.scrap.description" | translate}} </span>
+    </h4>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at | dateFormat"></span></small></p>
+  </timeline-heading>
+  <div class="timeline-body">
+    <div class="scrap">
+      <div ng-bind-html="ctrl.activity.content | stripTags | truncate: 100 : '...': true"></div>
+    </div>
+  </div>
+</timeline-panel>
@@ -0,0 +1,21 @@
+import {Component, Inject, provide} from "ng-forward";
+import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: "configbar",
+    templateUrl: "app/profile/configbar.html",
+    providers: [
+        provide('profileService', { useClass: ProfileService })
+    ]
+})
+@Inject(ProfileService)
+export class ConfigBarComponent {
+    profile: noosfero.Profile;
+    parentId: number;
+
+    constructor(profileService: ProfileService) {
+        profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+            this.profile = profile;
+        });
+    }
+}
@@ -0,0 +1,21 @@
+<div id="config-tool" ng-class="{'closed': !showConfig}">
+		<a id="config-tool-cog" ng-click="showConfig = !showConfig">
+			<i class="fa fa-cog" ng-class="{'anim-icon': showConfig}"></i>
+		</a>
+
+		<div id="config-tool-options">
+			<h4>{{ 'configbar.label' | translate }}</h4>
+      <div class="section-title">{{ 'configbar.section.layout' | translate }}</div>
+			<ul>
+        <li>
+          <label class="pull-left">
+            <i class="fa fa-th-large"></i>
+            <span class="item-label">{{ 'designMode.label' | translate }}</span>
+          </label>
+          <label class="pull-right">
+            <design-toggler></design-toggler>
+          </label>
+        </li>
+			</ul>
+		</div>
+</div>
@@ -0,0 +1,110 @@
+@import "../layout/scss/mixins";
+
+@include keyframes(rotating) {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* CONFIG TOOLS */
+#config-tool {
+	@include transition(all 0.2s ease-in-out 0s);
+	@include box-shadow(0px 1px 4px rgba(0, 0, 0, 0.3));
+	position: fixed;
+	right: 0;
+	top: 120px;
+	min-width: 200px;
+	z-index: 1000;
+
+	#config-tool-cog {
+		@include border-radius($border-radius-base 0 0 $border-radius-base);
+		@include transition(all 0.1s ease-in-out 0s);
+		@include box-shadow(-3px 3px 3px -2px rgba(0, 0, 0, 0.1));
+		background: #fff;
+		cursor: pointer;
+		left: -50px;
+		padding: 10px;
+		position: absolute;
+		text-align: center;
+		width: 50px;
+		top: 0;
+
+		i {
+			font-size: 2.2em;
+		}
+
+		.anim-icon {
+			@include animation(rotating 0.7s ease-in-out 0s);
+		}
+	}
+
+	&.closed {
+		right: -280px;
+		box-shadow: none;
+
+		#config-tool-cog {
+			&:hover {
+				background-color: $primary-color;
+				color: #fff;
+			}
+		}
+	}
+
+	&.opened {
+		right: 0;
+	}
+
+	.section-title {
+	  margin: 30px 0 5px;
+		font: {
+			size: 15px;
+	  	weight: bold;
+		}
+
+	}
+
+	#config-tool-options {
+		@include box-shadow(-3px 3px 3px -2px rgba(0, 0, 0, 0.1));
+		background: #fff;
+		padding: 15px;
+
+		h4 {
+			margin: 0;
+			font-size: 1.3em;
+		}
+
+		ul {
+			list-style: none;
+			border-radius: 2px;
+		  padding: 0;
+
+		  background: {
+				clip: padding-box;
+		  	color: #f1f3f2;
+			}
+
+			li {
+			  padding: 10px;
+				width: 250px;
+			  min-height: 50px;
+				font: {
+					size: 13px;
+			  	weight: 300;
+				}
+
+				.checkbox {
+					margin: 0;
+				}
+
+				.pull-left {
+					margin-top: 8px;
+					font-weight: normal;
+				}
+
+			}
+		}
+	}
+}
-import {Component, Input, Inject} from 'ng-forward';
-import {ProfileService} from '../../../lib/ng-noosfero-api/http/profile.service';
-import {NotificationService} from '../../shared/services/notification.service';
-import {PermissionDirective} from '../../shared/components/permission/permission.directive';
-import {DesignModeService} from '../../admin/layout-edit/designMode.service';
+import { Component, Input, Inject } from 'ng-forward';
+import { ProfileService } from '../../../lib/ng-noosfero-api/http/profile.service';
+import { NotificationService } from '../../shared/services/notification.service';
+import { PermissionDirective } from '../../shared/components/permission/permission.directive';
+import { DesignModeService } from '../../admin/layout-edit/designMode.service';
  
 @Component({
     selector: 'custom-content',
@@ -21,9 +21,10 @@ export class CustomContentComponent {
  
     content: string;
     originalContent: string;
-    private modalInstance: any = null;
+    private modalInstance: ng.ui.bootstrap.IModalServiceInstance;
  
-    constructor(private $uibModal: any,
+    constructor(
+        private $uibModal: ng.ui.bootstrap.IModalService,
         private $scope: ng.IScope,
         private profileService: ProfileService,
         private notificationService: NotificationService,
 <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>
+  <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="">
+  <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image img-avatar"></i>
 </span>
@@ -16,17 +16,23 @@ export class ProfileInfoComponent {
  
     activities: any;
     profile: noosfero.Profile;
+    showInformation: boolean = false;
  
     constructor(private profileService: ProfileService, private amDateFormatFilter: any) {
         this.init();
+        this.showInformation = false;
+    }
+
+    toggleInformation() {
+      console.log(this.showInformation);
+      console.log("argila");
+      this.showInformation = !this.showInformation;
+      console.log(this.showInformation);
     }
  
     init() {
         this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
             this.profile = profile;
-            return this.profileService.getActivities(<number>this.profile.id);
-        }).then((response: restangular.IResponse) => {
-            this.activities = response.data.activities;
         });
     }
 }
-<div class="profile-wall">
+<!-- <div class="profile-wall mainbox clearfix">
  
   <div class="col-lg-3 col-md-4 col-sm-4">
     <div class="main-box clearfix">
@@ -8,6 +8,7 @@
       <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'}}
         </div>
@@ -27,4 +28,38 @@
       </uib-tabset>
     </div>
   </div>
+</div> -->
+
+<div class="bg-image"></div>
+
+<div class="container" id="noosfero-profile">
+  <div class="col-sm-2">
+    <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block" data-pin-nopin="true"></noosfero-profile-image>
+    <div class="social-links">
+      <ul>
+        <li>Facebook</li>
+        <li>Linkdin</li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-10">
+    <h3>{{ vm.profile.name }}</h3>
+    <div ng-switch="description">
+    <p ng-if="vm.profile.additional_data['description']">
+      {{ 'profile.person.description' | translate }}: {{ vm.profile.additional_data['description'] }}
+    </p>
+    <p class="pull-left">www.noosfero.gov.br/<strong>{{ vm.profile.identifier }}</strong></p>
+    <div class="pull-right info-contato">
+      <button ng-click="vm.toggleInformation()" class="btn btn-sm">{{ 'profile.person.contact_info' | translate }}</button>
+      <div clas="profile-contact" ng-show="vm.showInformation">
+        <p class="email" ng-if="vm.profile.additional_data['contact_email']">Email: {{ vm.profile.additional_data['contact_email'] }}</p>
+        <p class="phone" ng-if="vm.profile.additional_data['contact_phone']">
+          {{ 'profile.person.contact_phone' | translate }}: {{ vm.profile.additional_data['contact_phone'] }}
+        </p>
+        <p class="phone" ng-if="(!vm.profile.additional_data['contact_phone'] && !vm.profile.additional_data['contact_email'])">
+          {{ 'profile.person.no_contact_info' | translate }}
+        </p>
+      </div>
+    </div>
+  </div>
 </div>
@@ -6,22 +6,22 @@ import {CmsComponent} from &#39;../article/cms/cms.component&#39;;
 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 {ActivityComponent} from "./activities/activity/activity.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 {ProfileToolbarComponent} from "./profile-toolbar.component";
+import {ConfigBarComponent} from "./config-bar.component";
 /**
  * @ngdoc controller
- * @name profile.Profile
- * @description
+ * @name profile.Profile * @description
  *  This is the profile controller. It provide routes to supported Noosfero Profiles.
  */
  
 @Component({
     selector: 'profile',
     templateUrl: "app/profile/profile.html",
-    directives: [ActivitiesComponent],
+    directives: [ActivityComponent],
     providers: [
         provide('profileService', { useClass: ProfileService }),
         provide('notificationService', { useClass: NotificationService })
@@ -33,19 +33,19 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
         url: "^/profile/:profile",
         component: ProfileInfoComponent,
         views: {
-            "mainBlockContent": {
-                templateUrl: "app/profile/info/profile-info.html",
-                controller: ProfileInfoComponent,
-                controllerAs: "vm"
-            },
             "actions@main": {
                 templateUrl: "app/profile/navbar-actions.html",
                 controller: ProfileActionsComponent,
                 controllerAs: "vm"
             },
             "toolbar@main": {
-                templateUrl: "app/profile/toolbar.html",
-                controller: ProfileToolbarComponent,
+                templateUrl: "app/profile/configbar.html",
+                controller: ConfigBarComponent,
+                controllerAs: "vm"
+            },
+            "mainBlockContent": {
+                templateUrl: "app/profile/activities/activities.html",
+                controller: ProfileInfoComponent,
                 controllerAs: "vm"
             }
         }
@@ -61,8 +61,8 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
                 controllerAs: "vm"
             },
             "toolbar@main": {
-                templateUrl: "app/profile/toolbar.html",
-                controller: ProfileToolbarComponent,
+                templateUrl: "app/profile/configbar.html",
+                controller: ConfigBarComponent,
                 controllerAs: "vm"
             }
         }
@@ -118,8 +118,8 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
                 controllerAs: "vm"
             },
             "toolbar@main": {
-                templateUrl: "app/profile/toolbar.html",
-                controller: ProfileToolbarComponent,
+                templateUrl: "app/profile/configbar.html",
+                controller: ConfigBarComponent,
                 controllerAs: "vm"
             }
         }
@@ -142,4 +142,6 @@ export class ProfileComponent {
             notificationService.error({ message: "notification.profile.not_found" });
         });
     }
+
+
 }
@@ -4,10 +4,14 @@
                   [attribute]="'custom_header'"
                   [profile]="vm.profile">
   </custom-content>
-  <noosfero-boxes ng-if="vm.boxes"
-                  [layout]="vm.profile.layout_template"
-                  [boxes]="vm.boxes"
-                  [owner]="vm.profile" class="row">
-  </noosfero-boxes>
+  <div class="row" ui-view="profile-info"></div>
+
+  <div class="wrapper-container">
+    <noosfero-boxes ng-if="vm.boxes"
+                    [layout]="vm.profile.layout_template"
+                    [boxes]="vm.boxes"
+                    [owner]="vm.profile" class="row">
+    </noosfero-boxes>
+  </div>
   <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content>
 </div>
+
+@mixin padding-sides {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+@mixin profile-img {
+  text-align: center;
+  margin: 10px;
+  border: 1px solid #eee;
+}
+
+@media (min-width: 768px) {
+  .container {max-width: 980px;}
+}
+
 .profile-container {
   @extend .container-fluid;
-  padding: 0 1%;
-  @media (max-width: 978px) {
-    padding: 0 2%;
+  margin-top:     -$wrapper-padding-top;
+  margin-left:    -$wrapper-padding-left;
+  margin-bottom:  -$wrapper-padding-bottom;
+  margin-right:   -$wrapper-padding-right;
+  @media (max-width: 978px) {padding: 0 2%;}
+}
+
+.wrapper-container {
+  margin: auto;
+  max-width: 980px;
+}
+
+.dropdown-menu {
+  >li {
+    margin:5px 0;
+    >a {
+      padding:3px 10px 3px 0 !important;
+      &:hover {background-color:transparent !important;}
+    }
   }
 }
  
-#profile-left {
-  text-align: center;
-  margin-top: 15px;
+.bg-image {
+  background-color:#eee;
+  height: 260px;
+}
+
+.social-links {
+  ul {
+    list-style:none;
+    text-align:center;
+    padding:0;
+    margin:0;
+  }
+}
+
+#noosfero-profile {
+  background:#fff;
+  margin: -200px auto auto;
+  z-index:9999;
+  left:0;
+  right:0;
+  border:1px solid #eee;
+  padding:20px 0;
+  font-size: 14px;
+
+  img,
+  i {@include profile-img;}
+
+  .col-sm-2 {text-align: center;}
+
+  h3 {margin-top: 16px;}
+
+  .btn {
+    font-size: 12px;
+    padding: 5px 10px;
+  }
+
+  .profile-contact {
+    padding-top: 10px;
+    p {margin: 0px;}
+  }
 }
-
-
 export interface IComponentWithPermissions {
     permissions: () => string[];
-}
 \ No newline at end of file
+}
+
+export interface IModalComponent {
+    $uibModal: ng.ui.bootstrap.IModalService;
+    modalInstance: ng.ui.bootstrap.IModalServiceInstance;
+}
@@ -0,0 +1,46 @@
+import { OpaqueToken } from 'ng-forward';
+import { EventsHubService, EventsHubKnownEventNames } from './events-hub.service';
+
+
+describe("EventsHubService", () => {
+    let eventsHubService: EventsHubService;
+    let event1 = 'Event 1';
+    let eventsHubKnownEventNames = <EventsHubKnownEventNames>{ getNames: () => { return [ event1]; }};
+    it("emits events for the known events", (done) => {
+
+        let eventListener = () => {
+        };
+        // creates the events hub service which known the event "Event1"
+        eventsHubService = new EventsHubService(eventsHubKnownEventNames);
+        // subscribe to the event passing the done Function as the eventListener
+        // if the event emits works the done function is called and the
+        // test will pass
+        eventsHubService.subscribeToEvent<any>(event1, done);
+        // emits the event
+        eventsHubService.emitEvent(event1, null);
+    });
+
+    it("throws error when trying to emit an unknow event", () => {
+        let eventListener = () => {
+        };
+        // creates the events hub service which known the event "Event1"
+        eventsHubService = new EventsHubService(eventsHubKnownEventNames);
+
+        // emits the event
+        expect(
+            () => { eventsHubService.emitEvent('NotKnownEvent', null); }
+        ).toThrowError('Unknown event named NotKnownEvent');
+    });
+
+    it("throws error when trying to subscribe to an unknow event", () => {
+        let eventListener = () => {
+        };
+        // creates the events hub service which known the event "Event1"
+        eventsHubService = new EventsHubService(eventsHubKnownEventNames);
+
+        // emits the event
+        expect(
+            () => { eventsHubService.subscribeToEvent<void>('NotKnownEvent', () => {}); }
+        ).toThrowError('Unknown event named NotKnownEvent');
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,56 @@
+import { Injectable, Inject, OpaqueToken, EventEmitter } from 'ng-forward';
+
+export const EVENTS_HUB_KNOW_EVENT_NAMES = new OpaqueToken('EVENTS_HUB_KNOW_EVENT_NAMES');
+
+export interface EventsHubKnownEventNames {
+    getNames(): string[];
+}
+
+function isEventsHubKnownEventNames(object: any): object is EventsHubKnownEventNames {
+    return 'getNames' in object;
+}
+
+@Injectable()
+@Inject(EVENTS_HUB_KNOW_EVENT_NAMES)
+export class EventsHubService {
+
+    private emitters: Map<string, EventEmitter<any>>;
+    private knownEvents: string[] = [];
+
+    constructor(private eventsHubKnownEventNames: EventsHubKnownEventNames | string[]) {
+        if (isEventsHubKnownEventNames(eventsHubKnownEventNames)) {
+            this.knownEvents = eventsHubKnownEventNames.getNames();
+        } else if (Array.isArray(eventsHubKnownEventNames)) {
+            this.knownEvents = eventsHubKnownEventNames;
+        }
+
+        this.emitters = new Map<string, EventEmitter<any>>();
+        this.setupEmitters();
+    }
+
+    emitEvent(eventType: string, payload?: any) {
+        this.checkKnownEvent(eventType);
+        let event = this.emitters.get(eventType);
+        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);
+    }
+
+    private setupEmitters() {
+        for (let i: number = 0; i < this.knownEvents.length; i++) {
+            this.emitters.set(this.knownEvents[i], new EventEmitter<any>());
+        }
+    }
+
+    private checkKnownEvent(eventType: string) {
+        if (!this.emitters.has(eventType)) {
+            throw new Error('Unknown event named ' + eventType.toString());
+        }
+    }
+
+
+}
 \ No newline at end of file
 {
   "noosfero.name" : "Noosfero",
   "blocks.profile_image.control_panel": "Control Panel",
+  "blocks.profile_image.join": "Join community",
+  "blocks.profile_image.leave": "Leave community",
+  "blocks.profile_image.join.moderation.title": "Good job!",
+  "blocks.profile_image.join.moderation.message": "Your membership is waiting for approval",
   "navbar.profile": "Profile",
   "navbar.settings": "Settings",
   "navbar.logout": "Log Out",
   "navbar.login": "Login",
   "navbar.toggle_menu": "Toggle navigation",
+  "configbar.label": "Configuration",
+  "configbar.section.layout": "Layout",
   "language.all": "All languages",
   "language.en": "English",
   "language.pt": "Portuguese",
@@ -17,8 +23,13 @@
   "profile.others_info": "Others",
   "profile.community.title": "Community",
   "profile.person.title": "Person",
+  "profile.person.description": "Description",
+  "profile.person.contact_info": "Contact Informations",
+  "profile.person.contact_phone": "Phone",
+  "profile.person.no_contact_info": "No contact informations",
   "activities.title": "Activities",
   "activities.create_article.description": "has published on",
+  "activities.scrap.description": "wrote in its timeline",
   "activities.add_member_in_community.description": "has joined the community",
   "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
   "auth.title": "Great to have you back!",
@@ -26,6 +37,7 @@
   "auth.form.password": "Password",
   "auth.form.keepLoggedIn": "Keep me logged in",
   "auth.form.login_button": "Login",
+  "auth.createAccount": "Create account",
   "navbar.content_viewer_actions.new_item": "New Item",
   "navbar.profile_actions.new_item": "New Item",
   "navbar.content_viewer_actions.new_post": "New Post",
@@ -77,9 +89,7 @@
   "custom_content.title": "Edit content",
   "profile.custom_header.label": "Header",
   "profile.custom_footer.label": "Footer",
-  "designMode.label": "In Design",
-  "designMode.toggle.ON": "ON",
-  "designMode.toggle.OFF": "OFF",
+  "designMode.label": "Design mode",
   "search.results.summary": "{results, plural, one{result} other{# results}}",
   "search.results.query.label": "Search therm:",
   "search.label": "Search",
@@ -97,5 +107,26 @@
   "block.edition.display_user.all": "All users",
   "block.edition.display_user.logged": "Logged",
   "block.edition.display_user.not_logged": "Not logged",
-  "block.edition.language.label": "Show for:"
+  "block.edition.language.label": "Show for:",
+  "activities.event.description": "Event on",
+  "time.at": "at",
+  "date.on": "On",
+  "account.register.welcomeMessageTitle": "Nice to have you there!",
+  "account.register.fullNameLabel": "Full name",
+  "account.register.usernameLabel": "Username",
+  "account.register.emailLabel": "Email",
+  "account.register.passwordLabel": "Password",
+  "account.register.passwordConfirmationLabel": "Password confirmation",
+  "account.register.accountCreatingMessage": "By creating an account, you are agreeing with the ",
+  "account.register.signupMessage": "Register",
+  "account.register.haveAccountMessage": "Already have an account?",
+  "account.register.termsOfUseMessage": "terms of use",
+  "account.register.success.title": "Good job!",
+  "account.register.success.message": "Account created!",
+  "account.register.passwordConfirmation.failed": "Wrong password confirmation",
+  "messages.invalid.required": "This field is required",
+  "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"
 }
@@ -0,0 +1,4 @@
+<li ng-message="required" translate="messages.invalid.required"></li>
+<li ng-message="minlength" translate="messages.invalid.minlength"></li>
+<li ng-message="maxlength" translate="messages.invalid.maxlength"></li>
+<li ng-message="email" translate="messages.invalid.email"></li>
 {
   "noosfero.name" : "Noosfero",
   "blocks.profile_image.control_panel": "Painel de Controle",
+  "blocks.profile_image.join": "Entrar na comunidade",
+  "blocks.profile_image.leave": "Sair da comunidade",
+  "blocks.profile_image.join.moderation.title": "Bom trabalho!",
+  "blocks.profile_image.join.moderation.message": "Sua participação está pendente de aprovação",
   "navbar.profile": "Perfil",
   "navbar.settings": "Configurações",
   "navbar.logout": "Sair",
   "navbar.login": "Login",
   "navbar.toggle_menu": "Abrir Menu",
+  "configbar.label": "Configurações",
+  "configbar.section.layout": "Visual",
   "language.all": "Todos os idiomas",
   "language.en": "Inglês",
   "language.pt": "Português",
@@ -17,8 +23,13 @@
   "profile.others_info": "Outras informações",
   "profile.community.title": "Comunidade",
   "profile.person.title": "Pessoa",
+  "profile.person.description": "Descrição",
+  "profile.person.contact_info": "Informações de Contato",
+  "profile.person.contact_phone": "Telefone",
+  "profile.person.no_contact_info": "Sem informações de contato",
   "activities.title": "Atividades",
   "activities.create_article.description": "publicou em",
+  "activities.scrap.description": "escreveu em sua linha do tempo",
   "activities.add_member_in_community.description": "entrou na comunidade",
   "activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:",
   "auth.title": "Legal ter você de volta!",
@@ -26,10 +37,11 @@
   "auth.form.password": "Senha",
   "auth.form.keepLoggedIn": "Continuar logado",
   "auth.form.login_button": "Login",
+  "auth.createAccount": "Criar conta",
   "navbar.content_viewer_actions.new_item": "Novo Item",
   "navbar.profile_actions.new_item": "Novo Item",
-  "navbar.content_viewer_actions.new_post": "Novo Artigo",
-  "navbar.content_viewer_actions.new_discussion": "Nova Discussão",
+  "navbar.content_viewer_actions.new_post": "Novo Post",
+  "navbar.content_viewer_actions.new_discussion": "Nova Consulta",
   "navbar.profile_actions.new_discussion": "Nova Discussão",
   "notification.error.default.message": "Algo deu errado!",
   "notification.error.default.title": "Oops...",
@@ -77,9 +89,7 @@
   "custom_content.title": "Editar conteúdo",
   "profile.custom_header.label": "Cabeçalho",
   "profile.custom_footer.label": "Rodapé",
-  "designMode.label": "Modo de Edição",
-  "designMode.toggle.ON": "Ligado",
-  "designMode.toggle.OFF": "Desligado",
+  "designMode.label": "Alterar design",
   "search.results.summary": "{results, plural, one{# resultado} other{# resultados}}",
   "search.results.query.label": "Termo da busca:",
   "search.label": "Pesquisar",
@@ -97,5 +107,29 @@
   "block.edition.display_user.all": "Todos os usuários",
   "block.edition.display_user.logged": "Logados",
   "block.edition.display_user.not_logged": "Não logados",
-  "block.edition.language.label": "Exibir para:"
+  "block.edition.language.label": "Exibir para:",
+  "activities.event.description": "Evento em",
+  "time.at": "às",
+  "date.on": "Em",
+  "account.register.welcomeMessageTitle": "Ótimo ter você aqui!",
+  "account.register.seeMoreMessage": "Saiba mais ",
+  "account.register.informationsMessage": "informações",
+  "account.register.fullNameLabel": "Nome completo",
+  "account.register.lastNameLabel": "Sobrenome",
+  "account.register.usernameLabel": "Nome de usuário",
+  "account.register.emailLabel": "Email",
+  "account.register.passwordLabel": "Senha",
+  "account.register.passwordConfirmationLabel": "Confirmar senha",
+  "account.register.accountCreatingMessage": "Ao criar uma conta, você está concordando com os ",
+  "account.register.termsOfUseMessage": "termos de uso",
+  "account.register.signupMessage": "Criar Conta",
+  "account.register.haveAccountMessage": "Já possui uma conta?",
+  "account.register.success.title": "Bom trabalho!",
+  "account.register.success.message": "Conta criada com sucesso!",
+  "account.register.passwordConfirmation.failed": "A confirmação de senha não corresponde à senha",
+  "messages.invalid.required": "Campo obrigatório",
+  "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"
 }
@@ -17,7 +17,6 @@ describe(&quot;Services&quot;, () =&gt; {
             articleService = _ArticleService_;
         }));
  
-
         describe("Succesfull requests", () => {
  
             it("should remove article", (done) => {
@@ -92,6 +91,5 @@ describe(&quot;Services&quot;, () =&gt; {
             });
         });
  
-
     });
 });
@@ -111,6 +111,56 @@ describe(&quot;Services&quot;, () =&gt; {
                 });
                 $httpBackend.flush();
             });
+
+            it("should return the profile members", (done) => {
+                let profileId = 1;
+                $httpBackend.expectGET(`/api/v1/profiles/${profileId}/members`).respond(200, { people: [{ id: 2 }] });
+                profileService.getMembers(<any>{ id: profileId }).then((response: restangular.IResponse) => {
+                    expect(response.data.people).toEqual([{ id: 2 }]);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("should return true if the person is a profile member", (done) => {
+                let profileId = 1;
+                $httpBackend.expectGET(`/api/v1/profiles/${profileId}/members`).respond(200, { people: [{ id: 2 }] });
+                profileService.isMember(<any>{ id: 2 }, <any>{ id: profileId }).then((response: restangular.IResponse) => {
+                    expect(response).toEqual(true);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("should return false if the person is a profile member", (done) => {
+                let profileId = 1;
+                $httpBackend.expectGET(`/api/v1/profiles/${profileId}/members`).respond(200, { people: [] });
+                profileService.isMember(<any>{ id: 2 }, <any>{ id: profileId }).then((response: restangular.IResponse) => {
+                    expect(response).toEqual(false);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("should add member to profile", (done) => {
+                let profileId = 1;
+                $httpBackend.expectPOST(`/api/v1/profiles/${profileId}/members`).respond(200, { pending: false });
+                profileService.addMember(<any>{ id: 2 }, <any>{ id: profileId }).then((response: restangular.IResponse) => {
+                    expect(response.data.pending).toEqual(false);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("should remove member from profile", (done) => {
+                let profileId = 1;
+                $httpBackend.expectDELETE(`/api/v1/profiles/${profileId}/members`).respond(200, { person: { id: 2 } });
+                profileService.removeMember(<any>{ id: 2 }, <any>{ id: profileId }).then((response: restangular.IResponse) => {
+                    expect(response.data.person).toEqual({ id: 2 });
+                    done();
+                });
+                $httpBackend.flush();
+            });
         });
  
  
@@ -64,4 +64,29 @@ export class ProfileService {
         let headers = { 'Content-Type': 'application/json' };
         return this.get(profile.id).customPOST({ profile: profile }, null, null, headers);
     }
+
+    getMembers(profile: noosfero.Profile, params?: any) {
+        let p = this.get(profile.id);
+        return p.customGET('members', params);
+    }
+
+    isMember(person: noosfero.Person, profile: noosfero.Profile) {
+        let deferred = this.$q.defer();
+        if (person) {
+            this.getMembers(profile, { identifier: person.identifier }).then((result: any) => {
+                deferred.resolve(result.data.people.length > 0);
+            });
+        } else {
+            deferred.resolve(false);
+        }
+        return deferred.promise;
+    }
+
+    addMember(person: noosfero.Person, profile: noosfero.Profile) {
+        return this.get(profile.id).customPOST({}, "members", null, null);
+    }
+
+    removeMember(person: noosfero.Person, profile: noosfero.Profile) {
+        return this.get(profile.id).customDELETE("members", null, null);
+    }
 }
@@ -0,0 +1,39 @@
+import { RegisterService } from "./register.service";
+
+describe("Services", () => {
+
+    describe("Register Service", () => {
+
+        let $httpBackend: ng.IHttpBackendService;
+        let registerService: RegisterService;
+        let $rootScope: ng.IRootScopeService;
+        let user: any = {
+            id: 1,
+            login: 'test',
+            email: 'test@email.com'
+        };
+
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
+            $translateProvider.translations('en', {});
+        }));
+
+        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _RegisterService_: RegisterService, _$rootScope_: ng.IRootScopeService) => {
+            $httpBackend = _$httpBackend_;
+            registerService = _RegisterService_;
+            $rootScope = _$rootScope_;
+        }));
+
+        describe("Succesfull requests", () => {
+
+            it("should creaet a new account", (done) => {
+
+                $httpBackend.expectPOST(`/api/v1/register?email=${user.email}&id=${user.id}&login=${user.login}`).respond(201, [{ login: "test" }]);
+                registerService.createAccount(user).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 RegisterService {
+    constructor(private Restangular: restangular.IService) {
+        this.Restangular = Restangular;
+    }
+
+    createAccount(user: noosfero.User): ng.IPromise<noosfero.RestResult<noosfero.User>> {
+        return this.Restangular.all("").customPOST(user, "register", user);
+    }
+}
@@ -80,14 +80,16 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
         }
         return {
             data: (response.data[dataKey] || response.data),
-            headers: response.headers
+            headers: response.headers,
+            status: response.status
         };
     };
  
     protected buildResult(response: restangular.IResponse): noosfero.RestResult<T> {
         return {
             data: response.data,
-            headers: response.headers
+            headers: response.headers,
+            status: response.status
         };
     };
     /**
@@ -5,7 +5,7 @@ namespace noosfero {
      * @name noofero.Environment
      * @description
      *  A representation of a Noosfero Environment.
-     */    
+     */
     export interface Environment extends RestModel {
         /**
          * @ngdoc property
@@ -23,6 +23,21 @@ namespace noosfero {
          * @returns {string} The Environment layout (e.g. default, rightbar)
          */
         layout_template: string;
+
+        /**
+         * @ngdoc property
+         * @name signup_intro
+         * @propertyOf noofero.Environment
+         * @returns {string} The Environment signup introduction HTML (e.g. Welcome to Noosfero...!!)
+         */
+        signup_intro: string;
+
+        /**
+         * @ngdoc property
+         * @name host
+         * @propertyOf noofero.Environment
+         * @returns {string} The Environment default domain address with 'http://' prefix (e.g. http://localhost)
+         */
+        host: string;
     }
 }
-
@@ -3,5 +3,6 @@ namespace noosfero {
     export interface RestResult<T> {
         data: T;
         headers: Function;
+        status: Number;
     }
-}
 \ No newline at end of file
+}
@@ -40,6 +40,11 @@ export var mocks: any = {
             return this.modalInstance;
         }
     },
+    registerService: {
+        createAccount: (user: noosfero.User) => {
+            return Promise.resolve({ status: 201 });
+        }
+    },
     authService: {
         loginSuccess: {
             event: Function,
@@ -145,6 +150,15 @@ export var mocks: any = {
             return mocks.promiseResultTemplate({
                 people: {}
             });
+        },
+        getCurrentEnvironment: (): any => {
+            return {
+                id: 1,
+                settings: {},
+                layout_template: '',
+                signup_intro: 'Welcome to Noosfero',
+                host: 'http://localhost'
+            };
         }
     },
     profileService: {
@@ -240,6 +254,7 @@ export var mocks: any = {
     },
     notificationService: {
         success: () => { },
-        confirmation: () => { }
+        confirmation: () => { },
+        error: () => { }
     }
 };
+$yellow-hover: #f5b025;
+$yellow-base: #f9c404;
+
 .skin-yellow {
   @extend %skin-base;
  
@@ -49,7 +52,7 @@
  
   .container-fluid .navbar-header .navbar-toggle {
     &:hover, &:focus {
-      background-color: #f5b025;
+      background-color: $yellow-hover;
     }
   }
  
@@ -61,4 +64,26 @@
 		}
   }
  
+  #config-tool {
+
+    #config-tool-cog {
+      color: $yellow-hover;
+    }
+
+    #config-tool-options {
+      h4 {
+        color: #2c3e50;
+        font-weight: bold;
+      }
+    }
+
+    &.closed {
+      #config-tool-cog {
+        &:hover {
+          background-color: $yellow-hover;
+        }
+      }
+    }
+  }
+
 }
@@ -8,6 +8,7 @@
     "angular-mocks": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular-mocks.d.ts",
     "angular-translate": "github:DefinitelyTyped/DefinitelyTyped/angular-translate/angular-translate.d.ts#19850bf86c876e0c2544842114878ece4664941a",
     "angular-ui-router": "github:DefinitelyTyped/DefinitelyTyped/angular-ui-router/angular-ui-router.d.ts#655f8c1bf3c71b0e1ba415b36309604f79326ac8",
+    "angular-ui-bootstrap": "github:DefinitelyTyped/DefinitelyTyped/angular-ui-bootstrap/angular-ui-bootstrap.d.ts",
     "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
     "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#dd638012d63e069f2c99d06ef4dcc9616a943ee4",
     "jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#470954c4f427e0805a2d633636a7c6aa7170def8",
...	...	@@ -38,8 +38,9 @@
38	38	"angular-bind-html-compile": "^1.2.1",
39	39	"angular-click-outside": "^2.7.1",
40	40	"ng-ckeditor": "^0.2.1",
41		- "angular-bootstrap-toggle-switch": "^0.5.6",
42		- "angular-tag-cloud": "^0.3.0"
	41	+ "angular-tag-cloud": "^0.3.0",
	42	+ "angular-ui-switch": "^0.1.1",
	43	+ "angular-password": "^1.0.1"
43	44	},
44	45	"devDependencies": {
45	46	"angular-mocks": "~1.5.0"
...	...
...	...	@@ -0,0 +1 @@
	1	+export * from "./register.component";
...	...
...	...	@@ -0,0 +1,77 @@
	1	+<div class="register-page">
	2	+ <div class="welcome-message">
	3	+ <h1>{{"account.register.welcomeMessageTitle" \| translate }}</h1>
	4	+ <div class="environment-signup-intro" ng-bind-html="ctrl.environment.signup_intro"></div>
	5	+ </div>
	6	+ <form name="signupForm">
	7	+ <div class="row">
	8	+ <div class="col-md-12 register-field">
	9	+ <div class="input-group">
	10	+ <span class="input-group-addon"><i class="fa fa-male"></i><i class="fa fa-female"></i></span>
	11	+ <input type="text" class="form-control" id="name" name="fullName" placeholder="{{'account.register.fullNameLabel' \| translate }}" ng-model="ctrl.account.name">
	12	+ </div>
	13	+ </div>
	14	+
	15	+ <div class="form-group col-md-12 register-field" ng-class="ctrl.isInvalid(signupForm.username)">
	16	+ <div class="input-group">
	17	+ <span class="input-group-addon" style="font-weight: bold;"><i class="fa fa-globe"></i> {{ ctrl.environment.host }}</span>
	18	+ <input type="text" id="username" name="username" class="form-control" placeholder="{{'account.register.usernameLabel' \| translate }}" ng-model="ctrl.account.login" required>
	19	+ </div>
	20	+ <div class="help-block" ng-show="signupForm.username.$touched" ng-messages="signupForm.username.$error">
	21	+ <ul class="list-unstyled">
	22	+ <li ng-messages-include="languages/messages.html"></li>
	23	+ </ul>
	24	+ </div>
	25	+ </div>
	26	+
	27	+ <div class="form-group col-md-12 register-field" ng-class="ctrl.isInvalid(signupForm.email)">
	28	+ <div class="input-group">
	29	+ <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
	30	+ <input type="email" class="form-control" id="email" name="email" placeholder="{{'account.register.emailLabel' \| translate }}" ng-model="ctrl.account.email" required>
	31	+ </div>
	32	+ <div class="help-block" ng-show="signupForm.email.$touched" ng-messages="signupForm.email.$error">
	33	+ <ul class="list-unstyled">
	34	+ <li ng-messages-include="languages/messages.html"></li>
	35	+ </ul>
	36	+ </div>
	37	+ </div>
	38	+
	39	+ <div class="form-group col-md-6 register-field" ng-class="ctrl.isInvalid(signupForm.password)">
	40	+ <div class="input-group">
	41	+ <span class="input-group-addon"><i class="fa fa-lock"></i></span>
	42	+ <input type="password" class="form-control" id="password" name="password" placeholder="{{'account.register.passwordLabel' \| translate }}" ng-model="ctrl.account.password" required>
	43	+ </div>
	44	+ <div class="help-block" ng-show="signupForm.password.$touched" ng-messages="signupForm.password.$error">
	45	+ <ul class="list-unstyled">
	46	+ <li ng-messages-include="languages/messages.html"></li>
	47	+ </ul>
	48	+ </div>
	49	+ </div>
	50	+
	51	+ <div class="form-group col-md-6 register-field" ng-class="ctrl.isInvalid(signupForm.passwordConfirm)">
	52	+ <div class="input-group">
	53	+ <span class="input-group-addon"><i class="fa fa-unlock-alt"></i></span>
	54	+ <input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" match-password="password" placeholder="{{'account.register.passwordConfirmationLabel' \| translate}}" ng-model="ctrl.account.passwordConfirmation" required>
	55	+ </div>
	56	+ <div class="help-block" ng-show="signupForm.passwordConfirm.$touched" ng-messages="signupForm.passwordConfirm.$error">
	57	+ <ul class="list-unstyled">
	58	+ <li ng-messages-include="languages/messages.html"></li>
	59	+ <li ng-message="passwordMatch" translate="messages.invalid.passwordMatch"></li>
	60	+ </ul>
	61	+ </div>
	62	+ </div>
	63	+
	64	+ <div class="col-md-12">
	65	+ <p class="terms-info">{{"account.register.accountCreatingMessage" \| translate}} <a (click)="ctrl.openTerms()" href="#">{{"account.register.termsOfUseMessage" \| translate}}</a>.</p>
	66	+ </div>
	67	+
	68	+ <div class="col-md-12">
	69	+ <button type="submit" class="btn btn-default" ng-disabled="signupForm.$invalid" ng-click="ctrl.signup()">{{"account.register.signupMessage" \| translate}}</button>
	70	+ </div>
	71	+
	72	+ </div>
	73	+ </form>
	74	+
	75	+ <p class="already-registered-message">{{"account.register.haveAccountMessage" \| translate}}</p>
	76	+
	77	+</div>
...	...
...	...	@@ -0,0 +1,7 @@
	1	+<div class="modal-header">
	2	+ <h3 class="modal-title">Register terms</h3>
	3	+</div>
	4	+<div class="modal-body modal-body-overflow" ng-bind-html="ctrl.environment.terms_of_use"></div>
	5	+<div class="modal-footer">
	6	+ <button class="btn btn-primary" type="button" (click)="vm.closeTerms()">OK</button>
	7	+</div>
...	...
...	...	@@ -0,0 +1,52 @@
	1	+import { ComponentTestHelper, createClass } from "../../spec/component-test-helper";
	2	+import * as helpers from "../../spec/helpers";
	3	+import { RegisterComponent } from "./register.component";
	4	+// import {RegisterService} from "../../lib/ng-noosfero-api/http/register.service"
	5	+
	6	+
	7	+describe("Register Component", () => {
	8	+ const htmlTemplate: string = '<noosfero-register></noosfero-register>';
	9	+
	10	+ let helper: ComponentTestHelper<RegisterComponent>;
	11	+ let registerService = helpers.mocks.registerService;
	12	+ let stateService = jasmine.createSpyObj("$state", ["transitionTo"]);
	13	+ let notificationService = helpers.mocks.notificationService;
	14	+ notificationService.success = jasmine.createSpy('success');
	15	+ notificationService.error = jasmine.createSpy('error');
	16	+
	17	+
	18	+ let account: any = {
	19	+ id: 1,
	20	+ login: 'test',
	21	+ email: 'test@email.com',
	22	+ password: 'xxx',
	23	+ passwordConfirmation: 'xxx'
	24	+ };
	25	+
	26	+ beforeEach(() => {
	27	+ angular.mock.module('templates');
	28	+ angular.mock.module('ngSanitize');
	29	+ angular.mock.module('ngMessages');
	30	+ angular.mock.module('ngPassword');
	31	+ });
	32	+
	33	+ beforeEach((done) => {
	34	+ let cls = createClass({
	35	+ template: htmlTemplate,
	36	+ directives: [RegisterComponent],
	37	+ providers: [
	38	+ helpers.createProviderToValue('$state', stateService),
	39	+ helpers.createProviderToValue('$uibModal', helpers.mocks.$modal),
	40	+ helpers.createProviderToValue('RegisterService', registerService),
	41	+ helpers.createProviderToValue('NotificationService', notificationService),
	42	+ helpers.createProviderToValue('EnvironmentService', helpers.mocks.environmentService)
	43	+ ]
	44	+ });
	45	+ helper = new ComponentTestHelper<RegisterComponent>(cls, done);
	46	+ });
	47	+
	48	+ it('register page was rendered', () => {
	49	+ expect(helper.debugElement.query('div.register-page').length).toEqual(1);
	50	+ });
	51	+
	52	+});
...	...
...	...	@@ -0,0 +1,66 @@
	1	+import { Inject, Input, Component, Output, EventEmitter, provide } from 'ng-forward';
	2	+import { RegisterService } from "./../../lib/ng-noosfero-api/http/register.service";
	3	+import { NotificationService } from "./../shared/services/notification.service";
	4	+import { EnvironmentService } from "../../lib/ng-noosfero-api/http/environment.service";
	5	+import { RegisterController } from "./register.controller";
	6	+import { IModalComponent } from "../shared/components/interfaces";
	7	+
	8	+@Component({
	9	+ selector: 'noosfero-register',
	10	+ templateUrl: 'app/account/register-component.html',
	11	+ providers: [
	12	+ provide('registerService', { useClass: RegisterService })
	13	+ ]
	14	+})
	15	+
	16	+@Inject('$state', '$uibModal', '$scope', RegisterService, NotificationService, EnvironmentService)
	17	+export class RegisterComponent {
	18	+ @Input() account: any;
	19	+ environment: noosfero.Environment;
	20	+
	21	+ modalInstance: ng.ui.bootstrap.IModalServiceInstance;
	22	+
	23	+ constructor(
	24	+ private $state: ng.ui.IStateService,
	25	+ private $uibModal: ng.ui.bootstrap.IModalService,
	26	+ private $scope: ng.IScope,
	27	+ public registerService: RegisterService,
	28	+ private notificationService: NotificationService,
	29	+ private environmentService: EnvironmentService
	30	+ ) {
	31	+ this.account = {};
	32	+ this.environment = environmentService.getCurrentEnvironment();
	33	+ }
	34	+
	35	+ signup() {
	36	+ if (this.account.password === this.account.passwordConfirmation) {
	37	+ this.registerService.createAccount(this.account).then((response) => {
	38	+
	39	+ if (response.status === 201) {
	40	+ this.$state.transitionTo('main.environment');
	41	+ this.notificationService.success({ title: "account.register.success.title", message: "account.register.success.message" });
	42	+ } else {
	43	+ throw new Error('Invalid attributes');
	44	+ }
	45	+ });
	46	+ } else {
	47	+ this.notificationService.error({ message: "account.register.passwordConfirmation.failed" });
	48	+ }
	49	+ }
	50	+
	51	+ isInvalid(field: any): any {
	52	+ return { 'has-error': field['$touched'] && field['$invalid'] };
	53	+ }
	54	+
	55	+ openTerms() {
	56	+
	57	+ this.modalInstance = this.$uibModal.open({
	58	+ templateUrl: 'app/account/register-terms.html',
	59	+ size: 'lg',
	60	+ controller: RegisterController,
	61	+ controllerAs: 'vm',
	62	+ bindToController: true,
	63	+ scope: this.$scope
	64	+ });
	65	+ }
	66	+}
...	...
...	...	@@ -0,0 +1,17 @@
	1	+import { Input } from "ng-forward";
	2	+import { IModalComponent } from "../shared/components/interfaces";
	3	+
	4	+export class RegisterController {
	5	+
	6	+ static $inject = ["$log", "$stateParams", "$scope"];
	7	+ ctrl: IModalComponent;
	8	+
	9	+ constructor(
	10	+ private $log: ng.ILogService,
	11	+ private $stateParams: any
	12	+ ) { }
	13	+
	14	+ closeTerms() {
	15	+ this.ctrl.modalInstance.dismiss('ok');
	16	+ }
	17	+}
...	...
...	...	@@ -0,0 +1,10 @@
	1	+<div class="row">
	2	+ <div class="col-md-3"></div>
	3	+
	4	+ <!-- component at center of page -->
	5	+ <div class="col-md-6">
	6	+ <noosfero-register></noosfero-register>
	7	+ </div>
	8	+
	9	+ <div class="col-md-3"></div>
	10	+</div>
...	...
...	...	@@ -0,0 +1,44 @@
	1	+.modal .modal-body-overflow {
	2	+ max-height: 420px;
	3	+ overflow-y: auto;
	4	+}
	5	+
	6	+.register-page button {
	7	+ width: 100%;
	8	+ text-transform: uppercase;
	9	+ font-weight: 600;
	10	+}
	11	+
	12	+.register-page .light-text {
	13	+ color: #BBB;
	14	+ margin-top: 0px;
	15	+ margin-bottom: 0px;
	16	+ font-weight: 600;
	17	+}
	18	+
	19	+.register-page .terms-info {
	20	+ margin-top: 30px;
	21	+ margin-bottom: 30px;
	22	+ font-weight: bold;
	23	+}
	24	+
	25	+.register-page .welcome-message {
	26	+ text-align: center;
	27	+}
	28	+
	29	+.register-page .already-registered-message {
	30	+ margin-top: 60px;
	31	+ text-align: center;
	32	+}
	33	+
	34	+.register-page input {
	35	+ height: 40px;
	36	+}
	37	+
	38	+.register-page .register-field {
	39	+ margin-bottom: 25px;
	40	+}
	41	+
	42	+.register-page input:focus {
	43	+ border: 2px solid #bbb;
	44	+}
...	...
1	1	import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
	2	+import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
2	3	import * as helpers from '../../../spec/helpers';
3	4	import {DesignModeTogglerComponent} from './designModeToggler.component';
4	5	import {DesignModeService} from './designMode.service';
5	6	import {INoosferoLocalStorage} from "./../../shared/models/interfaces";
6	7
7	8	describe('DesignModeToggler Component', () => {
8		- const htmlTemplate: string = '<noosfero-design-toggler></noosfero-design-toggler>';
	9	+ const htmlTemplate: string = '<design-toggler></design-toggler>';
9	10
10	11	let helper: ComponentTestHelper<DesignModeTogglerComponent>;
11	12	beforeEach(() => {
12	13	angular.mock.module('templates');
13	14	angular.mock.module('ngSanitize');
14		- angular.mock.module('toggle-switch');
	15	+ angular.mock.module('uiSwitch');
15	16	});
16	17
17	18	let designModeService: DesignModeService;
...	...	@@ -30,12 +31,12 @@ describe('DesignModeToggler Component', () => {
30	31	});
31	32
32	33	it('changes css classes representing the switch is on or off', () => {
33		- expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeTruthy();
34		- expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeFalsy();
	34	+ let switchEl: INgForwardJQuery = helper.debugElement.query('span.switch');
	35	+
	36	+ expect(switchEl.hasClass('checked')).toBeFalsy();
35	37	helper.component.inDesignMode = true;
36	38	helper.detectChanges();
37		- expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeTruthy();
38		- expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeFalsy();
	39	+ expect(switchEl.hasClass('checked')).toBeTruthy();
39	40	});
40	41
41	42	it('emits event with value "true" when changing inDesignMode to On', (done) => {
...	...	@@ -60,4 +61,4 @@ describe('DesignModeToggler Component', () => {
60	61	helper.component.inDesignMode = false;
61	62	helper.detectChanges();
62	63	});
63		-});
64	64	\ No newline at end of file
	65	+});
...	...