fix: QA fixes for verify screens (#3337)

fylein · Dec 12, 2024 · a1c3e8e · a1c3e8e
1 parent aa39031
commit a1c3e8e
Show file tree

Hide file tree

Showing 15 changed files with 50 additions and 20 deletions.
diff --git a/src/app/auth/disabled/disabled.page.html b/src/app/auth/disabled/disabled.page.html
@@ -25,7 +25,7 @@ <h1 class="disabled-user__header">Account disabled</h1>
       >
         <div class="disabled-user__cta-content">
           <ion-icon class="disabled-user__arrow-icon" [src]="'/assets/svg/arrow-left.svg'" slot="icon-only"></ion-icon>
-          <span class="disabled-user__cta-text">Back to Sign In</span>
+          <span class="disabled-user__cta-text">Back to sign in</span>
         </div>
       </ion-button>
     </div>

diff --git a/src/app/auth/new-password/new-password.page.html b/src/app/auth/new-password/new-password.page.html
@@ -7,7 +7,7 @@
         (click)="redirectToSignIn()"
       ></ion-icon>
       <div>
-        <div class="new-password__form-header">Reset Password</div>
+        <div class="new-password__form-header">Reset password</div>
         <div>
           <form *ngIf="fg" [formGroup]="fg">
             <div class="new-password__input-container">
@@ -101,7 +101,7 @@
       </ion-button>
       <div class="new-password__cta-secondary" (click)="redirectToSignIn()">
         <ion-icon class="new-password__arrow-icon" [src]="'/assets/svg/arrow-left.svg'" slot="icon-only"></ion-icon>
-        <span class="new-password__cta-text">Back to Sign In</span>
+        <span class="new-password__cta-text">Back to sign in</span>
       </div>
     </div>
   </div>

diff --git a/src/app/auth/new-password/new-password.page.scss b/src/app/auth/new-password/new-password.page.scss
@@ -19,6 +19,8 @@
   &__error {
     color: $red;
     font-size: 12px;
+    display: flex;
+    align-items: center;
   }
 
   &__text {
@@ -75,6 +77,7 @@
     position: relative;
     margin-bottom: 24px;
     color: $black;
+    font-weight: 500;
   }
 
   &__save {

diff --git a/src/app/auth/pending-verification/pending-verification.page.html b/src/app/auth/pending-verification/pending-verification.page.html
@@ -16,7 +16,7 @@
           </div>
         </div>
         <form [formGroup]="fg" class="pending-verification__input-container">
-          <div class="pending-verification__input-container__label">Registered Email</div>
+          <div class="pending-verification__input-container__label">Registered email</div>
           <input
             #simpleEmailInput
             matInput
@@ -40,6 +40,9 @@
           class="btn-primary"
           fill="clear"
           [disabled]="!fg.valid"
+          appFormButtonValidation
+          [loading]="isLoading"
+          [loadingText]="'Sending invite'"
         >
           Send invite
         </ion-button>
@@ -84,7 +87,7 @@ <h1 class="pending-verification__header">Invitation link sent</h1>
               [src]="'/assets/svg/arrow-left.svg'"
               slot="icon-only"
             ></ion-icon>
-            <span class="pending-verification__cta-text">Back to Sign In</span>
+            <span class="pending-verification__cta-text">Back to sign in</span>
           </div>
         </ion-button>
       </div>

diff --git a/src/app/auth/pending-verification/pending-verification.page.scss b/src/app/auth/pending-verification/pending-verification.page.scss
@@ -45,6 +45,7 @@
     margin: 0 0 10px;
     position: relative;
     margin-bottom: 8px;
+    font-weight: 500;
   }
 
   &__disabled {
@@ -62,6 +63,9 @@
 
   &__error-message {
     color: $red;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
   }
 
   &__input-container {

diff --git a/src/app/auth/reset-password/reset-password.page.html b/src/app/auth/reset-password/reset-password.page.html
@@ -8,7 +8,7 @@
           (click)="onGotoSignInClick()"
         ></ion-icon>
         <div>
-          <div class="forgot-password__page-header">Forgot Password</div>
+          <div class="forgot-password__page-header">Forgot password</div>
           <div class="forgot-password__sub-header">
             Please enter your registered email address to receive instructions for resetting your password
           </div>
@@ -25,7 +25,7 @@
             class="forgot-password__input-container__input"
           />
           <div class="forgot-password__error-message" *ngIf="fg.controls.email.touched && !fg.controls.email.valid">
-            Please enter a valid email.
+            Enter an email address.
           </div>
         </form>
       </div>
@@ -85,7 +85,7 @@ <h1 class="forgot-password__header">Check your email</h1>
               [src]="'/assets/svg/arrow-left.svg'"
               slot="icon-only"
             ></ion-icon>
-            <span class="forgot-password__cta-text">Back to Sign In</span>
+            <span class="forgot-password__cta-text">Back to sign in</span>
           </div>
         </ion-button>
       </div>

diff --git a/src/app/auth/reset-password/reset-password.page.scss b/src/app/auth/reset-password/reset-password.page.scss
@@ -17,7 +17,8 @@
     font-size: 20px;
     margin: 0 0 10px;
     position: relative;
-    margin-bottom: 24px;
+    margin-bottom: 6px;
+    font-weight: 500;
   }
 
   &__disabled {
@@ -34,6 +35,8 @@
 
   &__error-message {
     color: $red;
+    display: flex;
+    align-items: center;
   }
 
   &__input-container {

diff --git a/src/app/auth/reset-password/reset-password.page.spec.ts b/src/app/auth/reset-password/reset-password.page.spec.ts
@@ -110,7 +110,7 @@ describe('ResetPasswordPage', () => {
       fixture.detectChanges();
 
       const errorElement = getElementRef(fixture, '.forgot-password__error-message');
-      expect(errorElement.nativeElement.textContent).toContain('Please enter a valid email.');
+      expect(errorElement.nativeElement.textContent).toContain(' Enter an email address. ');
     });
 
     it('should call sendResetLink with correct email when button is clicked', () => {

diff --git a/src/app/auth/reset-password/reset-password.page.ts b/src/app/auth/reset-password/reset-password.page.ts
@@ -59,7 +59,18 @@ export class ResetPasswordPage {
         })
       )
       .subscribe({
-        next: () => (this.currentPageState = PageState.success),
+        next: () => {
+          this.currentPageState = PageState.success;
+          if (this.isEmailSentOnce) {
+            const toastMessageData = {
+              message: ' Password recovery email sent successfully.',
+            };
+            this.matSnackBar.openFromComponent(ToastMessageComponent, {
+              ...this.snackbarProperties.setSnackbarProperties('success', toastMessageData),
+              panelClass: ['msb-success'],
+            });
+          }
+        },
         error: (err: { status: number }) => this.handleError(err),
       });
   }

diff --git a/src/app/auth/verify/verify.page.scss b/src/app/auth/verify/verify.page.scss
@@ -25,10 +25,13 @@
   justify-content: center;
 
   &__verifying-loader {
-    @include loader;
     &__icon {
+      @include loader;
       fill: $brand-primary;
+      height: 40px;
+      width: 40px;
     }
+
     &__text {
       margin-top: 8px;
       color: $black;

diff --git a/src/app/core/services/loader.service.spec.ts b/src/app/core/services/loader.service.spec.ts
@@ -37,7 +37,7 @@ describe('LoaderService', () => {
         message,
         duration,
         spinner: 'crescent',
-        cssClass: '',
+        cssClass: 'intermediate-loader',
       });
       expect(loadingElementSpy.present).toHaveBeenCalledTimes(1);
     }));

diff --git a/src/app/core/services/loader.service.ts b/src/app/core/services/loader.service.ts
@@ -13,7 +13,7 @@ export class LoaderService {
       message,
       duration,
       spinner: customLoaderUrl ? null : 'crescent',
-      cssClass: customLoaderUrl ? 'custom-loading' : '',
+      cssClass: customLoaderUrl ? 'custom-loading' : 'intermediate-loader',
     });
 
     if (customLoaderUrl) {

diff --git a/src/app/post-verification/invited-user/invited-user.page.html b/src/app/post-verification/invited-user/invited-user.page.html
@@ -15,7 +15,7 @@
                 class="invited-user__text invited-user__text-block"
                 [ngClass]="{'invited-user__text__invalid': fg.controls.fullName.touched && !fg.controls.fullName.valid}"
               >
-                <div class="invited-user__text-label">Full Name</div>
+                <div class="invited-user__text-label">Full name</div>
                 <input [required]="true" class="invited-user__text-input smartlook-show" formControlName="fullName" />
               </div>
               <div
@@ -44,7 +44,7 @@
                   <div class="invited-user__password-icon-container" matSuffix (click)="hide = !hide">
                     <ion-icon
                       class="fy-icon invited-user__password-icon"
-                      src="{{hide ? '/assets/svg/eye.svg' : '/assets/svg/eye-slash.svg'}}"
+                      src="{{hide ? '/assets/svg/eye-slash.svg' : '/assets/svg/eye.svg'}}"
                     ></ion-icon>
                   </div>
                 </div>
@@ -72,7 +72,7 @@
                 class="invited-user__text invited-user__text-block"
                 [ngClass]="{'invited-user__text__invalid': fg.controls.confirmPassword.touched && !fg.controls.confirmPassword.valid}"
               >
-                <div class="invited-user__text-label">Confirm Password</div>
+                <div class="invited-user__text-label">Confirm password</div>
                 <div class="invited-user__password-container">
                   <input
                     placeholder="Re-enter password"
@@ -88,7 +88,7 @@
                   >
                     <ion-icon
                       class="fy-icon invited-user__password-icon"
-                      src="{{hideConfirmPassword ? '/assets/svg/eye.svg' : '/assets/svg/eye-slash.svg'}}"
+                      src="{{hideConfirmPassword ? '/assets/svg/eye-slash.svg' : '/assets/svg/eye.svg'}}"
                     ></ion-icon>
                   </div>
                 </div>
@@ -100,7 +100,7 @@
                 Password cannot be empty
               </div>
               <div
-                *ngIf="fg.controls.confirmPassword.touched && fg.controls.confirmPassword.invalid && fg.controls.confirmPassword.errors.passwordMismatch"
+                *ngIf="fg.controls.confirmPassword.touched && fg.controls.confirmPassword.invalid && fg.controls.confirmPassword.errors.passwordMismatch && !fg.controls.confirmPassword.errors.required"
                 class="invited-user__error"
               >
                 Passwords do not match

diff --git a/src/app/post-verification/invited-user/invited-user.page.scss b/src/app/post-verification/invited-user/invited-user.page.scss
@@ -19,6 +19,8 @@
   &__error {
     color: $red;
     font-size: 12px;
+    display: flex;
+    align-items: center;
   }
 
   &__text {
@@ -76,6 +78,7 @@
     position: relative;
     margin-bottom: 24px;
     color: $black;
+    font-weight: 500;
   }
 
   &__save {

diff --git a/src/app/post-verification/invited-user/invited-user.page.ts b/src/app/post-verification/invited-user/invited-user.page.ts
@@ -94,7 +94,7 @@ export class InvitedUserPage implements OnInit {
     this.isLoading = true;
     this.fg.markAllAsTouched();
     if (this.fg.valid) {
-      from(this.loaderService.showLoader())
+      from(this.loaderService.showLoader('Signing in...'))
         .pipe(
           switchMap(() => this.eou$),
           switchMap((eou) => {