Separate login form into its own component

src/App.svelte

@@ -3,7 +3,7 @@
   import Lazy from "./lib/Lazy.svelte";
 </script>
 
-<Router>
+<Router primary={false}>
   <header>
     <h1>History</h1>
 

src/api/api.ts

@@ -0,0 +1,3 @@
+export function URL() {
+  return window.SVELTE_APP_API_URL ?? "https://api.summer.test";
+}

src/api/login.ts

@@ -0,0 +1,5 @@
+import { URL } from "./api";
+
+export async function postLogin() {
+  return await fetch(URL() + "/v1/marigold/auth/login", { method: "POST" });
+}

src/components/LoginForm.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  let inputUsername: string = "";
+  let inputPassword: string = "";
+
+  const dispatch = createEventDispatcher();
+
+  function submitLogin() {
+    dispatch("submit", { username: inputUsername, password: inputPassword });
+  }
+
+  function conDone(v: boolean): string {
+    return v ? "follows-constraint" : "missing-constraint";
+  }
+</script>
+
+<form class="login-form" method="post" on:submit|preventDefault={submitLogin}>
+  <h1>Sign In</h1>
+
+  <section>
+    <label for="email">Email</label>
+    <input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputUsername} />
+  </section>
+
+  <section>
+    <label for="current-password">Password</label>
+    <input id="current-password" name="current-password" type="password" autocomplete="current-password" aria-describedby="password-constraints" required bind:value={inputPassword} />
+    <div id="password-constraints">
+      <ul>
+        <li class={conDone(inputPassword.length >= 8)}>Eight or more characters</li>
+        <li class={conDone(inputPassword.toLocaleLowerCase() != inputPassword)}>Uppercase characters</li>
+        <li class={conDone(inputPassword.toLocaleUpperCase() != inputPassword)}>Lowercase characters</li>
+        <li class={conDone(/\d/.test(inputPassword))}>Numeric digit</li>
+        <li class={conDone(/\W/.test(inputPassword))}>Special symbol</li>
+      </ul>
+    </div>
+  </section>
+
+  <section>
+    <button type="submit" />
+  </section>
+</form>
+
+<style>
+  #password-constraints > ul > li.follows-constraint {
+    color: #bdd358;
+  }
+
+  #password-constraints > ul > li.missing-constraint {
+    color: #e5625e;
+  }
+</style>

src/routes/login/LoginRoute.svelte

@@ -1,49 +1,31 @@
 <script lang="ts">
+  import { onMount } from "svelte/types/runtime/internal/lifecycle";
+  import LoginForm from "../../components/LoginForm.svelte";
+  import { postLogin } from "../../api/login";
+
   let inputUsername: string = "";
   let inputPassword: string = "";
 
-  function submitLogin() {
-    console.info(inputUsername);
+  onMount(async function () {
+    await postLogin();
+  });
+
+  function submitLogin(e) {
+    console.info(e);
   }
 
+  let step = "";
+  let lastToken = "";
+
   function conDone(v: boolean): string {
     return v ? "follows-constraint" : "missing-constraint";
   }
 </script>
 
-<form class="login-form" method="post" on:submit|preventDefault={submitLogin}>
-  <h1>Sign In</h1>
-
-  <section>
-    <label for="email">Email</label>
-    <input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputUsername} />
-  </section>
-
-  <section>
-    <label for="current-password">Password</label>
-    <input id="current-password" name="current-password" type="password" autocomplete="current-password" aria-describedby="password-constraints" required bind:value={inputPassword} />
-    <div id="password-constraints">
-      <ul>
-        <li class={conDone(inputPassword.length >= 8)}>Eight or more characters</li>
-        <li class={conDone(inputPassword.toLocaleLowerCase() != inputPassword)}>Uppercase characters</li>
-        <li class={conDone(inputPassword.toLocaleUpperCase() != inputPassword)}>Lowercase characters</li>
-        <li class={conDone(/\d/.test(inputPassword))}>Numeric digit</li>
-        <li class={conDone(/\W/.test(inputPassword))}>Special symbol</li>
-      </ul>
-    </div>
-  </section>
-
-  <section>
-    <button type="submit" />
-  </section>
-</form>
-
-<style>
-  #password-constraints > ul > li.follows-constraint {
-    color: #bdd358;
-  }
-
-  #password-constraints > ul > li.missing-constraint {
-    color: #e5625e;
-  }
-</style>
+{#if step == "login"}
+  <LoginForm on:submit={submitLogin} />
+{:else if step == "email"}
+  <!-- add email step-->
+{:else if step == "mfa"}
+  <!-- add mfa step -->
+{/if}