Picsur/frontend/src/app/routes/settings/apikeys/settings-apikeys.component.html
2022-09-03 17:07:43 +02:00

72 lines
2 KiB
HTML

<h1>Api Keys</h1>
<mat-table [dataSource]="dataSubject" class="mat-elevation-z2">
<ng-container matColumnDef="key">
<mat-header-cell *matHeaderCellDef>Key</mat-header-cell>
<mat-cell *matCellDef="let apikey">
<copy-field
label="Key"
[value]="apikey.key"
[hidden]="true"
[showHideButton]="true"
></copy-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="created">
<mat-header-cell class="d-none d-lg-flex" *matHeaderCellDef>
Created
</mat-header-cell>
<mat-cell class="d-none d-lg-flex" *matCellDef="let apikey">
{{ apikey.created | amTimeAgo }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="last_used">
<mat-header-cell class="d-none d-sm-flex" *matHeaderCellDef>
Last Used
</mat-header-cell>
<mat-cell class="d-none d-sm-flex" *matCellDef="let apikey">
{{ apikey.last_used === null ? 'Never' : (apikey.last_used | amTimeAgo) }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
<mat-cell *matCellDef="let apikey">
<button mat-icon-button (click)="deleteApiKey(apikey.key)">
<mat-icon
fontSet="material-icons-outlined"
class="icon-red"
aria-label="Delete"
>
delete
</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"> </mat-row>
</mat-table>
<mat-paginator
color="accent"
class="mat-elevation-z2"
[pageSizeOptions]="pageSizeOptions"
[pageSize]="startingPageSize"
[showFirstLastButtons]="bootstrapService.isNotMobile() | async"
[hidePageSize]="bootstrapService.isMobile() | async"
[length]="totalApiKeys"
aria-label="Select page of apikeys"
(page)="updateSubject.next($event)"
>
</mat-paginator>
<fab
aria-label="Add Api Key"
(click)="addApiKey()"
icon="add"
tooltip="Create a new api key"
></fab>