penambahan UI update password
This commit is contained in:
parent
be071b75b1
commit
97b2445d4f
|
|
@ -426,7 +426,7 @@ export class CostManagementComponent implements OnInit {
|
|||
);
|
||||
}
|
||||
|
||||
export(){
|
||||
export() {
|
||||
this.spinnerExportActive = true;
|
||||
setTimeout(() => {
|
||||
const columnsToExport = [
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
<h4 style="color: #ffffff; margin-bottom: 20px !important">
|
||||
Comparison of Water and Electricity Costs > {{ dataRow.building }}
|
||||
</h4>
|
||||
<p style="color: #ffffff">Room : {{ dataRow?.roomName }}</p>
|
||||
<p style="color: #ffffff">Category : {{ dataRow?.categoryName }}</p>
|
||||
|
||||
<div class="card-dashboard">
|
||||
<ngx-datatable
|
||||
|
|
|
|||
|
|
@ -29,6 +29,10 @@ export class ModalExportComponent {
|
|||
|
||||
ngOnInit() {
|
||||
this.formattedEndDate = this.dataRow.endDate.slice(0, 7);
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
console.log(this.dataRow);
|
||||
this.fetchData(
|
||||
this.dataRow.categoryId,
|
||||
this.dataRow.roomId,
|
||||
|
|
@ -75,7 +79,7 @@ export class ModalExportComponent {
|
|||
columnsToExport
|
||||
);
|
||||
this.spinnerExportActive = false;
|
||||
this.activeModal.close('Export completed');
|
||||
this.activeModal.close("Export completed");
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,170 @@
|
|||
<p>update-password works!</p>
|
||||
<section id="update-password">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<div class="card-header" style="background-color: #252525 !important">
|
||||
<h2 style="color: #ffffff">Update Password</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form [formGroup]="profilInfo" (ngSubmit)="onProjectInfoSubmit()">
|
||||
<div class="form-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group position-relative">
|
||||
<label for="currentPass" style="color: #ffffff"
|
||||
>Current Password</label
|
||||
>
|
||||
<input
|
||||
[type]="showCurrentPass ? 'text' : 'password'"
|
||||
id="currentPass"
|
||||
class="form-control"
|
||||
formControlName="currentPass"
|
||||
placeholder="********"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.currentPass.errors
|
||||
}"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.currentPass.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.currentPass.errors.required">
|
||||
Current Password is required
|
||||
</div>
|
||||
</small>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-link position-absolute"
|
||||
(click)="toggleCurrentPassVisibility()"
|
||||
style="top: 30px; right: 10px; color: #c3f164 !important;"
|
||||
>
|
||||
<i
|
||||
[class]="
|
||||
showCurrentPass ? 'fa fa-eye-slash' : 'fa fa-eye'
|
||||
"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-group position-relative">
|
||||
<label for="newPass" style="color: #ffffff"
|
||||
>New Password</label
|
||||
>
|
||||
<input
|
||||
[type]="showNewPass ? 'text' : 'password'"
|
||||
id="newPass"
|
||||
class="form-control"
|
||||
formControlName="newPass"
|
||||
placeholder="********"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.newPass.errors
|
||||
}"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.newPass.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.newPass.errors.required">
|
||||
New Password is required
|
||||
</div>
|
||||
<div *ngIf="f.newPass.errors.minlength">
|
||||
New Password must be at least 8 characters long
|
||||
</div>
|
||||
<div *ngIf="f.newPass.errors.pattern">
|
||||
New Password must contain at least one uppercase
|
||||
letter, one lowercase letter, and one number
|
||||
</div>
|
||||
</small>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-link position-absolute"
|
||||
(click)="toggleNewPassVisibility()"
|
||||
style="top: 30px; right: 10px; color: #c3f164 !important;"
|
||||
>
|
||||
<i
|
||||
[class]="
|
||||
showNewPass ? 'fa fa-eye-slash' : 'fa fa-eye'
|
||||
"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-group position-relative">
|
||||
<label for="confirmPass" style="color: #ffffff"
|
||||
>Confirm Password</label
|
||||
>
|
||||
<input
|
||||
[type]="showConfirmPass ? 'text' : 'password'"
|
||||
id="confirmPass"
|
||||
class="form-control"
|
||||
formControlName="confirmPass"
|
||||
placeholder="********"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.confirmPass.errors
|
||||
}"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.confirmPass.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.confirmPass.errors.required">
|
||||
Confirm Password is required
|
||||
</div>
|
||||
<div *ngIf="f.confirmPass.errors.matchPassword">
|
||||
Confirm Password must match the New Password
|
||||
</div>
|
||||
</small>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-link position-absolute"
|
||||
(click)="toggleConfirmPassVisibility()"
|
||||
style="top: 30px; right: 10px; color: #c3f164 !important;"
|
||||
>
|
||||
<i
|
||||
[class]="
|
||||
showConfirmPass ? 'fa fa-eye-slash' : 'fa fa-eye'
|
||||
"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-warning mr-1"
|
||||
style="
|
||||
color: #ffffff !important;
|
||||
background-color: transparent !important;
|
||||
border-color: #ffffff !important;
|
||||
border-radius: 10px;
|
||||
width: 145px;
|
||||
"
|
||||
(click)="cancel()"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
style="
|
||||
color: #000000 !important;
|
||||
background-color: #c3f164 !important;
|
||||
border-radius: 10px;
|
||||
width: 145px;
|
||||
"
|
||||
(click)="saveEdit()"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,98 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, ViewChild } from "@angular/core";
|
||||
import { FormBuilder, FormGroup, NgForm, Validators, AbstractControl, ValidatorFn } from "@angular/forms";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'app-update-password',
|
||||
templateUrl: './update-password.component.html',
|
||||
styleUrls: ['./update-password.component.css']
|
||||
selector: "app-update-password",
|
||||
templateUrl: "./update-password.component.html",
|
||||
styleUrls: ["./update-password.component.css"],
|
||||
})
|
||||
export class UpdatePasswordComponent {
|
||||
@ViewChild("f", { read: true }) userProfileForm: NgForm;
|
||||
public breadcrumb: any;
|
||||
profilInfo: FormGroup;
|
||||
activeTab: string = "profile-info2";
|
||||
submitted = false;
|
||||
showCurrentPass: boolean = false;
|
||||
showNewPass: boolean = false;
|
||||
showConfirmPass: boolean = false;
|
||||
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.profilInfo = this.formBuilder.group({
|
||||
currentPass: ["", Validators.required],
|
||||
newPass: ["", [Validators.required, Validators.minLength(8), Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/)]],
|
||||
confirmPass: ["", [Validators.required, this.matchPassword('newPass')]],
|
||||
});
|
||||
|
||||
this.profilInfo.get('newPass').valueChanges.subscribe(() => {
|
||||
this.profilInfo.get('confirmPass').updateValueAndValidity();
|
||||
});
|
||||
}
|
||||
|
||||
selectTab(tabName: string) {
|
||||
this.activeTab = tabName;
|
||||
}
|
||||
|
||||
get f() {
|
||||
return this.profilInfo.controls;
|
||||
}
|
||||
|
||||
matchPassword(passwordControlName: string): ValidatorFn {
|
||||
return (control: AbstractControl): { [key: string]: boolean } | null => {
|
||||
if (!control.parent || !control) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const passwordControl = control.parent.get(passwordControlName);
|
||||
if (!passwordControl) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (passwordControl.value !== control.value) {
|
||||
return { matchPassword: true };
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
}
|
||||
|
||||
onProjectInfoSubmit() {
|
||||
this.submitted = true;
|
||||
|
||||
if (this.profilInfo.invalid) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle form submission
|
||||
}
|
||||
|
||||
cancel() {
|
||||
// Handle cancel action
|
||||
}
|
||||
|
||||
saveEdit() {
|
||||
// Handle save action
|
||||
console.log(this.profilInfo);
|
||||
console.log(this.profilInfo.invalid);
|
||||
console.log(this.profilInfo.valid);
|
||||
|
||||
}
|
||||
|
||||
toggleCurrentPassVisibility() {
|
||||
this.showCurrentPass = !this.showCurrentPass;
|
||||
}
|
||||
|
||||
toggleNewPassVisibility() {
|
||||
this.showNewPass = !this.showNewPass;
|
||||
}
|
||||
|
||||
toggleConfirmPassVisibility() {
|
||||
this.showConfirmPass = !this.showConfirmPass;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,25 @@
|
|||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 20px;
|
||||
/* border-bottom: 1px solid #ccc; */
|
||||
}
|
||||
|
||||
.tab-link {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
color: #C3F164;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tab-link:hover,
|
||||
.tab-link.active {
|
||||
background-color: #555;
|
||||
background-color: #C3F164;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<button class="tab-link hidden" (click)="selectTab('profile-info')" [class.active]="activeTab === 'profile-info'">Profile Information</button>
|
||||
<button class="tab-link" (click)="selectTab('profile-info2')" [class.active]="activeTab === 'profile-info2'">Profile Information</button>
|
||||
<button class="tab-link" (click)="selectTab('update-password')" [class.active]="activeTab === 'update-password'">Update Password</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngIf="activeTab === 'profile-info'" class="hidden">
|
||||
|
|
|
|||
Loading…
Reference in New Issue