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 | } |