From a5f06ef940ef3c55934a4bd03438f89f1d2599a4 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Wed, 26 Jun 2024 18:53:53 +0200
Subject: [PATCH] added skeletons

---
 .../register-root.component.html              | 381 +++++++++---------
 .../register-root/register-root.component.ts  |  19 +-
 2 files changed, 208 insertions(+), 192 deletions(-)

diff --git a/frontend/src/app/pages/register-root/register-root.component.html b/frontend/src/app/pages/register-root/register-root.component.html
index dc52842..ae8ec5a 100644
--- a/frontend/src/app/pages/register-root/register-root.component.html
+++ b/frontend/src/app/pages/register-root/register-root.component.html
@@ -1,163 +1,81 @@
-<div class="flex h-screen w-screen">
-  <div
-    [ngStyle]="leftBackgroundStyle"
-    class="hidden md:flex md:flex-col md:w-1/2 bg-primary">
-    <div class="flex-1 flex items-start pt-16 px-12">
-      <h1 class="text-3xl text-base-100">[LOGO] APP-NAME</h1>
-    </div>
-    <div class="flex-1 flex flex-col justify-end pb-16 px-12">
-      <blockquote>
-        <p class="text-xl text-base-100 font-semibold">
-          “This library has saved me countless hours of work and helped me
-          deliver stunning designs to my clients faster than ever before.”
-        </p>
-        <small class="block text-sm font-light text-base-100 mt-4">
-          — Sofia Davis
-        </small>
-      </blockquote>
-    </div>
-  </div>
-
-  <!-- Rechter Bereich, immer sichtbar -->
-  <div [ngStyle]="rightBackgroundStyle" class="flex flex-col w-full md:w-1/2">
-    <div class="flex px-12 gap-3">
-      <div class="flex items-start justify-end pt-16">
-        <label class="swap swap-rotate">
-          <input
-            type="checkbox"
-            (change)="toggleTheme()"
-            [checked]="isDarkMode" />
-
-          <!-- sun icon -->
-          <svg
-            class="swap-on h-10 w-10 fill-current"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24">
-            <path
-              d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
-          </svg>
-
-          <!-- moon icon -->
-          <svg
-            class="swap-off h-10 w-10 fill-current"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24">
-            <path
-              d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
-          </svg>
-        </label>
+@if (!userSignupSuccess()) {
+  <div class="flex h-screen w-screen">
+    <div
+      [ngStyle]="leftBackgroundStyle"
+      class="hidden md:flex md:flex-col md:w-1/2 bg-primary">
+      <div class="flex-1 flex items-start pt-16 px-12">
+        <h1 class="text-3xl text-base-100">[LOGO] APP-NAME</h1>
       </div>
-      <div class="flex-1 items-start flex justify-end pt-16">
-        @if (isSignupSignal()) {
-          <button
-            (click)="toggleAction('signin')"
-            class="btn btn-primary btn-outline no-animation">
-            Login
-          </button>
-        }
-        @if (isSigninSignal()) {
-          @if (displaySkeleton()) {
-            <div class="skeleton w-36 h-12"></div>
-          } @else {
+      <div class="flex-1 flex flex-col justify-end pb-16 px-12">
+        <blockquote>
+          <p class="text-xl text-base-100 font-semibold">
+            “This library has saved me countless hours of work and helped me
+            deliver stunning designs to my clients faster than ever before.”
+          </p>
+          <small class="block text-sm font-light text-base-100 mt-4">
+            — Sofia Davis
+          </small>
+        </blockquote>
+      </div>
+    </div>
+
+    <!-- Rechter Bereich, immer sichtbar -->
+    <div [ngStyle]="rightBackgroundStyle" class="flex flex-col w-full md:w-1/2">
+      <div class="flex px-12 gap-3">
+        <div class="flex items-start justify-end pt-16">
+          <label class="swap swap-rotate">
+            <input
+              type="checkbox"
+              (change)="toggleTheme()"
+              [checked]="isDarkMode" />
+
+            <!-- sun icon -->
+            <svg
+              class="swap-on h-10 w-10 fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24">
+              <path
+                d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+            </svg>
+
+            <!-- moon icon -->
+            <svg
+              class="swap-off h-10 w-10 fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24">
+              <path
+                d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+            </svg>
+          </label>
+        </div>
+        <div class="flex-1 items-start flex justify-end pt-16">
+          @if (isSignupSignal()) {
             <button
-              (click)="toggleAction('signup')"
+              (click)="toggleAction('signin')"
               class="btn btn-primary btn-outline no-animation">
-              Register
+              Login
             </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">Enter your email below to create your Account</p>
-        <form
-          [formGroup]="form"
-          (ngSubmit)="onSubmit()"
-          class="flex gap-4 flex-col items-center py-6 w-full max-w-md">
-          <div class="form-control w-full">
-            <label
-              [ngClass]="{
-                'w-full': true,
-                'border-error focus:border-error':
-                  form.get('email')?.invalid &&
-                  (form.get('email')?.dirty || form.get('email')?.touched)
-              }"
-              class="input input-bordered flex items-center gap-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-                class="h-4 w-4 opacity-70">
-                <path
-                  d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
-                <path
-                  d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
-              </svg>
-              <input
-                formControlName="email"
-                type="text"
-                class="grow"
-                placeholder="name@example.com" />
-            </label>
-          </div>
-          <div class="form-control w-full">
-            <label
-              [ngClass]="{
-                'w-full': true,
-                'border-error focus:border-error':
-                  form.get('password')?.invalid &&
-                  (form.get('password')?.dirty || form.get('password')?.touched)
-              }"
-              class="input input-bordered flex items-center gap-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-                class="h-4 w-4 opacity-70">
-                <path
-                  fill-rule="evenodd"
-                  d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
-                  clip-rule="evenodd" />
-              </svg>
-              <input
-                formControlName="password"
-                type="password"
-                class="grow"
-                value="" />
-            </label>
-          </div>
-          <button class="btn w-full btn-primary font-semibold">
-            @if (isLoading()) {
-              <span class="loading loading-spinner"></span>
+          @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">
+                Register
+              </button>
             }
-            Sign Up with Email
-          </button>
-          <p class="text-xs w-full text-center">
-            By clicking continue, you agree to our
-            <u class="cursor-pointer">Terms of Service</u>
-            and
-            <u class="cursor-pointer">Privacy Policy</u>
-            .
-          </p>
-        </form>
+          }
+        </div>
       </div>
-    }
-    @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>
+      @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">
+            Enter your email below to create your Account
+          </p>
           <form
             [formGroup]="form"
             (ngSubmit)="onSubmit()"
@@ -215,48 +133,139 @@
                   value="" />
               </label>
             </div>
-            <div class="form-control w-full">
-              <div class="flex items-center justify-between">
-                <label class="label cursor-pointer">
-                  <input
-                    [formControl]="rememberMe"
-                    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
+              Sign Up with Email
             </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>
+            <p class="text-xs w-full text-center">
+              By clicking continue, you agree to our
+              <u class="cursor-pointer">Terms of Service</u>
+              and
+              <u class="cursor-pointer">Privacy Policy</u>
+              .
+            </p>
           </form>
-        }
+        </div>
+      }
+      @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"
+              (ngSubmit)="onSubmit()"
+              class="flex gap-4 flex-col items-center py-6 w-full max-w-md">
+              <div class="form-control w-full">
+                <label
+                  [ngClass]="{
+                    'w-full': true,
+                    'border-error focus:border-error':
+                      form.get('email')?.invalid &&
+                      (form.get('email')?.dirty || form.get('email')?.touched)
+                  }"
+                  class="input input-bordered flex items-center gap-2">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                    class="h-4 w-4 opacity-70">
+                    <path
+                      d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+                    <path
+                      d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+                  </svg>
+                  <input
+                    formControlName="email"
+                    type="text"
+                    class="grow"
+                    placeholder="name@example.com" />
+                </label>
+              </div>
+              <div class="form-control w-full">
+                <label
+                  [ngClass]="{
+                    'w-full': true,
+                    'border-error focus:border-error':
+                      form.get('password')?.invalid &&
+                      (form.get('password')?.dirty ||
+                        form.get('password')?.touched)
+                  }"
+                  class="input input-bordered flex items-center gap-2">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                    class="h-4 w-4 opacity-70">
+                    <path
+                      fill-rule="evenodd"
+                      d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+                      clip-rule="evenodd" />
+                  </svg>
+                  <input
+                    formControlName="password"
+                    type="password"
+                    class="grow"
+                    value="" />
+                </label>
+              </div>
+              <div class="form-control w-full">
+                <div class="flex items-center justify-between">
+                  <label class="label cursor-pointer">
+                    <input
+                      [formControl]="rememberMe"
+                      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>
+      }
+      <div class="flex flex-col items-center justify-center py-12">
+        <footer>
+          <p class="text-xs">Made with ♥️ in Germany</p>
+        </footer>
       </div>
-    }
-    <div class="flex flex-col items-center justify-center py-12">
-      <footer>
-        <p class="text-xs">Made with ♥️ in Germany</p>
-      </footer>
     </div>
   </div>
-</div>
+} @else {
+  <div class="flex h-screen w-screen bg-primary">
+    <div class="hidden md:flex md:flex-col md:w-1/1"></div>
+  </div>
+}
 
 <div class="modal modal-open" *ngIf="isDialogOpen()">
   <div
diff --git a/frontend/src/app/pages/register-root/register-root.component.ts b/frontend/src/app/pages/register-root/register-root.component.ts
index 72d094b..294300e 100644
--- a/frontend/src/app/pages/register-root/register-root.component.ts
+++ b/frontend/src/app/pages/register-root/register-root.component.ts
@@ -82,6 +82,7 @@ export class RegisterRootComponent implements OnInit {
   public rememberMe: FormControl = new FormControl(false);
   public isSigninSignal: WritableSignal<boolean> = signal(false);
   public isSignupSignal: WritableSignal<boolean> = signal(true);
+  public isSignUpSuccess: WritableSignal<boolean> = signal(false);
   public userSignupSuccess: WritableSignal<boolean> = signal(false);
   public isDialogOpen: WritableSignal<boolean> = signal(false);
   public isLoading: WritableSignal<boolean> = signal(false);
@@ -108,16 +109,21 @@ export class RegisterRootComponent implements OnInit {
     });
     const rememberMe = this.localStorageService.getItem<boolean>('remember-me');
 
-    if (rememberMe === true) {
+    if (rememberMe) {
       this.authService
         .status()
         .pipe(delay(1500))
-        .subscribe((response: SuccessDtoApiModel) => {
-          if (response.success) {
-            this.router.navigate(['/dashboard']);
-          } else {
+        .subscribe({
+          next: (response: SuccessDtoApiModel) => {
+            if (response.success) {
+              this.router.navigate(['/dashboard']);
+            } else {
+              this.displaySkeleton.set(false);
+            }
+          },
+          error: () => {
             this.displaySkeleton.set(false);
-          }
+          },
         });
     }
   }
@@ -380,6 +386,7 @@ export class RegisterRootComponent implements OnInit {
       .subscribe((response: SuccessDtoApiModel) => {
         if (response.success) {
           this.openModal();
+          this.userSignupSuccess.set(true);
         }
       });
   }