Add "agree to the terms" checkbox in registration form

3 files changed, 16 insertions, 1 deletions

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