From b6e80e747ed558755c0872200dc5029790892267 Mon Sep 17 00:00:00 2001
From: Amr Elsayyad <amrelsayyad96@gmail.com>
Date: Sun, 30 Jun 2024 20:34:56 +0300
Subject: [PATCH] Add confirm PIN for PIN generation (#11)

---
 .../account-pin/account-pin.component.html    | 172 ++++++++++++++----
 .../account-pin/account-pin.component.ts      |  53 +++---
 .../register/register.component.html          |  72 ++++++--
 src/app/util/formutil.ts                      |   4 +-
 4 files changed, 212 insertions(+), 89 deletions(-)

diff --git a/src/app/components/account-pin/account-pin.component.html b/src/app/components/account-pin/account-pin.component.html
index 85e3b76..9666a18 100644
--- a/src/app/components/account-pin/account-pin.component.html
+++ b/src/app/components/account-pin/account-pin.component.html
@@ -1,38 +1,92 @@
 <div class="flex justify-center items-center coverparentspace">
   <div
     class="max-w-md w-full rounded-lg bg-white p-6 leading-5 text-slate-700 shadow-xl shadow-black/5 ring-1 ring-slate-700/10"
-    *ngIf="!loading; else loader">
-
-
+    *ngIf="!loading; else loader"
+  >
     <ng-container *ngIf="showGeneratePINForm; else changePINForm">
       <!-- "Generate PIN" form -->
       <h2 class="text-3xl font-semibold mb-6 text-center">Generate PIN</h2>
-      <form [formGroup]="pinChangeForm" (ngSubmit)="onSubmitGeneratePIN()" class="space-y-4">
+      <form
+        [formGroup]="pinChangeForm"
+        (ngSubmit)="onSubmitGeneratePIN()"
+        class="space-y-4"
+      >
         <div>
-          <label for="newPin" class="block text-sm font-bold mb-2">New PIN:</label>
-          <input formControlName="newPin" type="password" id="newPin"
+          <label for="newPinGenerate" class="block text-sm font-bold mb-2"
+            >New PIN:</label
+          >
+          <input
+            formControlName="newPin"
+            type="password"
+            id="newPinGenerate"
             class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-indigo-500"
-            placeholder="Enter the new PIN" />
-          <div *ngIf="pinChangeForm.get('newPin')?.invalid && pinChangeForm.get('newPin')?.touched"
-            class="text-red-500 text-sm mt-1">
+            placeholder="Enter the new PIN"
+          />
+          <div
+            *ngIf="
+              pinChangeForm.get('newPin')?.invalid &&
+              pinChangeForm.get('newPin')?.touched
+            "
+            class="text-red-500 text-sm mt-1"
+          >
             New PIN is required and must be 4 digits.
           </div>
         </div>
-        {{print(pinChangeForm.get('newPin'))}}
         <div>
-          <label for="password" class="block text-sm font-bold mb-2">Password:</label>
-          <input formControlName="password" type="password" id="password"
+          <label for="confirmPinGenerate" class="block text-sm font-bold mb-2"
+            >Confirm PIN:</label
+          >
+          <input
+            formControlName="confirmPin"
+            type="password"
+            id="confirmPinGenerate"
             class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-indigo-500"
-            placeholder="Enter your password" />
-          <div *ngIf="pinChangeForm.get('password')?.invalid && pinChangeForm.get('password')?.touched"
-            class="text-red-500 text-sm mt-1">
+            placeholder="Confirm the new PIN"
+          />
+          <div
+            *ngIf="
+              pinChangeForm.get('confirmPin')?.invalid &&
+              pinChangeForm.get('confirmPin')?.touched
+            "
+            class="text-red-500 text-sm mt-1"
+          >
+            <div *ngIf="pinChangeForm.get('confirmPin')?.errors?.required">
+              Confirm PIN is required.
+            </div>
+            <div *ngIf="pinChangeForm.get('confirmPin')?.errors?.mismatch">
+              PINs do not match.
+            </div>
+          </div>
+        </div>
+        <div>
+          <label for="passwordGenerate" class="block text-sm font-bold mb-2"
+            >Password:</label
+          >
+          <input
+            formControlName="password"
+            type="password"
+            id="passwordGenerate"
+            class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-indigo-500"
+            placeholder="Enter your password"
+          />
+          <div
+            *ngIf="
+              pinChangeForm.get('password')?.invalid &&
+              pinChangeForm.get('password')?.touched
+            "
+            class="text-red-500 text-sm mt-1"
+          >
             Password is required.
           </div>
         </div>
         <div class="flex justify-center">
-          <button type="submit" [disabled]="pinChangeForm.invalid"
-            class="w-full bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">Generate
-            PIN</button>
+          <button
+            type="submit"
+            [disabled]="pinChangeForm.invalid"
+            class="w-full bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Generate PIN
+          </button>
         </div>
       </form>
     </ng-container>
@@ -40,41 +94,82 @@ <h2 class="text-3xl font-semibold mb-6 text-center">Generate PIN</h2>
     <ng-template #changePINForm>
       <!-- "Change PIN" form -->
       <h2 class="text-3xl font-semibold mb-6 text-center">Change PIN</h2>
-      <form [formGroup]="pinChangeForm" (ngSubmit)="onSubmitChangePIN()" class="space-y-4">
+      <form
+        [formGroup]="pinChangeForm"
+        (ngSubmit)="onSubmitChangePIN()"
+        class="space-y-4"
+      >
         <div>
-          <label for="oldPin" class="block text-sm font-bold mb-2">Old PIN:</label>
-          <input formControlName="oldPin" type="password" id="oldPin"
+          <label for="oldPin" class="block text-sm font-bold mb-2"
+            >Old PIN:</label
+          >
+          <input
+            formControlName="oldPin"
+            type="password"
+            id="oldPin"
             class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-indigo-500"
-            placeholder="Enter the old PIN" />
-          <div *ngIf="pinChangeForm.get('oldPin')?.invalid && pinChangeForm.get('oldPin')?.touched"
-            class="text-red-500 text-sm mt-1">
+            placeholder="Enter the old PIN"
+          />
+          <div
+            *ngIf="
+              pinChangeForm.get('oldPin')?.invalid &&
+              pinChangeForm.get('oldPin')?.touched
+            "
+            class="text-red-500 text-sm mt-1"
+          >
             Old PIN is required and must be 4 digits.
           </div>
         </div>
         <div>
-          <label for="newPin" class="block text-sm font-bold mb-2">New PIN:</label>
-          <input formControlName="newPin" type="password" id="newPin"
+          <label for="newPinChange" class="block text-sm font-bold mb-2"
+            >New PIN:</label
+          >
+          <input
+            formControlName="newPin"
+            type="password"
+            id="newPinChange"
             class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-indigo-500"
-            placeholder="Enter the new PIN" />
-          <div *ngIf="pinChangeForm.get('newPin')?.invalid && pinChangeForm.get('newPin')?.touched"
-            class="text-red-500 text-sm mt-1">
+            placeholder="Enter the new PIN"
+          />
+          <div
+            *ngIf="
+              pinChangeForm.get('newPin')?.invalid &&
+              pinChangeForm.get('newPin')?.touched
+            "
+            class="text-red-500 text-sm mt-1"
+          >
             New PIN is required and must be 4 digits.
           </div>
         </div>
         <div>
-          <label for="password" class="block text-sm font-bold mb-2">Password:</label>
-          <input formControlName="password" type="password" id="password"
+          <label for="passwordChange" class="block text-sm font-bold mb-2"
+            >Password:</label
+          >
+          <input
+            formControlName="password"
+            type="password"
+            id="passwordChange"
             class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-indigo-500"
-            placeholder="Enter your password" />
-          <div *ngIf="pinChangeForm.get('password')?.invalid && pinChangeForm.get('password')?.touched"
-            class="text-red-500 text-sm mt-1">
+            placeholder="Enter your password"
+          />
+          <div
+            *ngIf="
+              pinChangeForm.get('password')?.invalid &&
+              pinChangeForm.get('password')?.touched
+            "
+            class="text-red-500 text-sm mt-1"
+          >
             Password is required.
           </div>
         </div>
         <div class="flex justify-center">
-          <button type="submit" [disabled]="pinChangeForm.invalid"
-            class="w-full bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">Change
-            PIN</button>
+          <button
+            type="submit"
+            [disabled]="pinChangeForm.invalid"
+            class="w-full bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Change PIN
+          </button>
         </div>
       </form>
     </ng-template>
@@ -82,7 +177,6 @@ <h2 class="text-3xl font-semibold mb-6 text-center">Change PIN</h2>
 </div>
 <ng-template #loader>
   <div class="flex items-center justify-center h-full">
-
     <div class="loader">Loading</div>
   </div>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/app/components/account-pin/account-pin.component.ts b/src/app/components/account-pin/account-pin.component.ts
index 77cd000..c1acc79 100644
--- a/src/app/components/account-pin/account-pin.component.ts
+++ b/src/app/components/account-pin/account-pin.component.ts
@@ -3,8 +3,9 @@ import { ApiService } from 'src/app/services/api.service';
 import { LoadermodelService } from 'src/app/services/loadermodel.service';
 
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { passwordMismatch } from 'src/app/util/formutil';
 
 @Component({
   selector: 'app-account-pin',
@@ -20,7 +21,6 @@ export class AccountPinComponent implements OnInit {
 
   constructor(
     private apiService: ApiService,
-    private fb: FormBuilder,
     private _toastService: ToastService,
     private router: Router,
     private loader: LoadermodelService // Inject the LoaderService here
@@ -46,37 +46,34 @@ export class AccountPinComponent implements OnInit {
   initPinChangeForm(): void {
     if (this.showGeneratePINForm) {
       // For "Generate PIN" form
-      this.pinChangeForm = this.fb.group({
-        newPin: [
-          '',
-          [
+      this.pinChangeForm = new FormGroup(
+        {
+          newPin: new FormControl('', [
             Validators.required,
             Validators.minLength(4),
             Validators.maxLength(4),
-          ],
-        ],
-        password: ['', Validators.required],
-      });
+          ]),
+          confirmPin: new FormControl('', Validators.required),
+          password: new FormControl('', Validators.required),
+        },
+        {
+          validators: passwordMismatch('newPin', 'confirmPin'),
+        }
+      );
     } else {
       // For "Change PIN" form
-      this.pinChangeForm = this.fb.group({
-        oldPin: [
-          '',
-          [
-            Validators.required,
-            Validators.minLength(4),
-            Validators.maxLength(4),
-          ],
-        ],
-        newPin: [
-          '',
-          [
-            Validators.required,
-            Validators.minLength(4),
-            Validators.maxLength(4),
-          ],
-        ],
-        password: ['', Validators.required],
+      this.pinChangeForm = new FormGroup({
+        oldPin: new FormControl('', [
+          Validators.required,
+          Validators.minLength(4),
+          Validators.maxLength(4),
+        ]),
+        newPin: new FormControl('', [
+          Validators.required,
+          Validators.minLength(4),
+          Validators.maxLength(4),
+        ]),
+        password: new FormControl('', Validators.required),
       });
     }
   }
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html
index faa5dbc..80a09ff 100644
--- a/src/app/components/register/register.component.html
+++ b/src/app/components/register/register.component.html
@@ -130,8 +130,6 @@ <h2 class="my-3 text-center text-3xl font-extrabold text-gray-900">
                 Password must be at most 127 characters long.
               </div>
             </div>
-            
-        
           </div>
           <div class="col-span-1">
             <label for="confirmPassword" class="block text-sm font-bold mb-2"
@@ -151,7 +149,7 @@ <h2 class="my-3 text-center text-3xl font-extrabold text-gray-900">
               <div *ngIf="f.confirmPassword.errors?.required">
                 Confirm Password is required.
               </div>
-              <div *ngIf="f.confirmPassword.errors?.passwordMismatch">
+              <div *ngIf="f.confirmPassword.errors?.mismatch">
                 Passwords do not match.
               </div>
             </div>
@@ -159,18 +157,37 @@ <h2 class="my-3 text-center text-3xl font-extrabold text-gray-900">
         </div>
 
         <ul class="text-red-400 text-sm list-disc" *ngIf="f.password?.dirty">
-          <li class="block text-red-500 font-medium rounded-lg mt-2" *ngIf="!f.password?.value?.match('^(?=.*[A-Z])')">At least oneuppercase
-                                  letter.</li>
-          <li class="block text-red-500 font-medium rounded-lg mt-2" *ngIf="!f.password?.value?.match('(?=.*[a-z])')">At least one lowercase
-                                  letter.</li>
-          <li class="block text-red-500 font-medium rounded-lg mt-2" *ngIf="!f.password?.value?.match('(.*[0-9].*)')">At least one
-                                  digit.</li>
-          <li class="block text-red-500 font-medium rounded-lg mt-2" *ngIf="!f.password?.value?.match('(?=.*[!@#$%^&*])')">At least one
-                                  special
-                                  character.</li>
-          <li class="block text-red-500 font-medium rounded-lg mt-2" *ngIf="!f.password?.value?.match('.{8,}')">At least 8 characters
-                                  long.</li>
-       </ul>
+          <li
+            class="block text-red-500 font-medium rounded-lg mt-2"
+            *ngIf="!f.password?.value?.match('^(?=.*[A-Z])')"
+          >
+            At least oneuppercase letter.
+          </li>
+          <li
+            class="block text-red-500 font-medium rounded-lg mt-2"
+            *ngIf="!f.password?.value?.match('(?=.*[a-z])')"
+          >
+            At least one lowercase letter.
+          </li>
+          <li
+            class="block text-red-500 font-medium rounded-lg mt-2"
+            *ngIf="!f.password?.value?.match('(.*[0-9].*)')"
+          >
+            At least one digit.
+          </li>
+          <li
+            class="block text-red-500 font-medium rounded-lg mt-2"
+            *ngIf="!f.password?.value?.match('(?=.*[^A-Za-z0-9])')"
+          >
+            At least one special character.
+          </li>
+          <li
+            class="block text-red-500 font-medium rounded-lg mt-2"
+            *ngIf="!f.password?.value?.match('.{8,}')"
+          >
+            At least 8 characters long.
+          </li>
+        </ul>
 
         <div class="mt-4 flex items-center justify-center">
           <button
@@ -187,11 +204,26 @@ <h2 class="my-3 text-center text-3xl font-extrabold text-gray-900">
       class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow"
       *ngIf="showRegistrationData"
     >
-      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white text-center">Registration Successful!</h5>
-      <p class="mb-3 font-normal text-gray-700">Name: <span class="font-medium">{{ registrationData.name || '-' }}</span></p>
-      <p class="mb-3 font-normal text-gray-700">Email:<span class="font-medium"> {{ registrationData.email }}</span></p>
-      <p class="mb-3 font-normal text-gray-700">Account Number: :<span class="font-medium">{{ registrationData.accountNumber }}</span></p>
-      <p class="mb-3 font-normal text-gray-700">Branch: <span class="font-medium">{{ registrationData.branch }}</span></p>
+      <h5
+        class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white text-center"
+      >
+        Registration Successful!
+      </h5>
+      <p class="mb-3 font-normal text-gray-700">
+        Name:
+        <span class="font-medium">{{ registrationData.name || "-" }}</span>
+      </p>
+      <p class="mb-3 font-normal text-gray-700">
+        Email:<span class="font-medium"> {{ registrationData.email }}</span>
+      </p>
+      <p class="mb-3 font-normal text-gray-700">
+        Account Number: :<span class="font-medium">{{
+          registrationData.accountNumber
+        }}</span>
+      </p>
+      <p class="mb-3 font-normal text-gray-700">
+        Branch: <span class="font-medium">{{ registrationData.branch }}</span>
+      </p>
       <div class="mt-4 flex items-center justify-center">
         <a
           routerLink="/login"
diff --git a/src/app/util/formutil.ts b/src/app/util/formutil.ts
index 2112277..77281b3 100644
--- a/src/app/util/formutil.ts
+++ b/src/app/util/formutil.ts
@@ -8,12 +8,12 @@ export function passwordMismatch(
         const control = formGroup.controls[controlName];
         const matchingControl = formGroup.controls[matchingControlName];
 
-        if (matchingControl.errors && !matchingControl.errors.passwordMismatch) {
+        if (matchingControl.errors && !matchingControl.errors.mismatch) {
             return;
         }
 
         if (control.value !== matchingControl.value) {
-            matchingControl.setErrors({ passwordMismatch: true });
+            matchingControl.setErrors({ mismatch: true });
         } else {
             matchingControl.setErrors(null);
         }