From b4a929accf576edc733fde75a81dfad9a3d288ed Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 25 Jul 2018 11:01:53 +0200 Subject: Add "agree to the terms" checkbox in registration form --- .../app/+about/about-instance/about-instance.component.html | 2 +- client/src/app/shared/forms/form-reactive.ts | 2 +- .../shared/forms/form-validators/form-validator.service.ts | 4 +--- .../shared/forms/form-validators/user-validators.service.ts | 10 ++++++++++ client/src/app/shared/forms/peertube-checkbox.component.html | 1 + client/src/app/shared/forms/peertube-checkbox.component.ts | 1 + client/src/app/signup/signup.component.html | 11 +++++++++++ client/src/app/signup/signup.component.scss | 3 +++ client/src/app/signup/signup.component.ts | 3 ++- 9 files changed, 31 insertions(+), 6 deletions(-) (limited to 'client/src') diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html index e433b0016..5970cac01 100644 --- a/client/src/app/+about/about-instance/about-instance.component.html +++ b/client/src/app/+about/about-instance/about-instance.component.html @@ -12,7 +12,7 @@
-
+
Terms
diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts index e4f7481b5..0bb7d25e6 100644 --- a/client/src/app/shared/forms/form-reactive.ts +++ b/client/src/app/shared/forms/form-reactive.ts @@ -23,7 +23,7 @@ export abstract class FormReactive { this.formErrors = formErrors this.validationMessages = validationMessages - this.form.valueChanges.subscribe(data => this.onValueChanged(false)) + this.form.valueChanges.subscribe(() => this.onValueChanged(false)) } protected onValueChanged (forceCheck = false) { diff --git a/client/src/app/shared/forms/form-validators/form-validator.service.ts b/client/src/app/shared/forms/form-validators/form-validator.service.ts index d10e17ca7..19a8bef25 100644 --- a/client/src/app/shared/forms/form-validators/form-validator.service.ts +++ b/client/src/app/shared/forms/form-validators/form-validator.service.ts @@ -1,7 +1,6 @@ import { FormBuilder, FormControl, FormGroup, ValidatorFn } from '@angular/forms' import { Injectable } from '@angular/core' import { FormReactiveErrors, FormReactiveValidationMessages } from '@app/shared/forms/form-reactive' -import { I18n } from '@ngx-translate/i18n-polyfill' export type BuildFormValidator = { VALIDATORS: ValidatorFn[], @@ -18,8 +17,7 @@ export type BuildFormDefaultValues = { export class FormValidatorService { constructor ( - private formBuilder: FormBuilder, - private i18n: I18n + private formBuilder: FormBuilder ) {} buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) { diff --git a/client/src/app/shared/forms/form-validators/user-validators.service.ts b/client/src/app/shared/forms/form-validators/user-validators.service.ts index bb6ff2068..5edae2e38 100644 --- a/client/src/app/shared/forms/form-validators/user-validators.service.ts +++ b/client/src/app/shared/forms/form-validators/user-validators.service.ts @@ -12,6 +12,7 @@ export class UserValidatorsService { readonly USER_ROLE: BuildFormValidator readonly USER_DISPLAY_NAME: BuildFormValidator readonly USER_DESCRIPTION: BuildFormValidator + readonly USER_TERMS: BuildFormValidator constructor (private i18n: I18n) { @@ -89,5 +90,14 @@ export class UserValidatorsService { 'maxlength': this.i18n('Description cannot be more than 250 characters long.') } } + + this.USER_TERMS = { + VALIDATORS: [ + Validators.requiredTrue + ], + MESSAGES: { + 'required': this.i18n('You must to agree with the instance terms in order to registering on it.') + } + } } } diff --git a/client/src/app/shared/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html index 820e7a621..38691f050 100644 --- a/client/src/app/shared/forms/peertube-checkbox.component.html +++ b/client/src/app/shared/forms/peertube-checkbox.component.html @@ -3,6 +3,7 @@ {{ labelText }} + diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts index c626c4c5d..bbc9904df 100644 --- a/client/src/app/shared/forms/peertube-checkbox.component.ts +++ b/client/src/app/shared/forms/peertube-checkbox.component.ts @@ -17,6 +17,7 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor { @Input() checked = false @Input() inputName: string @Input() labelText: string + @Input() labelHtml: string @Input() helpHtml: string isDisabled = false diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html index 2fe9a4281..565b695d9 100644 --- a/client/src/app/signup/signup.component.html +++ b/client/src/app/signup/signup.component.html @@ -54,6 +54,17 @@
+
+ + +
+ {{ formErrors.terms }} +
+
+ diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss index 8ea4ec997..e6d484297 100644 --- a/client/src/app/signup/signup.component.scss +++ b/client/src/app/signup/signup.component.scss @@ -10,6 +10,9 @@ } } +.form-group-terms { + margin: 30px 0; +} input:not([type=submit]) { @include peertube-input-text(340px); diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts index 53d144572..076dac454 100644 --- a/client/src/app/signup/signup.component.ts +++ b/client/src/app/signup/signup.component.ts @@ -38,7 +38,8 @@ export class SignupComponent extends FormReactive implements OnInit { this.buildForm({ username: this.userValidatorsService.USER_USERNAME, password: this.userValidatorsService.USER_PASSWORD, - email: this.userValidatorsService.USER_EMAIL + email: this.userValidatorsService.USER_EMAIL, + terms: this.userValidatorsService.USER_TERMS }) this.serverService.configLoaded -- cgit v1.2.3