diff --git a/README.md b/README.md
index 2b402e1..65e580f 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@ flowchart TD
**1. 创建房间** 打开[创建页面](https://freecode100year.github.io/htmlroom/)，直接点「创建房间」。可选：
- **房间标题**：最多 60 字，显示在浏览器标签页和页面顶部；不填就是「聚众加密聊天房间」。
-- **口令**：相当于门上再加一把锁。建议点「随机生成口令」。
+- **口令**：相当于门上再加一把锁。建议点「随机生成口令」：会生成一串好念好抄的口令（如 `K7QM-3XRP-9DTA-HWVE-N4BC`），直接显示出来，点「复制口令」即可复制；房间建好后口令仍会显示在结果里。
**2. 发给朋友** 下载 `index.html` 发给朋友，或复制房间链接。设了口令的话，**口令请换一种方式告诉对方**（比如文件用微信发，口令打电话说）。
diff --git a/browser-tests/htmlroom.mjs b/browser-tests/htmlroom.mjs
index 9b23cbe..b771692 100644
--- a/browser-tests/htmlroom.mjs
+++ b/browser-tests/htmlroom.mjs
@@ -29,7 +29,7 @@ try{
for(const c of [a,b])assert.deepEqual(await c.cookies(),[]);
for(const p of [maker,file])assert.deepEqual(await p.evaluate(async()=>[localStorage.length,sessionStorage.length,(await indexedDB.databases()).length]),[0,0,0]);
const bad=await a.newPage();let connected=0;bad.on('websocket',()=>connected++);await bad.goto(base+'/hr.html#hr1=invalid');await bad.getByText(/房间链接打不开/).waitFor();assert.equal(connected,0);
- const wrapped=await a.newPage();await wrapped.goto(base+'/hr.html');await wrapped.locator('#mk-gen').click();assert.equal((await wrapped.locator('#mk-pass').inputValue()).length,64);await wrapped.locator('#mk-make').click();await wrapped.locator('#mk-out').waitFor({state:'visible'});
+ const wrapped=await a.newPage();await wrapped.goto(base+'/hr.html');await wrapped.locator('#mk-gen').click();assert.match(await wrapped.locator('#mk-pass').inputValue(),/^[A-HJKMNP-Z2-9]{4}(-[A-HJKMNP-Z2-9]{4}){4}$/);assert.equal(await wrapped.locator('#mk-pass').getAttribute('type'),'text');await wrapped.locator('#mk-make').click();await wrapped.locator('#mk-out').waitFor({state:'visible'});
const encoded=new URL(await wrapped.locator('#mk-link').inputValue()).hash.slice(5);const protectedConfig=JSON.parse(Buffer.from(encoded,'base64url').toString());assert.equal(protectedConfig.encrypted,true);assert.equal('master'in protectedConfig,false);
console.log(JSON.stringify({suite:'integrated hosted maker/Fragment + file interop',checks:9,result:'pass',browser:browser.version(),consoleErrors:0,thirdPartyRequests:0}));
}finally{await browser?.close();server?.kill();await rm(dir,{recursive:true,force:true});}
diff --git a/browser-tests/password-ui.mjs b/browser-tests/password-ui.mjs
new file mode 100644
index 0000000..6f458bd
--- /dev/null
+++ b/browser-tests/password-ui.mjs
@@ -0,0 +1,68 @@
+// The generated password is readable and copyable, survives creating the room,
+// and opens it; the room page can show what is typed. Both on the site and in
+// a local file (where the copy may fall back to select-and-copy).
+import { chromium } from 'playwright';
+import { mkdtemp, writeFile, readFile, rm } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { pathToFileURL } from 'node:url';
+import assert from 'node:assert/strict';
+import { render } from '../scripts/build-html-room.mjs';
+import { configFromRoomHtml } from '../html-room/template.js';
+import { unlock } from '../html-room/crypto.js';
+import { nodeRelay } from '../test/fixtures/mesh-relays.mjs';
+
+const FORMAT = /^[A-HJKMNP-Z2-9]{4}(-[A-HJKMNP-Z2-9]{4}){4}$/;
+const dir = await mkdtemp(tmpdir() + '/hr-pw-');
+const relay = await nodeRelay();
+let browser;
+try {
+ browser = await chromium.launch({ headless: true });
+ const ctx = await browser.newContext({ permissions: ['clipboard-read', 'clipboard-write'] });
+ const errors = []; const watch = p => { p.on('pageerror', e => errors.push(e.message)); return p; };
+ const page = watch(await ctx.newPage());
+ await page.goto(`http://127.0.0.1:${relay.port}/`);
+ await page.locator('#mk-gen').click();
+ const pw = await page.locator('#mk-pass').inputValue();
+ assert.match(pw, FORMAT, 'readable groups, no look-alike characters');
+ assert.equal(await page.locator('#mk-pass').getAttribute('type'), 'text', 'shown after generating');
+ assert.equal(await page.locator('#mk-show').textContent(), '隐藏');
+ await page.locator('#mk-copy-pass').click();
+ assert.equal(await page.evaluate(() => navigator.clipboard.readText()), pw, 'copied to the clipboard');
+ await page.locator('#mk-show').click();
+ assert.equal(await page.locator('#mk-pass').getAttribute('type'), 'password');
+ await page.locator('#mk-show').click();
+ await page.locator('#mk-make').click(); await page.locator('#mk-out').waitFor({ state: 'visible' });
+ assert.equal(await page.locator('#mk-pass-row').isVisible(), true, 'the password stays readable with the result');
+ assert.equal(await page.locator('#mk-pass-out').inputValue(), pw);
+ await page.evaluate(() => navigator.clipboard.writeText('-'));
+ await page.locator('#mk-pass-copy').click();
+ assert.equal(await page.evaluate(() => navigator.clipboard.readText()), pw);
+ const dl = page.waitForEvent('download'); await page.locator('#mk-download').click();
+ const roomPath = dir + '/room.html'; await (await dl).saveAs(roomPath);
+ const config = configFromRoomHtml(await readFile(roomPath, 'utf8'));
+ assert.equal(config.encrypted, true);
+ assert.equal((await unlock(config, pw)).roomId, config.roomId, 'the shown password opens the room');
+
+ // The room page: show what is typed, then enter with the copied password.
+ const room = watch(await ctx.newPage()); await room.goto(pathToFileURL(roomPath).href);
+ await room.locator('#password').fill(pw);
+ assert.equal(await room.locator('#password').getAttribute('type'), 'password');
+ await room.locator('#pw-show').click();
+ assert.equal(await room.locator('#password').getAttribute('type'), 'text');
+ await room.locator('#enter').click();
+ await room.locator('#relay-status').filter({ hasText: relay.url }).waitFor({ timeout: 15000 });
+
+ // A local creator without clipboard permission: copy falls back, and the text is left selected.
+ const blankPath = dir + '/creator.html'; await writeFile(blankPath, (await render({}, [])).html);
+ const local = watch(await (await browser.newContext()).newPage()); await local.goto(pathToFileURL(blankPath).href);
+ await local.locator('#mk-gen').click();
+ const pw2 = await local.locator('#mk-pass').inputValue();
+ assert.match(pw2, FORMAT); assert.notEqual(pw2, pw);
+ await local.locator('#mk-copy-pass').click();
+ await local.locator('#mk-error').filter({ hasText: /口令已复制|口令已选中/ }).waitFor();
+ assert.equal(await local.evaluate(() => getSelection().toString() || document.activeElement.value.slice(document.activeElement.selectionStart, document.activeElement.selectionEnd)), pw2, 'selected for copying by hand');
+ assert.deepEqual(errors, []);
+ console.log('PASS: generated password readable and copyable, kept on the result, opens the room; show/hide on both forms; local-file copy fallback');
+} finally {
+ await browser?.close(); await relay.stop(); await rm(dir, { recursive: true, force: true });
+}
diff --git a/dist/_headers b/dist/_headers
index 91c1b09..f90e0bb 100644
--- a/dist/_headers
+++ b/dist/_headers
@@ -1,5 +1,5 @@
/*
- Content-Security-Policy: default-src 'none'; script-src 'sha256-2JtQBGQ1g3RysBYMwJmcKy+WFVqLIDDZxJLfYInhifQ='; style-src 'sha256-+cH4mX6DQpXWnU8EWkUQE30KyFp1e6rCFFdGd+i+pzA='; connect-src 'self' wss: ws://localhost:* ws://127.0.0.1:*; img-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'
+ Content-Security-Policy: default-src 'none'; script-src 'sha256-aNnjLm65Zqk0gxUuDbkzb8IA4rm24tWrD4YbtohyyZ8='; style-src 'sha256-kDQ4uvzydd/bYRgj2CH45MTiA02XvOWw5A9uc4FMls8='; connect-src 'self' wss: ws://localhost:* ws://127.0.0.1:*; img-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'
Cache-Control: no-store
NEL: {"max_age":0}
Referrer-Policy: no-referrer
diff --git a/dist/hr-template.html b/dist/hr-template.html
index 621aaca..6aad7e7 100644
--- a/dist/hr-template.html
+++ b/dist/hr-template.html
@@ -28,8 +28,8 @@
`)}});for(let f of["exit","SIGINT","SIGTERM"])process.once(f,()=>c.kill())}let Z=!1;for(let t of["SIGTERM","SIGINT"])process.on(t,()=>{Z&&process.exit(0),Z=!0,m.close();for(let c of S)c.close(1012,"restart");setTimeout(()=>process.exit(0),S.size?500:0)});return m}typeof require<"u"&&require.main===module&&ke((0,L.readFileSync)(__filename,"utf8"),require("node:path").basename(__filename));0&&(module.exports={serve});
/*
-->
-聚众加密聊天房间聚众加密聊天房间
正在启动……如果一直停在这里，请看下面的说明。
页面没有启动？微信、QQ 或手机「文件」App 的预览打不开聊天室，请用 Safari、Chrome 等浏览器打开这个文件。
生成新文件：换中继或改标题（发给大家）
中继是帮大家传消息的服务器，它看不到聊天内容。填上新地址，会生成一份新的房间文件：还是同一个房间，口令也不变。把新文件发给所有人，大家打开就自动用新中继。
例如 wss://relay.example.com；去中心化中继写成 bc+wss://…、nostr+wss://… 或 mqtt+wss://…/mqtt。
下载新的房间文件
创建一个新房间（新的钥匙，可设新口令）
聚众加密聊天房间
正在启动……如果一直停在这里，请看下面的说明。
页面没有启动？微信、QQ 或手机「文件」App 的预览打不开聊天室，请用 Safari、Chrome 等浏览器打开这个文件。
生成新文件：换中继或改标题（发给大家）
中继是帮大家传消息的服务器，它看不到聊天内容。填上新地址，会生成一份新的房间文件：还是同一个房间，口令也不变。把新文件发给所有人，大家打开就自动用新中继。
例如 wss://relay.example.com；去中心化中继写成 bc+wss://…、nostr+wss://… 或 mqtt+wss://…/mqtt。
下载新的房间文件
创建一个新房间（新的钥匙，可设新口令）
聚众加密聊天房间
正在启动……如果一直停在这里，请看下面的说明。
页面没有启动？微信、QQ 或手机「文件」App 的预览打不开聊天室，请用 Safari、Chrome 等浏览器打开这个文件。
生成新文件：换中继或改标题（发给大家）
中继是帮大家传消息的服务器，它看不到聊天内容。填上新地址，会生成一份新的房间文件：还是同一个房间，口令也不变。把新文件发给所有人，大家打开就自动用新中继。
例如 wss://relay.example.com；去中心化中继写成 bc+wss://…、nostr+wss://… 或 mqtt+wss://…/mqtt。
下载新的房间文件
创建一个新房间（新的钥匙，可设新口令）
聚众加密聊天房间
正在启动……如果一直停在这里，请看下面的说明。
页面没有启动？微信、QQ 或手机「文件」App 的预览打不开聊天室，请用 Safari、Chrome 等浏览器打开这个文件。
生成新文件：换中继或改标题（发给大家）
中继是帮大家传消息的服务器，它看不到聊天内容。填上新地址，会生成一份新的房间文件：还是同一个房间，口令也不变。把新文件发给所有人，大家打开就自动用新中继。
例如 wss://relay.example.com；去中心化中继写成 bc+wss://…、nostr+wss://… 或 mqtt+wss://…/mqtt。
下载新的房间文件
创建一个新房间（新的钥匙，可设新口令）
生成新文件：换
// The creator: open in a blank file (the offline generator and the hosted
// site), folded away in a room file. Everything happens in this page, offline.
-const MAKER = `创建一个新房间（新的钥匙，可设新口令）
创建一个新房间（新的钥匙，可设新口令）
${title}
正在启动……如果一直停在这里，请看下面的说明。
${previewHelp(config)}${RETARGET}
${MAKER}\n${comment ? '\n' : ''}`;
+ const html=`${comment ? `\n` : ''}${title}${title}
正在启动……如果一直停在这里，请看下面的说明。
${previewHelp(config)}${RETARGET}
${MAKER}\n${comment ? '\n' : ''}`;
return { html, csp };
}
diff --git a/html-room/ui.js b/html-room/ui.js
new file mode 100644
index 0000000..6e62d92
--- /dev/null
+++ b/html-room/ui.js
@@ -0,0 +1,21 @@
+// Small helpers shared by the room and the creator.
+
+// Copies an input's text: the Clipboard API where allowed, else the old
+// select-and-copy (some file:// and in-app browsers). Leaves the text selected
+// either way, so it can still be copied by hand. Resolves to whether it worked.
+export async function copyText(input) {
+ input.focus(); input.select(); input.setSelectionRange?.(0, input.value.length);
+ try { await navigator.clipboard.writeText(input.value); return true; } catch {}
+ try { return document.execCommand('copy'); } catch { return false; }
+}
+
+// A show/hide button for a password field.
+export function showToggle(input, button) {
+ const show = on => {
+ input.type = on ? 'text' : 'password';
+ button.textContent = on ? '隐藏' : '显示';
+ button.setAttribute('aria-pressed', String(on));
+ };
+ button.addEventListener('click', () => show(input.type === 'password'));
+ return { show };
+}
diff --git a/package.json b/package.json
index dbb2e6a..f8b13aa 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
"build:pages": "node scripts/build-html-room.mjs pages",
"build:check": "node scripts/build-html-room.mjs template --check",
"test": "node --test --test-timeout=300000",
- "test:browser": "node browser-tests/htmlroom.mjs && node browser-tests/html-room-preview.mjs && node browser-tests/multi-relay.mjs && node browser-tests/retarget.mjs && node browser-tests/mesh.mjs && node browser-tests/custom-relay.mjs && node browser-tests/generations.mjs && node browser-tests/file-server.mjs",
+ "test:browser": "node browser-tests/htmlroom.mjs && node browser-tests/html-room-preview.mjs && node browser-tests/multi-relay.mjs && node browser-tests/retarget.mjs && node browser-tests/mesh.mjs && node browser-tests/custom-relay.mjs && node browser-tests/generations.mjs && node browser-tests/file-server.mjs && node browser-tests/password-ui.mjs",
"test:retarget": "node browser-tests/retarget.mjs",
"test:failover": "node browser-tests/multi-relay.mjs",
"test:pages": "npm run build:pages && node browser-tests/pages.mjs",