File
Metadata
| selector |
app-profile-settings-dialog |
| styleUrls |
./profile-settings-dialog.component.scss |
| templateUrl |
./profile-settings-dialog.component.html |
Constructor
constructor(dialogRef: MatDialogRef, dialog: MatDialog)
|
|
|
Parameters :
| Name |
Type |
Optional |
| dialogRef |
MatDialogRef<boolean>
|
No
|
| dialog |
MatDialog
|
No
|
|
Methods
|
Public
changePassword
|
changePassword()
|
|
|
|
|
|
Public
closeDialog
|
closeDialog()
|
|
|
|
|
|
projectNameEdited
|
projectNameEdited(saved: boolean)
|
|
|
Parameters :
| Name |
Type |
Optional |
| saved |
boolean
|
No
|
|
|
Public
updatePassword
|
updatePassword()
|
|
|
|
|
|
description
|
Type : string
|
Default value : ''
|
|
|
|
Public
dialogRef
|
Type : MatDialogRef<boolean>
|
|
|
|
hide
|
Default value : true
|
|
|
|
updatePasswordFieldsShown
|
Default value : false
|
|
|
import {Component} from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material/dialog';
@Component({
selector: 'app-profile-settings-dialog',
templateUrl: './profile-settings-dialog.component.html',
styleUrls: ['./profile-settings-dialog.component.scss']
})
export class ProfileSettingsDialogComponent {
hide = true;
updatePasswordFieldsShown = false;
description = '';
constructor(public dialogRef: MatDialogRef<boolean>, private dialog: MatDialog) {}
//close profile settings dialog
public closeDialog(): void {
this.dialogRef.close();
}
//TODO
public changePassword(): void {
this.updatePasswordFieldsShown = true;
}
//TODO
public cancel(): void {
this.updatePasswordFieldsShown = false;
}
//TODO
public updatePassword(): void {
this.updatePasswordFieldsShown = false;
}
projectNameEdited(saved: boolean): void {
if (!saved) {
return;
}
alert('TODO: Save');
}
}
<div class="dialog">
<button mat-button color="primary" class="new-item-button" (click)="closeDialog()">
<mat-icon>close_ios</mat-icon>
</button>
<h1 mat-dialog-title style="text-align: center">Profile Settings</h1>
<app-text-display
[text]="description"
[onEditFinished]="projectNameEdited"
placeholder="Display Name"
labelText="Display Name"
></app-text-display>
<app-text-display
[text]="description"
[onEditFinished]="projectNameEdited"
placeholder="Username"
labelText="Username"
></app-text-display>
<app-text-display [text]="description" [onEditFinished]="projectNameEdited" placeholder="Email" labelText="Email"></app-text-display>
<button mat-button color="primary" class="new-item-button" (click)="changePassword()">Change Password</button>
<br />
<!-- shows up when change password clicked, contains input fields for updating the password-->
<div *ngIf="updatePasswordFieldsShown">
<!-- old password input field (TODO : make update only possible when old password correct )-->
<mat-form-field appearance="fill">
<mat-label>Enter old password</mat-label>
<input matInput [type]="hide ? 'password' : 'text'" />
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
</button>
</mat-form-field>
<!-- new password input field -->
<mat-form-field appearance="fill">
<mat-label>Enter new password</mat-label>
<input matInput [type]="hide ? 'password' : 'text'" />
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
</button>
</mat-form-field>
<button mat-button color="primary" class="new-item-button" (click)="updatePassword()">Update Password</button>
<button mat-button color="primary" class="new-item-button" (click)="cancel()">Cancel</button>
</div>
</div>
.dialog {
width: 500px;
}
.new-item-button {
float: right;
}
Legend
Html element with directive