From a2acac255d14f9d9fd73c2e2a7a23319264c53f6 Mon Sep 17 00:00:00 2001
From: Aleksandr Gumroian <aleksandr.gumroian@nic.cz>
Date: Tue, 18 Aug 2020 10:30:37 +0200
Subject: [PATCH] Swap checkboxes for switches on Wi-Fi page

---
 src/common/WiFiSettings/WiFiForm.js      | 277 +++++++++++------------
 src/common/WiFiSettings/WiFiGuestForm.js | 115 +++++-----
 2 files changed, 192 insertions(+), 200 deletions(-)

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) => (
         <DeviceForm
@@ -47,6 +47,7 @@ export default function WiFiForm({
             setFormValue={setFormValue}
             hasGuestNetwork={hasGuestNetwork}
             disabled={disabled}
+            divider={index + 1 !== formData.devices.length}
         />
     ));
 }
@@ -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 (
         <>
-            <h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>
-            <CheckBox
-                label={_("Enable")}
+            <Switch
+                label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
                 checked={formData.enabled}
-
-                onChange={setFormValue(
-                    (value) => ({ devices: { [deviceIndex]: { enabled: { $set: value } } } }),
-                )}
-
+                onChange={setFormValue((value) => ({
+                    devices: {
+                        [deviceIndex]: { enabled: { $set: value } },
+                    },
+                }))}
+                switchHeading
                 {...props}
             />
-            {formData.enabled
-                ? (
-                    <>
-                        <TextInput
-                            label="SSID"
-                            value={formData.SSID}
-                            error={formErrors.SSID || null}
-                            required
-                            onChange={setFormValue(
-                                (value) => ({
-                                    devices: {
-                                        [deviceIndex]: {
-                                            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: { [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}
+            {formData.enabled ? (
+                <>
+                    <TextInput
+                        label="SSID"
+                        value={formData.SSID}
+                        error={formErrors.SSID || null}
+                        required
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: {
+                                    SSID: { $set: value },
+                                },
+                            },
+                        }))}
+                        {...props}
+                    >
+                        <div className="input-group-append">
+                            <WiFiQRCode
+                                SSID={formData.SSID}
+                                password={formData.password}
                             />
-                        )}
-                    </>
-                )
-                : null}
+                        </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}
+                        />
+                    )}
+                </>
+            ) : null}
+            {divider ? <hr /> : 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 (
         <>
-            <CheckBox
-                label={_("Enable Guest Wifi")}
+            <Switch
+                label={_("Enable Guest Wi-Fi")}
                 checked={formData.enabled}
                 helpText={HELP_TEXTS.guest_wifi_enabled}
-
-                onChange={setFormValue(
-                    (value) => (
-                        { devices: { [formData.id]: { guest_wifi: { enabled: { $set: value } } } } }
-                    ),
-                )}
-
+                onChange={setFormValue((value) => ({
+                    devices: {
+                        [formData.id]: {
+                            guest_wifi: { enabled: { $set: value } },
+                        },
+                    },
+                }))}
                 {...props}
             />
-            {formData.enabled
-                ? (
-                    <>
-                        <TextInput
-                            label="SSID"
-                            value={formData.SSID}
-                            error={formErrors.SSID}
+            {formData.enabled ? (
+                <>
+                    <TextInput
+                        label="SSID"
+                        value={formData.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(
-                                (value) => ({
-                                    devices: {
-                                        [formData.id]: { guest_wifi: { 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}
-                            helpText={HELP_TEXTS.password}
-                            error={formErrors.password}
-                            required
-
-                            onChange={setFormValue(
-                                (value) => ({
-                                    devices: {
-                                        [formData.id]: {
-                                            guest_wifi: { password: { $set: value } },
-                                        },
-                                    },
-                                }),
-                            )}
-
-                            {...props}
-                        />
-                    </>
-                )
-                : 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}
         </>
     );
 }