Implement signup approval in client

3 files changed, 92 insertions, 17 deletions

diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
index 06905f678..75b599e0e 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core'
+import { SignupService } from '@app/+signup/shared/signup.service'
 import { Notifier, RedirectService, ServerService } from '@app/core'
 import { USER_EMAIL_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-verify-account-ask-send-email',
@@ -15,7 +15,7 @@ export class VerifyAccountAskSendEmailComponent extends FormReactive implements
 
   constructor (
     protected formReactiveService: FormReactiveService,
-    private userSignupService: UserSignupService,
+    private signupService: SignupService,
     private serverService: ServerService,
     private notifier: Notifier,
     private redirectService: RedirectService
@@ -34,7 +34,7 @@ export class VerifyAccountAskSendEmailComponent extends FormReactive implements
 
   askSendVerifyEmail () {
     const email = this.form.value['verify-email-email']
-    this.userSignupService.askSendVerifyEmail(email)
+    this.signupService.askSendVerifyEmail(email)
       .subscribe({
         next: () => {
           this.notifier.success($localize`An email with verification link will be sent to ${email}.`)
diff --git a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
index 122f3c28c..8c8b1098e 100644
--- a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
@@ -1,14 +1,19 @@
-<div class="margin-content">
-  <h1 i18n class="title-page">Verify account email confirmation</h1>
+<div *ngIf="loaded" class="margin-content">
+  <h1 i18n class="title-page">Verify email</h1>
 
-  <my-signup-success i18n *ngIf="!isPendingEmail && success" [requiresEmailVerification]="false">
-  </my-signup-success>
+  <my-signup-success-after-email
+    *ngIf="displaySignupSuccess()"
+    [requiresApproval]="isRegistrationRequest() && requiresApproval"
+  >
+  </my-signup-success-after-email>
 
-  <div i18n class="alert alert-success" *ngIf="isPendingEmail && success">Email updated.</div>
+  <div i18n class="alert alert-success" *ngIf="!isRegistrationRequest() && isPendingEmail && success">Email updated.</div>
 
   <div class="alert alert-danger" *ngIf="failed">
     <span i18n>An error occurred.</span>
 
-    <a i18n class="ms-1 link-orange" routerLink="/verify-account/ask-send-email" [queryParams]="{ isPendingEmail: isPendingEmail }">Request new verification email</a>
+    <a i18n class="ms-1 link-orange" routerLink="/verify-account/ask-send-email">
+      Request a new verification email
+    </a>
   </div>
 </div>
diff --git a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
index 88efce4a1..faf663391 100644
--- a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AuthService, Notifier } from '@app/core'
-import { UserSignupService } from '@app/shared/shared-users'
+import { SignupService } from '@app/+signup/shared/signup.service'
+import { AuthService, Notifier, ServerService } from '@app/core'
 
 @Component({
   selector: 'my-verify-account-email',
@@ -13,32 +13,82 @@ export class VerifyAccountEmailComponent implements OnInit {
   failed = false
   isPendingEmail = false
 
+  requiresApproval: boolean
+  loaded = false
+
   private userId: number
+  private registrationId: number
   private verificationString: string
 
   constructor (
-    private userSignupService: UserSignupService,
+    private signupService: SignupService,
+    private server: ServerService,
     private authService: AuthService,
     private notifier: Notifier,
     private route: ActivatedRoute
   ) {
   }
 
+  get instanceName () {
+    return this.server.getHTMLConfig().instance.name
+  }
+
   ngOnInit () {
     const queryParams = this.route.snapshot.queryParams
+
+    this.server.getConfig().subscribe(config => {
+      this.requiresApproval = config.signup.requiresApproval
+
+      this.loaded = true
+    })
+
     this.userId = queryParams['userId']
+    this.registrationId = queryParams['registrationId']
+
     this.verificationString = queryParams['verificationString']
+
     this.isPendingEmail = queryParams['isPendingEmail'] === 'true'
 
-    if (!this.userId || !this.verificationString) {
-      this.notifier.error($localize`Unable to find user id or verification string.`)
-    } else {
-      this.verifyEmail()
+    if (!this.verificationString) {
+      this.notifier.error($localize`Unable to find verification string in URL query.`)
+      return
+    }
+
+    if (!this.userId && !this.registrationId) {
+      this.notifier.error($localize`Unable to find user id or registration id in URL query.`)
+      return
     }
+
+    this.verifyEmail()
+  }
+
+  isRegistrationRequest () {
+    return !!this.registrationId
+  }
+
+  displaySignupSuccess () {
+    if (!this.success) return false
+    if (!this.isRegistrationRequest() && this.isPendingEmail) return false
+
+    return true
   }
 
   verifyEmail () {
-    this.userSignupService.verifyEmail(this.userId, this.verificationString, this.isPendingEmail)
+    if (this.isRegistrationRequest()) {
+      return this.verifyRegistrationEmail()
+    }
+
+    return this.verifyUserEmail()
+  }
+
+  private verifyUserEmail () {
+    const options = {
+      userId: this.userId,
+      verificationString: this.verificationString,
+      isPendingEmail: this.isPendingEmail
+    }
+
+    this.signupService.verifyUserEmail(options)
       .subscribe({
         next: () => {
           if (this.authService.isLoggedIn()) {
@@ -55,4 +105,24 @@ export class VerifyAccountEmailComponent implements OnInit {
         }
       })
   }
+
+  private verifyRegistrationEmail () {
+    const options = {
+      registrationId: this.registrationId,
+      verificationString: this.verificationString
+    }
+
+    this.signupService.verifyRegistrationEmail(options)
+      .subscribe({
+        next: () => {
+          this.success = true
+        },
+
+        error: err => {
+          this.failed = true
+
+          this.notifier.error(err.message)
+        }
+      })
+  }
 }