Replace MWC with MDUI

GoogleChromeLabs · Oct 13, 2024 · 032b189 · 032b189
1 parent e085839
commit 032b189
Show file tree

Hide file tree

Showing 12 changed files with 9,663 additions and 18,195 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,13 +13,6 @@
   },
   "dependencies": {
     "@google-cloud/connect-firestore": "^3.0.0",
-    "@material/mwc-button": "^0.27.0",
-    "@material/mwc-fab": "^0.27.0",
-    "@material/mwc-icon-button": "^0.27.0",
-    "@material/mwc-linear-progress": "^0.27.0",
-    "@material/mwc-list": "^0.27.0",
-    "@material/mwc-textfield": "^0.27.0",
-    "@material/mwc-top-app-bar-fixed": "^0.27.0",
     "@simplewebauthn/server": "^10.0.1",
     "aaguid": "git+https://github.com/agektmr/passkey-authenticator-aaguids.git",
     "base64url": "^3.0.1",
@@ -30,7 +23,7 @@
     "express-useragent": "^1.0.15",
     "firebase-admin": "^12.6.0",
     "lit": "^3.2.1",
-    "material-components-web": "^14.0.0"
+    "mdui": "^2.1.2"
   },
   "engines": {
     "node": ">=18.x"

diff --git a/public/client.js b/public/client.js
@@ -161,14 +161,14 @@ class Loading {
     this.progress = $('#progress');
   }
   start() {
-    this.progress.indeterminate = true;
+    this.progress.value = '';
     const inputs = document.querySelectorAll('input');
     if (inputs) {
       inputs.forEach(input => input.disabled = true);
     }
   }
   stop() {
-    this.progress.indeterminate = false;
+    this.progress.value = 0;
     const inputs = document.querySelectorAll('input');
     if (inputs) {
       inputs.forEach(input => input.disabled = false);

diff --git a/public/components.js b/public/components.js
@@ -14,10 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License
  */
-import '@material/mwc-button';
-import '@material/mwc-top-app-bar-fixed';
-import '@material/mwc-textfield';
-import '@material/mwc-list';
-import '@material/mwc-icon';
-import '@material/mwc-icon-button';
-import '@material/mwc-linear-progress';
+import 'mdui/components/button.js';
+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/top-app-bar.js';
+import 'mdui/components/top-app-bar-title.js';
+import 'mdui/components/linear-progress.js';
diff --git a/public/style.scss b/public/style.scss
@@ -15,17 +15,17 @@
  * limitations under the License
  */
 
-@use '@material/typography';
-@use '@material/textfield';
+@import 'mdui/mdui.css';
 
 * {
   box-sizing: border-box;
-  --mdc-theme-secondary: red;
+  --mdui-color-secondary: red;
 }
 
 body {
   margin: 0;
   padding: 0;
+  font-family: Roboto,Noto Sans,sans-serif
 }
 
 .content {
@@ -65,9 +65,18 @@ h3 {
   padding: 0 16px;
 }
 
-mwc-list {
+mdui-top-app-bar {
+  background-color: var(--mdui-color-primary);
+}
+
+mdui-linear-progress {
+  position: relative;
+  top: -16px;
+}
+
+mwc-list, mdui-list {
   width: 400px;
-  mwc-list-item {
+  mwc-list-item, mdui-list-item {
     .list-item {
       width: 368px;
       display: flex;
@@ -78,7 +87,7 @@ mwc-list {
       .entity-name {
         line-height: var(--mdc-icon-button-size, 48px);
         flex: 1 1 auto;
-        mwc-icon.mini {
+        mwc-icon.mini, mdui-button-icon.mini {
           margin: 4px;
           --mdc-icon-size: 16px;
           vertical-align: middle;
@@ -91,7 +100,7 @@ mwc-list {
   }
 }
 
-mwc-button, .mdc-button {
+mwc-button, .mdc-button, mdui-button {
   margin: 8px 0;
   a {
     text-decoration: none;

diff --git a/server.mjs b/server.mjs
@@ -66,6 +66,9 @@ app.use((req, res, next) => {
   process.env.ORIGIN = `${protocol}://${req.headers.host}`;
   process.env.RP_NAME = RP_NAME;
   req.schema = 'https';
+  res.locals.project_name = process.env.PROJECT_NAME;
+  res.locals.title = process.env.RP_NAME;
+  res.locals.github_repository = 'https://github.com/GoogleChromeLabs/passkeys-demo';
   return next();
 });
 
@@ -76,10 +79,7 @@ app.get('/', (req, res) => {
     return res.redirect(307, '/reauth');
   }
   // If the user is not signed in, show `index.html` with id/password form.
-  return res.render('index.html', {
-    project_name: process.env.PROJECT_NAME,
-    title: RP_NAME,
-  });
+  return res.render('index.html');
 });
 
 app.get('/one-button', (req, res) => {

diff --git a/views/home.html b/views/home.html
@@ -1,32 +1,22 @@
     <main class="content center">
-      <h2>
-        Welcome, {{displayName}}!
-      </h2>
+      <h2>Welcome, {{displayName}}!</h2>
       <section>
-        <h3>
-          Your name:
-        </h3>
+        <h3>Your name:</h3>
         <div id="display-name"></div>
       </section>
       <section>
-        <h3 class="mdc-typography mdc-typography--headline6">
-          Your registered passkeys:
-        </h3>
+        <h3>Your registered passkeys:</h3>
         <div id="list"></div>
       </section>
       <p id="message" class="instructions"></p>
-      <mwc-button id="create-passkey" class="hidden" icon="fingerprint" raised>Create a passkey</mwc-button>
-      <mwc-button><a href="/auth/signout">Sign out</a></mwc-button>
+      <mdui-button id="create-passkey" class="hidden" icon="fingerprint">Create a passkey</mdui-button>
+      <mdui-button variant="outlined" href="/auth/signout">Sign out</mdui-button>
     </main>
     <script type="module">
       import { $, _fetch, loading, registerCredential, updateCredential, unregisterCredential } from '/client.js';
       import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js?module';
       const aaguids = await fetch('/auth/aaguids').then(res => res.json());
 
-      $('#code').addEventListener('click', e => {
-        location.href = 'https://github.com/GoogleChromeLabs/passkeys-demo';
-      });
-
       /**
        * Change and update the user's display name.
        */
@@ -46,21 +36,16 @@ <h3 class="mdc-typography mdc-typography--headline6">
       async function renderDisplayName() {
         const res = await _fetch('/auth/userinfo');
         render(html`
-        <mwc-list>
-          <mwc-list-item>
-            <div class="list-item">
-              <div class="entity-name">
-                <span>${res.displayName || res.username}</span>
-              </div>
-              <div class="buttons">
-                <mwc-icon-button
-                  data-display-name="${res.displayName || res.username }"
-                  @click="${changeDisplayName}"
-                  title="Edit your display name"
-                  icon="edit"></mwc-icon-button>
-              </div>
-            </div>
-          </mwc-list-item>
+        <mdui-list>
+          <mdui-list-item nonclickable>
+            ${res.displayName || res.username}
+            <mdui-button-icon
+              data-display-name="${res.displayName || res.username }"
+              @click="${changeDisplayName}"
+              title="Edit your display name"
+              icon="edit"
+              slot="end-icon"></mdui-button-icon>
+          </mdui-list-item>
         <mwc-list>`, $('#display-name'));
       };
 
@@ -135,36 +120,29 @@ <h3 class="mdc-typography mdc-typography--headline6">
         const res = await _fetch('/auth/getKeys');
         const list = $('#list');
         const creds = html`${res.length > 0 ? html`
-        <mwc-list>
-          ${res.map(cred => html`
-            <mwc-list-item>
-              <div class="list-item">
-                <div class="entity-name">
-                  ${cred.aaguid &&
-                    cred.aaguid !== '00000000-0000-0000-0000-000000000000'?html`
-                  <mwc-icon-button>
-                    <img src="${aaguids[cred.aaguid].icon_light}">
-                  </mwc-icon-button>
-                  `:''}
-                  <span>${cred.name || 'Unnamed' }</span>
-                </div>
-                <div class="buttons">
-                  <mwc-icon-button
-                    data-cred-id="${cred.id}"
-                    data-name="${cred.name || 'Unnamed' }"
-                    @click="${rename}"
-                    icon="edit"></mwc-icon-button>
-                  <mwc-icon-button
-                    data-cred-id="${cred.id}"
-                    @click="${remove}"
-                    icon="delete"></mwc-icon-button>
-                </div>
-              </div>
-            </mwc-list-item>`)}
-        </mwc-list>` : html`
-        <mwc-list>
-          <mwc-list-item>No credentials found.</mwc-list-item>
-        </mwc-list>`}`;
+        <mdui-list>${res.map(cred => html`
+          <mdui-list-item nonclickable>
+            ${cred.aaguid && cred.aaguid !== '00000000-0000-0000-0000-000000000000'
+            ?html`
+            <mdui-icon slot="icon" nonclickable src="${aaguids[cred.aaguid].icon_light}"></mdui-icon>
+            `:''}
+            ${cred.name || 'Unnamed' }
+            <div class="buttons" slot="end-icon">
+              <mdui-button-icon
+                data-cred-id="${cred.id}"
+                data-name="${cred.name || 'Unnamed' }"
+                @click="${rename}"
+                icon="edit"></mdui-button-icon>
+              <mdui-button-icon
+                data-cred-id="${cred.id}"
+                @click="${remove}"
+                icon="delete"></mdui-button-icon>
+            </div>
+          </mdui-list-item>`)}
+        </mdui-list>` : html`
+        <mdui-list>
+          <mdui-list-item>No credentials found.</mdui-list-item>
+        </mdui-list>`}`;
         render(creds, list);
       };
 

diff --git a/views/index.html b/views/index.html
@@ -1,25 +1,17 @@
     <main class="content center">
-      <h2>
-        Enter a username
-      </h2>
+      <h2>Enter a username</h2>
       <form id="form" method="POST" action="/auth/username" class="center">
-        <div class="mdc-text-field mdc-text-field--filled">
-          <span class="mdc-text-field__ripple"></span>
-          <label class="mdc-floating-label" id="username-label">username</label>
-          <input
-           type="text"
-           id="username"
-           class="mdc-text-field__input"
-           aria-labelledby="username-label"
-           name="username"
-           autocomplete="username webauthn"
-           autofocus />
-          <span class="mdc-line-ripple"></span>
-        </div>
+        <mdui-text-field
+          type="text"
+          id="username"
+          name="username"
+          autocomplete="username webauthn"
+          label="username"
+          autofocus></mdui-text-field>
         <input type="password" class="hidden" name="password" />
         <p class="instructions">Any username can be accepted.</p>
-        <input type="submit" class="mdc-button mdc-button--raised" value="Next" />
-        <mwc-button><a href="/one-button">Use one button sign-in instead</a></mwc-button>
+        <mdui-button type="submit">Next</mdui-button>
+        <mdui-button href="/one-button" variant="text">Use one button sign-in instead</mdui-button>
         <ol class="instructions narrow">
           <li>Sign in with a random username and password.</li>
           <li>Create a passkey.</li>
@@ -33,11 +25,6 @@ <h2>
     </main>
     <script type="module">
       import { $, _fetch, loading, authenticate } from '/client.js';
-      new mdc.textField.MDCTextField($('.mdc-text-field'));
-
-      $('#code').addEventListener('click', e => {
-        location.href = 'https://github.com/GoogleChromeLabs/passkeys-demo';
-      });
 
       const form = $('#form');
       // When the form is submitted, proceed to the password form.

diff --git a/views/layouts/index.html b/views/layouts/index.html
@@ -14,16 +14,25 @@
  limitations under the License.
 -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="mdui-theme-auto">
   <head>
     {{> head this}}
   </head>
-  <body class="mdc-typography">
-    <mwc-top-app-bar-fixed>
+  <body class="mdui-prose">
+    <mdui-top-app-bar>
+      <mdui-top-app-bar-title>{{title}}</mdui-top-app-bar-title>
+      <mdui-button-icon
+        id="code"
+        icon="code"
+        href="{{github_repository}}"
+        target="_blank"></mdui-button-icon>
+    </mdui-top-app-bar>
+    <!-- <mwc-top-app-bar-fixed>
       <span slot="title">{{title}}</span>
       <mwc-icon-button id="code" icon="code" slot="actionItems"></mwc-icon-button>
-    </mwc-top-app-bar-fixed>
-    <mwc-linear-progress id="progress"></mwc-linear-progress>
+    </mwc-top-app-bar-fixed> -->
+    <mdui-linear-progress id="progress" max="100" value="0"></mdui-linear-progress>
+    <!-- <mwc-linear-progress id="progress"></mwc-linear-progress> -->
     <script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
     {{{body}}}
   </body>

diff --git a/views/one-button.html b/views/one-button.html
@@ -1,10 +1,8 @@
     <main class="content center">
-      <h2>
-        Choose your passkey to sign in
-      </h2>
+      <h2>Choose your passkey to sign in</h2>
       <section class="center">
-        <mwc-button id="passkey-signin" icon="key" raised>Sign-in with passkey</mwc-button>
-        <mwc-button><a href="/">Use form based sign-in instead</a></mwc-button>
+        <mdui-button id="passkey-signin" icon="key">Sign-in with passkey</mdui-button>
+        <mdui-button variant="outlined" href="/">Use form based sign-in instead</mdui-button>
         <ol class="instructions narrow">
           <li>If you haven't created a passkey yet, go back to <a href="/">the top page</a> and follow the instructions to create one.</li>
           <li>If you already have a passkey, click on the "Sign in with passkey" button.</li>
@@ -17,10 +15,6 @@ <h2>
     <script type="module">
       import { $, _fetch, loading, authenticate } from '/client.js';
 
-      // $('#code').addEventListener('click', e => {
-      //   location.href = 'https://glitch.com/edit/#!/{{project_name}}';
-      // });
-
       const redirect = (path) => {
         location.href = path;
       }

diff --git a/views/partials/head.html b/views/partials/head.html
@@ -6,5 +6,4 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/bundle.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
 <script src="components-bundle.js"></script>