Added wifi dropdown to the wizzard

gui/public/i18n/en/translation.ftl

@@ -577,6 +577,9 @@ onboarding-wifi_creds-submit = Submit!
 onboarding-wifi_creds-ssid =
     .label = Wi-Fi name
     .placeholder = Enter Wi-Fi name
+onboarding-wifi_creds-ssidSelect =
+    .placeholder = Select your Wi-Fi network
+onboarding-wifi_creds-ssidSelect-label = Wi-Fi network
 onboarding-wifi_creds-password =
     .label = Password
     .placeholder = Enter password

gui/src-tauri/capabilities/migrated.json

@@ -28,6 +28,56 @@
     "store:allow-get",
     "store:allow-set",
     "store:allow-save",
-    "fs:allow-write-text-file"
+    "fs:allow-write-text-file",
+    {
+      "identifier": "shell:allow-execute",
+      "allow": [
+        {
+          "name": "netsh-list",
+          "cmd": "netsh",
+          "args": [
+            "wlan",
+            "show",
+            "profile"
+          ],
+          "sidecar": false
+        },
+        {
+          "name": "netsh-scan",
+          "cmd": "netsh",
+          "args": [
+            "wlan",
+            "show",
+            "network",
+            "mode=Bssid"
+          ],
+          "sidecar": false
+        },
+        {
+          "name": "netsh-details",
+          "cmd": "netsh",
+          "args": [
+            "wlan",
+            "show",
+            "profile",
+            {
+              "validator": "name=\\S+"
+            },
+            "key=clear"
+          ],
+          "sidecar": false
+        },
+        {
+          "name": "netsh-connected",
+          "cmd": "netsh",
+          "args": [
+            "wlan",
+            "show",
+            "interfaces"
+          ],
+          "sidecar": false
+        }
+      ]
+    }
   ]
 }

gui/src/components/onboarding/pages/WifiCreds.tsx

@@ -1,8 +1,10 @@
+import { useMemo } from 'react';
 import { Localized, useLocalization } from '@fluent/react';
 import { useOnboarding } from '@/hooks/onboarding';
 import { useWifiForm } from '@/hooks/wifi-form';
 import { Button } from '@/components/commons/Button';
 import { Input } from '@/components/commons/Input';
+import { Dropdown } from '@/components/commons/Dropdown';
 import { Typography } from '@/components/commons/Typography';
 import classNames from 'classnames';
 import { useTrackers } from '@/hooks/tracker';
@@ -11,14 +13,30 @@ import { useBnoExists } from '@/hooks/imu-logic';
 export function WifiCredsPage() {
   const { l10n } = useLocalization();
   const { applyProgress, state } = useOnboarding();
-  const { control, handleSubmit, submitWifiCreds, formState } = useWifiForm();
+  const {
+    control,
+    handleSubmit,
+    submitWifiCreds,
+    formState,
+    wifiNetworks,
+    watch,
+  } = useWifiForm();
   const { useConnectedIMUTrackers } = useTrackers();
   const connectedIMUTrackers = useConnectedIMUTrackers();
 
   applyProgress(0.2);
 
   const bnoExists = useBnoExists(connectedIMUTrackers);
 
+  const wifiNetworksDropdownItems = useMemo(() => {
+    const networksMapped = wifiNetworks.map((network) => ({
+      label: network.ssid,
+      value: network.ssid,
+    }));
+
+    return [...networksMapped, { label: 'Other', value: 'other' }];
+  }, [wifiNetworks]);
+
   return (
     <form
       className="flex flex-col w-full h-full"
@@ -57,20 +75,46 @@ export function WifiCredsPage() {
               state.alonePage && 'bg-background-60'
             )}
           >
-            <Localized
-              id="onboarding-wifi_creds-ssid"
-              attrs={{ placeholder: true, label: true }}
-            >
-              <Input
-                control={control}
-                rules={{ required: true }}
-                name="ssid"
-                type="text"
-                label="SSID"
-                placeholder="ssid"
-                variant="secondary"
-              />
-            </Localized>
+            {wifiNetworks.length > 0 && (
+              <>
+                <Typography bold>
+                  {l10n.getString('onboarding-wifi_creds-ssidSelect-label')}
+                </Typography>
+                <Localized
+                  id="onboarding-wifi_creds-ssidSelect"
+                  attrs={{ placeholder: true }}
+                >
+                  <Dropdown
+                    control={control}
+                    rules={{ required: true }}
+                    name="ssidSelect"
+                    variant="primary"
+                    placeholder="SSID"
+                    direction="down"
+                    display="block"
+                    items={wifiNetworksDropdownItems}
+                  />
+                </Localized>
+              </>
+            )}
+
+            {(wifiNetworks.length === 0 || watch('ssidSelect') == 'other') && (
+              <Localized
+                id="onboarding-wifi_creds-ssid"
+                attrs={{ placeholder: true, label: true }}
+              >
+                <Input
+                  control={control}
+                  rules={{ required: true }}
+                  name="ssid"
+                  type="text"
+                  label="SSID"
+                  placeholder="ssid"
+                  variant="secondary"
+                />
+              </Localized>
+            )}
+
             <Localized
               id="onboarding-wifi_creds-password"
               attrs={{ placeholder: true, label: true }}

gui/src/hooks/wifi-form.tsx

@@ -2,21 +2,41 @@ import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { useOnboarding } from './onboarding';
+import { useWifiNetworks } from './wifi-scan';
 
 export interface WifiFormData {
   ssid: string;
+  ssidSelect: string;
   password?: string;
 }
 
 export function useWifiForm() {
   const navigate = useNavigate();
   const { state, setWifiCredentials } = useOnboarding();
-  const { register, reset, handleSubmit, formState, control } =
+  const { register, reset, handleSubmit, formState, control, watch, setValue } =
     useForm<WifiFormData>({
       defaultValues: {},
       reValidateMode: 'onSubmit',
     });
 
+  const { wifiNetworks } = useWifiNetworks();
+
+  const ssidSelect = watch('ssidSelect');
+  useEffect(() => {
+    if (ssidSelect === 'other') {
+      setValue('ssid', '');
+      setValue('password', '');
+      return;
+    }
+
+    const network = wifiNetworks.find((network) => network.ssid === ssidSelect);
+
+    if (!network) return;
+
+    setValue('ssid', network.ssid);
+    setValue('password', network.password);
+  }, [ssidSelect]);
+
   useEffect(() => {
     if (state.wifi) {
       reset({
@@ -38,7 +58,9 @@ export function useWifiForm() {
     handleSubmit,
     register,
     formState,
+    wifiNetworks,
     hasWifiCreds: !!state.wifi,
     control,
+    watch,
   };
 }