redtea/lpra
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: sign in with passkeys, no password once an account has one; an account button and dialog in place of the sign-out button

Browse Source
This commit is contained in:
redtea committed 2026-10-14 20:33:31 +03:00
1 parent d2d6fe0100
commit e7b5d28470
9 files changed
+892 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

internal/server/web/static/app.css
+36
View File
@@ -102,6 +102,39 @@ pre { padding: 12px; overflow-x: auto; font-size: 13px; white-space: pre-wrap; w
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
#terminal { width: 100%; height: calc(100vh - 150px); }
/* Dialogs shared by the pages. */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border);
border-radius: 12px; padding: 0; max-width: 900px; width: 92vw; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog:focus { outline: none; }
.dlg-h { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.dlg-b { padding: 16px 18px; }
/* The account button in the top bar, and its dialog. */
header.topbar nav .acct-btn { margin-left: 22px; width: 34px; height: 34px; padding: 0; vertical-align: middle; }
#acctdlg { max-width: 480px; }
.acct-who { display: flex; align-items: center; gap: 12px; }
.acct-ava { width: 40px; height: 40px; border-radius: 50%; background: #12202f; border: 1px solid var(--border);
display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--accent); flex: none; }
.acct-name { font-weight: 600; }
.acct-mode { font-size: 13px; }
.acct h3 { font-size: 15px; margin: 18px 0 4px; }
.acct-hint { font-size: 13px; margin: 0 0 10px; }
.acct-keys { list-style: none; margin: 0; padding: 0; }
.acct-keys li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.acct-keys li .muted { font-size: 12px; }
.acct-kicon { color: var(--accent); display: inline-flex; flex: none; }
.acct-kinfo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.acct-add { display: flex; gap: 8px; margin-top: 12px; }
.acct-add input { flex: 1; min-width: 0; }
.acct-add button { flex: none; }
.acct-msg { min-height: 20px; margin: 8px 0 0; font-size: 13px; color: var(--ok); }
.acct-msg.bad { color: var(--danger); }
.acct-out { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
/* Sign-in page. */
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 18px 0 4px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.keybtn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* Phones. A table marked .stack turns each row into a block of
"label: value" lines, the labels coming from data-l on the cells; a cell
marked .lead goes first, as the row's title. */
@@ -112,6 +145,9 @@ pre { padding: 12px; overflow-x: auto; font-size: 13px; white-space: pre-wrap; w
overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
header.topbar nav::-webkit-scrollbar { display: none; }
header.topbar nav > * { margin-left: 0 !important; flex: none; }
.acct-add { flex-wrap: wrap; }
.acct-add button { width: 100%; }
.acct-keys li { flex-wrap: wrap; }
.wrap { padding: 16px 12px; }
.card { padding: 16px; border-radius: 8px; }
h1 { font-size: 20px; }