Implement signup approval in client

8 files changed, 171 insertions, 44 deletions

diff --git a/client/src/app/+signup/shared/shared-signup.module.ts b/client/src/app/+signup/shared/shared-signup.module.ts
index 0aa08f3e2..0600f0af8 100644
--- a/client/src/app/+signup/shared/shared-signup.module.ts
+++ b/client/src/app/+signup/shared/shared-signup.module.ts
@@ -5,7 +5,9 @@ import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedUsersModule } from '@app/shared/shared-users'
 import { SignupMascotComponent } from './signup-mascot.component'
 import { SignupStepTitleComponent } from './signup-step-title.component'
-import { SignupSuccessComponent } from './signup-success.component'
+import { SignupSuccessBeforeEmailComponent } from './signup-success-before-email.component'
+import { SignupSuccessAfterEmailComponent } from './signup-success-after-email.component'
+import { SignupService } from './signup.service'
 
 @NgModule({
   imports: [
@@ -16,7 +18,8 @@ import { SignupSuccessComponent } from './signup-success.component'
   ],
 
   declarations: [
-    SignupSuccessComponent,
+    SignupSuccessBeforeEmailComponent,
+    SignupSuccessAfterEmailComponent,
     SignupStepTitleComponent,
     SignupMascotComponent
   ],
@@ -26,12 +29,14 @@ import { SignupSuccessComponent } from './signup-success.component'
     SharedFormModule,
     SharedGlobalIconModule,
 
-    SignupSuccessComponent,
+    SignupSuccessBeforeEmailComponent,
+    SignupSuccessAfterEmailComponent,
     SignupStepTitleComponent,
     SignupMascotComponent
   ],
 
   providers: [
+    SignupService
   ]
 })
 export class SharedSignupModule { }
diff --git a/client/src/app/+signup/shared/signup-success-after-email.component.html b/client/src/app/+signup/shared/signup-success-after-email.component.html
new file mode 100644
index 000000000..1c3536ada
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-success-after-email.component.html
@@ -0,0 +1,21 @@
+<my-signup-step-title mascotImageName="success">
+  <strong i18n>Email verified!</strong>
+</my-signup-step-title>
+
+<div class="alert pt-alert-primary">
+  <ng-container *ngIf="requiresApproval">
+    <p i18n>Your email has been verified and your account request has been sent!</p>
+
+    <p i18n>
+      A moderator will check your registration request soon and you'll receive an email when it will be accepted or rejected.
+    </p>
+  </ng-container>
+
+  <ng-container *ngIf="!requiresApproval">
+    <p i18n>Your email has been verified and your account has been created!</p>
+
+    <p i18n>
+      If you need help to use PeerTube, you can have a look at the <a class="link-orange" href="https://docs.joinpeertube.org/use-setup-account" target="_blank" rel="noopener noreferrer">documentation</a>.
+    </p>
+  </ng-container>
+</div>
diff --git a/client/src/app/+signup/shared/signup-success-after-email.component.ts b/client/src/app/+signup/shared/signup-success-after-email.component.ts
new file mode 100644
index 000000000..3d72fdae9
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-success-after-email.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-signup-success-after-email',
+  templateUrl: './signup-success-after-email.component.html',
+  styleUrls: [ './signup-success.component.scss' ]
+})
+export class SignupSuccessAfterEmailComponent {
+  @Input() requiresApproval: boolean
+}
diff --git a/client/src/app/+signup/shared/signup-success-before-email.component.html b/client/src/app/+signup/shared/signup-success-before-email.component.html
new file mode 100644
index 000000000..b9668ee82
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-success-before-email.component.html
@@ -0,0 +1,35 @@
+<my-signup-step-title mascotImageName="success">
+  <ng-container *ngIf="requiresApproval">
+    <strong i18n>Account request sent</strong>
+  </ng-container>
+
+  <ng-container *ngIf="!requiresApproval" i18n>
+    <strong>Welcome</strong>
+    <div>on {{ instanceName }}</div>
+  </ng-container>
+</my-signup-step-title>
+
+<div class="alert pt-alert-primary">
+  <p *ngIf="requiresApproval" i18n>Your account request has been sent!</p>
+  <p *ngIf="!requiresApproval" i18n>Your account has been created!</p>
+
+  <ng-container *ngIf="requiresEmailVerification">
+    <p i18n *ngIf="requiresApproval">
+      <strong>Check your emails</strong> to validate your account and complete your registration request.
+    </p>
+
+    <p i18n *ngIf="!requiresApproval">
+      <strong>Check your emails</strong> to validate your account and complete your registration.
+    </p>
+  </ng-container>
+
+  <ng-container *ngIf="!requiresEmailVerification">
+    <p i18n *ngIf="requiresApproval">
+      A moderator will check your registration request soon and you'll receive an email when it will be accepted or rejected.
+    </p>
+
+    <p *ngIf="!requiresApproval" i18n>
+      If you need help to use PeerTube, you can have a look at the <a class="link-orange" href="https://docs.joinpeertube.org/use-setup-account" target="_blank" rel="noopener noreferrer">documentation</a>.
+    </p>
+  </ng-container>
+</div>
diff --git a/client/src/app/+signup/shared/signup-success-before-email.component.ts b/client/src/app/+signup/shared/signup-success-before-email.component.ts
new file mode 100644
index 000000000..d72462340
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-success-before-email.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-signup-success-before-email',
+  templateUrl: './signup-success-before-email.component.html',
+  styleUrls: [ './signup-success.component.scss' ]
+})
+export class SignupSuccessBeforeEmailComponent {
+  @Input() requiresApproval: boolean
+  @Input() requiresEmailVerification: boolean
+  @Input() instanceName: string
+}
diff --git a/client/src/app/+signup/shared/signup-success.component.html b/client/src/app/+signup/shared/signup-success.component.html
deleted file mode 100644
index c14889c72..000000000
--- a/client/src/app/+signup/shared/signup-success.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<my-signup-step-title mascotImageName="success" i18n>
-  <strong>Welcome</strong>
-  <div>on {{ instanceName }}</div>
-</my-signup-step-title>
-
-<div class="alert pt-alert-primary">
-  <p i18n>Your account has been created!</p>
-
-  <p i18n *ngIf="requiresEmailVerification">
-    <strong>Check your emails</strong> to validate your account and complete your inscription.
-  </p>
-
-  <ng-container *ngIf="!requiresEmailVerification">
-    <p i18n>
-      If you need help to use PeerTube, you can have a look at the <a class="link-orange" href="https://docs.joinpeertube.org/use-setup-account" target="_blank" rel="noopener noreferrer">documentation</a>.
-    </p>
-
-    <p i18n>
-      To help moderators and other users to know <strong>who you are</strong>, don't forget to <a class="link-orange" routerLink="/my-account/settings">set up your account profile</a> by adding an <strong>avatar</strong> and a <strong>description</strong>.
-    </p>
-  </ng-container>
-</div>
diff --git a/client/src/app/+signup/shared/signup-success.component.ts b/client/src/app/+signup/shared/signup-success.component.ts
deleted file mode 100644
index a03f3819d..000000000
--- a/client/src/app/+signup/shared/signup-success.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { ServerService } from '@app/core'
-
-@Component({
-  selector: 'my-signup-success',
-  templateUrl: './signup-success.component.html',
-  styleUrls: [ './signup-success.component.scss' ]
-})
-export class SignupSuccessComponent {
-  @Input() requiresEmailVerification: boolean
-
-  constructor (private serverService: ServerService) {
-
-  }
-
-  get instanceName () {
-    return this.serverService.getHTMLConfig().instance.name
-  }
-}
diff --git a/client/src/app/+signup/shared/signup.service.ts b/client/src/app/+signup/shared/signup.service.ts
new file mode 100644
index 000000000..f647298be
--- /dev/null
+++ b/client/src/app/+signup/shared/signup.service.ts
@@ -0,0 +1,85 @@
+import { catchError, tap } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, UserService } from '@app/core'
+import { UserRegister, UserRegistrationRequest } from '@shared/models'
+
+@Injectable()
+export class SignupService {
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private userService: UserService
+  ) { }
+
+  directSignup (userCreate: UserRegister) {
+    return this.authHttp.post(UserService.BASE_USERS_URL + 'register', userCreate)
+               .pipe(
+                 tap(() => this.userService.setSignupInThisSession(true)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  requestSignup (userCreate: UserRegistrationRequest) {
+    return this.authHttp.post(UserService.BASE_USERS_URL + 'registrations/request', userCreate)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  // ---------------------------------------------------------------------------
+
+  verifyUserEmail (options: {
+    userId: number
+    verificationString: string
+    isPendingEmail: boolean
+  }) {
+    const { userId, verificationString, isPendingEmail } = options
+
+    const url = `${UserService.BASE_USERS_URL}${userId}/verify-email`
+    const body = {
+      verificationString,
+      isPendingEmail
+    }
+
+    return this.authHttp.post(url, body)
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  verifyRegistrationEmail (options: {
+    registrationId: number
+    verificationString: string
+  }) {
+    const { registrationId, verificationString } = options
+
+    const url = `${UserService.BASE_USERS_URL}registrations/${registrationId}/verify-email`
+    const body = { verificationString }
+
+    return this.authHttp.post(url, body)
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  askSendVerifyEmail (email: string) {
+    const url = UserService.BASE_USERS_URL + 'ask-send-verify-email'
+
+    return this.authHttp.post(url, { email })
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  // ---------------------------------------------------------------------------
+
+  getNewUsername (oldDisplayName: string, newDisplayName: string, currentUsername: string) {
+    // Don't update display name, the user seems to have changed it
+    if (this.displayNameToUsername(oldDisplayName) !== currentUsername) return currentUsername
+
+    return this.displayNameToUsername(newDisplayName)
+  }
+
+  private displayNameToUsername (displayName: string) {
+    if (!displayName) return ''
+
+    return displayName
+      .toLowerCase()
+      .replace(/\s/g, '_')
+      .replace(/[^a-z0-9_.]/g, '')
+  }
+}