feature/refactor-login #19
|
@ -10,13 +10,6 @@ const simpleLayoutRoutes: Routes = [
|
||||||
(m) => m.WelcomeRootComponent
|
(m) => m.WelcomeRootComponent
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'verify',
|
|
||||||
loadComponent: () =>
|
|
||||||
import('./pages/email-verify-root/email-verify-root.component').then(
|
|
||||||
(m) => m.EmailVerifyRootComponent
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const protectedRoutes: Routes = [
|
const protectedRoutes: Routes = [
|
||||||
|
|
|
@ -385,8 +385,8 @@
|
||||||
<!-- Hauptinhalt -->
|
<!-- Hauptinhalt -->
|
||||||
<div class="flex-1 overflow-y-auto bg-base-100">
|
<div class="flex-1 overflow-y-auto bg-base-100">
|
||||||
<main [ngStyle]="mainContent" class="flex-1 w-full h-full">
|
<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 h-full flex">
|
||||||
<div class="w-full max-w-5xl">
|
<div class="w-full">
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
</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="flex flex-col h-full">
|
||||||
<div
|
<div class="w-full max-w-full sticky top-0 z-10 pt-4 px-4 sm:px-8">
|
||||||
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 mx-auto">
|
||||||
<div class="w-full max-w-4xl mx-auto">
|
|
||||||
<app-stepper-indicator
|
<app-stepper-indicator
|
||||||
[steps]="steps"
|
[steps]="steps"
|
||||||
[currentStep]="currentStep()"
|
[currentStep]="currentStep()"
|
||||||
|
@ -14,7 +13,7 @@
|
||||||
<!-- Rest of the component remains the same -->
|
<!-- Rest of the component remains the same -->
|
||||||
|
|
||||||
<div class="flex-grow overflow-y-auto px-4 sm:px-8 py-8">
|
<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) {
|
@if (currentStep() === 0) {
|
||||||
<app-basic-step [form]="form"></app-basic-step>
|
<app-basic-step [form]="form"></app-basic-step>
|
||||||
}
|
}
|
||||||
|
@ -24,9 +23,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="w-full bg-base-100 sticky bottom-0 z-10 px-4 sm:px-8 py-4">
|
||||||
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 mx-auto">
|
||||||
<div class="flex justify-between max-w-4xl mx-auto">
|
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
Loading…
Reference in New Issue