feature/refactor-login #19
|
|
@ -411,18 +411,80 @@
|
|||
|
||||
<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">
|
||||
<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-24 w-24 text-primary mb-4"
|
||||
class="h-10 w-10 text-success"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
|
|
@ -430,39 +492,80 @@
|
|||
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" />
|
||||
d="M5 13l4 4L19 7" />
|
||||
</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>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue