feature/refactor-login #19
|
@ -10,13 +10,6 @@ const simpleLayoutRoutes: Routes = [
|
|||
(m) => m.WelcomeRootComponent
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'verify',
|
||||
loadComponent: () =>
|
||||
import('./pages/email-verify-root/email-verify-root.component').then(
|
||||
(m) => m.EmailVerifyRootComponent
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const protectedRoutes: Routes = [
|
||||
|
|
|
@ -385,8 +385,8 @@
|
|||
<!-- Hauptinhalt -->
|
||||
<div class="flex-1 overflow-y-auto bg-base-100">
|
||||
<main [ngStyle]="mainContent" class="flex-1 w-full h-full">
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<div class="w-full max-w-5xl">
|
||||
<div class="w-full h-full flex">
|
||||
<div class="w-full">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,39 +0,0 @@
|
|||
<div class="bg-primary w-screen h-screen">
|
||||
<div class="modal modal-open">
|
||||
<div
|
||||
[ngStyle]="backgroundStyle"
|
||||
class="modal-box w-11/12 h-2/6 max-w-5xl flex">
|
||||
<div class="w-full flex flex-col justify-center items-center">
|
||||
@if (verifyStatus() === true) {
|
||||
@if (showRedirectMessage()) {
|
||||
<div class="text-center">
|
||||
<h1 class="font-bold text-3xl pt-5">Your email is verified!</h1>
|
||||
<p class="pt-3 pb-6">
|
||||
Your email {{ email() }} has been successfully verified. will
|
||||
<br />
|
||||
You will be automatically redirected in to the login page to
|
||||
access the application shortly.
|
||||
</p>
|
||||
<button
|
||||
(click)="navigateToWelcomeScreen()"
|
||||
class="btn btn-primary no-animation">
|
||||
Go to the App
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
} @else if (verifyStatus() === false) {
|
||||
<div class="text-center">
|
||||
<h1 class="font-bold text-3xl pt-5">
|
||||
Oops, something went wrong! :(
|
||||
</h1>
|
||||
<p class="pt-3">We couldn't verify your email.</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="text-center">
|
||||
<span class="loading loading-dots loading-lg"></span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,115 +0,0 @@
|
|||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ElementRef,
|
||||
InputSignal,
|
||||
OnInit,
|
||||
WritableSignal,
|
||||
input,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { VerifyApiService } from '../../api';
|
||||
import { BackgroundPatternService, ThemeService } from '../../shared/service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-email-verify-root',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
providers: [],
|
||||
templateUrl: './email-verify-root.component.html',
|
||||
styleUrl: './email-verify-root.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class EmailVerifyRootComponent implements OnInit {
|
||||
public token: InputSignal<string> = input<string>('');
|
||||
public email: WritableSignal<string> = signal<string>('');
|
||||
public backgroundStyle: { 'background-image': string } | null = null;
|
||||
public verifyStatus: WritableSignal<boolean | null> = signal<boolean | null>(
|
||||
null
|
||||
);
|
||||
public showRedirectMessage: WritableSignal<boolean> = signal<boolean>(false);
|
||||
|
||||
public constructor(
|
||||
private readonly api: VerifyApiService,
|
||||
private readonly router: Router,
|
||||
private readonly el: ElementRef,
|
||||
private readonly backgroundPatternService: BackgroundPatternService,
|
||||
private readonly themeService: ThemeService
|
||||
) {}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.verifyEmail();
|
||||
this.setBackground();
|
||||
}
|
||||
|
||||
public setBackground(): void {
|
||||
const theme = this.themeService.getTheme();
|
||||
let opacity: number;
|
||||
|
||||
if (theme === 'dark') {
|
||||
opacity = 0.05;
|
||||
} else {
|
||||
opacity = 0.1;
|
||||
}
|
||||
|
||||
const colorPrimary = getComputedStyle(
|
||||
this.el.nativeElement
|
||||
).getPropertyValue('--p');
|
||||
|
||||
const svgUrl = this.backgroundPatternService.getWigglePattern(
|
||||
colorPrimary,
|
||||
opacity
|
||||
);
|
||||
|
||||
this.backgroundStyle = { 'background-image': `url("${svgUrl}")` };
|
||||
}
|
||||
|
||||
public navigateToWelcomeScreen(): void {
|
||||
const email: string = this.extractEmail();
|
||||
|
||||
this.router.navigate(['/welcome'], {
|
||||
queryParams: { verified: true, email: email },
|
||||
});
|
||||
}
|
||||
|
||||
private extractVerifyToken(): string {
|
||||
const [verifyToken]: string[] = this.token().split('|');
|
||||
|
||||
return verifyToken;
|
||||
}
|
||||
|
||||
private extractEmail(): string {
|
||||
const [, email]: string[] = this.token().split('|');
|
||||
|
||||
return email;
|
||||
}
|
||||
|
||||
private verifyEmail(): void {
|
||||
const verifyToken: string = this.extractVerifyToken();
|
||||
const email: string = this.extractEmail();
|
||||
|
||||
if (verifyToken && email) {
|
||||
this.email.set(decodeURIComponent(atob(email)));
|
||||
}
|
||||
|
||||
// this.api
|
||||
// .verifyControllerVerifyEmail(verifyToken)
|
||||
// .pipe(
|
||||
// delay(1500),
|
||||
// tap((isVerified: boolean) => {
|
||||
// this.verifyStatus.set(isVerified);
|
||||
// }),
|
||||
// filter((isVerified) => isVerified),
|
||||
// tap(() => {
|
||||
// this.showRedirectMessage.set(true);
|
||||
// }),
|
||||
// delay(10000)
|
||||
// )
|
||||
// .subscribe(() => {
|
||||
// this.navigateToWelcomeScreen();
|
||||
// });
|
||||
}
|
||||
}
|
|
@ -1,7 +1,6 @@
|
|||
<div class="flex flex-col h-full">
|
||||
<div
|
||||
class="w-full bg-base-100 max-w-full sticky top-0 z-10 pt-4 px-4 sm:px-8">
|
||||
<div class="w-full max-w-4xl mx-auto">
|
||||
<div class="w-full max-w-full sticky top-0 z-10 pt-4 px-4 sm:px-8">
|
||||
<div class="w-full mx-auto">
|
||||
<app-stepper-indicator
|
||||
[steps]="steps"
|
||||
[currentStep]="currentStep()"
|
||||
|
@ -14,7 +13,7 @@
|
|||
<!-- Rest of the component remains the same -->
|
||||
|
||||
<div class="flex-grow overflow-y-auto px-4 sm:px-8 py-8">
|
||||
<div class="w-full max-w-4xl mx-auto">
|
||||
<div class="w-full mx-auto">
|
||||
@if (currentStep() === 0) {
|
||||
<app-basic-step [form]="form"></app-basic-step>
|
||||
}
|
||||
|
@ -24,9 +23,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full bg-base-100 max-w-full sticky bottom-0 z-10 px-4 sm:px-8 py-4">
|
||||
<div class="flex justify-between max-w-4xl mx-auto">
|
||||
<div class="w-full bg-base-100 sticky bottom-0 z-10 px-4 sm:px-8 py-4">
|
||||
<div class="flex justify-between mx-auto">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
|
|
Loading…
Reference in New Issue