@javagt/express-easy-auth 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,272 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Auth Server — Premium Authentication</title>
7
+ <link rel="stylesheet" href="css/style.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
9
+ </head>
10
+ <body>
11
+ <div id="toast-container"></div>
12
+
13
+ <!-- Header (Visible when logged in) -->
14
+ <header id="dash-header" class="dash-header" style="display:none;">
15
+ <div class="dash-logo">
16
+ <span>⬡</span> AuthServer
17
+ </div>
18
+ <nav class="dash-nav-header">
19
+ <button id="go-dashboard" class="nav-btn active">Dashboard</button>
20
+ <button id="go-profile" class="nav-btn">Profile</button>
21
+ <button id="go-logout" class="nav-btn">Logout</button>
22
+ <button id="theme-toggle" class="nav-btn theme-toggle" title="Toggle Dark/Light Mode">
23
+ <span class="sun">☀️</span>
24
+ <span class="moon">🌙</span>
25
+ </button>
26
+ </nav>
27
+ </header>
28
+
29
+ <main id="main-container">
30
+
31
+ <!-- Auth Split View (Login/Register) -->
32
+ <section id="view-auth" class="auth-split">
33
+ <div class="auth-brand">
34
+ <h1 class="brand-tagline">Secure access for <em>modern</em> teams.</h1>
35
+ <div class="brand-features">
36
+ <div class="feat">✓ Biometric Passkeys</div>
37
+ <div class="feat">✓ Multi-factor Auth</div>
38
+ <div class="feat">✓ Session Management</div>
39
+ </div>
40
+ <div style="margin-top: auto; padding-top: 40px;">
41
+ <button id="theme-toggle-public" class="btn-secondary theme-toggle" title="Toggle Dark/Light Mode" style="width: auto; padding: 10px 20px;">
42
+ <span class="sun">☀️</span>
43
+ <span class="moon">🌙</span>
44
+ <span style="margin-left: 8px;">Switch Theme</span>
45
+ </button>
46
+ </div>
47
+ </div>
48
+
49
+ <div class="auth-panel">
50
+ <!-- Login Form -->
51
+ <section id="view-login" class="auth-form active">
52
+ <h2 class="form-title">Welcome back</h2>
53
+ <p class="form-hint">Log in to your account to continue.</p>
54
+
55
+ <form id="form-login" autocomplete="username">
56
+ <div class="field">
57
+ <label>Username</label>
58
+ <input id="login-username" name="username" placeholder="Enter your username" required>
59
+ </div>
60
+ <div class="field">
61
+ <label>Password</label>
62
+ <input id="login-password" name="password" type="password" placeholder="••••••••" required>
63
+ </div>
64
+ <div id="login-totp-field" class="field" style="display:none;">
65
+ <label>2FA Code</label>
66
+ <input id="login-totp" name="totp" placeholder="000000" maxlength="6">
67
+ </div>
68
+ <div class="btn-row">
69
+ <button id="btn-login" class="btn-primary" type="submit">Sign in</button>
70
+ <button id="btn-passkey-login" class="btn-passkey" type="button">Sign in with Passkey</button>
71
+ </div>
72
+ </form>
73
+
74
+ <div class="divider">or</div>
75
+
76
+ <button id="go-register" class="btn-secondary">Create an account</button>
77
+ <a id="go-reset-request" class="form-switch" href="#">Forgot password?</a>
78
+ </section>
79
+
80
+ <!-- Register Form -->
81
+ <section id="view-register" class="auth-form">
82
+ <h2 class="form-title">Create account</h2>
83
+ <p class="form-hint">Join us to start managing your security.</p>
84
+
85
+ <form id="form-register" autocomplete="off">
86
+ <div class="field">
87
+ <label>Username</label>
88
+ <input id="register-username" name="username" required>
89
+ </div>
90
+ <div class="field">
91
+ <label>Email</label>
92
+ <input id="register-email" name="email" type="email" required>
93
+ </div>
94
+ <div class="field">
95
+ <label>Password</label>
96
+ <input id="register-password" name="password" type="password" required>
97
+ </div>
98
+ <button id="btn-register" class="btn-primary" type="submit">Create account</button>
99
+ </form>
100
+
101
+ <div class="divider">already have an account?</div>
102
+ <button id="go-login" class="btn-secondary">Log in</button>
103
+ </section>
104
+
105
+ <!-- Password Reset Request -->
106
+ <section id="view-reset-request" class="auth-form">
107
+ <h2 class="form-title">Reset password</h2>
108
+ <p class="form-hint">Enter your email to receive a recovery link.</p>
109
+ <form id="form-reset-request">
110
+ <div class="field">
111
+ <label>Username or Email</label>
112
+ <input id="reset-request-identifier" name="identifier" required>
113
+ </div>
114
+ <button id="btn-submit-reset-request" class="btn-primary" type="submit">Send Reset Link</button>
115
+ </form>
116
+ <button id="go-login-from-reset" class="btn-ghost">Back to Login</button>
117
+ </section>
118
+
119
+ <!-- Password Reset Confirm -->
120
+ <section id="view-reset-confirm" class="auth-form">
121
+ <h2 class="form-title">Enter new password</h2>
122
+ <form id="form-reset-confirm">
123
+ <div class="field">
124
+ <label>Reset Token</label>
125
+ <input id="reset-token-input" name="token" required>
126
+ </div>
127
+ <div class="field">
128
+ <label>New Password</label>
129
+ <input id="reset-new-password" name="new_password" type="password" required>
130
+ </div>
131
+ <button id="btn-submit-reset-confirm" class="btn-primary" type="submit">Reset Password</button>
132
+ </form>
133
+ </section>
134
+ </div>
135
+ </section>
136
+
137
+ <!-- Dashboard View -->
138
+ <section id="view-dashboard" class="dash-main" style="display:none;">
139
+ <h2 class="tab-title">Security Dashboard</h2>
140
+ <p class="tab-desc">Manage your account security settings, passkeys, and active sessions.</p>
141
+
142
+ <div id="dashboard-user"></div>
143
+
144
+ <div class="security-card-grid">
145
+ <div class="security-block">
146
+ <h3>Passkeys</h3>
147
+ <p>Sign in securely using your device's biometric sensors.</p>
148
+ <div id="passkeys-list"></div>
149
+ <button id="btn-add-passkey" class="btn-passkey" style="margin-top:20px;">Add Passkey</button>
150
+ </div>
151
+
152
+ <div class="security-block">
153
+ <h3>Two-Factor Authentication</h3>
154
+ <p>Add an extra layer of security to your account.</p>
155
+ <div id="totp-setup-container"></div>
156
+ <div class="field" style="margin: 20px 0;">
157
+ <input id="totp-code" placeholder="Enter code">
158
+ </div>
159
+ <div class="btn-row">
160
+ <button id="btn-setup-2fa" class="btn-primary">Setup 2FA</button>
161
+ <button id="btn-confirm-2fa" class="btn-secondary" style="display:none;">Confirm</button>
162
+ <button id="btn-confirm-disable-2fa" class="btn-danger" style="display:none;">Disable</button>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="security-block">
168
+ <h3>Active Sessions</h3>
169
+ <p>Currently active sessions for your account.</p>
170
+ <div id="sessions-list"></div>
171
+ </div>
172
+
173
+ <div class="security-block">
174
+ <h3>API Keys</h3>
175
+ <p>Access our services programmatically.</p>
176
+ <div id="key-list-container"></div>
177
+ <div class="api-key-create-form" style="margin-top:20px;">
178
+ <div class="field">
179
+ <label for="api-key-name">Key Name</label>
180
+ <input id="api-key-name" placeholder="e.g. My Application">
181
+ </div>
182
+ <div class="field">
183
+ <label>Permissions</label>
184
+ <div class="permission-check-group">
185
+ <label class="check-item">
186
+ <input type="checkbox" name="api-perm" value="action:read" checked>
187
+ <span>Read Access</span>
188
+ </label>
189
+ <label class="check-item">
190
+ <input type="checkbox" name="api-perm" value="action:write">
191
+ <span>Write Access</span>
192
+ </label>
193
+ </div>
194
+ </div>
195
+ <button id="btn-create-key" class="btn-primary" style="width: 100%;">Create Key</button>
196
+ </div>
197
+
198
+ <div class="api-test-console" style="margin-top:40px; border-top: 1px solid var(--surface-raised); padding-top: 30px;">
199
+ <h4 style="margin-bottom: 15px;">Test API Interface</h4>
200
+ <div class="field">
201
+ <label>API Key</label>
202
+ <input id="test-api-key" placeholder="Paste your API key here">
203
+ </div>
204
+ <div class="field" style="margin-top: 15px;">
205
+ <label>Request Method</label>
206
+ <div class="method-tabs" style="margin-bottom: 10px;">
207
+ <button class="method-tab active" data-method="GET">GET</button>
208
+ <button class="method-tab" data-method="POST">POST</button>
209
+ </div>
210
+ </div>
211
+ <button id="btn-test-key" class="btn-secondary" style="width: 100%;">Test Request</button>
212
+ <div id="test-result-container" style="margin-top: 20px; display: none;">
213
+ <label>Response Content</label>
214
+ <pre id="test-result-log"></pre>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </section>
219
+
220
+ <!-- Profile View -->
221
+ <section id="view-profile" class="dash-main" style="display:none;">
222
+ <h2 class="tab-title">Profile Settings</h2>
223
+ <p class="tab-desc">Identity provided by AuthServer. Profile data managed by the application.</p>
224
+
225
+ <form id="form-profile" class="profile-form">
226
+ <div class="security-card-grid">
227
+ <div class="security-block">
228
+ <h3>Public Profile</h3>
229
+ <div class="field"><label>Display Name</label><input id="prof-display-name" name="display_name" placeholder="John Doe"></div>
230
+ <div class="field"><label>Bio</label><textarea id="prof-bio" name="bio" placeholder="Tell us about yourself..."></textarea></div>
231
+ <div class="field"><label>Location</label><input id="prof-location" name="location" placeholder="Auckland, NZ"></div>
232
+ <div class="field"><label>Website</label><input id="prof-website" name="website" placeholder="https://example.com"></div>
233
+ </div>
234
+
235
+ <div class="security-block">
236
+ <h3>App Preferences</h3>
237
+ <p class="form-hint">These settings are stored in the application database.</p>
238
+ <div class="field">
239
+ <label>Interface Theme</label>
240
+ <select id="prof-pref-theme" name="pref_theme">
241
+ <option value="system">System Default</option>
242
+ <option value="light">Always Light</option>
243
+ <option value="dark">Always Dark</option>
244
+ </select>
245
+ </div>
246
+ <div class="field">
247
+ <label class="check-item">
248
+ <input type="checkbox" id="prof-pref-notifications" name="pref_notifications">
249
+ <span>Enable Email Notifications</span>
250
+ </label>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <div style="margin-top: 30px;">
256
+ <button id="btn-save-profile" class="btn-primary" type="submit">Save All Settings</button>
257
+ </div>
258
+ </form>
259
+ </section>
260
+
261
+ </main>
262
+
263
+ <footer id="dev-mailbox" class="dev-mailbox">
264
+ <div class="mailbox-header">Developer Mailbox (Verification Codes)</div>
265
+ <div id="mailbox-body" class="mailbox-body">
266
+ <div class="empty-msg">No messages yet...</div>
267
+ </div>
268
+ </footer>
269
+
270
+ <script type="module" src="js/app.js"></script>
271
+ </body>
272
+ </html>