magpie-page-token-widget 0.2.0 → 0.3.3

package/ui/app.js

@@ -1,3 +1,5 @@
+import { pairingLeft, remainingText } from './timing.mjs';
+
 (() => {
   const token = document.querySelector('meta[name="service-token"]')?.content || '';
   let current = null;
@@ -28,7 +30,16 @@
         ...(options.headers || {}),
       },
     });
-    if (!response.ok) throw new Error(`request failed: ${response.status}`);
+    if (!response.ok) {
+      let message = `request failed: ${response.status}`;
+      try {
+        const body = await response.json();
+        if (body && body.error) message = body.error;
+      } catch {
+        // The answer is not json; the number is all there is.
+      }
+      throw new Error(message);
+    }
     return response.json();
   };
 
@@ -71,9 +82,10 @@
     const list = element(target);
     if (!list) return;
     list.replaceChildren();
-    for (const [name, value] of rows) {
+    for (const [name, value, cellId] of rows) {
       list.append(node('dt', null, name));
       const cell = node('dd');
+      if (cellId) cell.id = cellId;
       if (value instanceof Node) cell.append(value);
       else cell.textContent = value === undefined || value === null || value === '' ? '—' : String(value);
       list.append(cell);
@@ -105,10 +117,101 @@
         tailnet.ios?.length ? tailnet.ios.map((phone) => phone.name).join('、') : '没有看到',
       ],
       ['Magpie 网关', mono(state.upstream || '—')],
-      ['旧版共享令牌', state.token ? '••••••••••••••••' : '已经撤掉'],
     ]);
   };
 
+  // The user may have a network of his own: a Headscale of his own, a
+  // server of his own, a tunnel of his own. The address the phone is told to
+  // use is written down here, and the phone side may listen on an address of
+  // this computer.
+  const renderOwnNetwork = (state) => {
+    const external = state.external || {};
+    const field = element('external');
+    if (field && document.activeElement !== field) field.value = external.url || '';
+    const note = element('externalNote');
+    if (note) {
+      const parts = [];
+      const mode = external.mode || 'tailscale';
+      if (mode === 'tailscale') {
+        parts.push('现在的连法：Tailscale。手机从尾网地址连进来。');
+      } else if (mode === 'https') {
+        parts.push(`现在的连法：自己的 HTTPS 地址 ${external.url}。数据是加密的，令牌也走在加密里。`);
+      } else if (mode === 'lan') {
+        parts.push(`现在的连法：自己的内网 ${external.url}。`);
+      } else {
+        parts.push(`现在的连法：自己的地址 ${external.url}。`);
+      }
+      if (external.url && mode !== 'tailscale') {
+        parts.push('留空就用 Tailscale 的地址。');
+      }
+      if (external.listenAddress) {
+        parts.push(`手机那一侧的端口已经在 ${external.listenAddress} 上打开。`);
+      }
+      if (external.error) parts.push(external.error);
+      if (external.listenError) parts.push(external.listenError);
+      if (mode !== 'https') {
+        parts.push('这条路上的数据是明文的 HTTP，令牌就走在里面；iPhone 会问你要「本地网络」的权限。');
+      }
+      parts.push('只有 HTTPS 地址可以随便写域名；明文 HTTP 只认内网地址、Tailscale 地址和本机回环地址。');
+      note.textContent = parts.join(' ');
+    }
+    const list = element('bindList');
+    if (!list) return;
+    list.replaceChildren();
+    const candidates = external.candidates || [];
+    if (!candidates.length) {
+      list.append(node('p', 'note', '没有找到这台电脑上可以给手机用的地址。'));
+      return;
+    }
+    for (const item of candidates) {
+      const row = node('div', 'row');
+      row.append(node('strong', null, item.name));
+      row.append(node('span', 'tag', KIND_LABEL[item.kind] || KIND_LABEL.other));
+      row.append(node('span', 'mono', item.address));
+      const use = node('button', null, '手机从这里连');
+      use.type = 'button';
+      use.addEventListener('click', () => { void useOwnAddress(item.address); });
+      row.append(use);
+      list.append(row);
+    }
+  };
+
+  // The phone is told to go to an address of this computer, and the phone
+  // side starts listening there.
+  const useOwnAddress = async (address) => {
+    try {
+      const port = current?.phonePort;
+      const host = address.includes(':') ? `[${address}]` : address;
+      const url = port ? `http://${host}:${port}` : '';
+      const before = current?.external?.url || '';
+      if (before && before !== url && !window.confirm(`把手机换成 ${url}？原来填的地址会换掉。`)) return;
+      await api('api/v1/console/options', {
+        method: 'POST',
+        body: JSON.stringify({
+          listenAddress: address,
+          externalURL: url,
+        }),
+      });
+      await load();
+    } catch (error) {
+      text('externalNote', error.message || '这个地址没有用。');
+    }
+  };
+
+  const saveOwnAddress = async () => {
+    const field = element('external');
+    if (!field) return;
+    try {
+      await api('api/v1/console/options', {
+        method: 'POST',
+        body: JSON.stringify({ externalURL: field.value.trim() }),
+      });
+      await load();
+    } catch (error) {
+      text('externalNote', error.message || '这个地址写不了。');
+    }
+  };
+
   const renderNetwork = (state) => {
     const tailnet = state.tailnet || {};
     fillFacts('netFacts', [
@@ -187,7 +290,7 @@
       meta.textContent = [
         `配对于 ${timeOf(device.createdAt)}`,
         `最后访问 ${device.lastAccessAt ? timeOf(device.lastAccessAt) : '还没有'}`,
-        device.legacy ? '旧版共享令牌' : '独立令牌',
+        '独立令牌',
         device.revokedAt ? `已撤销（${timeOf(device.revokedAt)}）` : '',
       ]
         .filter(Boolean)
@@ -275,10 +378,17 @@
       ['服务端口', mono(String(state.port ?? '—'))],
       ['手机端口', mono(String(state.phonePort ?? '—'))],
       ['Magpie 网关', mono(state.upstream || '—')],
-      ['配对码剩余时间', `${Math.max(0, Math.round((state.pairingExpiresIn || 0) / 60))} 分钟`],
+      ['配对码剩余时间', remainingText(pairingLeft(state)), 'pairRemaining'],
       ['本插件的转发', forward.owned ? mono(`${forward.owned.publishedPort} → ${forward.owned.target}`) : '还没有记录'],
       ['配对记录', `${(state.paired || []).length} 条`],
     ]);
+    text(
+      'portNote',
+      '端口和网关都是 Magpie 启动这个插件时给的参数：插件改不了自己听的端口，也改不了它去读的 Magpie，' +
+        '所以它们在这里只看不改。要换，在 Magpie 的插件设置里改' +
+        '（magpie plugin options magpie-page-token-widget \'{"port":8890,"gatewayURL":"http://127.0.0.1:3500"}\'），' +
+        '改完重启 Magpie；手机那边的地址带着端口，换了端口手机要重新配对一次。'
+    );
   };
 
   const renderSubscriptions = (state) => {
@@ -296,6 +406,15 @@
       input.value = subscription.id;
       input.checked = all || chosen.has(family) || chosen.has(subscription.id);
       label.append(input, document.createTextNode(subscription.label || subscription.id));
+      // The small widget is told which card to show with a parameter. The
+      // names it understands are written here, so an old one (an account that
+      // was renamed) can be seen and replaced.
+      const names = [subscription.provider || subscription.id];
+      if (subscription.account) names.push(subscription.id);
+      const hint = document.createElement('span');
+      hint.className = 'tag';
+      hint.textContent = '参数 ' + names.join(' / ');
+      label.append(document.createTextNode(' · '), hint);
       list.append(label);
     }
     list.onchange = async () => {
@@ -337,44 +456,94 @@
     };
   };
 
-  const render = (state) => {
-    current = state;
+  const renderPairing = (state) => {
     const qr = element('qr');
     if (qr && state.qr) qr.src = state.qr;
     if (qr && !state.qr) qr.closest('.qr')?.classList.add('empty');
     text('pairingURL', state.pairingURL || '还没有找到 Tailscale 地址');
-    const minutes = Math.max(0, Math.round((state.pairingExpiresIn || 0) / 60));
     const blocked = Math.max(0, Math.round((state.pairingBlocked || 0) / 60));
     text(
       'pairNote',
       state.pairingBlocked
         ? `猜错的次数太多，配对先关上 ${blocked} 分钟。点「重新生成配对码」可以马上再开。`
         : state.pairingURL
-          ? `配对码只能用一次，十分钟后也会作废（还剩 ${minutes} 分钟）。手机装好组件后它会自动失效，再生成一个就能装第二台。`
+          ? '配对码只能用一次，十分钟后也会作废。手机装好组件后它会自动失效，再生成一个就能装第二台。'
           : 'Tailscale 没有连上，或者这台电脑没有尾网地址。手机和电脑要在同一个 Tailscale 里。'
     );
+    // The time left is written in its own place. The note above is shared by
+    // the copy button and by the errors, and it must not be overwritten every
+    // second.
+    text('pairCountdown', state.pairingBlocked ? '' : remainingText(pairingLeft(state)));
+  };
+
+  const render = (state) => {
+    current = state;
+    renderPairing(state);
     text(
       'lifetime',
       '组件随 Magpie 运行：关掉 Magpie 之后，手机上显示的是上一次的结果，重新打开 Magpie 就会更新。'
     );
     renderFacts(state);
     renderNetwork(state);
+    renderOwnNetwork(state);
     renderDevices(state);
     renderRefresh(state);
     renderAdvanced(state);
     renderSubscriptions(state);
   };
 
+  // A pairing code that has run out is of no use to anybody. A new one is
+  // made at once, so the first pairing after the install needs no extra click.
+  const renewPairing = async () => {
+    if (!current) return false;
+    if (pairingLeft(current) > 0) {
+      // The note counts down on the page itself.
+      renderPairing(current);
+      renderAdvanced(current);
+      return false;
+    }
+    try {
+      const result = await api('api/v1/console/pair', { method: 'POST', body: '{}' });
+      current = result;
+      renderPairing(result);
+      renderAdvanced(result);
+      return true;
+    } catch {
+      text('pairNote', '没能换一个新的配对码，过一会儿再试一次。');
+      return false;
+    }
+  };
+
   const load = async () => {
     try {
       render(await api('api/v1/console/state'));
+      await renewPairing();
     } catch {
       text('pairNote', '这个页面没有连上本机的额度服务，关掉插件页面再打开一次。');
     }
   };
 
+  // The page stays open, so the code is looked at now and then. When it has
+  // run out, a new one is made without being asked for.
+  setInterval(() => { void renewPairing(); }, 30000);
+
+  // The time left on the code is counted here, on the page, so the numbers
+  // move while the page is open. Nothing is asked of the service, and the
+  // note above is left alone.
+  const tickCountdown = () => {
+    if (document.hidden || !current) return;
+    const left = pairingLeft(current);
+    // While the door is shut the line stays empty; the note next to it says why.
+    if (!current.pairingBlocked) text('pairCountdown', remainingText(left));
+    const cell = element('pairRemaining');
+    if (cell) cell.textContent = remainingText(left);
+  };
+  setInterval(tickCountdown, 1000);
+  document.addEventListener('visibilitychange', () => {
+    if (!document.hidden) tickCountdown();
+  });
+
   element('copyLink')?.addEventListener('click', () => copy(current?.pairingURL, '配对链接'));
-  element('copyToken')?.addEventListener('click', () => copy(current?.token, '旧版共享令牌'));
   element('manualToken')?.addEventListener('click', async () => {
     const name = element('manualName')?.value?.trim() || '';
     try {
@@ -399,6 +568,27 @@
       text('pairNote', '没有换成新的配对码，请再试一次。');
     }
   });
+  element('saveExternal')?.addEventListener('click', () => { void saveOwnAddress(); });
+  element('restoreTailscale')?.addEventListener('click', async () => {
+    const button = element('restoreTailscale');
+    if (button) button.disabled = true;
+    text('restoreNote', '正在关掉自己开的端口，让 Tailscale 回来…');
+    try {
+      const result = await api('api/v1/console/network/reset', { method: 'POST', body: '{}' });
+      await load();
+      const mode = result?.network?.mode || 'tailscale';
+      text(
+        'restoreNote',
+        mode === 'tailscale'
+          ? '已经回到 Tailscale：自己填的地址和在内网上开的端口都关掉了，手机从尾网连进来。'
+          : '已经恢复了一部分，请看上面的连接方式。',
+      );
+    } catch (error) {
+      text('restoreNote', error.message || '没有恢复成功，请再试一次。');
+    } finally {
+      if (button) button.disabled = false;
+    }
+  });
   element('diagnose')?.addEventListener('click', async () => {
     text('diagnoseNote', '正在问 Tailscale…');
     try {

package/ui/index.html

@@ -16,15 +16,16 @@
         </p>
       </header>
 
+      <div class="cards">
       <section class="card">
         <h2>扫码配对</h2>
         <div class="qr"><img id="qr" alt="配对二维码" /></div>
         <p class="center mono" id="pairingURL">—</p>
         <div class="actions">
           <button id="copyLink" type="button">复制配对链接</button>
-          <button id="copyToken" type="button">复制旧版共享令牌</button>
           <button id="rotate" type="button" class="quiet">重新生成配对码</button>
         </div>
+        <p class="countdown" id="pairCountdown"></p>
         <p class="note" id="pairNote"></p>
       </section>
 
@@ -47,10 +48,19 @@
         <h3>这台电脑的网卡</h3>
         <div id="interfaces" class="list"></div>
         <p class="note" id="lanNote"></p>
+        <h3>自己的内网（不想用 Tailscale 的时候）</h3>
+        <div class="row">
+          <input id="external" type="text" placeholder="http://192.168.1.50:8791" />
+          <button id="saveExternal" type="button">保存地址</button>
+        </div>
+        <p class="note" id="externalNote"></p>
+        <div id="bindList" class="list"></div>
         <div class="actions">
           <button id="diagnose" type="button">诊断连接</button>
+          <button id="restoreTailscale" type="button" class="quiet">恢复 Tailscale 默认连接</button>
         </div>
         <p class="note" id="diagnoseNote"></p>
+        <p class="note" id="restoreNote"></p>
       </section>
 
       <section class="card">
@@ -77,23 +87,22 @@
         <details>
           <summary>高级设置</summary>
           <dl id="advanced"></dl>
-          <p class="note">
-            服务端口和网关地址是 Magpie 插件的启动参数，要改请到 Magpie 的插件设置里改；这里只是显示，不改动。
-          </p>
+          <p class="note" id="portNote"></p>
         </details>
       </section>
 
       <section class="card">
         <h2>在 iPhone 上</h2>
         <ol>
-          <li>手机和电脑连在同一个 Tailscale 里。</li>
+          <li>手机和电脑连在同一个 Tailscale 里（用自定义地址时，让 iPhone 能访问那个地址就行）。</li>
           <li>用相机扫上面的二维码，打开配对页。</li>
           <li>在下载列表里用 Scriptable 打开下载的脚本。</li>
           <li>长按 iPhone 桌面，添加 Scriptable 小组件，选 UsageWidget。</li>
         </ol>
         <p class="note" id="lifetime"></p>
       </section>
+      </div>
     </main>
-    <script src="app.js"></script>
+    <script type="module" src="app.js"></script>
   </body>
 </html>

package/ui/style.css

@@ -39,7 +39,7 @@ body {
     "Microsoft YaHei", sans-serif;
 }
 main {
-  max-width: 640px;
+  max-width: 1120px;
   margin: 0 auto;
   padding: 28px 20px 56px;
 }
@@ -60,6 +60,15 @@ h2 {
   margin: 0;
   color: var(--muted);
 }
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 14px;
+  align-items: start;
+}
+.cards .card {
+  margin-bottom: 0;
+}
 .card {
   background: var(--card);
   border: 1px solid var(--line);
@@ -67,6 +76,11 @@ h2 {
   padding: 18px;
   margin-bottom: 14px;
 }
+.countdown {
+  margin: 0 0 6px;
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+}
 .qr {
   display: grid;
   place-items: center;
@@ -110,6 +124,14 @@ button {
   font-size: 13px;
   cursor: pointer;
 }
+/* The buttons that sit in a row next to an input are smaller. Only the
+   ones that are a direct child of the row; the ones inside .actions keep the
+   size of a real button. */
+.row > button {
+  padding: 4px 9px;
+  font-size: 12px;
+  border-radius: 7px;
+}
 button.quiet {
   background: transparent;
   color: var(--fg);

package/ui/timing.mjs

@@ -0,0 +1,16 @@
+// The time left on a pairing code, counted on the page itself. These two
+// functions are plain, so they can be tested without a browser.
+export const pairingLeft = (state, now = Date.now()) => {
+  const until = Date.parse(state?.pairingExpiresAt || '');
+  if (!Number.isFinite(until)) return 0;
+  return Math.max(0, Math.round((until - now) / 1000));
+};
+
+// Under a minute the seconds are shown, so a code that is about to die does
+// not look like a dead one.
+export const remainingText = (seconds) => {
+  const left = Math.max(0, Math.round(seconds || 0));
+  if (!left) return '已经作废';
+  if (left < 60) return `还剩 ${left} 秒`;
+  return `还剩 ${Math.floor(left / 60)} 分 ${left % 60} 秒`;
+};