opentracker

opentracker/web/src/Settings.tsx
Settings.tsx
⎇
Raw
1import { createResource, createSignal, For, Show } from "solid-js";
2import { api, type TokenInfo } from "./api";
3import { ago } from "./live";
4import { useSession } from "./session";
5
6/**
7 * The only place individual phones are visible.
8 *
9 * Positions belong to the account, so a token is a credential and nothing else.
10 * Listing them with last-seen is what makes a forgotten phone in a drawer — the
11 * one that drags the live marker back and forth — visible and revocable.
12 */
13export default function Settings() {
14 const me = useSession().me;
15 const [tokens, { refetch }] = createResource(() => api.tokens());
16 const [message, setMessage] = createSignal<string | null>(null);
17 const now = Math.floor(Date.now() / 1000);
18
19 async function revoke(t: TokenInfo) {
20 if (!confirm(`Revoke "${t.name}"? That phone has to log in again.`)) return;
21 await api.revokeToken(t.token_id);
22 void refetch();
23 }
24
25 async function revokeOthers() {
26 if (!confirm("Revoke every device token on this account?")) return;
27 const { revoked } = await api.revokeOthers();
28 setMessage(`${revoked} token(s) revoked`);
29 void refetch();
30 }
31
32 return (
33 <main class="settings">
34 <section class="card">
35 <h2>account</h2>
36 <p class="muted">
37 {me.display_name} ({me.username}){me.is_admin ? " · admin" : ""}
38 </p>
39 <PasswordForm />
40 </section>
41
42 <section class="card">
43 <h2>devices</h2>
44 <Show when={message()}>{(m) => <p class="muted">{m()}</p>}</Show>
45 <For each={tokens()} fallback={<p class="muted">no devices logged in</p>}>
46 {(t) => (
47 <div class="token">
48 <div>
49 <strong>{t.name}</strong> <span class="muted">{t.platform}</span>
50 <div class="muted">
51 {t.last_seen_at ? `seen ${ago(t.last_seen_at, now)} ago` : "never seen"}
52 {t.last_src_ip ? ` · ${t.last_src_ip}` : ""}
53 {t.last_transport ? ` · ${t.last_transport}` : ""}
54 {t.os_api_level ? ` · API ${t.os_api_level}` : ""}
55 </div>
56 </div>
57 <button onClick={() => revoke(t)}>revoke</button>
58 </div>
59 )}
60 </For>
61 <button onClick={revokeOthers}>log out all devices</button>
62 </section>
63 </main>
64 );
65}
66
67function PasswordForm() {
68 const [current, setCurrent] = createSignal("");
69 const [next, setNext] = createSignal("");
70 const [status, setStatus] = createSignal<string | null>(null);
71
72 async function submit(e: Event) {
73 e.preventDefault();
74 try {
75 await api.changePassword(current(), next());
76 // Changing the password revokes every device token, by design.
77 setStatus("changed — every device must log in again");
78 setCurrent("");
79 setNext("");
80 } catch (e) {
81 setStatus(e instanceof Error ? e.message : String(e));
82 }
83 }
84
85 return (
86 <form class="password" onSubmit={submit}>
87 <input type="password" placeholder="current password" autocomplete="current-password" value={current()} onInput={(e) => setCurrent(e.currentTarget.value)} />
88 <input type="password" placeholder="new password (10+ characters)" autocomplete="new-password" value={next()} onInput={(e) => setNext(e.currentTarget.value)} />
89 <button>change password</button>
90 <Show when={status()}>{(s) => <p class="muted">{s()}</p>}</Show>
91 </form>
92 );
93}
94