ccims documentation
  1. Components
  2. ProfileSettingsDialogComponent

File

src/app/dialogs/profile-settings-dialog/profile-settings-dialog.component.ts

Metadata

selector app-profile-settings-dialog
styleUrls ./profile-settings-dialog.component.scss
templateUrl ./profile-settings-dialog.component.html

Index

Properties
Methods

Constructor

constructor(dialogRef: MatDialogRef, dialog: MatDialog)
Defined in src/app/dialogs/profile-settings-dialog/profile-settings-dialog.component.ts:12
Parameters :
Name Type Optional
dialogRef MatDialogRef<boolean> No
dialog MatDialog No

Methods

Public cancel
cancel()
Defined in src/app/dialogs/profile-settings-dialog/profile-settings-dialog.component.ts:27
Returns : void
Public changePassword
changePassword()
Defined in src/app/dialogs/profile-settings-dialog/profile-settings-dialog.component.ts:22
Returns : void
Public closeDialog
closeDialog()
Defined in src/app/dialogs/profile-settings-dialog/profile-settings-dialog.component.ts:17
Returns : void
projectNameEdited
projectNameEdited(saved: boolean)
Defined in src/app/dialogs/profile-settings-dialog/profile-settings-dialog.component.ts:36
Parameters :
Name Type Optional
saved boolean No
Returns : void
Public updatePassword
updatePassword()
Defined in src/app/dialogs/profile-settings-dialog/profile-settings-dialog.component.ts:32
Returns : void

Properties

description
Type : string
Default value : ''
Defined in src/app/dialogs/profile-settings-dialog/profile-settings-dialog.component.ts:12
Public dialogRef
Type : MatDialogRef<boolean>
Defined in src/app/dialogs/profile-settings-dialog/profile-settings-dialog.component.ts:14
hide
Default value : true
Defined in src/app/dialogs/profile-settings-dialog/profile-settings-dialog.component.ts:10
updatePasswordFieldsShown
Default value : false
Defined in src/app/dialogs/profile-settings-dialog/profile-settings-dialog.component.ts:11
 
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>

./profile-settings-dialog.component.scss 

.dialog {
  width: 500px;
}

.new-item-button {
  float: right;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""