10 files changed, 116 insertions, 41 deletions

diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
index bafb96a49..86763e801 100644
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@@ -5,29 +5,34 @@
   </div>
 
   <ng-container *ngIf="!signupDisabled">
-    <h1 i18n class="title-page-v2">
+    <h1 class="title-page-v2">
       <strong class="underline-orange">{{ instanceName }}</strong>
       >
-      Create an account
+      <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
     </h1>
 
     <div class="register-content">
       <my-custom-stepper linear>
 
         <cdk-step i18n-label label="About" [editable]="!signupSuccess">
-          <my-signup-step-title mascotImageName="about" i18n>
-            <strong>Create an account</strong>
-            <div>on {{ instanceName }}</div>
+          <my-signup-step-title mascotImageName="about">
+            <strong>
+              <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
+            </strong>
+
+            <div i18n>on {{ instanceName }}</div>
           </my-signup-step-title>
 
-          <my-register-step-about [videoUploadDisabled]="videoUploadDisabled"></my-register-step-about>
+          <my-register-step-about [requiresApproval]="requiresApproval" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-about>
 
           <div class="step-buttons">
             <a i18n class="skip-step underline-orange" routerLink="/login">
               <strong>I already have an account</strong>, I log in
             </a>
 
-            <button i18n cdkStepperNext>Create an account</button>
+            <button cdkStepperNext>
+              <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
+            </button>
           </div>
         </cdk-step>
 
@@ -44,8 +49,8 @@
           ></my-instance-about-accordion>
 
           <my-register-step-terms
-            [hasCodeOfConduct]="!!aboutHtml.codeOfConduct"
-            [minimumAge]="minimumAge"
+            [hasCodeOfConduct]="!!aboutHtml.codeOfConduct" [minimumAge]="minimumAge" [instanceName]="instanceName"
+            [requiresApproval]="requiresApproval"
             (formBuilt)="onTermsFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()"
           ></my-register-step-terms>
 
@@ -94,14 +99,15 @@
               <div class="skip-step-description" i18n>You will be able to create a channel later</div>
             </div>
 
-            <button cdkStepperNext [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()" (click)="signup()" i18n>
-              Create my account
+            <button cdkStepperNext [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()" (click)="signup()">
+              <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
             </button>
           </div>
         </cdk-step>
 
         <cdk-step #lastStep i18n-label label="Done!" [editable]="false">
-          <div *ngIf="!signupSuccess && !signupError" class="done-loader">
+          <!-- Account creation can be a little bit long so display a loader  -->
+          <div *ngIf="!requiresApproval && !signupSuccess && !signupError" class="done-loader">
             <my-loader [loading]="true"></my-loader>
 
             <div i18n>PeerTube is creating your account...</div>
@@ -109,7 +115,10 @@
 
           <div *ngIf="signupError" class="alert alert-danger">{{ signupError }}</div>
 
-          <my-signup-success *ngIf="signupSuccess" [requiresEmailVerification]="requiresEmailVerification"></my-signup-success>
+          <my-signup-success-before-email
+            *ngIf="signupSuccess"
+            [requiresEmailVerification]="requiresEmailVerification" [requiresApproval]="requiresApproval" [instanceName]="instanceName"
+          ></my-signup-success-before-email>
 
           <div *ngIf="signupError" class="steps-button">
             <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts
index 958770ebf..9259d902c 100644
--- a/client/src/app/+signup/+register/register.component.ts
+++ b/client/src/app/+signup/+register/register.component.ts
@@ -5,10 +5,10 @@ import { ActivatedRoute } from '@angular/router'
 import { AuthService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
-import { UserSignupService } from '@app/shared/shared-users'
 import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
 import { UserRegister } from '@shared/models'
 import { ServerConfig } from '@shared/models/server'
+import { SignupService } from '../shared/signup.service'
 
 @Component({
   selector: 'my-register',
@@ -53,7 +53,7 @@ export class RegisterComponent implements OnInit {
   constructor (
     private route: ActivatedRoute,
     private authService: AuthService,
-    private userSignupService: UserSignupService,
+    private signupService: SignupService,
     private hooks: HooksService
   ) { }
 
@@ -61,6 +61,10 @@ export class RegisterComponent implements OnInit {
     return this.serverConfig.signup.requiresEmailVerification
   }
 
+  get requiresApproval () {
+    return this.serverConfig.signup.requiresApproval
+  }
+
   get minimumAge () {
     return this.serverConfig.signup.minimumAge
   }
@@ -132,42 +136,49 @@ export class RegisterComponent implements OnInit {
   skipChannelCreation () {
     this.formStepChannel.reset()
     this.lastStep.select()
+
     this.signup()
   }
 
   async signup () {
     this.signupError = undefined
 
-    const body: UserRegister = await this.hooks.wrapObject(
+    const termsForm = this.formStepTerms.value
+    const userForm = this.formStepUser.value
+    const channelForm = this.formStepChannel?.value
+
+    const channel = this.formStepChannel?.value?.name
+      ? { name: channelForm?.name, displayName: channelForm?.displayName }
+      : undefined
+
+    const body = await this.hooks.wrapObject(
       {
-        ...this.formStepUser.value,
+        username: userForm.username,
+        password: userForm.password,
+        email: userForm.email,
+        displayName: userForm.displayName,
+
+        registrationReason: termsForm.registrationReason,
 
-        channel: this.formStepChannel?.value?.name
-          ? this.formStepChannel.value
-          : undefined
+        channel
       },
       'signup',
       'filter:api.signup.registration.create.params'
     )
 
-    this.userSignupService.signup(body).subscribe({
+    const obs = this.requiresApproval
+      ? this.signupService.requestSignup(body)
+      : this.signupService.directSignup(body)
+
+    obs.subscribe({
       next: () => {
-        if (this.requiresEmailVerification) {
+        if (this.requiresEmailVerification || this.requiresApproval) {
           this.signupSuccess = true
           return
         }
 
         // Auto login
-        this.authService.login({ username: body.username, password: body.password })
-          .subscribe({
-            next: () => {
-              this.signupSuccess = true
-            },
-
-            error: err => {
-              this.signupError = err.message
-            }
-          })
+        this.autoLogin(body)
       },
 
       error: err => {
@@ -175,4 +186,17 @@ export class RegisterComponent implements OnInit {
       }
     })
   }
+
+  private autoLogin (body: UserRegister) {
+    this.authService.login({ username: body.username, password: body.password })
+      .subscribe({
+        next: () => {
+          this.signupSuccess = true
+        },
+
+        error: err => {
+          this.signupError = err.message
+        }
+      })
+  }
 }
diff --git a/client/src/app/+signup/+register/shared/index.ts b/client/src/app/+signup/+register/shared/index.ts
new file mode 100644
index 000000000..affb54bf4
--- /dev/null
+++ b/client/src/app/+signup/+register/shared/index.ts
@@ -0,0 +1 @@
+export * from './register-validators'
diff --git a/client/src/app/+signup/+register/shared/register-validators.ts b/client/src/app/+signup/+register/shared/register-validators.ts
new file mode 100644
index 000000000..f14803b68
--- /dev/null
+++ b/client/src/app/+signup/+register/shared/register-validators.ts
@@ -0,0 +1,18 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from '@app/shared/form-validators'
+
+export const REGISTER_TERMS_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.requiredTrue ],
+  MESSAGES: {
+    required: $localize`You must agree with the instance terms in order to register on it.`
+  }
+}
+
+export const REGISTER_REASON_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
+  MESSAGES: {
+    required: $localize`Registration reason is required.`,
+    minlength: $localize`Registration reason must be at least 2 characters long.`,
+    maxlength: $localize`Registration reason cannot be more than 3000 characters long.`
+  }
+}
diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.html b/client/src/app/+signup/+register/steps/register-step-about.component.html
index 769fe3127..580e8a92c 100644
--- a/client/src/app/+signup/+register/steps/register-step-about.component.html
+++ b/client/src/app/+signup/+register/steps/register-step-about.component.html
@@ -13,6 +13,10 @@
     <li i18n>Have access to your <strong>watch history</strong></li>
     <li *ngIf="!videoUploadDisabled" i18n>Create your channel to <strong>publish videos</strong></li>
   </ul>
+
+  <p *ngIf="requiresApproval" i18n>
+    Moderators of {{ instanceName }} will have to approve your registration request once you have finished to fill the form.
+  </p>
 </div>
 
 <div>
diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.ts b/client/src/app/+signup/+register/steps/register-step-about.component.ts
index 9a0941016..b176ffa59 100644
--- a/client/src/app/+signup/+register/steps/register-step-about.component.ts
+++ b/client/src/app/+signup/+register/steps/register-step-about.component.ts
@@ -7,6 +7,7 @@ import { ServerService } from '@app/core'
   styleUrls: [ './register-step-about.component.scss' ]
 })
 export class RegisterStepAboutComponent {
+  @Input() requiresApproval: boolean
   @Input() videoUploadDisabled: boolean
 
   constructor (private serverService: ServerService) {
diff --git a/client/src/app/+signup/+register/steps/register-step-channel.component.ts b/client/src/app/+signup/+register/steps/register-step-channel.component.ts
index df92c5145..478ca0177 100644
--- a/client/src/app/+signup/+register/steps/register-step-channel.component.ts
+++ b/client/src/app/+signup/+register/steps/register-step-channel.component.ts
@@ -2,9 +2,9 @@ import { concat, of } from 'rxjs'
 import { pairwise } from 'rxjs/operators'
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormGroup } from '@angular/forms'
+import { SignupService } from '@app/+signup/shared/signup.service'
 import { VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR, VIDEO_CHANNEL_NAME_VALIDATOR } from '@app/shared/form-validators/video-channel-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
-import { UserSignupService } from '@app/shared/shared-users'
 
 @Component({
   selector: 'my-register-step-channel',
@@ -20,7 +20,7 @@ export class RegisterStepChannelComponent extends FormReactive implements OnInit
 
   constructor (
     protected formReactiveService: FormReactiveService,
-    private userSignupService: UserSignupService
+    private signupService: SignupService
   ) {
     super()
   }
@@ -51,7 +51,7 @@ export class RegisterStepChannelComponent extends FormReactive implements OnInit
   private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
     const name = this.form.value['name'] || ''
 
-    const newName = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, name)
+    const newName = this.signupService.getNewUsername(oldDisplayName, newDisplayName, name)
     this.form.patchValue({ name: newName })
   }
 }
diff --git a/client/src/app/+signup/+register/steps/register-step-terms.component.html b/client/src/app/+signup/+register/steps/register-step-terms.component.html
index cbfb32518..1d753a3f2 100644
--- a/client/src/app/+signup/+register/steps/register-step-terms.component.html
+++ b/client/src/app/+signup/+register/steps/register-step-terms.component.html
@@ -1,4 +1,16 @@
 <form role="form" [formGroup]="form">
+
+  <div *ngIf="requiresApproval" class="form-group">
+    <label i18n for="registrationReason">Why do you want to join {{ instanceName }}?</label>
+
+    <textarea
+      id="registrationReason" formControlName="registrationReason" class="form-control" rows="4"
+      [ngClass]="{ 'input-error': formErrors['registrationReason'] }"
+    ></textarea>
+
+    <div *ngIf="formErrors.registrationReason" class="form-error">{{ formErrors.registrationReason }}</div>
+  </div>
+
   <div class="form-group">
     <my-peertube-checkbox inputName="terms" formControlName="terms">
       <ng-template ptTemplate="label">
@@ -6,7 +18,7 @@
           I am at least {{ minimumAge }} years old and agree
           to the <a class="link-orange" (click)="onTermsClick($event)" href='#'>Terms</a>
           <ng-container *ngIf="hasCodeOfConduct"> and to the <a class="link-orange" (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
-          of this instance
+          of {{ instanceName }}
         </ng-container>
       </ng-template>
     </my-peertube-checkbox>
diff --git a/client/src/app/+signup/+register/steps/register-step-terms.component.ts b/client/src/app/+signup/+register/steps/register-step-terms.component.ts
index 2df963b30..1b1fb49ee 100644
--- a/client/src/app/+signup/+register/steps/register-step-terms.component.ts
+++ b/client/src/app/+signup/+register/steps/register-step-terms.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormGroup } from '@angular/forms'
-import { USER_TERMS_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
+import { REGISTER_REASON_VALIDATOR, REGISTER_TERMS_VALIDATOR } from '../shared'
 
 @Component({
   selector: 'my-register-step-terms',
@@ -10,7 +10,9 @@ import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 })
 export class RegisterStepTermsComponent extends FormReactive implements OnInit {
   @Input() hasCodeOfConduct = false
+  @Input() requiresApproval: boolean
   @Input() minimumAge = 16
+  @Input() instanceName: string
 
   @Output() formBuilt = new EventEmitter<FormGroup>()
   @Output() termsClick = new EventEmitter<void>()
@@ -28,7 +30,11 @@ export class RegisterStepTermsComponent extends FormReactive implements OnInit {
 
   ngOnInit () {
     this.buildForm({
-      terms: USER_TERMS_VALIDATOR
+      terms: REGISTER_TERMS_VALIDATOR,
+
+      registrationReason: this.requiresApproval
+        ? REGISTER_REASON_VALIDATOR
+        : null
     })
 
     setTimeout(() => this.formBuilt.emit(this.form))
diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.ts b/client/src/app/+signup/+register/steps/register-step-user.component.ts
index 822f8f5c5..0a5d2e437 100644
--- a/client/src/app/+signup/+register/steps/register-step-user.component.ts
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.ts
@@ -2,6 +2,7 @@ import { concat, of } from 'rxjs'
 import { pairwise } from 'rxjs/operators'
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormGroup } from '@angular/forms'
+import { SignupService } from '@app/+signup/shared/signup.service'
 import {
   USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
   USER_EMAIL_VALIDATOR,
@@ -9,7 +10,6 @@ import {
   USER_USERNAME_VALIDATOR
 } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
-import { UserSignupService } from '@app/shared/shared-users'
 
 @Component({
   selector: 'my-register-step-user',
@@ -24,7 +24,7 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
 
   constructor (
     protected formReactiveService: FormReactiveService,
-    private userSignupService: UserSignupService
+    private signupService: SignupService
   ) {
     super()
   }
@@ -57,7 +57,7 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
   private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
     const username = this.form.value['username'] || ''
 
-    const newUsername = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, username)
+    const newUsername = this.signupService.getNewUsername(oldDisplayName, newDisplayName, username)
     this.form.patchValue({ username: newUsername })
   }
 }