From 1da982560ce0b736c9b562836c5dfe61bb82bfc1 Mon Sep 17 00:00:00 2001
From: Bret Comnes <bcomnes@gmail.com>
Date: Sun, 29 Oct 2023 12:58:57 -0700
Subject: [PATCH] Improve autofill on login and registration pages

---
 package.json           | 10 +++++-----
 web/login/client.js    | 10 +++++++++-
 web/register/client.js | 19 +++++++++++++++++--
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 309061b1..ade8e665 100644
--- a/package.json
+++ b/package.json
@@ -98,17 +98,17 @@
     "url": "https://github.com/hifiwi-fi/breadcrum.net.git"
   },
   "scripts": {
-    "build": "npm run clean && run-s build:*",
+    "build": "run-s clean && run-p build:*",
     "build:siteup": "siteup --src web --dest public",
     "clean": "rm -rf public && mkdir -p public",
     "deps": "depcruise --exclude '^node_modules' --output-type dot . | dot -T svg | depcruise-wrap-stream-in-html > dependency-graph.html",
     "migrate": "postgrator",
-    "prepare": "npm run build",
+    "prepare": "run-s build",
     "generate-default-env": "node scripts/generate-default-env.js",
     "prepublishOnly": "git push --follow-tags && gh-releas -y",
     "prod-sim": "fastify start -l info app.js --address 0.0.0.0",
     "release": "git push --follow-tags && gh-release -y",
-    "start": "npm run watch",
+    "start": "run-s watch",
     "test": "run-s test:*",
     "test:deptree": "depcruise --validate .dependency-cruiser.json app.js web routes plugins",
     "test:standard": "standard --verbose | snazzy",
@@ -116,9 +116,9 @@
     "version": "run-s version:*",
     "version:changelog": "auto-changelog -p --template keepachangelog auto-changelog --breaking-pattern 'BREAKING CHANGE:'",
     "version:git": "git add CHANGELOG.md",
-    "watch": "npm run clean && run-p watch:*",
+    "watch": "run-s clean && run-p watch:*",
     "watch:server": "fastify start -w --ignore-watch='node_modules .git web' -l info -P -p 3000 --options --address 0.0.0.0 app.js",
-    "watch:siteup": "npm run build:siteup -- --watch",
+    "watch:siteup": "run-s build:siteup -- --watch",
     "print-routes": "fastify print-routes app.js",
     "print-plugins": "fastify print-plugins app.js",
     "generate-dbml": "npx pg-to-dbml --c postgres://postgres@localhost/breadcrum"
diff --git a/web/login/client.js b/web/login/client.js
index 7046a72d..bb5f8f9e 100644
--- a/web/login/client.js
+++ b/web/login/client.js
@@ -76,13 +76,21 @@ export const page = Component(() => {
                   autocorrect="off"
                   autocapitalize="off"
                   spellcheck="false"
+                  autocomplete="username"
                 />
               </label>
             </div>
             <div>
               <label class="block">
                 Password:
-                <input class="block" type="password" minlength="8" maxlength="255" name="password">
+                <input
+                  class="block"
+                  type="password"
+                  minlength="8"
+                  maxlength="255"
+                  name="password"
+                  autocomplete="current-password"
+                />
               </label>
             </div>
             <div class="button-cluster">
diff --git a/web/register/client.js b/web/register/client.js
index 13e4e9d0..115adc30 100644
--- a/web/register/client.js
+++ b/web/register/client.js
@@ -57,7 +57,14 @@ export const page = Component(() => {
         <div>
           <label class="block">
             Email:
-            <input class="block" minlength="1" maxlength="200" type="email" name="email" />
+            <input
+              class="block"
+              minlength="1"
+              maxlength="200"
+              type="email"
+              name="email"
+              autocomplete="email"
+            />
           </label>
         </div>
         <div>
@@ -73,13 +80,21 @@ export const page = Component(() => {
               autocorrect="off"
               autocapitalize="off"
               spellcheck="false"
+              autocomplete="username"
             />
           </label>
         </div>
         <div>
           <label class="block">
             Password:
-            <input class="block" type="password" name="password" minlength="8" maxlength="255">
+            <input
+              class="block"
+              type="password"
+              name="password"
+              minlength="8"
+              maxlength="255"
+              autocomplete="new-password"
+            >
           </label>
         </div>
         <div>