Add thank you section

src/app/auth/sign-up/sign-up.component.html

@@ -1,10 +1,16 @@
-<div class="container">
+<div class="container" *ngIf="showNextStep">
+  <h1 class="title">{{ 'register.thank_you' | translate }}</h1>
+  <h2 class="subtitle">{{ 'register.email_sent' | translate }}</h2>
+  <p appTranslatedContent="register.login_hint">
+    <a [routerLink]="'/login'  | localize" *appTranslatedElement="'login-link'">{{ 'action.login' | translate }}</a>
+  </p>
+</div>
+
+<div class="container" *ngIf="!showNextStep">
   <h1 class="title">{{'user.settings.new.beforeWeStart' | translate}}</h1>
   <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
 
-  {{ data | json }}
-
-  <form ngForm="newUserForm" (ngSubmit)="submit()" #form="ngForm">
+  <form *ngIf="!showNextStep" ngForm="newUserForm" (ngSubmit)="submit()" #form="ngForm">
     <!-- Display name -->
     <div class="field">
       <label for="displayName" class="label">{{'user.settings.displayName.label' | translate}}</label>

src/app/auth/sign-up/sign-up.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { SignupDto } from '../../../model/dto/signup-dto';
 import { faEnvelope, faEye, faEyeSlash, faLock, faUser } from '@fortawesome/free-solid-svg-icons';
+import { AuthService } from '../../../services/auth.service';
 
 @Component({
   selector: 'app-sign-up',
@@ -15,6 +16,8 @@ export class SignUpComponent {
   iconEye = faEye;
   iconEyeSlash = faEyeSlash;
 
+  showNextStep = false;
+
   loading = false;
   passwordHidden = true;
   data: SignupDto = {
@@ -30,6 +33,7 @@ export class SignUpComponent {
 
   constructor(
     private route: ActivatedRoute,
+    private authService: AuthService,
   ) {
     this.route.queryParams.subscribe(params => {
       this.data.username = (params['username'] || '').toLowerCase();
@@ -38,9 +42,22 @@ export class SignUpComponent {
     });
   }
 
-  submit() {
+  async submit() {
     this.loading = true;
+    this.data.displayName = this.data.displayName || this.data.username;
     this.data.connections = this.data.connections.filter(it => it.platform && it.username);
+
+    try {
+      const result = await this.authService.performRegister(this.data);
+
+      if (result.status === 'SIGNUP_SUCCESS') {
+        //
+      }
+    } catch (e: any) {
+      console.log(e);
+    } finally {
+      this.loading = false;
+    }
   }
 
   get title(): string {

src/model/dto/signup-dto.ts

@@ -10,3 +10,7 @@ export interface SignupDto {
   password: string;
   connections: SocialAccount[];
 }
+
+export interface SignupResponseDto {
+  status: 'SIGNUP_SUCCESS' | 'USERNAME_TAKEN';
+}

src/services/auth.service.ts

@@ -2,10 +2,11 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { NwbAlertService } from '@wizishop/ng-wizi-bulma';
 import { Router } from '@angular/router';
-import { Observable } from 'rxjs';
+import { firstValueFrom, Observable } from 'rxjs';
 import { BaseService } from './BaseService';
 import { InitMFADto, LoginDetails, LoginResponse } from '../model/auth';
 import { environment } from '../environments/environment';
+import { SignupDto, SignupResponseDto } from '../model/dto/signup-dto';
 
 @Injectable({
   providedIn: 'root'
@@ -76,6 +77,12 @@ export class AuthService extends BaseService {
     return this.http.post<LoginResponse>(this.url('login', 'v2'), details);
   }
 
+  performRegister(details: SignupDto): Promise<SignupResponseDto> {
+    return firstValueFrom(
+      this.http.post<SignupResponseDto>(this.url('signup', 'v2'), details)
+    );
+  }
+
   initMfaSettings(): Observable<InitMFADto> {
     return this.http.put<InitMFADto>(this.url('mfa/init', 'v2'), null);
   }