add Settings page

package-lock.json

@@ -40,6 +40,7 @@
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-progress": "^1.1.2",
         "rollup-plugin-svelte": "^7.1.6",
+        "rollup-plugin-unused": "^0.1.1",
         "sirv-cli": "^2.0.2",
         "svelte": "^4.2.8",
         "svelte-check": "^3.6.2",
@@ -2064,6 +2065,15 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
@@ -3376,6 +3386,18 @@
         "minimatch": "^3.0.4"
       }
     },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -4313,6 +4335,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -4543,6 +4585,15 @@
         }
       ]
     },
+    "node_modules/ignore": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
+      "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/import-cwd": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -5834,6 +5885,15 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -7137,6 +7197,61 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/rollup-plugin-unused": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-unused/-/rollup-plugin-unused-0.1.1.tgz",
+      "integrity": "sha512-sxx0yNHX8WDRc55T34eUAizntSKouuROaMXabg0uapFnWvuesXt9qkYfFXHfPv7NyB5cLOmvcCm8WZBn9RxEGg==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.0.4",
+        "globby": "^11.0.0"
+      }
+    },
+    "node_modules/rollup-plugin-unused/node_modules/@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
+    "node_modules/rollup-plugin-unused/node_modules/@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
+    "node_modules/rollup-plugin-unused/node_modules/estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true
+    },
+    "node_modules/rollup-plugin-unused/node_modules/rollup": {
+      "version": "2.79.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
+      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/rollup-pluginutils": {
       "version": "2.8.2",
       "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
@@ -7452,6 +7567,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/slice-ansi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",

package.json

@@ -65,6 +65,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-progress": "^1.1.2",
     "rollup-plugin-svelte": "^7.1.6",
+    "rollup-plugin-unused": "^0.1.1",
     "sirv-cli": "^2.0.2",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.2",

rollup.config.js

@@ -9,6 +9,7 @@ import image from "@rollup/plugin-image";
 import sveltePreprocess from "svelte-preprocess";
 import typescript from "@rollup/plugin-typescript";
 import progress from "rollup-plugin-progress";
+import findUnused from "rollup-plugin-unused";
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -47,6 +48,7 @@ export default {
     file: "public/build/bundle.js",
   },
   plugins: [
+    findUnused(),
     progress({ clearLine: true }),
     svelte({
       preprocess: sveltePreprocess({ sourceMap: !production }),

src/App.svelte

@@ -23,6 +23,7 @@
   import Launch from "./pages/Launch.svelte";
   import { Toaster } from "svelte-french-toast";
   import type { User } from "./types/user";
+  import Settings from "./pages/Settings.svelte";
 
   let user: User | undefined = undefined;
   let loggedIn = false;
@@ -48,7 +49,7 @@
       >EZPPLauncher</span
     >
   </div>
-  {#if $currentPage != Page.Login}
+  {#if $currentPage == Page.Launch}
     <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"
@@ -75,13 +76,14 @@
           Profile
         </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"
+        on:click={() => currentPage.set(Page.Settings)}
       >
         <UserSettingsSolid class="select-none outline-none border-none" />
         Settings
       </DropdownItem>
-      <DropdownDivider />-->
+      <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"
@@ -115,6 +117,8 @@
 
 {#if $currentPage == Page.Login}
   <Login />
+{:else if $currentPage == Page.Settings}
+  <Settings />
 {:else}
   <Launch />
 {/if}

src/consts/pages.ts

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

src/pages/Login.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
   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, startup } from "../storage/localStore";
   import toast from "svelte-french-toast";
   import { Page } from "../consts/pages";
+  import { EyeSlashSolid, EyeSolid } from "flowbite-svelte-icons";
 
   let loading = false;
   let username = "";
   let password = "";
   let saveCredentials = false;
+  let showPassword = false;
 
   const processLogin = async () => {
     loading = true;
@@ -122,12 +123,25 @@
       bind:value={username}
     />
     <Input
-      type="password"
+      type={showPassword ? "text" : "password"}
       placeholder="Password"
       size="md"
       disabled={loading}
       bind:value={password}
-    />
+    >
+      <Button
+        slot="right"
+        color="none"
+        class="!outline-none !ring-0 !p-0 !m-0 !bg-transparent !border-none"
+        on:click={() => (showPassword = !showPassword)}
+      >
+        {#if showPassword}
+          <EyeSolid class="outline-none border-none" />
+        {:else}
+          <EyeSlashSolid class="outline-none border-none" />
+        {/if}
+      </Button>
+    </Input>
     <Checkbox bind:checked={saveCredentials}>Save credentials</Checkbox>
     <div class="flex flex-col justify-center items-center gap-5 mt-1">
       <Button

src/pages/Settings.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Button, ButtonGroup, Input } from "flowbite-svelte";
+  import { FolderSolid } from "flowbite-svelte-icons";
+  import { currentPage } from "../storage/localStore";
+  import { Page } from "../consts/pages";
+</script>
+
+<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"
+  >
+    <ButtonGroup class="w-full">
+      <Input type="text" placeholder="Path to your osu! installation" />
+      <Button color="light" class="dark:active:!bg-gray-900"
+        ><FolderSolid
+          size="sm"
+          class="dark:text-gray-300 text-gray-500 outline-none border-none select-none pointer-events-none"
+        /></Button
+      >
+    </ButtonGroup>
+    <div class="flex flex-row justify-center items-center gap-5">
+      <Button color="light" class="dark:active:!bg-gray-900">Save</Button>
+      <Button
+        color="red"
+        class="dark:active:!bg-red-900 border-red-400"
+        on:click={() => currentPage.set(Page.Launch)}>Cancel</Button
+      >
+    </div>
+  </div>
+</main>