264 lines
13 KiB
Plaintext
264 lines
13 KiB
Plaintext
package pages
|
|
|
|
import (
|
|
"git.ma-al.com/goc_marek/zfs/internal/server/templates/components"
|
|
)
|
|
|
|
// AdminPage renders the main admin panel
|
|
templ AdminPage(username string) {
|
|
@components.Layout("ZFS Backup Admin Panel", username) {
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
@components.Header(username)
|
|
|
|
<!-- Stats Grid -->
|
|
<div id="stats-grid" class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
@components.StatsCard("Clients", "Loading...")
|
|
@components.StatsCard("Total Snapshots", "Loading...")
|
|
@components.StatsCard("Total Storage", "Loading...")
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="flex gap-3 mb-8 flex-wrap">
|
|
@components.TabButton("clients", "Clients", true)
|
|
@components.TabButton("snapshots", "Snapshots", false)
|
|
@components.TabButton("admins", "Admins", false)
|
|
</div>
|
|
|
|
<!-- Clients Tab -->
|
|
<div id="clients-tab" class="animate-fade-in">
|
|
<div class="bg-white dark:bg-slate-900/80 backdrop-blur-xl rounded-2xl border border-slate-200 dark:border-slate-700/50 overflow-hidden shadow-sm dark:shadow-none transition-colors duration-300">
|
|
<div class="p-6 border-b border-slate-200 dark:border-slate-700/50 flex justify-between items-center">
|
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-violet-100 dark:bg-violet-500/20 flex items-center justify-center">
|
|
<i class="fas fa-users text-violet-600 dark:text-violet-400"></i>
|
|
</div>
|
|
Clients
|
|
</h3>
|
|
<button
|
|
class="px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-400 hover:to-green-500 text-white rounded-xl transition-all duration-300 flex items-center gap-2 shadow-lg shadow-emerald-500/25"
|
|
data-action="show-modal"
|
|
data-modal="add-client-modal"
|
|
>
|
|
<i class="fas fa-plus"></i>
|
|
Add Client
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b border-slate-200 dark:border-slate-700/50">
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Client ID</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Storage Type</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Quota</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Used</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Snapshots</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Status</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="clients-table"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Snapshots Tab -->
|
|
<div id="snapshots-tab" class="hidden animate-fade-in">
|
|
<div class="bg-white dark:bg-slate-900/80 backdrop-blur-xl rounded-2xl border border-slate-200 dark:border-slate-700/50 overflow-hidden shadow-sm dark:shadow-none transition-colors duration-300">
|
|
<div class="p-6 border-b border-slate-200 dark:border-slate-700/50 flex justify-between items-center">
|
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-violet-100 dark:bg-violet-500/20 flex items-center justify-center">
|
|
<i class="fas fa-images text-violet-600 dark:text-violet-400"></i>
|
|
</div>
|
|
Snapshots
|
|
</h3>
|
|
<select id="snapshot-client-filter" class="px-4 py-2.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-xl text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition-all duration-200 cursor-pointer">
|
|
<option value="">All Clients</option>
|
|
</select>
|
|
</div>
|
|
<div class="p-6 overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b border-slate-200 dark:border-slate-700/50">
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Client</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Snapshot ID</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Timestamp</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Size</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Type</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="snapshots-table"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admins Tab -->
|
|
<div id="admins-tab" class="hidden animate-fade-in">
|
|
<div class="bg-white dark:bg-slate-900/80 backdrop-blur-xl rounded-2xl border border-slate-200 dark:border-slate-700/50 overflow-hidden shadow-sm dark:shadow-none transition-colors duration-300">
|
|
<div class="p-6 border-b border-slate-200 dark:border-slate-700/50 flex justify-between items-center">
|
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-violet-100 dark:bg-violet-500/20 flex items-center justify-center">
|
|
<i class="fas fa-user-shield text-violet-600 dark:text-violet-400"></i>
|
|
</div>
|
|
Admin Users
|
|
</h3>
|
|
<button
|
|
class="px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-400 hover:to-green-500 text-white rounded-xl transition-all duration-300 flex items-center gap-2 shadow-lg shadow-emerald-500/25"
|
|
data-action="show-modal"
|
|
data-modal="add-admin-modal"
|
|
>
|
|
<i class="fas fa-plus"></i>
|
|
Add Admin
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b border-slate-200 dark:border-slate-700/50">
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">ID</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Username</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Role</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Created</th>
|
|
<th class="text-left py-4 px-4 text-slate-500 dark:text-slate-400 font-medium text-sm">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="admins-table"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
@AddClientModal()
|
|
@EditClientModal()
|
|
@AddAdminModal()
|
|
@ChangePasswordModal()
|
|
@ClientPasswordModal()
|
|
|
|
@AdminScripts()
|
|
}
|
|
}
|
|
|
|
// AddClientModal renders the add client modal
|
|
templ AddClientModal() {
|
|
@components.Modal("add-client-modal", "Add New Client") {
|
|
<form id="add-client-form">
|
|
@components.FormInput("new-client-id", "Client ID", "text", "", true)
|
|
@components.FormInput("new-client-apikey", "API Key", "text", "", true)
|
|
@components.FormSelect("new-client-storage", "Storage Type", []components.SelectOption{
|
|
{Value: "s3", Label: "S3", Selected: true},
|
|
{Value: "local", Label: "Local ZFS", Selected: false},
|
|
})
|
|
@components.FormInput("new-client-dataset", "Target Dataset (for local storage)", "text", "backup/client1", false)
|
|
@components.FormInput("new-client-quota", "Quota (GB)", "number", "100", true)
|
|
@components.FormCheckbox("new-client-enabled", "Enabled", true)
|
|
|
|
<h4 class="text-slate-500 dark:text-slate-400 text-sm mt-6 mb-4 flex items-center gap-2 font-medium">
|
|
<i class="fas fa-clock-rotate-left text-violet-500 dark:text-violet-400"></i>
|
|
Rotation Policy
|
|
</h4>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
@components.FormInput("new-client-hourly", "Keep Hourly", "number", "24", false)
|
|
@components.FormInput("new-client-daily", "Keep Daily", "number", "7", false)
|
|
@components.FormInput("new-client-weekly", "Keep Weekly", "number", "4", false)
|
|
@components.FormInput("new-client-monthly", "Keep Monthly", "number", "12", false)
|
|
</div>
|
|
|
|
<button type="submit" class="w-full mt-6 px-4 py-3.5 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-400 hover:to-green-500 text-white rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-emerald-500/25 font-medium">
|
|
<i class="fas fa-plus"></i>
|
|
Create Client
|
|
</button>
|
|
</form>
|
|
}
|
|
}
|
|
|
|
// EditClientModal renders the edit client modal
|
|
templ EditClientModal() {
|
|
@components.Modal("edit-client-modal", "Edit Client") {
|
|
<form id="edit-client-form">
|
|
<input type="hidden" id="edit-client-id"/>
|
|
@components.FormInput("edit-client-apikey", "New API Key (leave empty to keep current)", "text", "Leave empty to keep current", false)
|
|
@components.FormSelect("edit-client-storage", "Storage Type", []components.SelectOption{
|
|
{Value: "s3", Label: "S3", Selected: true},
|
|
{Value: "local", Label: "Local ZFS", Selected: false},
|
|
})
|
|
@components.FormInput("edit-client-dataset", "Target Dataset", "text", "", false)
|
|
@components.FormInput("edit-client-quota", "Quota (GB)", "number", "", true)
|
|
@components.FormCheckbox("edit-client-enabled", "Enabled", false)
|
|
|
|
<h4 class="text-slate-500 dark:text-slate-400 text-sm mt-6 mb-4 flex items-center gap-2 font-medium">
|
|
<i class="fas fa-clock-rotate-left text-violet-500 dark:text-violet-400"></i>
|
|
Rotation Policy
|
|
</h4>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
@components.FormInput("edit-client-hourly", "Keep Hourly", "number", "", false)
|
|
@components.FormInput("edit-client-daily", "Keep Daily", "number", "", false)
|
|
@components.FormInput("edit-client-weekly", "Keep Weekly", "number", "", false)
|
|
@components.FormInput("edit-client-monthly", "Keep Monthly", "number", "", false)
|
|
</div>
|
|
|
|
<button type="submit" class="w-full mt-6 px-4 py-3.5 bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-violet-500/25 font-medium">
|
|
<i class="fas fa-save"></i>
|
|
Update Client
|
|
</button>
|
|
</form>
|
|
}
|
|
}
|
|
|
|
// AddAdminModal renders the add admin modal
|
|
templ AddAdminModal() {
|
|
@components.Modal("add-admin-modal", "Add New Admin") {
|
|
<form id="add-admin-form">
|
|
@components.FormInput("new-admin-username", "Username", "text", "", true)
|
|
@components.FormInput("new-admin-password", "Password", "password", "", true)
|
|
@components.FormSelect("new-admin-role", "Role", []components.SelectOption{
|
|
{Value: "admin", Label: "Admin", Selected: true},
|
|
})
|
|
<button type="submit" class="w-full mt-6 px-4 py-3.5 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-400 hover:to-green-500 text-white rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-emerald-500/25 font-medium">
|
|
<i class="fas fa-plus"></i>
|
|
Create Admin
|
|
</button>
|
|
</form>
|
|
}
|
|
}
|
|
|
|
// ChangePasswordModal renders the change password modal for admins
|
|
templ ChangePasswordModal() {
|
|
@components.Modal("change-password-modal", "Change Password") {
|
|
<form id="change-password-form">
|
|
<input type="hidden" id="change-password-admin-id"/>
|
|
@components.FormInput("change-password-username", "Admin Username", "text", "", true)
|
|
@components.FormInput("change-password-new", "New Password", "password", "", true)
|
|
@components.FormInput("change-password-confirm", "Confirm New Password", "password", "", true)
|
|
<button type="submit" class="w-full mt-6 px-4 py-3.5 bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-violet-500/25 font-medium">
|
|
<i class="fas fa-key"></i>
|
|
Change Password
|
|
</button>
|
|
</form>
|
|
}
|
|
}
|
|
|
|
// ClientPasswordModal renders the set client API key modal
|
|
templ ClientPasswordModal() {
|
|
@components.Modal("client-password-modal", "Set Client API Key") {
|
|
<form id="client-password-form">
|
|
<input type="hidden" id="client-password-client-id"/>
|
|
@components.FormInput("client-password-client-name", "Client ID", "text", "", true)
|
|
@components.FormInput("client-password-new", "New API Key", "text", "", true)
|
|
@components.FormInput("client-password-confirm", "Confirm API Key", "text", "", true)
|
|
<button type="submit" class="w-full mt-6 px-4 py-3.5 bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-violet-500/25 font-medium">
|
|
<i class="fas fa-key"></i>
|
|
Set API Key
|
|
</button>
|
|
</form>
|
|
}
|
|
}
|
|
|
|
// AdminScripts renders the JavaScript for the admin panel
|
|
templ AdminScripts() {
|
|
<script src="/admin/static/admin.js"></script>
|
|
}
|