Revert "flows: rewrite shell to webcomponents"

This reverts commit b03a508475.

passbook/flows/templates/flows/shell.html

@@ -21,12 +21,21 @@
 {% endblock %}
 
 {% block main_container %}
-<flow-shell-card
-    class="pf-c-login__main"
-    flowBodyUrl="{{ exec_url }}">
-</flow-shell-card>
+<main class="pf-c-login__main" id="flow-body">
+    <div class="pf-c-login__main-body pb-loading">
+        <span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
+            <span class="pf-c-spinner__clipper"></span>
+            <span class="pf-c-spinner__lead-ball"></span>
+            <span class="pf-c-spinner__tail-ball"></span>
+        </span>
+    </div>
+</main>
 <script>
+const flowBodyUrl = "{{ exec_url }}";
 const messagesUrl = "{{ msg_url }}";
+const flowBody = document.querySelector("#flow-body");
+const spinner = document.querySelector(".pb-loading");
+
 const updateMessages = () => {
     let messageContainer = document.querySelector(".pf-c-alert-group");
     fetch(messagesUrl).then(response => {
@@ -70,8 +79,77 @@ const updateMessages = () => {
         });
     });
 };
+const updateCard = (data) => {
+    switch (data.type) {
+        case "redirect":
+            window.location = data.to
+            break;
+        case "template":
+            flowBody.innerHTML = data.body;
+            checkAutofocus();
+            updateMessages();
+            loadFormCode();
+            setFormSubmitHandlers();
+        default:
+            break;
+    }
+};
+const showSpinner = () => {
+    flowBody.innerHTML = "";
+    flowBody.appendChild(spinner);
+};
+const loadFormCode = () => {
+    document.querySelectorAll("#flow-body script").forEach(script => {
+        let newScript = document.createElement("script");
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+    });
+};
+const checkAutofocus = () => {
+    const autofocusElement = document.querySelector("#flow-body [autofocus]");
+    if (autofocusElement !== null) {
+        autofocusElement.focus();
+    }
+};
+const updateFormAction = (form) => {
+    for (let index = 0; index < form.elements.length; index++) {
+        const element = form.elements[index];
+        if (element.value === form.action) {
+            console.log("pb-flow: Found Form action URL in form elements, not changing form action.");
+            return false;
+        }
+    }
+    form.action = flowBodyUrl;
+    console.log(`pb-flow: updated form.action ${flowBodyUrl}`);
+    return true;
+};
+const checkAutosubmit = (form) => {
+    if ("autosubmit" in form.attributes) {
+        return form.submit();
+    }
+};
+const setFormSubmitHandlers = () => {
+    document.querySelectorAll("#flow-body form").forEach(form => {
+        console.log(`pb-flow: Checking for autosubmit attribute ${form}`);
+        checkAutosubmit(form);
+        console.log(`pb-flow: Setting action for form ${form}`);
+        updateFormAction(form);
+        console.log(`pb-flow: Adding handler for form ${form}`);
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            let formData = new FormData(form);
+            showSpinner();
+            fetch(flowBodyUrl, {
+                method: 'post',
+                body: formData,
+            }).then(response => response.json()).then(data => {
+                updateCard(data);
+            });
+        });
+        form.classList.add("pb-flow-wrapped");
+    });
+};
 
-
-// fetch(flowBodyUrl).then(response => response.json()).then(data => updateCard(data));
+fetch(flowBodyUrl).then(response => response.json()).then(data => updateCard(data));
 </script>
 {% endblock %}

passbook/static/static/src/FlowShellCard.js

@@ -1,113 +0,0 @@
-import { LitElement, html } from 'lit-element';
-
-class FetchFillSlot extends LitElement {
-
-    static get properties() {
-        return {
-            flowBodyUrl: { type: String },
-            flowBody: { type: String },
-        };
-    }
-
-    createRenderRoot() {
-        return this;
-    }
-
-    firstUpdated() {
-        fetch(this.flowBodyUrl).then(r => r.json()).then(r => this.updateCard(r));
-    }
-
-    async updateCard(data) {
-        switch (data.type) {
-            case "redirect":
-                window.location = data.to
-                break;
-            case "template":
-                this.flowBody = data.body;
-                await this.requestUpdate();
-                this.checkAutofocus();
-                // this.updateMessages();
-                this.loadFormCode();
-                this.setFormSubmitHandlers();
-            default:
-                break;
-        }
-    };
-
-    loadFormCode() {
-        this.querySelectorAll("script").forEach(script => {
-            let newScript = document.createElement("script");
-            newScript.src = script.src;
-            document.head.appendChild(newScript);
-        });
-    }
-
-    checkAutofocus() {
-        const autofocusElement = this.querySelector("[autofocus]");
-        if (autofocusElement !== null) {
-            autofocusElement.focus();
-        }
-    }
-
-    updateFormAction(form) {
-        for (let index = 0; index < form.elements.length; index++) {
-            const element = form.elements[index];
-            if (element.value === form.action) {
-                console.log("pb-flow: Found Form action URL in form elements, not changing form action.");
-                return false;
-            }
-        }
-        form.action = this.flowBodyUrl;
-        console.log(`pb-flow: updated form.action ${this.flowBodyUrl}`);
-        return true;
-    }
-
-    checkAutosubmit(form) {
-        if ("autosubmit" in form.attributes) {
-            return form.submit();
-        }
-    }
-
-    setFormSubmitHandlers() {
-        this.querySelectorAll("form").forEach(form => {
-            console.log(`pb-flow: Checking for autosubmit attribute ${form}`);
-            this.checkAutosubmit(form);
-            console.log(`pb-flow: Setting action for form ${form}`);
-            this.updateFormAction(form);
-            console.log(`pb-flow: Adding handler for form ${form}`);
-            form.addEventListener('submit', (e) => {
-                e.preventDefault();
-                let formData = new FormData(form);
-                this.flowBody = undefined;
-                fetch(this.flowBodyUrl, {
-                    method: 'post',
-                    body: formData,
-                }).then(response => response.json()).then(data => {
-                    this.updateCard(data);
-                });
-            });
-            form.classList.add("pb-flow-wrapped");
-        });
-    }
-
-    loading() {
-        return html`
-            <div class="pf-c-login__main-body pb-loading">
-                <span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
-                    <span class="pf-c-spinner__clipper"></span>
-                    <span class="pf-c-spinner__lead-ball"></span>
-                    <span class="pf-c-spinner__tail-ball"></span>
-                </span>
-            </div>`;
-    }
-
-    render() {
-        if (this.flowBody !== undefined) {
-            // return html`<main class="pf-c-login__main">${unsafeHTML(this.flowBody)}</div>`;
-            return html([this.flowBody]);
-        }
-        return this.loading();
-    }
-}
-
-customElements.define('flow-shell-card', FetchFillSlot);

passbook/static/static/src/passbook.js

@@ -1,5 +1,4 @@
 import './FetchFillSlot.js';
-import './FlowShellCard.js';
 
 // Button Dropdowns
 document.querySelectorAll("button.pf-c-dropdown__toggle").forEach((b) => {