m0rph3us1987/HIPCTF2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI-Improvements

Browse Source
This commit is contained in:
m0rph3us1987
2026-07-24 12:58:34 +02:00
parent 143ed3c538
commit b99577e76a
40 changed files with 2202 additions and 821 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/features/admin/player-delete-modal.component.ts
+33 -12
View File
@@ -14,12 +14,34 @@ import { AdminUser } from '../../core/services/admin.service';
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CommonModule],
styles: [`
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 70; }
.modal { background: var(--color-surface, #fff); padding: 16px; border-radius: 8px; width: min(420px, 90vw); }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.error { color: var(--color-danger, #f00); margin-top: 8px; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-overlay {
position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1200; padding: 16px;
}
.modal {
background: #000000; color: #ffffff; border: 3px solid var(--neon-red);
padding: 24px; width: min(420px, 92vw);
box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 25px rgba(255, 0, 51, 0.35);
font-family: var(--font-mono);
}
h3 {
font-family: var(--font-heading, 'Chakra Petch', sans-serif);
font-size: 1.5rem; font-weight: 900; font-style: italic; text-transform: uppercase;
color: #ffffff; margin-bottom: 14px;
}
p { font-size: 0.95rem; color: #ddddee; margin-bottom: 16px; }
.actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.btn-cancel {
background: #000000; color: var(--neon-purple); border: 2px solid var(--neon-purple);
font-family: var(--font-mono); font-weight: 800; padding: 10px 20px; cursor: pointer;
}
.btn-cancel:hover { background: var(--neon-purple); color: #000000; }
.btn-ok {
background: var(--neon-red); color: #000000; border: 2px solid var(--neon-red);
font-family: var(--font-mono); font-weight: 800; padding: 10px 20px; cursor: pointer;
}
.btn-ok:hover:not([disabled]) { background: #000000; color: var(--neon-red); box-shadow: 0 0 15px rgba(255, 0, 51, 0.4); }
.error { color: var(--neon-red); margin-top: 8px; font-weight: bold; }
`],
template: `
@if (open()) {
@@ -32,16 +54,15 @@ import { AdminUser } from '../../core/services/admin.service';
data-testid="player-delete-modal"
(click)="$event.stopPropagation()"
>
<h3 id="pd-title">Delete user</h3>
<p>Delete this user?</p>
<h3 id="pd-title">DELETE USER</h3>
<p>Delete this user? All associated activity will be permanently wiped.</p>
@if (errorMessage(); as msg) {
<p class="error" role="alert" data-testid="player-delete-error">{{ msg }}</p>
}
<div class="actions">
<button type="button" (click)="onCancel()" [disabled]="submitting()" data-testid="player-delete-cancel">Cancel</button>
<button type="button" (click)="onConfirm()" [disabled]="submitting()" data-testid="player-delete-ok">
<span *ngIf="submitting()" class="spinner" aria-hidden="true"></span>
Delete
<button type="button" class="btn-cancel" (click)="onCancel()" [disabled]="submitting()" data-testid="player-delete-cancel">CANCEL</button>
<button type="button" class="btn-ok" (click)="onConfirm()" [disabled]="submitting()" data-testid="player-delete-ok">
{{ submitting() ? 'DELETING...' : 'DELETE USER' }}
</button>
</div>
</div>