Add dual user classes: admin + tech users with PIN login
- 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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user