diff --git a/src/common/WiFiSettings/WiFiForm.js b/src/common/WiFiSettings/WiFiForm.js index 7950ba6..6005d6b 100644 --- a/src/common/WiFiSettings/WiFiForm.js +++ b/src/common/WiFiSettings/WiFiForm.js @@ -7,7 +7,7 @@ import React from "react"; import PropTypes from "prop-types"; - +import { Switch } from "../../bootstrap/Switch"; import { CheckBox } from "../../bootstrap/CheckBox"; import { PasswordInput } from "../../bootstrap/PasswordInput"; import { RadioSet } from "../../bootstrap/RadioSet"; @@ -18,25 +18,25 @@ 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, - ]), + 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: () => { }, + setFormValue: () => {}, hasGuestNetwork: true, }; export default function WiFiForm({ - formData, formErrors, setFormValue, hasGuestNetwork, disabled, + formData, + formErrors, + setFormValue, + hasGuestNetwork, + disabled, }) { return formData.devices.map((device, index) => ( )); } @@ -67,6 +68,7 @@ DeviceForm.propTypes = { setFormValue: PropTypes.func.isRequired, hasGuestNetwork: PropTypes.bool, deviceIndex: PropTypes.number, + divider: PropTypes.bool, }; DeviceForm.defaultProps = { @@ -75,144 +77,135 @@ DeviceForm.defaultProps = { }; function DeviceForm({ - formData, formErrors, setFormValue, hasGuestNetwork, deviceIndex, ...props + formData, + formErrors, + setFormValue, + hasGuestNetwork, + deviceIndex, + divider, + ...props }) { const deviceID = formData.id; return ( <> -

{_(`Wi-Fi ${deviceID + 1}`)}

- {_(`Wi-Fi ${deviceID + 1}`)}} checked={formData.enabled} - - onChange={setFormValue( - (value) => ({ devices: { [deviceIndex]: { enabled: { $set: value } } } }), - )} - + onChange={setFormValue((value) => ({ + devices: { + [deviceIndex]: { enabled: { $set: value } }, + }, + }))} + switchHeading {...props} /> - {formData.enabled - ? ( - <> - ({ - devices: { - [deviceIndex]: { - SSID: { $set: value }, - }, - }, - }), - )} - - {...props} - > -
- -
-
- - ( - { devices: { [deviceIndex]: { password: { $set: value } } } } - ), - )} - - {...props} - /> - - ( - { devices: { [deviceIndex]: { hidden: { $set: value } } } } - ), - )} - - {...props} - /> - - ({ - devices: { - [deviceIndex]: { - hwmode: { $set: value }, - channel: { $set: "0" }, - }, - }, - }), - )} - - {...props} - /> - - ( - { devices: { [deviceIndex]: { channel: { $set: value } } } } - ), - )} - - {...props} - /> - - {hasGuestNetwork && ( - + ({ + devices: { + [deviceIndex]: { + SSID: { $set: value }, + }, + }, + }))} + {...props} + > +
+ - )} - - ) - : null} +
+
+ + ({ + devices: { + [deviceIndex]: { password: { $set: value } }, + }, + }))} + {...props} + /> + + ({ + devices: { + [deviceIndex]: { hidden: { $set: value } }, + }, + }))} + {...props} + /> + + ({ + devices: { + [deviceIndex]: { + hwmode: { $set: value }, + channel: { $set: "0" }, + }, + }, + }))} + {...props} + /> + + ({ + devices: { + [deviceIndex]: { channel: { $set: value } }, + }, + }))} + {...props} + /> + + {hasGuestNetwork && ( + + )} + + ) : null} + {divider ?
: null} ); } @@ -228,7 +221,9 @@ function getChannelChoices(device) { availableBand.available_channels.forEach((availableChannel) => { channelChoices[availableChannel.number.toString()] = ` ${availableChannel.number} - (${availableChannel.frequency} MHz ${availableChannel.radar ? " ,DFS" : ""}) + (${availableChannel.frequency} MHz ${ + availableChannel.radar ? " ,DFS" : "" + }) `; }); }); diff --git a/src/common/WiFiSettings/WiFiGuestForm.js b/src/common/WiFiSettings/WiFiGuestForm.js index 2fdabf6..93380cd 100644 --- a/src/common/WiFiSettings/WiFiGuestForm.js +++ b/src/common/WiFiSettings/WiFiGuestForm.js @@ -8,8 +8,8 @@ import React from "react"; import PropTypes from "prop-types"; -import { CheckBox } from "../../bootstrap/CheckBox"; import { TextInput } from "../../bootstrap/TextInput"; +import { Switch } from "../../bootstrap/Switch"; import { PasswordInput } from "../../bootstrap/PasswordInput"; import WiFiQRCode from "./WiFiQRCode"; import { HELP_TEXTS } from "./constants"; @@ -26,75 +26,72 @@ WifiGuestForm.propTypes = { password: PropTypes.string, }), setFormValue: PropTypes.func.isRequired, + deviceIndex: PropTypes.string, }; export default function WifiGuestForm({ - formData, formErrors, setFormValue, ...props + formData, + formErrors, + setFormValue, + deviceIndex, + ...props }) { return ( <> - ( - { devices: { [formData.id]: { guest_wifi: { enabled: { $set: value } } } } } - ), - )} - + onChange={setFormValue((value) => ({ + devices: { + [formData.id]: { + guest_wifi: { enabled: { $set: value } }, + }, + }, + }))} {...props} /> - {formData.enabled - ? ( - <> - + ({ + devices: { + [formData.id]: { + guest_wifi: { SSID: { $set: value } }, + }, + }, + }))} + {...props} + > +
+ +
+
- onChange={setFormValue( - (value) => ({ - devices: { - [formData.id]: { guest_wifi: { SSID: { $set: value } } }, - }, - }), - )} - - {...props} - > -
- -
-
- - ({ - devices: { - [formData.id]: { - guest_wifi: { password: { $set: value } }, - }, - }, - }), - )} - - {...props} - /> - - ) - : null} + ({ + devices: { + [formData.id]: { + guest_wifi: { password: { $set: value } }, + }, + }, + }))} + {...props} + /> + + ) : null} ); }