kamaji/nextsnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dual user classes: admin + tech users with PIN login

Browse Source 
- Add tech user management (JSON-backed CRUD with PIN auth)
- Dual login: tabbed Tech Login (username+PIN) / Admin Login (NC credentials)
- Admin panel: tappable user list with detail modal (enable/disable, reset PIN, reset NC password, delete)
- Auto-provision Nextcloud accounts for tech users
- Admin guard: tech users redirected away from admin panel
- New data volume for persistent tech_users.json storage

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kamaji
2026-02-08 00:17:26 -06:00
parent ca03f6e143
commit 99fb5ff7e7
13 changed files with 1143 additions and 493 deletions
Download Patch File Download Diff File Expand all files Collapse all files

329
app/templates/admin.html
View File

@@ -6,75 +6,107 @@
<div class="container">
<div class="admin-header">
<h2>Admin Panel</h2>
<button class="btn btn-secondary btn-small" id="refresh-btn">
<span>🔄</span> Refresh
</button>
</div>
<!-- Add User Form -->
<!-- Add Tech User Form -->
<div class="admin-section">
<h3>Add New User</h3>
<form id="add-user-form" class="user-form">
<h3>Add Tech User</h3>
<form id="add-tech-user-form" class="user-form">
<div class="form-row">
<div class="form-group">
<label for="new-username">Username *</label>
<input type="text" id="new-username" required placeholder="username">
<label for="new-tech-username">Username *</label>
<input type="text" id="new-tech-username" required placeholder="jsmith" autocapitalize="none" autocorrect="off">
</div>
<div class="form-group">
<label for="new-password">Password *</label>
<input type="password" id="new-password" required placeholder="••••••••">
<label for="new-tech-displayname">Display Name</label>
<input type="text" id="new-tech-displayname" placeholder="John Smith">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="new-email">Email</label>
<input type="email" id="new-email" placeholder="user@example.com">
<label for="new-tech-pin">PIN * (min 4 digits)</label>
<input type="text" id="new-tech-pin" required placeholder="••••" inputmode="numeric">
</div>
<div class="form-group">
<label for="new-displayname">Display Name</label>
<input type="text" id="new-displayname" placeholder="John Doe">
<label for="new-tech-pin-confirm">Confirm PIN *</label>
<input type="text" id="new-tech-pin-confirm" required placeholder="••••" inputmode="numeric">
</div>
</div>
<div class="form-error" id="form-error" style="display: none;"></div>
<div class="form-success" id="form-success" style="display: none;"></div>
<button type="submit" class="btn btn-primary" id="submit-btn">Create User</button>
<div class="form-error" id="tech-form-error" style="display: none;"></div>
<div class="form-success" id="tech-form-success" style="display: none;"></div>
<button type="submit" class="btn btn-primary" id="tech-submit-btn">Create Tech User</button>
</form>
</div>
<!-- User List -->
<!-- Tech User List -->
<div class="admin-section">
<h3>Nextcloud Users</h3>
<div class="loading-msg" id="loading-msg" style="display: none;">Loading users...</div>
<div class="error-msg" id="error-msg" style="display: none;"></div>
<div class="table-container">
<table class="user-table">
<thead>
<tr>
<th>Username</th>
<th>Display Name</th>
<th>Email</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="user-list">
<tr><td colspan="5" class="empty-state">Loading...</td></tr>
</tbody>
</table>
<h3>Tech Users</h3>
<div class="loading-msg" id="tech-loading-msg" style="display: none;">Loading tech users...</div>
<div class="error-msg" id="tech-error-msg" style="display: none;"></div>
<div id="tech-user-list" class="user-list"></div>
</div>
</div>
<!-- User Detail Modal -->
<div class="modal" id="user-modal" style="display: none;">
<div class="modal-content">
<h3 id="user-modal-title"></h3>
<p id="user-modal-displayname" class="modal-subtitle"></p>
<div class="modal-detail">
<label>NC Password</label>
<div class="nc-password-row">
<span class="pw-text" id="user-modal-pw" data-masked="true"></span>
<button class="btn-small-action" id="user-modal-pw-toggle">Show</button>
<button class="btn-small-action" id="user-modal-pw-copy">Copy</button>
</div>
</div>
<div class="modal-detail">
<label>Status</label>
<span id="user-modal-status" class="badge"></span>
</div>
<div class="modal-action-list">
<button class="btn btn-block" id="user-modal-toggle-btn"></button>
<button class="btn btn-block btn-secondary" id="user-modal-pin-btn">Reset PIN</button>
<button class="btn btn-block btn-secondary" id="user-modal-resetpw-btn">Reset NC Password</button>
<button class="btn btn-block btn-danger" id="user-modal-delete-btn">Delete User</button>
</div>
<button class="btn btn-block btn-tertiary" id="user-modal-close">Close</button>
</div>
</div>
<!-- Reset PIN Modal -->
<div class="modal" id="pin-modal" style="display: none;">
<div class="modal-content">
<h3>Reset PIN for <span id="pin-modal-username"></span></h3>
<div class="form-group" style="margin-top: 1rem;">
<label for="reset-pin">New PIN (min 4 digits)</label>
<input type="text" id="reset-pin" placeholder="••••" inputmode="numeric" class="form-group-input">
</div>
<div class="form-group">
<label for="reset-pin-confirm">Confirm PIN</label>
<input type="text" id="reset-pin-confirm" placeholder="••••" inputmode="numeric" class="form-group-input">
</div>
<div class="form-error" id="pin-modal-error" style="display: none;"></div>
<div class="modal-actions">
<button class="btn btn-secondary" id="pin-modal-cancel">Cancel</button>
<button class="btn btn-primary" id="confirm-pin-reset">Reset PIN</button>
</div>
</div>
</div>
<!-- Delete Confirmation Modal -->
<div class="modal" id="delete-modal" style="display: none;">
<!-- Confirm Modal (generic) -->
<div class="modal" id="confirm-modal" style="display: none;">
<div class="modal-content">
<h3>Delete User?</h3>
<p>Are you sure you want to delete user <strong id="delete-username"></strong>?</p>
<p class="warning-text">⚠️ This action cannot be undone. All user data will be permanently deleted.</p>
<h3 id="confirm-modal-title"></h3>
<p id="confirm-modal-msg"></p>
<div class="form-error" id="confirm-modal-error" style="display: none;"></div>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="Admin.hideDeleteModal()">Cancel</button>
<button class="btn btn-danger" id="confirm-delete">Delete User</button>
<button class="btn btn-secondary" id="confirm-modal-cancel">Cancel</button>
<button class="btn btn-danger" id="confirm-modal-ok">Confirm</button>
</div>
</div>
</div>
@@ -119,7 +151,7 @@
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
@@ -134,16 +166,19 @@
font-size: 0.9rem;
}
.form-group input {
.form-group input,
.form-group-input {
padding: 0.75rem;
background: var(--bg-primary);
border: 1px solid var(--bg-tertiary);
border-radius: 6px;
color: var(--text-primary);
font-size: 1rem;
width: 100%;
}
.form-group input:focus {
.form-group input:focus,
.form-group-input:focus {
outline: none;
border-color: var(--accent);
}
@@ -177,47 +212,72 @@
border-radius: 6px;
}
.table-container {
overflow-x: auto;
/* User list (tappable rows) */
.user-list {
display: flex;
flex-direction: column;
gap: 0;
}
.user-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
.user-list-empty {
text-align: center;
color: var(--text-secondary);
padding: 2rem;
}
.user-table thead {
background: var(--bg-tertiary);
.user-list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 0.75rem;
border-bottom: 1px solid var(--bg-tertiary);
cursor: pointer;
transition: background 0.15s;
-webkit-tap-highlight-color: transparent;
}
.user-table th {
padding: 0.75rem;
text-align: left;
font-weight: 600;
font-size: 0.9rem;
}
.user-table td {
padding: 0.75rem;
.user-list-item:first-child {
border-top: 1px solid var(--bg-tertiary);
}
.user-table tr:hover {
.user-list-item:active {
background: var(--bg-tertiary);
}
.empty-state {
text-align: center;
.user-list-item .user-info {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.user-list-item .user-id {
font-weight: 600;
font-size: 1rem;
}
.user-list-item .user-displayname {
font-size: 0.8rem;
color: var(--text-secondary);
padding: 2rem !important;
}
.user-list-item .user-right {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.user-list-item .chevron {
color: var(--text-secondary);
font-size: 1.2rem;
}
.badge {
display: inline-block;
padding: 0.25rem 0.75rem;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-size: 0.85rem;
font-size: 0.8rem;
font-weight: 600;
}
@@ -231,41 +291,7 @@
color: white;
}
.action-buttons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.btn-action {
padding: 0.4rem 0.75rem;
font-size: 0.85rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: opacity 0.2s;
}
.btn-action:active {
opacity: 0.7;
}
.btn-warning {
background: var(--warning);
color: var(--bg-primary);
}
.btn-success {
background: var(--success);
color: white;
}
.btn-danger {
background: var(--error);
color: white;
}
/* Modal */
.modal {
position: fixed;
top: 0;
@@ -290,6 +316,12 @@
.modal-content h3 {
margin-top: 0;
margin-bottom: 0.25rem;
}
.modal-subtitle {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 1rem;
}
@@ -298,9 +330,73 @@
color: var(--text-secondary);
}
.warning-text {
color: var(--warning) !important;
.modal-detail {
margin-bottom: 1rem;
}
.modal-detail label {
display: block;
font-size: 0.8rem;
color: var(--text-secondary);
font-weight: 600;
margin-bottom: 0.3rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.nc-password-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: monospace;
font-size: 0.95rem;
}
.nc-password-row .pw-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.btn-small-action {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
border: none;
border-radius: 4px;
cursor: pointer;
background: var(--bg-tertiary);
color: var(--text-secondary);
white-space: nowrap;
font-weight: 600;
}
.btn-small-action:active {
opacity: 0.7;
}
.modal-action-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1.25rem;
margin-bottom: 0.75rem;
}
.btn-block {
width: 100%;
text-align: center;
}
.btn-tertiary {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--bg-tertiary);
}
.btn-tertiary:active {
background: var(--bg-tertiary);
}
.modal-actions {
@@ -340,15 +436,6 @@
.form-row {
grid-template-columns: 1fr;
}
.user-table {
font-size: 0.85rem;
}
.user-table th,
.user-table td {
padding: 0.5rem;
}
}
</style>
{% endblock %}
@@ -359,11 +446,11 @@
<script>
Admin.init();
// Close delete modal on outside click
document.getElementById('delete-modal').addEventListener('click', (e) => {
if (e.target.id === 'delete-modal') {
Admin.hideDeleteModal();
}
// Close modals on outside click
['user-modal', 'pin-modal', 'confirm-modal'].forEach(id => {
document.getElementById(id).addEventListener('click', (e) => {
if (e.target.id === id) Admin.closeModal(id);
});
});
</script>
{% endblock %}

134
app/templates/login.html
View File

@@ -10,15 +10,22 @@
<h1 class="login-title">NextSnap</h1>
<p class="login-subtitle">Offline-first photo capture for Nextcloud</p>
</div>
<form id="login-form" class="login-form">
<!-- Login Tabs -->
<div class="login-tabs">
<button class="login-tab active" data-tab="tech">Tech Login</button>
<button class="login-tab" data-tab="admin">Admin Login</button>
</div>
<!-- Tech Login Form -->
<form id="tech-login-form" class="login-form">
<div class="form-group">
<label for="username">Nextcloud Username</label>
<input
type="text"
id="username"
name="username"
class="form-input"
<label for="tech-username">Username</label>
<input
type="text"
id="tech-username"
name="username"
class="form-input"
placeholder="Enter your username"
autocomplete="username"
autocapitalize="none"
@@ -26,36 +33,79 @@
autofocus
required
>
<span class="field-error" id="username-error"></span>
<span class="field-error" id="tech-username-error"></span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
name="password"
class="form-input"
placeholder="Enter your password"
<label for="tech-pin">PIN</label>
<input
type="password"
id="tech-pin"
name="pin"
class="form-input"
placeholder="Enter your PIN"
inputmode="numeric"
autocomplete="current-password"
required
>
<span class="field-error" id="password-error"></span>
<span class="field-error" id="tech-pin-error"></span>
</div>
<div id="error-message" class="error-message hidden"></div>
<button type="submit" class="btn btn-primary btn-login" id="login-btn">
<span id="login-btn-text">Login</span>
<span id="login-btn-loading" class="hidden">
<div id="tech-error-message" class="error-message hidden"></div>
<button type="submit" class="btn btn-primary btn-login" id="tech-login-btn">
<span class="btn-text">Login</span>
<span class="btn-loading hidden">
<span class="spinner"></span> Logging in...
</span>
</button>
</form>
<!-- Admin Login Form -->
<form id="admin-login-form" class="login-form" style="display: none;">
<div class="form-group">
<label for="admin-username">Nextcloud Username</label>
<input
type="text"
id="admin-username"
name="username"
class="form-input"
placeholder="Enter your username"
autocomplete="username"
autocapitalize="none"
autocorrect="off"
required
>
<span class="field-error" id="admin-username-error"></span>
</div>
<div class="form-group">
<label for="admin-password">Password</label>
<input
type="password"
id="admin-password"
name="password"
class="form-input"
placeholder="Enter your password"
autocomplete="current-password"
required
>
<span class="field-error" id="admin-password-error"></span>
</div>
<div id="admin-error-message" class="error-message hidden"></div>
<button type="submit" class="btn btn-primary btn-login" id="admin-login-btn">
<span class="btn-text">Login</span>
<span class="btn-loading hidden">
<span class="spinner"></span> Logging in...
</span>
</button>
</form>
<div class="login-footer">
<p class="help-text">
<strong>Tip:</strong> Use your Nextcloud credentials to login
<p class="help-text" id="login-help">
<strong>Tip:</strong> Use your username and PIN to login
</p>
</div>
</div>
@@ -98,6 +148,32 @@ body {
font-size: 0.9rem;
}
.login-tabs {
display: flex;
gap: 0;
margin-bottom: 1.5rem;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--bg-tertiary);
}
.login-tab {
flex: 1;
padding: 0.75rem;
border: none;
background: var(--bg-primary);
color: var(--text-secondary);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.login-tab.active {
background: var(--accent);
color: white;
}
.login-form {
display: flex;
flex-direction: column;
@@ -191,11 +267,11 @@ body {
margin: 1rem;
padding: 1.5rem;
}
.app-icon {
font-size: 3rem;
}
.login-title {
font-size: 1.75rem;
}