kms electron

src/pages/Launch.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Button } from "flowbite-svelte";
+  import Progressbar from "../lib/Progressbar.svelte";
+</script>
+
+<main class="h-[265px] my-auto flex flex-col justify-center items-center p-5">
+  <div
+    class="container flex flex-col items-center justify-center gap-5 rounded-lg p-3"
+  >
+    <Button color="light" size="xl" class="dark:active:!bg-gray-900"
+      >Launch</Button
+    >
+    <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"
+        labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
+      />
+    </div>
+  </div>
+</main>

src/pages/Login.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { Input, Button, Spinner } from "flowbite-svelte";
+  import { performLogin } from "../util/loginUtil";
+  import type { User } from "../types/user";
+  import { currentUser } from "../storage/localStore";
+
+  let loading = false;
+  let username = "";
+  let password = "";
+
+  const processLogin = async () => {
+    loading = true;
+    const loginResult = await performLogin(username, password);
+    if (loginResult instanceof Error) {
+      loading = false;
+      return;
+    }
+  };
+</script>
+
+<main class="h-[265px] my-auto flex flex-col justify-center items-center p-5">
+  <div
+    class="container flex flex-col items-center justify-center gap-5 rounded-lg p-3"
+  >
+    <Input
+      type="text"
+      placeholder="Username"
+      size="md"
+      disabled={loading}
+      bind:value={username}
+    />
+    <Input
+      type="password"
+      placeholder="Password"
+      size="md"
+      disabled={loading}
+      bind:value={password}
+    />
+    <div class="flex flex-col justify-center items-center gap-5 mt-2">
+      <Button
+        class="dark:active:!bg-gray-900"
+        color="light"
+        disabled={loading}
+        on:click={processLogin}
+      >
+        {#if loading}
+          <Spinner size={"5"} color="white"></Spinner>
+        {:else}
+          Login
+        {/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"
+        color="none"
+        disabled={loading}>Continue without login</Button
+      >
+    </div>
+  </div>
+</main>