Merge remote-tracking branch 'origin/fyle-86cx2t8af' into Fyle-qa-branch

src/app/auth/new-password/new-password.module.ts

@@ -17,6 +17,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 
 import { PopupComponent } from './popup/popup.component';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 @NgModule({
   imports: [
@@ -30,6 +31,7 @@ import { PopupComponent } from './popup/popup.component';
     ReactiveFormsModule,
     MatIconModule,
     MatButtonModule,
+    SharedModule,
   ],
   declarations: [NewPasswordPage, PopupComponent],
 })

src/app/auth/new-password/new-password.page.html

@@ -1,133 +1,104 @@
-<ion-content>
-  <ion-grid class="new-password--header-container">
-    <ion-row class="new-password--header ion-align-items-center">
-      <ion-col class="new-password--header-logo-container">
-        <img class="new-password--header-logo" src="../../../assets/svg/fyle-logo-light.svg" alt="fyle-logo-light" />
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-  <div class="new-password--form">
-    <div class="new-password--form-header">Reset password</div>
-    <div class="new-password--password-rules">
+<div class="new-password">
+  <div>
+    <ion-icon
+      class="fy-icon new-password__back-icon"
+      src="../../../assets/svg/arrow-tail-left.svg"
+      (click)="redirectToSignIn()"
+    ></ion-icon>
+    <div>
+      <div class="new-password__form-header">Reset Password</div>
       <div>
-        <span>
-          <ion-icon
-            *ngIf="lengthValidationDisplay$|async"
-            class="new-password--validation new-password--validation__correct"
-            data-testid="lengthValidation_correct"
-            name="checkmark-outline"
-          ></ion-icon>
-          <ion-icon
-            *ngIf="!(lengthValidationDisplay$|async)"
-            class="new-password--validation new-password--validation__incorrect"
-            data-testid="lengthValidation_incorrect"
-            name="close-outline"
-          ></ion-icon>
-        </span>
-        <span> Is between 12 to 32 characters </span>
-      </div>
-      <div>
-        <span>
-          <ion-icon
-            *ngIf="uppercaseValidationDisplay$|async"
-            class="new-password--validation new-password--validation__correct"
-            data-testid="uppercaseValidation_correct"
-            name="checkmark-outline"
-          ></ion-icon>
-          <ion-icon
-            *ngIf="!(uppercaseValidationDisplay$|async)"
-            class="new-password--validation new-password--validation__incorrect"
-            data-testid="uppercaseValidation_incorrect"
-            name="close-outline"
-          ></ion-icon>
-        </span>
-        <span> Contains atleast 1 uppercase character </span>
-      </div>
-      <div>
-        <span>
-          <ion-icon
-            *ngIf="lowercaseValidationDisplay$|async"
-            class="new-password--validation new-password--validation__correct"
-            data-testid="lowercaseValidation_correct"
-            name="checkmark-outline"
-          ></ion-icon>
-          <ion-icon
-            *ngIf="!(lowercaseValidationDisplay$|async)"
-            class="new-password--validation new-password--validation__incorrect"
-            data-testid="lowercaseValidation_incorrect"
-            name="close-outline"
-          ></ion-icon>
-        </span>
-        <span> Contains atleast 1 lowercase character </span>
-      </div>
-      <div>
-        <span>
-          <ion-icon
-            *ngIf="numberValidationDisplay$|async"
-            class="new-password--validation new-password--validation__correct"
-            data-testid="numberValidation_correct"
-            name="checkmark-outline"
-          ></ion-icon>
-          <ion-icon
-            *ngIf="!(numberValidationDisplay$|async)"
-            class="new-password--validation new-password--validation__incorrect"
-            data-testid="numberValidation_correct"
-            name="close-outline"
-          ></ion-icon>
-        </span>
-        <span> Contains atleast 1 number </span>
-      </div>
-      <div>
-        <span>
-          <ion-icon
-            *ngIf="specialCharValidationDisplay$|async"
-            class="new-password--validation new-password--validation__correct"
-            data-testid="specialcharValidation_correct"
-            name="checkmark-outline"
-          ></ion-icon>
-          <ion-icon
-            *ngIf="!(specialCharValidationDisplay$|async)"
-            class="new-password--validation new-password--validation__incorrect"
-            data-testid="specialcharValidation_incorrect"
-            name="close-outline"
-          ></ion-icon>
-        </span>
-        <span> Contains atleast 1 special character </span>
+        <form *ngIf="fg" [formGroup]="fg">
+          <div class="new-password__input-container">
+            <div
+              class="new-password__text new-password__text-block"
+              [ngClass]="{'new-password__text__invalid': fg.controls.password.touched && !fg.controls.password.valid}"
+            >
+              <div class="new-password__text-label">New password</div>
+              <div class="new-password__password-container">
+                <input
+                  placeholder="Enter password"
+                  [required]="true"
+                  [type]="hide ? 'text': 'password'"
+                  class="new-password__text-input smartlook-show"
+                  formControlName="password"
+                  (focus)="setPasswordTooltip(true)"
+                  (blur)="setPasswordTooltip(false)"
+                />
+                <div class="new-password__password-icon-container" matSuffix (click)="hide = !hide">
+                  <ion-icon
+                    class="fy-icon new-password__password-icon"
+                    src="{{hide ? '/assets/svg/eye.svg' : '/assets/svg/eye-slash.svg'}}"
+                  ></ion-icon>
+                </div>
+              </div>
+              <app-password-check-tooltip
+                *ngIf="showPasswordTooltip"
+                [password]="fg.controls.password.value"
+                (isPasswordValid)="onPasswordValid($event)"
+              ></app-password-check-tooltip>
+            </div>
+            <div
+              *ngIf="fg.controls.password.touched && fg.controls.password.invalid && fg.controls.password.errors.required"
+              class="new-password__error"
+            >
+              Password cannot be empty
+            </div>
+            <div
+              *ngIf="fg.controls.password.touched && fg.controls.password.invalid && fg.controls.password.errors.invalidPassword && !fg.controls.password.errors.required"
+              class="new-password__error"
+            >
+              Please enter a valid password.
+            </div>
+          </div>
+          <div class="new-password__input-container">
+            <div
+              class="new-password__text new-password__text-block"
+              [ngClass]="{'new-password__text__invalid': fg.controls.confirmPassword.touched && !fg.controls.confirmPassword.valid}"
+            >
+              <div class="new-password__text-label">Confirm new password</div>
+              <div class="new-password__password-container">
+                <input
+                  placeholder="Re-enter password"
+                  [required]="true"
+                  [type]="hideConfirmPassword ? 'text': 'password'"
+                  class="new-password__text-input smartlook-show"
+                  formControlName="confirmPassword"
+                />
+                <div
+                  class="new-password__password-icon-container"
+                  matSuffix
+                  (click)="hideConfirmPassword = !hideConfirmPassword"
+                >
+                  <ion-icon
+                    class="fy-icon new-password__password-icon"
+                    src="{{hideConfirmPassword ? '/assets/svg/eye.svg' : '/assets/svg/eye-slash.svg'}}"
+                  ></ion-icon>
+                </div>
+              </div>
+            </div>
+            <div
+              *ngIf="fg.controls.confirmPassword.touched && fg.controls.confirmPassword.invalid && fg.controls.confirmPassword.errors.required"
+              class="new-password__error"
+            >
+              Password cannot be empty
+            </div>
+            <div
+              *ngIf="fg.controls.confirmPassword.touched && fg.controls.confirmPassword.invalid && fg.controls.confirmPassword.errors.passwordMismatch"
+              class="new-password__error"
+            >
+              Passwords do not match
+            </div>
+          </div>
+        </form>
       </div>
     </div>
-    <div class="new-password--form-subheader">Please enter a new password</div>
-    <form [formGroup]="fg">
-      <mat-form-field class="new-password--form-field mat-form-field-no-padding" appearance="outline">
-        <input
-          formControlName="password"
-          type="password"
-          matInput
-          [type]="hide ? 'text': 'password'"
-          placeholder="minimum 12 chars"
-        />
-        <mat-icon class="new-password--password-visibility-icon" color="accent" matSuffix (click)="hide = !hide">
-          {{hide ? 'visibility_off' : 'visibility'}}
-        </mat-icon>
-      </mat-form-field>
-    </form>
-    <div class="new-password--primary-cta">
-      <button
-        id="new-password--btn-sign-in"
-        [disabled]="!fg.valid"
-        mat-flat-button
-        color="primary"
-        (click)="changePassword()"
-      >
-        CHANGE PASSWORD
-      </button>
+  </div>
+  <div *ngIf="fg">
+    <ion-button (click)="changePassword()" class="btn-primary" fill="clear"> Reset password </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>
     </div>
   </div>
-</ion-content>
-
-<ion-footer>
-  <ion-toolbar mode="md">
-    <ion-button fill="clear" expand="full" [routerLink]="['/','auth','sign_in']" routerLinkActive="router-link-active">
-      Back to Sign in
-    </ion-button>
-  </ion-toolbar>
-</ion-footer>
+</div>