fix(admin): fix invisible modals and add missing button icons
- Add hidden class to quota, create-user, and reset-password modal divs - Override opacity:0 from modals.css with opacity:1 in admin.css - Add crown and ban SVG icons to icon registry for toggle-role and deactivate buttons
This commit is contained in:
Jared Wolff
+426
-81
@@ -1,24 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>OxiCloud — Admin Panel</title>
|
||||
<script src="/js/core/theme-init.js"></script>
|
||||
<script>
|
||||
if (localStorage.getItem("oxicloud_theme") === "dark")
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
</script>
|
||||
<script src="/js/core/icons.js" defer></script>
|
||||
<script src="/js/core/formatters.js" defer></script>
|
||||
<script src="/js/core/csrf.js" defer></script>
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/views/admin.css">
|
||||
<link rel="stylesheet" href="/css/main.css" />
|
||||
<link rel="stylesheet" href="/css/views/admin.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="admin-header">
|
||||
<div class="admin-header-left">
|
||||
<a href="/" class="admin-logo-link link-reset-flex">
|
||||
<div class="admin-logo">
|
||||
<svg viewBox="0 0 500 500">
|
||||
<path d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z"/>
|
||||
<path
|
||||
d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="admin-title-text">OxiCloud</span>
|
||||
@@ -26,7 +30,9 @@
|
||||
<span class="admin-title-separator">· Admin</span>
|
||||
</div>
|
||||
<div class="admin-header-right">
|
||||
<a href="/"><i class="fas fa-arrow-left"></i> Back to OxiCloud</a>
|
||||
<a href="/"
|
||||
><i class="fas fa-arrow-left"></i> Back to OxiCloud</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -41,31 +47,106 @@
|
||||
|
||||
<div id="main-content">
|
||||
<div class="admin-tabs">
|
||||
<button class="admin-tab active" id="tab-btn-dashboard"><i class="fas fa-chart-pie"></i> Dashboard</button>
|
||||
<button class="admin-tab" id="tab-btn-users"><i class="fas fa-users"></i> Users</button>
|
||||
<button class="admin-tab" id="tab-btn-oidc"><i class="fas fa-key"></i> SSO / OIDC</button>
|
||||
<button
|
||||
class="admin-tab active"
|
||||
onclick="switchTab('dashboard',this)"
|
||||
>
|
||||
<i class="fas fa-chart-pie"></i> Dashboard
|
||||
</button>
|
||||
<button class="admin-tab" onclick="switchTab('users',this)">
|
||||
<i class="fas fa-users"></i> Users
|
||||
</button>
|
||||
<button class="admin-tab" onclick="switchTab('oidc',this)">
|
||||
<i class="fas fa-key"></i> SSO / OIDC
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="tab-dashboard" class="tab-content active">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card"><div class="stat-value text-blue" id="ds-total-users">—</div><div class="stat-label">Total Users</div></div>
|
||||
<div class="stat-card"><div class="stat-value text-green" id="ds-active-users">—</div><div class="stat-label">Active Users</div></div>
|
||||
<div class="stat-card"><div class="stat-value text-blue" id="ds-admin-users">—</div><div class="stat-label">Admins</div></div>
|
||||
<div class="stat-card"><div class="stat-value" id="ds-version">—</div><div class="stat-label">Version</div></div>
|
||||
<div class="stat-card">
|
||||
<div
|
||||
class="stat-value text-blue"
|
||||
id="ds-total-users"
|
||||
>
|
||||
—
|
||||
</div>
|
||||
<div class="stat-label">Total Users</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div
|
||||
class="stat-value text-green"
|
||||
id="ds-active-users"
|
||||
>
|
||||
—
|
||||
</div>
|
||||
<div class="stat-label">Active Users</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div
|
||||
class="stat-value text-blue"
|
||||
id="ds-admin-users"
|
||||
>
|
||||
—
|
||||
</div>
|
||||
<div class="stat-label">Admins</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="ds-version">—</div>
|
||||
<div class="stat-label">Version</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-card">
|
||||
<h2><i class="fas fa-hdd"></i> Storage Overview</h2>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card"><div class="stat-value" id="ds-used">—</div><div class="stat-label">Used</div></div>
|
||||
<div class="stat-card"><div class="stat-value" id="ds-quota">—</div><div class="stat-label">Total Quota</div></div>
|
||||
<div class="stat-card"><div class="stat-value" id="ds-usage-pct">—</div><div class="stat-label">Usage %</div></div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="ds-used">—</div>
|
||||
<div class="stat-label">Used</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="ds-quota">—</div>
|
||||
<div class="stat-label">Total Quota</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="ds-usage-pct">
|
||||
—
|
||||
</div>
|
||||
<div class="stat-label">Usage %</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="progress-fill green width-zero"
|
||||
id="ds-bar"
|
||||
></div>
|
||||
</div>
|
||||
<div class="progress-bar"><div class="progress-fill green width-zero" id="ds-bar"></div></div>
|
||||
<div class="mt-14">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card warn" id="ds-warn-card"><div class="stat-value text-orange" id="ds-over80">0</div><div class="stat-label">Users >80% quota</div></div>
|
||||
<div class="stat-card danger" id="ds-danger-card"><div class="stat-value text-red" id="ds-overquota">0</div><div class="stat-label">Users over quota</div></div>
|
||||
<div class="stat-card warn" id="ds-warn-card">
|
||||
<div
|
||||
class="stat-value text-orange"
|
||||
id="ds-over80"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
Users >80% quota
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="stat-card danger"
|
||||
id="ds-danger-card"
|
||||
>
|
||||
<div
|
||||
class="stat-value text-red"
|
||||
id="ds-overquota"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
Users over quota
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,21 +154,59 @@
|
||||
<div class="admin-card">
|
||||
<h2><i class="fas fa-server"></i> System</h2>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card"><div class="stat-value" id="ds-auth">—</div><div class="stat-label">Auth</div></div>
|
||||
<div class="stat-card"><div class="stat-value" id="ds-oidc">—</div><div class="stat-label">OIDC</div></div>
|
||||
<div class="stat-card"><div class="stat-value" id="ds-quotas-flag">—</div><div class="stat-label">Quotas</div></div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="ds-auth">—</div>
|
||||
<div class="stat-label">Auth</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="ds-oidc">—</div>
|
||||
<div class="stat-label">OIDC</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="ds-quotas-flag">
|
||||
—
|
||||
</div>
|
||||
<div class="stat-label">Quotas</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-row toggle-row-strong">
|
||||
<label><i class="fas fa-user-plus icon-muted-right"></i> Allow public self-registration</label>
|
||||
<label class="switch"><input type="checkbox" id="ds-registration" checked><span class="slider"></span></label>
|
||||
<label
|
||||
><i
|
||||
class="fas fa-user-plus icon-muted-right"
|
||||
></i>
|
||||
Allow public self-registration</label
|
||||
>
|
||||
<label class="switch"
|
||||
><input
|
||||
type="checkbox"
|
||||
id="ds-registration"
|
||||
checked
|
||||
onchange="toggleRegistration(this.checked)" /><span
|
||||
class="slider"
|
||||
></span
|
||||
></label>
|
||||
</div>
|
||||
<div class="warning" id="registration-warning">
|
||||
<i class="fas fa-exclamation-triangle"></i> Public
|
||||
registration is disabled. Only admins can create new
|
||||
users.
|
||||
</div>
|
||||
<div class="warning" id="registration-warning"><i class="fas fa-exclamation-triangle"></i> Public registration is disabled. Only admins can create new users.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tab-users" class="tab-content">
|
||||
<div class="admin-card">
|
||||
<h2 class="h2-space-between"><span><i class="fas fa-users-cog"></i> User Management</span><button class="btn btn-primary" id="btn-create-user"><i class="fas fa-user-plus"></i> Create User</button></h2>
|
||||
<h2 class="h2-space-between">
|
||||
<span
|
||||
><i class="fas fa-users-cog"></i> User
|
||||
Management</span
|
||||
><button
|
||||
class="btn btn-primary"
|
||||
onclick="openCreateUserModal()"
|
||||
>
|
||||
<i class="fas fa-user-plus"></i> Create User
|
||||
</button>
|
||||
</h2>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
@@ -101,14 +220,39 @@
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-tbody"><tr><td colspan="7" class="table-loading-cell"><i class="fas fa-spinner fa-spin"></i> Loading users…</td></tr></tbody>
|
||||
<tbody id="users-tbody">
|
||||
<tr>
|
||||
<td
|
||||
colspan="7"
|
||||
class="table-loading-cell"
|
||||
>
|
||||
<i
|
||||
class="fas fa-spinner fa-spin"
|
||||
></i>
|
||||
Loading users…
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span id="users-info">—</span>
|
||||
<div class="flex-gap-6">
|
||||
<button class="btn btn-sm btn-secondary" id="prev-btn" disabled><i class="fas fa-chevron-left"></i> Prev</button>
|
||||
<button class="btn btn-sm btn-secondary" id="next-btn">Next <i class="fas fa-chevron-right"></i></button>
|
||||
<button
|
||||
class="btn btn-sm btn-secondary"
|
||||
id="prev-btn"
|
||||
onclick="prevPage()"
|
||||
disabled
|
||||
>
|
||||
<i class="fas fa-chevron-left"></i> Prev
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-secondary"
|
||||
id="next-btn"
|
||||
onclick="nextPage()"
|
||||
>
|
||||
Next <i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -116,62 +260,179 @@
|
||||
|
||||
<div id="tab-oidc" class="tab-content">
|
||||
<div class="admin-card">
|
||||
<h2><i class="fas fa-shield-alt"></i> Single Sign-On (OIDC / SSO)</h2>
|
||||
<h2>
|
||||
<i class="fas fa-shield-alt"></i> Single Sign-On
|
||||
(OIDC / SSO)
|
||||
</h2>
|
||||
<div class="toggle-row">
|
||||
<label>Enable SSO Authentication</label>
|
||||
<label class="switch"><input type="checkbox" id="oidc-enabled"><span class="slider"></span></label>
|
||||
<label class="switch"
|
||||
><input
|
||||
type="checkbox"
|
||||
id="oidc-enabled" /><span
|
||||
class="slider"
|
||||
></span
|
||||
></label>
|
||||
</div>
|
||||
<div id="oidc-form">
|
||||
<div class="form-group">
|
||||
<label>Provider Name <span id="badge-provider_name"></span></label>
|
||||
<input type="text" id="provider-name" placeholder="e.g., Authentik, Keycloak">
|
||||
<label
|
||||
>Provider Name
|
||||
<span id="badge-provider_name"></span
|
||||
></label>
|
||||
<input
|
||||
type="text"
|
||||
id="provider-name"
|
||||
placeholder="e.g., Authentik, Keycloak"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Issuer URL <span id="badge-issuer_url"></span></label>
|
||||
<input type="url" id="issuer-url" placeholder="https://auth.example.com/application/o/oxicloud/">
|
||||
<small>OpenID Connect issuer URL of your identity provider</small>
|
||||
<label
|
||||
>Issuer URL
|
||||
<span id="badge-issuer_url"></span
|
||||
></label>
|
||||
<input
|
||||
type="url"
|
||||
id="issuer-url"
|
||||
placeholder="https://auth.example.com/application/o/oxicloud/"
|
||||
/>
|
||||
<small
|
||||
>OpenID Connect issuer URL of your identity
|
||||
provider</small
|
||||
>
|
||||
</div>
|
||||
<div class="oidc-discover-wrap">
|
||||
<button class="btn btn-secondary btn-sm" id="discover-btn"><i class="fas fa-search"></i> Auto-discover</button>
|
||||
<button
|
||||
class="btn btn-secondary btn-sm"
|
||||
id="discover-btn"
|
||||
onclick="testConnection()"
|
||||
>
|
||||
<i class="fas fa-search"></i> Auto-discover
|
||||
</button>
|
||||
</div>
|
||||
<div id="discovery-result"></div>
|
||||
<div class="form-group">
|
||||
<label>Client ID <span id="badge-client_id"></span></label>
|
||||
<input type="text" id="client-id" placeholder="oxicloud">
|
||||
<label
|
||||
>Client ID <span id="badge-client_id"></span
|
||||
></label>
|
||||
<input
|
||||
type="text"
|
||||
id="client-id"
|
||||
placeholder="oxicloud"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Client Secret <span id="badge-client_secret"></span></label>
|
||||
<input type="password" id="client-secret" placeholder="Leave empty to keep current value">
|
||||
<small id="secret-hint"><i class="fas fa-check-circle secret-icon"></i> A client secret is already configured</small>
|
||||
<label
|
||||
>Client Secret
|
||||
<span id="badge-client_secret"></span
|
||||
></label>
|
||||
<input
|
||||
type="password"
|
||||
id="client-secret"
|
||||
placeholder="Leave empty to keep current value"
|
||||
/>
|
||||
<small id="secret-hint"
|
||||
><i
|
||||
class="fas fa-check-circle secret-icon"
|
||||
></i>
|
||||
A client secret is already configured</small
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Callback URL <small class="small-muted">(register in your IdP)</small></label>
|
||||
<div class="readonly-field"><span id="callback-url">—</span><button id="btn-copy-callback" title="Copy"><i class="fas fa-copy"></i></button></div>
|
||||
<label
|
||||
>Callback URL
|
||||
<small class="small-muted"
|
||||
>(register in your IdP)</small
|
||||
></label
|
||||
>
|
||||
<div class="readonly-field">
|
||||
<span id="callback-url">—</span
|
||||
><button
|
||||
onclick="copyCallback()"
|
||||
title="Copy"
|
||||
>
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<details>
|
||||
<summary><i class="fas fa-sliders-h summary-icon-right"></i> Advanced Settings</summary>
|
||||
<summary>
|
||||
<i
|
||||
class="fas fa-sliders-h summary-icon-right"
|
||||
></i>
|
||||
Advanced Settings
|
||||
</summary>
|
||||
<div class="form-group">
|
||||
<label>Scopes <span id="badge-scopes"></span></label>
|
||||
<input type="text" id="scopes" placeholder="openid profile email">
|
||||
<label
|
||||
>Scopes <span id="badge-scopes"></span
|
||||
></label>
|
||||
<input
|
||||
type="text"
|
||||
id="scopes"
|
||||
placeholder="openid profile email"
|
||||
/>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<label>Auto-provision users on first login</label>
|
||||
<label class="switch"><input type="checkbox" id="auto-provision" checked><span class="slider"></span></label>
|
||||
<label
|
||||
>Auto-provision users on first
|
||||
login</label
|
||||
>
|
||||
<label class="switch"
|
||||
><input
|
||||
type="checkbox"
|
||||
id="auto-provision"
|
||||
checked /><span
|
||||
class="slider"
|
||||
></span
|
||||
></label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Admin Groups <span id="badge-admin_groups"></span></label>
|
||||
<input type="text" id="admin-groups" placeholder="e.g., oxicloud-admins">
|
||||
<small>Comma-separated OIDC group names that map to admin role</small>
|
||||
<label
|
||||
>Admin Groups
|
||||
<span id="badge-admin_groups"></span
|
||||
></label>
|
||||
<input
|
||||
type="text"
|
||||
id="admin-groups"
|
||||
placeholder="e.g., oxicloud-admins"
|
||||
/>
|
||||
<small
|
||||
>Comma-separated OIDC group names that
|
||||
map to admin role</small
|
||||
>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<label>Disable password login (OIDC only)</label>
|
||||
<label class="switch"><input type="checkbox" id="disable-password"><span class="slider"></span></label>
|
||||
<label
|
||||
>Disable password login (OIDC
|
||||
only)</label
|
||||
>
|
||||
<label class="switch"
|
||||
><input
|
||||
type="checkbox"
|
||||
id="disable-password" /><span
|
||||
class="slider"
|
||||
></span
|
||||
></label>
|
||||
</div>
|
||||
<div class="warning" id="password-warning">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
This will prevent ALL password-based logins!
|
||||
</div>
|
||||
<div class="warning" id="password-warning"><i class="fas fa-exclamation-triangle"></i> This will prevent ALL password-based logins!</div>
|
||||
</details>
|
||||
<div class="oidc-actions">
|
||||
<button class="btn btn-secondary" id="btn-test-oidc"><i class="fas fa-vial"></i> Test</button>
|
||||
<button class="btn btn-primary" id="save-btn"><i class="fas fa-save"></i> Save</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onclick="testConnection()"
|
||||
>
|
||||
<i class="fas fa-vial"></i> Test
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
id="save-btn"
|
||||
onclick="saveOidcSettings()"
|
||||
>
|
||||
<i class="fas fa-save"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
<div id="oidc-status" class="alert"></div>
|
||||
</div>
|
||||
@@ -180,42 +441,83 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="quota-modal" class="modal-overlay">
|
||||
<div id="quota-modal" class="modal-overlay hidden">
|
||||
<div class="modal">
|
||||
<h3><i class="fas fa-box modal-title-icon"></i> Update Storage Quota</h3>
|
||||
<h3>
|
||||
<i class="fas fa-box modal-title-icon"></i> Update Storage
|
||||
Quota
|
||||
</h3>
|
||||
<div class="form-group">
|
||||
<label>User: <strong id="qm-username"></strong></label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>New Quota</label>
|
||||
<div class="quota-input-row">
|
||||
<input type="number" id="qm-value" min="0" step="1" class="flex-1">
|
||||
<select id="qm-unit" class="select-qm-unit"><option value="1073741824">GB</option><option value="1048576">MB</option><option value="1099511627776">TB</option></select>
|
||||
<input
|
||||
type="number"
|
||||
id="qm-value"
|
||||
min="0"
|
||||
step="1"
|
||||
class="flex-2"
|
||||
/>
|
||||
<select id="qm-unit" class="select-qm-unit">
|
||||
<option value="1073741824">GB</option>
|
||||
<option value="1048576">MB</option>
|
||||
<option value="1099511627776">TB</option>
|
||||
</select>
|
||||
</div>
|
||||
<small>Set to 0 for unlimited</small>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" id="btn-close-quota">Cancel</button>
|
||||
<button class="btn btn-primary" id="btn-save-quota"><i class="fas fa-save"></i> Save</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onclick="closeQuotaModal()"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="saveQuota()">
|
||||
<i class="fas fa-save"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="create-user-modal" class="modal-overlay">
|
||||
<div id="create-user-modal" class="modal-overlay hidden">
|
||||
<div class="modal">
|
||||
<h3><i class="fas fa-user-plus modal-title-icon"></i> Create New User</h3>
|
||||
<h3>
|
||||
<i class="fas fa-user-plus modal-title-icon"></i> Create New
|
||||
User
|
||||
</h3>
|
||||
<div class="form-group">
|
||||
<label>Username *</label>
|
||||
<input type="text" id="cu-username" placeholder="johndoe" minlength="3" maxlength="32">
|
||||
<input
|
||||
type="text"
|
||||
id="cu-username"
|
||||
placeholder="johndoe"
|
||||
minlength="3"
|
||||
maxlength="32"
|
||||
/>
|
||||
<small>3–32 characters</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password *</label>
|
||||
<input type="password" id="cu-password" placeholder="Min 8 characters" minlength="8">
|
||||
<input
|
||||
type="password"
|
||||
id="cu-password"
|
||||
placeholder="Min 8 characters"
|
||||
minlength="8"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email <small class="small-muted">(optional)</small></label>
|
||||
<input type="text" id="cu-email" placeholder="user@example.com (auto-generated if empty)">
|
||||
<label
|
||||
>Email
|
||||
<small class="small-muted">(optional)</small></label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="cu-email"
|
||||
placeholder="user@example.com (auto-generated if empty)"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group flex-1">
|
||||
@@ -228,33 +530,76 @@
|
||||
<div class="form-group flex-1">
|
||||
<label>Quota</label>
|
||||
<div class="quota-row">
|
||||
<input type="number" id="cu-quota-value" min="0" step="1" value="1" class="flex-1">
|
||||
<select id="cu-quota-unit" class="select-cu-quota-unit"><option value="1073741824">GB</option><option value="1048576">MB</option><option value="1099511627776">TB</option></select>
|
||||
<input
|
||||
type="number"
|
||||
id="cu-quota-value"
|
||||
min="0"
|
||||
step="1"
|
||||
value="1"
|
||||
class="flex-1"
|
||||
/>
|
||||
<select
|
||||
id="cu-quota-unit"
|
||||
class="select-cu-quota-unit"
|
||||
>
|
||||
<option value="1073741824">GB</option>
|
||||
<option value="1048576">MB</option>
|
||||
<option value="1099511627776">TB</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cu-error" class="alert alert-no-margin"></div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" id="btn-close-create-user">Cancel</button>
|
||||
<button class="btn btn-primary" id="cu-submit"><i class="fas fa-user-plus"></i> Create</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onclick="closeCreateUserModal()"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
id="cu-submit"
|
||||
onclick="submitCreateUser()"
|
||||
>
|
||||
<i class="fas fa-user-plus"></i> Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="reset-pw-modal" class="modal-overlay">
|
||||
<div id="reset-pw-modal" class="modal-overlay hidden">
|
||||
<div class="modal">
|
||||
<h3><i class="fas fa-key modal-title-icon"></i> Reset Password</h3>
|
||||
<h3>
|
||||
<i class="fas fa-key modal-title-icon"></i> Reset Password
|
||||
</h3>
|
||||
<div class="form-group">
|
||||
<label>User: <strong id="rp-username"></strong></label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>New Password</label>
|
||||
<input type="password" id="rp-password" placeholder="Min 8 characters" minlength="8">
|
||||
<input
|
||||
type="password"
|
||||
id="rp-password"
|
||||
placeholder="Min 8 characters"
|
||||
minlength="8"
|
||||
/>
|
||||
</div>
|
||||
<div id="rp-error" class="alert alert-no-margin"></div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" id="btn-close-reset-pw">Cancel</button>
|
||||
<button class="btn btn-primary" id="rp-submit"><i class="fas fa-save"></i> Reset</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onclick="closeResetPasswordModal()"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
id="rp-submit"
|
||||
onclick="submitResetPassword()"
|
||||
>
|
||||
<i class="fas fa-save"></i> Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -204,7 +204,7 @@ details summary:hover{color:#ff5e3a}
|
||||
details[open] summary{margin-bottom:14px;color:#ff5e3a}
|
||||
|
||||
/* ── Modal ── */
|
||||
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}
|
||||
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:1}
|
||||
.modal{background:#fff;border-radius:20px;padding:28px;width:420px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:modalIn .2s ease-out}
|
||||
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
|
||||
.modal h3{margin-bottom:18px;font-size:17px;color:#1e293b;display:flex;align-items:center}
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
const _ICONS = {
|
||||
"arrow-left": [448, "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"],
|
||||
"arrows-alt": [512, "M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l32 0 0 96-96 0 0-32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-32 96 0 0 96-32 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-32 0 0-96 96 0 0 32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 32-96 0 0-96 32 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64z"],
|
||||
"ban": [512, "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM159.3 388.7L388.7 159.3c4.6-4.6 11.5-5.9 17.4-3.5c14.5 6 26.4 15.3 35.1 27c3.8 5.2 3.2 12.3-1.2 16.8L210.2 428.4c-4.4 4.4-11.6 5-16.8 1.2c-11.7-8.7-21-20.6-27-35.1c-2.5-5.9-1.1-12.8 3.5-17.4z"],
|
||||
"bell": [448, "M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416l384 0c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8l0-18.8c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"],
|
||||
"bell-slash": [640, "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7l-90.2-70.7c.2-.4 .4-.9 .6-1.3c5.2-11.5 3.1-25-5.3-34.4l-7.4-8.3C497.3 319.2 480 273.9 480 226.8l0-18.8c0-77.4-55-142-128-156.8L352 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 19.2c-42.6 8.6-79 34.2-102 69.3L38.8 5.1zM406.2 416L160 222.1l0 4.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S115.4 416 128 416l278.2 0zm-40.9 77.3c12-12 18.7-28.3 18.7-45.3l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"],
|
||||
"box": [448, "M50.7 58.5L0 160l208 0 0-128L93.7 32C75.5 32 58.9 42.3 50.7 58.5zM240 160l208 0L397.3 58.5C389.1 42.3 372.5 32 354.3 32L240 32l0 128zm208 32L0 192 0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-224z"],
|
||||
@@ -38,6 +39,7 @@ const _ICONS = {
|
||||
"cloud-upload-alt": [640, "M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128l-368 0zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39L296 392c0 13.3 10.7 24 24 24s24-10.7 24-24l0-134.1 39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z"],
|
||||
"cog": [512, "M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"],
|
||||
"cogs": [640, "M308.5 135.3c7.1-6.3 9.9-16.2 6.2-25c-2.3-5.3-4.8-10.5-7.6-15.5L304 89.4c-3-5-6.3-9.9-9.8-14.6c-5.7-7.6-15.7-10.1-24.7-7.1l-28.2 9.3c-10.7-8.8-23-16-36.2-20.9L199 27.1c-1.9-9.3-9.1-16.7-18.5-17.8C173.9 8.4 167.2 8 160.4 8l-.7 0c-6.8 0-13.5 .4-20.1 1.2c-9.4 1.1-16.6 8.6-18.5 17.8L115 56.1c-13.3 5-25.5 12.1-36.2 20.9L50.5 67.8c-9-3-19-.5-24.7 7.1c-3.5 4.7-6.8 9.6-9.9 14.6l-3 5.3c-2.8 5-5.3 10.2-7.6 15.6c-3.7 8.7-.9 18.6 6.2 25l22.2 19.8C32.6 161.9 32 168.9 32 176s.6 14.1 1.7 20.9L11.5 216.7c-7.1 6.3-9.9 16.2-6.2 25c2.3 5.3 4.8 10.5 7.6 15.6l3 5.2c3 5.1 6.3 9.9 9.9 14.6c5.7 7.6 15.7 10.1 24.7 7.1l28.2-9.3c10.7 8.8 23 16 36.2 20.9l6.1 29.1c1.9 9.3 9.1 16.7 18.5 17.8c6.7 .8 13.5 1.2 20.4 1.2s13.7-.4 20.4-1.2c9.4-1.1 16.6-8.6 18.5-17.8l6.1-29.1c13.3-5 25.5-12.1 36.2-20.9l28.2 9.3c9 3 19 .5 24.7-7.1c3.5-4.7 6.8-9.5 9.8-14.6l3.1-5.4c2.8-5 5.3-10.2 7.6-15.5c3.7-8.7 .9-18.6-6.2-25l-22.2-19.8c1.1-6.8 1.7-13.8 1.7-20.9s-.6-14.1-1.7-20.9l22.2-19.8zM112 176a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM504.7 500.5c6.3 7.1 16.2 9.9 25 6.2c5.3-2.3 10.5-4.8 15.5-7.6l5.4-3.1c5-3 9.9-6.3 14.6-9.8c7.6-5.7 10.1-15.7 7.1-24.7l-9.3-28.2c8.8-10.7 16-23 20.9-36.2l29.1-6.1c9.3-1.9 16.7-9.1 17.8-18.5c.8-6.7 1.2-13.5 1.2-20.4s-.4-13.7-1.2-20.4c-1.1-9.4-8.6-16.6-17.8-18.5L583.9 307c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9 .5-19-7.1-24.7c-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6c-8.7-3.7-18.6-.9-25 6.2l-19.8 22.2c-6.8-1.1-13.8-1.7-20.9-1.7s-14.1 .6-20.9 1.7l-19.8-22.2c-6.3-7.1-16.2-9.9-25-6.2c-5.3 2.3-10.5 4.8-15.6 7.6l-5.2 3c-5.1 3-9.9 6.3-14.6 9.9c-7.6 5.7-10.1 15.7-7.1 24.7l9.3 28.2c-8.8 10.7-16 23-20.9 36.2L315.1 313c-9.3 1.9-16.7 9.1-17.8 18.5c-.8 6.7-1.2 13.5-1.2 20.4s.4 13.7 1.2 20.4c1.1 9.4 8.6 16.6 17.8 18.5l29.1 6.1c5 13.3 12.1 25.5 20.9 36.2l-9.3 28.2c-3 9-.5 19 7.1 24.7c4.7 3.5 9.5 6.8 14.6 9.8l5.4 3.1c5 2.8 10.2 5.3 15.5 7.6c8.7 3.7 18.6 .9 25-6.2l19.8-22.2c6.8 1.1 13.8 1.7 20.9 1.7s14.1-.6 20.9-1.7l19.8 22.2zM464 304a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"],
|
||||
"crown": [576, "M309 106c11.4-7 19-19.7 19-34c0-22.1-17.9-40-40-40s-40 17.9-40 40c0 14.4 7.6 27 19 34L209.7 220.6c-9.1 18.2-32.7 23.4-48.6 10.7L72 160c5-6.7 8-15 8-24c0-22.1-17.9-40-40-40S0 113.9 0 136s17.9 40 40 40c.2 0 .5 0 .7 0L86.4 427.4c5.5 30.4 32 52.6 63 52.6l277.2 0c30.9 0 57.4-22.1 63-52.6L535.3 176c.2 0 .5 0 .7 0c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40c0 9 3 17.3 8 24l-89.1 71.3c-15.9 12.7-39.5 7.5-48.6-10.7L309 106z"],
|
||||
"copy": [448, "M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"],
|
||||
"database": [448, "M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z"],
|
||||
"download": [512, "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"],
|
||||
|
||||
Reference in New Issue
Block a user