More webapp changes+fixes
This commit is contained in:
@@ -0,0 +1,191 @@
|
||||
<div class="page-content">
|
||||
@if (loading()) {
|
||||
<div class="loading-container">
|
||||
<nz-spin nzSimple nzSize="large"></nz-spin>
|
||||
</div>
|
||||
} @else if (key()) {
|
||||
<div class="detail-header">
|
||||
<button nz-button (click)="goBack()">
|
||||
<span nz-icon nzType="arrow-left" nzTheme="outline"></span>
|
||||
Back to Keys
|
||||
</button>
|
||||
<div class="header-actions">
|
||||
<button nz-button (click)="openEditModal()">
|
||||
<span nz-icon nzType="edit"></span>
|
||||
Edit
|
||||
</button>
|
||||
@if (!isCurrentKey()) {
|
||||
<button
|
||||
nz-button
|
||||
nzDanger
|
||||
nz-popconfirm
|
||||
nzPopconfirmTitle="Are you sure you want to delete this key?"
|
||||
(nzOnConfirm)="deleteKey()"
|
||||
>
|
||||
<span nz-icon nzType="delete"></span>
|
||||
Delete
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nz-card>
|
||||
<div class="key-header">
|
||||
<h2 class="key-title">{{ key()!.name }}</h2>
|
||||
@if (isCurrentKey()) {
|
||||
<nz-tag nzColor="cyan">Current</nz-tag>
|
||||
}
|
||||
</div>
|
||||
|
||||
<scn-metadata-grid>
|
||||
<scn-metadata-value label="Key ID">
|
||||
<span class="mono">{{ key()!.keytoken_id }}</span>
|
||||
</scn-metadata-value>
|
||||
<scn-metadata-value label="Permissions">
|
||||
<div class="permissions">
|
||||
@for (perm of getPermissions(); track perm) {
|
||||
<nz-tag
|
||||
[nzColor]="getPermissionColor(perm)"
|
||||
nz-tooltip
|
||||
[nzTooltipTitle]="getPermissionLabel(perm)"
|
||||
>
|
||||
{{ perm }}
|
||||
</nz-tag>
|
||||
}
|
||||
</div>
|
||||
</scn-metadata-value>
|
||||
<scn-metadata-value label="Channel Access">
|
||||
@if (key()!.all_channels) {
|
||||
<nz-tag nzColor="default">All Channels</nz-tag>
|
||||
} @else if (key()!.channels && key()!.channels.length > 0) {
|
||||
<div class="channel-list">
|
||||
@for (channelId of key()!.channels; track channelId) {
|
||||
<nz-tag nzColor="orange" nz-tooltip [nzTooltipTitle]="channelId">
|
||||
{{ getChannelDisplayName(channelId) }}
|
||||
</nz-tag>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<span class="text-muted">No channels</span>
|
||||
}
|
||||
</scn-metadata-value>
|
||||
<scn-metadata-value label="Messages Sent">
|
||||
{{ key()!.messages_sent }}
|
||||
</scn-metadata-value>
|
||||
<scn-metadata-value label="Created">
|
||||
<div class="timestamp-absolute">{{ key()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
|
||||
<div class="timestamp-relative">{{ key()!.timestamp_created | relativeTime }}</div>
|
||||
</scn-metadata-value>
|
||||
<scn-metadata-value label="Last Used">
|
||||
@if (key()!.timestamp_lastused) {
|
||||
<div class="timestamp-absolute">{{ key()!.timestamp_lastused | date:'yyyy-MM-dd HH:mm:ss' }}</div>
|
||||
<div class="timestamp-relative">{{ key()!.timestamp_lastused | relativeTime }}</div>
|
||||
} @else {
|
||||
<span class="text-muted">Never</span>
|
||||
}
|
||||
</scn-metadata-value>
|
||||
<scn-metadata-value label="Owner">
|
||||
@if (resolvedOwner()) {
|
||||
<div class="owner-name">{{ resolvedOwner()!.displayName }}</div>
|
||||
<div class="owner-id mono">{{ key()!.owner_user_id }}</div>
|
||||
} @else {
|
||||
<span class="mono">{{ key()!.owner_user_id }}</span>
|
||||
}
|
||||
</scn-metadata-value>
|
||||
</scn-metadata-grid>
|
||||
</nz-card>
|
||||
} @else {
|
||||
<nz-card>
|
||||
<div class="not-found">
|
||||
<p>Key not found</p>
|
||||
<button nz-button nzType="primary" (click)="goBack()">
|
||||
Back to Keys
|
||||
</button>
|
||||
</div>
|
||||
</nz-card>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Edit Modal -->
|
||||
<nz-modal
|
||||
[(nzVisible)]="showEditModal"
|
||||
nzTitle="Edit Key"
|
||||
(nzOnCancel)="closeEditModal()"
|
||||
[nzFooter]="editModalFooter"
|
||||
nzWidth="500px"
|
||||
>
|
||||
<ng-container *nzModalContent>
|
||||
<nz-form-item>
|
||||
<nz-form-label>Name</nz-form-label>
|
||||
<nz-form-control>
|
||||
<input
|
||||
type="text"
|
||||
nz-input
|
||||
placeholder="Enter a name for this key"
|
||||
[(ngModel)]="editKeyName"
|
||||
/>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
|
||||
<nz-form-item>
|
||||
<nz-form-label>Permissions</nz-form-label>
|
||||
<nz-form-control>
|
||||
<div class="permission-checkboxes">
|
||||
@for (opt of permissionOptions; track opt.value) {
|
||||
<label
|
||||
nz-checkbox
|
||||
[nzChecked]="isEditPermissionChecked(opt.value)"
|
||||
[nzDisabled]="opt.value !== 'A' && isEditPermissionChecked('A')"
|
||||
(nzCheckedChange)="onEditPermissionChange(opt.value, $event)"
|
||||
>
|
||||
<nz-tag [nzColor]="getPermissionColor(opt.value)">{{ opt.value }}</nz-tag>
|
||||
<span class="perm-label">{{ opt.label }}</span>
|
||||
<span class="perm-desc">- {{ opt.description }}</span>
|
||||
</label>
|
||||
}
|
||||
</div>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
|
||||
<nz-form-item>
|
||||
<label nz-checkbox [(ngModel)]="editKeyAllChannels">
|
||||
Access to all channels
|
||||
</label>
|
||||
</nz-form-item>
|
||||
|
||||
@if (!editKeyAllChannels) {
|
||||
<nz-form-item class="mb-0">
|
||||
<nz-form-label>Channels</nz-form-label>
|
||||
<nz-form-control>
|
||||
<nz-select
|
||||
[(ngModel)]="editKeyChannels"
|
||||
nzMode="multiple"
|
||||
nzPlaceHolder="Select channels"
|
||||
nzShowSearch
|
||||
style="width: 100%"
|
||||
>
|
||||
@for (channel of availableChannels(); track channel.channel_id) {
|
||||
<nz-option
|
||||
[nzValue]="channel.channel_id"
|
||||
[nzLabel]="getChannelLabel(channel)"
|
||||
></nz-option>
|
||||
}
|
||||
</nz-select>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
}
|
||||
</ng-container>
|
||||
</nz-modal>
|
||||
|
||||
<ng-template #editModalFooter>
|
||||
<button nz-button (click)="closeEditModal()">Cancel</button>
|
||||
<button
|
||||
nz-button
|
||||
nzType="primary"
|
||||
[nzLoading]="updating()"
|
||||
[disabled]="!editKeyName.trim() || editKeyPermissions.length === 0"
|
||||
(click)="updateKey()"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</ng-template>
|
||||
Reference in New Issue
Block a user