Commit 015b68e262d6ab38430665210724cb3fba32ac9a
1 parent
4c25e839
Exists in
master
and in
7 other branches
Added the modal to show environment terms of use text
Showing
10 changed files
with
109 additions
and
59 deletions
Show diff stats
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"> |
@@ -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 'ng-forw | @@ -2,6 +2,8 @@ import { Inject, Input, Component, Output, EventEmitter, provide } from '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 "../../lib/ng-noosfero-api/http/environment.s | @@ -11,16 +13,20 @@ import { EnvironmentService } from "../../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 | } |
@@ -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 | -} |
@@ -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 './../../shared/ | @@ -17,14 +17,14 @@ import {BootstrapSwitcherComponent, BootstrapSwitcherItem} from './../../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 | } |