From 56d987fc7303df640ec7f23609f13aef7626a7a9 Mon Sep 17 00:00:00 2001
From: Emanuele Feliziani <feliziani.emanuele@gmail.com>
Date: Wed, 29 Nov 2023 13:55:47 +0100
Subject: [PATCH 1/2] Add password update flows

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>
---
 autofill/password-update.html | 87 +++++++++++++++++++++++++++++++++++
 autofill/style.css            | 20 +++++++-
 index.html                    |  1 +
 3 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 autofill/password-update.html
diff --git a/autofill/password-update.html b/autofill/password-update.html
new file mode 100644
index 0000000..347f21c
--- /dev/null
+++ b/autofill/password-update.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Password update flows</title>
+  <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+
+<p><a href="../index.html">[Home]</a></p>
+
+<div class="dialog">
+  <form action="/change-password" id="change">
+    <h2>Change password (with hidden username field)</h2>
+    <fieldset>
+      <input id="email" type="hidden" value="test@test.com">
+      <label for="password-current">Current Password</label>
+      <input id="password-current" name="password-current" type="password" autocomplete="current-password">
+      <label for="password-new">New Password</label>
+      <input id="password-new" name="password-new" type="password" autocomplete="new-password">
+      <label for="password-new-confirm">Confirm Password</label>
+      <input id="password-new-confirm" name="password-new-confirm" type="password" autocomplete="new-password">
+      <button type="submit">Change password</button>
+    </fieldset>
+  </form>
+  <hr />
+  <form action="/change-password" id="change-no-user">
+    <h2>Change password (without username)</h2>
+    <fieldset>
+      <label for="password-current-no-user">Current Password</label>
+      <input id="password-current-no-user" name="password-current" type="password" autocomplete="current-password">
+      <label for="password-new-no-user">New Password</label>
+      <input id="password-new-no-user" name="password-new" type="password" autocomplete="new-password">
+      <label for="password-new-confirm-no-user">Confirm Password</label>
+      <input id="password-new-confirm-no-user" name="password-new-confirm" type="password" autocomplete="new-password">
+      <button type="submit">Change password</button>
+    </fieldset>
+  </form>
+  <hr />
+  <form action="/change-password" id="change-2">
+    <h2>Change password (without current password)</h2>
+    <fieldset>
+      <label for="password-new-2">New Password</label>
+      <input id="password-new-2" name="password-new-2" type="password" autocomplete="new-password">
+      <label for="password-new-confirm-2">Confirm Password</label>
+      <input id="password-new-confirm-2" name="password-new-confirm-2" type="password" autocomplete="new-password">
+      <button type="submit">Change password</button>
+    </fieldset>
+  </form>
+  <hr />
+  <form action="/change-password" id="change-3">
+    <h2>Change password (without autocomplete attributes)</h2>
+    <fieldset>
+      <label for="password-current-3">Current Password</label>
+      <input id="password-current-3" name="password-current-3" type="password">
+      <label for="password-new-3">New Password</label>
+      <input id="password-new-3" name="password-new-3" type="password">
+      <label for="password-new-confirm-3">Confirm Password</label>
+      <input id="password-new-confirm-3" name="password-new-confirm-3" type="password">
+      <button type="submit">Save changes</button>
+    </fieldset>
+  </form>
+</div>
+<script type="module">
+  [...document.forms].forEach((form) => {
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target)
+      const dl = document.createElement('dl')
+      formData.forEach((value, key) => {
+        const dt = document.createElement('dt')
+        const dd = document.createElement('dd')
+        dt.innerText = key
+        dd.innerText = value
+        dl.append(dt, dd)
+      })
+      form.after(dl)
+      form.remove()
+    })
+  })
+</script>
+</body>
+
+</html>
diff --git a/autofill/style.css b/autofill/style.css
index 19d7f92..26fdf5a 100644
--- a/autofill/style.css
+++ b/autofill/style.css
@@ -56,8 +56,10 @@ hr {
 
 fieldset {
   display: grid;
-  grid-template-columns: max-content minmax(80px, 1fr);
+  grid-template-columns: 1fr 1fr;
   grid-gap: 1em;
+  width: 410px;
+  max-width: 100%;
   max-width: 100%;
   padding: 0;
   border: none;
@@ -117,3 +119,19 @@ button,
   align-items: center;
   z-index: 1000;
 }
+
+dl {
+  text-align: left;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+dt {
+  font-weight: bold;
+  margin-top: 1em;
+}
+
+dt::after {
+  content: ':'
+}
diff --git a/index.html b/index.html
index 06e0c17..594c41a 100644
--- a/index.html
+++ b/index.html
@@ -90,6 +90,7 @@ <h2>Autofill</h2>
 	<li><a href="./autofill/form-submission.html">Form submission detection and autofill</a></li>
 	<li><a href="./autofill/frame-form-submission-parent.html">Form submission detection and autofill within an iframe</a></li>
 	<li><a href="./autofill/signup.html">Password generation during signup</a></li>
+	<li><a href="./autofill/password-update.html">Password update/reset forms</a></li>
 	<li>
 		Autoprompt credentials autofill when a login form is front and center
 		<ul>

From f36cebeb3f6710811a8397a8174117e1c67af512 Mon Sep 17 00:00:00 2001
From: Emanuele Feliziani <feliziani.emanuele@gmail.com>
Date: Wed, 29 Nov 2023 13:57:49 +0100
Subject: [PATCH 2/2] Fix linting

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>
---
 autofill/password-update.html | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/autofill/password-update.html b/autofill/password-update.html
index 347f21c..ec931ed 100644
--- a/autofill/password-update.html
+++ b/autofill/password-update.html
@@ -66,21 +66,21 @@ <h2>Change password (without autocomplete attributes)</h2>
 </div>
 <script type="module">
   [...document.forms].forEach((form) => {
-    form.addEventListener("submit", (e) => {
-      e.preventDefault();
-      const formData = new FormData(e.target)
-      const dl = document.createElement('dl')
-      formData.forEach((value, key) => {
-        const dt = document.createElement('dt')
-        const dd = document.createElement('dd')
-        dt.innerText = key
-        dd.innerText = value
-        dl.append(dt, dd)
-      })
-      form.after(dl)
-      form.remove()
-    })
-  })
+      form.addEventListener('submit', (e) => {
+          e.preventDefault();
+          const formData = new FormData(e.target);
+          const dl = document.createElement('dl');
+          formData.forEach((value, key) => {
+              const dt = document.createElement('dt');
+              const dd = document.createElement('dd');
+              dt.innerText = key;
+              dd.innerText = value;
+              dl.append(dt, dd);
+          });
+          form.after(dl);
+          form.remove();
+      });
+  });
 </script>
 </body>
 
