Commit 015b68e262d6ab38430665210724cb3fba32ac9a

Authored by Michel Felipe
1 parent 4c25e839

Added the modal to show environment terms of use text

src/app/account/register-component.html
@@ -2,7 +2,6 @@ @@ -2,7 +2,6 @@
2 <div class="welcome-message"> 2 <div class="welcome-message">
3 <h1>{{"account.register.welcomeMessageTitle" | translate }}</h1> 3 <h1>{{"account.register.welcomeMessageTitle" | translate }}</h1>
4 <div class="environment-signup-intro" ng-bind-html="ctrl.environment.signup_intro"></div> 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 </div> 5 </div>
7 <form name="signupForm"> 6 <form name="signupForm">
8 <div class="row"> 7 <div class="row">
@@ -62,7 +61,7 @@ @@ -62,7 +61,7 @@
62 </div> 61 </div>
63 62
64 <div class="col-md-12"> 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 </div> 65 </div>
67 66
68 <div class="col-md-12"> 67 <div class="col-md-12">
src/app/account/register-terms.html 0 → 100644
@@ -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>
src/app/account/register.component.ts
@@ -2,6 +2,8 @@ import { Inject, Input, Component, Output, EventEmitter, provide } from &#39;ng-forw @@ -2,6 +2,8 @@ import { Inject, Input, Component, Output, EventEmitter, provide } from &#39;ng-forw
2 import { RegisterService } from "./../../lib/ng-noosfero-api/http/register.service"; 2 import { RegisterService } from "./../../lib/ng-noosfero-api/http/register.service";
3 import { NotificationService } from "./../shared/services/notification.service"; 3 import { NotificationService } from "./../shared/services/notification.service";
4 import { EnvironmentService } from "../../lib/ng-noosfero-api/http/environment.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";
5 7
6 @Component({ 8 @Component({
7 selector: 'noosfero-register', 9 selector: 'noosfero-register',
@@ -11,16 +13,20 @@ import { EnvironmentService } from &quot;../../lib/ng-noosfero-api/http/environment.s @@ -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 export class RegisterComponent { 17 export class RegisterComponent {
16 @Input() account: any; 18 @Input() account: any;
17 environment: noosfero.Environment; 19 environment: noosfero.Environment;
18 20
  21 + modalInstance: ng.ui.bootstrap.IModalServiceInstance;
  22 +
19 constructor( 23 constructor(
20 private $state: ng.ui.IStateService, 24 private $state: ng.ui.IStateService,
  25 + private $uibModal: ng.ui.bootstrap.IModalService,
  26 + private $scope: ng.IScope,
21 public registerService: RegisterService, 27 public registerService: RegisterService,
22 private notificationService: NotificationService, 28 private notificationService: NotificationService,
23 - private environmentService: EnvironmentService 29 + private environmentService: EnvironmentService,
24 ) { 30 ) {
25 this.account = {}; 31 this.account = {};
26 this.environment = environmentService.getCurrentEnvironment(); 32 this.environment = environmentService.getCurrentEnvironment();
@@ -44,4 +50,16 @@ export class RegisterComponent { @@ -44,4 +50,16 @@ export class RegisterComponent {
44 isInvalid(field: Object): Object { 50 isInvalid(field: Object): Object {
45 return { 'has-error': field['$touched'] && field['$invalid'] }; 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 @@ @@ -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,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 @@ @@ -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 @Component({ 10 @Component({
11 selector: "acme-navbar", 11 selector: "acme-navbar",
@@ -17,14 +17,14 @@ import {BootstrapSwitcherComponent, BootstrapSwitcherItem} from &#39;./../../shared/ @@ -17,14 +17,14 @@ import {BootstrapSwitcherComponent, BootstrapSwitcherItem} from &#39;./../../shared/
17 export class Navbar { 17 export class Navbar {
18 18
19 private currentUser: noosfero.User; 19 private currentUser: noosfero.User;
20 - private modalInstance: any = null; 20 + private modalInstance: ng.ui.bootstrap.IModalServiceInstance;
21 public showHamburger: boolean = false; 21 public showHamburger: boolean = false;
22 public currentEnvironment: noosfero.Environment = <any>{ name: '' }; 22 public currentEnvironment: noosfero.Environment = <any>{ name: '' };
23 /** 23 /**
24 * 24 *
25 */ 25 */
26 constructor( 26 constructor(
27 - private $uibModal: any, 27 + private $uibModal: ng.ui.bootstrap.IModalService,
28 public authService: AuthService, 28 public authService: AuthService,
29 private session: SessionService, 29 private session: SessionService,
30 private $state: ng.ui.IStateService, 30 private $state: ng.ui.IStateService,
src/app/shared/components/interfaces.ts
1 -  
2 -  
3 export interface IComponentWithPermissions { 1 export interface IComponentWithPermissions {
4 permissions: () => string[]; 2 permissions: () => string[];
5 -}  
6 \ No newline at end of file 3 \ No newline at end of file
  4 +}
  5 +
  6 +export interface IModalComponent {
  7 + $uibModal: ng.ui.bootstrap.IModalService;
  8 + modalInstance: ng.ui.bootstrap.IModalServiceInstance;
  9 +}
src/languages/en.json
@@ -103,8 +103,6 @@ @@ -103,8 +103,6 @@
103 "time.at": "at", 103 "time.at": "at",
104 "date.on": "On", 104 "date.on": "On",
105 "account.register.welcomeMessageTitle": "Nice to have you there!", 105 "account.register.welcomeMessageTitle": "Nice to have you there!",
106 - "account.register.seeMoreMessage": "See more ",  
107 - "account.register.informationsMessage": "informations",  
108 "account.register.fullNameLabel": "Full name", 106 "account.register.fullNameLabel": "Full name",
109 "account.register.usernameLabel": "Username", 107 "account.register.usernameLabel": "Username",
110 "account.register.emailLabel": "Email", 108 "account.register.emailLabel": "Email",
@@ -120,5 +118,6 @@ @@ -120,5 +118,6 @@
120 "messages.invalid.required": "This field is required", 118 "messages.invalid.required": "This field is required",
121 "messages.invalid.maxlength": "This field is too long", 119 "messages.invalid.maxlength": "This field is too long",
122 "messages.invalid.minlength": "This field is too short", 120 "messages.invalid.minlength": "This field is too short",
123 - "messages.invalid.email": "This needs to be a valid email" 121 + "messages.invalid.email": "This needs to be a valid email",
  122 + "messages.invalid.passwordConfirm": "Passwords do not match"
124 } 123 }
src/languages/pt.json
@@ -121,5 +121,6 @@ @@ -121,5 +121,6 @@
121 "messages.invalid.required": "Campo obrigatório", 121 "messages.invalid.required": "Campo obrigatório",
122 "messages.invalid.maxlength": "O valor é muito longo", 122 "messages.invalid.maxlength": "O valor é muito longo",
123 "messages.invalid.minlength": "O valor é muito curto", 123 "messages.invalid.minlength": "O valor é muito curto",
124 - "messages.invalid.email": "Informe um email válido" 124 + "messages.invalid.email": "Informe um email válido",
  125 + "messages.invalid.passwordConfirm": "As senhas não coincidem"
125 } 126 }