Skip to content

Commit

Permalink
added accepted inite status, added forgot password on login
Browse files Browse the repository at this point in the history
  • Loading branch information
@Oluwadaminiola
Oluwadaminiola committed Jun 17, 2022
1 parent ef1c6f0 commit 70ba1a3
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 115 deletions.
178 changes: 78 additions & 100 deletions web/ui/dashboard/src/app/public/accept-invite/accept-invite.component.html
View file
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>
6 changes: 6 additions & 0 deletions web/ui/dashboard/src/app/public/accept-invite/accept-invite.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.logo-2 {
img {
height: 150px;
width: 150px;
}
}
15 changes: 3 additions & 12 deletions web/ui/dashboard/src/app/public/accept-invite/accept-invite.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ export class AcceptInviteComponent implements OnInit {
token!: string;
fetchingDetails = false;
userDetailsAvailable = false;
isInviteAccepted = false;
acceptInviteForm: FormGroup = this.formBuilder.group({
first_name: ['', Validators.required],
last_name: ['', Validators.required],
email: ['', Validators.required],
role: this.formBuilder.group({
type: ['super_user']
}),
password: ['', Validators.compose([Validators.minLength(8), Validators.required])],
password_confirmation: ['', Validators.required]
password: ['', Validators.compose([Validators.minLength(8), Validators.required])]
});

constructor(private formBuilder: FormBuilder, private acceptInviteService: AcceptInviteService, private route: ActivatedRoute, private router: Router, private generalService: GeneralService) {}
Expand All @@ -40,6 +40,7 @@ export class AcceptInviteComponent implements OnInit {
const response = await this.acceptInviteService.getUserDetails(token);
response.data.user ? (this.userDetailsAvailable = true) : (this.userDetailsAvailable = false);
const inviteeDetails = response.data.token;
inviteeDetails.status === 'accepted' ? (this.isInviteAccepted = true) : (this.isInviteAccepted = false);
const userDetails = response.data.user;
this.acceptInviteForm.patchValue({
first_name: userDetails?.first_name ? userDetails.first_name : '',
Expand Down Expand Up @@ -73,16 +74,6 @@ export class AcceptInviteComponent implements OnInit {
}
}

checkPassword(): boolean {
const newPassword = this.acceptInviteForm.value.password;
const confirmPassword = this.acceptInviteForm.value.password_confirmation;
if (newPassword === confirmPassword) {
return true;
} else {
return false;
}
}

checkForNumber(password: string): boolean {
const regex = /\d/;
return regex.test(password);
Expand Down
4 changes: 2 additions & 2 deletions web/ui/dashboard/src/app/public/forgot-password/forgot-password.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ <h3>Forgot your password? 🔐</h3>
</div>
<h3>We sent you a password reset link, 📬 🔐</h3>
<p class="center">A password reset link has been sent to your email, follow the link in your email to change your password</p>
<div class="flex flex__column flex__justify-center width__100" (click)="resetPassword()">
<button class="button button__white button--full-100 margin-auto" [disabled]="loading">{{ loading ? 'Sending...' : 'Resend Reset Link' }}</button>
<div class="flex flex__column flex__justify-center width__100">
<button class="button button__white button--full-100 margin-auto" (click)="resetPassword()" [disabled]="loading">{{ loading ? 'Sending...' : 'Resend Reset Link' }}</button>
<button class="button__clear color__primary margin-top__40px" [routerLink]="['/login']">Go to Login</button>
</div>
</ng-container>
Expand Down
6 changes: 5 additions & 1 deletion web/ui/dashboard/src/app/public/login/login.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</div>
</div>

<div class="input">
<div class="input margin-bottom__0px">
<label htmlFor="password">Password</label>
<div class="input--password">
<input [type]="showLoginPassword ? 'text' : 'password'" id="password" name="password" autocomplete="current-password" formControlName="password" required />
Expand All @@ -27,6 +27,10 @@
<span>Password is required</span>
</div>
</div>
<div class="flex flex__align-items-center font__12px margin-bottom__20px margin-top__4px">
Forgot password?
<button class="button__clear color__primary font__12px margin-left__6px" type="button" [routerLink]="['/forgot-password']">Reset it here</button>
</div>

<div class="button-container margin-top">
<button [disabled]="disableLoginBtn" class="button button__primary button--full-100">
Expand Down

0 comments on commit 70ba1a3

Please sign in to comment.