1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{.CSRFToken}}">
<title>Settings - Task Dashboard</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="stylesheet" href="/static/css/output.css">
<script src="/static/js/htmx.min.js"></script>
<style>
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
</style>
</head>
<body class="bg-slate-950 text-slate-200 min-h-screen p-4 sm:p-8" hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
<div class="max-w-4xl mx-auto">
<a href="/" class="inline-block mb-6 text-slate-400 hover:text-white transition-colors">← Back to Dashboard</a>
<h1 class="text-4xl font-light text-white mb-2 tracking-tight">Settings</h1>
<p class="text-slate-400 mb-10">Configure feature toggles and data sources.</p>
<!-- Feature Toggles Section -->
<section class="mb-12">
<h2 class="text-xl font-medium text-white mb-6 pb-2 border-b border-white/10">Feature Toggles</h2>
<div class="grid gap-4" id="toggles-list">
{{if .Toggles}}
{{range .Toggles}}
<div class="card flex items-center gap-4" id="toggle-{{.Name}}">
<div class="flex-1">
<strong class="text-white">{{.Name}}</strong>
{{if .Description}}<div class="text-sm text-slate-400">{{.Description}}</div>{{end}}
</div>
<div class="flex items-center gap-6">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer"
{{if .Enabled}}checked{{end}}
hx-post="/settings/features/toggle"
hx-vals='{"name": "{{.Name}}", "enabled": "{{if .Enabled}}false{{else}}true{{end}}"}'
hx-swap="none"
hx-on::after-request="this.checked = !this.checked; if(event.detail.successful) this.checked = !this.checked;">
<div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
<button class="text-xs text-red-400 hover:text-red-300 transition-colors"
hx-delete="/settings/features/{{.Name}}"
hx-target="#toggle-{{.Name}}"
hx-swap="outerHTML"
hx-confirm="Delete feature toggle '{{.Name}}'?">
Delete
</button>
</div>
</div>
{{end}}
{{else}}
<div class="card text-center text-slate-500 py-10">No feature toggles configured.</div>
{{end}}
</div>
<form class="mt-4 flex flex-wrap gap-3 p-4 bg-slate-900/40 rounded-xl border border-white/5" hx-post="/settings/features" hx-target="#toggles-list" hx-swap="beforeend">
<input type="text" name="name" placeholder="Feature name (snake_case)" required pattern="[a-z_]+"
class="flex-1 bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-sm focus:ring-1 focus:ring-blue-500 outline-none">
<input type="text" name="description" placeholder="Description (optional)"
class="flex-[2] bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-sm focus:ring-1 focus:ring-blue-500 outline-none">
<button type="submit" class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors">Add Toggle</button>
</form>
</section>
<!-- Passkeys Section -->
{{if .WebAuthnEnabled}}
<section class="mb-12" id="passkeys-card-section">
<h2 class="text-xl font-medium text-white mb-6 pb-2 border-b border-white/10">Passkeys</h2>
<div id="passkeys-list" hx-get="/settings/passkeys" hx-trigger="load" hx-swap="innerHTML" class="grid gap-4">
<div class="card text-center text-slate-500 py-10">Loading passkeys...</div>
</div>
<div class="mt-4 flex flex-wrap gap-3 p-4 bg-slate-900/40 rounded-xl border border-white/5" id="passkey-register-form">
<input type="text" id="passkey-name" placeholder="Passkey name (e.g., MacBook Touch ID)" maxlength="100"
class="flex-1 bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-sm focus:ring-1 focus:ring-blue-500 outline-none">
<button type="button" class="bg-slate-700 hover:bg-slate-600 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors" id="register-passkey-btn">Register New Passkey</button>
</div>
<p id="passkey-status" class="mt-3 text-sm text-slate-400 hidden"></p>
</section>
<script>
(function() {
if (!window.PublicKeyCredential) {
var section = document.getElementById('passkeys-card-section');
if (section) section.style.display = 'none';
return;
}
document.getElementById('register-passkey-btn').addEventListener('click', async function() {
const btn = this;
const statusEl = document.getElementById('passkey-status');
const nameInput = document.getElementById('passkey-name');
const name = nameInput.value.trim() || 'Passkey';
btn.disabled = true;
statusEl.style.display = 'block';
statusEl.className = 'mt-3 text-sm text-slate-400';
statusEl.textContent = 'Starting registration...';
try {
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
const beginResp = await fetch('/passkeys/register/begin', {
method: 'POST',
headers: {'X-CSRF-Token': csrfToken}
});
if (!beginResp.ok) throw new Error('Failed to start registration');
const options = await beginResp.json();
options.publicKey.challenge = base64urlToBuffer(options.publicKey.challenge);
options.publicKey.user.id = base64urlToBuffer(options.publicKey.user.id);
if (options.publicKey.excludeCredentials) {
options.publicKey.excludeCredentials = options.publicKey.excludeCredentials.map(c => ({
...c, id: base64urlToBuffer(c.id)
}));
}
statusEl.textContent = 'Waiting for passkey...';
const credential = await navigator.credentials.create(options);
const body = JSON.stringify({
id: credential.id,
rawId: bufferToBase64url(credential.rawId),
type: credential.type,
response: {
attestationObject: bufferToBase64url(credential.response.attestationObject),
clientDataJSON: bufferToBase64url(credential.response.clientDataJSON)
}
});
const finishResp = await fetch('/passkeys/register/finish?name=' + encodeURIComponent(name), {
method: 'POST',
headers: {'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken},
body: body
});
if (!finishResp.ok) throw new Error('Registration failed');
statusEl.className = 'mt-3 text-sm text-green-400';
statusEl.textContent = 'Passkey registered successfully!';
nameInput.value = '';
htmx.trigger('#passkeys-list', 'load');
} catch (e) {
statusEl.className = 'mt-3 text-sm text-red-400';
if (e.name === 'NotAllowedError') {
statusEl.textContent = 'Registration was cancelled.';
} else {
statusEl.textContent = e.message || 'Registration failed.';
}
}
btn.disabled = false;
});
function base64urlToBuffer(base64url) {
const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
const pad = base64.length % 4 === 0 ? '' : '='.repeat(4 - (base64.length % 4));
const binary = atob(base64 + pad);
return Uint8Array.from(binary, c => c.charCodeAt(0)).buffer;
}
function bufferToBase64url(buffer) {
const bytes = new Uint8Array(buffer);
let binary = '';
for (const b of bytes) binary += String.fromCharCode(b);
return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
}
})();
</script>
{{end}}
<!-- Data Sources Section -->
<section class="mb-12">
<div class="flex flex-wrap items-center justify-between gap-4 mb-6 pb-2 border-b border-white/10">
<h2 class="text-xl font-medium text-white">Data Sources</h2>
<div class="flex gap-3">
<form hx-post="/settings/sync" hx-swap="outerHTML" hx-target="#sources-container" hx-indicator=".sync-indicator">
<button type="submit" class="text-sm bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-lg transition-colors">
<span class="sync-indicator htmx-indicator mr-2">Syncing...</span>
Sync Available Sources
</button>
</form>
<button class="text-sm border border-red-500/30 text-red-400 hover:bg-red-500/10 px-4 py-2 rounded-lg transition-colors"
hx-post="/settings/clear-cache"
hx-target="#sync-log"
hx-swap="outerHTML"
hx-confirm="Clear all cached data? Next page load will fetch fresh data from all sources.">
Clear Cache
</button>
</div>
</div>
{{template "sync-log" .SyncLog}}
<div id="sources-container" class="grid gap-8 mt-8">
{{range .Sources}}
<div class="space-y-4">
<h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 flex items-center gap-2">
{{if eq . "trello"}}Trello Boards{{else if eq . "todoist"}}Todoist Projects{{else if eq . "gcal"}}Google Calendars{{else if eq . "gtasks"}}Google Task Lists{{else}}{{.}}{{end}}
</h3>
<div class="grid gap-3 sm:grid-cols-2">
{{$configs := index $.Configs .}}
{{if $configs}}
{{range $configs}}
<div class="card flex items-center gap-4">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer"
{{if .Enabled}}checked{{end}}
hx-post="/settings/toggle"
hx-vals='{"source": "{{.Source}}", "item_type": "{{.ItemType}}", "item_id": "{{.ItemID}}", "enabled": "{{if .Enabled}}false{{else}}true{{end}}"}'
hx-swap="none"
hx-on::after-request="this.checked = !this.checked; if(event.detail.successful) this.checked = !this.checked;">
<div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
<div class="flex-1 min-w-0">
<div class="text-white truncate" title="{{.ItemName}}">{{.ItemName}}</div>
<div class="text-[10px] text-slate-500 font-mono truncate" title="{{.ItemID}}">{{.ItemID}}</div>
</div>
</div>
{{end}}
{{else}}
<div class="card col-span-full text-center text-slate-500 py-6 text-sm italic">
No items found. Click "Sync Available Sources" to fetch.
</div>
{{end}}
</div>
</div>
{{end}}
</div>
</section>
</div>
</body>
</html>
|
