55 lines
1.8 KiB
HTML
55 lines
1.8 KiB
HTML
<div class="verify-wrapper">
|
|
<div class="verify-card">
|
|
|
|
@if(!isOtpSent()){
|
|
<h2 class="title">🔐 Login</h2>
|
|
}
|
|
|
|
@if(isOtpSent() && !isVerified()){
|
|
<h2 class="title">🔐 OTP Verification</h2>
|
|
}
|
|
|
|
<!-- Step 1: Enter Email -->
|
|
@if (!isOtpSent()) {
|
|
<form [formGroup]="emailForm" (ngSubmit)="sendOtp()" class="form-section">
|
|
<label for="email">Email Address</label>
|
|
<input id="email" type="email" formControlName="email" placeholder="Enter your email" />
|
|
<button type="submit" [disabled]="emailForm.invalid">Send OTP</button>
|
|
</form>
|
|
}
|
|
|
|
<!-- Step 2: OTP Input -->
|
|
@if (isOtpSent() && !isVerified()) {
|
|
<div class="otp-section">
|
|
<form [formGroup]="otpForm" (ngSubmit)="verifyOtp()">
|
|
<label for="otp">Enter 6-digit OTP</label>
|
|
<input id="otp" type="text" maxlength="6" formControlName="otp" placeholder="123456" />
|
|
<button type="submit" [disabled]="otpForm.invalid">
|
|
Verify OTP
|
|
</button>
|
|
</form>
|
|
|
|
<button class="resend-btn" (click)="resendOtp()" [disabled]="countdown() > 0">
|
|
Resend OTP
|
|
@if (countdown() > 0) {
|
|
<span>({{ countdown() }}s)</span>
|
|
}
|
|
</button>
|
|
</div>
|
|
}
|
|
|
|
@if (isError()) {
|
|
<div class="error-banner">
|
|
<i class="fa-solid fa-circle-exclamation"></i>
|
|
<span>{{ message() }}</span>
|
|
</div>
|
|
}
|
|
|
|
@if (!isError() && isOtpSent() && !isVerified()) {
|
|
<div class="success-banner">
|
|
<i class="fa-solid fa-circle-check"></i>
|
|
<span>{{ message() }}</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div> |