Added Authentication with user-auth and apikey-auth
This commit is contained in:
217
watcher-monitoring/Views/User/Details.cshtml
Normal file
217
watcher-monitoring/Views/User/Details.cshtml
Normal file
@@ -0,0 +1,217 @@
|
||||
@model watcher_monitoring.Models.User
|
||||
|
||||
@{
|
||||
ViewData["Title"] = "Benutzerdetails";
|
||||
}
|
||||
|
||||
<div class="container-fluid px-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-10">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="section-title mb-0">Benutzerdetails</h1>
|
||||
<div>
|
||||
<a asp-action="Edit" asp-route-id="@Model.Id" class="btn" style="background-color: var(--warning); color: #fff; margin-right: 0.5rem;">Bearbeiten</a>
|
||||
<a asp-action="Index" class="btn" style="background-color: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary);">Zurück</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (TempData["Success"] != null)
|
||||
{
|
||||
<div class="alert" style="background-color: rgba(63, 185, 80, 0.15); border: 1px solid var(--success); color: var(--success); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; position: relative;">
|
||||
@TempData["Success"]
|
||||
@if (TempData["NewApiKey"] != null)
|
||||
{
|
||||
<hr style="border-color: var(--border-color); margin: 1rem 0;">
|
||||
<strong>API-Key (wird nur einmal angezeigt!):</strong>
|
||||
<div class="input-group mt-2" style="display: flex; gap: 0.5rem;">
|
||||
<input type="text" class="form-control font-monospace" value="@TempData["NewApiKey"]" id="newApiKey" readonly style="background-color: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 0.75rem; border-radius: 6px; flex: 1;">
|
||||
<button class="btn" type="button" onclick="copyApiKey()" style="background-color: var(--accent-primary); color: #fff; border: none; padding: 0.75rem 1rem; border-radius: 6px;">
|
||||
Kopieren
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" style="position: absolute; top: 1rem; right: 1rem; color: var(--success);"></button>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (TempData["Error"] != null)
|
||||
{
|
||||
<div class="alert" style="background-color: rgba(248, 81, 73, 0.15); border: 1px solid var(--danger); color: var(--danger); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; position: relative;">
|
||||
@TempData["Error"]
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" style="position: absolute; top: 1rem; right: 1rem; color: var(--danger);"></button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="card mb-4">
|
||||
<h2 class="card-title">Benutzerinformationen</h2>
|
||||
<div style="color: var(--text-secondary);">
|
||||
<div class="row mb-3" style="padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
|
||||
<div class="col-sm-4"><strong style="color: var(--text-primary);">Benutzername:</strong></div>
|
||||
<div class="col-sm-8" style="color: var(--text-secondary);">@Model.Username</div>
|
||||
</div>
|
||||
<div class="row mb-3" style="padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
|
||||
<div class="col-sm-4"><strong style="color: var(--text-primary);">E-Mail:</strong></div>
|
||||
<div class="col-sm-8" style="color: var(--text-secondary);">@Model.Email</div>
|
||||
</div>
|
||||
<div class="row mb-3" style="padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
|
||||
<div class="col-sm-4"><strong style="color: var(--text-primary);">Status:</strong></div>
|
||||
<div class="col-sm-8">
|
||||
@if (Model.IsActive)
|
||||
{
|
||||
<span class="status-badge status-online">Aktiv</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="status-badge status-offline">Inaktiv</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3" style="padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
|
||||
<div class="col-sm-4"><strong style="color: var(--text-primary);">Erstellt am:</strong></div>
|
||||
<div class="col-sm-8" style="color: var(--text-secondary);">@Model.CreatedAt.ToString("dd.MM.yyyy HH:mm:ss")</div>
|
||||
</div>
|
||||
<div class="row mb-3" style="padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
|
||||
<div class="col-sm-4"><strong style="color: var(--text-primary);">Letzter Login:</strong></div>
|
||||
<div class="col-sm-8" style="color: var(--text-secondary);">@Model.LastLogin.ToString("dd.MM.yyyy HH:mm:ss")</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<form asp-action="ToggleActive" asp-route-id="@Model.Id" method="post" class="d-inline">
|
||||
@Html.AntiForgeryToken()
|
||||
<button type="submit" class="btn btn-sm" style="background-color: @(Model.IsActive ? "var(--warning)" : "var(--success)"); color: #fff; margin-right: 0.5rem;">
|
||||
@(Model.IsActive ? "Deaktivieren" : "Aktivieren")
|
||||
</button>
|
||||
</form>
|
||||
<form asp-action="Delete" asp-route-id="@Model.Id" method="post" class="d-inline" onsubmit="return confirm('Möchten Sie diesen Benutzer wirklich löschen? Alle API-Keys werden ebenfalls gelöscht.');">
|
||||
@Html.AntiForgeryToken()
|
||||
<button type="submit" class="btn btn-sm" style="background-color: var(--danger); color: #fff;">Löschen</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2 class="card-title mb-0">API-Keys (@Model.ApiKeys.Count)</h2>
|
||||
<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createApiKeyModal">
|
||||
Neuer API-Key
|
||||
</button>
|
||||
</div>
|
||||
@if (Model.ApiKeys.Any())
|
||||
{
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover" style="color: var(--text-primary); margin-bottom: 0;">
|
||||
<thead style="border-bottom: 1px solid var(--border-color);">
|
||||
<tr>
|
||||
<th style="color: var(--text-secondary); font-weight: 600; padding: 1rem;">Name</th>
|
||||
<th style="color: var(--text-secondary); font-weight: 600; padding: 1rem;">Beschreibung</th>
|
||||
<th style="color: var(--text-secondary); font-weight: 600; padding: 1rem;">Status</th>
|
||||
<th style="color: var(--text-secondary); font-weight: 600; padding: 1rem;">Erstellt</th>
|
||||
<th style="color: var(--text-secondary); font-weight: 600; padding: 1rem;">Läuft ab</th>
|
||||
<th style="color: var(--text-secondary); font-weight: 600; padding: 1rem;">Zuletzt verwendet</th>
|
||||
<th style="color: var(--text-secondary); font-weight: 600; padding: 1rem;">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var key in Model.ApiKeys.OrderByDescending(k => k.CreatedAt))
|
||||
{
|
||||
<tr style="border-bottom: 1px solid var(--border-color);">
|
||||
<td style="padding: 1rem;"><strong style="color: var(--text-primary);">@key.Name</strong></td>
|
||||
<td style="padding: 1rem; color: var(--text-secondary);">@(key.Description ?? "-")</td>
|
||||
<td style="padding: 1rem;">
|
||||
@if (key.IsExpired)
|
||||
{
|
||||
<span class="status-badge status-offline">Abgelaufen</span>
|
||||
}
|
||||
else if (!key.IsActive)
|
||||
{
|
||||
<span class="status-badge" style="background-color: rgba(139, 148, 158, 0.15); color: var(--text-secondary); border: 1px solid var(--text-secondary);">Inaktiv</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="status-badge status-online">Aktiv</span>
|
||||
}
|
||||
</td>
|
||||
<td style="padding: 1rem; color: var(--text-secondary);">@key.CreatedAt.ToString("dd.MM.yyyy")</td>
|
||||
<td style="padding: 1rem; color: var(--text-secondary);">@(key.ExpiresAt?.ToString("dd.MM.yyyy") ?? "Nie")</td>
|
||||
<td style="padding: 1rem; color: var(--text-secondary);">@(key.LastUsedAt?.ToString("dd.MM.yyyy HH:mm") ?? "Nie")</td>
|
||||
<td style="padding: 1rem;">
|
||||
<form asp-action="ToggleApiKey" asp-route-userId="@Model.Id" asp-route-keyId="@key.Id" method="post" class="d-inline">
|
||||
@Html.AntiForgeryToken()
|
||||
<button type="submit" class="btn btn-sm" style="background-color: @(key.IsActive ? "var(--warning)" : "var(--success)"); color: #fff; margin-right: 0.5rem;">
|
||||
@(key.IsActive ? "Deaktivieren" : "Aktivieren")
|
||||
</button>
|
||||
</form>
|
||||
<form asp-action="DeleteApiKey" asp-route-userId="@Model.Id" asp-route-keyId="@key.Id" method="post" class="d-inline" onsubmit="return confirm('Möchten Sie diesen API-Key wirklich löschen?');">
|
||||
@Html.AntiForgeryToken()
|
||||
<button type="submit" class="btn btn-sm" style="background-color: var(--danger); color: #fff;">Löschen</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p style="color: var(--text-muted); margin-bottom: 0;">Noch keine API-Keys vorhanden.</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal für neuen API-Key -->
|
||||
<div class="modal fade" id="createApiKeyModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content" style="background-color: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary);">
|
||||
<form asp-action="GenerateApiKey" asp-route-id="@Model.Id" method="post">
|
||||
@Html.AntiForgeryToken()
|
||||
<div class="modal-header" style="border-bottom: 1px solid var(--border-color);">
|
||||
<h5 class="modal-title" style="color: var(--text-primary);">Neuen API-Key erstellen</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" style="filter: invert(1);"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="keyName" class="form-label" style="color: var(--text-primary); font-weight: 500;">Name *</label>
|
||||
<input type="text" class="form-control" id="keyName" name="keyName" style="background-color: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 0.75rem; border-radius: 6px;" required>
|
||||
<div style="color: var(--text-muted); font-size: 0.875rem; margin-top: 0.25rem;">Ein eindeutiger Name für diesen API-Key</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label" style="color: var(--text-primary); font-weight: 500;">Beschreibung</label>
|
||||
<textarea class="form-control" id="description" name="description" rows="2" style="background-color: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 0.75rem; border-radius: 6px;"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="expiresAt" class="form-label" style="color: var(--text-primary); font-weight: 500;">Ablaufdatum (optional)</label>
|
||||
<input type="datetime-local" class="form-control" id="expiresAt" name="expiresAt" style="background-color: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 0.75rem; border-radius: 6px;">
|
||||
<div style="color: var(--text-muted); font-size: 0.875rem; margin-top: 0.25rem;">Leer lassen für unbegrenzte Gültigkeit</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer" style="border-top: 1px solid var(--border-color);">
|
||||
<button type="button" class="btn" data-bs-dismiss="modal" style="background-color: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary);">Abbrechen</button>
|
||||
<button type="submit" class="btn btn-primary">API-Key erstellen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
function copyApiKey() {
|
||||
var copyText = document.getElementById("newApiKey");
|
||||
copyText.select();
|
||||
copyText.setSelectionRange(0, 99999);
|
||||
navigator.clipboard.writeText(copyText.value);
|
||||
|
||||
var btn = event.target;
|
||||
var originalText = btn.textContent;
|
||||
btn.textContent = "Kopiert!";
|
||||
setTimeout(function() {
|
||||
btn.textContent = originalText;
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
}
|
||||
Reference in New Issue
Block a user