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

@@ -1,4 +1,3 @@
-@if (!userSignupSuccess()) {
 <div class="flex h-screen w-screen">
   <div
     [ngStyle]="leftBackgroundStyle"
@@ -57,21 +56,23 @@
           </button>
         }
         @if (isSigninSignal()) {
+          @if (displaySkeleton()) {
+            <div class="skeleton w-36 h-12"></div>
+          } @else {
             <button
               (click)="toggleAction('signup')"
-              class="btn btn-primary btn-outline no-animation animate-shake animate-thrice animate-duration-[250ms] animate-delay-[5000ms] animate-ease-in-out animate-normal animate-fill-forwards">
+              class="btn btn-primary btn-outline no-animation">
-              New User? – Register Now!
+              Register
             </button>
           }
+        }
       </div>
     </div>
     @if (isSignupSignal()) {
       <div
         class="animate-fade-down animate-once animate-duration-1000 animate-ease-in-out flex-1 flex flex-col justify-center items-center px-12">
         <h1 class="text-3xl font-semibold text-center">Create an Account</h1>
-          <p class="text-center">
+        <p class="text-center">Enter your email below to create your Account</p>
-            Enter your email below to create your Account
-          </p>
         <form
           [formGroup]="form"
           (ngSubmit)="onSubmit()"
@@ -108,8 +109,7 @@
                 'w-full': true,
                 'border-error focus:border-error':
                   form.get('password')?.invalid &&
-                    (form.get('password')?.dirty ||
+                  (form.get('password')?.dirty || form.get('password')?.touched)
-                      form.get('password')?.touched)
               }"
               class="input input-bordered flex items-center gap-2">
               <svg
@@ -148,6 +148,15 @@
     @if (isSigninSignal()) {
       <div
         class="animate-fade-down animate-once animate-duration-1000 animate-ease-in-out flex-1 flex flex-col justify-center items-center px-12">
+        @if (displaySkeleton()) {
+          <div class="flex items-center w-full flex-col max-w-md gap-4">
+            <div class="skeleton w-36 h-10"></div>
+            <div class="skeleton w-full h-10 max-w-md"></div>
+            <div class="skeleton w-full h-10 max-w-md"></div>
+            <div class="skeleton w-full h-10 max-w-md"></div>
+            <div class="skeleton w-full h-10 max-w-md"></div>
+          </div>
+        } @else {
           <h1 class="text-3xl font-semibold text-center">Login</h1>
           <form
             [formGroup]="form"
@@ -238,6 +247,7 @@
               </a>
             </div>
           </form>
+        }
       </div>
     }
     <div class="flex flex-col items-center justify-center py-12">
@@ -247,11 +257,7 @@
     </div>
   </div>
 </div>
-} @else {
+
-  <div class="flex h-screen w-screen">
-    <div class="hidden md:flex md:flex-col md:w-full bg-primary"></div>
-  </div>
-}
 <div class="modal modal-open" *ngIf="isDialogOpen()">
   <div
     [ngStyle]="dialogBackgroundStyle"

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

@@ -85,6 +85,7 @@ export class RegisterRootComponent implements OnInit {
   public userSignupSuccess: WritableSignal<boolean> = signal(false);
   public isDialogOpen: WritableSignal<boolean> = signal(false);
   public isLoading: WritableSignal<boolean> = signal(false);
+  public displaySkeleton: WritableSignal<boolean> = signal(true);
   private removeQueryParams: WritableSignal<boolean> = signal(false);
 
   public get isDarkMode(): boolean {
@@ -105,6 +106,20 @@ export class RegisterRootComponent implements OnInit {
         this.clearRouteParams();
       }
     });
+    const rememberMe = this.localStorageService.getItem<boolean>('remember-me');
+
+    if (rememberMe === true) {
+      this.authService
+        .status()
+        .pipe(delay(1500))
+        .subscribe((response: SuccessDtoApiModel) => {
+          if (response.success) {
+            this.router.navigate(['/dashboard']);
+          } else {
+            this.displaySkeleton.set(false);
+          }
+        });
+    }
   }
 
   public ngOnInit(): void {
@@ -199,8 +214,8 @@ export class RegisterRootComponent implements OnInit {
   }
 
   private handlePreselect(): void {
-    const rememberMe = this.localStorageService.getItem('remember-me');
+    const rememberMe = this.localStorageService.getItem<boolean>('remember-me');
-    const email = this.localStorageService.getItem('email');
+    const email = this.localStorageService.getItem<string>('email');
 
     if (rememberMe) {
       this.isSigninSignal.set(true);
@@ -215,8 +230,9 @@ export class RegisterRootComponent implements OnInit {
   }
 
   private initializeForm(): void {
-    const rememberMeValue = this.localStorageService.getItem('remember-me');
+    const rememberMeValue =
-    const email = this.localStorageService.getItem('email');
+      this.localStorageService.getItem<boolean>('remember-me');
+    const email = this.localStorageService.getItem<string>('email');
 
     if (rememberMeValue) {
       this.isSigninSignal.set(true);
@@ -331,11 +347,11 @@ export class RegisterRootComponent implements OnInit {
   }
 
   private signin(logiCredentials: UserCredentialsDtoApiModel): void {
-    const rememberMe = this.rememberMe.value;
+    const rememberMe: boolean = this.rememberMe.value;
 
     if (rememberMe) {
-      this.localStorageService.setItem('email', logiCredentials.email);
+      this.localStorageService.setItem<string>('email', logiCredentials.email);
-      this.localStorageService.setItem('remember-me', rememberMe);
+      this.localStorageService.setItem<boolean>('remember-me', rememberMe);
     }
 
     this.authService
@@ -364,7 +380,6 @@ export class RegisterRootComponent implements OnInit {
       .subscribe((response: SuccessDtoApiModel) => {
         if (response.success) {
           this.openModal();
-          this.userSignupSuccess.set(true);
         }
       });
   }