-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a1c3e8e
commit 8c6a447
Showing
6 changed files
with
463 additions
and
220 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export enum SignInPageState { | ||
| SELECT_SIGN_IN_METHOD, // Google Sign In and normal sign in redirection from here | ||
| ENTER_EMAIL, // user can enter email and proceed to next step, SSO flow begins after this step | ||
| ENTER_PASSWORD, // user can enter their password for login here | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,125 +1,153 @@ | ||
| <ion-content class="sign-in--page-container no-keyboard-adjust"> | ||
| <ion-grid class="sign-in--header-container"> | ||
| <ion-row class="sign-in--header ion-align-items-center"> | ||
| <ion-col class="sign-in--header-logo-container"> | ||
| <img class="sign-in--header-logo" src="../../../assets/svg/fyle-logo-dark.svg" alt="fyle-logo-dark" /> | ||
| </ion-col> | ||
| </ion-row> | ||
| </ion-grid> | ||
| <div class="sign-in--form"> | ||
| <div id="sign-in--header" class="sign-in--form-header">Sign In</div> | ||
| <div class="sign-in--form-subheader">Enter your details below</div> | ||
| <form [formGroup]="fg"> | ||
| <mat-form-field | ||
| class="signin-signup-fields sign-in--form-field mat-form-field-no-padding" | ||
| appearance="outline" | ||
| *ngIf="!emailSet" | ||
| > | ||
| <input | ||
| id="sign-in--email" | ||
| (keyup.enter)="checkIfEmailExists()" | ||
| formControlName="email" | ||
| type="email" | ||
| matInput | ||
| placeholder="Work Email" | ||
| class="smartlook-show" | ||
| /> | ||
| </mat-form-field> | ||
| <div | ||
| class="sign-in--error" | ||
| *ngIf="fg.controls.email.touched && !fg.controls.email.valid && !fg.controls.email.value" | ||
| > | ||
| Please enter an email. | ||
| </div> | ||
| <div | ||
| class="sign-in--error" | ||
| *ngIf="fg.controls.email.touched && !fg.controls.email.valid && fg.controls.email.value" | ||
| > | ||
| Please enter a valid email. | ||
| </div> | ||
| <div *ngIf="emailSet"> | ||
| <ion-grid fixed> | ||
| <ion-row> | ||
| <ion-col size="9"> | ||
| <div class="sign-in--email-frozen-text" id="sign-in--email-label">{{fg.controls.email.value}}</div> | ||
| </ion-col> | ||
| <ion-col size="3" class="sign-in--edit-email"> | ||
| <a id="sign-in--change" (click)="emailSet = false"> Change </a> | ||
| </ion-col> | ||
| </ion-row> | ||
| </ion-grid> | ||
| </div> | ||
| <ion-content class="sign-in--page-container" class="no-keyboard-adjust"> | ||
| <div class="sign-in__select-sign-in" *ngIf="currentStep === signInPageState.SELECT_SIGN_IN_METHOD"> | ||
| <video | ||
| class="sign-in__video-container sign-in__video-container__video" | ||
| width="100%" | ||
| height="auto" | ||
| onloadedmetadata="this.muted = true" | ||
| oncanplay="this.play()" | ||
| loop | ||
| > | ||
| <source src="/assets/videos/mobile-onboarding.mp4" type="video/mp4" /> | ||
| </video> | ||
| </div> | ||
| <div class="sign-in__cta-container" *ngIf="currentStep === signInPageState.SELECT_SIGN_IN_METHOD"> | ||
| <ion-button (click)="changeState(signInPageState.ENTER_EMAIL)" class="btn-primary" fill="clear"> | ||
| Sign in with email address | ||
| </ion-button> | ||
|
|
||
| <mat-form-field | ||
| class="signin-signup-fields sign-in--form-field mat-form-field-no-padding" | ||
| appearance="outline" | ||
| *ngIf="emailSet" | ||
| > | ||
| <input | ||
| id="sign-in--password" | ||
| (keyup.enter)="signInUser()" | ||
| [disabled]="passwordLoading" | ||
| formControlName="password" | ||
| [type]="hide ? 'password': 'text'" | ||
| matInput | ||
| placeholder="Password" | ||
| /> | ||
| <mat-icon class="sign-in--password-visibility-icon" color="accent" matSuffix (click)="hide = !hide"> | ||
| {{hide ? 'visibility' : 'visibility_off'}} | ||
| </mat-icon> | ||
| </mat-form-field> | ||
| <div | ||
| class="sign-in--error" | ||
| *ngIf="fg.controls.password.touched && !fg.controls.password.valid && !fg.controls.password.value && emailSet" | ||
| > | ||
| Please enter your password | ||
| <div class="sign-in__divider-container"> | ||
| <div class="sign-in__divider"></div> | ||
| or | ||
| <div class="sign-in__divider"></div> | ||
| </div> | ||
|
|
||
| <button | ||
| (click)="googleSignIn()" | ||
| appFormButtonValidation | ||
| [loading]="googleSignInLoading" | ||
| class="sign-in__secondary-cta__btn" | ||
| fill="clear" | ||
| > | ||
| <img class="sign-in__secondary-cta__btn__logo" src="/assets/svg/logo-google.svg" alt="fyle-logo" /> | ||
| Sign in with Google | ||
| </button> | ||
| </div> | ||
| <div class="sign-in__enter-email" *ngIf="currentStep === signInPageState.ENTER_EMAIL"> | ||
| <div> | ||
| <ion-icon | ||
| class="fy-icon sign-in__enter-email__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> | ||
| <form [formGroup]="fg" class="sign-in__enter-email__input-container"> | ||
| <div class="sign-in__enter-email__input-container__label">Registered email</div> | ||
| <input | ||
| #simpleEmailInput | ||
| matInput | ||
| type="email" | ||
| placeholder="Enter registered email" | ||
| formControlName="email" | ||
| pattern="\S+@\S+\.\S{2,}" | ||
| class="sign-in__enter-email__input-container__input" | ||
| /> | ||
| <div | ||
| class="sign-in__enter-email__error-message" | ||
| *ngIf="fg.controls.email.touched && !fg.controls.email.valid" | ||
| > | ||
| Please enter a valid email. | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </form> | ||
| <div class="sign-in--primary-cta"> | ||
| <button | ||
| id="sign-in--continue" | ||
| *ngIf="!emailSet" | ||
| mat-flat-button | ||
| color="primary" | ||
| </div> | ||
| <div> | ||
| <ion-button | ||
| class="btn-primary" | ||
| id="sign-in__continue" | ||
| fill="clear" | ||
| [disabled]="!fg.controls.email.valid" | ||
| (click)="checkIfEmailExists()" | ||
| appFormButtonValidation | ||
| [loading]="emailLoading" | ||
| [loadingText]="'CONTINUING'" | ||
| [loadingText]="'Continue'" | ||
| > | ||
| CONTINUE | ||
| </button> | ||
| Continue | ||
| </ion-button> | ||
| </div> | ||
|
|
||
| <div class="sign-in--primary-cta"> | ||
| <button | ||
| id="sign-in--btn-sign-in" | ||
| *ngIf="emailSet" | ||
| mat-flat-button | ||
| color="primary" | ||
| </div> | ||
| <div class="sign-in__enter-password" *ngIf="currentStep === signInPageState.ENTER_PASSWORD"> | ||
| <div> | ||
| <ion-icon | ||
| class="fy-icon sign-in__enter-email__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> | ||
| <form [formGroup]="fg" class="sign-in__enter-password__input-container"> | ||
| <div class="sign-in__enter-password__input-container__label">Registered email</div> | ||
| <div class="sign-in__enter-password__disabled-email"> | ||
| {{fg.controls.email.value}} | ||
| <ion-icon | ||
| [src]="'/assets/svg/edit.svg'" | ||
| (click)="changeState(signInPageState.ENTER_EMAIL)" | ||
| class="sign-in__enter-password__email-edit" | ||
| ></ion-icon> | ||
| </div> | ||
| <div | ||
| class="sign-in__enter-password__text sign-in__enter-password__text-block" | ||
| [ngClass]="{'sign-in__enter-password__text__invalid': fg.controls.password.touched && !fg.controls.password.valid}" | ||
| > | ||
| <div class="sign-in__enter-password__input-container__label">Password</div> | ||
| <div class="sign-in__enter-password__password-container"> | ||
| <input | ||
| placeholder="Re-enter password" | ||
| [required]="true" | ||
| [type]="hidePassword ? 'password': 'text'" | ||
| class="sign-in__enter-password__text-input smartlook-show" | ||
| formControlName="password" | ||
| /> | ||
| <div | ||
| class="sign-in__enter-password__password-icon-container" | ||
| matSuffix | ||
| (click)="hidePassword = !hidePassword" | ||
| > | ||
| <ion-icon | ||
| class="fy-icon sign-in__enter-password__password-icon" | ||
| src="{{hidePassword ? '/assets/svg/eye-slash.svg' : '/assets/svg/eye.svg'}}" | ||
| ></ion-icon> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div | ||
| class="sign-in__enter-password__error-message" | ||
| *ngIf="fg.controls.password.touched && !fg.controls.password.valid" | ||
| > | ||
| Please enter password | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <ion-button | ||
| class="btn-primary" | ||
| fill="clear" | ||
| [disabled]="!fg.controls.password.valid" | ||
| (click)="signInUser()" | ||
| appFormButtonValidation | ||
| [loading]="passwordLoading" | ||
| [loadingText]="'SIGNING IN'" | ||
| > | ||
| SIGN IN | ||
| </button> | ||
| </div> | ||
| <div *ngIf="emailSet" class="sign-in--redirect"> | ||
| <a [routerLink]="['/','auth','reset_password', {email:fg.controls.email.value}]">Forgot Password ?</a> | ||
| </div> | ||
| <div *ngIf="!emailSet" class="sign-in--secondary-cta"> | ||
| <button | ||
| mat-flat-button | ||
| color="accent" | ||
| (click)="googleSignIn()" | ||
| appFormButtonValidation | ||
| [loading]="googleSignInLoading" | ||
| [loadingText]="'Signing In'" | ||
| > | ||
| <div class="sign-in--secondary-cta-btn"> | ||
| <img class="sign-in--secondary-cta-btn-logo" src="../../../assets/svg/logo-google.svg" alt="fyle-logo" /> | ||
| Sign in with Google | ||
| </div> | ||
| </button> | ||
| Sign in | ||
| </ion-button> | ||
| </div> | ||
| </div> | ||
| </ion-content> |
Oops, something went wrong.