Add "agree to the terms" checkbox in registration form

9 files changed, 31 insertions, 6 deletions

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