-
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.
Merge remote-tracking branch 'origin/fyle-86cx2t8bk-test' into Fyle-q…
…a-branch
- Loading branch information
Showing
4 changed files
with
419 additions
and
99 deletions.
There are no files selected for viewing
109 changes: 83 additions & 26 deletions
109
src/app/auth/pending-verification/pending-verification.page.html
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,26 +1,83 @@ | ||
| <app-send-email | ||
| *ngIf="!hasTokenExpired" | ||
| class="full-height" | ||
| title="Please verify your email" | ||
| content="An activation link has been sent to your email. Please click on it to verify your account and proceed with Fyle." | ||
| subcontent="Didn't receive the email? Please use the below form to request it again." | ||
| ctaText="Resend Verification Link" | ||
| successTitle="Verification email sent" | ||
| successContent="An activation link has been sent to your email. Please click on it to verify your account and proceed with Fyle." | ||
| [sendEmailPageState]="currentPageState" | ||
| [isLoading]="isLoading" | ||
| (sendEmail)="resendVerificationLink($event)" | ||
| ></app-send-email> | ||
|
|
||
| <app-send-email | ||
| *ngIf="hasTokenExpired" | ||
| class="full-height" | ||
| title="Verification link expired" | ||
| content="Please use the below form to request the verification link again." | ||
| ctaText="Resend Verification Link" | ||
| successTitle="Verification email sent" | ||
| successContent="An activation link has been sent to your email. Please click on it to verify your account and proceed with Fyle." | ||
| [sendEmailPageState]="currentPageState" | ||
| [isLoading]="isLoading" | ||
| (sendEmail)="resendVerificationLink($event)" | ||
| ></app-send-email> | ||
| <ion-content class="pending-verification"> | ||
| <div class="pending-verification__send-invite" *ngIf="!isInvitationLinkSent"> | ||
| <div class="pending-verification__form-container" *ngIf="!isInvitationLinkSent"> | ||
| <div class="pending-verification__error-icon-container"> | ||
| <ion-icon | ||
| class="pending-verification__error-icon" | ||
| [src]="'/assets/svg/error-outlined.svg'" | ||
| slot="icon-only" | ||
| ></ion-icon> | ||
| </div> | ||
| <div> | ||
| <div class="pending-verification__page-header">The invitation has expired</div> | ||
| <div class="pending-verification__sub-header"> | ||
| Enter your registered email address to receive a new invitation and set up your account on Fyle. | ||
| </div> | ||
| </div> | ||
| <form [formGroup]="fg" class="pending-verification__input-container"> | ||
| <div class="pending-verification__input-container__label">Registered Email</div> | ||
| <input | ||
| #simpleEmailInput | ||
| matInput | ||
| type="email" | ||
| placeholder="Email ID" | ||
| formControlName="email" | ||
| pattern="\S+@\S+\.\S{2,}" | ||
| class="pending-verification__input-container__input" | ||
| /> | ||
| <div class="pending-verification__error-message" *ngIf="fg.controls.email.touched && !fg.controls.email.valid"> | ||
| Please enter a valid email. | ||
| </div> | ||
| </form> | ||
| </div> | ||
| <div> | ||
| <ion-button (click)="resendVerificationLink(fg.controls.email.value)" class="btn-primary" fill="clear"> | ||
| Send invite | ||
| </ion-button> | ||
| <div class="pending-verification__cta-secondary" (click)="onGotoSignInClick()"> | ||
| <ion-icon | ||
| class="pending-verification__arrow-icon" | ||
| [src]="'/assets/svg/arrow-left.svg'" | ||
| slot="icon-only" | ||
| ></ion-icon> | ||
| <span class="pending-verification__cta-text">Back to Sign In</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="pending-verification__send-invite" *ngIf="isInvitationLinkSent"> | ||
| <div class="pending-verification__content-container" *ngIf="isInvitationLinkSent"> | ||
| <div class="pending-verification__success-icon-container"> | ||
| <ion-icon | ||
| class="pending-verification__success-icon" | ||
| [src]="'/assets/svg/check-circle-outline.svg'" | ||
| slot="icon-only" | ||
| ></ion-icon> | ||
| </div> | ||
| <section class="pending-verification__text"> | ||
| <h1 class="pending-verification__header">Invitation link sent</h1> | ||
| <p class="pending-verification__content"> | ||
| A new invitation link has been sent to your registered email address. Check your inbox to continue setting up | ||
| your account. | ||
| </p> | ||
| </section> | ||
| </div> | ||
| <div class="pending-verification__cta"> | ||
| <ion-button | ||
| (click)="onGotoSignInClick()" | ||
| class="btn-primary" | ||
| fill="clear" | ||
| aria-label="Navigate back to sign in page" | ||
| role="button" | ||
| > | ||
| <div class="pending-verification__cta-content"> | ||
| <ion-icon | ||
| class="pending-verification__arrow-icon" | ||
| [src]="'/assets/svg/arrow-left.svg'" | ||
| slot="icon-only" | ||
| ></ion-icon> | ||
| <span class="pending-verification__cta-text">Back to Sign In</span> | ||
| </div> | ||
| </ion-button> | ||
| </div> | ||
| </div> | ||
| </ion-content> |
198 changes: 198 additions & 0 deletions
198
src/app/auth/pending-verification/pending-verification.page.scss
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,198 @@ | ||
| @import '../../../theme/colors.scss'; | ||
|
|
||
| .pending-verification { | ||
| height: 100%; | ||
|
|
||
| &__send-invite { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| height: 100%; | ||
| padding: 0 20px 24px 20px; | ||
| } | ||
|
|
||
| &__form-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding-top: 24px; | ||
| justify-content: flex-start; | ||
| height: 100%; | ||
| } | ||
|
|
||
| &__error-icon { | ||
| width: 45px; | ||
| height: 45px; | ||
| fill: $red; | ||
| } | ||
|
|
||
| &__error-icon-container { | ||
| width: 40px; | ||
| height: 40px; | ||
| border-radius: 8px; | ||
| background: $pale-pink; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-bottom: 20px; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| &__page-header { | ||
| font-size: 20px; | ||
| margin: 0 0 10px; | ||
| position: relative; | ||
| margin-bottom: 24px; | ||
| } | ||
|
|
||
| &__disabled { | ||
| opacity: 0.2; | ||
| } | ||
|
|
||
| &__sub-header { | ||
| font-size: 14px; | ||
| margin: 0 0 10px; | ||
| position: relative; | ||
| margin-bottom: 24px; | ||
| color: $black-light; | ||
| } | ||
|
|
||
| &__error-message { | ||
| color: $red; | ||
| } | ||
|
|
||
| &__input-container { | ||
| &__label { | ||
| margin: 0 8px 0 0; | ||
| font-size: 12px; | ||
| color: $black-light; | ||
| line-height: 1.3; | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| &__input { | ||
| border: 0; | ||
| font-size: 14px; | ||
| font-weight: 400; | ||
| line-height: 1.3; | ||
| color: $blue-black; | ||
| width: 100%; | ||
| padding: 6px 0; | ||
| border-bottom: 1px solid $grey-lighter; | ||
| } | ||
|
|
||
| &__input:focus { | ||
| border-bottom: 1px solid $blue-black; | ||
| } | ||
| } | ||
|
|
||
| &__content-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-grow: 2; | ||
| } | ||
|
|
||
| &__arrow-icon { | ||
| fill: $pure-white; | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| &__cta-text { | ||
| font-size: 14px; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| &__cta-content { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| &__success-message { | ||
| height: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| &__success-icon-container { | ||
| width: 60px; | ||
| height: 60px; | ||
| border-radius: 8px; | ||
| background: $success-bg; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| &__success-icon { | ||
| width: 45px; | ||
| height: 45px; | ||
| fill: $green; | ||
| } | ||
|
|
||
| &__text { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| &__header { | ||
| color: $black; | ||
| font-size: 20px; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: normal; | ||
| height: 26px; | ||
| margin: 0; | ||
| } | ||
|
|
||
| &__resend-text { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| align-items: center; | ||
| color: $black-light; | ||
| font-weight: 500; | ||
| gap: 2px; | ||
|
|
||
| &__resend-link { | ||
| color: $brand-primary; | ||
| } | ||
|
|
||
| &__spinner-icon { | ||
| color: $brand-primary; | ||
| height: 12px; | ||
| } | ||
| } | ||
|
|
||
| &__content { | ||
| color: $black-light; | ||
| text-align: center; | ||
| font-size: 14px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 1.25; | ||
| height: 36px; | ||
| width: 274px; | ||
|
|
||
| &__reset-email { | ||
| font-weight: 500; | ||
| } | ||
| } | ||
| &__cta-secondary { | ||
| display: flex; | ||
| padding-top: 12px; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 24px; | ||
| align-self: stretch; | ||
| color: $blue-black; | ||
| display: flex; | ||
| flex-direction: row; | ||
| gap: 6px; | ||
| } | ||
| } |
Oops, something went wrong.