Matrix card: concise redesign per Nathan — 'Current Matrix ID' display, 'Use @local' button when on an external ID, 'Use external account' reveals a validated field; no my/your mixing
This commit is contained in:
Inferencebot committed
1 parent
88bda332c3
commit
cdff951594
1 file changed
+66
-42
+66
-42
@@ -560,19 +560,21 @@ PAGE_HTML = """<!DOCTYPE html>
|
||||
|
||||
<div class="card">
|
||||
<h2>Matrix chat</h2>
|
||||
<p class="hint">You're invited to the co-op's Matrix space. Your registered Matrix ID:</p>
|
||||
<p class="hint">We use the Matrix chat protocol to collaborate. You can access our space with an inference.coop account or an account hosted elsewhere.</p>
|
||||
<p class="hint" style="margin-bottom:6px;"><strong>Current Matrix ID:</strong></p>
|
||||
<div class="key-reveal" id="mxid-registered">
|
||||
<div class="key-reveal-title">Registered Matrix ID</div>
|
||||
<code class="key-reveal-value" id="mxid-registered-value">checking…</code>
|
||||
<div class="key-reveal-name" id="mxid-registered-note"></div>
|
||||
<button class="ghost" id="mxid-clear" onclick="clearMxid()" style="display:none">Use my co-op account instead</button>
|
||||
<div class="new-key" id="mxid-actions" style="margin-top:12px;">
|
||||
<button class="ghost" id="mxid-use-local" onclick="useLocalMxid()" style="display:none"></button>
|
||||
<button class="ghost" id="mxid-use-external" onclick="showExternalField()">Use external account</button>
|
||||
</div>
|
||||
<div class="new-key" id="mxid-field-row" style="display:none; margin-top:12px;">
|
||||
<input id="mxid-input" type="text" placeholder="@username:server.org" maxlength="255" />
|
||||
<button class="primary" id="mxid-btn" onclick="saveMxid()">Save</button>
|
||||
<button class="ghost" onclick="hideExternalField()">Cancel</button>
|
||||
</div>
|
||||
<div class="hint" id="mxid-status"></div>
|
||||
</div>
|
||||
<p class="hint" id="mxid-custom-hint" style="display:none">Prefer a different account? Update it below (one account — it replaces the one above).</p>
|
||||
<div class="new-key">
|
||||
<input id="mxid-input" type="text" placeholder="e.g. @you:matrix.org" maxlength="255" />
|
||||
<button class="primary" id="mxid-btn" onclick="saveMxid()">Save</button>
|
||||
</div>
|
||||
<div class="hint" id="mxid-status"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -645,6 +647,11 @@ async function load() {
|
||||
}
|
||||
}
|
||||
|
||||
let mxidLocal = ''; // @username:inference.coop, resolved by the portal
|
||||
let mxidCurrent = ''; // what is registered right now (external or local)
|
||||
|
||||
function mxidValid(v) { return /^@[^\\s:]+:[^\\s]+\\.[^\\s]+$/.test(v); }
|
||||
|
||||
async function loadMxid() {
|
||||
try {
|
||||
const r = await fetch('/api/matrix-mxid');
|
||||
@@ -652,38 +659,62 @@ async function loadMxid() {
|
||||
const d = await r.json();
|
||||
if (d.error) {
|
||||
$('mxid-registered-value').textContent = 'unavailable';
|
||||
$('mxid-status').textContent = 'Could not load your Matrix registration: ' + d.error;
|
||||
$('mxid-status').textContent = 'Could not load: ' + d.error;
|
||||
return;
|
||||
}
|
||||
const custom = (d.matrix_mxid || '').trim();
|
||||
const local = d.local_mxid || '';
|
||||
if (custom) {
|
||||
$('mxid-registered-value').textContent = custom;
|
||||
$('mxid-registered-note').textContent = 'External account — Matrix invites go here; your co-op account will not receive them.';
|
||||
$('mxid-input').value = custom;
|
||||
$('mxid-clear').style.display = '';
|
||||
$('mxid-custom-hint').style.display = '';
|
||||
} else if (local) {
|
||||
$('mxid-registered-value').textContent = local;
|
||||
$('mxid-registered-note').textContent = 'Your co-op account — invites go here.';
|
||||
mxidLocal = (d.local_mxid || '').trim();
|
||||
mxidCurrent = (d.matrix_mxid || '').trim() || mxidLocal;
|
||||
$('mxid-registered-value').textContent = mxidCurrent || 'pending — will use the inference.coop account once it exists';
|
||||
const useLocalBtn = $('mxid-use-local');
|
||||
if (mxidCurrent && mxidLocal && mxidCurrent !== mxidLocal) {
|
||||
useLocalBtn.textContent = 'Use ' + mxidLocal;
|
||||
useLocalBtn.style.display = '';
|
||||
} else {
|
||||
$('mxid-registered-value').textContent = 'not set yet — invites go to your co-op account once it exists';
|
||||
useLocalBtn.style.display = 'none';
|
||||
}
|
||||
} catch (e) {
|
||||
$('mxid-registered-value').textContent = 'unavailable';
|
||||
$('mxid-status').textContent = 'Could not load your Matrix registration: ' + e.message;
|
||||
$('mxid-status').textContent = 'Could not load: ' + e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function clearMxid() {
|
||||
await saveMxid('');
|
||||
function showExternalField() {
|
||||
$('mxid-actions').style.display = 'none';
|
||||
$('mxid-field-row').style.display = '';
|
||||
$('mxid-input').value = (mxidCurrent && mxidCurrent !== mxidLocal) ? mxidCurrent : '';
|
||||
$('mxid-status').textContent = '';
|
||||
$('mxid-input').focus();
|
||||
}
|
||||
|
||||
async function saveMxid(explicit) {
|
||||
const mxid = (explicit !== undefined ? explicit : $('mxid-input').value).trim();
|
||||
function hideExternalField() {
|
||||
$('mxid-field-row').style.display = 'none';
|
||||
$('mxid-actions').style.display = '';
|
||||
$('mxid-status').textContent = '';
|
||||
}
|
||||
|
||||
async function useLocalMxid() {
|
||||
const btn = $('mxid-use-local');
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const r = await fetch('/api/matrix-mxid', {
|
||||
method: 'POST', headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ matrix_mxid: '' })
|
||||
});
|
||||
const d = await r.json();
|
||||
if (d.error) { $('mxid-status').textContent = d.error; }
|
||||
else { $('mxid-status').textContent = ''; await loadMxid(); }
|
||||
} catch (e) { $('mxid-status').textContent = 'Could not switch: ' + e.message; }
|
||||
btn.disabled = false;
|
||||
}
|
||||
|
||||
async function saveMxid() {
|
||||
const mxid = $('mxid-input').value.trim();
|
||||
if (!mxidValid(mxid)) {
|
||||
$('mxid-status').textContent = 'Enter a Matrix ID like @username:server.org';
|
||||
return;
|
||||
}
|
||||
const btn = $('mxid-btn');
|
||||
btn.disabled = true;
|
||||
$('mxid-status').textContent = '';
|
||||
try {
|
||||
const r = await fetch('/api/matrix-mxid', {
|
||||
method: 'POST', headers: {'Content-Type': 'application/json'},
|
||||
@@ -691,20 +722,13 @@ async function saveMxid(explicit) {
|
||||
});
|
||||
const d = await r.json();
|
||||
if (d.error) { $('mxid-status').textContent = d.error; }
|
||||
else if (mxid) {
|
||||
const joined = d.invite_sent === false;
|
||||
$('mxid-status').innerHTML = 'Saved. An invite to the co-op Matrix space is on its way to <strong>' + escapeHtml(mxid) + '</strong>' +
|
||||
(joined ? ' — that account could not be reached right now; the nightly sync will retry automatically.' :
|
||||
' — accept it from that account to join. Your co-op account will no longer receive invites.');
|
||||
$('mxid-status').className = 'hint ok';
|
||||
} else {
|
||||
$('mxid-status').textContent = 'Cleared — your co-op account will be used for Matrix.';
|
||||
$('mxid-status').className = 'hint ok';
|
||||
$('mxid-input').value = '';
|
||||
$('mxid-clear').style.display = 'none';
|
||||
else {
|
||||
hideExternalField();
|
||||
await loadMxid();
|
||||
$('mxid-status').textContent = d.invite_sent === false
|
||||
? 'Saved — that account could not be reached right now; the nightly sync will retry automatically.'
|
||||
: 'Saved — accept the invite from that account to join the space.';
|
||||
}
|
||||
btn.disabled = false;
|
||||
await loadMxid();
|
||||
} catch (e) { $('mxid-status').textContent = 'Could not save: ' + e.message; }
|
||||
btn.disabled = false;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user