Merge remote-tracking branch 'origin/Fyle-fix-UI-issues' into new-pas…

…sword-hack-branch

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

@@ -95,7 +95,9 @@
     </div>
   </div>
   <div *ngIf="fg">
-    <ion-button (click)="changePassword()" class="btn-primary" fill="clear"> Reset password </ion-button>
+    <ion-button (click)="changePassword()" class="btn-primary" fill="clear" [disabled]="!fg.valid">
+      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>

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

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   padding: 24px 20px;
+  margin-top: 18px;
   height: 100%;
   justify-content: space-between;
 
@@ -96,16 +97,15 @@
 
   &__arrow-icon {
     fill: $pure-white;
-    margin-right: 8px;
+    margin-right: 6px;
   }
 
   &__cta-secondary {
     display: flex;
-    padding-top: 12px;
+    padding-top: 18px;
     align-items: center;
-    align-self: stretch;
+    justify-content: center;
     color: $blue-black;
     flex-direction: row;
-    gap: 6px;
   }
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
 import { finalize, switchMap, tap } from 'rxjs/operators';
 import { from, Observable } from 'rxjs';
@@ -18,7 +18,7 @@ import { ToastMessageComponent } from 'src/app/shared/components/toast-message/t
   templateUrl: './new-password.page.html',
   styleUrls: ['./new-password.page.scss'],
 })
-export class NewPasswordPage implements OnInit {
+export class NewPasswordPage {
   fg: FormGroup;
 
   lengthValidationDisplay$: Observable<boolean>;
@@ -53,7 +53,7 @@ export class NewPasswordPage implements OnInit {
     private snackbarPropertiesService: SnackbarPropertiesService
   ) {}
 
-  ngOnInit(): void {
+  ionViewWillEnter(): void {
     this.fg = this.fb.group({
       password: ['', [Validators.required, this.checkPasswordValidity]],
       confirmPassword: ['', [Validators.required, this.validatePasswordEquality]],

src/app/auth/pending-verification/pending-verification.page.html

@@ -1,4 +1,4 @@
-<ion-content class="pending-verification">
+<div class="pending-verification" *ngIf="fg">
   <div class="pending-verification__send-invite" *ngIf="!isInvitationLinkSent">
     <div class="pending-verification__form-container" *ngIf="!isInvitationLinkSent">
       <div class="pending-verification__error-icon-container">
@@ -80,4 +80,4 @@ <h1 class="pending-verification__header">Invitation link sent</h1>
       </ion-button>
     </div>
   </div>
-</ion-content>
+</div>

src/app/auth/pending-verification/pending-verification.page.scss

@@ -2,6 +2,8 @@
 
 .pending-verification {
   height: 100%;
+  margin-top: 18px;
+  padding-top: 28px;
 
   &__send-invite {
     display: flex;
@@ -95,7 +97,7 @@
 
   &__arrow-icon {
     fill: $pure-white;
-    margin-right: 8px;
+    margin-right: 6px;
   }
 
   &__cta-text {
@@ -184,15 +186,12 @@
   }
   &__cta-secondary {
     display: flex;
-    padding-top: 12px;
+    padding-top: 18px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 24px;
-    align-self: stretch;
     color: $blue-black;
     display: flex;
     flex-direction: row;
-    gap: 6px;
   }
 }

src/app/auth/pending-verification/pending-verification.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { tap } from 'rxjs/operators';
 import { RouterAuthService } from 'src/app/core/services/router-auth.service';
@@ -13,7 +13,7 @@ import { HttpErrorResponse } from '@angular/common/http';
   templateUrl: './pending-verification.page.html',
   styleUrls: ['./pending-verification.page.scss'],
 })
-export class PendingVerificationPage implements OnInit {
+export class PendingVerificationPage {
   isLoading = false;
 
   isInvitationLinkSent = false;
@@ -29,7 +29,7 @@ export class PendingVerificationPage implements OnInit {
     private snackbarProperties: SnackbarPropertiesService
   ) {}
 
-  ngOnInit(): void {
+  ionViewWillEnter(): void {
     this.fg = this.formBuilder.group({
       email: ['', Validators.compose([Validators.required, Validators.pattern('\\S+@\\S+\\.\\S{2,}')])],
     });

src/app/auth/reset-password/reset-password.page.scss

@@ -2,6 +2,7 @@
 
 .forgot-password {
   height: 100%;
+  margin-top: 18px;
 
   &__form-container {
     display: flex;

src/app/post-verification/invited-user/invited-user.page.scss

@@ -6,6 +6,7 @@
   padding: 24px 20px;
   height: 100%;
   justify-content: space-between;
+  margin-top: 18px;
 
   &__password-container {
     display: flex;

src/app/post-verification/invited-user/invited-user.page.spec.ts

@@ -95,13 +95,13 @@ describe('InvitedUserPage', () => {
     expect(component).toBeTruthy();
   });
 
-  it('ngOnInit(): should set the fullname value from eou$ and setup network watcher', fakeAsync(() => {
+  it('ionViewWillEnter(): should set the fullname value from eou$ and setup network watcher', fakeAsync(() => {
     networkService.isOnline.and.returnValue(of(true));
     const eventEmitterMock = new EventEmitter<boolean>();
     networkService.connectivityWatcher.and.returnValue(eventEmitterMock);
     component.eou$ = of(currentEouRes);
     component.fg.controls.fullName.setValue('Abhishek Jain');
-    component.ngOnInit();
+    component.ionViewWillEnter();
     tick(500);
     component.isConnected$.pipe(take(1)).subscribe((connectionStatus) => {
       expect(connectionStatus).toBeTrue();

src/app/post-verification/invited-user/invited-user.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, EventEmitter } from '@angular/core';
+import { Component, EventEmitter } from '@angular/core';
 import { Observable, noop, concat, from } from 'rxjs';
 import { NetworkService } from 'src/app/core/services/network.service';
 import { FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
@@ -18,7 +18,7 @@ import { SnackbarPropertiesService } from 'src/app/core/services/snackbar-proper
   templateUrl: './invited-user.page.html',
   styleUrls: ['./invited-user.page.scss'],
 })
-export class InvitedUserPage implements OnInit {
+export class InvitedUserPage {
   isConnected$: Observable<boolean>;
 
   fg: FormGroup;
@@ -47,6 +47,8 @@ export class InvitedUserPage implements OnInit {
 
   arePasswordsEqual = false;
 
+  isLoading = false;
+
   constructor(
     private networkService: NetworkService,
     private fb: FormBuilder,
@@ -59,7 +61,7 @@ export class InvitedUserPage implements OnInit {
     private snackbarProperties: SnackbarPropertiesService
   ) {}
 
-  ngOnInit(): void {
+  ionViewWillEnter(): void {
     const networkWatcherEmitter = this.networkService.connectivityWatcher(new EventEmitter<boolean>());
     this.isConnected$ = concat(this.networkService.isOnline(), networkWatcherEmitter.asObservable());
     this.isConnected$.subscribe(noop);
@@ -80,13 +82,15 @@ export class InvitedUserPage implements OnInit {
 
   onPasswordValid(isValid: boolean): void {
     this.isPasswordValid = isValid;
+    this.fg.updateValueAndValidity();
   }
 
   setPasswordTooltip(value: boolean): void {
     this.showPasswordTooltip = value;
   }
 
   async saveData(): Promise<void> {
+    this.isLoading = true;
     this.fg.markAllAsTouched();
     if (this.fg.valid) {
       from(this.loaderService.showLoader())
@@ -102,7 +106,10 @@ export class InvitedUserPage implements OnInit {
           switchMap(() => this.authService.refreshEou()),
           switchMap(() => this.orgUserService.markActive()),
           tap(() => this.trackingService.activated()),
-          finalize(async () => await this.loaderService.hideLoader())
+          finalize(async () => {
+            this.isLoading = false;
+            return await this.loaderService.hideLoader();
+          })
         )
         .subscribe(() => {
           this.router.navigate(['/', 'enterprise', 'my_dashboard']);

src/global.scss

@@ -825,7 +825,7 @@ ref - https://stackoverflow.com/a/31162426
   font-size: 14px !important;
   line-height: 18px;
   color: $pure-white;
-  font-weight: 400 !important;
+  font-weight: 500 !important;
   height: 52px !important;
   text-transform: inherit;
   width: 100%;