fix: Fixes a bug and contains minor css changes (#3358)

fylein · Dec 19, 2024 · 5dcc9f9 · 5dcc9f9
1 parent 1fbec62
commit 5dcc9f9
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 69 deletions.
diff --git a/src/app/auth/new-password/new-password.page.html b/src/app/auth/new-password/new-password.page.html
@@ -62,7 +62,7 @@
                   <input
                     placeholder="Re-enter password"
                     [required]="true"
-                    [type]="hideConfirmPassword ? 'text': 'password'"
+                    [type]="hideConfirmPassword ? 'password' : 'text'"
                     class="new-password__text-input smartlook-show"
                     formControlName="confirmPassword"
                   />
@@ -96,7 +96,15 @@
       </div>
     </div>
     <div *ngIf="fg">
-      <ion-button (click)="changePassword()" class="btn-primary" fill="clear" [disabled]="!fg.valid">
+      <ion-button
+        (click)="changePassword()"
+        class="btn-primary"
+        fill="clear"
+        [disabled]="!fg.valid"
+        appFormButtonValidation
+        [loading]="isLoading"
+        [loadingText]="'Resetting'"
+      >
         Reset password
       </ion-button>
       <div class="new-password__cta-secondary" (click)="redirectToSignIn()">

diff --git a/src/app/auth/new-password/new-password.page.scss b/src/app/auth/new-password/new-password.page.scss
@@ -88,7 +88,7 @@
   }
 
   &__back-icon {
-    margin-bottom: 20px;
+    margin-bottom: 16px;
     width: 28px;
     height: 28px;
   }

diff --git a/src/app/auth/new-password/new-password.page.ts b/src/app/auth/new-password/new-password.page.ts
@@ -39,6 +39,8 @@ export class NewPasswordPage implements OnInit {
 
   showPasswordTooltip = false;
 
+  isLoading = false;
+
   constructor(
     private fb: FormBuilder,
     private activatedRoute: ActivatedRoute,
@@ -62,7 +64,7 @@ export class NewPasswordPage implements OnInit {
 
   changePassword(): void {
     const refreshToken = this.activatedRoute.snapshot.params.refreshToken as string;
-
+    this.isLoading = true;
     from(this.loaderService.showLoader())
       .pipe(
         switchMap(() => this.routerAuthService.resetPassword(refreshToken, this.fg.controls.password.value as string)),
@@ -73,7 +75,10 @@ export class NewPasswordPage implements OnInit {
           this.trackingService.resetPassword();
           await this.trackLoginInfo();
         }),
-        finalize(() => from(this.loaderService.hideLoader()))
+        finalize(() => {
+          this.isLoading = false;
+          return from(this.loaderService.hideLoader());
+        })
       )
       .subscribe(
         () => {

diff --git a/src/app/auth/reset-password/reset-password.page.html b/src/app/auth/reset-password/reset-password.page.html
@@ -14,7 +14,7 @@
           </div>
         </div>
         <form [formGroup]="fg" class="forgot-password__input-container">
-          <div class="forgot-password__input-container__label">Registered Email</div>
+          <div class="forgot-password__input-container__label">Registered email</div>
           <input
             #simpleEmailInput
             matInput

diff --git a/src/app/auth/reset-password/reset-password.page.spec.ts b/src/app/auth/reset-password/reset-password.page.spec.ts
@@ -203,6 +203,11 @@ describe('ResetPasswordPage', () => {
 
   it('onGotoSignInClick(): should navigate to sign-in page', () => {
     component.onGotoSignInClick();
-    expect(router.navigate).toHaveBeenCalledWith(['/', 'auth', 'sign_in']);
+    expect(router.navigate).toHaveBeenCalledWith([
+      '/',
+      'auth',
+      'sign_in',
+      { email: component.fg.controls.email.value },
+    ]);
   });
 });
diff --git a/src/app/auth/reset-password/reset-password.page.ts b/src/app/auth/reset-password/reset-password.page.ts
@@ -91,6 +91,6 @@ export class ResetPasswordPage {
   }
 
   onGotoSignInClick(): void {
-    this.router.navigate(['/', 'auth', 'sign_in']);
+    this.router.navigate(['/', 'auth', 'sign_in', { email: this.fg.controls.email.value as string }]);
   }
 }
diff --git a/src/app/auth/sign-in/error/error.component.scss b/src/app/auth/sign-in/error/error.component.scss
@@ -28,7 +28,7 @@
   }
 
   &__details {
-    font-size: 16px;
+    font-size: 14px;
     padding: 20px 16px;
     color: $black;
   }

diff --git a/src/app/auth/sign-in/sign-in.page.html b/src/app/auth/sign-in/sign-in.page.html
@@ -38,14 +38,14 @@
   <div class="sign-in__enter-email" *ngIf="currentStep === signInPageState.ENTER_EMAIL">
     <div>
       <ion-icon
-        class="fy-icon sign-in__enter-email__back-icon"
+        class="fy-icon sign-in__back-icon"
         src="/assets/svg/arrow-tail-left.svg"
         (click)="changeState(signInPageState.SELECT_SIGN_IN_METHOD)"
       ></ion-icon>
       <div class="sign-in__enter-email__form-container">
         <div>
-          <div class="sign-in__enter-email__page-header">Sign in</div>
-          <div class="sign-in__enter-email__sub-header">Enter the credentials to access your account</div>
+          <div class="sign-in__page-header">Sign in</div>
+          <div class="sign-in__sub-header">Enter the credentials to access your account</div>
         </div>
         <form [formGroup]="fg" class="sign-in__enter-email__input-container">
           <div class="sign-in__enter-email__input-container__label">Registered email</div>
@@ -85,14 +85,14 @@
   <div class="sign-in__enter-password" *ngIf="currentStep === signInPageState.ENTER_PASSWORD">
     <div>
       <ion-icon
-        class="fy-icon sign-in__enter-email__back-icon"
+        class="fy-icon sign-in__back-icon"
         src="/assets/svg/arrow-tail-left.svg"
         (click)="changeState(signInPageState.ENTER_EMAIL)"
       ></ion-icon>
       <div class="sign-in__enter-password__form-container">
         <div>
-          <div class="sign-in__enter-password__page-header">Sign in</div>
-          <div class="sign-in__enter-password__sub-header">Enter the credentials to access your account</div>
+          <div class="sign-in__page-header">Sign in</div>
+          <div class="sign-in__sub-header">Enter the credentials to access your account</div>
         </div>
         <form [formGroup]="fg" class="sign-in__enter-password__input-container">
           <div class="sign-in__enter-password__input-container__label">Registered email</div>
@@ -111,7 +111,7 @@
             <div class="sign-in__enter-password__input-container__label">Password</div>
             <div class="sign-in__enter-password__password-container">
               <input
-                placeholder="Re-enter password"
+                placeholder="Enter password"
                 [required]="true"
                 [type]="hidePassword ? 'password': 'text'"
                 class="sign-in__enter-password__text-input smartlook-show"
@@ -151,7 +151,7 @@
         (click)="signInUser()"
         appFormButtonValidation
         [loading]="passwordLoading"
-        [loadingText]="'Signing In'"
+        [loadingText]="'Signing in'"
       >
         Sign in
       </ion-button>

diff --git a/src/app/auth/sign-in/sign-in.page.scss b/src/app/auth/sign-in/sign-in.page.scss
@@ -15,6 +15,29 @@
     }
   }
 
+  &__page-header {
+    font-size: 20px;
+    margin: 0 0 10px;
+    position: relative;
+    margin-bottom: 6px;
+    font-weight: 500;
+  }
+
+  &__back-icon {
+    margin-bottom: 16px;
+    width: 28px;
+    height: 28px;
+  }
+
+  &__sub-header {
+    font-size: 14px;
+    margin: 0 0 10px;
+    position: relative;
+    margin-bottom: 32px;
+    color: $black-light;
+    line-height: 1.28;
+  }
+
   &__select-sign-in {
     display: flex;
     flex-direction: column;
@@ -44,7 +67,7 @@
   }
 
   &__enter-email {
-    height: 100%;
+    height: 96vh;
     margin-top: 18px;
     padding: 20px;
     padding: 28px 20px 44px 20px;
@@ -84,30 +107,10 @@
     &__disabled {
       opacity: 0.2;
     }
-
-    &__sub-header {
-      font-size: 14px;
-      margin: 0 0 10px;
-      position: relative;
-      margin-bottom: 32px;
-      color: $black-light;
-      line-height: 1.28;
-    }
-    &__page-header {
-      font-size: 20px;
-      margin: 0 0 10px;
-      position: relative;
-      margin-bottom: 8px;
-    }
-    &__back-icon {
-      margin-bottom: 20px;
-      width: 28px;
-      height: 28px;
-    }
   }
 
   &__enter-password {
-    height: 100%;
+    height: 96vh;
     margin-top: 18px;
     padding: 20px;
     padding: 28px 20px 44px 20px;
@@ -116,9 +119,6 @@
     justify-content: space-between;
 
     &__forgot-password {
-      color: $black-light;
-      font-size: 12px;
-      font-style: normal;
       line-height: 1.5;
       float: right;
       margin-top: 1px;
@@ -127,6 +127,8 @@
     &__forgot-password_button {
       font-weight: 500;
       background: $pure-white;
+      color: $black-light;
+      font-size: 12px;
     }
 
     &__disabled-email {
@@ -233,17 +235,6 @@
       color: $black-light;
       line-height: 1.28;
     }
-    &__page-header {
-      font-size: 20px;
-      margin: 0 0 10px;
-      position: relative;
-      margin-bottom: 8px;
-    }
-    &__back-icon {
-      margin-bottom: 20px;
-      width: 28px;
-      height: 28px;
-    }
   }
 
   &__secondary-cta {

diff --git a/src/app/auth/sign-in/sign-in.page.spec.ts b/src/app/auth/sign-in/sign-in.page.spec.ts
@@ -221,7 +221,6 @@ describe('SignInPage', () => {
       component.checkIfEmailExists();
       expect(component.handleSamlSignIn).toHaveBeenCalledOnceWith({ saml: true });
       expect(routerAuthService.checkEmailExists).toHaveBeenCalledOnceWith(component.fg.controls.email.value);
-      expect(component.emailSet).toBeFalse();
       expect(component.emailLoading).toBeFalse();
       done();
     });
@@ -443,15 +442,6 @@ describe('SignInPage', () => {
     });
   });
 
-  it('ionViewWillEnter(): should set email', () => {
-    expect(component.emailSet).toBeFalse();
-
-    component.fg.controls.email.setValue('email');
-
-    component.ionViewWillEnter();
-    expect(component.emailSet).toBeTrue();
-  });
-
   describe('ngOnInit(): ', () => {
     it('should navigate to switch org page if logged in ', fakeAsync(() => {
       loaderService.showLoader.and.resolveTo();
@@ -495,9 +485,11 @@ describe('SignInPage', () => {
   });
 
   it('should sign in with google when clicking on the SIGN IN WITH GOOGLE button', () => {
+    component.currentStep = SignInPageState.SELECT_SIGN_IN_METHOD;
     spyOn(component, 'googleSignIn');
-    const googleButton = getElementBySelector(fixture, '.sign-in__secondary-cta__btn') as HTMLElement;
+    fixture.detectChanges();
 
+    const googleButton = getElementBySelector(fixture, '.sign-in__secondary-cta__btn') as HTMLElement;
     click(googleButton);
     expect(component.googleSignIn).toHaveBeenCalledTimes(1);
   });

diff --git a/src/app/auth/sign-in/sign-in.page.ts b/src/app/auth/sign-in/sign-in.page.ts
@@ -26,8 +26,6 @@ import { SignInPageState } from './sign-in-page-state.enum';
 export class SignInPage implements OnInit {
   fg: FormGroup;
 
-  emailSet = false;
-
   emailLoading = false;
 
   passwordLoading = false;
@@ -38,7 +36,7 @@ export class SignInPage implements OnInit {
 
   checkEmailExists$: Observable<EmailExistsResponse>;
 
-  currentStep: SignInPageState = SignInPageState.SELECT_SIGN_IN_METHOD;
+  currentStep: SignInPageState;
 
   signInPageState: typeof SignInPageState = SignInPageState;
 
@@ -263,7 +261,11 @@ export class SignInPage implements OnInit {
   }
 
   ionViewWillEnter(): void {
-    this.emailSet = !!this.fg.controls.email.value;
+    if (this.activatedRoute.snapshot.params.email) {
+      this.currentStep = SignInPageState.ENTER_PASSWORD;
+    } else {
+      this.currentStep = SignInPageState.SELECT_SIGN_IN_METHOD;
+    }
   }
 
   changeState(state: SignInPageState): void {

diff --git a/src/app/post-verification/invited-user/invited-user.page.scss b/src/app/post-verification/invited-user/invited-user.page.scss
@@ -89,7 +89,7 @@
   }
 
   &__back-icon {
-    margin-bottom: 20px;
+    margin-bottom: 16px;
     width: 28px;
     height: 28px;
   }

diff --git a/src/global.scss b/src/global.scss
@@ -187,6 +187,10 @@ ion-popover.error-popover {
   stroke: $black-light;
 }
 
+.intermediate-loader .loading-wrapper .loading-spinner ion-spinner {
+  color: $brand-primary;
+}
+
 ion-popover.dialog-popover {
   &::part(content) {
     bottom: 0 !important;