frontend/src/app/app.routes.ts

@@ -9,7 +9,7 @@ const publicRoutes: Routes = [
       ),
   },
   {
-    path: 'signup',
+    path: 'welcome',
     loadComponent: () =>
       import('./pages/register-root/register-root.component').then(
         (m) => m.RegisterRootComponent

frontend/src/app/pages/email-verify-root/email-verify-root.component.html

@@ -15,7 +15,7 @@
                 the application shortly.
               </p>
               <button
-                (click)="navigateToSignup()"
+                (click)="navigateToWelcomeScreen()"
                 class="btn btn-primary no-animation">
                 Go to the App
               </button>

frontend/src/app/pages/email-verify-root/email-verify-root.component.ts

@@ -56,10 +56,10 @@ export class EmailVerifyRootComponent implements OnInit {
     this.backgroundStyle = { 'background-image': `url("${svgUrl}")` };
   }
 
-  public navigateToSignup(): void {
+  public navigateToWelcomeScreen(): void {
     const email: string = this.extractEmail();
 
-    this.router.navigate(['/signup'], {
+    this.router.navigate(['/welcome'], {
       queryParams: { verified: true, email: email },
     });
   }
@@ -96,7 +96,7 @@ export class EmailVerifyRootComponent implements OnInit {
         delay(10000)
       )
       .subscribe(() => {
-        this.navigateToSignup();
+        this.navigateToWelcomeScreen();
       });
   }
 }

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

@@ -239,6 +239,9 @@
               </label>
             </div>
             <button class="btn w-full btn-primary font-semibold">
+              @if (isLoading()) {
+                <span class="loading loading-spinner"></span>
+              }
               Sign In with Email
             </button>
             <p class="text-xs w-full text-center">
@@ -312,9 +315,36 @@
                   value="" />
               </label>
             </div>
+            <div class="form-control w-full">
+              <div class="flex items-center justify-between">
+                <label class="label cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked="checked"
+                    class="checkbox checkbox-md checkbox-primary" />
+                  <span class="label-text ml-1.5">Remember me</span>
+                </label>
+                <a class="text-primary label-text cursor-pointer">
+                  Forgot password?
+                </a>
+              </div>
+            </div>
             <button class="btn w-full btn-primary font-semibold">
+              @if (isLoading()) {
+                <span class="loading loading-spinner"></span>
+              }
               Sign In
             </button>
+            <div class="flex gap-1">
+              <span class="text-xs">Not registered yet?</span>
+              <a
+                (click)="toggleAction('signup')"
+                (keypress)="toggleAction('signup')"
+                tabindex="0"
+                class="text-primary cursor-pointer text-xs">
+                Create An Account
+              </a>
+            </div>
           </form>
         </div>
       }

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

@@ -25,6 +25,7 @@ import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
 import { InputTextModule } from 'primeng/inputtext';
 import { PasswordModule } from 'primeng/password';
+import { delay, finalize, tap } from 'rxjs';
 
 import {
   Configuration,
@@ -80,6 +81,7 @@ export class RegisterRootComponent implements OnInit {
   public isSignupSignal: WritableSignal<boolean> = signal(true);
   public userSignupSuccess: WritableSignal<boolean> = signal(false);
   public isDialogOpen: WritableSignal<boolean> = signal(false);
+  public isLoading: WritableSignal<boolean> = signal(false);
   private removeQueryParams: WritableSignal<boolean> = signal(false);
 
   public get isDarkMode(): boolean {
@@ -183,7 +185,6 @@ export class RegisterRootComponent implements OnInit {
 
   private handleRedirect(): void {
     if (this.verified()) {
-      //this.isDisplayButtons.set(false);
       this.isSigninSignal.set(true);
       this.isSignupSignal.set(false);
     }
@@ -276,6 +277,11 @@ export class RegisterRootComponent implements OnInit {
   private signin(logiCredentials: UserCredentialsDtoApiModel): void {
     this.authService
       .signin(logiCredentials)
+      .pipe(
+        tap(() => this.isLoading.set(true)),
+        delay(1000),
+        finalize(() => this.isLoading.set(false))
+      )
       .subscribe((response: SigninResponseDtoApiModel) => {
         if (response) {
           this.router.navigate(['/dashboard']);
@@ -284,8 +290,14 @@ export class RegisterRootComponent implements OnInit {
   }
 
   private signup(logiCredentials: UserCredentialsDtoApiModel): void {
+    this.isLoading.set(true);
     this.authService
       .signup(logiCredentials)
+      .pipe(
+        delay(1000),
+        tap(() => this.isLoading.set(true)),
+        finalize(() => this.isLoading.set(false))
+      )
       .subscribe((response: SuccessDtoApiModel) => {
         if (response.success) {
           this.openModal();