-
Notifications
You must be signed in to change notification settings - Fork 128
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added accepted inite status, added forgot password on login
- Loading branch information
1 parent
ef1c6f0
commit 70ba1a3
Showing
5 changed files
with
94 additions
and
115 deletions.
There are no files selected for viewing
178 changes: 78 additions & 100 deletions
178
web/ui/dashboard/src/app/public/accept-invite/accept-invite.component.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,113 +1,91 @@ | ||
<convoy-loader *ngIf="fetchingDetails"></convoy-loader> | ||
<div class="auth-page" *ngIf="!fetchingDetails"> | ||
<img src="/assets/img/logo.svg" class="logo" alt="convoy logo" /> | ||
<h3>Join your team to start managing webhooks</h3> | ||
<p class="text--center">Please fill in your {{userDetailsAvailable ? 'password details below to': 'details below to create your account and'}} join your team</p> | ||
<section class="auth-page--container"> | ||
<form [formGroup]="acceptInviteForm" (ngSubmit)="acceptInvite()"> | ||
<div class="grid grid__col-2 grid--gap__20px"> | ||
<div class="input"> | ||
<label for="firstname">Firstname</label> | ||
<input type="text" id="firstname" formControlName="first_name" [readonly]="userDetailsAvailable" required /> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.first_name.touched && acceptInviteForm.controls.first_name.invalid"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Firstname is required</span> | ||
<ng-container *ngIf="!isInviteAccepted"> | ||
<img src="/assets/img/logo.svg" class="logo" alt="convoy logo" /> | ||
<h3>Join your team to start managing webhooks</h3> | ||
<p class="text--center">Please fill in your {{ userDetailsAvailable ? 'password details below to' : 'details below to create your account and' }} join your team</p> | ||
<section class="auth-page--container"> | ||
<form [formGroup]="acceptInviteForm" (ngSubmit)="acceptInvite()"> | ||
<div class="grid grid__col-2 grid--gap__20px"> | ||
<div class="input"> | ||
<label for="firstname">Firstname</label> | ||
<input type="text" id="firstname" formControlName="first_name" [readonly]="userDetailsAvailable" required /> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.first_name.touched && acceptInviteForm.controls.first_name.invalid"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Firstname is required</span> | ||
</div> | ||
</div> | ||
|
||
<div class="input"> | ||
<label for="lastname">Lastname</label> | ||
<input type="text" id="lastname" formControlName="last_name" class="editMode" [readonly]="userDetailsAvailable" required /> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.last_name.touched && acceptInviteForm.controls.last_name.invalid"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Lastname is required</span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="input"> | ||
<label for="lastname">Lastname</label> | ||
<input type="text" id="lastname" formControlName="last_name" class="editMode" [readonly]="userDetailsAvailable" required /> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.last_name.touched && acceptInviteForm.controls.last_name.invalid"> | ||
<label for="email">Email Address</label> | ||
<input type="email" autocomplete="email" formControlName="email" class="editMode" readonly required /> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.email.touched && acceptInviteForm.controls.email.invalid"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Lastname is required</span> | ||
<span>Email is required</span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="input"> | ||
<label for="email">Email Address</label> | ||
<input type="email" autocomplete="email" formControlName="email" class="editMode" readonly required /> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.email.touched && acceptInviteForm.controls.email.invalid"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Email is required</span> | ||
</div> | ||
</div> | ||
<div class="input"> | ||
<label for="password">Create Password</label> | ||
<div class="input--password"> | ||
<input | ||
[type]="showPassword ? 'text' : 'password'" | ||
autocomplete="new-password" | ||
formControlName="password" | ||
id="password" | ||
[ngClass]="{ danger: acceptInviteForm.controls.password.touched && acceptInviteForm.controls.password.invalid }" | ||
required | ||
/> | ||
<button class="input--password__view-toggle" (click)="showPassword = !showPassword" type="button"> | ||
<img [src]="!showPassword ? '/assets/img/password-invisible-icon.svg' : '/assets/img/password-visible-icon.svg'" alt="showPassword ? 'hide password icon' : 'view password icon'" /> | ||
</button> | ||
</div> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.password.touched && acceptInviteForm.controls.password.invalid"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Password is required</span> | ||
</div> | ||
<div | ||
class="input__error input__error__danger" | ||
*ngIf="acceptInviteForm.controls.password.touched && acceptInviteForm.controls.password.invalid && acceptInviteForm.controls.password.errors?.['minlength']" | ||
> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Password should be at least 8 characters</span> | ||
</div> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.password.touched && !checkForNumber(acceptInviteForm.value.password)"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Password should have at least one number</span> | ||
</div> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.password.touched && !checkForSpecialCharacter(acceptInviteForm.value.password)"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Password should have at least one special character</span> | ||
</div> | ||
</div> | ||
<div class="input"> | ||
<label for="confirm_password">Confirm Password</label> | ||
<div class="input--password"> | ||
<input | ||
[type]="showConfirmPassword ? 'text' : 'password'" | ||
autocomplete="confirm-password" | ||
formControlName="password_confirmation" | ||
id="confirm_password" | ||
[ngClass]="{ | ||
danger: | ||
(acceptInviteForm.controls.password_confirmation.touched && acceptInviteForm.controls.password_confirmation.invalid) || | ||
(acceptInviteForm.controls.password.valid && acceptInviteForm.controls.password_confirmation.valid && acceptInviteForm.controls.password_confirmation.touched && !checkPassword()) | ||
}" | ||
required | ||
/> | ||
<button class="input--password__view-toggle" (click)="showConfirmPassword = !showConfirmPassword" type="button"> | ||
<img | ||
[src]="!showConfirmPassword ? '/assets/img/password-invisible-icon.svg' : '/assets/img/password-visible-icon.svg'" | ||
alt="showPassword ? 'hide password icon' : 'view password icon'" | ||
<div class="input"> | ||
<label for="password">Create Password</label> | ||
<div class="input--password"> | ||
<input | ||
[type]="showPassword ? 'text' : 'password'" | ||
autocomplete="new-password" | ||
formControlName="password" | ||
id="password" | ||
[ngClass]="{ danger: acceptInviteForm.controls.password.touched && acceptInviteForm.controls.password.invalid }" | ||
required | ||
/> | ||
</button> | ||
</div> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.password_confirmation.touched && acceptInviteForm.controls.password_confirmation.invalid"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Confirm new password</span> | ||
</div> | ||
|
||
<div | ||
class="input__error input__error__danger" | ||
*ngIf="acceptInviteForm.controls.password.valid && acceptInviteForm.controls.password_confirmation.valid && acceptInviteForm.controls.password_confirmation.touched && !checkPassword()" | ||
> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Passwords do not match</span> | ||
<button class="input--password__view-toggle" (click)="showPassword = !showPassword" type="button"> | ||
<img [src]="!showPassword ? '/assets/img/password-invisible-icon.svg' : '/assets/img/password-visible-icon.svg'" alt="showPassword ? 'hide password icon' : 'view password icon'" /> | ||
</button> | ||
</div> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.password.touched && acceptInviteForm.controls.password.invalid"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Password is required</span> | ||
</div> | ||
<div | ||
class="input__error input__error__danger" | ||
*ngIf="acceptInviteForm.controls.password.touched && acceptInviteForm.controls.password.invalid && acceptInviteForm.controls.password.errors?.['minlength']" | ||
> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Password should be at least 8 characters</span> | ||
</div> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.password.touched && !checkForNumber(acceptInviteForm.value.password)"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Password should have at least one number</span> | ||
</div> | ||
<div class="input__error input__error__danger" *ngIf="acceptInviteForm.controls.password.touched && !checkForSpecialCharacter(acceptInviteForm.value.password)"> | ||
<img src="assets/img/input-error-icon.svg" alt="input error icon" /> | ||
<span>Password should have at least one special character</span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<button class="button button__primary--without-gradient button--has-icon icon-center button--full-100" [disabled]="loading" (click)="acceptInvite()"> | ||
<span *ngIf="!loading">Join your team</span> | ||
<img *ngIf="loading" src="assets/img/button-loader.gif" alt="loader" /> | ||
</button> | ||
</form> | ||
</section> | ||
<button class="button button__primary--without-gradient button--has-icon icon-center button--full-100" [disabled]="loading" (click)="acceptInvite()"> | ||
<span *ngIf="!loading">Join your team</span> | ||
<img *ngIf="loading" src="assets/img/button-loader.gif" alt="loader" /> | ||
</button> | ||
</form> | ||
</section> | ||
</ng-container> | ||
<ng-container *ngIf="isInviteAccepted"> | ||
<img src="/assets/img/logo.svg" class="logo" alt="convoy logo" /> | ||
<div class="logo-2 margin-bottom__40px"> | ||
<img src="/assets/img/success.gif" alt="success" /> | ||
</div> | ||
<h3>This invitation has been accepted</h3> | ||
<p class="center">Login to continue to your workspace</p> | ||
<div class="flex flex__column flex__justify-center width__100"> | ||
<button class="button button__white button--full-100 margin-auto" [routerLink]="['/login']">Go to Login</button> | ||
</div> | ||
</ng-container> | ||
</div> |
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,6 @@ | ||
.logo-2 { | ||
img { | ||
height: 150px; | ||
width: 150px; | ||
} | ||
} |
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
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
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