homeio

1import "./styles.css";
2import { App } from "@capacitor/app";
3import { normalizeAddress, probeServer } from "./connect";
4import {
5  loadServers,
6  markConnected,
7  newServerId,
8  removeServer,
9  upsertServer,
10  type SavedServer,
11} from "./storage";
12
13const root = document.getElementById("app");
14if (!root) throw new Error("Missing #app root");
15
16let servers: SavedServer[] = [];
17let busy = false;
18
19async function init() {
20  servers = await loadServers();
21  render();
22
23  // Android hardware back button: while on the launcher there's nothing to go
24  // back to, so exit the app. (Once navigated onto a server origin, the WebView
25  // handles its own history.)
26  App.addListener("backButton", () => {
27    void App.exitApp();
28  });
29}
30
31function setBusy(value: boolean) {
32  busy = value;
33  render();
34}
35
36async function handleAdd(form: HTMLFormElement) {
37  const data = new FormData(form);
38  const addressRaw = String(data.get("address") ?? "");
39  const username = String(data.get("username") ?? "").trim();
40  const labelRaw = String(data.get("label") ?? "").trim();
41
42  const normalized = normalizeAddress(addressRaw);
43  if (!normalized.ok) {
44    showError(normalized.error);
45    return;
46  }
47
48  setBusy(true);
49  const probe = await probeServer(normalized.origin);
50  if (!probe.ok) {
51    setBusy(false);
52    showError(probe.error);
53    return;
54  }
55
56  const server: SavedServer = {
57    id: newServerId(),
58    label: labelRaw || normalized.host,
59    address: normalized.origin,
60    username: username || undefined,
61  };
62  servers = await upsertServer(server);
63  setBusy(false);
64  await connect(server);
65}
66
67async function connect(server: SavedServer) {
68  setBusy(true);
69  const probe = await probeServer(server.address);
70  if (!probe.ok) {
71    setBusy(false);
72    showError(probe.error);
73    return;
74  }
75  await markConnected(server.id);
76  // Navigate the WebView onto the server's own origin. From here the existing
77  // Homeio web app runs first-party: its `/login` page handles username +
78  // password (and TOTP), and the session cookie is stored for this origin.
79  window.location.href = server.address;
80}
81
82async function handleRemove(id: string) {
83  servers = await removeServer(id);
84  render();
85}
86
87function showError(message: string) {
88  const el = document.getElementById("error");
89  if (el) {
90    el.textContent = message;
91    el.hidden = false;
92  }
93}
94
95function render() {
96  const sorted = [...servers].sort(
97    (a, b) => (b.lastConnectedAt ?? 0) - (a.lastConnectedAt ?? 0),
98  );
99
100  root!.innerHTML = `
101    <main class="screen">
102      <header class="brand">
103        <h1>Homeio</h1>
104        <p class="subtitle">Connect to your home server over Tailscale</p>
105      </header>
106
107      <p id="error" class="error" hidden></p>
108
109      ${
110        sorted.length
111          ? `<section class="servers" aria-label="Saved servers">
112              ${sorted.map(renderServerCard).join("")}
113            </section>`
114          : `<p class="empty">No servers yet. Add your Homeio server below.</p>`
115      }
116
117      <form id="add-form" class="add-form" novalidate>
118        <h2>Add a server</h2>
119        <label>
120          <span>Server address</span>
121          <input
122            name="address"
123            inputmode="url"
124            autocapitalize="none"
125            autocorrect="off"
126            spellcheck="false"
127            placeholder="homeio.tailnet-name.ts.net:3000"
128            required
129          />
130        </label>
131        <label>
132          <span>Name <em>(optional)</em></span>
133          <input name="label" placeholder="Home server" autocapitalize="words" />
134        </label>
135        <label>
136          <span>Username <em>(optional)</em></span>
137          <input
138            name="username"
139            autocapitalize="none"
140            autocorrect="off"
141            spellcheck="false"
142            placeholder="admin"
143          />
144        </label>
145        <button type="submit" ${busy ? "disabled" : ""}>
146          ${busy ? "Connecting…" : "Add &amp; Connect"}
147        </button>
148        <p class="hint">
149          You'll sign in with your password on the next screen. Make sure the
150          Tailscale app is connected first.
151        </p>
152      </form>
153    </main>
154  `;
155
156  const form = document.getElementById("add-form") as HTMLFormElement | null;
157  form?.addEventListener("submit", (e) => {
158    e.preventDefault();
159    if (!busy) void handleAdd(form);
160  });
161
162  root!.querySelectorAll<HTMLButtonElement>("[data-connect]").forEach((btn) => {
163    btn.addEventListener("click", () => {
164      const server = servers.find((s) => s.id === btn.dataset.connect);
165      if (server && !busy) void connect(server);
166    });
167  });
168
169  root!.querySelectorAll<HTMLButtonElement>("[data-remove]").forEach((btn) => {
170    btn.addEventListener("click", () => {
171      const id = btn.dataset.remove;
172      if (id) void handleRemove(id);
173    });
174  });
175}
176
177function renderServerCard(server: SavedServer): string {
178  const meta = server.username ? `${server.username} · ${server.address}` : server.address;
179  return `
180    <article class="server-card">
181      <button class="server-main" data-connect="${server.id}" ${busy ? "disabled" : ""}>
182        <span class="server-label">${escapeHtml(server.label)}</span>
183        <span class="server-meta">${escapeHtml(meta)}</span>
184      </button>
185      <button
186        class="server-remove"
187        data-remove="${server.id}"
188        aria-label="Remove ${escapeHtml(server.label)}"
189      >✕</button>
190    </article>
191  `;
192}
193
194function escapeHtml(value: string): string {
195  return value
196    .replace(/&/g, "&amp;")
197    .replace(/</g, "&lt;")
198    .replace(/>/g, "&gt;")
199    .replace(/"/g, "&quot;");
200}
201
202void init();
203