Merge branch 'dev' into 'master'

Dev

See merge request turris/reforis/foris-js!174

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "5.1.14",
+    "version": "5.1.16",
     "description": "Set of components and utils for Foris and its plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -53,7 +53,7 @@
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2",
-        "react-styleguidist": "^11.1.7",
+        "react-styleguidist": "^7.3.11",
         "snapshot-diff": "^0.7.0",
         "style-loader": "^1.2.1",
         "webpack": "^5.15.0"

src/bootstrap/Select.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 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.
@@ -18,18 +18,23 @@ Select.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     /** Help text message. */
     helpText: PropTypes.string,
+    /** Turns on/off alphabetical ordering of the Select options. */
+    customOrder: PropTypes.bool,
 };
 
-export function Select({ label, choices, helpText, ...props }) {
+export function Select({ label, choices, helpText, customOrder, ...props }) {
     const uid = useUID();
 
-    const options = Object.keys(choices)
-        .sort((a, b) => a - b || a.toString().localeCompare(b.toString()))
-        .map((key) => (
-            <option key={key} value={key}>
-                {choices[key]}
-            </option>
-        ));
+    const keys = Object.keys(choices);
+    if (!customOrder) {
+        keys.sort((a, b) => a - b || a.toString().localeCompare(b.toString()));
+    }
+    const options = keys.map((key) => (
+        <option key={key} value={key}>
+            {choices[key]}
+        </option>
+    ));
+
     return (
         <div className="form-group">
             <label htmlFor={uid}>{label}</label>

src/common/WiFiSettings/WiFiForm.js

@@ -15,7 +15,7 @@ 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";
+import { HELP_TEXTS, HTMODES, HWMODES, ENCRYPTIONMODES } from "./constants";
 
 WiFiForm.propTypes = {
     formData: PropTypes.shape({ devices: PropTypes.arrayOf(PropTypes.object) })
@@ -63,6 +63,7 @@ DeviceForm.propTypes = {
         htmode: PropTypes.string.isRequired,
         channel: PropTypes.string.isRequired,
         guest_wifi: PropTypes.object.isRequired,
+        encryption: PropTypes.string.isRequired,
     }),
     formErrors: PropTypes.object.isRequired,
     setFormValue: PropTypes.func.isRequired,
@@ -198,6 +199,20 @@ function DeviceForm({
                         {...props}
                     />
 
+                    <Select
+                        label={_("Encryption")}
+                        choices={getEncryptionChoices(formData)}
+                        helpText={HELP_TEXTS.wpa3}
+                        value={formData.encryption}
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { encryption: { $set: value } },
+                            },
+                        }))}
+                        customOrder
+                        {...props}
+                    />
+
                     {hasGuestNetwork && (
                         <WifiGuestForm
                             formData={{
@@ -256,3 +271,10 @@ function getHwmodeChoices(device) {
         value: availableBand.hwmode,
     }));
 }
+
+function getEncryptionChoices(device) {
+    if (device.encryption === "custom") {
+        ENCRYPTIONMODES.custom = _("Custom");
+    }
+    return ENCRYPTIONMODES;
+}

src/common/WiFiSettings/__tests__/WiFiSettings.test.js

@@ -120,6 +120,7 @@ describe("<WiFiSettings/>", () => {
                     hwmode: "11a",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],
@@ -149,6 +150,7 @@ describe("<WiFiSettings/>", () => {
                     hwmode: "11g",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],
@@ -185,6 +187,7 @@ describe("<WiFiSettings/>", () => {
                     hwmode: "11a",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],

src/common/WiFiSettings/__tests__/__fixtures__/wifiSettings.js

@@ -230,6 +230,7 @@ export function wifiSettingsFixture() {
                 hwmode: "11a",
                 id: 0,
                 password: "TestPass",
+                encryption: "WPA3",
             },
             {
                 SSID: "Turris",
@@ -308,6 +309,7 @@ export function wifiSettingsFixture() {
                 hwmode: "11g",
                 id: 1,
                 password: "TestPass",
+                encryption: "WPA3",
             },
         ],
     };
@@ -324,6 +326,7 @@ const oneDevice = {
             hwmode: "11a",
             id: 0,
             password: "TestPass",
+            encryption: "WPA3",
         },
     ],
 };
@@ -340,6 +343,7 @@ const twoDevices = {
             hwmode: "11a",
             id: 0,
             password: "TestPass",
+            encryption: "WPA3",
         },
         {
             SSID: "Turris2",
@@ -351,6 +355,7 @@ const twoDevices = {
             hwmode: "11a",
             id: 1,
             password: "TestPass",
+            encryption: "WPA3",
         },
     ],
 };
@@ -367,6 +372,7 @@ const threeDevices = {
             hwmode: "11a",
             id: 0,
             password: "TestPass",
+            encryption: "WPA3",
         },
         {
             SSID: "Turris2",
@@ -378,6 +384,7 @@ const threeDevices = {
             hwmode: "11a",
             id: 1,
             password: "TestPass",
+            encryption: "WPA3",
         },
         {
             SSID: "Turris3",
@@ -389,6 +396,7 @@ const threeDevices = {
             hwmode: "11a",
             id: 2,
             password: "",
+            encryption: "WPA3",
         },
     ],
 };

src/common/WiFiSettings/__tests__/__snapshots__/WiFiSettings.test.js.snap

@@ -337,7 +337,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 - First value
 + Second value
 
-@@ -479,10 +479,94 @@
+@@ -513,10 +513,94 @@
           Parameters of the guest network can be set in the Guest network tab.
           
             </small>
@@ -347,7 +347,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +         class=\\"form-group\\"
 +       >
 +         <label
-+           for=\\"20\\"
++           for=\\"22\\"
 +         >
 +           SSID
 +         </label>
@@ -356,7 +356,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +         >
 +           <input
 +             class=\\"form-control\\"
-+             id=\\"20\\"
++             id=\\"22\\"
 +             type=\\"text\\"
 +             value=\\"TestGuestSSID\\"
 +           />
@@ -386,7 +386,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +         class=\\"form-group\\"
 +       >
 +         <label
-+           for=\\"21\\"
++           for=\\"23\\"
 +         >
 +           Password
 +         </label>
@@ -396,7 +396,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +           <input
 +             autocomplete=\\"new-password\\"
 +             class=\\"form-control  is-invalid\\"
-+             id=\\"21\\"
++             id=\\"23\\"
 +             required=\\"\\"
 +             type=\\"password\\"
 +             value=\\"\\"
@@ -432,7 +432,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
           class=\\"form-group switch\\"
         >
           <div
-@@ -506,10 +590,11 @@
+@@ -540,10 +624,11 @@
         <div
           class=\\"text-right\\"
         >
@@ -451,7 +451,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 - First value
 + Second value
 
-@@ -22,10 +22,467 @@
+@@ -22,10 +22,501 @@
                 Wi-Fi 1
               </h2>
             </label>
@@ -889,17 +889,51 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +       <div
 +         class=\\"form-group\\"
 +       >
++         <label
++           for=\\"10\\"
++         >
++           Encryption
++         </label>
++         <select
++           class=\\"custom-select\\"
++           id=\\"10\\"
++         >
++           <option
++             value=\\"WPA3\\"
++           >
++             WPA3 only
++           </option>
++           <option
++             value=\\"WPA2/3\\"
++           >
++             WPA3 with WPA2 as fallback (default)
++           </option>
++           <option
++             value=\\"WPA2\\"
++           >
++             WPA2 only
++           </option>
++         </select>
++         <small
++           class=\\"form-text text-muted\\"
++         >
++           The WPA3 standard is the new most secure encryption method that is suggested to be used with any device that supports it. The older devices without WPA3 support require older WPA2. If you experience issues with connecting older devices, try to enable WPA2.
++         </small>
++       </div>
++       <div
++         class=\\"form-group\\"
++       >
 +         <div
 +           class=\\"custom-control custom-switch\\"
 +         >
 +           <input
 +             class=\\"custom-control-input\\"
-+             id=\\"10\\"
++             id=\\"11\\"
 +             type=\\"checkbox\\"
 +           />
 +           <label
 +             class=\\"custom-control-label\\"
-+             for=\\"10\\"
++             for=\\"11\\"
 +           >
 +             Enable Guest Wi-Fi
 +           </label>

src/common/WiFiSettings/constants.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 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.
@@ -18,6 +18,11 @@ export const HWMODES = {
     "11g": "2.4",
     "11a": "5",
 };
+export const ENCRYPTIONMODES = {
+    WPA3: _("WPA3 only"),
+    "WPA2/3": _("WPA3 with WPA2 as fallback (default)"),
+    WPA2: _("WPA2 only"),
+};
 export const HELP_TEXTS = {
     ssid: _(
         `SSID which contains non-standard characters could cause problems on some devices.`
@@ -42,4 +47,7 @@ export const HELP_TEXTS = {
         access the internet, but aren't allowed to access other devices and the configuration interface of the router.
         Parameters of the guest network can be set in the Guest network tab.
         `),
+    wpa3: _(
+        "The WPA3 standard is the new most secure encryption method that is suggested to be used with any device that supports it. The older devices without WPA3 support require older WPA2. If you experience issues with connecting older devices, try to enable WPA2."
+    ),
 };