Skip to content

Commit

Permalink
feat: Update password page
Browse files Browse the repository at this point in the history
  • Loading branch information
@bistaastha
bistaastha committed Nov 26, 2024
1 parent 61ca66b commit 3c8f6af
Show file tree
Hide file tree
Showing 5 changed files with 233 additions and 186 deletions.
2 changes: 2 additions & 0 deletions src/app/post-verification/invited-user/invited-user.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

import { MatSnackBarModule } from '@angular/material/snack-bar';
import { SharedModule } from 'src/app/shared/shared.module';

@NgModule({
imports: [
Expand All @@ -28,6 +29,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
MatFormFieldModule,
MatInputModule,
MatSnackBarModule,
SharedModule,
],
declarations: [InvitedUserPage],
})
Expand Down
247 changes: 113 additions & 134 deletions src/app/post-verification/invited-user/invited-user.page.html
View file
Original file line number Diff line number Diff line change
@@ -1,140 +1,119 @@
<ion-content>
<div class="invited-user" *ngIf="(isConnected$|async)">
<div class="invited-user--form-header-container">
<div class="invited-user--form-header">Setup your account?</div>
<div class="invited-user--form-sub-header">Set a password and give your account a name</div>
</div>
<div class="invited-user" *ngIf="(isConnected$|async)">
<div>
<ion-icon
class="fy-icon back-icon"
src="../../../assets/svg/arrow-tail-left.svg"
[routerLink]="['/','auth','sign_in']"
></ion-icon>
<div>
<form [formGroup]="fg">
<div
[ngClass]="{'invited-user--form-label__invalid': (!fg.controls.fullName.valid && fg.controls.fullName.touched) }"
class="invited-user--form-label"
>
Full Name
</div>
<mat-form-field class="mat-form-field-no-padding invited-user--form-field" appearance="outline">
<input class="smartlook-show" formControlName="fullName" type="text" matInput placeholder="John Doe" />
</mat-form-field>
<div
[ngClass]="{'invited-user--form-label__invalid': (!fg.controls.password.valid && fg.controls.password.touched) }"
class="invited-user--form-label"
>
Password
</div>
<mat-form-field class="mat-form-field-no-padding invited-user--form-field" appearance="outline">
<input
formControlName="password"
type="password"
matInput
[type]="hide ? 'text': 'password'"
placeholder="minimum 12 chars"
class="smartlook-show"
/>
<div class="invited-user--password-visibility" matSuffix (click)="hide = !hide">
{{hide ? 'Hide' : 'Show'}}
</div>
</mat-form-field>
</form>
</div>
<div class="invited-user--password-rules">
<div>
<span>
<ion-icon
*ngIf="lengthValidationDisplay$|async"
class="invited-user--validation__correct"
name="checkmark-outline"
></ion-icon>
<ion-icon
*ngIf="!(lengthValidationDisplay$|async)"
class="invited-user--validation__incorrect"
name="close-outline"
></ion-icon>
</span>
<span> Is between 12 to 32 characters </span>
</div>
<div>
<span>
<ion-icon
*ngIf="uppercaseValidationDisplay$|async"
class="invited-user--validation__correct"
name="checkmark-outline"
></ion-icon>
<ion-icon
*ngIf="!(uppercaseValidationDisplay$|async)"
class="invited-user--validation__incorrect"
name="close-outline"
></ion-icon>
</span>
<span> Contains atleast 1 uppercase character </span>
</div>
<div>
<span>
<ion-icon
*ngIf="lowercaseValidationDisplay$|async"
class="invited-user--validation__correct"
name="checkmark-outline"
></ion-icon>
<ion-icon
*ngIf="!(lowercaseValidationDisplay$|async)"
class="invited-user--validation__incorrect"
name="close-outline"
></ion-icon>
</span>
<span> Contains atleast 1 lowercase character </span>
</div>
<div class="invited-user--form-header">Join "{{ orgName }}" on Fyle</div>
<div>
<span>
<ion-icon
*ngIf="numberValidationDisplay$|async"
class="invited-user--validation__correct"
name="checkmark-outline"
></ion-icon>
<ion-icon
*ngIf="!(numberValidationDisplay$|async)"
class="invited-user--validation__incorrect"
name="close-outline"
></ion-icon>
</span>
<span> Contains atleast 1 number </span>
</div>
<div>
<span>
<ion-icon
*ngIf="specialCharValidationDisplay$|async"
class="invited-user--validation__correct"
name="checkmark-outline"
></ion-icon>
<ion-icon
*ngIf="!(specialCharValidationDisplay$|async)"
class="invited-user--validation__incorrect"
name="close-outline"
></ion-icon>
</span>
<span> Contains atleast 1 special character </span>
<form [formGroup]="fg">
<div
class="invited-user__text invited-user__text-block"
[ngClass]="{'invited-user__text__invalid': fg.controls.fullName.touched && !fg.controls.fullNamevalid}"
>
<div class="invited-user__text-label">
Full Name
<span class="invited-user__mandatory"> * </span>
</div>
<input [required]="true" class="invited-user__text-input smartlook-show" formControlName="fullName" />
</div>
<div
class="invited-user__text invited-user__text-block"
[ngClass]="{'invited-user__text__invalid': fg.controls.password.touched && !fg.controls.password.valid}"
>
<div class="invited-user__text-label">
Password
<span class="invited-user__mandatory"> * </span>
</div>
<div class="invited-user__password-container">
<input
placeholder="Enter Password"
[required]="true"
[type]="hide ? 'text': 'password'"
class="invited-user__text-input smartlook-show"
formControlName="password"
(focus)="setPasswordTooltip(true)"
(blur)="setPasswordTooltip(false)"
/>
<div matSuffix (click)="hide = !hide">
<ion-icon
*ngIf="!hide"
class="fy-icon invited-user__password-icon"
src="../../../assets/svg/eye-slash.svg"
></ion-icon>
<ion-icon
*ngIf="hide"
class="fy-icon invited-user__password-icon"
src="../../../assets/svg/eye.svg"
></ion-icon>
</div>
</div>
<app-password-check-tooltip
*ngIf="showPasswordTooltip"
[password]="fg.controls.password.value"
></app-password-check-tooltip>
</div>
<div
class="invited-user__text invited-user__text-block"
[ngClass]="{'invited-user__text__invalid': fg.controls.confirmPasswordouched && !fg.controls.confirmPassword.valid}"
>
<div class="invited-user__text-label">
Confirm Password
<span class="invited-user__mandatory"> * </span>
</div>
<div class="invited-user__password-container">
<input
placeholder="Confirm Password"
[required]="true"
[type]="hideConfirmPassword ? 'text': 'password'"
class="invited-user__text-input smartlook-show"
formControlName="confirmPassword"
/>
<div matSuffix (click)="hideConfirmPassword = !hideConfirmPassword">
<ion-icon
*ngIf="!hide"
class="fy-icon invited-user__password-icon"
src="../../../assets/svg/eye-slash.svg"
></ion-icon>
<ion-icon
*ngIf="hide"
class="fy-icon invited-user__password-icon"
src="../../../assets/svg/eye.svg"
></ion-icon>
</div>
</div>
<app-password-check-tooltip
*ngIf="false"
[password]="fg.controls.password.value"
></app-password-check-tooltip>
</div>
</form>
</div>
</div>
<div>
<button
[ngClass]="{'invited-user--save__disabled': !fg.valid}"
class="invited-user--save"
(click)="saveData()"
mat-flat-button
color="primary"
>
Continue
</button>
</div>
</div>
<div class="invited-user-offline ion-text-center" *ngIf="!(isConnected$|async)">
<img
class="invited-user-offline--image"
alt="offline-zer-state"
src="../../../assets/images/zero-states/offline.svg"
/>
<div class="invited-user-offline--title">Looks like you are offline</div>
<div class="invited-user-offline--sub-title">
You need to be connected to Internet to be able to login to the app. Please check if your Internet connection is
working.
</div>
<div>
<button
[ngClass]="{'invited-user--save__disabled': !fg.valid}"
class="invited-user--save"
(click)="saveData()"
mat-flat-button
color="primary"
>
Join
</button>
</div>
</div>
<div class="invited-user-offline ion-text-center" *ngIf="!(isConnected$|async)">
<img
class="invited-user-offline--image"
alt="offline-zer-state"
src="../../../assets/images/zero-states/offline.svg"
/>
<div class="invited-user-offline--title">Looks like you are offline</div>
<div class="invited-user-offline--sub-title">
You need to be connected to Internet to be able to login to the app. Please check if your Internet connection is
working.
</div>
</ion-content>
</div>
85 changes: 69 additions & 16 deletions src/app/post-verification/invited-user/invited-user.page.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,71 @@
@import '../../../theme/colors.scss';
$offline-title: #4a4a4a;
$offline-sub-title: #ababab;
$name: #aaa;
$header-text: #aaa;

.invited-user {
padding: 36px;
display: flex;
flex-direction: column;
padding: 24px 20px;
height: 100%;
justify-content: space-between;

&__text-block {
margin-bottom: 12px;
}

&__password-container {
display: flex;
}

&__text {
border-bottom: 1px solid $grey-lighter;

&__invalid {
border-bottom: 1px solid $red;
}
}

&__mandatory {
color: $brand-primary;
display: inline-block;
font-size: 14px;
font-weight: 400;
}

&__text-block {
margin-bottom: 12px;
}

&__text-label {
margin: 0 8px 0 0;
max-width: 90%;
min-width: 120px;
font-size: 12px;
color: $black-light;
line-height: 16px;
white-space: nowrap;
font-weight: 400;
}

&__text-input {
border: 0;
font-size: 14px;
font-weight: 400;
height: 18px;
line-height: 18px;
color: $blue-black;
width: 100%;
margin: 6px 0;
padding: 0;
}

&__password-icon {
width: 20px;
height: 20px;
}

&--full-name {
font-size: 14px;
color: $header-text;
Expand All @@ -17,17 +78,9 @@ $header-text: #aaa;
}

&--form-header {
font-size: 18px;
font-size: 20px;
margin: 0 0 10px;
position: relative;
&::before {
color: #f90;
content: '∙';
position: absolute;
font-size: 90px;
left: -48px;
top: -4px;
}
}

&--form-sub-header {
Expand Down Expand Up @@ -57,12 +110,6 @@ $header-text: #aaa;
width: 100%;
}

&--password-visibility {
color: $header-text;
position: relative;
top: -7px;
}

&--password-rules {
padding: 14px 0;
}
Expand Down Expand Up @@ -110,3 +157,9 @@ $header-text: #aaa;
padding: 0 8px;
}
}

.back-icon {
margin-bottom: 20px;
width: 28px;
height: 28px;
}
Loading

0 comments on commit 3c8f6af

Please sign in to comment.