ccims documentation
  1. Components
  2. AccessTokenDialogComponent

File

src/app/dialogs/access-token-dialog/access-token-dialog.component.ts

Metadata

selector app-access-token-dialog
styleUrls ./access-token-dialog.component.scss
templateUrl ./access-token-dialog.component.html

Index

Properties
Methods

Constructor

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

Methods

Public closeDialog
closeDialog()
Defined in src/app/dialogs/access-token-dialog/access-token-dialog.component.ts:15
Returns : void
Public generateToken
generateToken()
Defined in src/app/dialogs/access-token-dialog/access-token-dialog.component.ts:19
Returns : void

Properties

Public dialogRef
Type : MatDialogRef<boolean>
Defined in src/app/dialogs/access-token-dialog/access-token-dialog.component.ts:12
selected
Type : string
Default value : 'option2'
Defined in src/app/dialogs/access-token-dialog/access-token-dialog.component.ts:10
 
import {Component} from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material/dialog';

@Component({
  selector: 'app-access-token-dialog',
  templateUrl: './access-token-dialog.component.html',
  styleUrls: ['./access-token-dialog.component.scss']
})
export class AccessTokenDialogComponent {
  selected = 'option2';

  constructor(public dialogRef: MatDialogRef<boolean>, private dialog: MatDialog) {}

  //close access token settings dialog
  public closeDialog(): void {
    this.dialogRef.close();
  }

  public generateToken(): void {
    //TODO
  }
}

<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">Personal access tokens</h1>
  Generate a personal access token for quicker access ...

  <form class="example-form">
    <mat-form-field class="example-full-width" appearance="fill">
      <mat-label>Note</mat-label>
      <input type="email" matInput placeholder="Ex. what will this token be used for?" />
    </mat-form-field>
  </form>

  <mat-form-field appearance="fill">
    <mat-label>Expitarion</mat-label>
    <mat-select [(value)]="selected">
      <mat-option value="option1">7 days</mat-option>
      <mat-option value="option2">30 days</mat-option>
      <mat-option value="option3">60 days</mat-option>
      <mat-option value="option4">90 days</mat-option>
    </mat-select>
  </mat-form-field>

  <br />

  <button mat-button [color]="'primary'" (click)="this.generateToken()">Generate Token</button>

  <button mat-button [mat-dialog-close]="null">Cancel</button>
</div>

./access-token-dialog.component.scss 

.dialog {
  width: 500px;
}

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

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

results matching ""

    No results matching ""