GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-06-16 13:46:16 +02:00
Code Issues Releases Activity

Wi-Fi settings form

Browse Source
This commit is contained in:
Maciej Lenartowicz
2020-01-09 11:25:29 +01:00
parent 9dcc689491
commit 5fd0d3626a
33 changed files with 2913 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
src/common/WiFiSettings/WiFiForm.js Normal file
View File

@ -0,0 +1,250 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
import { CheckBox } from "../../bootstrap/CheckBox";
import { PasswordInput } from "../../bootstrap/PasswordInput";
import { RadioSet } from "../../bootstrap/RadioSet";
import { Select } from "../../bootstrap/Select";
import { TextInput } from "../../bootstrap/TextInput";
import WiFiQRCode from "./WiFiQRCode";
import WifiGuestForm from "./WiFiGuestForm";
import { HELP_TEXTS, HTMODES, HWMODES } from "./constants";
WiFiForm.propTypes = {
formData: PropTypes.shape(
{ devices: PropTypes.arrayOf(PropTypes.object) },
).isRequired,
formErrors: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
]),
setFormValue: PropTypes.func.isRequired,
hasGuestNetwork: PropTypes.bool,
};
WiFiForm.defaultProps = {
formData: { devices: [] },
setFormValue: () => {},
hasGuestNetwork: true,
};
export default function WiFiForm({
formData, formErrors, setFormValue, hasGuestNetwork, ...props
}) {
return formData.devices.map((device) => (
<DeviceForm
key={device.id}
formData={device}
formErrors={(formErrors || [])[device.id]}
setFormValue={setFormValue}
hasGuestNetwork={hasGuestNetwork}
{...props}
/>
));
}
DeviceForm.propTypes = {
formData: PropTypes.shape({
id: PropTypes.number.isRequired,
enabled: PropTypes.bool.isRequired,
SSID: PropTypes.string.isRequired,
password: PropTypes.string.isRequired,
hidden: PropTypes.bool.isRequired,
hwmode: PropTypes.string.isRequired,
htmode: PropTypes.string.isRequired,
channel: PropTypes.string.isRequired,
guest_wifi: PropTypes.object.isRequired,
}),
formErrors: PropTypes.object.isRequired,
setFormValue: PropTypes.func.isRequired,
hasGuestNetwork: PropTypes.bool,
};
DeviceForm.defaultProps = {
formErrors: {},
hasGuestNetwork: true,
};
function DeviceForm({
formData, formErrors, setFormValue, hasGuestNetwork, ...props
}) {
const deviceID = formData.id;
return (
<>
<h3>{_(`Wi-Fi ${deviceID + 1}`)}</h3>
<CheckBox
label={_("Enable")}
checked={formData.enabled}
onChange={setFormValue(
(value) => ({ devices: { [deviceID]: { enabled: { $set: value } } } }),
)}
{...props}
/>
{formData.enabled
? (
<>
<TextInput
label="SSID"
value={formData.SSID}
error={formErrors.SSID || null}
required
onChange={setFormValue(
(value) => ({ devices: { [deviceID]: { SSID: { $set: value } } } }),
)}
{...props}
>
<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: { [deviceID]: { password: { $set: value } } } }
),
)}
{...props}
/>
<CheckBox
label="Hide SSID"
helpText={HELP_TEXTS.hidden}
checked={formData.hidden}
onChange={setFormValue(
(value) => (
{ devices: { [deviceID]: { hidden: { $set: value } } } }
),
)}
{...props}
/>
<RadioSet
name={`hwmode-${deviceID}`}
label="GHz"
choices={getHwmodeChoices(formData)}
value={formData.hwmode}
helpText={HELP_TEXTS.hwmode}
onChange={setFormValue(
(value) => ({
devices: {
[deviceID]: {
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: { [deviceID]: { htmode: { $set: value } } } }
),
)}
{...props}
/>
<Select
label="Channel"
choices={getChannelChoices(formData)}
value={formData.channel}
onChange={setFormValue(
(value) => (
{ devices: { [deviceID]: { channel: { $set: value } } } }
),
)}
{...props}
/>
{hasGuestNetwork && (
<WifiGuestForm
formData={{ id: deviceID, ...formData.guest_wifi }}
formErrors={formErrors.guest_wifi || {}}
setFormValue={setFormValue}
{...props}
/>
)}
</>
)
: null}
</>
);
}
function getChannelChoices(device) {
const channelChoices = {
0: _("auto"),
};
device.available_bands.forEach((availableBand) => {
if (availableBand.hwmode !== device.hwmode) return;
availableBand.available_channels.forEach((availableChannel) => {
channelChoices[availableChannel.number.toString()] = `
${availableChannel.number}
(${availableChannel.frequency} MHz ${availableChannel.radar ? " ,DFS" : ""})
`;
});
});
return channelChoices;
}
function getHtmodeChoices(device) {
const htmodeChoices = {};
device.available_bands.forEach((availableBand) => {
if (availableBand.hwmode !== device.hwmode) return;
availableBand.available_htmodes.forEach((availableHtmod) => {
htmodeChoices[availableHtmod] = HTMODES[availableHtmod];
});
});
return htmodeChoices;
}
function getHwmodeChoices(device) {
return device.available_bands.map((availableBand) => ({
label: HWMODES[availableBand.hwmode],
value: availableBand.hwmode,
}));
}