Initial commit: AegisSight-Monitor-Verwaltung
Dieser Commit ist enthalten in:
claude-dev
624
src/static/css/style.css
Normale Datei
624
src/static/css/style.css
Normale Datei
@@ -0,0 +1,624 @@
|
||||
/* AegisSight Dark Theme - Verwaltungsportal */
|
||||
:root {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--text-primary: #e2e8f0;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-muted: #64748b;
|
||||
--accent: #f0b429;
|
||||
--accent-hover: #d4a017;
|
||||
--success: #22c55e;
|
||||
--warning: #f59e0b;
|
||||
--danger: #ef4444;
|
||||
--info: #3b82f6;
|
||||
--border: #334155;
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* --- Login Page --- */
|
||||
.login-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 40px 32px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
color: var(--accent);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.login-header .subtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* --- Forms --- */
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
input:focus, select:focus, textarea:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: #fca5a5;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* --- Buttons --- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #86efac;
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
.btn-success:hover:not(:disabled) {
|
||||
background: rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-full {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* --- Dashboard Layout --- */
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 24px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.app-header .logo {
|
||||
color: var(--accent);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.app-header .logo span {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.header-user {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* --- Navigation Tabs --- */
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 10px 20px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
/* --- Stats Cards --- */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stat-card .stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-card .stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stat-card .stat-sub {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* --- Cards --- */
|
||||
.card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* --- Tables --- */
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 10px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid rgba(51, 65, 85, 0.5);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: rgba(51, 65, 85, 0.2);
|
||||
}
|
||||
|
||||
/* --- Badges --- */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.badge-active {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.badge-inactive {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.badge-trial {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.badge-annual {
|
||||
background: rgba(168, 85, 247, 0.2);
|
||||
color: #d8b4fe;
|
||||
}
|
||||
|
||||
.badge-permanent {
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
.badge-expired {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.badge-revoked {
|
||||
background: rgba(100, 116, 139, 0.2);
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.badge-none {
|
||||
background: rgba(100, 116, 139, 0.15);
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* --- Modal --- */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* --- Section views --- */
|
||||
.section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* --- Action bar --- */
|
||||
.action-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 8px 12px;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
width: 240px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* --- Expiring licenses --- */
|
||||
.expiring-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.expiring-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(51, 65, 85, 0.5);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.expiring-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.expiring-date {
|
||||
color: var(--warning);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* --- Recent activity --- */
|
||||
.activity-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.activity-icon.org {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.activity-icon.user {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
/* --- Org detail panel --- */
|
||||
.detail-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.detail-panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.detail-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-back:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* --- Responsive --- */
|
||||
@media (max-width: 768px) {
|
||||
.app-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Utility --- */
|
||||
.text-muted { color: var(--text-muted); }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-accent { color: var(--accent); }
|
||||
.text-success { color: var(--success); }
|
||||
.text-danger { color: var(--danger); }
|
||||
.text-warning { color: var(--warning); }
|
||||
.mt-8 { margin-top: 8px; }
|
||||
.mt-16 { margin-top: 16px; }
|
||||
.mb-8 { margin-bottom: 8px; }
|
||||
.mb-16 { margin-bottom: 16px; }
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* --- Loading spinner --- */
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--border);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* --- Confirm dialog --- */
|
||||
.confirm-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
313
src/static/dashboard.html
Normale Datei
313
src/static/dashboard.html
Normale Datei
@@ -0,0 +1,313 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IntelSight Verwaltung</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="app-header">
|
||||
<div class="logo">IntelSight <span>Verwaltung</span></div>
|
||||
<div class="header-right">
|
||||
<span class="header-user" id="headerUser"></span>
|
||||
<button class="btn btn-secondary btn-small" id="logoutBtn">Abmelden</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="app-content">
|
||||
<!-- Navigation -->
|
||||
<nav class="nav-tabs">
|
||||
<button class="nav-tab active" data-section="dashboard">Dashboard</button>
|
||||
<button class="nav-tab" data-section="orgs">Organisationen</button>
|
||||
<button class="nav-tab" data-section="licenses">Lizenzen</button>
|
||||
</nav>
|
||||
|
||||
<!-- Dashboard Section -->
|
||||
<div class="section active" id="sec-dashboard">
|
||||
<div class="stats-grid" id="statsGrid"></div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>Bald ablaufende Lizenzen</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="expiring-list" id="expiringList">
|
||||
<li class="text-muted" style="padding: 8px 0;">Laden...</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>Letzte Aktivitaet</h2>
|
||||
</div>
|
||||
<div class="card-body" id="recentActivity">
|
||||
<div class="text-muted">Laden...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Organizations Section -->
|
||||
<div class="section" id="sec-orgs">
|
||||
<!-- Org List -->
|
||||
<div id="orgListView">
|
||||
<div class="action-bar">
|
||||
<input type="text" class="search-input" id="orgSearch" placeholder="Organisation suchen...">
|
||||
<button class="btn btn-primary" id="newOrgBtn">+ Neue Organisation</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Slug</th>
|
||||
<th>Nutzer</th>
|
||||
<th>Lizenz</th>
|
||||
<th>Status</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="orgTable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Org Detail -->
|
||||
<div class="detail-panel" id="orgDetail">
|
||||
<button class="detail-back" id="orgBackBtn">← Zurueck</button>
|
||||
<div id="orgDetailHeader"></div>
|
||||
|
||||
<div class="nav-tabs mt-16" id="orgDetailTabs">
|
||||
<button class="nav-tab active" data-subtab="users">Nutzer</button>
|
||||
<button class="nav-tab" data-subtab="org-licenses">Lizenzen</button>
|
||||
<button class="nav-tab" data-subtab="settings">Einstellungen</button>
|
||||
</div>
|
||||
|
||||
<!-- Users Sub-Tab -->
|
||||
<div class="section active" id="sub-users">
|
||||
<div class="action-bar">
|
||||
<span class="text-secondary" id="userLimitInfo"></span>
|
||||
<button class="btn btn-primary" id="newUserBtn">+ Nutzer anlegen</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>E-Mail</th>
|
||||
<th>Name</th>
|
||||
<th>Rolle</th>
|
||||
<th>Status</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="userTable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Licenses Sub-Tab -->
|
||||
<div class="section" id="sub-org-licenses">
|
||||
<div class="action-bar">
|
||||
<span></span>
|
||||
<button class="btn btn-primary" id="newLicenseBtn">+ Neue Lizenz</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Typ</th>
|
||||
<th>Max Nutzer</th>
|
||||
<th>Gueltig ab</th>
|
||||
<th>Gueltig bis</th>
|
||||
<th>Status</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="licenseTable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Sub-Tab -->
|
||||
<div class="section" id="sub-settings">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form id="orgEditForm">
|
||||
<div class="form-group">
|
||||
<label for="editOrgName">Name</label>
|
||||
<input type="text" id="editOrgName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="editOrgActive">
|
||||
<option value="true">Aktiv</option>
|
||||
<option value="false">Deaktiviert</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; margin-top: 16px;">
|
||||
<button type="submit" class="btn btn-primary">Speichern</button>
|
||||
<button type="button" class="btn btn-danger" id="deleteOrgBtn">Organisation loeschen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Licenses Section (global overview) -->
|
||||
<div class="section" id="sec-licenses">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>Bald ablaufende Lizenzen</h2>
|
||||
<select id="expiringDays" style="background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 4px 8px; font-size: 13px;">
|
||||
<option value="14">14 Tage</option>
|
||||
<option value="30" selected>30 Tage</option>
|
||||
<option value="90">90 Tage</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Organisation</th>
|
||||
<th>Typ</th>
|
||||
<th>Max Nutzer</th>
|
||||
<th>Laeuft ab</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="expiringTable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Modal: New Organization -->
|
||||
<div class="modal-overlay" id="modalNewOrg">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>Neue Organisation</h3>
|
||||
<button class="modal-close" onclick="closeModal('modalNewOrg')">×</button>
|
||||
</div>
|
||||
<form id="newOrgForm">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="newOrgName">Name</label>
|
||||
<input type="text" id="newOrgName" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newOrgSlug">Slug (URL-freundlich)</label>
|
||||
<input type="text" id="newOrgSlug" required pattern="[a-z0-9-]+" placeholder="z.B. bundespolizei">
|
||||
</div>
|
||||
<div id="newOrgError" class="error-msg" style="display:none"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeModal('modalNewOrg')">Abbrechen</button>
|
||||
<button type="submit" class="btn btn-primary">Anlegen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal: New User -->
|
||||
<div class="modal-overlay" id="modalNewUser">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>Neuen Nutzer anlegen</h3>
|
||||
<button class="modal-close" onclick="closeModal('modalNewUser')">×</button>
|
||||
</div>
|
||||
<form id="newUserForm">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="newUserEmail">E-Mail</label>
|
||||
<input type="email" id="newUserEmail" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newUserName">Anzeigename</label>
|
||||
<input type="text" id="newUserName" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newUserRole">Rolle</label>
|
||||
<select id="newUserRole">
|
||||
<option value="member">Mitglied</option>
|
||||
<option value="org_admin">Org-Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="newUserError" class="error-msg" style="display:none"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeModal('modalNewUser')">Abbrechen</button>
|
||||
<button type="submit" class="btn btn-primary">Anlegen & Einladung senden</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal: New License -->
|
||||
<div class="modal-overlay" id="modalNewLicense">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>Neue Lizenz</h3>
|
||||
<button class="modal-close" onclick="closeModal('modalNewLicense')">×</button>
|
||||
</div>
|
||||
<form id="newLicenseForm">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="newLicType">Lizenztyp</label>
|
||||
<select id="newLicType">
|
||||
<option value="trial">Trial</option>
|
||||
<option value="annual">Jahreslizenz</option>
|
||||
<option value="permanent">Permanent</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newLicMaxUsers">Maximale Nutzer</label>
|
||||
<input type="number" id="newLicMaxUsers" value="5" min="1" max="1000">
|
||||
</div>
|
||||
<div class="form-group" id="durationGroup">
|
||||
<label for="newLicDuration">Laufzeit (Tage)</label>
|
||||
<input type="number" id="newLicDuration" value="14" min="1" max="3650">
|
||||
<div class="text-muted mt-8" style="font-size: 12px;">Trial: Standard 14 Tage, Jahreslizenz: Standard 365 Tage</div>
|
||||
</div>
|
||||
<div id="newLicError" class="error-msg" style="display:none"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeModal('modalNewLicense')">Abbrechen</button>
|
||||
<button type="submit" class="btn btn-primary">Lizenz erstellen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal: Confirm -->
|
||||
<div class="modal-overlay" id="modalConfirm">
|
||||
<div class="modal" style="max-width: 400px;">
|
||||
<div class="modal-header">
|
||||
<h3 id="confirmTitle">Bestaetigung</h3>
|
||||
<button class="modal-close" onclick="closeModal('modalConfirm')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="confirm-text" id="confirmText"></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" onclick="closeModal('modalConfirm')">Abbrechen</button>
|
||||
<button class="btn btn-danger" id="confirmOkBtn">Bestaetigen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
77
src/static/index.html
Normale Datei
77
src/static/index.html
Normale Datei
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IntelSight Verwaltung - Login</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body class="login-page">
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h1>IntelSight</h1>
|
||||
<p class="subtitle">Verwaltungsportal</p>
|
||||
</div>
|
||||
|
||||
<form id="loginForm" class="login-form">
|
||||
<div class="form-group">
|
||||
<label for="username">Benutzername</label>
|
||||
<input type="text" id="username" name="username" required autocomplete="username" autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Passwort</label>
|
||||
<input type="password" id="password" name="password" required autocomplete="current-password">
|
||||
</div>
|
||||
<div id="loginError" class="error-msg" style="display:none"></div>
|
||||
<button type="submit" class="btn btn-primary btn-full" id="loginBtn">Anmelden</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('loginForm');
|
||||
const errorEl = document.getElementById('loginError');
|
||||
const btn = document.getElementById('loginBtn');
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
errorEl.style.display = 'none';
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Anmeldung...';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
username: document.getElementById('username').value,
|
||||
password: document.getElementById('password').value,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json();
|
||||
throw new Error(data.detail || 'Anmeldung fehlgeschlagen');
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
localStorage.setItem('token', data.access_token);
|
||||
localStorage.setItem('username', data.username);
|
||||
window.location.href = '/dashboard';
|
||||
} catch (err) {
|
||||
errorEl.textContent = err.message;
|
||||
errorEl.style.display = 'block';
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Anmelden';
|
||||
}
|
||||
});
|
||||
|
||||
// Redirect if already logged in
|
||||
if (localStorage.getItem('token')) {
|
||||
window.location.href = '/dashboard';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
561
src/static/js/app.js
Normale Datei
561
src/static/js/app.js
Normale Datei
@@ -0,0 +1,561 @@
|
||||
/* Verwaltungsportal - Frontend Logic */
|
||||
"use strict";
|
||||
|
||||
const API = {
|
||||
token: localStorage.getItem("token"),
|
||||
|
||||
async request(path, opts = {}) {
|
||||
const headers = { "Content-Type": "application/json" };
|
||||
if (this.token) headers["Authorization"] = `Bearer ${this.token}`;
|
||||
const res = await fetch(path, { ...opts, headers });
|
||||
if (res.status === 401) {
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("username");
|
||||
window.location.href = "/";
|
||||
return;
|
||||
}
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.detail || `Fehler ${res.status}`);
|
||||
}
|
||||
if (res.status === 204) return null;
|
||||
return res.json();
|
||||
},
|
||||
|
||||
get(path) { return this.request(path); },
|
||||
post(path, body) { return this.request(path, { method: "POST", body: JSON.stringify(body) }); },
|
||||
put(path, body) { return this.request(path, { method: "PUT", body: body ? JSON.stringify(body) : undefined }); },
|
||||
del(path) { return this.request(path, { method: "DELETE" }); },
|
||||
};
|
||||
|
||||
// --- State ---
|
||||
let currentOrgId = null;
|
||||
let orgsCache = [];
|
||||
|
||||
// --- Init ---
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
if (!API.token) { window.location.href = "/"; return; }
|
||||
|
||||
document.getElementById("headerUser").textContent = localStorage.getItem("username") || "";
|
||||
document.getElementById("logoutBtn").addEventListener("click", logout);
|
||||
|
||||
setupNavTabs();
|
||||
setupOrgDetailTabs();
|
||||
setupForms();
|
||||
loadDashboard();
|
||||
loadOrgs();
|
||||
});
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("username");
|
||||
window.location.href = "/";
|
||||
}
|
||||
|
||||
// --- Navigation ---
|
||||
function setupNavTabs() {
|
||||
document.querySelectorAll(".nav-tabs:not(#orgDetailTabs) .nav-tab").forEach(tab => {
|
||||
tab.addEventListener("click", () => {
|
||||
const section = tab.dataset.section;
|
||||
document.querySelectorAll(".nav-tabs:not(#orgDetailTabs) .nav-tab").forEach(t => t.classList.remove("active"));
|
||||
tab.classList.add("active");
|
||||
document.querySelectorAll(".app-content > .section").forEach(s => s.classList.remove("active"));
|
||||
document.getElementById(`sec-${section}`).classList.add("active");
|
||||
|
||||
if (section === "licenses") loadExpiringLicenses();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupOrgDetailTabs() {
|
||||
document.querySelectorAll("#orgDetailTabs .nav-tab").forEach(tab => {
|
||||
tab.addEventListener("click", () => {
|
||||
const subtab = tab.dataset.subtab;
|
||||
document.querySelectorAll("#orgDetailTabs .nav-tab").forEach(t => t.classList.remove("active"));
|
||||
tab.classList.add("active");
|
||||
document.querySelectorAll("#orgDetail > .section").forEach(s => s.classList.remove("active"));
|
||||
document.getElementById(`sub-${subtab}`).classList.add("active");
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("orgBackBtn").addEventListener("click", () => {
|
||||
document.getElementById("orgListView").style.display = "";
|
||||
document.getElementById("orgDetail").classList.remove("active");
|
||||
currentOrgId = null;
|
||||
});
|
||||
}
|
||||
|
||||
// --- Dashboard ---
|
||||
async function loadDashboard() {
|
||||
try {
|
||||
const stats = await API.get("/api/dashboard/stats");
|
||||
|
||||
document.getElementById("statsGrid").innerHTML = `
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Organisationen</div>
|
||||
<div class="stat-value">${stats.organizations.total}</div>
|
||||
<div class="stat-sub">${stats.organizations.active} aktiv</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Nutzer</div>
|
||||
<div class="stat-value">${stats.users.total}</div>
|
||||
<div class="stat-sub">${stats.users.active} aktiv</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Aktive Lizenzen</div>
|
||||
<div class="stat-value">${stats.licenses.active}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Vorfaelle</div>
|
||||
<div class="stat-value">${stats.incidents.total}</div>
|
||||
<div class="stat-sub">${stats.incidents.active} aktiv</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Expiring licenses
|
||||
const expList = document.getElementById("expiringList");
|
||||
if (stats.expiring_licenses.length === 0) {
|
||||
expList.innerHTML = '<li class="text-muted" style="padding: 8px 0;">Keine ablaufenden Lizenzen</li>';
|
||||
} else {
|
||||
expList.innerHTML = stats.expiring_licenses.map(l => `
|
||||
<li class="expiring-item">
|
||||
<span>${esc(l.org_name)} <span class="badge badge-${l.license_type}">${l.license_type}</span></span>
|
||||
<span class="expiring-date">${formatDate(l.valid_until)}</span>
|
||||
</li>
|
||||
`).join("");
|
||||
}
|
||||
|
||||
// Recent activity
|
||||
const actEl = document.getElementById("recentActivity");
|
||||
if (stats.recent_activity.length === 0) {
|
||||
actEl.innerHTML = '<div class="text-muted">Keine Aktivitaet</div>';
|
||||
} else {
|
||||
actEl.innerHTML = stats.recent_activity.map(a => `
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon ${a.type}">${a.type === "org" ? "O" : "U"}</div>
|
||||
<div>
|
||||
<div>${esc(a.label)}</div>
|
||||
<div class="text-muted" style="font-size: 12px;">${formatDate(a.created_at)}</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join("");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Dashboard laden fehlgeschlagen:", err);
|
||||
}
|
||||
}
|
||||
|
||||
// --- Organizations ---
|
||||
async function loadOrgs() {
|
||||
try {
|
||||
orgsCache = await API.get("/api/orgs");
|
||||
renderOrgTable(orgsCache);
|
||||
} catch (err) {
|
||||
console.error("Orgs laden fehlgeschlagen:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function renderOrgTable(orgs) {
|
||||
const tbody = document.getElementById("orgTable");
|
||||
if (orgs.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="text-muted">Keine Organisationen</td></tr>';
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = orgs.map(o => `
|
||||
<tr>
|
||||
<td><a href="#" class="text-accent" style="text-decoration: none;" onclick="openOrg(${o.id}); return false;">${esc(o.name)}</a></td>
|
||||
<td class="text-secondary">${esc(o.slug)}</td>
|
||||
<td>${o.user_count}</td>
|
||||
<td><span class="badge badge-${o.license_type || 'none'}">${o.license_type || "Keine"}</span></td>
|
||||
<td><span class="badge badge-${o.is_active ? 'active' : 'inactive'}">${o.is_active ? "Aktiv" : "Inaktiv"}</span></td>
|
||||
<td>
|
||||
<button class="btn btn-secondary btn-small" onclick="openOrg(${o.id})">Details</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
}
|
||||
|
||||
// Search filter
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const searchEl = document.getElementById("orgSearch");
|
||||
if (searchEl) {
|
||||
searchEl.addEventListener("input", () => {
|
||||
const q = searchEl.value.toLowerCase();
|
||||
const filtered = orgsCache.filter(o =>
|
||||
o.name.toLowerCase().includes(q) || o.slug.toLowerCase().includes(q)
|
||||
);
|
||||
renderOrgTable(filtered);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// --- Open Org Detail ---
|
||||
async function openOrg(orgId) {
|
||||
currentOrgId = orgId;
|
||||
document.getElementById("orgListView").style.display = "none";
|
||||
document.getElementById("orgDetail").classList.add("active");
|
||||
|
||||
// Reset to users tab
|
||||
document.querySelectorAll("#orgDetailTabs .nav-tab").forEach(t => t.classList.remove("active"));
|
||||
document.querySelector('#orgDetailTabs .nav-tab[data-subtab="users"]').classList.add("active");
|
||||
document.querySelectorAll("#orgDetail > .section").forEach(s => s.classList.remove("active"));
|
||||
document.getElementById("sub-users").classList.add("active");
|
||||
|
||||
try {
|
||||
const org = await API.get(`/api/orgs/${orgId}`);
|
||||
document.getElementById("orgDetailHeader").innerHTML = `
|
||||
<h2>${esc(org.name)} <span class="badge badge-${org.is_active ? 'active' : 'inactive'}" style="font-size: 12px; vertical-align: middle;">${org.is_active ? "Aktiv" : "Inaktiv"}</span></h2>
|
||||
<div class="text-secondary mt-8">Slug: ${esc(org.slug)} | Nutzer: ${org.user_count} | Lizenz: ${org.license_type || "Keine"}</div>
|
||||
`;
|
||||
|
||||
document.getElementById("editOrgName").value = org.name;
|
||||
document.getElementById("editOrgActive").value = org.is_active ? "true" : "false";
|
||||
|
||||
loadOrgUsers(orgId);
|
||||
loadOrgLicenses(orgId);
|
||||
} catch (err) {
|
||||
console.error("Org laden fehlgeschlagen:", err);
|
||||
}
|
||||
}
|
||||
|
||||
// --- Org Users ---
|
||||
async function loadOrgUsers(orgId) {
|
||||
try {
|
||||
const users = await API.get(`/api/users?org_id=${orgId}`);
|
||||
const licenses = await API.get(`/api/licenses?org_id=${orgId}`);
|
||||
const activeLic = licenses.find(l => l.status === "active");
|
||||
const activeUsers = users.filter(u => u.is_active).length;
|
||||
|
||||
document.getElementById("userLimitInfo").textContent = activeLic
|
||||
? `${activeUsers} / ${activeLic.max_users} Nutzer`
|
||||
: "Keine aktive Lizenz";
|
||||
|
||||
const tbody = document.getElementById("userTable");
|
||||
if (users.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="text-muted">Keine Nutzer</td></tr>';
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = users.map(u => `
|
||||
<tr>
|
||||
<td>${esc(u.email)}</td>
|
||||
<td>${esc(u.username)}</td>
|
||||
<td>
|
||||
<select class="btn btn-secondary btn-small" onchange="changeRole(${u.id}, this.value)" style="padding: 4px 8px;">
|
||||
<option value="member" ${u.role === "member" ? "selected" : ""}>Mitglied</option>
|
||||
<option value="org_admin" ${u.role === "org_admin" ? "selected" : ""}>Org-Admin</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><span class="badge badge-${u.is_active ? 'active' : 'inactive'}">${u.is_active ? "Aktiv" : "Inaktiv"}</span></td>
|
||||
<td>
|
||||
${u.is_active
|
||||
? `<button class="btn btn-secondary btn-small" onclick="toggleUser(${u.id}, false)">Deaktivieren</button>`
|
||||
: `<button class="btn btn-success btn-small" onclick="toggleUser(${u.id}, true)">Aktivieren</button>`
|
||||
}
|
||||
<button class="btn btn-danger btn-small" onclick="confirmDeleteUser(${u.id}, '${esc(u.email)}')">Loeschen</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
} catch (err) {
|
||||
console.error("Nutzer laden fehlgeschlagen:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function changeRole(userId, role) {
|
||||
try {
|
||||
await API.put(`/api/users/${userId}/role?role=${role}`);
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
if (currentOrgId) loadOrgUsers(currentOrgId);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleUser(userId, activate) {
|
||||
try {
|
||||
await API.put(`/api/users/${userId}/${activate ? "activate" : "deactivate"}`);
|
||||
if (currentOrgId) loadOrgUsers(currentOrgId);
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDeleteUser(userId, email) {
|
||||
showConfirm(
|
||||
"Nutzer loeschen",
|
||||
`Soll der Nutzer "${email}" endgueltig geloescht werden?`,
|
||||
async () => {
|
||||
try {
|
||||
await API.del(`/api/users/${userId}`);
|
||||
if (currentOrgId) loadOrgUsers(currentOrgId);
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// --- Org Licenses ---
|
||||
async function loadOrgLicenses(orgId) {
|
||||
try {
|
||||
const licenses = await API.get(`/api/licenses?org_id=${orgId}`);
|
||||
const tbody = document.getElementById("licenseTable");
|
||||
if (licenses.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="text-muted">Keine Lizenzen</td></tr>';
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = licenses.map(l => `
|
||||
<tr>
|
||||
<td><span class="badge badge-${l.license_type}">${l.license_type}</span></td>
|
||||
<td>${l.max_users}</td>
|
||||
<td>${formatDate(l.valid_from)}</td>
|
||||
<td>${l.valid_until ? formatDate(l.valid_until) : "Unbegrenzt"}</td>
|
||||
<td><span class="badge badge-${l.status}">${l.status}</span></td>
|
||||
<td>
|
||||
${l.status === "active" ? `
|
||||
<button class="btn btn-secondary btn-small" onclick="extendLicense(${l.id})">Verlaengern</button>
|
||||
<button class="btn btn-danger btn-small" onclick="confirmRevokeLicense(${l.id})">Widerrufen</button>
|
||||
` : ""}
|
||||
</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
} catch (err) {
|
||||
console.error("Lizenzen laden fehlgeschlagen:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function extendLicense(licId) {
|
||||
const days = prompt("Um wie viele Tage verlaengern?", "365");
|
||||
if (!days) return;
|
||||
try {
|
||||
await API.put(`/api/licenses/${licId}/extend?days=${parseInt(days)}`);
|
||||
if (currentOrgId) loadOrgLicenses(currentOrgId);
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function confirmRevokeLicense(licId) {
|
||||
showConfirm(
|
||||
"Lizenz widerrufen",
|
||||
"Soll die Lizenz wirklich widerrufen werden? Nutzer koennen dann nur noch lesen.",
|
||||
async () => {
|
||||
try {
|
||||
await API.put(`/api/licenses/${licId}/revoke`);
|
||||
if (currentOrgId) loadOrgLicenses(currentOrgId);
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// --- Expiring Licenses (global view) ---
|
||||
async function loadExpiringLicenses() {
|
||||
const days = document.getElementById("expiringDays").value;
|
||||
try {
|
||||
const licenses = await API.get(`/api/licenses/expiring?days=${days}`);
|
||||
const tbody = document.getElementById("expiringTable");
|
||||
if (licenses.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="5" class="text-muted">Keine ablaufenden Lizenzen in den naechsten ${days} Tagen</td></tr>`;
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = licenses.map(l => `
|
||||
<tr>
|
||||
<td><a href="#" class="text-accent" style="text-decoration: none;" onclick="switchToOrg(${l.organization_id}); return false;">${esc(l.org_name)}</a></td>
|
||||
<td><span class="badge badge-${l.license_type}">${l.license_type}</span></td>
|
||||
<td>${l.max_users}</td>
|
||||
<td class="text-warning">${formatDate(l.valid_until)}</td>
|
||||
<td>
|
||||
<button class="btn btn-secondary btn-small" onclick="extendLicense(${l.id})">Verlaengern</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
} catch (err) {
|
||||
console.error("Ablaufende Lizenzen laden fehlgeschlagen:", err);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const sel = document.getElementById("expiringDays");
|
||||
if (sel) sel.addEventListener("change", loadExpiringLicenses);
|
||||
});
|
||||
|
||||
function switchToOrg(orgId) {
|
||||
// Switch to orgs tab and open detail
|
||||
document.querySelectorAll(".nav-tabs:not(#orgDetailTabs) .nav-tab").forEach(t => t.classList.remove("active"));
|
||||
document.querySelector('.nav-tab[data-section="orgs"]').classList.add("active");
|
||||
document.querySelectorAll(".app-content > .section").forEach(s => s.classList.remove("active"));
|
||||
document.getElementById("sec-orgs").classList.add("active");
|
||||
openOrg(orgId);
|
||||
}
|
||||
|
||||
// --- Forms ---
|
||||
function setupForms() {
|
||||
// New Org
|
||||
document.getElementById("newOrgBtn").addEventListener("click", () => openModal("modalNewOrg"));
|
||||
document.getElementById("newOrgForm").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const errEl = document.getElementById("newOrgError");
|
||||
errEl.style.display = "none";
|
||||
try {
|
||||
await API.post("/api/orgs", {
|
||||
name: document.getElementById("newOrgName").value,
|
||||
slug: document.getElementById("newOrgSlug").value,
|
||||
});
|
||||
closeModal("modalNewOrg");
|
||||
document.getElementById("newOrgForm").reset();
|
||||
loadOrgs();
|
||||
loadDashboard();
|
||||
} catch (err) {
|
||||
errEl.textContent = err.message;
|
||||
errEl.style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-generate slug from name
|
||||
document.getElementById("newOrgName").addEventListener("input", (e) => {
|
||||
const slug = e.target.value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
|
||||
document.getElementById("newOrgSlug").value = slug;
|
||||
});
|
||||
|
||||
// New User
|
||||
document.getElementById("newUserBtn").addEventListener("click", () => openModal("modalNewUser"));
|
||||
document.getElementById("newUserForm").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const errEl = document.getElementById("newUserError");
|
||||
errEl.style.display = "none";
|
||||
try {
|
||||
await API.post(`/api/users?org_id=${currentOrgId}`, {
|
||||
email: document.getElementById("newUserEmail").value,
|
||||
username: document.getElementById("newUserName").value,
|
||||
role: document.getElementById("newUserRole").value,
|
||||
});
|
||||
closeModal("modalNewUser");
|
||||
document.getElementById("newUserForm").reset();
|
||||
loadOrgUsers(currentOrgId);
|
||||
} catch (err) {
|
||||
errEl.textContent = err.message;
|
||||
errEl.style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
// New License
|
||||
document.getElementById("newLicenseBtn").addEventListener("click", () => {
|
||||
document.getElementById("newLicenseForm").reset();
|
||||
openModal("modalNewLicense");
|
||||
});
|
||||
|
||||
document.getElementById("newLicType").addEventListener("change", (e) => {
|
||||
const durationGroup = document.getElementById("durationGroup");
|
||||
if (e.target.value === "permanent") {
|
||||
durationGroup.style.display = "none";
|
||||
} else {
|
||||
durationGroup.style.display = "";
|
||||
document.getElementById("newLicDuration").value = e.target.value === "trial" ? "14" : "365";
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("newLicenseForm").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const errEl = document.getElementById("newLicError");
|
||||
errEl.style.display = "none";
|
||||
const licType = document.getElementById("newLicType").value;
|
||||
const body = {
|
||||
organization_id: currentOrgId,
|
||||
license_type: licType,
|
||||
max_users: parseInt(document.getElementById("newLicMaxUsers").value),
|
||||
};
|
||||
if (licType !== "permanent") {
|
||||
body.duration_days = parseInt(document.getElementById("newLicDuration").value);
|
||||
}
|
||||
try {
|
||||
await API.post("/api/licenses", body);
|
||||
closeModal("modalNewLicense");
|
||||
loadOrgLicenses(currentOrgId);
|
||||
loadDashboard();
|
||||
} catch (err) {
|
||||
errEl.textContent = err.message;
|
||||
errEl.style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
// Org Edit
|
||||
document.getElementById("orgEditForm").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await API.put(`/api/orgs/${currentOrgId}`, {
|
||||
name: document.getElementById("editOrgName").value,
|
||||
is_active: document.getElementById("editOrgActive").value === "true",
|
||||
});
|
||||
openOrg(currentOrgId);
|
||||
loadOrgs();
|
||||
loadDashboard();
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
});
|
||||
|
||||
// Delete Org
|
||||
document.getElementById("deleteOrgBtn").addEventListener("click", () => {
|
||||
showConfirm(
|
||||
"Organisation loeschen",
|
||||
"Soll die Organisation mit allen Nutzern und Lizenzen endgueltig geloescht werden? Diese Aktion kann nicht rueckgaengig gemacht werden.",
|
||||
async () => {
|
||||
try {
|
||||
await API.del(`/api/orgs/${currentOrgId}`);
|
||||
document.getElementById("orgListView").style.display = "";
|
||||
document.getElementById("orgDetail").classList.remove("active");
|
||||
currentOrgId = null;
|
||||
loadOrgs();
|
||||
loadDashboard();
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// --- Modal helpers ---
|
||||
function openModal(id) {
|
||||
document.getElementById(id).classList.add("active");
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
document.getElementById(id).classList.remove("active");
|
||||
}
|
||||
|
||||
// Confirm dialog
|
||||
let confirmCallback = null;
|
||||
|
||||
function showConfirm(title, text, callback) {
|
||||
document.getElementById("confirmTitle").textContent = title;
|
||||
document.getElementById("confirmText").textContent = text;
|
||||
confirmCallback = callback;
|
||||
openModal("modalConfirm");
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.getElementById("confirmOkBtn").addEventListener("click", async () => {
|
||||
closeModal("modalConfirm");
|
||||
if (confirmCallback) await confirmCallback();
|
||||
confirmCallback = null;
|
||||
});
|
||||
});
|
||||
|
||||
// --- Utilities ---
|
||||
function esc(str) {
|
||||
if (!str) return "";
|
||||
const div = document.createElement("div");
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function formatDate(iso) {
|
||||
if (!iso) return "-";
|
||||
try {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });
|
||||
} catch {
|
||||
return iso;
|
||||
}
|
||||
}
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren