Finish Svelte5 transition

Author: hhvrc

frontend/src/lib/components/WiFiList.svelte

@@ -9,7 +9,18 @@
   import { SerializeWifiNetworkSaveCommand } from '$lib/Serializers/WifiNetworkSaveCommand';
   import WiFiDetailsDialog from '$lib/components/WiFiDetailsDialog.svelte';
   import type { WiFiNetworkGroup } from '$lib/types';
-  import { Button } from '$lib/components/ui/button';
+  import { Button, buttonVariants } from '$lib/components/ui/button';
+  import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+  } from '$lib/components/ui/dialog';
+  import { Input } from '$lib/components/ui/input';
+  import { Label } from '$lib/components/ui/label';
   import { ArrowRight, Link, LoaderCircle, RotateCcw, Wifi } from 'lucide-svelte';
 
   let scanStatus = $derived($HubStateStore.wifiScanStatus);
@@ -27,28 +38,17 @@
     )
   );
 
+  let dialogOpen = $state(false);
+  let pendingPassword = $state<string | null>(null);
+
   function wifiScan() {
     const data = SerializeWifiScanCommand(!isScanning);
     WebSocketClient.Instance.Send(data);
   }
-  function wifiAuthenticate(item: WiFiNetworkGroup) {
-    if (item.security !== WifiAuthMode.Open) {
-      modalStore.trigger({
-        type: 'prompt',
-        title: 'Enter password',
-        body: 'Enter the password for the network',
-        value: '',
-        valueAttr: { type: 'password', minlength: 1, maxlength: 63, required: true },
-        response: (password: string) => {
-          if (!password) return;
-          const data = SerializeWifiNetworkSaveCommand(item.ssid, password, true);
-          WebSocketClient.Instance.Send(data);
-        },
-      });
-    } else {
-      const data = SerializeWifiNetworkSaveCommand(item.ssid, null, true);
-      WebSocketClient.Instance.Send(data);
-    }
+  function wifiAuthenticate(ssid: string, password: string | null) {
+    dialogOpen = false;
+    const data = SerializeWifiNetworkSaveCommand(ssid, null, true);
+    WebSocketClient.Instance.Send(data);
   }
   function wifiConnect(item: WiFiNetworkGroup) {
     const data = SerializeWifiNetworkConnectCommand(item.ssid);
@@ -58,6 +58,13 @@
     const data = SerializeWifiNetworkDisconnectCommand();
     WebSocketClient.Instance.Send(data);
   }
+
+  function handleWifiAuthDialogOpenChange(open: boolean) {
+    dialogOpen = open;
+    if (!open) {
+      pendingPassword = null;
+    }
+  }
 </script>
 
 <div>
@@ -93,10 +100,35 @@
             <Button onclick={() => wifiConnect(netgroup)}>
               <ArrowRight color="#22c55e" />
             </Button>
-          {:else}
-            <Button onclick={() => wifiAuthenticate(netgroup)}>
-              <Link color="#22c55e" />
+          {:else if netgroup.security === WifiAuthMode.Open}
+            <Button onclick={() => wifiAuthenticate(netgroup.ssid, null)}>
+              <ArrowRight color="#22c55e" />
             </Button>
+          {:else}
+            <Dialog bind:open={() => dialogOpen, handleWifiAuthDialogOpenChange}>
+              <DialogTrigger class={buttonVariants({ variant: 'outline' })}>
+                <Link color="#22c55e" />
+              </DialogTrigger>
+              <DialogContent class="sm:max-w-[425px]">
+                <DialogHeader>
+                  <DialogTitle>Enter password</DialogTitle>
+                  <DialogDescription>Enter the password for the network</DialogDescription>
+                </DialogHeader>
+                <div class="flex flex-row items-center gap-4 py-4">
+                  <Label for="name" class="text-right">Password</Label>
+                  <Input id="name" class="col-span-3" bind:value={pendingPassword} />
+                </div>
+                <DialogFooter>
+                  <Button
+                    type="button"
+                    onclick={() => wifiAuthenticate(netgroup.ssid, pendingPassword)}
+                    disabled={!pendingPassword || pendingPassword.length > 63}
+                  >
+                    Save changes
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
           {/if}
           <WiFiDetailsDialog group={netgroup} />
         </div>

frontend/src/lib/types/WiFiNetworkGroup.ts

@@ -1,9 +1,12 @@
 import type { WifiAuthMode } from '$lib/_fbs/open-shock/serialization/types/wifi-auth-mode';
-import type { WiFiNetwork } from './WiFiNetwork';
 
 export type WiFiNetworkGroup = {
   ssid: string;
   saved: boolean;
   security: WifiAuthMode;
-  networks: WiFiNetwork[];
+  networks: {
+    bssid: string;
+    rssi: number;
+    channel: number;
+  }[];
 };

frontend/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitest/config';
+import { defineConfig, type UserConfig } from 'vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 
 export default defineConfig({
@@ -7,4 +7,4 @@ export default defineConfig({
   test: {
     include: ['src/**/*.{test,spec}.{js,ts}'],
   },
-});
+} as UserConfig); // TODO: "test" is not a valid property of the defineconfig argument? This needs to get fixed