fix: enhance OTP sending logic and add success message display

src/app/auth/otp/otp.component.html

@@ -2,11 +2,11 @@
     <div class="verify-card">
 
         @if(!isOtpSent()){
-            <h2 class="title">🔐 Login</h2>
+        <h2 class="title">🔐 Login</h2>
         }
 
         @if(isOtpSent() && !isVerified()){
-            <h2 class="title">🔐 OTP Verification</h2>
+        <h2 class="title">🔐 OTP Verification</h2>
         }
 
         <!-- Step 1: Enter Email -->
@@ -21,19 +21,9 @@
         <!-- Step 2: OTP Input -->
         @if (isOtpSent() && !isVerified()) {
         <div class="otp-section">
-            <p class="info-text">
-                OTP sent to <b>{{ emailForm.value.email }}</b>
-            </p>
-
             <form [formGroup]="otpForm" (ngSubmit)="verifyOtp()">
                 <label for="otp">Enter 6-digit OTP</label>
                 <input id="otp" type="text" maxlength="6" formControlName="otp" placeholder="123456" />
-                @if (isError()) {
-                <div class="error-banner">
-                    <i class="fa-solid fa-circle-exclamation"></i>
-                    <span>{{ message() }}</span>
-                </div>
-                }
                 <button type="submit" [disabled]="otpForm.invalid">
                     Verify OTP
                 </button>
@@ -47,5 +37,19 @@
             </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>