Skip to content

Commit

Permalink
Merge pull request #15 from frain-dev/pelumi/qa/feedback
Browse files Browse the repository at this point in the history 
Pelumi/qa/feedback
  • Loading branch information
@horlah
horlah authored Jan 21, 2022
2 parents 57c3065 + 51ca2cd commit 540a169
Show file tree
Hide file tree
Showing 32 changed files with 642 additions and 420 deletions.
9 changes: 5 additions & 4 deletions src/app/interceptor/http.interceptor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@ export class HttpIntercepter implements HttpInterceptor {
return httpEvent;
}),
catchError((error: HttpErrorResponse) => {
if (error.status === 401 || error.error.message === 'Signature has expired' || error.error.message === 'Invalid token') this.router.navigate(['/login'], { replaceUrl: true }); localStorage.clear();
let errorMessage: string = error.error?.message;

if (error.status === 401 || error.error.message === 'Signature has expired' || error.error.message === 'Invalid token') this.router.navigate(['/login'], { replaceUrl: true });
localStorage.clear();
let errorMessage: string;
error.error?.message ? (errorMessage = error.error?.message) : (errorMessage = 'An error occured, please try again');
this.generalService.showNotification({
message: `${error.error.message === 'Timeout has occurred' ? 'Request timeout, please check your network and try again' : errorMessage}`
message: errorMessage
});
return throwError(error);
})
Expand Down
7 changes: 4 additions & 3 deletions src/app/models/group.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,20 @@ export interface GROUP {
name: string;
logo_url: string;
config: {
strategy: {
Strategy: {
type: string;
default: {
intervalSeconds: number;
retryLimit: number;
};
};
signature: {
Signature: {
header: string;
hash: string;
};
disable_endpoint: boolean;
DisableEndpoint: boolean;
};
created_at: Date;
updated_at: Date;
selected: boolean;
}
4 changes: 4 additions & 0 deletions src/app/private/components/loader/loader.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,8 @@
display: flex;
justify-content: center;
align-items: center;

img{
height: 150px;
}
}
2 changes: 1 addition & 1 deletion src/app/private/components/search/search.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<form class="input search no-margin" [formGroup]="searchForm" (ngSubmit)="search()">
<form class="search" [formGroup]="searchForm" (ngSubmit)="search()">
<img src="/assets/img/search-icon.svg" alt="search icon" />
<input type="text" [placeholder]="searchPlaceholder" formControlName="search" />
<button *ngIf="searchForm.valid" (click)="clearSearch()" type="button"><img src="/assets/img/cancel.svg" alt="clear search" /></button>
Expand Down
27 changes: 27 additions & 0 deletions src/app/private/components/search/search.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.search {
border: 1px solid #edeff5;
background: #fff;
border-radius: 10px;
padding: 11px 16px;
transition: all 0.3s;
display: flex;
align-items: center;
flex-wrap: nowrap;
input {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin-left: 10px;
margin-top: 0;
color: #737a91;
}
button {
padding: 0;
border: none;
background: none;
order: 3;
margin-top: -9px;
height: 12px;
}
}
236 changes: 143 additions & 93 deletions src/app/private/pages/account/account.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
<div class="account-page page page__small">
<div class="account-page--nav">
<div class="account-page--head">
<h2>Account Settings</h2>
<h2>User Settings</h2>
</div>
<ul class="account-page--nav--items">
<li class="account-page--nav--item" [ngClass]="{ active: activePage === 'profile' }">
<button (click)="activePage = 'profile'" class="clear">Profile</button>
</li>
<li class="account-page--nav--item" [ngClass]="{ active: activePage === 'organisation' }">
<button (click)="activePage = 'organisation'" class="clear">Organisation</button>
</li>
<li class="account-page--nav--item" [ngClass]="{ active: activePage === 'billing' }">
<button (click)="activePage = 'billing'" class="clear">Billing & Plan</button>
<li class="account-page--nav--item" [ngClass]="{ active: activePage === 'security' }">
<button (click)="activePage = 'security'" class="clear">Security</button>
</li>

<hr />

<li class="account-page--nav--item" (click)="logout()">
<li class="account-page--nav--item logout" (click)="logout()">
<a href="">Logout</a>
</li>
</ul>
Expand All @@ -27,119 +24,172 @@ <h2>Account Settings</h2>
<div class="user-details--head">
<div>
<img src="/assets/img/mimoji.png" alt="profile image" />
<button class="white">Edit Photo</button>
<!-- <button class="white">Edit Photo</button> -->
</div>

<button class="primary" [disabled]="savingDetails" (click)="editBasicUserInfo()">{{ savingDetails ? 'Saving changes...' : 'Save Changes' }}</button>
</div>

<h2>Basic Info</h2>
<p>Amet minim mollit non deserunt ullamco est sit aliqua dolo</p>

<form [formGroup]="editBasicInfoForm">
<div class="input small">
<input type="text" aria-label="first name" placeholder="firstname" formControlName="firstname" />
<div class="input--error-message" *ngIf="editBasicInfoForm.controls.firstname.touched && editBasicInfoForm.controls.firstname.invalid">
<img src="assets/img/input-error-icon.svg" alt="input error icon" />
<span>Field cannot be empty</span>
</div>
<input
type="text"
aria-label="first name"
placeholder="firstname"
formControlName="firstname"
[ngClass]="{ invalid: editBasicInfoForm.controls.firstname.touched && editBasicInfoForm.controls.firstname.invalid }"
/>
<label for="email">Firstname</label>
</div>
<div class="input small">
<input type="text" aria-label="last name" placeholder="lastname" formControlName="lastname" />
<div class="input--error-message" *ngIf="editBasicInfoForm.controls.lastname.touched && editBasicInfoForm.controls.lastname.invalid">
<img src="assets/img/input-error-icon.svg" alt="input error icon" />
<span>Field cannot be empty</span>
</div>
<input
type="text"
aria-label="last name"
placeholder="lastname"
formControlName="lastname"
[ngClass]="{ invalid: editBasicInfoForm.controls.lastname.touched && editBasicInfoForm.controls.lastname.invalid }"
/>
<label for="email">Lastname</label>
</div>

<div class="input">
<input type="email" aria-label="email" placeholder="email" formControlName="email" />
<div class="input--error-message" *ngIf="editBasicInfoForm.controls.email.touched && editBasicInfoForm.controls.email.invalid">
<img src="assets/img/input-error-icon.svg" alt="input error icon" />
<span>Field cannot be empty</span>
</div>
<input
type="email"
aria-label="email"
placeholder="email"
formControlName="email"
[ngClass]="{ invalid: editBasicInfoForm.controls.email.touched && editBasicInfoForm.controls.email.invalid }"
/>
<label for="email">Email Address</label>
</div>
</form>

<h2>Change Password</h2>
<p>Here you can change your password should it be compromised.</p>
<button class="white" (click)="showChangePasswordModal = true">Change password</button>
</ng-container>

<ng-container *ngIf="activePage === 'organisation'">
<h2>Account Info</h2>
<p>Amet minim mollit non deserunt ullamco est sit aliqua dolo</p>

<form>
<div class="input small">
<input type="text" aria-label="first name" />
</div>
<div class="input small">
<input type="text" aria-label="last name" />
</div>

<div class="input">
<input type="email" aria-label="email" />
</div>

<div class="input small">
<input type="text" aria-label="first name" />
</div>
<div class="input small">
<input type="text" aria-label="last name" />
<ng-container *ngIf="activePage === 'security'">
<div class="user-details--head">
<div class="password">
<h3>Change Password</h3>
<p>Here you can change your password incase you’ve been compromised</p>
</div>

<div class="input small">
<input type="text" aria-label="first name" />
</div>
<div class="input small">
<input type="text" aria-label="last name" />
<button class="primary" [disabled]="changingPassword" (click)="changePassword()">{{ changingPassword ? 'Saving changes...' : 'Save Changes' }}</button>
</div>
<form [formGroup]="changePasswordForm" (ngSubmit)="changePassword()">
<div class="input without-margin">
<div class="input--error-message" *ngIf="changePasswordForm.controls.current_password.touched && changePasswordForm.controls.current_password.invalid">
<img src="assets/img/input-error-icon.svg" alt="input error icon" />
<span>Enter current password</span>
</div>
<div class="input--password">
<input
[type]="passwordToggle.oldPassword ? 'text' : 'password'"
id="current_password"
name="current_password"
autocomplete="current-password"
placeholder="Enter your password"
formControlName="current_password"
[ngClass]="{ invalid: changePasswordForm.controls.current_password.touched && changePasswordForm.controls.current_password.invalid }"
/>
<label for="current_password">Confirm Password</label>
<button class="input--password__view-toggle" (click)="passwordToggle.oldPassword = !passwordToggle.oldPassword" type="button">
<img
[src]="!passwordToggle.oldPassword ? '/assets/img/password-invisible-icon.svg' : '/assets/img/password-visible-icon.svg'"
[alt]="passwordToggle.oldPassword ? 'hide password icon' : 'view password icon'"
/>
</button>
</div>
</div>

<p>
Forgot password?
<button class="primary clear" type="button" [routerLink]="['/forgot-password']">Reset it here</button>
</p>
<div class="input">
<textarea></textarea>
</div>
</form>

<h2 class="danger">Danger zone</h2>
<p>Deactivating your account means you will lose all workspaces created by you and all your every other account information.</p>
<button class="white">Deactivate Account</button>
</ng-container>
</div>
</div>

<div class="overlay" *ngIf="showChangePasswordModal"></div>
<div class="modal modal__center" *ngIf="showChangePasswordModal">
<div class="modal--head">
<h1>Change Password</h1>
<button class="clear has-icon" (click)="showChangePasswordModal = false">
<img src="/assets/img/modal-close-icon.svg" alt="close icon" />
</button>
</div>
<div class="modal--body">
<form>
<p>Here you can change your password incase you’ve been compromised</p>
<div class="input">
<div class="input--password">
<input [type]="passwordToggle.oldPassword ? 'text' : 'password'" id="password" name="password" autocomplete="current-password" placeholder="Enter your password" formControlName="password" />
<button class="input--password__view-toggle" (click)="passwordToggle.oldPassword = !passwordToggle.oldPassword" type="button">
<img
[src]="!passwordToggle.oldPassword ? '/assets/img/password-invisible-icon.svg' : '/assets/img/password-visible-icon.svg'"
alt="passwordToggle.oldPassword ? 'hide password icon' : 'view password icon'"
<div class="input--error-message" *ngIf="changePasswordForm.controls.password.touched && changePasswordForm.controls.password.invalid">
<img src="assets/img/input-error-icon.svg" alt="input error icon" />
<span>Enter new password</span>
</div>
<div class="input--password">
<input
[type]="passwordToggle.oldPassword ? 'text' : 'password'"
id="password"
name="password"
autocomplete="password"
placeholder="Enter your password"
formControlName="password"
[ngClass]="{ invalid: changePasswordForm.controls.password.touched && changePasswordForm.controls.password.invalid }"
/>
</button>
<label for="password">New Password</label>
<button class="input--password__view-toggle" (click)="passwordToggle.oldPassword = !passwordToggle.oldPassword" type="button">
<img
[src]="!passwordToggle.oldPassword ? '/assets/img/password-invisible-icon.svg' : '/assets/img/password-visible-icon.svg'"
[alt]="passwordToggle.oldPassword ? 'hide password icon' : 'view password icon'"
/>
</button>
</div>
</div>
</div>
<div class="input">
<div class="input--password">
<input [type]="passwordToggle.oldPassword ? 'text' : 'password'" id="password" name="password" autocomplete="current-password" placeholder="Enter your password" formControlName="password" />
<button class="input--password__view-toggle" (click)="passwordToggle.oldPassword = !passwordToggle.oldPassword" type="button">
<img
[src]="!passwordToggle.oldPassword ? '/assets/img/password-invisible-icon.svg' : '/assets/img/password-visible-icon.svg'"
alt="passwordToggle.oldPassword ? 'hide password icon' : 'view password icon'"
<div class="input">
<div class="input--error-message" *ngIf="changePasswordForm.controls.password_confirmation.touched && changePasswordForm.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-message"
*ngIf="
changePasswordForm.controls.password.valid && changePasswordForm.controls.password_confirmation.valid && changePasswordForm.controls.password_confirmation.touched && !passwordsMatch
"
>
<img src="assets/img/input-error-icon.svg" alt="input error icon" />
<span>Passwords do not match</span>
</div>
<div class="input--password">
<input
[type]="passwordToggle.oldPassword ? 'text' : 'password'"
id="password_confirmation"
name="password_confirmation"
autocomplete="password_confirmation"
placeholder="Enter your password"
formControlName="password_confirmation"
(input)="checkPassword()"
[ngClass]="{
invalid:
(changePasswordForm.controls.password_confirmation.touched && changePasswordForm.controls.password_confirmation.invalid) ||
(changePasswordForm.controls.password.valid &&
changePasswordForm.controls.password_confirmation.valid &&
changePasswordForm.controls.password_confirmation.touched &&
!passwordsMatch)
}"
/>
</button>
<label for="password_confirmation">Confirm Password</label>
<button class="input--password__view-toggle" (click)="passwordToggle.oldPassword = !passwordToggle.oldPassword" type="button">
<img
[src]="!passwordToggle.oldPassword ? '/assets/img/password-invisible-icon.svg' : '/assets/img/password-visible-icon.svg'"
[alt]="passwordToggle.oldPassword ? 'hide password icon' : 'view password icon'"
/>
</button>
</div>
</div>
</div>
<div class="input">
<div class="input--password">
<input [type]="passwordToggle.oldPassword ? 'text' : 'password'" id="password" name="password" autocomplete="current-password" placeholder="Enter your password" formControlName="password" />
<button class="input--password__view-toggle" (click)="passwordToggle.oldPassword = !passwordToggle.oldPassword" type="button">
<img
[src]="!passwordToggle.oldPassword ? '/assets/img/password-invisible-icon.svg' : '/assets/img/password-visible-icon.svg'"
alt="passwordToggle.oldPassword ? 'hide password icon' : 'view password icon'"
/>
</button>
</form>

<div class="plan full-width">
<img src="/assets/img/ideas.svg" alt="idea" />
<div>
<p>Use a strong password with at least 8 characters long, and having a mixed of letters, numbers, and symbols.</p>
</div>
</div>
</form>
</ng-container>
</div>
</div>
Loading

0 comments on commit 540a169

Please sign in to comment.