Merge branch 'register_page' into 'master'

See merge request !47

Merge branch 'register_page' into 'master'
See merge request !47
Michel Felipe
2 parents fb1e923a b4a0a739
Showing 29 changed files with 474 additions and 38 deletions 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/layout/blocks/block.component.ts
src/app/layout/navbar/navbar.html
src/app/layout/navbar/navbar.ts
src/app/layout/scss/_forms.scss
src/app/login/login.html
src/app/login/session.service.ts
src/app/main/main.component.ts
src/app/profile/custom-content/custom-content.component.ts
src/app/shared/components/interfaces.ts
src/languages/en.json
src/languages/messages.html
@@ -39,7 +39,8 @@
     "angular-click-outside": "^2.7.1",
     "ng-ckeditor": "^0.2.1",
     "angular-tag-cloud": "^0.3.0",
-    "angular-ui-switch": "^0.1.1"
+    "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;
+}
@@ -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,
@@ -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;
@@ -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
+}
@@ -21,6 +21,7 @@ import { PersonTagsPluginInterestsBlockComponent } from &quot;../layout/blocks/person
 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 { RegisterComponent } from "../account/register.component";
 import { MembersBlockComponent } from "../layout/blocks/members/members-block.component";
 import { CommunitiesBlockComponent } from "../layout/blocks/communities/communities-block.component";
@@ -34,6 +35,7 @@ import { AuthService } from &quot;../login/auth.service&quot;;
 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";
@@ -113,16 +115,16 @@ 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, 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", "ngTagCloud", "noosfero.init", "uiSwitch"]
+        "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch", "ngPassword"]
 })
 @StateConfig([
     {
@@ -143,7 +145,6 @@ export class EnvironmentContent {
         url: '/',
         component: EnvironmentComponent,
         name: 'main.environment',
-        abstract: true,
         views: {
             "content": {
                 templateUrl: "app/environment/environment.html",
@@ -153,6 +154,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,
-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,
-
-
 export interface IComponentWithPermissions {
     permissions: () => string[];
-}
 \ No newline at end of file
+}
+
+export interface IModalComponent {
+    $uibModal: ng.ui.bootstrap.IModalService;
+    modalInstance: ng.ui.bootstrap.IModalServiceInstance;
+}
@@ -28,6 +28,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",
@@ -100,5 +101,23 @@
   "block.edition.language.label": "Show for:",
   "activities.event.description": "Event on",
   "time.at": "at",
-  "date.on": "On"
+  "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>
@@ -28,6 +28,7 @@
   "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",
@@ -100,5 +101,26 @@
   "block.edition.language.label": "Exibir para:",
   "activities.event.description": "Evento em",
   "time.at": "às",
-  "date.on": "Em"
+  "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; {
             });
         });
-
     });
 });
@@ -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: () => { }
     }
 };
@@ -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",
	@@ -0,0 +1 @@		@@ -0,0 +1 @@
		1	+export * from "./register.component";
@@ -0,0 +1,77 @@		@@ -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 @@		@@ -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 @@		@@ -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 @@		@@ -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 @@		@@ -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 @@		@@ -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 @@		@@ -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	+}
	@@ -20,6 +20,12 @@		@@ -20,6 +20,12 @@
20	<a ng-href="#" ng-click="ctrl.openLogin()">{{"navbar.login" \| translate}}</a>	20	<a ng-href="#" ng-click="ctrl.openLogin()">{{"navbar.login" \| translate}}</a>
21	</li>	21	</li>
22		22
		23	+ <li ng-show="!ctrl.currentUser">
		24	+ <a ui-sref="main.register">
		25	+ Sign Up
		26	+ </a>
		27	+ </li>
		28	+
23	<li class="dropdown profile-menu" ng-show="ctrl.currentUser" uib-dropdown>	29	<li class="dropdown profile-menu" ng-show="ctrl.currentUser" uib-dropdown>
24	<a href="#" class="dropdown-toggle" aria-expanded="false" uib-dropdown-toggle>	30	<a href="#" class="dropdown-toggle" aria-expanded="false" uib-dropdown-toggle>
25	<noosfero-profile-image [profile]="ctrl.currentUser.person" class="profile-image"></noosfero-profile-image>	31	<noosfero-profile-image [profile]="ctrl.currentUser.person" class="profile-image"></noosfero-profile-image>
	@@ -2,6 +2,10 @@ label {		@@ -2,6 +2,10 @@ label {
2	cursor: pointer;	2	cursor: pointer;
3	}	3	}
4		4
		5	+.has-error .help-block {
		6	+ font-weight: bold;
		7	+}
		8	+
5	.checkbox-nice {	9	.checkbox-nice {
6	position: relative;	10	position: relative;
7	padding-left: 15px;	11	padding-left: 15px;