Commit 6b66bf91d4eca6487bffcaa7af5dd52e20ae0f88
1 parent
a7fe2119
Added the modal to show environment terms of use text
Showing
10 changed files
with
109 additions
and
61 deletions
Show diff stats
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"> | ... | ... |
| ... | ... | @@ -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 | 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 "../../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 | } | ... | ... |
| ... | ... | @@ -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 | -} |
| ... | ... | @@ -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 './../../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 |
|
|
| 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 | } | ... | ... |