Add demo

ruphin · May 23, 2019 · 0d12ff5 · 0d12ff5
1 parent ec2e570
commit 0d12ff5
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 117 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,6 @@
+FROM ruphin/webserve
+
+COPY ./demo /usr/share/nginx/html
+COPY ./dist /usr/share/nginx/html
+COPY ./node_modules/@webcomponents/webcomponentsjs /usr/share/nginx/html/node_modules/@webcomponents/webcomponentsjs
+COPY ./node_modules/@babel/polyfill /usr/share/nginx/html/node_modules/@babel/polyfill
diff --git a/Makefile b/Makefile
@@ -9,3 +9,7 @@ shell:
 .PHONY: build
 build:
 	docker run -it --rm -v $$PWD:/app ruphin/webdev npm run build
+
+.PHONY: production
+production: build
+	docker build -t ruphin/autopass .
diff --git a/auto-pass-element.js b/auto-pass-element.js
diff --git a/auto-pass.js b/auto-pass.js
@@ -3,14 +3,17 @@ const INPUT = "input";
 const username = {};
 const password = {};
 const proxyForm = document.createElement("form");
-const submitListener = () => storePassword();
 const createInput = () => document.createElement("input");
+const hide = element => {
+  element.tabIndex = "-1";
+  element.setAttribute("aria-hidden", "true");
+};
 const submitButton = createInput();
+const shadowDOM = !window.ShadyDOM || !window.ShadyDOM.inUse;
 let realForm;
 submitButton.type = SUBMIT;
 username.proxy = username.input = createInput();
 password.proxy = password.input = createInput();
-
 proxyForm.appendChild(username.proxy);
 proxyForm.appendChild(password.proxy);
 proxyForm.appendChild(submitButton);
@@ -19,9 +22,13 @@ proxyForm.style = "visibility: hidden; height: 0; width: 0";
 proxyForm.addEventListener(SUBMIT, e => {
   e.preventDefault();
 });
+hide(username.proxy);
+hide(password.proxy);
+hide(submitButton);
+hide(proxyForm);
 
 export const attachProxyForm = hostElement => {
-  if (!window.ShadyDOM || !window.ShadyDOM.inUse) {
+  if (shadowDOM) {
     hostElement.appendChild(proxyForm);
   }
 };
@@ -30,55 +37,57 @@ export const storePassword = () => {
   submitButton.click();
 };
 
-export const connectUsernameInput = input => {
+export const connectUsername = input => {
   connect(
     username,
     input
   );
 };
 
-export const connectPasswordInput = input => {
+export const connectPassword = input => {
   connect(
     password,
     input
   );
   if (realForm) {
-    realForm.removeEventListener(SUBMIT, submitListener);
+    realForm.removeEventListener(SUBMIT, storePassword);
   }
   realForm = input.form;
   if (realForm) {
-    realForm.addEventListener(SUBMIT, submitListener);
+    realForm.addEventListener(SUBMIT, storePassword);
   }
 };
 
 const connect = (field, newInput) => {
-  const { input, inputListener, proxy, proxyListener } = field;
-  input.removeEventListener(INPUT, inputListener);
-  proxy.removeEventListener(INPUT, proxyListener);
-  const { id, type } = (field.input = newInput);
-  Object.assign(field.proxy, { id, type });
-  synchronise(field);
+  if (shadowDOM) {
+    const { input, inputListener, proxy, proxyListener } = field;
+    input.removeEventListener(INPUT, inputListener);
+    proxy.removeEventListener(INPUT, proxyListener);
+    const { id, type } = (field.input = newInput);
+    Object.assign(proxy, { id, type });
+    synchronise(field);
+  }
 };
 
 const synchronise = field => {
   const { input, proxy } = field;
-  field.proxyListener = attachListener(input, proxy);
-  field.inputListener = attachListener(proxy, input);
+  field.proxyListener = sync(proxy, input);
+  field.inputListener = sync(input, proxy);
 };
 
-const attachListener = (input, proxy) => {
+const sync = (from, to) => {
   const listener = () => {
-    const proxyValue = proxy.value;
-    if (input.value !== proxyValue) {
-      input.value = proxyValue;
+    const fromValue = from.value;
+    if (to.value !== fromValue) {
+      to.value = fromValue;
     }
   };
-  const proxyValue = proxy.value;
-  if (!input.value && proxyValue) {
-    input.value = proxyValue;
+  const fromValue = from.value;
+  if (!to.value && fromValue) {
+    to.value = fromValue;
   }
 
-  proxy.addEventListener(INPUT, listener);
+  from.addEventListener(INPUT, listener);
 
   return listener;
 };
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"
+/>
+
+<script
+  nomodule
+  src="/node_modules/@babel/polyfill/dist/polyfill.min.js"
+></script>
+
+<script>
+  // window.ShadyDOM = { force: true };
+</script>
+
+<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+
+<script nomodule src="./my-form.es5.js"></script>
+<script type="module" src="./my-form.js"></script>
+<script type="module">
+  import { attachProxyForm } from "./auto-pass.js";
+  attachProxyForm(document.getElementById("proxyForm"));
+</script>
+
+<div id="proxyForm"></div>
+
+<my-form></my-form>
diff --git a/demo/my-form.js b/demo/my-form.js
@@ -0,0 +1,51 @@
+import { connectUsername, connectPassword } from "./auto-pass.js";
+
+const html = t => t.join("");
+
+const template = html`
+  <div>#shadow-root</div>
+  <form id="form" method="post" action="/success">
+    <input id="usernameInput" />
+    <input id="passwordInput" type="password" />
+    <button>Log in</button>
+  </form>
+  <style>
+    :host {
+      display: inline-block;
+      padding: 2px 10px 10px;
+      border: 1px solid #343434;
+    }
+    form {
+      margin-top: 10px;
+    }
+    input {
+      display: block;
+    }
+    input,
+    button {
+      margin: 6px;
+    }
+  </style>
+`;
+
+class MyForm extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = template;
+  }
+  connectedCallback() {
+    const usernameInput = this.shadowRoot.getElementById("usernameInput");
+    const passwordInput = this.shadowRoot.getElementById("passwordInput");
+    const form = this.shadowRoot.getElementById("form");
+    connectUsername(usernameInput);
+    connectPassword(passwordInput);
+
+    form.addEventListener("submit", e => {
+      e.preventDefault();
+      window.location.assign("/success/index.html");
+    });
+  }
+}
+
+customElements.define("my-form", MyForm);
diff --git a/demo/success/index.html b/demo/success/index.html
@@ -0,0 +1 @@
+<p>Logged in!</p>
diff --git a/index.html b/index.html
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,8 +11,9 @@
   "dependencies": {},
   "devDependencies": {
     "@babel/core": "7.4.0",
-    "@babel/preset-env": "7.4.2",
     "@babel/polyfill": "7.4.0",
+    "@babel/preset-env": "7.4.2",
+    "@webcomponents/webcomponentsjs": "^2.2.10",
     "browser-sync": "2.26.3",
     "connect-history-api-fallback": "1.6.0",
     "np": "4.0.2",

diff --git a/rollup.config.js b/rollup.config.js
@@ -45,17 +45,8 @@ const browserSyncPlugin =
       }
     },
     server: {
-      baseDir: ["dist", "."],
-      middleware: [
-        historyApiFallback(),
-        function(req, res, next) {
-          if (req.method.toUpperCase() == "POST") {
-            console.log("[POST => GET] : " + req.url);
-            req.method = "GET";
-          }
-          next();
-        }
-      ]
+      baseDir: ["demo", "."],
+      middleware: [historyApiFallback()]
     },
     files: ["./*"]
   });
@@ -99,17 +90,18 @@ const bundleConfig = ({
 
 const config = [
   bundleConfig({
-    input: "auto-pass-element.js",
-    output: "dist/index.nomodule.js",
-    transpiled: true,
-    format: "iife"
-  }),
-  bundleConfig({
-    input: "auto-pass-element.js",
-    output: "dist/index.js",
+    input: "auto-pass.js",
+    output: "dist/auto-pass.js",
     transpiled: false,
-    minified: true,
+    minified: false,
     format: "esm"
+  }),
+  bundleConfig({
+    input: "auto-pass.js",
+    output: "dist/auto-pass.es5.js",
+    transpiled: true,
+    minified: false,
+    format: "iife"
   })
 ];