Bangara Raju Kottedi
94f4305615
- Migrated all *ngIf directives to modern @if syntax in otp.component.html - Updated email form, OTP entry, countdown display, and success message conditionals - Resolves ngtsc deprecation warning 6385 for better Angular 17+ compatibility
40 lines
1.3 KiB
HTML
40 lines
1.3 KiB
HTML
<div class="otp-container">
|
|
<h2>🔐 Email Verification</h2>
|
|
|
|
<!-- Step 1: Enter Email -->
|
|
@if (!isOtpSent()) {
|
|
<form [formGroup]="emailForm" (ngSubmit)="sendOtp()">
|
|
<label>Email Address</label>
|
|
<input type="email" formControlName="email" placeholder="Enter your email" />
|
|
<button type="submit" [disabled]="emailForm.invalid">Send OTP</button>
|
|
</form>
|
|
}
|
|
|
|
<!-- Step 2: Enter OTP -->
|
|
@if (isOtpSent() && !isVerified()) {
|
|
<div>
|
|
<p>OTP sent to <b>{{ emailForm.value.email }}</b></p>
|
|
|
|
<form [formGroup]="otpForm" (ngSubmit)="verifyOtp()">
|
|
<label>Enter 6-digit OTP</label>
|
|
<input type="text" maxlength="6" formControlName="otp" placeholder="123456" />
|
|
<button type="submit" [disabled]="otpForm.invalid">Verify OTP</button>
|
|
</form>
|
|
|
|
<button (click)="resendOtp()" [disabled]="countdown() > 0">
|
|
Resend OTP @if (countdown() > 0) {
|
|
<span>({{ countdown() }}s)</span>
|
|
}
|
|
</button>
|
|
</div>
|
|
}
|
|
|
|
<!-- Step 3: Success -->
|
|
@if (isVerified()) {
|
|
<div>
|
|
<p class="success">✅ Your email has been verified successfully!</p>
|
|
</div>
|
|
}
|
|
|
|
<p class="message">{{ message() }}</p>
|
|
</div> |