fix dialog
This commit is contained in:
parent
f03df3386c
commit
8a0dda4a83
|
@ -411,18 +411,80 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="modal modal-open"
|
class="modal modal-open"
|
||||||
*ngIf="isEmailSent()"
|
*ngIf="
|
||||||
|
!isTokenVerified() &&
|
||||||
|
!verificationError() &&
|
||||||
|
!isAutoLoginInProgress() &&
|
||||||
|
(isVerifying() || isValidLoginAttempt())
|
||||||
|
"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
aria-labelledby="modal-title"
|
aria-labelledby="verify-modal-title"
|
||||||
aria-describedby="modal-description"
|
aria-describedby="verify-modal-description"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
role="dialog">
|
role="dialog">
|
||||||
<div
|
<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">
|
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="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">
|
||||||
|
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
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="h-24 w-24 text-primary mb-4"
|
class="h-10 w-10 text-success"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor">
|
stroke="currentColor">
|
||||||
|
@ -430,39 +492,80 @@
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
stroke-width="2"
|
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" />
|
d="M5 13l4 4L19 7" />
|
||||||
</svg>
|
</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>
|
||||||
|
<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>
|
</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"
|
class="modal modal-open"
|
||||||
*ngIf="
|
*ngIf="
|
||||||
(isTokenVerified() ||
|
(isTokenVerified() ||
|
||||||
isVerifying() ||
|
isVerifying() ||
|
||||||
verificationError() ||
|
verificationError() ||
|
||||||
isAutoLoginInProgress()) &&
|
isAutoLoginInProgress()) &&
|
||||||
isValidLoginAttempt()
|
(isValidLoginAttempt() || (signup() && token()))
|
||||||
"
|
"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
aria-labelledby="verify-modal-title"
|
aria-labelledby="verify-modal-title"
|
||||||
|
@ -564,7 +667,7 @@
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="modal modal-open"
|
class="modal modal-open"
|
||||||
|
@ -614,6 +717,52 @@
|
||||||
</div>
|
</div>
|
||||||
</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
|
<div
|
||||||
*ngIf="isAutoLoginInProgress()"
|
*ngIf="isAutoLoginInProgress()"
|
||||||
class="fixed inset-0 bg-black bg-opacity-20 z-50 flex items-center justify-center">
|
class="fixed inset-0 bg-black bg-opacity-20 z-50 flex items-center justify-center">
|
||||||
|
|
|
@ -88,6 +88,7 @@ export class WelcomeRootComponent implements OnInit {
|
||||||
>(null);
|
>(null);
|
||||||
public isRegistrationMode: WritableSignal<boolean> = signal(false);
|
public isRegistrationMode: WritableSignal<boolean> = signal(false);
|
||||||
public isAutoLoginInProgress: WritableSignal<boolean> = signal(false);
|
public isAutoLoginInProgress: WritableSignal<boolean> = signal(false);
|
||||||
|
public displayAutologinDialog: WritableSignal<boolean> = signal(false);
|
||||||
private removeQueryParams: WritableSignal<boolean> = signal(false);
|
private removeQueryParams: WritableSignal<boolean> = signal(false);
|
||||||
|
|
||||||
public get isDarkMode(): boolean {
|
public get isDarkMode(): boolean {
|
||||||
|
@ -297,6 +298,7 @@ export class WelcomeRootComponent implements OnInit {
|
||||||
tap((response: SuccessDtoApiModel) => {
|
tap((response: SuccessDtoApiModel) => {
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
this.isTokenVerified.set(true);
|
this.isTokenVerified.set(true);
|
||||||
|
this.displayAutologinDialog.set(true);
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
delay(1000),
|
delay(1000),
|
||||||
|
@ -320,6 +322,11 @@ export class WelcomeRootComponent implements OnInit {
|
||||||
if (!this.verificationError()) {
|
if (!this.verificationError()) {
|
||||||
this.displaySkeleton.set(false);
|
this.displaySkeleton.set(false);
|
||||||
this.isTokenVerified.set(true);
|
this.isTokenVerified.set(true);
|
||||||
|
|
||||||
|
if (this.isValidLoginAttempt() && !this.signup()) {
|
||||||
|
this.isAutoLoginInProgress.set(true);
|
||||||
|
}
|
||||||
|
|
||||||
timer(2000).subscribe(() => {
|
timer(2000).subscribe(() => {
|
||||||
this.isTokenVerified.set(false);
|
this.isTokenVerified.set(false);
|
||||||
this.focusPasswordField();
|
this.focusPasswordField();
|
||||||
|
@ -346,7 +353,7 @@ export class WelcomeRootComponent implements OnInit {
|
||||||
this.router.navigate(['/dashboard']);
|
this.router.navigate(['/dashboard']);
|
||||||
} else {
|
} else {
|
||||||
this.isAutoLoginInProgress.set(false);
|
this.isAutoLoginInProgress.set(false);
|
||||||
// Handle login failure
|
//TODO: Handle login failure
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue