w.i.p

backend/src/modules/auth-module/controller/auth.controller.ts

@@ -53,9 +53,12 @@ export class AuthController {
   @HttpCode(HttpStatus.CREATED)
   @Public()
   public async signup(
-    @Body() userCredentials: UserCredentialsDto
+    @Body() userCredentials: UserCredentialsDto,
+    @Req() request: Request
   ): Promise<SuccessDto> {
-    return this.authService.signup(userCredentials);
+    const userAgent = request.headers['user-agent'] || 'Unknown';
+
+    return this.authService.signup(userCredentials, userAgent);
   }
 
   @ApiCreatedResponse({

backend/src/modules/auth-module/services/auth.service.ts

@@ -78,7 +78,8 @@ export class AuthService {
   }
 
   public async signup(
-    userCredentials: UserCredentialsDto
+    userCredentials: UserCredentialsDto,
+    userAgent: string
   ): Promise<SuccessDto> {
     try {
       const existingUser = await this.userCredentialsRepository.findUserByEmail(
@@ -98,13 +99,9 @@ export class AuthService {
         passwordHashed
       );
 
-      await this.userDataRepository.createInitialUserData(user);
+      await this.sendMagicLink({ email: user.email }, userAgent);
 
-      // TODO: Send Welcome Mail
+      await this.userDataRepository.createInitialUserData(user);
-      // const token =
-      //   await this.emailVerificationService.generateEmailVerificationToken(
-      //     user.id
-      //   );
 
       return {
         success: true,

frontend/src/app/pages/welcome-root/welcome-root.component.html

@@ -422,7 +422,7 @@
     <div class="flex flex-col items-center text-center p-6 space-y-4">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-24 w-24 text-primary mb-4 animate-bounce"
+        class="h-24 w-24 text-primary mb-4"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor">
@@ -549,3 +549,59 @@
     </div>
   </div>
 </div>
+
+<div
+  class="modal modal-open"
+  *ngIf="isUserSignupSuccessfully()"
+  tabindex="-1"
+  aria-labelledby="modal-title"
+  aria-describedby="modal-description"
+  aria-modal="true"
+  role="dialog">
+  <div
+    class="modal-box w-11/12 max-w-2xl mx-auto bg-base-100 shadow-xl rounded-lg transition-all transform duration-300 ease-out">
+    <div class="flex flex-col items-center text-center p-6 space-y-4">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-24 w-24 text-primary mb-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
+      </svg>
+      <h2 id="modal-title" class="text-3xl font-semibold mb-2">
+        Registration Successful!
+      </h2>
+      <p id="modal-description">
+        Your registration has been completed. A login link has been sent to your
+        email address.
+      </p>
+      <ul class="text-left p-4 rounded-lg w-full max-w-lg list-disc">
+        <li>
+          Open your email inbox and look for the email containing the login
+          link.
+        </li>
+        <li>
+          If you can't find the email, please check your spam or junk folder.
+        </li>
+        <li>Click on the login link in the email to sign in.</li>
+        <li>Ensure your email client does not block emails from our domain.</li>
+      </ul>
+      <div class="mt-6 flex items-center justify-center">
+        You can now close this tab.
+      </div>
+    </div>
+  </div>
+</div>
+
+<div
+  *ngIf="isAutoLoginInProgress()"
+  class="fixed inset-0 bg-black bg-opacity-20 z-50 flex items-center justify-center">
+  <div class="rounded-lg p-8">
+    <span class="loading loading-spinner w-20 h-20 text-primary"></span>
+  </div>
+</div>

frontend/src/app/pages/welcome-root/welcome-root.component.ts

@@ -24,7 +24,7 @@ import { Router } from '@angular/router';
 
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
-import { delay, finalize, switchMap, takeWhile, tap, timer } from 'rxjs';
+import { delay, finalize, of, switchMap, takeWhile, tap, timer } from 'rxjs';
 
 import {
   Configuration,
@@ -80,6 +80,7 @@ export class WelcomeRootComponent implements OnInit {
   public isEmailSent: WritableSignal<boolean> = signal(false);
   public displaySkeleton: WritableSignal<boolean> = signal(false);
   public isVerifying: WritableSignal<boolean> = signal(false);
+  public isUserSignupSuccessfully: WritableSignal<boolean> = signal(false);
   public isTokenVerified: WritableSignal<boolean> = signal(false);
   public errorReasons: WritableSignal<string[]> = signal<string[]>([]);
   public verificationError: WritableSignal<string | null> = signal<
@@ -132,16 +133,17 @@ export class WelcomeRootComponent implements OnInit {
         .pipe(
           switchMap(() => this.authService.status()),
           takeWhile((response: SuccessDtoApiModel) => response.success, true),
-          tap({
+          switchMap((response: SuccessDtoApiModel) => {
-            next: (response: SuccessDtoApiModel) => {
+            if (response.success) {
-              if (response.success) {
+              return this.router.navigate(['/dashboard']).then(() => response);
-                this.router.navigate(['/dashboard']);
+            }
-              }
+            return of(response);
-            },
           }),
           finalize(() => {
             this.isAutoLoginInProgress.set(false);
-            this.displaySkeleton.set(false);
+            setTimeout(() => {
+              this.displaySkeleton.set(false);
+            }, 100);
           })
         )
         .subscribe();
@@ -427,7 +429,7 @@ export class WelcomeRootComponent implements OnInit {
       .subscribe((response: SuccessDtoApiModel) => {
         if (response.success) {
           this.remeberUserMail(signupCredentials.email);
-          // Display Modal // You have successfully signed up. Please check your email for the magic link.
+          this.isUserSignupSuccessfully.set(true);
         }
       });
   }