From 0c0646db802b3d15ff4c0fcdf7ede01c64800bc5 Mon Sep 17 00:00:00 2001 From: Eiji Kitamura Date: Mon, 14 Oct 2024 16:26:32 +0900 Subject: [PATCH] MDUI + help UI --- package-lock.json | 8 ++-- package.json | 1 + public/components.js | 22 ++++++++++ public/style.scss | 87 +++++++++++++++++++++++++--------------- views/home.html | 74 ++++++++++++++++++++++++++++++++-- views/index.html | 40 +++++++++++++----- views/layouts/index.html | 26 ++++++++---- views/one-button.html | 25 ++++++++---- 8 files changed, 217 insertions(+), 66 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1f43090..c6514c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "express-useragent": "^1.0.15", "firebase-admin": "^12.6.0", "lit": "^3.2.1", + "marked": "^13.0.3", "mdui": "^2.1.2" }, "devDependencies": { @@ -3645,6 +3646,7 @@ "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", "dev": true, + "license": "ISC", "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.0", @@ -9700,7 +9702,6 @@ "version": "13.0.3", "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.3.tgz", "integrity": "sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==", - "dev": true, "license": "MIT", "bin": { "marked": "bin/marked.js" @@ -12841,6 +12842,7 @@ "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", "dev": true, + "license": "MIT", "dependencies": { "cliui": "^7.0.2", "escalade": "^3.1.1", @@ -12859,6 +12861,7 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", "dev": true, + "license": "ISC", "engines": { "node": ">=10" } @@ -20202,8 +20205,7 @@ "marked": { "version": "13.0.3", "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.3.tgz", - "integrity": "sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==", - "dev": true + "integrity": "sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==" }, "marked-terminal": { "version": "7.1.0", diff --git a/package.json b/package.json index 94cc629..3cdd0f7 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "express-useragent": "^1.0.15", "firebase-admin": "^12.6.0", "lit": "^3.2.1", + "marked": "^13.0.3", "mdui": "^2.1.2" }, "engines": { diff --git a/public/components.js b/public/components.js index da4c5db..d6330c9 100644 --- a/public/components.js +++ b/public/components.js @@ -19,6 +19,28 @@ import 'mdui/components/text-field.js'; import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/button-icon.js'; +import 'mdui/components/tooltip.js'; import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; +import 'mdui/components/navigation-drawer.js'; import 'mdui/components/linear-progress.js'; +import { marked } from 'marked'; + +document.addEventListener('DOMContentLoaded', () => { + const drawer = document.querySelector('#drawer'); + const drawerButton = document.querySelector('#drawer-button'); + drawerButton.addEventListener('click', () => { + drawer.open = !drawer.open; + }); + const content = document.querySelector('#help .help-content')?.innerText?.trim(); + const headline = document.querySelector('#help .help-headline')?.innerText?.trim(); + if (headline) { + document.querySelector('#help-headline').innerHTML = headline; + } + if (content) { + const serialized = content.split('\n').map((line) => line.trim()).join('\n'); + const mkContent = marked.parse(serialized) + document.querySelector('#help-content').innerHTML = mkContent; + } +}); + diff --git a/public/style.scss b/public/style.scss index d6c15b1..80ac8f8 100644 --- a/public/style.scss +++ b/public/style.scss @@ -17,10 +17,9 @@ @import 'mdui/mdui.css'; -* { - box-sizing: border-box; - --mdui-color-secondary: red; -} +// * { +// box-sizing: border-box; +// } body { margin: 0; @@ -28,10 +27,6 @@ body { font-family: Roboto,Noto Sans,sans-serif } -.content { - margin: 0 16px 20px 16px; -} - .instructions { color: gray; } @@ -65,42 +60,68 @@ h3 { padding: 0 16px; } +#help { + display: none; +} + mdui-top-app-bar { - background-color: var(--mdui-color-primary); + background-color: rgb(var(--mdui-color-primary)); + mdui-top-app-bar-title, mdui-button-icon { + color: white; + } + mdui-linear-progress { + position: absolute; + top: 64px; + right: 0; + margin: 0; + } } -mdui-linear-progress { - position: relative; - top: -16px; +mdui-navigation-drawer { + mdui-list { + padding-top: 64px; + mdui-list-item h3 { + font-size: 1.25em !important; + margin: 1.2em 0 0.5em 0 !important; + line-height: 1.5 !important; + padding: 0; + } + } } -mwc-list, mdui-list { - width: 400px; - mwc-list-item, mdui-list-item { - .list-item { - width: 368px; - display: flex; - justify-content: space-between; - * { - display: inline-block; - } - .entity-name { - line-height: var(--mdc-icon-button-size, 48px); - flex: 1 1 auto; - mwc-icon.mini, mdui-button-icon.mini { - margin: 4px; - --mdc-icon-size: 16px; - vertical-align: middle; +.content { + margin: 64px 16px 20px 16px; + mdui-text-field { + width: 260px; + } + mwc-list, mdui-list { + width: 500px; + mwc-list-item, mdui-list-item { + .list-item { + width: 368px; + display: flex; + justify-content: space-between; + * { + display: inline-block; + } + .entity-name { + line-height: var(--mdc-icon-button-size, 48px); + flex: 1 1 auto; + mwc-icon.mini, mdui-button-icon.mini { + margin: 4px; + --mdc-icon-size: 16px; + vertical-align: middle; + } + } + .buttons { + flex: 0 1 auto; } - } - .buttons { - flex: 0 1 auto; } } } } -mwc-button, .mdc-button, mdui-button { +mdui-button { margin: 8px 0; a { text-decoration: none; diff --git a/views/home.html b/views/home.html index f3d6fff..f93f89f 100644 --- a/views/home.html +++ b/views/home.html @@ -1,7 +1,42 @@ +
+
+ Home page +
+
+ In this page, you can edit your display name, create a passkey, and + manage your passkeys. Once you create a passkey, sign out and try + signing in with the passkey. + + ### Display name + + Created passkeys are saved with your username and a display name. Edit + your display name to see how it appears in the account selection of your + passkey sign-in. + + ### Create a passkey + + Press **Create a passkey** to create a new passkey. The passkey's name + is automatically assigned based on its + [AAGUID](https://web.dev/articles/webauthn-aaguid), but you can change + it as you want. + + ### Manage passkeys + + Press the **Edit** button to rename a passkey, or press the **Delete** + button to remove it. + + ### Learn more + + Learn how to build this experience at [Create a passkey for passwordless + logins](https://web.dev/articles/passkey-registration) and [Server-side + passkey + registration](https://developers.google.com/identity/passkeys/developer-guides/server-registration). +
+

Welcome, {{displayName}}!

-

Your name:

+

Your display name:

@@ -9,7 +44,13 @@

Your registered passkeys:

- + Sign out
+ + + +

+ + + No help content available for this page. + + + + {{{body}}} diff --git a/views/one-button.html b/views/one-button.html index fbda4a8..b8130ea 100644 --- a/views/one-button.html +++ b/views/one-button.html @@ -1,15 +1,24 @@ +
+
+ One-button sign-in +
+
+ Sign in with your passkey. If you haven't created a passkey yet, go back + to the top page by clicking **Use form based sign-in instead** and + follow the instructions to create one. + + ### Sign in with a passkey + + Press **Sign-in with passkey** and perform [user + verification](https://web.dev/articles/webauthn-user-verification) to + sign in with your passkey. +
+

Choose your passkey to sign in

Sign-in with passkey - Use form based sign-in instead -
    -
  1. If you haven't created a passkey yet, go back to the top page and follow the instructions to create one.
    2. -
  2. If you already have a passkey, click on the "Sign in with passkey" button.
    3. -
  3. Select a passkey.
    4. -
  4. Authenticate.
    5. -
  5. You are signed in.
    6. -
+ Use form based sign-in instead