more enhancements to loading and error feedback

This commit is contained in:
2025-10-06 15:18:58 +01:00
parent f275f50383
commit a95c9077c4
10 changed files with 127 additions and 167 deletions

View File

@@ -25,7 +25,7 @@ const ModemSettings = () => {
authenticationType: "PAP",
};
const handleSubmit = (values: ModemSettingsType) => {
const handleSubmit = async (values: ModemSettingsType) => {
const modemConfig = {
id: "ModemAndWifiManager-modem",
fields: [
@@ -48,7 +48,7 @@ const ModemSettings = () => {
},
],
};
modemMutation.mutate(modemConfig);
await modemMutation.mutateAsync(modemConfig);
};
return (
@@ -63,76 +63,80 @@ const ModemSettings = () => {
onSubmit={handleSubmit}
enableReinitialize
>
<Form className="flex flex-col space-y-5 px-2">
<FormGroup>
<label
htmlFor="apn"
className="font-medium whitespace-nowrap md:w-2/3"
{({ isSubmitting }) => (
<Form className="flex flex-col space-y-5 px-2">
<FormGroup>
<label
htmlFor="apn"
className="font-medium whitespace-nowrap md:w-2/3"
>
APN
</label>
<Field
placeholder="Enter APN"
name="apn"
id="apn"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="username"
className="font-medium whitespace-nowrap md:w-2/3"
>
Username
</label>
<Field
placeholder="Enter Username"
name="username"
id="username"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="password"
className="font-medium whitespace-nowrap md:w-2/3"
>
Password
</label>
<Field
placeholder="Enter Password"
name="password"
id="password"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="password"
className="font-medium whitespace-nowrap md:w-2/3"
>
Password
</label>
<Field
name="authenticationType"
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
>
<option value="PAP">PAP</option>
<option value="CHAP">CHAP</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%]"
>
APN
</label>
<Field
placeholder="Enter APN"
name="apn"
id="apn"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="username"
className="font-medium whitespace-nowrap md:w-2/3"
>
Username
</label>
<Field
placeholder="Enter Username"
name="username"
id="username"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="password"
className="font-medium whitespace-nowrap md:w-2/3"
>
Password
</label>
<Field
placeholder="Enter Password"
name="password"
id="password"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label
htmlFor="password"
className="font-medium whitespace-nowrap md:w-2/3"
>
Password
</label>
<Field
name="authenticationType"
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
>
<option value="PAP">PAP</option>
<option value="CHAP">CHAP</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 Modem settings
</button>
</Form>
{isSubmitting || modemMutation.isPending
? "Saving..."
: "Save Modem settings"}
</button>
</Form>
)}
</Formik>
)}
</>