mirror of
https://github.com/ruvnet/RuView
synced 2026-06-09 10:13:17 +00:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ruv
|
224689a5bc | ||
|
ruv
|
99c78f512c |
@@ -1,13 +1,14 @@
|
||||
/**
|
||||
* Services page — lists every registered service grouped by domain.
|
||||
* Reads from `/api/services` (HA-wire-compat).
|
||||
* Services page — lists every registered service grouped by domain,
|
||||
* and lets the operator call any of them with a JSON service_data
|
||||
* payload (POST /api/services/<domain>/<service>).
|
||||
*/
|
||||
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement, state } from 'lit/decorators.js';
|
||||
|
||||
import { HomecoreClient } from '../api/client.js';
|
||||
import type { ServiceDomainView } from '../api/types.js';
|
||||
import '../components/Modal.js';
|
||||
|
||||
function resolveToken(): string {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
@@ -26,16 +27,93 @@ export class ServicesPage extends LitElement {
|
||||
.domain { background: hsl(220 20% 10%); border: 1px solid var(--hc-border, #2a323e); border-radius: 8px; margin-bottom: 12px; padding: 14px 16px; }
|
||||
.domain h2 { font-size: 14px; font-weight: 600; margin: 0 0 8px 0; color: var(--hc-primary, #19d4e5); font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); }
|
||||
ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
li { background: hsl(220 25% 14%); padding: 4px 10px; border-radius: 4px; font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); font-size: 12px; color: var(--hc-text-muted, #7b899d); }
|
||||
li {
|
||||
background: hsl(220 25% 14%);
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
font-family: var(--hc-font-mono, 'JetBrains Mono', monospace);
|
||||
font-size: 12px;
|
||||
color: var(--hc-text-muted, #7b899d);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
li .name { padding: 4px 10px; }
|
||||
li button.call {
|
||||
background: hsl(220 25% 18%);
|
||||
color: var(--hc-primary, #19d4e5);
|
||||
border: none;
|
||||
border-left: 1px solid var(--hc-border, #2a323e);
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif);
|
||||
font-weight: 600;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
li button.call:hover { background: var(--hc-primary, #19d4e5); color: var(--hc-primary-fg, #0b0e13); }
|
||||
.empty { padding: 24px; border: 1px dashed var(--hc-border, #2a323e); border-radius: 8px; text-align: center; color: var(--hc-text-muted, #7b899d); }
|
||||
.err { padding: 16px; border: 1px dashed #b35a5a; border-radius: 8px; color: #f0c0c0; font-size: 13px; }
|
||||
.toast { padding: 8px 12px; background: hsl(165 60% 16%); color: hsl(165 60% 80%); border-radius: 6px; font-size: 12px; margin-bottom: 12px; }
|
||||
|
||||
/* Service-call modal contents */
|
||||
.form label { display: block; margin: 6px 0 4px; font-size: 12px; color: var(--hc-text-muted, #7b899d); }
|
||||
.form code.target { color: var(--hc-primary, #19d4e5); font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); font-size: 13px; }
|
||||
.form textarea {
|
||||
width: 100%; box-sizing: border-box;
|
||||
padding: 8px 10px; background: hsl(220 25% 10%);
|
||||
border: 1px solid var(--hc-border, #2a323e); border-radius: 6px;
|
||||
color: var(--hc-text, #e6eaee);
|
||||
font-family: var(--hc-font-mono, 'JetBrains Mono', monospace);
|
||||
font-size: 13px;
|
||||
min-height: 90px;
|
||||
resize: vertical;
|
||||
}
|
||||
.form textarea.invalid { border-color: hsl(0 60% 50%); }
|
||||
.form .hint { font-size: 11px; color: var(--hc-text-muted, #7b899d); margin-top: 4px; }
|
||||
.form .field-status { font-size: 11px; margin-top: 4px; }
|
||||
.form .field-status.ok { color: hsl(150 60% 55%); }
|
||||
.form .field-status.err { color: hsl(0 70% 70%); }
|
||||
.form pre {
|
||||
background: hsl(220 25% 8%);
|
||||
border: 1px solid var(--hc-border, #2a323e);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
font-family: var(--hc-font-mono, 'JetBrains Mono', monospace);
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.form .resp-ok { border-color: hsl(150 50% 35%); }
|
||||
.form .resp-err { border-color: hsl(0 50% 45%); color: #f0c0c0; }
|
||||
.form .err { padding: 10px; margin-top: 10px; border: 1px solid #b35a5a; border-radius: 6px; background: hsl(0 35% 12%); color: #f0c0c0; font-size: 12px; }
|
||||
|
||||
button.btn {
|
||||
padding: 8px 16px;
|
||||
background: hsl(220 25% 14%);
|
||||
color: var(--hc-text, #e6eaee);
|
||||
border: 1px solid var(--hc-border, #2a323e);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif);
|
||||
}
|
||||
button.btn:hover { background: hsl(220 20% 18%); }
|
||||
button.btn.primary { background: var(--hc-primary, #19d4e5); color: var(--hc-primary-fg, #0b0e13); border-color: var(--hc-primary, #19d4e5); font-weight: 600; }
|
||||
button.btn.primary[disabled] { background: hsl(220 15% 20%); color: var(--hc-text-muted, #7b899d); border-color: var(--hc-border, #2a323e); cursor: not-allowed; }
|
||||
`;
|
||||
|
||||
@state() private domains: ServiceDomainView[] = [];
|
||||
@state() private error: string | null = null;
|
||||
@state() private loading = true;
|
||||
|
||||
private client = new HomecoreClient({ token: resolveToken() });
|
||||
@state() private calling: { domain: string; service: string } | null = null;
|
||||
@state() private callBody = '{}';
|
||||
@state() private callResp: { ok: boolean; text: string } | null = null;
|
||||
@state() private callErr: string | null = null;
|
||||
@state() private callPending = false;
|
||||
@state() private callToast: string | null = null;
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
@@ -53,7 +131,72 @@ export class ServicesPage extends LitElement {
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
void this.client; // suppress unused warning while keeping the import shape consistent
|
||||
}
|
||||
|
||||
private _openCall(domain: string, service: string) {
|
||||
this.calling = { domain, service };
|
||||
this.callBody = '{}';
|
||||
this.callResp = null;
|
||||
this.callErr = null;
|
||||
}
|
||||
|
||||
private _closeCall() {
|
||||
this.calling = null;
|
||||
this.callBody = '{}';
|
||||
this.callResp = null;
|
||||
this.callErr = null;
|
||||
this.callPending = false;
|
||||
}
|
||||
|
||||
private _validateBody(): { ok: boolean; data?: unknown; msg?: string } {
|
||||
const raw = this.callBody.trim();
|
||||
if (!raw) return { ok: true, data: {} };
|
||||
try {
|
||||
const parsed = JSON.parse(raw);
|
||||
if (typeof parsed !== 'object' || Array.isArray(parsed) || parsed === null) {
|
||||
return { ok: false, msg: 'service_data must be a JSON object (not array, not scalar)' };
|
||||
}
|
||||
return { ok: true, data: parsed };
|
||||
} catch (e) {
|
||||
return { ok: false, msg: `JSON parse: ${e instanceof Error ? e.message : String(e)}` };
|
||||
}
|
||||
}
|
||||
|
||||
private async _doCall() {
|
||||
if (!this.calling) return;
|
||||
const v = this._validateBody();
|
||||
if (!v.ok) {
|
||||
this.callErr = v.msg ?? 'invalid';
|
||||
this.callResp = null;
|
||||
return;
|
||||
}
|
||||
this.callPending = true;
|
||||
this.callErr = null;
|
||||
const { domain, service } = this.calling;
|
||||
try {
|
||||
const r = await fetch(`/api/services/${encodeURIComponent(domain)}/${encodeURIComponent(service)}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${resolveToken()}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(v.data ?? {}),
|
||||
});
|
||||
const text = await r.text();
|
||||
if (r.ok) {
|
||||
let pretty = text;
|
||||
try { pretty = JSON.stringify(JSON.parse(text), null, 2); } catch { /* leave raw */ }
|
||||
this.callResp = { ok: true, text: pretty };
|
||||
this.callToast = `Called ${domain}.${service} → 200`;
|
||||
window.setTimeout(() => (this.callToast = null), 3000);
|
||||
} else {
|
||||
this.callResp = { ok: false, text: `HTTP ${r.status}\n${text}` };
|
||||
}
|
||||
} catch (e) {
|
||||
this.callErr = e instanceof Error ? e.message : String(e);
|
||||
} finally {
|
||||
this.callPending = false;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -69,16 +212,59 @@ export class ServicesPage extends LitElement {
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
const validity = this._validateBody();
|
||||
return html`
|
||||
${this.callToast ? html`<div class="toast">${this.callToast}</div>` : ''}
|
||||
<h1>Services (${this.domains.length} domain${this.domains.length === 1 ? '' : 's'})</h1>
|
||||
${this.domains.map(d => html`
|
||||
<div class="domain">
|
||||
<h2>${d.domain}</h2>
|
||||
<ul>
|
||||
${Object.keys(d.services).map(name => html`<li>${name}</li>`)}
|
||||
${Object.keys(d.services).map(name => html`
|
||||
<li>
|
||||
<span class="name">${name}</span>
|
||||
<button class="call"
|
||||
@click=${() => this._openCall(d.domain, name)}
|
||||
title="Call ${d.domain}.${name}">▶ Call</button>
|
||||
</li>
|
||||
`)}
|
||||
</ul>
|
||||
</div>
|
||||
`)}
|
||||
|
||||
<hc-modal .open=${this.calling !== null}
|
||||
heading=${this.calling ? `Call ${this.calling.domain}.${this.calling.service}` : ''}
|
||||
@hc-modal-close=${this._closeCall}>
|
||||
<div class="form">
|
||||
<label>target</label>
|
||||
<div><code class="target">POST /api/services/${this.calling?.domain ?? ''}/${this.calling?.service ?? ''}</code></div>
|
||||
|
||||
<label for="body">service_data (JSON object)</label>
|
||||
<textarea id="body"
|
||||
class=${validity.ok ? '' : 'invalid'}
|
||||
.value=${this.callBody}
|
||||
@input=${(e: Event) => (this.callBody = (e.target as HTMLTextAreaElement).value)}
|
||||
placeholder='{ "entity_id": "light.kitchen_ceiling", "brightness": 200 }'></textarea>
|
||||
<div class="hint">leave blank for <code>{}</code> — these handlers are no-op echoes, they round-trip whatever you send</div>
|
||||
${validity.ok
|
||||
? (this.callBody.trim()
|
||||
? html`<div class="field-status ok">✓ service_data OK</div>`
|
||||
: html`<div class="hint">empty → will send <code>{}</code></div>`)
|
||||
: html`<div class="field-status err">✗ ${validity.msg}</div>`}
|
||||
|
||||
${this.callErr ? html`<div class="err">${this.callErr}</div>` : ''}
|
||||
${this.callResp
|
||||
? html`<label>response</label>
|
||||
<pre class=${this.callResp.ok ? 'resp-ok' : 'resp-err'}>${this.callResp.text}</pre>`
|
||||
: ''}
|
||||
</div>
|
||||
<button slot="footer" class="btn" @click=${this._closeCall}>Close</button>
|
||||
<button slot="footer" class="btn primary"
|
||||
?disabled=${!validity.ok || this.callPending}
|
||||
@click=${this._doCall}>
|
||||
${this.callPending ? 'Calling…' : 'Call'}
|
||||
</button>
|
||||
</hc-modal>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
+135
-21
@@ -1,5 +1,13 @@
|
||||
/**
|
||||
* Settings page — backend config + bearer-token editor (localStorage).
|
||||
* Settings page — backend config + bearer-token editor with
|
||||
* probe-before-persist validation.
|
||||
*
|
||||
* The save flow probes `/api/config` with the new token BEFORE writing
|
||||
* it to localStorage. If the probe fails (401 wrong token, network
|
||||
* error, etc.) the bad token is NOT persisted and the operator sees
|
||||
* an inline error. This avoids the foot-gun where saving a typo'd
|
||||
* token would lock the UI out of the backend until the operator
|
||||
* cleared localStorage by hand.
|
||||
*/
|
||||
|
||||
import { LitElement, html, css } from 'lit';
|
||||
@@ -8,15 +16,29 @@ import { customElement, state } from 'lit/decorators.js';
|
||||
import { HomecoreClient } from '../api/client.js';
|
||||
import type { ApiConfig } from '../api/types.js';
|
||||
|
||||
const TOKEN_LS_KEY = 'homecore.token';
|
||||
|
||||
function resolveToken(): string {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
const stored = localStorage.getItem('homecore.token');
|
||||
const stored = localStorage.getItem(TOKEN_LS_KEY);
|
||||
if (stored) return stored;
|
||||
}
|
||||
const qs = new URL(window.location.href).searchParams.get('token');
|
||||
return qs ?? 'dev-token';
|
||||
}
|
||||
|
||||
function maskToken(t: string): string {
|
||||
if (!t) return '(empty)';
|
||||
if (t.length <= 8) return '•'.repeat(t.length);
|
||||
return t.slice(0, 4) + '…' + t.slice(-3) + ' (' + t.length + ' chars)';
|
||||
}
|
||||
|
||||
type ProbeResult =
|
||||
| { kind: 'idle' }
|
||||
| { kind: 'probing' }
|
||||
| { kind: 'ok'; ms: number; serverVersion: string }
|
||||
| { kind: 'err'; status?: number; msg: string };
|
||||
|
||||
@customElement('hc-settings')
|
||||
export class SettingsPage extends LitElement {
|
||||
static styles = css`
|
||||
@@ -26,50 +48,133 @@ export class SettingsPage extends LitElement {
|
||||
h2 { font-size: 14px; font-weight: 600; margin: 0 0 12px 0; color: var(--hc-primary, #19d4e5); }
|
||||
dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 13px; font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); }
|
||||
dt { color: var(--hc-text-muted, #7b899d); }
|
||||
dd { margin: 0; }
|
||||
dd { margin: 0; word-break: break-all; }
|
||||
label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--hc-text-muted, #7b899d); }
|
||||
input { width: 100%; box-sizing: border-box; padding: 8px 12px; background: hsl(220 25% 14%); border: 1px solid var(--hc-border, #2a323e); border-radius: 6px; color: var(--hc-text, #e6eaee); font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); font-size: 13px; }
|
||||
button { margin-top: 10px; padding: 8px 16px; background: var(--hc-primary, #19d4e5); color: var(--hc-primary-fg, #0b0e13); border: none; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif); }
|
||||
button:hover { background: hsl(185 80% 55%); }
|
||||
input {
|
||||
width: 100%; box-sizing: border-box;
|
||||
padding: 8px 12px;
|
||||
background: hsl(220 25% 14%);
|
||||
border: 1px solid var(--hc-border, #2a323e);
|
||||
border-radius: 6px;
|
||||
color: var(--hc-text, #e6eaee);
|
||||
font-family: var(--hc-font-mono, 'JetBrains Mono', monospace);
|
||||
font-size: 13px;
|
||||
}
|
||||
input:focus { outline: 2px solid hsl(185 80% 50% / 0.5); border-color: var(--hc-primary, #19d4e5); }
|
||||
input.invalid { border-color: hsl(0 60% 50%); }
|
||||
.actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--hc-border, #2a323e);
|
||||
background: hsl(220 25% 14%);
|
||||
color: var(--hc-text, #e6eaee);
|
||||
font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover { background: hsl(220 20% 18%); }
|
||||
button.primary { background: var(--hc-primary, #19d4e5); color: var(--hc-primary-fg, #0b0e13); border-color: var(--hc-primary, #19d4e5); font-weight: 600; }
|
||||
button.primary:hover { background: hsl(185 80% 55%); }
|
||||
button[disabled] { background: hsl(220 15% 20%); color: var(--hc-text-muted, #7b899d); cursor: not-allowed; }
|
||||
.hint { font-size: 11px; color: var(--hc-text-muted, #7b899d); margin-top: 6px; }
|
||||
.field-status { font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
|
||||
.field-status.ok { color: hsl(150 60% 55%); }
|
||||
.field-status.err { color: hsl(0 70% 70%); }
|
||||
.field-status.probing { color: var(--hc-text-muted, #7b899d); }
|
||||
.toast { font-size: 12px; color: var(--hc-primary, #19d4e5); margin-top: 8px; }
|
||||
.err { padding: 16px; border: 1px dashed #b35a5a; border-radius: 8px; color: #f0c0c0; font-size: 13px; }
|
||||
.err { padding: 12px; border: 1px solid #b35a5a; border-radius: 6px; color: #f0c0c0; background: hsl(0 35% 12%); font-size: 13px; margin-top: 8px; }
|
||||
.saved-meta { font-size: 11px; color: var(--hc-text-muted, #7b899d); margin-top: 4px; font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); }
|
||||
`;
|
||||
|
||||
@state() private config: ApiConfig | null = null;
|
||||
@state() private error: string | null = null;
|
||||
@state() private configErr: string | null = null;
|
||||
@state() private token = resolveToken();
|
||||
@state() private storedToken = resolveToken();
|
||||
@state() private probe: ProbeResult = { kind: 'idle' };
|
||||
@state() private savedAt = 0;
|
||||
|
||||
private client = new HomecoreClient({ token: resolveToken() });
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
void this.refresh();
|
||||
void this.refreshConfig();
|
||||
}
|
||||
|
||||
private async refresh(): Promise<void> {
|
||||
private async refreshConfig(): Promise<void> {
|
||||
try {
|
||||
this.config = await this.client.getConfig();
|
||||
this.error = null;
|
||||
this.configErr = null;
|
||||
} catch (e) {
|
||||
this.error = e instanceof Error ? e.message : String(e);
|
||||
this.configErr = e instanceof Error ? e.message : String(e);
|
||||
}
|
||||
}
|
||||
|
||||
private saveToken() {
|
||||
localStorage.setItem('homecore.token', this.token);
|
||||
/** Hit /api/config with the given token; return success or 4xx/5xx kind. */
|
||||
private async _probe(token: string): Promise<ProbeResult> {
|
||||
if (!token.trim()) return { kind: 'err', msg: 'token must not be empty' };
|
||||
const started = performance.now();
|
||||
try {
|
||||
const r = await fetch('/api/config', {
|
||||
headers: { 'Authorization': `Bearer ${token}` },
|
||||
});
|
||||
if (!r.ok) {
|
||||
return { kind: 'err', status: r.status, msg: r.statusText || `HTTP ${r.status}` };
|
||||
}
|
||||
const cfg = await r.json() as ApiConfig;
|
||||
return { kind: 'ok', ms: Math.round(performance.now() - started), serverVersion: cfg.version };
|
||||
} catch (e) {
|
||||
return { kind: 'err', msg: e instanceof Error ? e.message : String(e) };
|
||||
}
|
||||
}
|
||||
|
||||
private async _testToken() {
|
||||
this.probe = { kind: 'probing' };
|
||||
this.probe = await this._probe(this.token);
|
||||
}
|
||||
|
||||
private async _saveToken() {
|
||||
const result = await this._probe(this.token);
|
||||
this.probe = result;
|
||||
if (result.kind !== 'ok') return; // refuse to persist a bad token
|
||||
localStorage.setItem(TOKEN_LS_KEY, this.token);
|
||||
this.storedToken = this.token;
|
||||
this.savedAt = Date.now();
|
||||
// Rebuild the client with the new token + refresh the config readout.
|
||||
this.client = new HomecoreClient({ token: this.token });
|
||||
void this.refresh();
|
||||
await this.refreshConfig();
|
||||
}
|
||||
|
||||
private _clearToken() {
|
||||
localStorage.removeItem(TOKEN_LS_KEY);
|
||||
this.storedToken = '';
|
||||
this.token = '';
|
||||
this.probe = { kind: 'idle' };
|
||||
this.savedAt = 0;
|
||||
}
|
||||
|
||||
private _renderProbe() {
|
||||
switch (this.probe.kind) {
|
||||
case 'idle':
|
||||
return html`<div class="hint">click Test token to probe /api/config with the value above</div>`;
|
||||
case 'probing':
|
||||
return html`<div class="field-status probing">⋯ probing /api/config…</div>`;
|
||||
case 'ok':
|
||||
return html`<div class="field-status ok">✓ token accepted (${this.probe.ms} ms) — server v${this.probe.serverVersion}</div>`;
|
||||
case 'err':
|
||||
return html`<div class="field-status err">✗ ${this.probe.status ? `HTTP ${this.probe.status}: ` : ''}${this.probe.msg}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const isEmpty = !this.token.trim();
|
||||
const inputClass = isEmpty || this.probe.kind === 'err' ? 'invalid' : '';
|
||||
return html`
|
||||
<h1>Settings</h1>
|
||||
<section>
|
||||
<h2>backend</h2>
|
||||
${this.error
|
||||
? html`<div class="err">unreachable — ${this.error}</div>`
|
||||
${this.configErr
|
||||
? html`<div class="err">unreachable — ${this.configErr}</div>`
|
||||
: this.config
|
||||
? html`<dl>
|
||||
<dt>location</dt><dd>${this.config.location_name}</dd>
|
||||
@@ -81,11 +186,20 @@ export class SettingsPage extends LitElement {
|
||||
</section>
|
||||
<section>
|
||||
<h2>auth — bearer token</h2>
|
||||
<label for="tok">stored at localStorage["homecore.token"]; DEV mode accepts any non-empty value</label>
|
||||
<label for="tok">localStorage["homecore.token"] — must be accepted by /api/config before save is allowed</label>
|
||||
<input id="tok" type="password" .value=${this.token}
|
||||
@input=${(e: Event) => (this.token = (e.target as HTMLInputElement).value)} />
|
||||
<button @click=${this.saveToken}>save & reload backend</button>
|
||||
${this.savedAt > 0 ? html`<div class="toast">saved at ${new Date(this.savedAt).toLocaleTimeString()}</div>` : ''}
|
||||
class=${inputClass}
|
||||
@input=${(e: Event) => { this.token = (e.target as HTMLInputElement).value; this.probe = { kind: 'idle' }; }} />
|
||||
<div class="saved-meta">currently stored: ${maskToken(this.storedToken)}</div>
|
||||
${this._renderProbe()}
|
||||
<div class="actions">
|
||||
<button @click=${this._testToken} ?disabled=${isEmpty}>Test token</button>
|
||||
<button class="primary" @click=${this._saveToken} ?disabled=${isEmpty}>Probe & Save</button>
|
||||
<button @click=${this._clearToken}>Clear</button>
|
||||
</div>
|
||||
${this.savedAt > 0
|
||||
? html`<div class="toast">✓ saved at ${new Date(this.savedAt).toLocaleTimeString()} — backend config refreshed with new token</div>`
|
||||
: ''}
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user