107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
|
import { Field, Form, Formik } from "formik";
|
||
|
|
import FormGroup from "../components/FormGroup";
|
||
|
|
import type { WifiSettingValues } from "../../../types/types";
|
||
|
|
import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
|
||
|
|
import { toast } from "sonner";
|
||
|
|
|
||
|
|
const WiFiSettingsForm = () => {
|
||
|
|
const { wifiQuery, wifiMutation } = useWifiAndModem();
|
||
|
|
|
||
|
|
const wifiSSID = wifiQuery?.data?.propSSID?.value;
|
||
|
|
const wifiPassword = wifiQuery?.data?.propPassword?.value;
|
||
|
|
|
||
|
|
const initialValues = {
|
||
|
|
ssid: wifiSSID ?? "",
|
||
|
|
password: wifiPassword ?? "",
|
||
|
|
encryption: "WPA2",
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSubmit = (values: WifiSettingValues) => {
|
||
|
|
const wifiConfig = {
|
||
|
|
id: "ModemAndWifiManager-wifi",
|
||
|
|
configHash: "206890572",
|
||
|
|
propSSID: {
|
||
|
|
value: values.ssid,
|
||
|
|
datatype: "java.lang.String",
|
||
|
|
},
|
||
|
|
propPassword: {
|
||
|
|
value: values.password,
|
||
|
|
datatype: "java.lang.String",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
wifiMutation.mutate(wifiConfig);
|
||
|
|
//todo: check what response is
|
||
|
|
toast.success("WiFi settings updated");
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<Formik
|
||
|
|
initialValues={initialValues}
|
||
|
|
onSubmit={handleSubmit}
|
||
|
|
enableReinitialize
|
||
|
|
>
|
||
|
|
{() => (
|
||
|
|
<Form className="flex flex-col space-y-5 px-2">
|
||
|
|
<FormGroup>
|
||
|
|
<label
|
||
|
|
htmlFor="ssid"
|
||
|
|
className="font-medium whitespace-nowrap md:w-2/3"
|
||
|
|
>
|
||
|
|
SSID
|
||
|
|
</label>
|
||
|
|
<Field
|
||
|
|
id="ssid"
|
||
|
|
name="ssid"
|
||
|
|
type="text"
|
||
|
|
className="p-1.5 border border-gray-400 rounded-lg"
|
||
|
|
placeholder="Enter SSID"
|
||
|
|
/>
|
||
|
|
</FormGroup>
|
||
|
|
<FormGroup>
|
||
|
|
<label
|
||
|
|
htmlFor="password"
|
||
|
|
className="font-medium whitespace-nowrap md:w-2/3"
|
||
|
|
>
|
||
|
|
Password
|
||
|
|
</label>
|
||
|
|
<Field
|
||
|
|
id="password"
|
||
|
|
name="password"
|
||
|
|
type="password"
|
||
|
|
className="p-1.5 border border-gray-400 rounded-lg"
|
||
|
|
placeholder="Enter Password"
|
||
|
|
/>
|
||
|
|
</FormGroup>
|
||
|
|
<FormGroup>
|
||
|
|
<label
|
||
|
|
htmlFor="encryption"
|
||
|
|
className="font-medium whitespace-nowrap md:w-2/3"
|
||
|
|
>
|
||
|
|
WPA/Encryption Type
|
||
|
|
</label>
|
||
|
|
<Field
|
||
|
|
id="encryption"
|
||
|
|
name="encryption"
|
||
|
|
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
|
||
|
|
as="select"
|
||
|
|
>
|
||
|
|
<option value="WPA2">WPA2</option>
|
||
|
|
<option value="WPA3">WPA3</option>
|
||
|
|
<option value="WEP">WEP</option>
|
||
|
|
<option value="None">None</option>
|
||
|
|
</Field>
|
||
|
|
</FormGroup>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
|
||
|
|
>
|
||
|
|
Save WiFi settings
|
||
|
|
</button>
|
||
|
|
</Form>
|
||
|
|
)}
|
||
|
|
</Formik>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default WiFiSettingsForm;
|