feat(users): add account limits and API keys
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 1m43s
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 1m43s
This commit is contained in:
@@ -35,99 +35,110 @@
|
||||
<div class="menu-item">
|
||||
<button class="menu-button" type="button" aria-expanded="false">File</button>
|
||||
<div class="menu-popup">
|
||||
<button class="menu-action" type="button" data-command="invite"><span>I</span><span>Invite user</span><span>Ctrl+I</span></button>
|
||||
<button class="menu-action" type="button" data-command="create"><span>C</span><span>Create local user</span><span></span></button>
|
||||
<button class="menu-action" type="button" data-command="tab-add"><span>N</span><span>New user</span><span></span></button>
|
||||
<div class="menu-separator"></div>
|
||||
<button class="menu-action" type="button" data-command="export"><span>E</span><span>Export visible CSV</span><span></span></button>
|
||||
<button class="menu-action" type="button" data-command="refresh"><span>R</span><span>Refresh users</span><span>F5</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<button class="menu-button" type="button" aria-expanded="false">Users</button>
|
||||
<div class="menu-popup">
|
||||
<button class="menu-action" type="button" data-command="bulk-disable"><span>D</span><span>Disable selected</span><span></span></button>
|
||||
<button class="menu-action" type="button" data-command="bulk-enable"><span>U</span><span>Enable selected</span><span></span></button>
|
||||
<button class="menu-action" type="button" data-command="bulk-revoke"><span>R</span><span>Revoke sessions</span><span></span></button>
|
||||
<button class="menu-action" type="button" data-command="bulk-enable"><span>E</span><span>Enable selected</span><span></span></button>
|
||||
<button class="menu-action" type="button" data-command="bulk-delete"><span>X</span><span>Delete selected</span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<button class="menu-button" type="button" aria-expanded="false">View</button>
|
||||
<div class="menu-popup">
|
||||
<button class="menu-action" type="button" data-command="refresh"><span>F</span><span>Refresh list</span><span>F5</span></button>
|
||||
<button class="menu-action" type="button" data-command="pending-only"><span>P</span><span>Show pending invites</span><span></span></button>
|
||||
<button class="menu-action" type="button" data-command="clear-filters"><span>X</span><span>Clear filters</span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<button class="menu-button" type="button" aria-expanded="false">Help</button>
|
||||
<div class="menu-popup">
|
||||
<button class="menu-action" type="button" data-command="policy-help"><span>?</span><span>User policy notes</span><span></span></button>
|
||||
<button class="menu-action" type="button" data-command="mock-note"><span>M</span><span>Mock-only notes</span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="admin-workspace-body users-page-body">
|
||||
<section class="users-hero">
|
||||
<div>
|
||||
<h2>Accounts, invites, and access</h2>
|
||||
<p>Mock administrative users view for creation, invitation, filtering, and safe bulk actions.</p>
|
||||
</div>
|
||||
<div class="users-hero-actions">
|
||||
<button class="win98-button users-action-button" type="button" data-command="invite">Invite user</button>
|
||||
<button class="win98-button users-action-button" type="button" data-command="create">Create local user</button>
|
||||
<button class="win98-button users-action-button" type="button" data-command="export">Export CSV</button>
|
||||
<button class="win98-button users-action-button" type="button" data-command="policy-help">Policy notes</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="users-summary-grid">
|
||||
<article class="users-stat-card is-info"><p>Total users</p><strong id="stat-total">0</strong></article>
|
||||
<article class="users-stat-card is-ok"><p>Active</p><strong id="stat-active">0</strong></article>
|
||||
<article class="users-stat-card is-warning"><p>Pending invites</p><strong id="stat-pending">0</strong></article>
|
||||
<article class="users-stat-card is-warning"><p>With API keys</p><strong id="stat-keys">0</strong></article>
|
||||
<article class="users-stat-card is-danger"><p>Disabled</p><strong id="stat-disabled">0</strong></article>
|
||||
</section>
|
||||
|
||||
<section class="users-main-grid">
|
||||
<section class="users-panel">
|
||||
<div class="users-panel-header">
|
||||
<div class="users-panel-title">Create or invite <span>mock only</span></div>
|
||||
<aside class="users-control-panel" aria-label="User actions">
|
||||
<div class="users-selected-card">
|
||||
<span>Selected user</span>
|
||||
<strong id="selected-user-name">None</strong>
|
||||
<small id="selected-user-meta">Choose a row to edit policies and keys.</small>
|
||||
</div>
|
||||
<div class="users-panel-body">
|
||||
<form id="users-form" class="users-form-grid">
|
||||
<label class="users-field">Mode
|
||||
<select class="users-select" id="users-mode">
|
||||
<option value="invite">Send invite</option>
|
||||
<option value="create">Create local user</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="users-field">Username<input class="users-input" id="users-username" type="text" autocomplete="off"></label>
|
||||
<label class="users-field">Email<input class="users-input" id="users-email" type="email" autocomplete="off"></label>
|
||||
<div class="users-side-tabs" role="tablist" aria-label="User panels">
|
||||
<button class="users-tab is-active" type="button" data-tab="add">Add New</button>
|
||||
<button class="users-tab" type="button" data-tab="edit">Edit</button>
|
||||
<button class="users-tab" type="button" data-tab="policies">Policies</button>
|
||||
<button class="users-tab" type="button" data-tab="keys">API Keys</button>
|
||||
</div>
|
||||
|
||||
<section class="users-tab-panel is-active" data-panel="add">
|
||||
<div class="users-panel-header compact"><div class="users-panel-title">Add New</div></div>
|
||||
<form id="add-user-form" class="users-form-grid">
|
||||
<label class="users-field">Username<input class="users-input" id="add-username" type="text" autocomplete="off"></label>
|
||||
<label class="users-field">Email<input class="users-input" id="add-email" type="email" autocomplete="off"></label>
|
||||
<div class="users-row-two">
|
||||
<label class="users-field">Role
|
||||
<select class="users-select" id="users-role">
|
||||
<option value="uploader">uploader</option>
|
||||
<option value="operator">operator</option>
|
||||
<option value="viewer">viewer</option>
|
||||
<option value="admin">admin</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="users-field">Plan
|
||||
<select class="users-select" id="users-plan">
|
||||
<option value="standard">standard</option>
|
||||
<option value="trusted">trusted</option>
|
||||
<option value="guest-like">guest-like</option>
|
||||
<option value="unlimited">unlimited</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="users-field">Status<select class="users-select" id="add-status"><option value="active">active</option><option value="disabled">disabled</option></select></label>
|
||||
<label class="users-field">Max file MB<input class="users-input" id="add-max-file" type="number" min="0" step="1" value="0"></label>
|
||||
</div>
|
||||
<label class="users-check"><input type="checkbox" id="users-send-setup" checked>Send setup instructions</label>
|
||||
<label class="users-field">Max box MB<input class="users-input" id="add-max-box" type="number" min="0" step="1" value="0"></label>
|
||||
<label class="users-check"><input type="checkbox" id="add-perm-web" checked>Allow web session login</label>
|
||||
<label class="users-check"><input type="checkbox" id="add-perm-api" checked>Allow API access</label>
|
||||
<label class="users-check"><input type="checkbox" id="add-perm-create" checked>Allow box creation</label>
|
||||
<label class="users-check"><input type="checkbox" id="add-perm-upload" checked>Allow file uploads</label>
|
||||
<div class="users-form-actions">
|
||||
<button class="win98-button users-action-button" type="reset">Clear</button>
|
||||
<button class="win98-button users-action-button" type="submit">Apply</button>
|
||||
<button class="win98-button users-action-button" type="submit">Create User</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="users-tab-panel" data-panel="edit">
|
||||
<div class="users-panel-header compact"><div class="users-panel-title">Edit Identity</div></div>
|
||||
<form id="edit-user-form" class="users-form-grid">
|
||||
<label class="users-field">Username<input class="users-input" id="edit-username" type="text" autocomplete="off" disabled></label>
|
||||
<label class="users-field">Email<input class="users-input" id="edit-email" type="email" autocomplete="off" disabled></label>
|
||||
<label class="users-field">Status<select class="users-select" id="edit-status" disabled><option value="active">active</option><option value="disabled">disabled</option></select></label>
|
||||
<div class="users-form-actions">
|
||||
<button class="win98-button users-action-button" type="button" id="delete-user-button" disabled>Delete</button>
|
||||
<button class="win98-button users-action-button" type="submit" disabled id="save-edit-button">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="users-tab-panel" data-panel="policies">
|
||||
<div class="users-panel-header compact"><div class="users-panel-title">Policies</div></div>
|
||||
<form id="policies-form" class="users-form-grid">
|
||||
<label class="users-field">Max file MB<input class="users-input" id="policy-max-file" type="number" min="0" step="1" disabled></label>
|
||||
<label class="users-field">Max box MB<input class="users-input" id="policy-max-box" type="number" min="0" step="1" disabled></label>
|
||||
<label class="users-check"><input type="checkbox" id="policy-perm-web" disabled>Allow web session login</label>
|
||||
<label class="users-check"><input type="checkbox" id="policy-perm-api" disabled>Allow API access</label>
|
||||
<label class="users-check"><input type="checkbox" id="policy-perm-create" disabled>Allow box creation</label>
|
||||
<label class="users-check"><input type="checkbox" id="policy-perm-upload" disabled>Allow file uploads</label>
|
||||
<div class="users-form-actions"><button class="win98-button users-action-button" type="submit" disabled id="save-policies-button">Save Policies</button></div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="users-tab-panel" data-panel="keys">
|
||||
<div class="users-panel-header compact"><div class="users-panel-title">API Keys</div></div>
|
||||
<form id="api-key-form" class="users-form-grid">
|
||||
<label class="users-field">Key name<input class="users-input" id="api-key-name" type="text" value="default" disabled></label>
|
||||
<button class="win98-button users-action-button" type="submit" disabled id="create-key-button">Generate Key</button>
|
||||
</form>
|
||||
<div class="users-key-reveal" id="api-key-reveal" hidden>
|
||||
<span>New API key</span>
|
||||
<input class="users-input" id="api-key-value" type="text" readonly>
|
||||
</div>
|
||||
<div class="users-key-list" id="api-key-list"></div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<section class="users-panel">
|
||||
<div class="users-panel-header">
|
||||
@@ -136,15 +147,14 @@
|
||||
<button class="win98-button users-tool-button" type="button" id="select-visible">Select visible</button>
|
||||
<button class="win98-button users-tool-button" type="button" data-command="bulk-disable">Disable</button>
|
||||
<button class="win98-button users-tool-button" type="button" data-command="bulk-enable">Enable</button>
|
||||
<button class="win98-button users-tool-button" type="button" data-command="bulk-revoke">Revoke</button>
|
||||
<button class="win98-button users-tool-button" type="button" data-command="bulk-delete">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="users-panel-body users-list-body">
|
||||
<div class="users-toolbar-grid">
|
||||
<input class="users-input" id="users-search" type="search" placeholder="Search username or email">
|
||||
<select class="users-select" id="users-status"><option value="all">all statuses</option><option value="active">active</option><option value="pending">pending</option><option value="disabled">disabled</option></select>
|
||||
<select class="users-select" id="users-role-filter"><option value="all">all roles</option><option value="admin">admin</option><option value="operator">operator</option><option value="uploader">uploader</option><option value="viewer">viewer</option></select>
|
||||
<select class="users-select" id="users-sort"><option value="username">sort username</option><option value="createdDesc">newest first</option><option value="lastSeenDesc">last seen</option><option value="boxesDesc">box count</option></select>
|
||||
<select class="users-select" id="users-status"><option value="all">all statuses</option><option value="active">active</option><option value="disabled">disabled</option></select>
|
||||
<select class="users-select" id="users-sort"><option value="username">sort username</option><option value="createdDesc">newest first</option><option value="lastSeenDesc">last seen</option><option value="keysDesc">api keys</option></select>
|
||||
<select class="users-select" id="users-size"><option value="8">8 rows</option><option value="12" selected>12 rows</option><option value="20">20 rows</option></select>
|
||||
</div>
|
||||
<div class="users-table-wrap">
|
||||
@@ -155,9 +165,9 @@
|
||||
<th>User</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
<th>Role</th>
|
||||
<th>Plan</th>
|
||||
<th>Boxes</th>
|
||||
<th>Permissions</th>
|
||||
<th>Limits</th>
|
||||
<th>Keys</th>
|
||||
<th>Last seen</th>
|
||||
<th class="users-col-actions">Actions</th>
|
||||
</tr>
|
||||
@@ -179,15 +189,15 @@
|
||||
</div>
|
||||
|
||||
<footer class="status-bar admin-dashboard-statusbar">
|
||||
<span id="users-status-left">Ready. Client-side mock data only.</span>
|
||||
<span>server paging planned</span>
|
||||
<span id="users-status-left">Ready.</span>
|
||||
<span>real user store</span>
|
||||
<span>admin only</span>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toast" class="wb-toast" role="status" aria-live="polite"></div>
|
||||
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
||||
<script src="/static/js/warpbox-ui.js"></script>
|
||||
<script src="/static/js/admin/users.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -187,7 +187,7 @@
|
||||
</label>
|
||||
<label class="option-check">
|
||||
<input type="checkbox" id="api-key-mode">
|
||||
<span>Use API key for larger quota</span>
|
||||
<span>Use API key account limits</span>
|
||||
</label>
|
||||
<label class="option-row api-key-row" id="api-key-row">
|
||||
<span>API key:</span>
|
||||
|
||||
Reference in New Issue
Block a user