konnosDashboard
delete-secret-section.tsx339 lines · main
1'use client';
2
3import { useRouter } from 'next/navigation';
4import { useMemo, useState, useTransition } from 'react';
5
6interface Props {
7 hasDeleteSecret: boolean;
8 deleteSecretSetAt: string | null;
9 apiOrigin: string;
10}
11
12const MASK = '••••••••••••';
13
14/** The four live secret rules, enforced in the UI as the user types. */
15function checkRules(secret: string) {
16 return {
17 length: secret.length >= 12,
18 capital: /[A-Z]/.test(secret),
19 number: /[0-9]/.test(secret),
20 special: /[^A-Za-z0-9]/.test(secret),
21 };
22}
23
24/** Minimal inline eye toggle to flip a password input to plain text. */
25function EyeToggle({ shown, onClick }: { shown: boolean; onClick: () => void }) {
26 return (
27 <button
28 type="button"
29 onClick={onClick}
30 aria-label={shown ? 'hide' : 'show'}
31 title={shown ? 'hide' : 'show'}
32 className="font-mono text-[10px] uppercase tracking-wider text-[var(--color-text-subtle)] transition hover:text-[var(--color-text)]"
33 >
34 {shown ? 'hide' : 'show'}
35 </button>
36 );
37}
38
39/**
40 * Account "delete secret" management. The delete secret is a separate
41 * credential (not the account password) the api confirms destructive
42 * actions against. Two states:
43 * - no secret yet → a CREATE form with live rule checklist + match check.
44 * - secret set → a MASKED panel that can reveal/copy on demand (the
45 * plaintext is never fetched on load — only when the user asks).
46 */
47export function DeleteSecretSection({ hasDeleteSecret, deleteSecretSetAt, apiOrigin }: Props) {
48 if (hasDeleteSecret) {
49 return <MaskedPanel deleteSecretSetAt={deleteSecretSetAt} apiOrigin={apiOrigin} />;
50 }
51 return <CreateForm apiOrigin={apiOrigin} />;
52}
53
54function CreateForm({ apiOrigin }: { apiOrigin: string }) {
55 const router = useRouter();
56 const [secret, setSecret] = useState('');
57 const [confirm, setConfirm] = useState('');
58 const [showSecret, setShowSecret] = useState(false);
59 const [showConfirm, setShowConfirm] = useState(false);
60 const [error, setError] = useState<string | null>(null);
61 const [pending, startTransition] = useTransition();
62
63 const rules = useMemo(() => checkRules(secret), [secret]);
64 const allRulesPass = rules.length && rules.capital && rules.number && rules.special;
65 const matches = confirm.length > 0 && secret === confirm;
66 const canSubmit = allRulesPass && matches && !pending;
67
68 function onSubmit() {
69 if (!canSubmit) return;
70 setError(null);
71 startTransition(async () => {
72 try {
73 const res = await fetch(`${apiOrigin}/v1/me/delete-secret`, {
74 method: 'POST',
75 headers: { 'content-type': 'application/json' },
76 credentials: 'include',
77 body: JSON.stringify({ secret }),
78 });
79 if (res.status === 201) {
80 router.refresh();
81 return;
82 }
83 if (res.status === 409) {
84 setError('you already have a delete secret');
85 return;
86 }
87 const body = (await res.json().catch(() => null)) as { message?: string } | null;
88 if (res.status === 400) {
89 setError(body?.message || 'that secret is not valid');
90 return;
91 }
92 setError(body?.message || `request failed (${res.status})`);
93 } catch (err) {
94 setError(err instanceof Error ? err.message : 'request failed');
95 }
96 });
97 }
98
99 return (
100 <div className="mt-4 flex max-w-md flex-col gap-3 rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-surface-raised)] p-4">
101 <label className="flex flex-col gap-1.5">
102 <span className="font-mono text-[10px] uppercase tracking-wider text-[var(--color-text-subtle)]">
103 delete secret
104 </span>
105 <div className="flex items-center gap-2 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 focus-within:border-[var(--color-primary)]">
106 <input
107 type={showSecret ? 'text' : 'password'}
108 autoComplete="new-password"
109 value={secret}
110 onChange={(e) => setSecret(e.currentTarget.value)}
111 className="min-w-0 flex-1 bg-transparent text-sm text-[var(--color-text)] outline-none"
112 />
113 <EyeToggle shown={showSecret} onClick={() => setShowSecret((s) => !s)} />
114 </div>
115 </label>
116
117 <ul className="flex flex-col gap-1 font-mono text-[11px]">
118 <RuleLine ok={rules.length} label="12+ characters" />
119 <RuleLine ok={rules.capital} label="a capital letter" />
120 <RuleLine ok={rules.number} label="a number" />
121 <RuleLine ok={rules.special} label="a special character" />
122 </ul>
123
124 <label className="flex flex-col gap-1.5">
125 <span className="font-mono text-[10px] uppercase tracking-wider text-[var(--color-text-subtle)]">
126 confirm
127 </span>
128 <div className="flex items-center gap-2 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 focus-within:border-[var(--color-primary)]">
129 <input
130 type={showConfirm ? 'text' : 'password'}
131 autoComplete="new-password"
132 value={confirm}
133 onChange={(e) => setConfirm(e.currentTarget.value)}
134 className="min-w-0 flex-1 bg-transparent text-sm text-[var(--color-text)] outline-none"
135 />
136 <EyeToggle shown={showConfirm} onClick={() => setShowConfirm((s) => !s)} />
137 </div>
138 {confirm.length > 0 ? (
139 matches ? (
140 <span className="font-mono text-[11px] text-[var(--color-primary)]">match ✓</span>
141 ) : (
142 <span className="font-mono text-[11px] text-red-400">doesn&apos;t match yet</span>
143 )
144 ) : null}
145 </label>
146
147 <div className="flex flex-wrap items-center gap-3 pt-1">
148 <button
149 type="button"
150 disabled={!canSubmit}
151 onClick={onSubmit}
152 className="rounded-md bg-[var(--color-primary)] px-3 py-1.5 text-xs font-medium text-[var(--color-text-inverse)] transition hover:bg-[var(--color-primary-hover)] disabled:opacity-40"
153 >
154 {pending ? 'saving…' : 'save delete secret'}
155 </button>
156 {error ? (
157 <span role="alert" className="text-xs text-red-400">
158 {error}
159 </span>
160 ) : null}
161 </div>
162 </div>
163 );
164}
165
166function RuleLine({ ok, label }: { ok: boolean; label: string }) {
167 return (
168 <li
169 className={ok ? 'text-[var(--color-primary)]' : 'text-[var(--color-text-subtle)]'}
170 >
171 <span aria-hidden="true">{ok ? '✓' : '✗'}</span> {label}
172 </li>
173 );
174}
175
176function MaskedPanel({
177 deleteSecretSetAt,
178 apiOrigin,
179}: {
180 deleteSecretSetAt: string | null;
181 apiOrigin: string;
182}) {
183 const router = useRouter();
184 const [revealed, setRevealed] = useState<string | null>(null);
185 const [copied, setCopied] = useState(false);
186 const [busy, setBusy] = useState(false);
187 const [error, setError] = useState<string | null>(null);
188 const [resetting, startResetTransition] = useTransition();
189
190 /** Fetch and cache the plaintext secret once; reused by reveal + copy. */
191 async function fetchSecret(): Promise<string | null> {
192 if (revealed !== null) return revealed;
193 setError(null);
194 setBusy(true);
195 try {
196 const res = await fetch(`${apiOrigin}/v1/me/delete-secret/reveal`, {
197 method: 'POST',
198 credentials: 'include',
199 });
200 if (res.status === 404) {
201 setError('no delete secret found');
202 return null;
203 }
204 if (!res.ok) {
205 setError(`reveal failed (${res.status})`);
206 return null;
207 }
208 const body = (await res.json()) as { secret: string };
209 setRevealed(body.secret);
210 return body.secret;
211 } catch (err) {
212 setError(err instanceof Error ? err.message : 'reveal failed');
213 return null;
214 } finally {
215 setBusy(false);
216 }
217 }
218
219 async function onReveal() {
220 if (revealed !== null) {
221 setRevealed(null);
222 return;
223 }
224 await fetchSecret();
225 }
226
227 async function onCopy() {
228 const value = await fetchSecret();
229 if (!value) return;
230 try {
231 await navigator.clipboard.writeText(value);
232 setCopied(true);
233 setTimeout(() => setCopied(false), 2000);
234 } catch {
235 setError('could not copy to clipboard');
236 }
237 }
238
239 function onReset() {
240 if (!window.confirm('Remove your delete secret? You will need to set a new one.')) return;
241 setError(null);
242 startResetTransition(async () => {
243 try {
244 const res = await fetch(`${apiOrigin}/v1/me/delete-secret`, {
245 method: 'DELETE',
246 credentials: 'include',
247 });
248 if (!res.ok) {
249 setError(`reset failed (${res.status})`);
250 return;
251 }
252 router.refresh();
253 } catch (err) {
254 setError(err instanceof Error ? err.message : 'reset failed');
255 }
256 });
257 }
258
259 const setOn = deleteSecretSetAt ? deleteSecretSetAt.slice(0, 10) : null;
260
261 return (
262 <div className="mt-4 flex max-w-md flex-col gap-3 rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-surface-raised)] p-4">
263 <div className="flex items-center gap-2 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2">
264 <code className="min-w-0 flex-1 break-all font-mono text-sm text-[var(--color-text)]">
265 {revealed ?? MASK}
266 </code>
267 <button
268 type="button"
269 onClick={onReveal}
270 disabled={busy}
271 aria-label={revealed ? 'hide' : 'reveal'}
272 title={revealed ? 'hide' : 'reveal'}
273 className="font-mono text-[10px] uppercase tracking-wider text-[var(--color-text-subtle)] transition hover:text-[var(--color-text)] disabled:opacity-40"
274 >
275 {busy && revealed === null ? '…' : revealed ? 'hide' : 'reveal'}
276 </button>
277 <button
278 type="button"
279 onClick={onCopy}
280 disabled={busy}
281 aria-label={copied ? 'copied' : 'copy'}
282 title={copied ? 'copied!' : 'copy'}
283 className="inline-flex shrink-0 items-center rounded-md p-1 text-[var(--color-text-subtle)] transition hover:text-[var(--color-text)] disabled:opacity-40"
284 >
285 {copied ? (
286 <svg
287 width={14}
288 height={14}
289 viewBox="0 0 24 24"
290 fill="none"
291 stroke="currentColor"
292 strokeWidth="3"
293 strokeLinecap="round"
294 strokeLinejoin="round"
295 className="text-[var(--color-primary)]"
296 aria-hidden="true"
297 >
298 <path d="M20 6 9 17l-5-5" />
299 </svg>
300 ) : (
301 <svg
302 width={14}
303 height={14}
304 viewBox="0 0 24 24"
305 fill="none"
306 stroke="currentColor"
307 strokeWidth="2"
308 strokeLinecap="round"
309 strokeLinejoin="round"
310 aria-hidden="true"
311 >
312 <rect x="8" y="8" width="14" height="14" rx="2" ry="2" />
313 <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
314 </svg>
315 )}
316 </button>
317 </div>
318
319 {setOn ? (
320 <p className="font-mono text-[11px] text-[var(--color-text-subtle)]">set on {setOn}</p>
321 ) : null}
322
323 {error ? (
324 <span role="alert" className="text-xs text-red-400">
325 {error}
326 </span>
327 ) : null}
328
329 <button
330 type="button"
331 onClick={onReset}
332 disabled={resetting}
333 className="self-start font-mono text-[10px] text-[var(--color-text-subtle)] underline transition hover:text-[var(--color-text)] disabled:opacity-40"
334 >
335 {resetting ? 'resetting…' : 'reset'}
336 </button>
337 </div>
338 );
339}