kms electron

src/App.svelte

@@ -7,7 +7,6 @@
     DropdownDivider,
     Button,
     Checkbox,
-    DarkMode,
   } from "flowbite-svelte";
   import Progressbar from "./lib/Progressbar.svelte";
   import {
@@ -18,13 +17,12 @@
     UserSolid,
   } from "flowbite-svelte-icons";
   import ezppLogo from "../public/favicon.png";
+  import { currentPage } from "./storage/localStore";
+  import { Page } from "./consts/pages";
+  import Login from "./pages/Login.svelte";
+  import Launch from "./pages/Launch.svelte";
 
-  let loggedIn = true;
-
-  let patch = true;
-  let loading = false;
-  let currentStatus = "Preparing launch...";
-  let rand = 0;
+  let loggedIn = false;
 </script>
 
 <div class="p-2 flex flex-row justify-between items-center">
@@ -34,98 +32,74 @@
       >EZPPLauncher</span
     >
   </div>
-  <div class="flex flex-row gap-2 w-fill cursor-pointer md:order-2">
-    <Avatar
-      class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
-      src={loggedIn ? "https://a.ez-pp.farm/1001" : "https://a.ez-pp.farm/0"}
-      id="avatar-menu"
-    />
-  </div>
-  <Dropdown placement="bottom" triggeredBy="#avatar-menu">
-    <DropdownHeader>
-      <span class="block text-sm">{loggedIn ? "Quetzalcoatl" : "Guest"}</span>
-      <span
-        class="block truncate text-sm font-medium text-gray-500 dark:text-gray-200"
-      >
-        {loggedIn ? "me@horizonco.de" : "Please log in!"}
-      </span>
-    </DropdownHeader>
-    {#if loggedIn}
+  {#if $currentPage != Page.Login}
+    <div class="flex flex-row gap-2 w-fill cursor-pointer md:order-2">
+      <Avatar
+        class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
+        src={loggedIn ? "https://a.ez-pp.farm/1001" : "https://a.ez-pp.farm/0"}
+        id="avatar-menu"
+      />
+    </div>
+    <Dropdown placement="bottom" triggeredBy="#avatar-menu">
+      <DropdownHeader>
+        <span class="block text-sm">{loggedIn ? "Quetzalcoatl" : "Guest"}</span>
+        <span
+          class="block truncate text-sm font-medium text-gray-500 dark:text-gray-200"
+        >
+          {loggedIn ? "me@horizonco.de" : "Please log in!"}
+        </span>
+      </DropdownHeader>
+      {#if loggedIn}
+        <DropdownItem
+          class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+        >
+          <UserSolid class="select-none outline-none border-none" />
+          Profile
+        </DropdownItem>
+      {/if}
       <DropdownItem
         class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
       >
-        <UserSolid class="select-none outline-none border-none" />
-        Profile
+        <UserSettingsSolid class="select-none outline-none border-none" />
+        Settings
       </DropdownItem>
-    {/if}
-    <DropdownItem
-      class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
-    >
-      <UserSettingsSolid class="select-none outline-none border-none" />
-      Settings
-    </DropdownItem>
-    <DropdownDivider />
-    {#if loggedIn}
-      <DropdownItem
-        class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
-        on:click={() => (loggedIn = false)}
-      >
-        <ArrowRightFromBracketSolid
-          class="select-none outline-none border-none"
-        />
-        Sign out
-      </DropdownItem>
-    {:else}
-      <DropdownItem
-        class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
-        on:click={() => (loggedIn = true)}
-      >
-        <ArrowRightToBracketSolid
-          class="select-none outline-none border-none"
-        />
-        Login
-      </DropdownItem>
-      <DropdownItem
-        class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
-      >
-        <UserPlusSolid class="select-none outline-none border-none" />
-        Register
-      </DropdownItem>
-    {/if}
-  </Dropdown>
+      <DropdownDivider />
+      {#if loggedIn}
+        <DropdownItem
+          class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+          on:click={() => (loggedIn = false)}
+        >
+          <ArrowRightFromBracketSolid
+            class="select-none outline-none border-none"
+          />
+          Sign out
+        </DropdownItem>
+      {:else}
+        <DropdownItem
+          class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+          on:click={() => currentPage.set(Page.Login)}
+        >
+          <ArrowRightToBracketSolid
+            class="select-none outline-none border-none"
+          />
+          Login
+        </DropdownItem>
+        <DropdownItem
+          class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+        >
+          <UserPlusSolid class="select-none outline-none border-none" />
+          Register
+        </DropdownItem>
+      {/if}
+    </Dropdown>
+  {/if}
 </div>
 
-<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 border border-gray-300 dark:border-gray-700 rounded-lg"
-  >
-    <Button
-      color="light"
-      size="xl"
-      class="active:!bg-gray-900"
-      on:click={() => {
-        rand = Math.random() * 100;
-        loading = true;
-      }}>Launch</Button
-    >
-    <Checkbox color="primary" bind:checked={patch}>
-      Patching {patch ? "enabled" : "disabled"}
-    </Checkbox>
-    {#if loading}
-      <div class="w-full flex flex-col justify-center items-center gap-2">
-        <p class="m-0 p-0 dark:text-gray-100">{currentStatus}</p>
-        <Progressbar
-          animate={true}
-          progress={rand}
-          labelInside={true}
-          size="h-6"
-          indeterminate
-          labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
-        />
-      </div>
-    {/if}
-  </div>
-</main>
+{#if $currentPage == Page.Login}
+  <Login />
+{:else}
+  <Launch />
+{/if}
 
 <style>
   .container {

src/consts/pages.ts

@@ -0,0 +1,4 @@
+export enum Page {
+  Login = 0,
+  Launch = 1,
+}

src/lib/Progressbar.svelte

@@ -3,7 +3,7 @@
   import { tweened } from "svelte/motion";
   import { twMerge, twJoin } from "tailwind-merge";
 
-  export let progress: string | number | undefined = "45";
+  export let progress: string | number | undefined | null = "45";
   export let precision = 0;
   export let tweenDuration = 400;
   export let animate = false;
@@ -15,7 +15,7 @@
   export let labelInsideClass =
     "text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full";
   export let divClass = "w-full bg-gray-200 rounded-full dark:bg-gray-700";
-  export let indeterminate = false;
+  export let indeterminate = progress == null;
 
   const barColors: Record<string, string> = {
     primary: "bg-primary-600",

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>

src/storage/localStore.ts

@@ -0,0 +1,6 @@
+import { type Writable, writable } from "svelte/store";
+import { Page } from "../consts/pages";
+import type { User } from "../types/user";
+
+export const currentUser: Writable<undefined | User> = writable(undefined);
+export const currentPage = writable(Page.Login);

src/types/error.ts

@@ -0,0 +1,4 @@
+export type Error = {
+  code: number;
+  message: string;
+};

src/types/images.d.ts

@@ -2,3 +2,4 @@ declare module "*.jpg";
 declare module "*.jpeg";
 declare module "*.png";
 declare module "*.svg";
+declare module "*.svelte";

src/types/user.ts

@@ -0,0 +1,5 @@
+export type User = {
+  id: number;
+  name: string;
+  email: string;
+};

src/util/loginUtil.ts

@@ -0,0 +1,30 @@
+import axios from "axios";
+import type { Error } from "../types/error";
+import type { User } from "../types/user";
+import { ipcRenderer } from "electron";
+
+const loginCheckEndpoint = "https://ez-pp.farm/login/check";
+let retries = 0;
+
+export const performLogin = async (
+  username: string,
+  password: string,
+) => {
+  const result = await ipcRenderer.invoke("ezpplauncher:login", {
+    username,
+    password,
+  });
+  console.log(result);
+  return ({ code: 403, message: "Login failed." } as Error);
+  /*   const result = await axios.post(loginCheckEndpoint, { username, password });
+  const code = result.data.code ?? 404;
+  if (code === 200 || code === 403) {
+    retries = 0;
+    return result.data.user as User;
+  } else {
+    if (retries++ >= 5) {
+      return ({ code: 403, message: "Login failed." } as Error);
+    }
+    return await performLogin(username, password);
+  } */
+};