Add "agree to the terms" checkbox in registration form

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 e433b0016b7c13ff4a7725f06a02c152c54a0ca2..5970cac0167835c9a40caffafc05a1f61f334cec 100644 (file)
--- 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 @@
   <div [innerHTML]="descriptionHTML"></div>
 </div>
 
-<div class="terms">
+<div class="terms" id="terms-section">
   <div i18n class="section-title">Terms</div>
 
   <div [innerHTML]="termsHTML"></div>

diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts
index e4f7481b5a7e9f25b424cd7ccfaba643e5d1713e..0bb7d25e6f5c606da996ae66195930b9262f14bc 100644 (file)
--- 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 d10e17ca7659cd3170982d6aa866ebc88efcac7a..19a8bef25c6f008f4c030e90144ebdab44adc8be 100644 (file)
--- 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 bb6ff20686245e2ce997d0c71252a6c05faf3a89..5edae2e3803c0d130a5f4591a15bbd642431a47b 100644 (file)
--- 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 820e7a6212e98882a20d69b0d26ba1ad62c900f4..38691f05045efe0074da56cc81ceb6e527509cde 100644 (file)
--- a/client/src/app/shared/forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/forms/peertube-checkbox.component.html
@@ -3,6 +3,7 @@
     <input type="checkbox" [(ngModel)]="checked" (ngModelChange)="onModelChange()" [id]="inputName" [disabled]="isDisabled" />
     <span role="checkbox" [attr.aria-checked]="checked"></span>
     <span *ngIf="labelText">{{ labelText }}</span>
+    <span *ngIf="labelHtml" [innerHTML]="labelHtml"></span>
   </label>
 
   <my-help *ngIf="helpHtml" tooltipPlacement="top" helpType="custom" i18n-customHtml [customHtml]="helpHtml"></my-help>

diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts
index c626c4c5df94c5441d89ff6eeae0856629afad29..bbc9904dfe8aa2ace1b58c28c289828a15849dcc 100644 (file)
--- 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 2fe9a42818013e6fd03c32d81bccd7560eb0b72c..565b695d9281d6f71aae5e37a55eca27b4af1911 100644 (file)
--- a/client/src/app/signup/signup.component.html
+++ b/client/src/app/signup/signup.component.html
@@ -54,6 +54,17 @@
       </div>
     </div>
 
+    <div class="form-group form-group-terms">
+      <my-peertube-checkbox
+        inputName="terms" formControlName="terms"
+        i18n-labelHtml labelHtml="I have read and agree to the <a href='/about/instance#terms-section' target='_blank'rel='noopener noreferrer'>Terms</a> of this instance"
+      ></my-peertube-checkbox>
+
+      <div *ngIf="formErrors.terms" class="form-error">
+        {{ formErrors.terms }}
+      </div>
+    </div>
+
     <input type="submit" i18n-value value="Signup" [disabled]="!form.valid">
   </form>
 

diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss
index 8ea4ec997d74068aa9b4e0320df58b1440b59884..e6d4842979b43d6edbea895a1f7cf5b732cae1c0 100644 (file)
--- 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 53d144572350d1c0168c79697df5565879e549ca..076dac4547737db563b1e46c8c1abfb372b9c870 100644 (file)
--- 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