diff --git a/src/app/auth/verify/verify.page.html b/src/app/auth/verify/verify.page.html index 39f8fd5fa6..a1fe1eb9f8 100644 --- a/src/app/auth/verify/verify.page.html +++ b/src/app/auth/verify/verify.page.html @@ -1,21 +1,8 @@ - - - - - - - -
-
- Verifying Identity - Verification Failed -
-
- Checking your credentials.. -
-
- Unable to verify your Fyle account. Please contact support by sending an email to support@fylehq.com +
+
+
+
Accepting the invite...
diff --git a/src/app/auth/verify/verify.page.scss b/src/app/auth/verify/verify.page.scss index 568f784d4e..6a21b379b0 100644 --- a/src/app/auth/verify/verify.page.scss +++ b/src/app/auth/verify/verify.page.scss @@ -1,83 +1,37 @@ -$verify-header: #220033; -$form-header: #000; -$form-subheader: #4a4a4a; -$password-icon: #b9beba; -$secondary-cta-border: #e0e0e0; - -.verify { - &--header { - min-height: 180px; - } - - &--header-container { - min-height: 180px; - background-color: $verify-header; - } - - &--header-logo-container { - text-align: center; - } - - &--header-logo { - max-width: 100px; - } - - &--form { - padding: 24px; - } - - &--form-field { - width: 100%; - } - - &--form-header { - font-size: 24px; - margin-top: 16px; - margin-bottom: 8px; - color: $form-header; - font-weight: 700; - } - - &--form-subheader { - font-size: 16px; - color: $form-subheader; - margin-top: 24px; - margin-bottom: 24px; - } +@import '../../../theme/colors'; + +@mixin loader { + border-radius: 50%; + width: 14px; + height: 14px; + margin: 0 4px; + animation: spin 2s linear infinite; +} - &--primary-cta { - .mat-button-base { - width: 100%; - font-weight: 700; - min-height: 47px; - } +@keyframes spin { + 0% { + transform: rotate(0deg); } - - &--password-visibility-icon { - color: $password-icon; + 100% { + transform: rotate(360deg); } +} - &--secondary-cta { - .mat-button-base { - width: 100%; - font-weight: 700; - min-height: 47px; - letter-spacing: 1.6px; - border: 1px solid $secondary-cta-border; +.verify { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &__verifying-loader { + @include loader; + &__icon { + fill: $brand-primary; } - margin-top: 24px; - } - - &--redirect { - margin: 16px; - text-align: center; - font-size: 16px; - a { - text-decoration: none; + &__text { + margin-top: 8px; + color: $black; } } - - &--edit-email { - text-align: end; - } } diff --git a/src/app/auth/verify/verify.page.spec.ts b/src/app/auth/verify/verify.page.spec.ts index b481a4cac1..eb25951295 100644 --- a/src/app/auth/verify/verify.page.spec.ts +++ b/src/app/auth/verify/verify.page.spec.ts @@ -78,25 +78,6 @@ describe('VerifyPage', () => { expect(trackingService.emailVerified).toHaveBeenCalledTimes(1); expect(trackingService.onSignin).toHaveBeenCalledOnceWith('ajain@fyle.in'); expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'auth', 'switch_org', { invite_link: true }]); - const verifyHeader = getElementBySelector(fixture, '#verify--header'); - const verifySubheader = getElementBySelector(fixture, '.verify--form-subheader'); - expect(getTextContent(verifyHeader)).toContain('Verifying Identity'); - expect(getTextContent(verifySubheader)).toContain('Checking your credentials..'); - }); - - it('should handle error when verification fails', () => { - const mockError = new Error('Verification failed'); - routerAuthService.emailVerify.and.returnValue(throwError(() => mockError)); - fixture.detectChanges(); - spyOn(component, 'handleError'); - component.ngOnInit(); - expect(component.handleError).toHaveBeenCalledOnceWith(mockError); - const verifyHeader = getElementBySelector(fixture, '#verify--header'); - const verifySubheader = getElementBySelector(fixture, '.verify--form-subheader'); - expect(getTextContent(verifyHeader)).toContain('Verification Failed'); - expect(getTextContent(verifySubheader)).toContain( - 'Unable to verify your Fyle account. Please contact support by sending an email to support@fylehq.com' - ); }); }); @@ -107,7 +88,6 @@ describe('VerifyPage', () => { }; component.handleError(error); expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'auth', 'disabled']); - expect(component.currentPageState).not.toEqual(VerifyPageState.error); }); it('should navigate to auth/pending_verification if status code is 440', () => { @@ -121,7 +101,6 @@ describe('VerifyPage', () => { 'pending_verification', { hasTokenExpired: true, orgId: 'orNVthTo2Zyo' }, ]); - expect(component.currentPageState).not.toEqual(VerifyPageState.error); }); it('should change the page status if error code is something else', () => { @@ -129,7 +108,12 @@ describe('VerifyPage', () => { status: 404, }; component.handleError(error); - expect(component.currentPageState).toEqual(VerifyPageState.error); + expect(router.navigate).toHaveBeenCalledOnceWith([ + '/', + 'auth', + 'pending_verification', + { orgId: 'orNVthTo2Zyo' }, + ]); }); }); }); diff --git a/src/app/auth/verify/verify.page.ts b/src/app/auth/verify/verify.page.ts index 0a583c5fc4..1aebefd808 100644 --- a/src/app/auth/verify/verify.page.ts +++ b/src/app/auth/verify/verify.page.ts @@ -4,7 +4,6 @@ import { RouterAuthService } from 'src/app/core/services/router-auth.service'; import { switchMap, tap } from 'rxjs/operators'; import { AuthService } from 'src/app/core/services/auth.service'; import { TrackingService } from '../../core/services/tracking.service'; -import { VerifyPageState } from './verify.enum'; @Component({ selector: 'app-verify', @@ -12,8 +11,6 @@ import { VerifyPageState } from './verify.enum'; styleUrls: ['./verify.page.scss'], }) export class VerifyPage implements OnInit { - currentPageState: VerifyPageState = VerifyPageState.verifying; - constructor( private activatedRoute: ActivatedRoute, private routerAuthService: RouterAuthService, @@ -22,10 +19,6 @@ export class VerifyPage implements OnInit { private trackingService: TrackingService ) {} - get PageStates(): typeof VerifyPageState { - return VerifyPageState; - } - ngOnInit(): void { const verificationCode = this.activatedRoute.snapshot.params.verification_code as string; this.routerAuthService @@ -39,21 +32,18 @@ export class VerifyPage implements OnInit { ) .subscribe({ next: () => this.router.navigate(['/', 'auth', 'switch_org', { invite_link: true }]), - error: (err) => this.handleError(err), + error: (err: { status: number }) => this.handleError(err), }); } - // eslint-disable-next-line @typescript-eslint/no-explicit-any - handleError(err: any): void { + handleError(err: { status: number }): void { const orgId = this.activatedRoute.snapshot.params.org_id as string; - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access if (err.status === 422) { this.router.navigate(['/', 'auth', 'disabled']); - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access } else if (err.status === 440) { this.router.navigate(['/', 'auth', 'pending_verification', { hasTokenExpired: true, orgId }]); } else { - this.currentPageState = VerifyPageState.error; + this.router.navigate(['/', 'auth', 'pending_verification', { orgId }]); } } } diff --git a/src/assets/svg/loader.svg b/src/assets/svg/loader.svg index 7fec1b9c12..a2238bb0cf 100644 --- a/src/assets/svg/loader.svg +++ b/src/assets/svg/loader.svg @@ -1,3 +1,3 @@ - - + +