Commit 6b66bf91d4eca6487bffcaa7af5dd52e20ae0f88

Authored by Michel Felipe
1 parent a7fe2119

Added the modal to show environment terms of use text

src/app/account/register-component.html
... ... @@ -2,7 +2,6 @@
2 2 <div class="welcome-message">
3 3 <h1>{{"account.register.welcomeMessageTitle" | translate }}</h1>
4 4 <div class="environment-signup-intro" ng-bind-html="ctrl.environment.signup_intro"></div>
5   - <p>{{"account.register.seeMoreMessage" | translate}} <a href="#">{{"account.register.informationsMessage" | translate}} </a></p>
6 5 </div>
7 6 <form name="signupForm">
8 7 <div class="row">
... ... @@ -62,7 +61,7 @@
62 61 </div>
63 62  
64 63 <div class="col-md-12">
65   - <p class="terms-info">{{"account.register.accountCreatingMessage" | translate}} <a href="#">{{"account.register.termsOfUseMessage" | translate}}</a>.</p>
  64 + <p class="terms-info">{{"account.register.accountCreatingMessage" | translate}} <a (click)="ctrl.openTerms()" href="#">{{"account.register.termsOfUseMessage" | translate}}</a>.</p>
66 65 </div>
67 66  
68 67 <div class="col-md-12">
... ...
src/app/account/register-terms.html 0 → 100644
... ... @@ -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>
... ...
src/app/account/register.component.ts
... ... @@ -2,6 +2,8 @@ import { Inject, Input, Component, Output, EventEmitter, provide } from &#39;ng-forw
2 2 import { RegisterService } from "./../../lib/ng-noosfero-api/http/register.service";
3 3 import { NotificationService } from "./../shared/services/notification.service";
4 4 import { EnvironmentService } from "../../lib/ng-noosfero-api/http/environment.service";
  5 +import { RegisterController } from "./register.controller";
  6 +import { IModalComponent } from "../shared/components/interfaces";
5 7  
6 8 @Component({
7 9 selector: 'noosfero-register',
... ... @@ -11,16 +13,20 @@ import { EnvironmentService } from &quot;../../lib/ng-noosfero-api/http/environment.s
11 13 ]
12 14 })
13 15  
14   -@Inject("$state", RegisterService, NotificationService, EnvironmentService)
  16 +@Inject('$state', '$uibModal', '$scope', RegisterService, NotificationService, EnvironmentService)
15 17 export class RegisterComponent {
16 18 @Input() account: any;
17 19 environment: noosfero.Environment;
18 20  
  21 + modalInstance: ng.ui.bootstrap.IModalServiceInstance;
  22 +
19 23 constructor(
20 24 private $state: ng.ui.IStateService,
  25 + private $uibModal: ng.ui.bootstrap.IModalService,
  26 + private $scope: ng.IScope,
21 27 public registerService: RegisterService,
22 28 private notificationService: NotificationService,
23   - private environmentService: EnvironmentService
  29 + private environmentService: EnvironmentService,
24 30 ) {
25 31 this.account = {};
26 32 this.environment = environmentService.getCurrentEnvironment();
... ... @@ -44,4 +50,16 @@ export class RegisterComponent {
44 50 isInvalid(field: Object): Object {
45 51 return { 'has-error': field['$touched'] && field['$invalid'] };
46 52 }
  53 +
  54 + openTerms() {
  55 +
  56 + this.modalInstance = this.$uibModal.open({
  57 + templateUrl: 'app/account/register-terms.html',
  58 + size: 'lg',
  59 + controller: RegisterController,
  60 + controllerAs: 'vm',
  61 + bindToController: true,
  62 + scope: this.$scope
  63 + });
  64 + }
47 65 }
... ...
src/app/account/register.controller.ts 0 → 100644
... ... @@ -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 +}
... ...
src/app/account/scss/register-component.scss
... ... @@ -1,38 +0,0 @@
1   -.register-page button {
2   - width: 100%;
3   - text-transform: uppercase;
4   - font-weight: 600;
5   -}
6   -
7   -.register-page .light-text {
8   - color: #BBB;
9   - margin-top: 0px;
10   - margin-bottom: 0px;
11   - font-weight: 600;
12   -}
13   -
14   -.register-page .terms-info {
15   - margin-top: 30px;
16   - margin-bottom: 30px;
17   -}
18   -
19   -.register-page .welcome-message {
20   - text-align: center;
21   -}
22   -
23   -.register-page .already-registered-message {
24   - margin-top: 60px;
25   - text-align: center;
26   -}
27   -
28   -.register-page input {
29   - height: 40px;
30   -}
31   -
32   -.register-page .register-field {
33   - margin-bottom: 25px;
34   -}
35   -
36   -.register-page input:focus {
37   - border: 2px solid #bbb;
38   -}
src/app/account/scss/register.scss 0 → 100644
... ... @@ -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 +}
... ...
src/app/layout/navbar/navbar.ts
1   -import {Component, Inject, EventEmitter, Input} from "ng-forward";
2   -import {LanguageSelectorComponent} from "../language-selector/language-selector.component";
3   -import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
4   -import {EnvironmentService} from "./../../../lib/ng-noosfero-api/http/environment.service";
5   -import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
6   -import {BodyStateClassesService} from '../services/body-state-classes.service';
7   -import {DesignModeTogglerComponent} from './../../admin/layout-edit/designModeToggler.component';
8   -import {BootstrapSwitcherComponent, BootstrapSwitcherItem} from './../../shared/components/bootstrap-switcher/bootstrap-switcher.component';
  1 +import { Component, Inject, EventEmitter, Input } from "ng-forward";
  2 +import { LanguageSelectorComponent } from "../language-selector/language-selector.component";
  3 +import { SessionService, AuthService, AuthController, AuthEvents } from "./../../login";
  4 +import { EnvironmentService } from "./../../../lib/ng-noosfero-api/http/environment.service";
  5 +import { SidebarNotificationService } from "../sidebar/sidebar.notification.service";
  6 +import { BodyStateClassesService } from '../services/body-state-classes.service';
  7 +import { DesignModeTogglerComponent } from './../../admin/layout-edit/designModeToggler.component';
  8 +import { BootstrapSwitcherComponent, BootstrapSwitcherItem } from './../../shared/components/bootstrap-switcher/bootstrap-switcher.component';
9 9  
10 10 @Component({
11 11 selector: "acme-navbar",
... ... @@ -17,14 +17,14 @@ import {BootstrapSwitcherComponent, BootstrapSwitcherItem} from &#39;./../../shared/
17 17 export class Navbar {
18 18  
19 19 private currentUser: noosfero.User;
20   - private modalInstance: any = null;
  20 + private modalInstance: ng.ui.bootstrap.IModalServiceInstance;
21 21 public showHamburger: boolean = false;
22 22 public currentEnvironment: noosfero.Environment = <any>{ name: '' };
23 23 /**
24 24 *
25 25 */
26 26 constructor(
27   - private $uibModal: any,
  27 + private $uibModal: ng.ui.bootstrap.IModalService,
28 28 public authService: AuthService,
29 29 private session: SessionService,
30 30 private $state: ng.ui.IStateService,
... ...
src/app/shared/components/interfaces.ts
1   -
2   -
3 1 export interface IComponentWithPermissions {
4 2 permissions: () => string[];
5   -}
6 3 \ No newline at end of file
  4 +}
  5 +
  6 +export interface IModalComponent {
  7 + $uibModal: ng.ui.bootstrap.IModalService;
2
  • 0743c2eb05e68c92baa5f8c498995a20?s=40&d=identicon
    Daniela Feitosa @daniela

    Tá dando erro no build: (6,22): error TS2305: Module 'angular.ui' has no exported member 'bootstrap'.

    Choose File ...   File name...
    Cancel
  • Me
    Michel Felipe @mfdeveloper

    Você precisa executar na linha de comando: typings install para "instalar" os arquivos de definição typescript de modulos angular que estão escritos em javascript (como por exemplo, o módulo angular-ui-bootstrap).

    Toda vez que vc visualizar a alteração do arquivo typings.json, execute um typings install antes :)

    Choose File ...   File name...
    Cancel
  8 + modalInstance: ng.ui.bootstrap.IModalServiceInstance;
  9 +}
... ...
src/languages/en.json
... ... @@ -100,8 +100,6 @@
100 100 "block.edition.display_user.not_logged": "Not logged",
101 101 "block.edition.language.label": "Show for:",
102 102 "account.register.welcomeMessageTitle": "Nice to have you there!",
103   - "account.register.seeMoreMessage": "See more ",
104   - "account.register.informationsMessage": "informations",
105 103 "account.register.fullNameLabel": "Full name",
106 104 "account.register.usernameLabel": "Username",
107 105 "account.register.emailLabel": "Email",
... ... @@ -117,5 +115,6 @@
117 115 "messages.invalid.required": "This field is required",
118 116 "messages.invalid.maxlength": "This field is too long",
119 117 "messages.invalid.minlength": "This field is too short",
120   - "messages.invalid.email": "This needs to be a valid email"
  118 + "messages.invalid.email": "This needs to be a valid email",
  119 + "messages.invalid.passwordConfirm": "Passwords do not match"
121 120 }
... ...
src/languages/pt.json
... ... @@ -100,8 +100,6 @@
100 100 "block.edition.display_user.not_logged": "Não logados",
101 101 "block.edition.language.label": "Exibir para:",
102 102 "account.register.welcomeMessageTitle": "Ótimo ter você aqui!",
103   - "account.register.seeMoreMessage": "Saiba mais ",
104   - "account.register.informationsMessage": "informações",
105 103 "account.register.fullNameLabel": "Nome completo",
106 104 "account.register.lastNameLabel": "Sobrenome",
107 105 "account.register.usernameLabel": "Nome de usuário",
... ... @@ -118,5 +116,6 @@
118 116 "messages.invalid.required": "Campo obrigatório",
119 117 "messages.invalid.maxlength": "O valor é muito longo",
120 118 "messages.invalid.minlength": "O valor é muito curto",
121   - "messages.invalid.email": "Informe um email válido"
  119 + "messages.invalid.email": "Informe um email válido",
  120 + "messages.invalid.passwordConfirm": "As senhas não coincidem"
122 121 }
... ...