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;
|
this.spinnerExportActive = true;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const columnsToExport = [
|
const columnsToExport = [
|
||||||
|
|
|
@ -2,6 +2,8 @@
|
||||||
<h4 style="color: #ffffff; margin-bottom: 20px !important">
|
<h4 style="color: #ffffff; margin-bottom: 20px !important">
|
||||||
Comparison of Water and Electricity Costs > {{ dataRow.building }}
|
Comparison of Water and Electricity Costs > {{ dataRow.building }}
|
||||||
</h4>
|
</h4>
|
||||||
|
<p style="color: #ffffff">Room : {{ dataRow?.roomName }}</p>
|
||||||
|
<p style="color: #ffffff">Category : {{ dataRow?.categoryName }}</p>
|
||||||
|
|
||||||
<div class="card-dashboard">
|
<div class="card-dashboard">
|
||||||
<ngx-datatable
|
<ngx-datatable
|
||||||
|
|
|
@ -29,6 +29,10 @@ export class ModalExportComponent {
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.formattedEndDate = this.dataRow.endDate.slice(0, 7);
|
this.formattedEndDate = this.dataRow.endDate.slice(0, 7);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
console.log(this.dataRow);
|
||||||
this.fetchData(
|
this.fetchData(
|
||||||
this.dataRow.categoryId,
|
this.dataRow.categoryId,
|
||||||
this.dataRow.roomId,
|
this.dataRow.roomId,
|
||||||
|
@ -75,7 +79,7 @@ export class ModalExportComponent {
|
||||||
columnsToExport
|
columnsToExport
|
||||||
);
|
);
|
||||||
this.spinnerExportActive = false;
|
this.spinnerExportActive = false;
|
||||||
this.activeModal.close('Export completed');
|
this.activeModal.close("Export completed");
|
||||||
}, 3000);
|
}, 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({
|
@Component({
|
||||||
selector: 'app-update-password',
|
selector: "app-update-password",
|
||||||
templateUrl: './update-password.component.html',
|
templateUrl: "./update-password.component.html",
|
||||||
styleUrls: ['./update-password.component.css']
|
styleUrls: ["./update-password.component.css"],
|
||||||
})
|
})
|
||||||
export class UpdatePasswordComponent {
|
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 {
|
.tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 1px solid #ccc;
|
margin-bottom: 20px;
|
||||||
|
/* border-bottom: 1px solid #ccc; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-link {
|
.tab-link {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
color: #fff;
|
border-radius: 8px;
|
||||||
|
color: #C3F164;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-link:hover,
|
.tab-link:hover,
|
||||||
.tab-link.active {
|
.tab-link.active {
|
||||||
background-color: #555;
|
background-color: #C3F164;
|
||||||
|
color: black !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content {
|
.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 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('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>
|
<button class="tab-link" (click)="selectTab('update-password')" [class.active]="activeTab === 'update-password'">Update Password</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngIf="activeTab === 'profile-info'" class="hidden">
|
<div *ngIf="activeTab === 'profile-info'" class="hidden">
|
||||||
|
|
Loading…
Reference in New Issue