From c2853260815b9d929903798eaf936ba8a7e73174 Mon Sep 17 00:00:00 2001
From: Emanuele Feliziani <feliziani.emanuele@gmail.com>
Date: Mon, 1 Aug 2022 09:08:50 +0200
Subject: [PATCH 1/3] Update links to Home

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>
---
 autofill/autoprompt/case-1.html | 2 +-
 autofill/autoprompt/case-2.html | 2 +-
 autofill/autoprompt/case-3.html | 2 +-
 autofill/autoprompt/case-4.html | 2 +-
 autofill/autoprompt/case-5.html | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/autofill/autoprompt/case-1.html b/autofill/autoprompt/case-1.html
index 8a9fc3e..3081c86 100644
--- a/autofill/autoprompt/case-1.html
+++ b/autofill/autoprompt/case-1.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<p><a href="../index.html">[Home]</a></p>
+<p><a href="../../index.html">[Home]</a></p>
 <nav>
   <ul class="nav">
     <li><a href="./case-1.html">Case 1</a></li>
diff --git a/autofill/autoprompt/case-2.html b/autofill/autoprompt/case-2.html
index 98e24d0..577cda0 100644
--- a/autofill/autoprompt/case-2.html
+++ b/autofill/autoprompt/case-2.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<p><a href="../index.html">[Home]</a></p>
+<p><a href="../../index.html">[Home]</a></p>
 <nav>
   <ul class="nav">
     <li><a href="./case-1.html">Case 1</a></li>
diff --git a/autofill/autoprompt/case-3.html b/autofill/autoprompt/case-3.html
index 8c0c1c1..ff3b8bd 100644
--- a/autofill/autoprompt/case-3.html
+++ b/autofill/autoprompt/case-3.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<p><a href="../index.html">[Home]</a></p>
+<p><a href="../../index.html">[Home]</a></p>
 <nav>
   <ul class="nav">
     <li><a href="./case-1.html">Case 1</a></li>
diff --git a/autofill/autoprompt/case-4.html b/autofill/autoprompt/case-4.html
index 6765f0b..b751b6f 100644
--- a/autofill/autoprompt/case-4.html
+++ b/autofill/autoprompt/case-4.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<p><a href="../index.html">[Home]</a></p>
+<p><a href="../../index.html">[Home]</a></p>
 <nav>
   <ul class="nav">
     <li><a href="./case-1.html">Case 1</a></li>
diff --git a/autofill/autoprompt/case-5.html b/autofill/autoprompt/case-5.html
index 816aa09..059852b 100644
--- a/autofill/autoprompt/case-5.html
+++ b/autofill/autoprompt/case-5.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<p><a href="../index.html">[Home]</a></p>
+<p><a href="../../index.html">[Home]</a></p>
 <nav>
   <ul class="nav">
     <li><a href="./case-1.html">Case 1</a></li>

From dfe10c4265273753e5964505b11b4aa3c19720f0 Mon Sep 17 00:00:00 2001
From: Emanuele Feliziani <feliziani.emanuele@gmail.com>
Date: Mon, 1 Aug 2022 09:25:40 +0200
Subject: [PATCH 2/3] Use more expressive naming

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>
---
 .../{case-1.html => 1-standard-login-form.html}    | 10 +++++-----
 .../{case-2.html => 2-form-in-modal.html}          | 14 +++++++-------
 .../{case-3.html => 3-multistep-form.html}         | 10 +++++-----
 .../{case-4.html => 4-covered-form.html}           | 10 +++++-----
 .../{case-5.html => 5-form-with-text.html}         | 10 +++++-----
 index.html                                         | 12 ++++++------
 6 files changed, 33 insertions(+), 33 deletions(-)
 rename autofill/autoprompt/{case-1.html => 1-standard-login-form.html} (73%)
 rename autofill/autoprompt/{case-2.html => 2-form-in-modal.html} (70%)
 rename autofill/autoprompt/{case-3.html => 3-multistep-form.html} (80%)
 rename autofill/autoprompt/{case-4.html => 4-covered-form.html} (85%)
 rename autofill/autoprompt/{case-5.html => 5-form-with-text.html} (90%)

diff --git a/autofill/autoprompt/case-1.html b/autofill/autoprompt/1-standard-login-form.html
similarity index 73%
rename from autofill/autoprompt/case-1.html
rename to autofill/autoprompt/1-standard-login-form.html
index 3081c86..dd0b697 100644
--- a/autofill/autoprompt/case-1.html
+++ b/autofill/autoprompt/1-standard-login-form.html
@@ -12,11 +12,11 @@
 <p><a href="../../index.html">[Home]</a></p>
 <nav>
   <ul class="nav">
-    <li><a href="./case-1.html">Case 1</a></li>
-    <li><a href="./case-2.html">Case 2</a></li>
-    <li><a href="./case-3.html">Case 3</a></li>
-    <li><a href="./case-4.html">Case 4</a></li>
-    <li><a href="./case-5.html">Case 5</a></li>
+    <li><a href="./1-standard-login-form.html">Form present on pageload</a></li>
+    <li><a href="./2-form-in-modal.html">Form in modal</a></li>
+    <li><a href="./3-multistep-form.html">Multistep login form</a></li>
+    <li><a href="./4-covered-form.html">With dialog covering the form</a></li>
+    <li><a href="./5-form-with-text.html">Form below the fold on mobile but in sidebar on larger screens</a></li>
   </ul>
 </nav>
 
diff --git a/autofill/autoprompt/case-2.html b/autofill/autoprompt/2-form-in-modal.html
similarity index 70%
rename from autofill/autoprompt/case-2.html
rename to autofill/autoprompt/2-form-in-modal.html
index 577cda0..dc8795a 100644
--- a/autofill/autoprompt/case-2.html
+++ b/autofill/autoprompt/2-form-in-modal.html
@@ -12,11 +12,11 @@
 <p><a href="../../index.html">[Home]</a></p>
 <nav>
   <ul class="nav">
-    <li><a href="./case-1.html">Case 1</a></li>
-    <li><a href="./case-2.html">Case 2</a></li>
-    <li><a href="./case-3.html">Case 3</a></li>
-    <li><a href="./case-4.html">Case 4</a></li>
-    <li><a href="./case-5.html">Case 5</a></li>
+    <li><a href="./1-standard-login-form.html">Form present on pageload</a></li>
+    <li><a href="./2-form-in-modal.html">Form in modal</a></li>
+    <li><a href="./3-multistep-form.html">Multistep login form</a></li>
+    <li><a href="./4-covered-form.html">With dialog covering the form</a></li>
+    <li><a href="./5-form-with-text.html">Form below the fold on mobile but in sidebar on larger screens</a></li>
   </ul>
 </nav>
 
@@ -31,7 +31,7 @@
   <script>
     const initialButton = document.querySelector('button');
     initialButton.addEventListener('click', () => {
-      const formEl = `<form id="click-form" novalidate action="./case-3.html">
+      const formEl = `<form id="click-form" novalidate action="3-multistep-form.html">
       <h3>Sign in form dia</h3>
       <fieldset>
         <label for="email">Email</label>
@@ -47,7 +47,7 @@ <h3>Sign in form dia</h3>
       const handler = (e) => {
         e.preventDefault();
         e.stopImmediatePropagation();
-        window.location.href = './case-3.html'
+        window.location.href = '3-multistep-form.html'
       }
       button?.addEventListener('click', handler, true);
     })
diff --git a/autofill/autoprompt/case-3.html b/autofill/autoprompt/3-multistep-form.html
similarity index 80%
rename from autofill/autoprompt/case-3.html
rename to autofill/autoprompt/3-multistep-form.html
index ff3b8bd..0ea477e 100644
--- a/autofill/autoprompt/case-3.html
+++ b/autofill/autoprompt/3-multistep-form.html
@@ -12,11 +12,11 @@
 <p><a href="../../index.html">[Home]</a></p>
 <nav>
   <ul class="nav">
-    <li><a href="./case-1.html">Case 1</a></li>
-    <li><a href="./case-2.html">Case 2</a></li>
-    <li><a href="./case-3.html">Case 3</a></li>
-    <li><a href="./case-4.html">Case 4</a></li>
-    <li><a href="./case-5.html">Case 5</a></li>
+    <li><a href="./1-standard-login-form.html">Form present on pageload</a></li>
+    <li><a href="./2-form-in-modal.html">Form in modal</a></li>
+    <li><a href="./3-multistep-form.html">Multistep login form</a></li>
+    <li><a href="./4-covered-form.html">With dialog covering the form</a></li>
+    <li><a href="./5-form-with-text.html">Form below the fold on mobile but in sidebar on larger screens</a></li>
   </ul>
 </nav>
 
diff --git a/autofill/autoprompt/case-4.html b/autofill/autoprompt/4-covered-form.html
similarity index 85%
rename from autofill/autoprompt/case-4.html
rename to autofill/autoprompt/4-covered-form.html
index b751b6f..cae117e 100644
--- a/autofill/autoprompt/case-4.html
+++ b/autofill/autoprompt/4-covered-form.html
@@ -12,11 +12,11 @@
 <p><a href="../../index.html">[Home]</a></p>
 <nav>
   <ul class="nav">
-    <li><a href="./case-1.html">Case 1</a></li>
-    <li><a href="./case-2.html">Case 2</a></li>
-    <li><a href="./case-3.html">Case 3</a></li>
-    <li><a href="./case-4.html">Case 4</a></li>
-    <li><a href="./case-5.html">Case 5</a></li>
+    <li><a href="./1-standard-login-form.html">Form present on pageload</a></li>
+    <li><a href="./2-form-in-modal.html">Form in modal</a></li>
+    <li><a href="./3-multistep-form.html">Multistep login form</a></li>
+    <li><a href="./4-covered-form.html">With dialog covering the form</a></li>
+    <li><a href="./5-form-with-text.html">Form below the fold on mobile but in sidebar on larger screens</a></li>
   </ul>
 </nav>
 
diff --git a/autofill/autoprompt/case-5.html b/autofill/autoprompt/5-form-with-text.html
similarity index 90%
rename from autofill/autoprompt/case-5.html
rename to autofill/autoprompt/5-form-with-text.html
index 059852b..eb9baf1 100644
--- a/autofill/autoprompt/case-5.html
+++ b/autofill/autoprompt/5-form-with-text.html
@@ -12,11 +12,11 @@
 <p><a href="../../index.html">[Home]</a></p>
 <nav>
   <ul class="nav">
-    <li><a href="./case-1.html">Case 1</a></li>
-    <li><a href="./case-2.html">Case 2</a></li>
-    <li><a href="./case-3.html">Case 3</a></li>
-    <li><a href="./case-4.html">Case 4</a></li>
-    <li><a href="./case-5.html">Case 5</a></li>
+    <li><a href="./1-standard-login-form.html">Form present on pageload</a></li>
+    <li><a href="./2-form-in-modal.html">Form in modal</a></li>
+    <li><a href="./3-multistep-form.html">Multistep login form</a></li>
+    <li><a href="./4-covered-form.html">With dialog covering the form</a></li>
+    <li><a href="./5-form-with-text.html">Form below the fold on mobile but in sidebar on larger screens</a></li>
   </ul>
 </nav>
 
diff --git a/index.html b/index.html
index 7ee24f6..373dde5 100644
--- a/index.html
+++ b/index.html
@@ -76,13 +76,13 @@ <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>
-		Autoprompt
+		Autoprompt credentials autofill when a login form is front and center
 		<ul>
-			<li><a href="./autofill/autoprompt/case-1.html">Case 1</a></li>
-			<li><a href="./autofill/autoprompt/case-2.html">Case 2</a></li>
-			<li><a href="./autofill/autoprompt/case-3.html">Case 3</a></li>
-			<li><a href="./autofill/autoprompt/case-4.html">Case 4</a></li>
-			<li><a href="./autofill/autoprompt/case-5.html">Case 5</a></li>
+			<li><a href="./autofill/autoprompt/1-standard-login-form.html">Form present on pageload</a></li>
+			<li><a href="./autofill/autoprompt/2-form-in-modal.html">Form in modal</a></li>
+			<li><a href="./autofill/autoprompt/3-multistep-form.html">Multistep login form</a></li>
+			<li><a href="./autofill/autoprompt/4-covered-form.html">With dialog covering the form</a></li>
+			<li><a href="./autofill/autoprompt/5-form-with-text.html">Form below the fold on mobile but in sidebar on larger screens</a></li>
 		</ul>
 	</li>
 </ul>

From f2b5e54051cf37ab2195864325e062f6dca647ad Mon Sep 17 00:00:00 2001
From: Emanuele Feliziani <feliziani.emanuele@gmail.com>
Date: Mon, 1 Aug 2022 13:46:22 +0200
Subject: [PATCH 3/3] Add submit listeners to avoid confusion on Android

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>
---
 autofill/autoprompt/1-standard-login-form.html | 3 ++-
 autofill/autoprompt/2-form-in-modal.html       | 7 ++++---
 autofill/autoprompt/5-form-with-text.html      | 3 ++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/autofill/autoprompt/1-standard-login-form.html b/autofill/autoprompt/1-standard-login-form.html
index dd0b697..cdcb6c6 100644
--- a/autofill/autoprompt/1-standard-login-form.html
+++ b/autofill/autoprompt/1-standard-login-form.html
@@ -44,8 +44,9 @@ <h3>Sign in form</h3>
       e.preventDefault();
       e.stopImmediatePropagation();
       clickForm.outerHTML = '<h1>Submitted!</h1>';
-    }
+    };
     button?.addEventListener('click', handler, true);
+    clickForm?.addEventListener('submit', handler, true);
   </script>
 </div>
 
diff --git a/autofill/autoprompt/2-form-in-modal.html b/autofill/autoprompt/2-form-in-modal.html
index dc8795a..8594d4f 100644
--- a/autofill/autoprompt/2-form-in-modal.html
+++ b/autofill/autoprompt/2-form-in-modal.html
@@ -47,10 +47,11 @@ <h3>Sign in form dia</h3>
       const handler = (e) => {
         e.preventDefault();
         e.stopImmediatePropagation();
-        window.location.href = '3-multistep-form.html'
-      }
+        window.location.href = '3-multistep-form.html';
+      };
       button?.addEventListener('click', handler, true);
-    })
+      clickForm?.addEventListener('submit', handler, true);
+    });
   </script>
 </div>
 
diff --git a/autofill/autoprompt/5-form-with-text.html b/autofill/autoprompt/5-form-with-text.html
index eb9baf1..459ffe9 100644
--- a/autofill/autoprompt/5-form-with-text.html
+++ b/autofill/autoprompt/5-form-with-text.html
@@ -52,8 +52,9 @@ <h3>Sign in form</h3>
       e.preventDefault();
       e.stopImmediatePropagation();
       clickForm.outerHTML = '<h1>Submitted!</h1>';
-    }
+    };
     button?.addEventListener('click', handler, true);
+    clickForm?.addEventListener('submit', handler, true);
   </script>
 </div>
 
