mobux 0.6.0

A touch-friendly tmux web UI for unhinged people who run terminal sessions from their phone while walking the dog
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

// Install / onboarding page. Ports the Rust-rendered /install page with
// client-side QR codes (uqr → inline SVG), so a desktop visitor can scan
// download URLs from a phone without switching to the server /install page.
//
// QR codes encode the absolute download URL derived from window.location,
// matching what the server does from the request Host header.

import { useEffect, useState } from "preact/hooks";
import { renderSVG } from "uqr";

function QrCode({ url }) {
  const svg = renderSVG(url, {
    pixelSize: 4,
    whiteColor: "#ffffff",
    blackColor: "#0f1115",
  });
  return (
    <div
      class="install-qr"
      // biome-ignore lint/security/noDangerouslySetInnerHtml: trusted SVG from uqr encoding a same-host URL
      dangerouslySetInnerHTML={{ __html: svg }}
    />
  );
}

function origin() {
  if (typeof window === "undefined") return "https://localhost";
  return window.location.origin;
}

export function InstallPage() {
  const base = origin();
  const apkUrl = base + "/install/mobux.apk";
  const caUrl = base + "/install/mobux-ca.crt";

  return (
    <main class="install-page">
      <section class="install-card">
        <h2>1. Install the CA certificate</h2>
        <p class="install-lede">
          Do this <strong>first</strong>. Without the CA, Android won't trust
          this server, the APK download will be blocked, and the installed app
          won't connect.
        </p>
        <div class="install-grid">
          <a class="install-btn" href="/install/mobux-ca.crt" download>
            Download CA certificate
          </a>
          <QrCode url={caUrl} />
        </div>
        <p class="install-hint">
          After downloading, install it through Android Settings:
        </p>
        <ol class="install-steps">
          <li>Settings → Security &amp; privacy (or just Security)</li>
          <li>More security settings → Encryption &amp; credentials</li>
          <li>Install a certificate → CA certificate</li>
          <li>
            Acknowledge the warning, pick <code>mobux-ca.crt</code> from your
            Downloads
          </li>
        </ol>
        <p class="install-hint">
          Running with ACME / a publicly-trusted cert? Skip this step — there's
          no local CA to install.
        </p>
      </section>

      <section class="install-card">
        <h2>2. Install the app</h2>
        <p class="install-lede">
          Download the Android APK, or scan the QR with your phone.
        </p>
        <div class="install-grid">
          <a class="install-btn" href="/install/mobux.apk" download>
            Download APK
          </a>
          <QrCode url={apkUrl} />
        </div>
        <p class="install-hint">
          If the APK isn't built yet, run <code>make twa</code> on the server.
        </p>
      </section>
    </main>
  );
}