GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-09-20 09:54:19 +02:00
Code Issues Releases Activity

Swap checkboxes for switches on Wi-Fi page

Browse Source
This commit is contained in:
Aleksandr Gumroian 2020-08-18 10:30:37 +02:00
parent c1b1d8c079
commit a2acac255d
No known key found for this signature in database
GPG Key ID: 9E77849C64F0A733
2 changed files with 192 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

277
src/common/WiFiSettings/WiFiForm.js
View File

@ -7,7 +7,7 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Switch } from "../../bootstrap/Switch";
import { CheckBox } from "../../bootstrap/CheckBox"; import { CheckBox } from "../../bootstrap/CheckBox";
import { PasswordInput } from "../../bootstrap/PasswordInput"; import { PasswordInput } from "../../bootstrap/PasswordInput";
import { RadioSet } from "../../bootstrap/RadioSet"; import { RadioSet } from "../../bootstrap/RadioSet";
@ -18,25 +18,25 @@ import WifiGuestForm from "./WiFiGuestForm";
import { HELP_TEXTS, HTMODES, HWMODES } from "./constants"; import { HELP_TEXTS, HTMODES, HWMODES } from "./constants";
WiFiForm.propTypes = { WiFiForm.propTypes = {
formData: PropTypes.shape( formData: PropTypes.shape({ devices: PropTypes.arrayOf(PropTypes.object) })
{ devices: PropTypes.arrayOf(PropTypes.object) }, .isRequired,
).isRequired, formErrors: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
formErrors: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
]),
setFormValue: PropTypes.func.isRequired, setFormValue: PropTypes.func.isRequired,
hasGuestNetwork: PropTypes.bool, hasGuestNetwork: PropTypes.bool,
}; };
WiFiForm.defaultProps = { WiFiForm.defaultProps = {
formData: { devices: [] }, formData: { devices: [] },
setFormValue: () => { }, setFormValue: () => {},
hasGuestNetwork: true, hasGuestNetwork: true,
}; };
export default function WiFiForm({ export default function WiFiForm({
formData, formErrors, setFormValue, hasGuestNetwork, disabled, formData,
formErrors,
setFormValue,
hasGuestNetwork,
disabled,
}) { }) {
return formData.devices.map((device, index) => ( return formData.devices.map((device, index) => (
<DeviceForm <DeviceForm
@ -47,6 +47,7 @@ export default function WiFiForm({
setFormValue={setFormValue} setFormValue={setFormValue}
hasGuestNetwork={hasGuestNetwork} hasGuestNetwork={hasGuestNetwork}
disabled={disabled} disabled={disabled}
divider={index + 1 !== formData.devices.length}
/> />
)); ));
} }
@ -67,6 +68,7 @@ DeviceForm.propTypes = {
setFormValue: PropTypes.func.isRequired, setFormValue: PropTypes.func.isRequired,
hasGuestNetwork: PropTypes.bool, hasGuestNetwork: PropTypes.bool,
deviceIndex: PropTypes.number, deviceIndex: PropTypes.number,
divider: PropTypes.bool,
}; };
DeviceForm.defaultProps = { DeviceForm.defaultProps = {
@ -75,144 +77,135 @@ DeviceForm.defaultProps = {
}; };
function DeviceForm({ function DeviceForm({
formData, formErrors, setFormValue, hasGuestNetwork, deviceIndex, ...props formData,
formErrors,
setFormValue,
hasGuestNetwork,
deviceIndex,
divider,
...props
}) { }) {
const deviceID = formData.id; const deviceID = formData.id;
return ( return (
<> <>
<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2> <Switch
<CheckBox label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
label={_("Enable")}
checked={formData.enabled} checked={formData.enabled}
onChange={setFormValue((value) => ({
onChange={setFormValue( devices: {
(value) => ({ devices: { [deviceIndex]: { enabled: { $set: value } } } }), [deviceIndex]: { enabled: { $set: value } },
)} },
}))}
switchHeading
{...props} {...props}
/> />
{formData.enabled {formData.enabled ? (
? ( <>
<> <TextInput
<TextInput label="SSID"
label="SSID" value={formData.SSID}
value={formData.SSID} error={formErrors.SSID || null}
error={formErrors.SSID || null} required
required onChange={setFormValue((value) => ({
onChange={setFormValue( devices: {
(value) => ({ [deviceIndex]: {
devices: { SSID: { $set: value },
[deviceIndex]: { },
SSID: { $set: value }, },
}, }))}
}, {...props}
}), >
)} <div className="input-group-append">
<WiFiQRCode
{...props} SSID={formData.SSID}
> password={formData.password}
<div className="input-group-append">
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
</div>
</TextInput>
<PasswordInput
withEye
label="Password"
value={formData.password}
error={formErrors.password}
helpText={HELP_TEXTS.password}
required
onChange={setFormValue(
(value) => (
{ devices: { [deviceIndex]: { password: { $set: value } } } }
),
)}
{...props}
/>
<CheckBox
label="Hide SSID"
helpText={HELP_TEXTS.hidden}
checked={formData.hidden}
onChange={setFormValue(
(value) => (
{ devices: { [deviceIndex]: { hidden: { $set: value } } } }
),
)}
{...props}
/>
<RadioSet
name={`hwmode-${deviceID}`}
label="GHz"
choices={getHwmodeChoices(formData)}
value={formData.hwmode}
helpText={HELP_TEXTS.hwmode}
onChange={setFormValue(
(value) => ({
devices: {
[deviceIndex]: {
hwmode: { $set: value },
channel: { $set: "0" },
},
},
}),
)}
{...props}
/>
<Select
label="802.11n/ac mode"
choices={getHtmodeChoices(formData)}
value={formData.htmode}
helpText={HELP_TEXTS.htmode}
onChange={setFormValue(
(value) => (
{ devices: { [deviceIndex]: { htmode: { $set: value } } } }
),
)}
{...props}
/>
<Select
label="Channel"
choices={getChannelChoices(formData)}
value={formData.channel}
onChange={setFormValue(
(value) => (
{ devices: { [deviceIndex]: { channel: { $set: value } } } }
),
)}
{...props}
/>
{hasGuestNetwork && (
<WifiGuestForm
formData={{ id: deviceIndex, ...formData.guest_wifi }}
formErrors={formErrors.guest_wifi || {}}
setFormValue={setFormValue}
{...props}
/> />
)} </div>
</> </TextInput>
)
: null} <PasswordInput
withEye
label="Password"
value={formData.password}
error={formErrors.password}
helpText={HELP_TEXTS.password}
required
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: { password: { $set: value } },
},
}))}
{...props}
/>
<CheckBox
label="Hide SSID"
helpText={HELP_TEXTS.hidden}
checked={formData.hidden}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: { hidden: { $set: value } },
},
}))}
{...props}
/>
<RadioSet
name={`hwmode-${deviceID}`}
label="GHz"
choices={getHwmodeChoices(formData)}
value={formData.hwmode}
helpText={HELP_TEXTS.hwmode}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: {
hwmode: { $set: value },
channel: { $set: "0" },
},
},
}))}
{...props}
/>
<Select
label="802.11n/ac mode"
choices={getHtmodeChoices(formData)}
value={formData.htmode}
helpText={HELP_TEXTS.htmode}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: { htmode: { $set: value } },
},
}))}
{...props}
/>
<Select
label="Channel"
choices={getChannelChoices(formData)}
value={formData.channel}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: { channel: { $set: value } },
},
}))}
{...props}
/>
{hasGuestNetwork && (
<WifiGuestForm
formData={{
id: deviceIndex,
...formData.guest_wifi,
}}
formErrors={formErrors.guest_wifi || {}}
setFormValue={setFormValue}
{...props}
/>
)}
</>
) : null}
{divider ? <hr /> : null}
</> </>
); );
} }
@ -228,7 +221,9 @@ function getChannelChoices(device) {
availableBand.available_channels.forEach((availableChannel) => { availableBand.available_channels.forEach((availableChannel) => {
channelChoices[availableChannel.number.toString()] = ` channelChoices[availableChannel.number.toString()] = `
${availableChannel.number} ${availableChannel.number}
(${availableChannel.frequency} MHz ${availableChannel.radar ? " ,DFS" : ""}) (${availableChannel.frequency} MHz ${
availableChannel.radar ? " ,DFS" : ""
})
`; `;
}); });
}); });

115
src/common/WiFiSettings/WiFiGuestForm.js
View File

@ -8,8 +8,8 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { CheckBox } from "../../bootstrap/CheckBox";
import { TextInput } from "../../bootstrap/TextInput"; import { TextInput } from "../../bootstrap/TextInput";
import { Switch } from "../../bootstrap/Switch";
import { PasswordInput } from "../../bootstrap/PasswordInput"; import { PasswordInput } from "../../bootstrap/PasswordInput";
import WiFiQRCode from "./WiFiQRCode"; import WiFiQRCode from "./WiFiQRCode";
import { HELP_TEXTS } from "./constants"; import { HELP_TEXTS } from "./constants";
@ -26,75 +26,72 @@ WifiGuestForm.propTypes = {
password: PropTypes.string, password: PropTypes.string,
}), }),
setFormValue: PropTypes.func.isRequired, setFormValue: PropTypes.func.isRequired,
deviceIndex: PropTypes.string,
}; };
export default function WifiGuestForm({ export default function WifiGuestForm({
formData, formErrors, setFormValue, ...props formData,
formErrors,
setFormValue,
deviceIndex,
...props
}) { }) {
return ( return (
<> <>
<CheckBox <Switch
label={_("Enable Guest Wifi")} label={_("Enable Guest Wi-Fi")}
checked={formData.enabled} checked={formData.enabled}
helpText={HELP_TEXTS.guest_wifi_enabled} helpText={HELP_TEXTS.guest_wifi_enabled}
onChange={setFormValue((value) => ({
onChange={setFormValue( devices: {
(value) => ( [formData.id]: {
{ devices: { [formData.id]: { guest_wifi: { enabled: { $set: value } } } } } guest_wifi: { enabled: { $set: value } },
), },
)} },
}))}
{...props} {...props}
/> />
{formData.enabled {formData.enabled ? (
? ( <>
<> <TextInput
<TextInput label="SSID"
label="SSID" value={formData.SSID}
value={formData.SSID} error={formErrors.SSID}
error={formErrors.SSID} onChange={setFormValue((value) => ({
devices: {
[formData.id]: {
guest_wifi: { SSID: { $set: value } },
},
},
}))}
{...props}
>
<div className="input-group-append">
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
</div>
</TextInput>
onChange={setFormValue( <PasswordInput
(value) => ({ withEye
devices: { label={_("Password")}
[formData.id]: { guest_wifi: { SSID: { $set: value } } }, value={formData.password}
}, helpText={HELP_TEXTS.password}
}), error={formErrors.password}
)} required
onChange={setFormValue((value) => ({
{...props} devices: {
> [formData.id]: {
<div className="input-group-append"> guest_wifi: { password: { $set: value } },
<WiFiQRCode },
SSID={formData.SSID} },
password={formData.password} }))}
/> {...props}
</div> />
</TextInput> </>
) : null}
<PasswordInput
withEye
label={_("Password")}
value={formData.password}
helpText={HELP_TEXTS.password}
error={formErrors.password}
required
onChange={setFormValue(
(value) => ({
devices: {
[formData.id]: {
guest_wifi: { password: { $set: value } },
},
},
}),
)}
{...props}
/>
</>
)
: null}
</> </>
); );
} }