production refactor

src/render/components/login.js

@@ -0,0 +1,58 @@
+const Login =
+{
+    setup()
+    {
+        const usr = Vue.ref("");
+        const pwd = Vue.ref("");
+
+        const submitForm = async () => {
+            const success = await window.mainApi.invoke("login", usr.value, pwd.value);
+            if (!success) shake("login-form");
+        }
+
+        return { usr, pwd, submitForm };
+    },
+
+    template: `
+        <form id="login" @submit.prevent="submitForm">
+
+            <!-- username and password forms -->
+            <div id="login-form">
+                <!-- username -->
+                <div class="login-input-box">
+                    <input class="login-input" type="text" v-model="usr" />
+                    <div class="login-input-modifier">Email</div>
+                </div>
+
+                <!-- password -->
+                <div class="login-input-box">
+                    <input class="login-input" type="password" v-model="pwd" />
+                    <div class="login-input-modifier">Password</div>
+                </div>
+            </div>
+
+            <!-- submit button; position: fixed -->
+            <button 
+                class="login-submit-button button" 
+                type="submit"
+            >
+                Login
+            </button>
+
+        </form> `
+}
+
+/** Shake a div to indicate incorrect credentials */
+const shake = (elementId) => 
+{
+    const el = document.getElementById(elementId);
+
+    if (el) 
+    el.classList.remove("shake");
+
+    setTimeout(() => {
+        if (el) el.classList.add("shake");
+    }, 250);
+}
+
+export default Login;