Add "agree to the terms" checkbox in registration form

5 files changed, 14 insertions, 4 deletions

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