78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
|
import Card from "../../UI/Card";
|
||
|
|
import CardHeader from "../../UI/CardHeader";
|
||
|
|
import { useState } from "react";
|
||
|
|
import FormGroup from "../components/FormGroup";
|
||
|
|
|
||
|
|
const ModemCard = () => {
|
||
|
|
const [apn, setApn] = useState("");
|
||
|
|
const [username, setUsername] = useState("");
|
||
|
|
const [password, setPassword] = useState("");
|
||
|
|
const [authType, setAuthType] = useState("PAP");
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader title={"Modem"} />
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
<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 max-w-md"
|
||
|
|
//onClick={() => handleModemSave(apn, username, password, authType)}
|
||
|
|
>
|
||
|
|
Save Modem Settings
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ModemCard;
|