refactor(email-verification): streamline verification code input and error handling

- Replace individual digit inputs with a single input for the 6-digit verification code to simplify user interaction.
- Update error messages for clarity and consistency, particularly for already linked emails.
- Enhance the timer functionality and cleanup logic to improve component lifecycle management.

Jira Ticket: https://linuxfoundation.atlassian.net/browse/LFXV2-502

Generated with [Cursor](https://cursor.com/)

Signed-off-by: Mauricio Zanetti Salomao <msalomao@contractor.linuxfoundation.org>

Author: mauriciozanettisalomao

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.html

@@ -26,7 +26,7 @@ <h2 class="text-xl font-semibold text-gray-900 mb-2">Verify Your Email Address</
               'text-orange-600': timeRemaining() <= 60 && timeRemaining() > 30,
               'text-red-600': timeRemaining() <= 30,
             }">
-            {{ formattedTime }}
+            {{ formattedTime() }}
           </span>
         </div>
       </div>
@@ -47,26 +47,18 @@ <h2 class="text-xl font-semibold text-gray-900 mb-2">Verify Your Email Address</
     <form [formGroup]="verificationForm" (ngSubmit)="submitCode()">
       <div class="mb-6">
         <label class="block text-sm font-medium text-gray-700 mb-3">Verification Code</label>
-        <div class="flex gap-3 justify-center mb-3">
-          @for (digit of [1, 2, 3, 4, 5, 6]; track digit) {
-            <input
-              type="text"
-              [id]="'digit' + digit"
-              [formControlName]="'digit' + digit"
-              inputmode="numeric"
-              pattern="\d"
-              (input)="onDigitInput($event, digit)"
-              (keydown)="onDigitKeyDown($event, digit)"
-              (paste)="onDigitPaste($event)"
-              class="w-12 h-14 text-center text-2xl font-bold border-2 rounded-lg transition-all duration-200 border-blue-500 focus:border-blue-600 focus:ring-2 focus:ring-blue-200"
-              [ngClass]="{
-                'border-red-500': verificationForm.get('digit' + digit)?.invalid && verificationForm.get('digit' + digit)?.touched
-              }"
-              [attr.data-testid]="'digit-' + digit + '-input'"
-              autocomplete="off" />
-          }
+        <div class="flex justify-center mb-3">
+          <p-inputOtp
+            formControlName="code"
+            [length]="6"
+            [integerOnly]="true"
+            [autofocus]="true"
+            styleClass="gap-3"
+            inputClass="w-12 h-14 text-center text-2xl font-bold"
+            data-testid="otp-input">
+          </p-inputOtp>
         </div>
-        @if (verificationForm.invalid && (verificationForm.touched || verificationForm.dirty)) {
+        @if (verificationForm.get('code')?.invalid && (verificationForm.get('code')?.touched || verificationForm.get('code')?.dirty)) {
           <div class="text-red-600 text-xs text-center mb-2" data-testid="verification-code-error">
             Please enter all 6 digits
           </div>