From 5e0cc026aa06efe2f7f8de3f47247ca6c5078404 Mon Sep 17 00:00:00 2001 From: Aastha Bist Date: Fri, 13 Dec 2024 20:23:40 +0530 Subject: [PATCH] feat: Redesign error popover for sign in page (#3346) --- .../auth/sign-in/error/error.component.html | 21 ++++++---- .../auth/sign-in/error/error.component.scss | 42 ++++++++++++------- .../sign-in/error/error.component.spec.ts | 20 ++++----- src/app/auth/sign-in/error/error.component.ts | 13 +++--- src/app/auth/sign-in/sign-in.page.spec.ts | 3 +- src/app/auth/sign-in/sign-in.page.ts | 2 +- src/global.scss | 3 +- 7 files changed, 59 insertions(+), 45 deletions(-) diff --git a/src/app/auth/sign-in/error/error.component.html b/src/app/auth/sign-in/error/error.component.html index d7d3157e3d..e3d0d09cf6 100644 --- a/src/app/auth/sign-in/error/error.component.html +++ b/src/app/auth/sign-in/error/error.component.html @@ -1,11 +1,18 @@
-
- {{ header }} +
+ +
+ {{ header }} +
-
+
- This email address will be temporarily locked after 5 unsuccessful login attempts. Try - resetting your + This email address will be temporarily locked after 5 unsuccessful login attempts. Would you like to try + resetting your password?
@@ -31,7 +38,7 @@
Your organization has restricted Fyle access to its corporate network.
-
- +
+ Try again
diff --git a/src/app/auth/sign-in/error/error.component.scss b/src/app/auth/sign-in/error/error.component.scss index bab19843e8..7b01cf25fb 100644 --- a/src/app/auth/sign-in/error/error.component.scss +++ b/src/app/auth/sign-in/error/error.component.scss @@ -1,29 +1,39 @@ -$details-color: #ababab; +@import '../../../../theme/colors.scss'; .error-internal { - &--header { + &__header { font-size: 20px; padding: 16px; - font-weight: 700; - } - - &--details { - font-size: 16px; - padding: 0 16px; font-weight: 500; - color: $details-color; - } + display: flex; + flex-direction: row; + border-bottom: 1px solid $grey-lighter; + gap: 12px; - &--primary-cta { - padding: 16px; - .mat-button-base { + &__header-text { + align-items: center; + justify-content: center; width: 100%; - font-weight: 700; - min-height: 47px; + display: flex; + flex-direction: row; } } - &--redirect { + &__close-icon { + align-self: flex-start; + } + + &__primary-cta { + padding: 0 16px 16px; + } + + &__details { + font-size: 16px; + padding: 20px 16px; + color: $black; + } + + &__redirect { text-decoration: none; } } diff --git a/src/app/auth/sign-in/error/error.component.spec.ts b/src/app/auth/sign-in/error/error.component.spec.ts index 2771080c02..f92b180191 100644 --- a/src/app/auth/sign-in/error/error.component.spec.ts +++ b/src/app/auth/sign-in/error/error.component.spec.ts @@ -35,11 +35,11 @@ describe('ErrorComponent', () => { }); it('should have a default header', () => { - expect(component.header).toEqual('Account does not Exist'); + expect(component.header).toEqual('Account does not exist'); }); - it('tryAgainClicked(): should dismiss the popover on try again button click', async () => { - const tryAgainBtn = getElementBySelector(fixture, '.error-internal--primary-cta button') as HTMLButtonElement; + it('closePopover(): should dismiss the popover on try again button click', async () => { + const tryAgainBtn = getElementBySelector(fixture, '.error-internal__primary-cta ion-button') as HTMLButtonElement; click(tryAgainBtn); fixture.detectChanges(); await fixture.whenStable(); @@ -59,10 +59,10 @@ describe('ErrorComponent', () => { it('should display the correct error message for status 401 and data is present', () => { component.error = { status: 401, data: { message: 'Invalid email or password' } }; fixture.detectChanges(); - const errorMessage = getElementBySelector(fixture, '.error-internal--details'); - const resetLink = getElementBySelector(fixture, '.error-internal--redirect'); + const errorMessage = getElementBySelector(fixture, '.error-internal__details'); + const resetLink = getElementBySelector(fixture, '.error-internal__redirect'); expect(getTextContent(errorMessage)).toContain( - 'This email address will be temporarily locked after 5 unsuccessful login attempts. Try resetting your password?' + 'This email address will be temporarily locked after 5 unsuccessful login attempts. Would you like to try resetting your password?' ); expect(resetLink).toBeTruthy(); }); @@ -70,7 +70,7 @@ describe('ErrorComponent', () => { it('should display the correct error message for status 400', () => { component.error = { status: 400 }; fixture.detectChanges(); - const errorMessage = getElementBySelector(fixture, '.error-internal--details'); + const errorMessage = getElementBySelector(fixture, '.error-internal__details'); expect(getTextContent(errorMessage)).toContain( 'Your account is not verified. Please request a verification link, if required' ); @@ -79,7 +79,7 @@ describe('ErrorComponent', () => { it('should display the correct error message for status 500', () => { component.error = { status: 500 }; fixture.detectChanges(); - const errorMessage = getElementBySelector(fixture, '.error-internal--details'); + const errorMessage = getElementBySelector(fixture, '.error-internal__details'); const supportLink = getElementBySelector(fixture, 'a'); expect(getTextContent(errorMessage)).toContain( 'Please retry in a while. Send us a note to support@fylehq.com if the problem persists.' @@ -90,7 +90,7 @@ describe('ErrorComponent', () => { it('should display the correct error message for status 433', () => { component.error = { status: 433 }; fixture.detectChanges(); - const errorMessage = getElementBySelector(fixture, '.error-internal--details'); + const errorMessage = getElementBySelector(fixture, '.error-internal__details'); expect(getTextContent(errorMessage)).toContain( 'This email address is locked temporarily, as there are too many unsuccessful login attempts recently. Please retry later.' ); @@ -99,7 +99,7 @@ describe('ErrorComponent', () => { it('should display the correct error message for status 401 and no data or message is present', () => { component.error = { status: 401 }; fixture.detectChanges(); - const errorMessage = getElementBySelector(fixture, '.error-internal--details'); + const errorMessage = getElementBySelector(fixture, '.error-internal__details'); expect(getTextContent(errorMessage)).toContain( 'Your organization has restricted Fyle access to its corporate network.' ); diff --git a/src/app/auth/sign-in/error/error.component.ts b/src/app/auth/sign-in/error/error.component.ts index a4a2775bda..bdbd7fc782 100644 --- a/src/app/auth/sign-in/error/error.component.ts +++ b/src/app/auth/sign-in/error/error.component.ts @@ -1,27 +1,24 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { PopoverController } from '@ionic/angular'; import { Router } from '@angular/router'; -import { HttpErrorResponse } from '@angular/common/http'; @Component({ selector: 'app-error', templateUrl: './error.component.html', styleUrls: ['./error.component.scss'], }) -export class ErrorComponent implements OnInit { - @Input() header = 'Account does not Exist'; +export class ErrorComponent { + @Input() header = 'Account does not exist'; @Input() error; constructor(private popoverController: PopoverController, private router: Router) {} - ngOnInit() {} - - async tryAgainClicked() { + async closePopover(): Promise { await this.popoverController.dismiss(); } - async routeTo(route: string[]) { + async routeTo(route: string[]): Promise { this.router.navigate(route); await this.popoverController.dismiss(); } diff --git a/src/app/auth/sign-in/sign-in.page.spec.ts b/src/app/auth/sign-in/sign-in.page.spec.ts index 5508ddaae8..88167af558 100644 --- a/src/app/auth/sign-in/sign-in.page.spec.ts +++ b/src/app/auth/sign-in/sign-in.page.spec.ts @@ -257,7 +257,6 @@ describe('SignInPage', () => { fixture.detectChanges(); const emailError = fixture.debugElement.query(By.css('.sign-in__enter-email__error-message')); expect(emailError).toBeDefined(); - console.log(emailError); expect(getTextContent(emailError.nativeElement)).toEqual('Please enter a valid email.'); }); }); @@ -305,7 +304,7 @@ describe('SignInPage', () => { const errorPopoverSpy = jasmine.createSpyObj('errorPopover', ['present']); popoverController.create.and.returnValue(errorPopoverSpy); - const header = 'Incorrect Email or Password'; + const header = 'Incorrect email or password'; await component.handleError(null); diff --git a/src/app/auth/sign-in/sign-in.page.ts b/src/app/auth/sign-in/sign-in.page.ts index 2480d0c542..a1249d1e81 100644 --- a/src/app/auth/sign-in/sign-in.page.ts +++ b/src/app/auth/sign-in/sign-in.page.ts @@ -148,7 +148,7 @@ export class SignInPage implements OnInit { } async handleError(error: HttpErrorResponse): Promise { - let header = 'Incorrect Email or Password'; + let header = 'Incorrect email or password'; if (error?.status === 400) { this.router.navigate(['/', 'auth', 'pending_verification', { email: this.fg.controls.email.value as string }]); diff --git a/src/global.scss b/src/global.scss index 8e93c955c8..532cf961cf 100644 --- a/src/global.scss +++ b/src/global.scss @@ -194,7 +194,8 @@ ion-popover.dialog-popover { left: 0 !important; height: auto; width: 100%; - border-radius: 0; + border-top-left-radius: 20px; + border-top-right-radius: 20px; } .popover-viewport {