login is functional now

src/pages/Launch.svelte

@@ -1,24 +1,44 @@
 <script lang="ts">
-  import { Button } from "flowbite-svelte";
+  import { Button, Checkbox } from "flowbite-svelte";
   import Progressbar from "../lib/Progressbar.svelte";
+  let progressbarFix = true;
+  let launching = false;
+  let patch = true;
+
+  setTimeout(() => {
+    progressbarFix = false;
+  }, 1000);
 </script>
 
-<main class="h-[265px] my-auto flex flex-col justify-center items-center p-5">
+<main
+  class="h-[265px] my-auto flex flex-col justify-center items-center p-5 animate-fadeIn"
+>
   <div
-    class="container flex flex-col items-center justify-center gap-5 rounded-lg p-3"
+    class="container flex flex-col items-center justify-center gap-3 rounded-lg p-3"
   >
-    <Button color="light" size="xl" class="dark:active:!bg-gray-900"
-      >Launch</Button
+    <Button
+      color="light"
+      size="xl"
+      class="dark:active:!bg-gray-900 {launching
+        ? ''
+        : 'active:scale-95 '}transition-transform duration-75"
+      disabled={launching}
+      on:click={() => (launching = !launching)}>Launch</Button
+    >
+    <Checkbox disabled={launching} bind:checked={patch}>Patch</Checkbox>
+    <div
+      class="w-full flex flex-col justify-center items-center gap-2 mt-2 {launching
+        ? 'animate-fadeIn '
+        : 'animate-fadeOut '}{progressbarFix ? '!opacity-0' : 'opacity-0'}"
     >
-    <div class="w-full flex flex-col justify-center items-center gap-2">
-      <p class="m-0 p-0 dark:text-gray-100">Waiting</p>
       <Progressbar
         animate={true}
         progress={null}
         labelInside={true}
-        size="h-6"
+        size="h-3"
         labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
       />
+      <p class="m-0 p-0 dark:text-gray-400 font-light">Waiting...</p>
     </div>
   </div>
 </main>

src/pages/Login.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { Input, Button, Spinner } from "flowbite-svelte";
+  import { Input, Button, Spinner, Checkbox } from "flowbite-svelte";
   import { performLogin } from "../util/loginUtil";
   import type { User } from "../types/user";
   import type { Error } from "../types/error";
-  import { currentPage, currentUser } from "../storage/localStore";
+  import { currentPage, currentUser, startup } from "../storage/localStore";
   import toast from "svelte-french-toast";
   import { Page } from "../consts/pages";
 
   let loading = false;
   let username = "";
   let password = "";
+  let saveCredentials = false;
 
   const processLogin = async () => {
     loading = true;
@@ -21,7 +22,8 @@
         const wasSuccessful = "user" in resultData;
 
         if (!wasSuccessful) {
-          toast.error(resultData.message, {
+          const errorResult = resultData as Error;
+          toast.error(errorResult.message, {
             position: "bottom-center",
             className:
               "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
@@ -30,27 +32,87 @@
           loading = false;
           return;
         }
-        console.log(resultData);
-        currentUser.set(resultData.user as User);
+        const userResult = resultData.user as User;
+        currentUser.set(userResult);
         currentPage.set(Page.Launch);
-        toast.success(`Welcome back ${resultData.user.name}!`, {
+        toast.success(`Welcome back, ${userResult.name}!`, {
           position: "bottom-center",
           className:
             "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
-          duration: 5000,
+          duration: 3000,
         });
       },
       { once: true }
     );
     window.dispatchEvent(
-      new CustomEvent("login-attempt", { detail: { username, password } })
+      new CustomEvent("login-attempt", {
+        detail: { username, password, saveCredentials },
+      })
     );
   };
+
+  const tryAutoLogin = async () => {
+    loading = true;
+    await new Promise((res) => setTimeout(res, 1500));
+    window.addEventListener(
+      "login-result",
+      (e) => {
+        const customEvent = e as CustomEvent;
+        const resultData = customEvent.detail;
+        const isGuest = "guest" in resultData;
+        const wasSuccessful = "user" in resultData;
+        if (isGuest) {
+          currentPage.set(Page.Launch);
+          toast.success(`Logged in as Guest`, {
+            position: "bottom-center",
+            className:
+              "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+            duration: 3000,
+          });
+          return;
+        }
+        if (!wasSuccessful) {
+          loading = false;
+          return;
+        }
+        const userResult = resultData.user as User;
+        currentUser.set(userResult);
+        currentPage.set(Page.Launch);
+        toast.success(`Welcome back, ${userResult.name}!`, {
+          position: "bottom-center",
+          className:
+            "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+          duration: 3000,
+        });
+        loading = false;
+      },
+      { once: true }
+    );
+    window.dispatchEvent(new CustomEvent("autologin-attempt"));
+  };
+
+  const proceedAsGuest = () => {
+    window.dispatchEvent(new CustomEvent("guest-login"));
+    currentPage.set(Page.Launch);
+    toast.success(`Logged in as Guest`, {
+      position: "bottom-center",
+      className:
+        "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+      duration: 3000,
+    });
+  };
+
+  if (!$startup) {
+    startup.set(true);
+    tryAutoLogin();
+  }
 </script>
 
-<main class="h-[265px] my-auto flex flex-col justify-center items-center p-5">
+<main
+  class="h-[265px] my-auto flex flex-col justify-center items-center p-5 animate-fadeIn opacity-0"
+>
   <div
-    class="container flex flex-col items-center justify-center gap-5 rounded-lg p-3"
+    class="container flex flex-col items-center justify-center gap-3 rounded-lg p-3"
   >
     <Input
       type="text"
@@ -66,9 +128,10 @@
       disabled={loading}
       bind:value={password}
     />
-    <div class="flex flex-col justify-center items-center gap-5 mt-2">
+    <Checkbox bind:checked={saveCredentials}>Save credentials</Checkbox>
+    <div class="flex flex-col justify-center items-center gap-5 mt-1">
       <Button
-        class="dark:active:!bg-gray-900"
+        class="dark:active:!bg-gray-900  active:scale-95 transition-transform duration-75"
         color="light"
         disabled={loading}
         on:click={processLogin}
@@ -80,11 +143,10 @@
         {/if}
       </Button>
       <Button
-        class="!bg-transparent border-none dark:text-gray-700 hover:!bg-gray-700/15 ring-primary active:ring-2 focus:ring-2"
+        class="!bg-transparent font-light border-none dark:text-gray-700 hover:!bg-gray-700/15 ring-primary active:ring-2 focus:ring-2 active:scale-95 transition-transform duration-75"
         color="none"
         disabled={loading}
-        on:click={() => currentPage.set(Page.Launch)}
-        >Continue without login</Button
+        on:click={proceedAsGuest}>Continue without login</Button
       >
     </div>
   </div>