TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modem settings management: integrate ModemSettings and ModemToggle components, update hooks for modem configuration, and enhance WiFiSettingsForm submission handling.

Browse Source
This commit is contained in:
Toba Ojo
2025-10-03 10:19:49 +01:00
parent 576afbb282
commit a972234e22
7 changed files with 257 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/SettingForms/WiFi&Modem/ModemCard.tsx
View File

@@ -1,96 +1,13 @@
import Card from "../../UI/Card";
import CardHeader from "../../UI/CardHeader";
import { useState } from "react";
import FormGroup from "../components/FormGroup";
import ModemSettings from "./ModemSettings";
const ModemCard = () => {
const [apn, setApn] = useState("");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [authType, setAuthType] = useState("PAP");
return (
// TODO: Add switch for Auto vs Manual settings
<Card className="p-4">
<CardHeader title={"Modem"} />
<div className="flex flex-col gap-4 px-2">
<FormGroup>
<label
htmlFor="apn"
className="font-medium whitespace-nowrap md:w-2/3"
>
APN
</label>
<input
id="apn"
name="apn"
type="text"
className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
placeholder="Enter APN"
value={apn}
onChange={(e) => setApn(e.target.value)}
/>
</FormGroup>
<FormGroup>
<label
htmlFor="modemUsername"
className="font-medium whitespace-nowrap md:w-2/3"
>
Username
</label>
<input
id="modemUsername"
name="modemUsername"
type="text"
className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
placeholder="Enter Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</FormGroup>
<FormGroup>
<label
htmlFor="modemPassword"
className="font-medium whitespace-nowrap md:w-2/3"
>
Password
</label>
<input
id="modemPassword"
name="modemPassword"
type="password"
className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
placeholder="Enter Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</FormGroup>
<FormGroup>
<label
htmlFor="authType"
className="font-medium whitespace-nowrap md:w-2/3"
>
Authentication Type
</label>
<select
id="authType"
name="authType"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 md:w-2/3"
value={authType}
onChange={(e) => setAuthType(e.target.value)}
>
<option value="PAP">PAP</option>
<option value="CHAP">CHAP</option>
<option value="None">None</option>
</select>
</FormGroup>
<button
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
//onClick={() => handleModemSave(apn, username, password, authType)}
>
Save Modem Settings
</button>
</div>
<ModemSettings />
</Card>
);
};