Merge pull request 'fix: enhance OTP sending logic and add success message display' (#7) from task/popup-for-dynamic-form into develop

Reviewed-on: #7

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

@@ -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>

src/app/auth/otp/otp.component.scss

@@ -171,3 +171,23 @@ button {
     font-size: 14px;
     margin-bottom: 10px;
 }
+
+/* Success banner for OTP sent */
+.success-banner {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(120, 255, 140, 0.07);
+    border: 1px solid rgba(120, 255, 140, 0.25);
+    border-radius: 8px;
+    padding: 10px 14px;
+    margin: 10px 0 10px;
+    color: #78ff8c;
+    font-size: 13px;
+
+    i {
+        font-size: 15px;
+        flex-shrink: 0;
+        color: #78ff8c;
+    }
+}

src/app/auth/otp/otp.component.ts

@@ -48,15 +48,27 @@ export class OtpComponent implements OnInit {
     if (this.emailForm.invalid) return;
     const email = this.emailForm.value.email;
 
-    this.authService.sendOtp(email).subscribe(() => {
+    this.authService.sendOtp(email).subscribe({
+      next: () => {
         this.isOtpSent.set(true);
-      this.message.set('OTP sent successfully!');
+        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();
   }