Add Switch example to the docs

* Add version of the library
* Change colors
* Set tocMode  to "collapse"

docs/components/Logo.js

@@ -0,0 +1,36 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Styled from "rsg-components/Styled";
+import logo from "./logo.svg";
+
+const styles = ({ fontFamily }) => ({
+    logo: {
+        display: "flex",
+        alignItems: "center",
+        margin: 0,
+        fontFamily: fontFamily.base,
+        fontSize: 18,
+        fontWeight: "normal",
+    },
+    image: {
+        height: "1.3em",
+        marginLeft: "-0.2em",
+        marginRight: "0.2em",
+    },
+});
+
+export function LogoRenderer({ classes, children }) {
+    return (
+        <h1 className={classes.logo}>
+            <img className={classes.image} src={logo} alt="React logo" />
+            {children}
+        </h1>
+    );
+}
+
+LogoRenderer.propTypes = {
+    classes: PropTypes.object.isRequired,
+    children: PropTypes.node,
+};
+
+export default Styled(styles)(LogoRenderer);

docs/components/logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
+    <path d="M288.258 240.0394L717.5586-.44c.803 62.277-1.8207 124.502-1.4996 186.7266 1.8208 7.6343-7.2288 10.1966-12.102 13.4908L286.4375 432.1518l1.8206-192.1124zm2.284 277.645L711 278.3176l-.8416 192.7742L457.357 614.514l-1.842 289.03-167.7097 95.8926 2.7365-481.753z"/>
+</svg>

docs/development.md

@@ -1,15 +1,15 @@
-Sooner or later you will face with situation when you want/need to make some
+Sooner or later, you will face with situation when you want/need to make some
-changes in the library. Then the most important tool for you it's
+changes in the library. Then the most important tool for you it's the
 [`npm link`](https://docs.npmjs.com/cli/link).
 
-Please, notice that it will not work if you link library just from root of the
+Please, notice that it will not work if you link the library just from the root
-repo. It happens due to location of sources `./src`. You need to pack library
+of the repo. It happens due to the location of sources `./src`. You need to pack
-first `make pack` and then link it from `./dist` directory.
+the library first, `make pack` and then link it from the `./dist` directory.
 
-Yeah it's not such comfortable solution for development. But it can fixed by
+Yeah, it's not such a comfortable solution for development. But it can be fixed
-writing small script similar as `make pack` but with linking every file and
+by writing a small script similar to making a pack but by linking every file and
-directory from `./src` to the some directory and linking then from it. Notice
+directory from `./src` to the same directory and linking then from it. Notice
-that you need to link `package.json` and `package-lock.json` as well.
+that you need to link a `package.json` and a `package-lock.json` as well.
 
 So step by step:
 

docs/forisjs-npm.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" fill="white">
+    <path d="M49.5 171.722222222222h400v133.333333333333h-200v22.222222222223h-88.888888888889v-22.222222222223H49.5V171.722222222222zm22.222222222222 111.111111111111h44.444444444445v-66.666666666667h22.222222222222v66.666666666667h22.222222222222v-88.888888888889H71.722222222222v88.888888888889zm111.111111111111-88.888888888889v111.111111111111h44.444444444445v-22.222222222222h44.444444444444v-88.888888888889h-88.888888888889zm44.444444444445 22.222222222222H249.5v44.444444444445h-22.222222222222v-44.444444444445zm66.666666666666-22.222222222222v88.888888888889h44.444444444445v-66.666666666667h22.222222222222v66.666666666667h22.222222222222v-66.666666666667h22.222222222222v66.666666666667h22.222222222223v-88.888888888889H293.944444444444z" fill="#cb3837" />
+    <path d="M71.722222222222 282.833333333333h44.444444444444v-66.666666666667h22.222222222223v66.666666666667h22.222222222222v-88.888888888889H71.722222222222zm111.111111111111-88.888888888889v111.111111111111h44.444444444444v-22.222222222222h44.444444444445v-88.888888888889h-88.888888888889zM249.5 260.611111111111h-22.222222222223v-44.444444444445H249.5v44.444444444445zm44.444444444444-66.666666666667v88.888888888889h44.444444444444v-66.666666666667h22.222222222223v66.666666666667h22.222222222222v-66.666666666667h22.222222222222v66.666666666667h22.222222222222v-88.888888888889z" />
+</svg>

docs/intro.md

@@ -1,6 +0,0 @@
-Foris JS library is set of components and utils for Foris JS application and
-plugins.
-
-Please notice that all of these components or utils are used in reForis and
-plugins. If you like to study by example I would recommend to full-text search
-these repos.

docs/introduction.md

@@ -0,0 +1,37 @@
+Welcome! This is the official documentation for Foris JS.
+
+## What Foris JS is
+
+Foris JS library is a set of components and utils for reForis application and
+plugins.
+
+Please notice that all of these components or utils are used in reForis and
+plugins. If you want to study them by example, I recommend you to full-text
+search those repositories.
+
+# Installation
+
+## Prerequisites
+
+Please make sure that [Node.js](https://nodejs.org/en/) is installed on your
+system.
+
+The current Long Term Support (LTS) release is an ideal starting point, see
+[here](https://github.com/nodejs/Release#release-schedule).
+
+## Installation
+
+To install the latest release:
+
+```plain
+npm install foris
+```
+
+To install a specific version:
+
+```plain
+npm install foris@version
+```
+
+<a target="_blank" href="https://www.npmjs.com/package/foris">Check
+on<img width="100px" src="./docs/forisjs-npm.svg"></a>

package.json

@@ -1,7 +1,7 @@
 {
     "name": "foris",
-    "version": "5.1.14",
+    "version": "5.2.0",
-    "description": "Set of components and utils for Foris and its plugins.",
+    "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
         "type": "git",
@@ -53,10 +53,10 @@
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2",
-        "react-styleguidist": "^11.1.7",
+        "react-styleguidist": "^11.2.0",
         "snapshot-diff": "^0.7.0",
         "style-loader": "^1.2.1",
-        "webpack": "^5.15.0"
+        "webpack": "^5.68.0"
     },
     "scripts": {
         "lint": "eslint src",

src/api/hooks.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.
@@ -7,7 +7,6 @@
 
 import { useCallback, useEffect, useReducer, useState } from "react";
 
-import { ForisURLs } from "../utils/forisUrls";
 import {
     API_ACTIONS,
     API_METHODS,
@@ -84,8 +83,8 @@ function APIReducer(state, action) {
                 data: action.payload,
             };
         case API_ACTIONS.FAILURE:
-            if (action.status === 403) {
+            if (action.status === 401) {
-                window.location.assign(ForisURLs.login);
+                window.location.reload();
             }
 
             // Not an API error - should be rethrown.

src/api/utils.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.
@@ -11,6 +11,7 @@ export const HEADERS = {
     Accept: "application/json",
     "Content-Type": "application/json",
     "X-CSRFToken": getCookie("_csrf_token"),
+    "X-Requested-With": "json",
 };
 
 export const TIMEOUT = 30500;
@@ -56,7 +57,7 @@ function getCookie(name) {
 
 export function getErrorPayload(error) {
     if (error.response) {
-        if (error.response.status === 403) {
+        if (error.response.status === 401) {
             return _("The session is expired. Please log in again.");
         }
         return getJSONErrorMessage(error);

src/bootstrap/DownloadButton.js

@@ -21,9 +21,14 @@ DownloadButton.defaultProps = {
     className: "btn-primary",
 };
 
-export function DownloadButton({ href, className, children }) {
+export function DownloadButton({ href, className, children, ...props }) {
     return (
-        <a href={href} className={`btn ${className}`.trim()} download>
+        <a
+            href={href}
+            className={`btn ${className}`.trim()}
+            {...props}
+            download
+        >
             {children}
         </a>
     );

src/bootstrap/PasswordInput.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -21,14 +21,17 @@ PasswordInput.propTypes = {
     helpText: PropTypes.string,
     /** Use show/hide password button. */
     withEye: PropTypes.bool,
+    /** Use new-password in autocomplete attribute. */
+    newPass: PropTypes.bool,
 };
 
-export function PasswordInput({ withEye, ...props }) {
+export function PasswordInput({ withEye, newPass, ...props }) {
     const [isHidden, setHidden] = useState(true);
+
     return (
         <Input
             type={withEye && !isHidden ? "text" : "password"}
-            autoComplete={isHidden ? "new-password" : null}
+            autoComplete={newPass ? "new-password" : "current-password"}
             {...props}
         >
             {withEye ? (

src/bootstrap/Select.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -23,13 +23,12 @@ Select.propTypes = {
 export function Select({ label, choices, helpText, ...props }) {
     const uid = useUID();
 
-    const options = Object.keys(choices)
+    const options = Object.keys(choices).map((choice) => (
-        .sort((a, b) => a - b || a.toString().localeCompare(b.toString()))
+        <option key={choice} value={choice}>
-        .map((key) => (
+            {choices[choice]}
-            <option key={key} value={key}>
+        </option>
-                {choices[key]}
+    ));
-            </option>
+
-        ));
     return (
         <div className="form-group">
             <label htmlFor={uid}>{label}</label>

src/bootstrap/Switch.md

@@ -0,0 +1,5 @@
+Switch example:
+
+```js
+<Switch label="Enable Switch" helpText="Toggle that switch!" />
+```

src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap

@@ -13,7 +13,7 @@ exports[`<PasswordInput/> Render password input 1`] = `
     class="input-group"
   >
     <input
-      autocomplete="new-password"
+      autocomplete="current-password"
       class="form-control"
       id="1"
       type="password"

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,8 @@ DeviceForm.propTypes = {
         htmode: PropTypes.string.isRequired,
         channel: PropTypes.string.isRequired,
         guest_wifi: PropTypes.object.isRequired,
+        encryption: PropTypes.string.isRequired,
+        available_bands: PropTypes.array.isRequired,
     }),
     formErrors: PropTypes.object.isRequired,
     setFormValue: PropTypes.func.isRequired,
@@ -86,6 +88,7 @@ function DeviceForm({
     ...props
 }) {
     const deviceID = formData.id;
+    const bnds = formData.available_bands;
     return (
         <>
             <Switch
@@ -158,18 +161,24 @@ function DeviceForm({
                         value={formData.hwmode}
                         helpText={HELP_TEXTS.hwmode}
                         inline
-                        onChange={setFormValue((value) => ({
+                        onChange={setFormValue((value) => {
-                            devices: {
+                            // Get the last item in an array of available HT modes
-                                [deviceIndex]: {
+                            const [best2] = bnds[0].available_htmodes.slice(-1);
-                                    hwmode: { $set: value },
+                            const [best5] = bnds[1].available_htmodes.slice(-1);
-                                    channel: { $set: "0" },
+                            return {
-                                    htmode: {
+                                devices: {
-                                        $set:
+                                    [deviceIndex]: {
-                                            value === "11a" ? "VHT80" : "HT20",
+                                        hwmode: { $set: value },
+                                        channel: { $set: "0" },
+                                        htmode: {
+                                            $set:
+                                                // Set HT mode depending on checked frequency
+                                                value === "11a" ? best5 : best2,
+                                        },
                                     },
                                 },
-                            },
+                            };
-                        }))}
+                        })}
                         {...props}
                     />
 
@@ -198,6 +207,19 @@ function DeviceForm({
                         {...props}
                     />
 
+                    <Select
+                        label={_("Encryption")}
+                        choices={getEncryptionChoices(formData)}
+                        helpText={HELP_TEXTS.wpa3}
+                        value={formData.encryption}
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { encryption: { $set: value } },
+                            },
+                        }))}
+                        {...props}
+                    />
+
                     {hasGuestNetwork && (
                         <WifiGuestForm
                             formData={{
@@ -256,3 +278,10 @@ function getHwmodeChoices(device) {
         value: availableBand.hwmode,
     }));
 }
+
+function getEncryptionChoices(device) {
+    if (device.encryption === "custom") {
+        ENCRYPTIONMODES.custom = _("Custom");
+    }
+    return ENCRYPTIONMODES;
+}

src/common/WiFiSettings/WiFiSettings.js

@@ -82,6 +82,10 @@ export function validator(formData) {
 
         if (device.password.length < 8)
             errors.password = _("Password must contain at least 8 symbols");
+        if (device.password.length >= 64)
+            errors.password = _(
+                "Password must not contain more than 63 symbols"
+            );
 
         if (!device.guest_wifi.enabled) return errors;
 
@@ -97,6 +101,10 @@ export function validator(formData) {
             guest_wifi_errors.password = _(
                 "Password must contain at least 8 symbols"
             );
+        if (device.guest_wifi.password.length >= 64)
+            guest_wifi_errors.password = _(
+                "Password must not contain more than 63 symbols"
+            );
 
         if (guest_wifi_errors.SSID || guest_wifi_errors.password) {
             errors.guest_wifi = guest_wifi_errors;

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

@@ -26,6 +26,7 @@ describe("<WiFiSettings/>", () => {
     let getAllByText;
     let getAllByLabelText;
     let getByText;
+    let getByLabelText;
     let asFragment;
     const endpoint = "/reforis/api/wifi";
 
@@ -41,6 +42,7 @@ describe("<WiFiSettings/>", () => {
         asFragment = renderRes.asFragment;
         getAllByText = renderRes.getAllByText;
         getAllByLabelText = renderRes.getAllByLabelText;
+        getByLabelText = renderRes.getByLabelText;
         getByText = renderRes.getByText;
         mockAxios.mockResponse({ data: wifiSettingsFixture() });
         await wait(() => renderRes.getByText("Wi-Fi 1"));
@@ -51,7 +53,6 @@ describe("<WiFiSettings/>", () => {
         const webSockets = new WebSockets();
         const { getByText } = render(
             <WiFiSettings
-                ws={webSockets}
                 ws={webSockets}
                 endpoint={endpoint}
                 resetEndpoint="foo"
@@ -120,6 +121,7 @@ describe("<WiFiSettings/>", () => {
                     hwmode: "11a",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],
@@ -145,10 +147,11 @@ describe("<WiFiSettings/>", () => {
                     enabled: true,
                     guest_wifi: { enabled: false },
                     hidden: false,
-                    htmode: "HT20",
+                    htmode: "VHT80",
                     hwmode: "11g",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],
@@ -185,6 +188,7 @@ describe("<WiFiSettings/>", () => {
                     hwmode: "11a",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],
@@ -217,4 +221,24 @@ describe("<WiFiSettings/>", () => {
     it("ByteCount function", () => {
         expect(byteCount("abc")).toEqual(3);
     });
+
+    it("Should validate password length", () => {
+        const shortErrorFeedback = /Password must contain/i;
+        const longErrorFeedback = /Password must not contain/i;
+
+        fireEvent.click(getByText("Wi-Fi 1"));
+
+        const passwordInput = getByLabelText("Password");
+
+        const changePassword = (value) =>
+            fireEvent.change(passwordInput, { target: { value } });
+
+        changePassword("12");
+        expect(getByText(shortErrorFeedback)).toBeDefined();
+
+        changePassword(
+            "longpasswordlongpasswordlongpasswordlongpasswordlongpasswordlong"
+        );
+        expect(getByText(longErrorFeedback)).toBeDefined();
+    });
 });

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>
@@ -394,9 +394,9 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +           class=\\"input-group\\"
 +         >
 +           <input
-+             autocomplete=\\"new-password\\"
++             autocomplete=\\"current-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>
@@ -509,7 +509,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +           class=\\"input-group\\"
 +         >
 +           <input
-+             autocomplete=\\"new-password\\"
++             autocomplete=\\"current-password\\"
 +             class=\\"form-control\\"
 +             id=\\"5\\"
 +             required=\\"\\"
@@ -627,6 +627,11 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +           id=\\"8\\"
 +         >
 +           <option
++             value=\\"NOHT\\"
++           >
++             Disabled
++           </option>
++           <option
 +             value=\\"HT20\\"
 +           >
 +             802.11n - 20 MHz wide channel
@@ -637,11 +642,6 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             802.11n - 40 MHz wide channel
 +           </option>
 +           <option
-+             value=\\"NOHT\\"
-+           >
-+             Disabled
-+           </option>
-+           <option
 +             value=\\"VHT20\\"
 +           >
 +             802.11ac - 20 MHz wide channel
@@ -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-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -13,11 +13,20 @@ export const HTMODES = {
     VHT40: _("802.11ac - 40 MHz wide channel"),
     VHT80: _("802.11ac - 80 MHz wide channel"),
     VHT160: _("802.11ac - 160 MHz wide channel"),
+    HE20: _("802.11ax - 20 MHz wide channel"),
+    HE40: _("802.11ax - 40 MHz wide channel"),
+    HE80: _("802.11ax - 80 MHz wide channel"),
+    HE160: _("802.11ax - 160 MHz wide channel"),
 };
 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 +51,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."
+    ),
 };

src/form/__tests__/validation.test.js

@@ -1,16 +1,17 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
 
 import {
-    validateDomain,
-    validateDUID,
     validateIPv4Address,
     validateIPv6Address,
     validateIPv6Prefix,
+    validateDomain,
+    validateHostname,
+    validateDUID,
     validateMAC,
 } from "utils/validations";
 
@@ -68,6 +69,15 @@ describe("Validation functions", () => {
         expect(validateDomain(".")).not.toBe(undefined);
     });
 
+    it("validateHostname valid", () => {
+        expect(validateHostname("new-android")).toBe(undefined);
+        expect(validateHostname("local")).toBe(undefined);
+    });
+    it("validateHostname invalid", () => {
+        expect(validateHostname("-android")).not.toBe(undefined);
+        expect(validateHostname("local.")).not.toBe(undefined);
+    });
+
     it("validateDUID valid", () => {
         expect(validateDUID("abcdefAB")).toBe(undefined);
         expect(validateDUID("ABCDEF12")).toBe(undefined);

src/index.js

@@ -82,6 +82,7 @@ export {
     validateIPv6Address,
     validateIPv6Prefix,
     validateDomain,
+    validateHostname,
     validateDUID,
     validateMAC,
     validateMultipleEmails,

src/utils/forisUrls.js

@@ -9,8 +9,8 @@ export const REFORIS_URL_PREFIX = "/reforis";
 export const REFORIS_API_URL_PREFIX = `${REFORIS_URL_PREFIX}/api`;
 
 export const ForisURLs = {
-    login: `${REFORIS_URL_PREFIX}/login`,
+    login: `/login?${REFORIS_URL_PREFIX}/`,
-    logout: `${REFORIS_URL_PREFIX}/logout`,
+    logout: `/logout`,
 
     static: `${REFORIS_URL_PREFIX}/static/reforis`,
     wifi: `${REFORIS_URL_PREFIX}/network-settings/wifi`,

src/utils/validations.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -14,6 +14,7 @@ export const ERROR_MESSAGES = {
     IPv6: _("This is not a valid IPv6 address."),
     IPv6Prefix: _("This is not a valid IPv6 prefix."),
     domain: _("This is not a valid domain name."),
+    hostname: _("This is not a valid hostname."),
     DUID: _("This is not a valid DUID."),
     MAC: _("This is not a valid MAC address."),
     MultipleEmails: _("Doesn't contain a list of emails separated by commas."),
@@ -23,7 +24,8 @@ const REs = {
     IPv4: /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
     IPv6: /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/,
     IPv6Prefix: /^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\/([0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8]))$/,
-    domain: /^[A-Za-z0-9][A-Za-z0-9.-]{1,255}$/,
+    domain: /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/,
+    hostname: /^[a-z\d]([a-z\d-]{0,61}[a-z\d])?(\.[a-z\d]([a-z\d-]{0,61}[a-z\d])?)*$/i,
     DUID: /^([0-9a-fA-F]{2}){4}([0-9a-fA-F]{2})*$/,
     MAC: /^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{2}$/,
     MultipleEmails: /^([a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)( *, *[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)*$/,
@@ -40,6 +42,7 @@ const validateIPv4Address = createValidator("IPv4");
 const validateIPv6Address = createValidator("IPv6");
 const validateIPv6Prefix = createValidator("IPv6Prefix");
 const validateDomain = createValidator("domain");
+const validateHostname = createValidator("hostname");
 const validateDUID = createValidator("DUID");
 const validateMAC = createValidator("MAC");
 const validateMultipleEmails = createValidator("MultipleEmails");
@@ -49,6 +52,7 @@ export {
     validateIPv6Address,
     validateIPv6Prefix,
     validateDomain,
+    validateHostname,
     validateDUID,
     validateMAC,
     validateMultipleEmails,

src/webSockets/WebSockets.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2020 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2020-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.
@@ -7,8 +7,6 @@
 
 /* eslint no-console: "off" */
 
-import { ForisURLs } from "../utils/forisUrls";
-
 const PROTOCOL = window.location.protocol === "http:" ? "ws" : "wss";
 
 const URL = process.env.LIGHTTPD
@@ -21,12 +19,6 @@ export class WebSockets {
     constructor() {
         this.ws = new WebSocket(URL);
         this.ws.onerror = (e) => {
-            if (!window.initialData.logged) {
-                console.error(
-                    "WS: Error observed, you aren't logged probably."
-                );
-                window.location.replace(ForisURLs.login);
-            }
             console.error("WS: Error:", e);
         };
         this.ws.onmessage = (e) => {

styleguide.config.js

@@ -1,39 +1,56 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
-
 const path = require("path");
+const pjson = require("./package.json");
 
 module.exports = {
-    title: "Foris JS docs",
+    title: "Foris JS Docs",
+    version: `v${pjson.version}`,
+    theme: {
+        color: {
+            link: "#0075a3",
+            linkHover: "#00a2e2",
+        },
+    },
+    tocMode: "collapse",
+    pagePerSection: true,
     sections: [
         {
-            name: "Foris JS",
+            name: "Introduction",
-            content: "docs/intro.md",
+            content: "docs/introduction.md",
         },
         {
-            name: "Development (Linking)",
+            name: "Development",
             content: "docs/development.md",
         },
         {
-            name: "Foris forms",
+            name: "Components",
-            components: [
+            description: "Set of main components.",
-                "src/form/components/ForisForm.js",
+            sections: [
-                "src/form/components/alerts.js",
+                {
-                "src/form/components/SubmitButton.js",
+                    name: "Foris forms",
+                    components: [
+                        "src/form/components/ForisForm.js",
+                        "src/form/components/alerts.js",
+                        "src/form/components/SubmitButton.js",
+                    ],
+                    exampleMode: "expand",
+                    usageMode: "expand",
+                },
+                {
+                    name: "Alert Context",
+                    components: ["src/alertContext/AlertContext.js"],
+                    exampleMode: "expand",
+                    usageMode: "expand",
+                },
             ],
-            exampleMode: "expand",
+            sectionDepth: 1,
-            usageMode: "expand",
-        },
-        {
-            name: "Alert Context",
-            components: ["src/alertContext/AlertContext.js"],
-            exampleMode: "expand",
-            usageMode: "expand",
         },
+
         {
             name: "Bootstrap components",
             description: "Set of bootstrap components.",
@@ -41,8 +58,12 @@ module.exports = {
             exampleMode: "expand",
             usageMode: "expand",
             ignore: ["src/bootstrap/constants.js"],
+            sectionDepth: 0,
         },
     ],
+    template: {
+        favicon: "/docs/components/logo.svg",
+    },
     require: [
         "babel-polyfill",
         path.join(__dirname, "src/testUtils/mockGlobals"),
@@ -55,6 +76,9 @@ module.exports = {
             "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
         ),
     ],
+    styleguideComponents: {
+        LogoRenderer: path.join(__dirname, "docs/components/Logo"),
+    },
     webpackConfig: {
         module: {
             rules: [
@@ -73,5 +97,8 @@ module.exports = {
                 },
             ],
         },
+        devServer: {
+            publicPath: "/",
+        },
     },
 };