104 lines
3.0 KiB
TypeScript
104 lines
3.0 KiB
TypeScript
import { Component, inject, OnInit, signal } from '@angular/core';
|
|
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { AuthService } from '../auth.service';
|
|
import { ActivatedRoute, Router } from '@angular/router';
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'app-otp',
|
|
templateUrl: './otp.component.html',
|
|
styleUrls: ['./otp.component.scss'],
|
|
imports: [ReactiveFormsModule, CommonModule]
|
|
})
|
|
export class OtpComponent implements OnInit {
|
|
emailForm: FormGroup;
|
|
otpForm: FormGroup;
|
|
isOtpSent = signal(false);
|
|
isVerified = signal(false);
|
|
isError = signal(false);
|
|
message = signal('');
|
|
countdown = signal(0);
|
|
timer: NodeJS.Timeout | undefined;
|
|
returnUrl = '';
|
|
fb: FormBuilder = inject(FormBuilder);
|
|
authService: AuthService = inject(AuthService);
|
|
router: Router = inject(Router);
|
|
route: ActivatedRoute = inject(ActivatedRoute);
|
|
|
|
constructor() {
|
|
this.emailForm = this.fb.group({
|
|
email: ['', [Validators.required, Validators.email]],
|
|
});
|
|
|
|
this.otpForm = this.fb.group({
|
|
otp: ['', [Validators.required, Validators.pattern(/^[0-9]{6}$/)]],
|
|
});
|
|
|
|
if(this.authService.isLoggedIn()){
|
|
this.router.navigate(['']);
|
|
}
|
|
}
|
|
|
|
|
|
ngOnInit() {
|
|
this.returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '';
|
|
}
|
|
|
|
sendOtp() {
|
|
if (this.emailForm.invalid) return;
|
|
const email = this.emailForm.value.email;
|
|
|
|
this.authService.sendOtp(email).subscribe({
|
|
next: () => {
|
|
this.isOtpSent.set(true);
|
|
this.isError.set(false);
|
|
this.message.set(`OTP sent to ${email}.`);
|
|
this.startTimer(30); // 30 seconds countdown
|
|
},
|
|
error: (err) => {
|
|
this.isError.set(true);
|
|
if (err.status === 404) {
|
|
this.message.set('Email not found. Please check and try again.');
|
|
} else {
|
|
this.message.set('Failed to send OTP. Please try again.');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
resendOtp() {
|
|
if (this.countdown() > 0) return;
|
|
this.otpForm.reset();
|
|
this.sendOtp();
|
|
}
|
|
|
|
startTimer(seconds: number) {
|
|
this.countdown.set(seconds);
|
|
clearInterval(this.timer);
|
|
this.timer = setInterval(() => {
|
|
this.countdown.update(value => value - 1);
|
|
if (this.countdown() <= 0) clearInterval(this.timer);
|
|
}, 1000);
|
|
}
|
|
|
|
verifyOtp() {
|
|
if (this.otpForm.invalid) return;
|
|
const { email: userId } = this.emailForm.value;
|
|
const { otp: otpCode } = this.otpForm.value;
|
|
|
|
this.authService.verifyOtp(userId, otpCode).subscribe({
|
|
next: () => {
|
|
this.isVerified.set(true);
|
|
this.router.navigateByUrl(this.returnUrl); // Navigate to dashboard or desired route after successful verification
|
|
},
|
|
error: (err) => {
|
|
this.isError.set(true);
|
|
if (err.status === 401 && err.error?.message) {
|
|
this.message.set(err.error.message);
|
|
} else {
|
|
this.message.set('Something went wrong. Please try again.');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
} |