add login mechanic

src/App.svelte

@@ -17,14 +17,24 @@
     UserSolid,
   } from "flowbite-svelte-icons";
   import ezppLogo from "../public/favicon.png";
-  import { currentPage } from "./storage/localStore";
+  import { currentPage, currentUser } from "./storage/localStore";
   import { Page } from "./consts/pages";
   import Login from "./pages/Login.svelte";
   import Launch from "./pages/Launch.svelte";
+  import { Toaster } from "svelte-french-toast";
+  import type { User } from "./types/user";
 
+  let user: User | undefined = undefined;
   let loggedIn = false;
+
+  currentUser.subscribe((newUser) => {
+    loggedIn = newUser != undefined;
+    user = newUser;
+  });
 </script>
 
+<Toaster></Toaster>
+
 <div class="p-2 flex flex-row justify-between items-center">
   <div class="flex flex-row items-center">
     <img src={ezppLogo} alt="EZPPFarm Logo" class="w-12 h-12 mr-2" />
@@ -36,38 +46,43 @@
     <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"}
+        src={loggedIn
+          ? "https://a.ez-pp.farm/" + user?.id
+          : "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 text-sm">{loggedIn ? user?.name : "Guest"}</span>
         <span
           class="block truncate text-sm font-medium text-gray-500 dark:text-gray-200"
         >
-          {loggedIn ? "me@horizonco.de" : "Please log in!"}
+          {loggedIn ? user?.email : "Please log in!"}
         </span>
       </DropdownHeader>
       {#if loggedIn}
-        <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"
         >
           <UserSolid class="select-none outline-none border-none" />
           Profile
-        </DropdownItem>
+        </DropdownItem> -->
       {/if}
-      <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"
       >
         <UserSettingsSolid class="select-none outline-none border-none" />
         Settings
-      </DropdownItem>
-      <DropdownDivider />
+      </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)}
+          on:click={() => {
+            currentUser.set(undefined);
+            currentPage.set(Page.Login);
+          }}
         >
           <ArrowRightFromBracketSolid
             class="select-none outline-none border-none"
@@ -84,12 +99,12 @@
           />
           Login
         </DropdownItem>
-        <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>
+        </DropdownItem> -->
       {/if}
     </Dropdown>
   {/if}

src/pages/Login.svelte

@@ -2,7 +2,10 @@
   import { Input, Button, Spinner } from "flowbite-svelte";
   import { performLogin } from "../util/loginUtil";
   import type { User } from "../types/user";
-  import { currentUser } from "../storage/localStore";
+  import type { Error } from "../types/error";
+  import { currentPage, currentUser } from "../storage/localStore";
+  import toast from "svelte-french-toast";
+  import { Page } from "../consts/pages";
 
   let loading = false;
   let username = "";
@@ -10,11 +13,38 @@
 
   const processLogin = async () => {
     loading = true;
-    const loginResult = await performLogin(username, password);
-    if (loginResult instanceof Error) {
-      loading = false;
-      return;
-    }
+    window.addEventListener(
+      "login-result",
+      (e) => {
+        const customEvent = e as CustomEvent;
+        const resultData = customEvent.detail;
+        const wasSuccessful = "user" in resultData;
+
+        if (!wasSuccessful) {
+          toast.error(resultData.message, {
+            position: "bottom-center",
+            className:
+              "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+            duration: 1500,
+          });
+          loading = false;
+          return;
+        }
+        console.log(resultData);
+        currentUser.set(resultData.user as User);
+        currentPage.set(Page.Launch);
+        toast.success(`Welcome back ${resultData.user.name}!`, {
+          position: "bottom-center",
+          className:
+            "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+          duration: 5000,
+        });
+      },
+      { once: true }
+    );
+    window.dispatchEvent(
+      new CustomEvent("login-attempt", { detail: { username, password } })
+    );
   };
 </script>
 
@@ -52,7 +82,9 @@
       <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
+        disabled={loading}
+        on:click={() => currentPage.set(Page.Launch)}
+        >Continue without login</Button
       >
     </div>
   </div>

src/util/loginUtil.ts

@@ -1,7 +1,6 @@
 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;
@@ -9,22 +8,26 @@ let retries = 0;
 export const performLogin = async (
   username: string,
   password: string,
-) => {
-  const result = await ipcRenderer.invoke("ezpplauncher:login", {
-    username,
-    password,
+): Promise<Error | User> => {
+  const fetchResult = await fetch("https://ez-pp.farm/login/check", {
+    method: "POST",
+    mode: "cors",
+    body: JSON.stringify({ username, password }),
+    headers: {
+      "Content-Type": "application/json",
+    },
   });
-  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) {
+
+  if (fetchResult.ok) {
+    const result = await fetchResult.json();
     retries = 0;
-    return result.data.user as User;
+    return result.user;
   } else {
     if (retries++ >= 5) {
-      return ({ code: 403, message: "Login failed." } as Error);
+      console.log("Login failed after 5 retries.");
+      retries = 0;
+      return { code: 403, message: "Login failed." } as Error;
     }
     return await performLogin(username, password);
-  } */
+  }
 };