From 8a0dda4a832048c364a0b4795aea58c968f52425 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Wed, 11 Sep 2024 22:32:49 +0200
Subject: [PATCH] fix dialog

---
 .../welcome-root/welcome-root.component.html  | 219 +++++++++++++++---
 .../welcome-root/welcome-root.component.ts    |   9 +-
 2 files changed, 192 insertions(+), 36 deletions(-)

diff --git a/frontend/src/app/pages/welcome-root/welcome-root.component.html b/frontend/src/app/pages/welcome-root/welcome-root.component.html
index 66b459d..8f3f50b 100644
--- a/frontend/src/app/pages/welcome-root/welcome-root.component.html
+++ b/frontend/src/app/pages/welcome-root/welcome-root.component.html
@@ -411,58 +411,161 @@
 
 <div
   class="modal modal-open"
-  *ngIf="isEmailSent()"
+  *ngIf="
+    !isTokenVerified() &&
+    !verificationError() &&
+    !isAutoLoginInProgress() &&
+    (isVerifying() || isValidLoginAttempt())
+  "
   tabindex="-1"
-  aria-labelledby="modal-title"
-  aria-describedby="modal-description"
+  aria-labelledby="verify-modal-title"
+  aria-describedby="verify-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">
-        Please Check Your Email
-      </h2>
-      <p id="modal-description">
-        A confirmation email has been sent. Follow the instructions in the email
-        to activate your account.
-      </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 confirmation email.</li>
-        <li>If you don't see it, check your spam or junk folder.</li>
-        <li>
-          Click the confirmation link in the email to complete your
-          registration.
-        </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 class="relative w-10 h-10">
+        <div
+          class="absolute inset-0 transition-opacity duration-300 ease-in-out opacity-100">
+          <span class="loading loading-spinner loading-lg"></span>
+        </div>
       </div>
+      <h2 id="verify-modal-title" class="text-3xl font-semibold mb-2">
+        Verifying Your Account
+      </h2>
+      <p id="verify-modal-description">
+        Please wait while we verify your email and token.
+      </p>
     </div>
   </div>
 </div>
 
 <div
+  class="modal modal-open"
+  *ngIf="displayAutologinDialog()"
+  tabindex="-1"
+  aria-labelledby="verify-modal-title"
+  aria-describedby="verify-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">
+      <div class="relative w-10 h-10">
+        <div
+          class="absolute inset-0 transition-opacity duration-300 ease-in-out opacity-100">
+          <span class="loading loading-spinner loading-lg"></span>
+        </div>
+      </div>
+      <h2 id="verify-modal-title" class="text-3xl font-semibold mb-2">
+        Logging You In
+      </h2>
+      <p id="verify-modal-description">
+        Please wait while we automatically log you in.
+      </p>
+    </div>
+  </div>
+</div>
+
+<div
+  class="modal modal-open"
+  *ngIf="isTokenVerified() && !verificationError() && !isAutoLoginInProgress()"
+  tabindex="-1"
+  aria-labelledby="verify-modal-title"
+  aria-describedby="verify-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">
+      <div class="relative w-10 h-10">
+        <div
+          class="absolute inset-0 transition-opacity duration-300 ease-in-out opacity-100">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-10 w-10 text-success"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+      </div>
+      <h2 id="verify-modal-title" class="text-3xl font-semibold mb-2">
+        Verification Complete
+      </h2>
+      <p id="verify-modal-description">
+        Your email has been successfully verified.
+      </p>
+    </div>
+  </div>
+</div>
+
+<div
+  class="modal modal-open"
+  *ngIf="verificationError()"
+  tabindex="-1"
+  aria-labelledby="verify-modal-title"
+  aria-describedby="verify-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">
+      <div class="relative w-10 h-10">
+        <div
+          class="absolute inset-0 transition-opacity duration-300 ease-in-out opacity-100">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-10 w-10 text-error"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </div>
+      </div>
+      <h2 id="verify-modal-title" class="text-3xl font-semibold mb-2">
+        Verification Failed
+      </h2>
+      <p id="verify-modal-description">
+        {{ verificationError() }}
+      </p>
+      <div class="mt-4 text-left">
+        <p class="font-semibold">Possible reasons:</p>
+        <ul class="list-disc list-inside">
+          <li *ngFor="let reason of errorReasons()">{{ reason }}</li>
+        </ul>
+        <p class="mt-4 font-semibold">What to do next:</p>
+        <p>
+          Please try to start the registration process again. If the problem
+          persists, contact our support team.
+        </p>
+        <div class="mt-6 flex justify-center">
+          <a href="/" class="btn btn-primary">Back to Login</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- <div
   class="modal modal-open"
   *ngIf="
     (isTokenVerified() ||
       isVerifying() ||
       verificationError() ||
       isAutoLoginInProgress()) &&
-    isValidLoginAttempt()
+    (isValidLoginAttempt() || (signup() && token()))
   "
   tabindex="-1"
   aria-labelledby="verify-modal-title"
@@ -564,7 +667,7 @@
       }
     </div>
   </div>
-</div>
+</div> -->
 
 <div
   class="modal modal-open"
@@ -614,6 +717,52 @@
   </div>
 </div>
 
+<div
+  class="modal modal-open"
+  *ngIf="isEmailSent()"
+  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">
+        Please Check Your Email
+      </h2>
+      <p id="modal-description">
+        A confirmation email has been sent. Follow the instructions in the email
+        to activate your account.
+      </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 confirmation email.</li>
+        <li>If you don't see it, check your spam or junk folder.</li>
+        <li>
+          Click the confirmation link in the email to complete your
+          registration.
+        </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">
diff --git a/frontend/src/app/pages/welcome-root/welcome-root.component.ts b/frontend/src/app/pages/welcome-root/welcome-root.component.ts
index a44aa03..9e8a68c 100644
--- a/frontend/src/app/pages/welcome-root/welcome-root.component.ts
+++ b/frontend/src/app/pages/welcome-root/welcome-root.component.ts
@@ -88,6 +88,7 @@ export class WelcomeRootComponent implements OnInit {
   >(null);
   public isRegistrationMode: WritableSignal<boolean> = signal(false);
   public isAutoLoginInProgress: WritableSignal<boolean> = signal(false);
+  public displayAutologinDialog: WritableSignal<boolean> = signal(false);
   private removeQueryParams: WritableSignal<boolean> = signal(false);
 
   public get isDarkMode(): boolean {
@@ -297,6 +298,7 @@ export class WelcomeRootComponent implements OnInit {
             tap((response: SuccessDtoApiModel) => {
               if (response.success) {
                 this.isTokenVerified.set(true);
+                this.displayAutologinDialog.set(true);
               }
             }),
             delay(1000),
@@ -320,6 +322,11 @@ export class WelcomeRootComponent implements OnInit {
     if (!this.verificationError()) {
       this.displaySkeleton.set(false);
       this.isTokenVerified.set(true);
+
+      if (this.isValidLoginAttempt() && !this.signup()) {
+        this.isAutoLoginInProgress.set(true);
+      }
+
       timer(2000).subscribe(() => {
         this.isTokenVerified.set(false);
         this.focusPasswordField();
@@ -346,7 +353,7 @@ export class WelcomeRootComponent implements OnInit {
                 this.router.navigate(['/dashboard']);
               } else {
                 this.isAutoLoginInProgress.set(false);
-                // Handle login failure
+                //TODO: Handle login failure
               }
             });
         });