Add password update flows (#176)

* Add password update flows Signed-off-by: Emanuele Feliziani <[email protected]> * Fix linting Signed-off-by: Emanuele Feliziani <[email protected]> --------- Signed-off-by: Emanuele Feliziani <[email protected]>
duckduckgo · Nov 29, 2023 · 03b6658 · 03b6658
1 parent 1688582
commit 03b6658
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 1 deletion.
diff --git a/autofill/password-update.html 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="[email protected]">
+      <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
@@ -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
@@ -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>