Autofill shadow dom follow up (#184)

* Stupid minor text changes

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>

* Update the form in modal

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>

* Update package name

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>

---------

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>

autofill/autoprompt/2-form-in-modal.html

@@ -20,41 +20,55 @@
   </ul>
 </nav>
 
-<p id="demo"></p>
+<p id="demo"><button type="button" id="open-modal">Click here to open dialog</button></p>
+
+<p id="random-text">Some random text to use as "something outside the dialog element". Clicking here should close the dialog (if open).</p>
 
 <div class="">
   <p>Form created in modal after click (<b>should not prompt automatically</b>).</p>
 
-  <div class="dialog">
-    <p><button type="button">Click here to login</button></p>
-  </div>
-  <script>
-    const initialButton = document.querySelector('button');
-    initialButton.addEventListener('click', () => {
-      const formEl = `<form id="click-form" novalidate action="3-multistep-form.html">
-      <h3>Sign in form dia</h3>
+  <div class="dialog" hidden></div>
+</div>
+
+<script type="module">
+  const initialButton = document.querySelector('button');
+  const dialogEl = document.querySelector('.dialog');
+  initialButton.addEventListener('click', () => {
+      const formEl = `<form id="login" novalidate action="3-multistep-form.html">
+      <h3>Sign in form</h3>
       <fieldset>
         <label for="email">Email</label>
         <input id="email" type="email">
         <label for="password">Password</label>
         <input id="password" type="password">
-        <button type="submit">Sign in</button>
+        <button type="submit">Log in</button>
       </fieldset>
-    </form>`
-      initialButton.outerHTML = formEl;
-      const clickForm = document.getElementById('click-form');
-      const button = clickForm?.querySelector('button');
+    </form>`;
+      dialogEl.innerHTML = formEl;
+      dialogEl.removeAttribute('hidden');
+      window.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape') { dialogEl.setAttribute('hidden', ''); }
+      });
+      window.addEventListener('pointerdown', (e) => {
+          if (!dialogEl.contains(e.target)) { dialogEl.setAttribute('hidden', ''); }
+      });
+
+      const loginForm = document.getElementById('login');
+      const button = loginForm?.querySelector('button');
       const handler = (e) => {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        window.location.href = '3-multistep-form.html';
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          // window.location.href = '3-multistep-form.html';
+          if (loginForm.checkValidity()) {
+              setTimeout(() => {
+                  dialogEl.innerHTML = '<h1>Submitted!</h1>';
+              }, 100);
+          }
       };
       button?.addEventListener('click', handler, true);
-      clickForm?.addEventListener('submit', handler, true);
-    });
-  </script>
-</div>
-
+      loginForm?.addEventListener('submit', handler, true);
+  });
+</script>
 </body>
 
 </html>

autofill/shadow-dom.html

@@ -14,7 +14,7 @@
 <p id="demo"></p>
 
 <div class="">
-  <p>Form in shadow DOM created after click.</p>
+  <p>Form in nested shadow DOM created after click.</p>
 
   <div class="dialog">
     <shadow-component></shadow-component>
@@ -41,7 +41,7 @@
             // Create a div element inside the shadow root
             const div = document.createElement('div');
             const initialButton = document.createElement('button');
-            initialButton.textContent = 'Click here to login';
+            initialButton.textContent = 'Click here to sign up';
             initialButton.type = 'button';
             div.appendChild(initialButton);
             shadowRoot.appendChild(div);

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "privacy-test-pages",
+  "name": "@duckduckgo/privacy-test-pages",
   "description": "This project contains a collection of pages that are meant to be used for testing various privacy and security features of browsers and browser extensions.",
   "main": "server.js",
   "engines": {