feat: enable form

src/App.svelte

@@ -14,6 +14,47 @@
       src={import.meta.env.VITE_TRACKING_URL}
     ></script>
   {/if}
+  <script>
+    async function handleSubmit(event) {
+      event.preventDefault();
+
+      const form = document.querySelector(".apply-form");
+      const name = form.querySelector("#form-name").value;
+      const email = form.querySelector("#form-email").value;
+
+      console.log(name, email);
+
+      const res = await fetch(
+        `https://odoo.logos.co/website_mass_mailing/subscribe2`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            jsonrpc: "2.0",
+            method: "call",
+            params: {
+              email: email,
+              name: name,
+              list_id: 12,
+              subscription_type: "email",
+            },
+          }),
+        }
+      );
+
+      const data = await res.json();
+
+      if (data.error) {
+        console.error(data.error);
+        alert("There was an error submitting your application.");
+      } else {
+        console.log(data);
+        alert("Thank you for applying!");
+      }
+    }
+  </script>
 </svelte:head>
 
 <main

src/app.css

@@ -63,3 +63,23 @@ main > div > div:first-child {
 ::-webkit-scrollbar-thumb:hover {
   background: none;
 }
+
+.apply-form {
+  display: flex;
+  align-items: center;
+  margin-top: 24px;
+  gap: 12px;
+}
+
+.apply-input {
+  padding: 4px 12px;
+  background: transparent;
+  border: 1px solid white;
+}
+
+.apply-submit {
+  padding: 4px 12px;
+  background: transparent;
+  color: white;
+  border: 1px solid white;
+}

src/components/Input.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { afterUpdate, onMount } from 'svelte';
-  import { history } from '../stores/history';
-  import { theme } from '../stores/theme';
-  import { commands } from '../utils/commands';
-  import { track } from '../utils/tracking';
+  import { afterUpdate, onMount } from "svelte";
+  import { history } from "../stores/history";
+  import { theme } from "../stores/theme";
+  import { commands } from "../utils/commands";
+  import { track } from "../utils/tracking";
 
-  let command = '';
+  let command = "";
   let historyIndex = -1;
 
   let input: HTMLInputElement;
@@ -14,28 +14,28 @@
     input.focus();
 
     if ($history.length === 0) {
-      const command = commands['banner'] as () => string;
+      const command = commands["banner"] as () => string;
 
-      console.log('command',command);
+      console.log("command", command);
 
       if (command) {
         const output = command();
-        console.log('output',output);
+        console.log("output", output);
 
-        $history = [...$history, { command: 'banner', outputs: [output] }];
+        $history = [...$history, { command: "banner", outputs: [output] }];
       }
     }
   });
 
   afterUpdate(() => {
-    input.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    input.scrollIntoView({ behavior: "smooth", block: "end" });
   });
 
   const handleKeyDown = async (event: KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      const [commandName, ...args] = command.split(' ');
+    if (event.key === "Enter") {
+      const [commandName, ...args] = command.split(" ");
 
-      if (import.meta.env.VITE_TRACKING_ENABLED === 'true') {
+      if (import.meta.env.VITE_TRACKING_ENABLED === "true") {
         track(commandName, ...args);
       }
 
@@ -44,7 +44,7 @@
       if (commandFunction) {
         const output = await commandFunction(args);
 
-        if (commandName !== 'clear') {
+        if (commandName !== "clear") {
           $history = [...$history, { command, outputs: [output] }];
         }
       } else {
@@ -53,8 +53,8 @@
         $history = [...$history, { command, outputs: [output] }];
       }
 
-      command = '';
-    } else if (event.key === 'ArrowUp') {
+      command = "";
+    } else if (event.key === "ArrowUp") {
       if (historyIndex < $history.length - 1) {
         historyIndex++;
 
@@ -62,26 +62,26 @@
       }
 
       event.preventDefault();
-    } else if (event.key === 'ArrowDown') {
+    } else if (event.key === "ArrowDown") {
       if (historyIndex > -1) {
         historyIndex--;
         command =
           historyIndex >= 0
             ? $history[$history.length - 1 - historyIndex].command
-            : '';
+            : "";
       }
       event.preventDefault();
-    } else if (event.key === 'Tab') {
+    } else if (event.key === "Tab") {
       event.preventDefault();
 
       const autoCompleteCommand = Object.keys(commands).find((cmd) =>
-        cmd.startsWith(command),
+        cmd.startsWith(command)
       );
 
       if (autoCompleteCommand) {
         command = autoCompleteCommand;
       }
-    } else if (event.ctrlKey && event.key === 'l') {
+    } else if (event.ctrlKey && event.key === "l") {
       event.preventDefault();
 
       $history = [];
@@ -91,7 +91,11 @@
 
 <svelte:window
   on:click={() => {
-    input.focus();
+    const form = document.querySelector(".apply-form");
+
+    if (!form) {
+      input.focus();
+    }
   }}
 />
 

src/utils/commands.ts

@@ -10,10 +10,14 @@ export const commands: Record<
   (args: string[]) => Promise<string> | string
 > = {
   apply: async () => {
-    // const htmlString =
-    //   '<template>Please email us at <a class="link" href="mailto:contact@free.technology">contact@free.technology</a></template>';
+    const htmlString = `<template>
+<form class="apply-form" onsubmit="handleSubmit(event)">
+  <input class="apply-input" id="form-name" placeholder="First name or pseudonym" />
+  <input class="apply-input" id="form-email" placeholder="Email address" type="email" />
+  <button class="apply-submit">Submit</button>
+</form>
+</template>`;
 
-    const htmlString = "Coming Soon.";
     return htmlString;
   },
   help: () => {