Merge branch 'bump-520' into 'dev'

Bump v5.2.0

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

.eslintrc.js

@@ -1,6 +1,8 @@
 module.exports = {
-    extends: "eslint-config-reforis",
+    extends: ["eslint-config-reforis", "prettier"],
+    plugins: ["prettier"],
     rules: {
+        "prettier/prettier": ["error"],
         "import/prefer-default-export": "off",
     },
 };

.gitignore

@@ -51,3 +51,4 @@ coverage.xml
 dist/
 foris-*.tgz
 styleguide/
+testUtils

.gitlab-ci.yml

@@ -1,44 +1,44 @@
-image: node:8-alpine
+image: node:10-alpine
 
 stages:
-  - test
-  - build
-  - publish
+    - test
+    - build
+    - publish
 
 before_script:
-  - apk add make
-  - npm install
+    - apk add make
+    - npm install
 
 test:
-  stage: test
-  script:
-    - make test
+    stage: test
+    script:
+        - make test
 
 lint:
-  stage: test
-  script:
-    - make lint
+    stage: test
+    script:
+        - make lint
 
 build:
-  stage: build
-  script:
-    - make pack
-  artifacts:
-    paths:
-      - dist/foris-*.tgz
+    stage: build
+    script:
+        - make pack
+    artifacts:
+        paths:
+            - dist/foris-*.tgz
 
 publish_beta:
-  stage: publish
-  only:
-    refs:
-      - dev
-  script:
-    - make publish-beta
+    stage: publish
+    only:
+        refs:
+            - dev
+    script:
+        - make publish-beta
 
 publish_latest:
-  stage: publish
-  only:
-    refs:
-      - master
-  script:
-    - make publish-latest
+    stage: publish
+    only:
+        refs:
+            - master
+    script:
+        - make publish-latest

.prettierrc

@@ -0,0 +1,11 @@
+{
+    "singleQuote": false,
+    "printWidth": 80,
+    "proseWrap": "always",
+    "tabWidth": 4,
+    "useTabs": false,
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "semi": true
+}

Makefile

@@ -1,6 +1,6 @@
 .PHONY: all install-js watch-js build-js collect-files pack publish-beta publish-latest lint test test-js-update-snapshots create-messages update-messages docs docs-watch clean
 
-DEV_PYTHON=python3.7
+DEV_PYTHON=python3
 VENV_NAME?=venv
 VENV_BIN=$(shell pwd)/$(VENV_NAME)/bin
 

README.md

@@ -1,4 +1,5 @@
 # foris-js
+
 Set of utils and common React elements for reForis.
 
 ## Publishing package
@@ -6,24 +7,27 @@ Set of utils and common React elements for reForis.
 ### Beta versions
 
 Each commit to `dev` branch will result in publishing a new version of library
-tagged `beta`. Versions names are based on commit SHA, e.g. 
+tagged `beta`. Versions names are based on commit SHA, e.g.
 `foris@0.1.0-beta.d9073aa4`.
 
 ### Preparing a release
 
 1. Crete a merge request to `dev` branch with version bumped
 2. When merging add `[skip ci]` to commit message to prevent publishing
-unnecessary version
+   unnecessary version
 3. Create a merge request from `dev` to `master` branch
 4. New version should be published automatically
 
 ## Manually managed dependencies
-Because of `<ForisForm />` component it's required to use exposed `ReactRouterDOM`
-object from `react-router-dom` library. `ReactRouterDOM` is exposed by
+
+Because of `<ForisForm />` component it's required to use exposed
+`ReactRouterDOM` object from `react-router-dom` library. `ReactRouterDOM` is
+exposed by
 [reForis](https://gitlab.labs.nic.cz/turris/reforis/reforis/blob/master/js/webpack.config.js).
 It can be done by following steps:
- 
-1. Setting `react-router-dom` as `peerDependencies` and `devDependencies` in `package.json`.
+
+1. Setting `react-router-dom` as `peerDependencies` and `devDependencies` in
+   `package.json`.
 2. Adding the following rules to `externals` in `webpack.conf.js` of the plugin:
 
 ```js
@@ -34,11 +38,15 @@ externals: {
 ```
 
 ### Docs
+
 Build or watch docs to get more info about library:
+
 ```bash
 make docs
 ```
+
 or
+
 ```bash
 make docs-watch
 ```

babel.config.js

@@ -1,9 +1,4 @@
 module.exports = {
-    presets: [
-        "@babel/preset-env",
-        "@babel/preset-react",
-    ],
-    plugins: [
-        "@babel/plugin-transform-runtime",
-    ],
+    presets: ["@babel/preset-env", "@babel/preset-react"],
+    plugins: ["@babel/plugin-transform-runtime"],
 };

docs/development.md

@@ -1,12 +1,15 @@
-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 [`npm link`](https://docs.npmjs.com/cli/link).
+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
+[`npm link`](https://docs.npmjs.com/cli/link).
 
-Please, notice that it will not work if you link library just from root of the repo. It happens due to location of 
-sources `./src`. You need to pack library first `make pack` and then link it from `./dist` directory.
+Please, notice that it will not work if you link library just from root of the
+repo. It happens due to location of sources `./src`. You need to pack library
+first `make pack` and then link it from `./dist` directory.
 
-Yeah it's not such comfortable solution for development. But it can fixed by writing small script similar as `make pack`
-but with linking every file and directory from `./src` to the some directory and linking then from it. Notice that you
-need to link `package.json` and `package-lock.json` as well.
+Yeah it's not such comfortable solution for development. But it can fixed by
+writing small script similar as `make pack` but with linking every file and
+directory from `./src` to the some directory and linking then from it. Notice
+that you need to link `package.json` and `package-lock.json` as well.
 
 So step by step:
 

docs/intro.md

@@ -1,4 +1,6 @@
-Foris JS library is set of components and utils for Foris JS application and plugins.
+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.
+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.

jest.config.js

@@ -27,7 +27,5 @@ module.exports = {
     globals: {
         TZ: "utc",
     },
-    transformIgnorePatterns: [
-        "node_modules/(?!(react-datetime)/)",
-    ],
+    transformIgnorePatterns: ["node_modules/(?!(react-datetime)/)"],
 };

package.json

@@ -1,67 +1,70 @@
 {
-  "name": "foris",
-  "version": "5.0.1",
-  "description": "Set of components and utils for Foris and its plugins.",
-  "author": "CZ.NIC, z.s.p.o.",
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.labs.nic.cz/turris/reforis/foris-js.git"
-  },
-  "keywords": [
-    "foris",
-    "reforis"
-  ],
-  "license": "GPL-3.0",
-  "main": "./src/index.js",
-  "dependencies": {
-    "axios": "^0.19.2",
-    "immutability-helper": "3.0.1",
-    "moment": "^2.24.0",
-    "qrcode.react": "^0.9.3",
-    "react-datetime": "^2.16.3",
-    "react-uid": "^2.2.0"
-  },
-  "peerDependencies": {
-    "bootstrap": "4.4.1",
-    "prop-types": "15.7.2",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
-    "react-router-dom": "^5.1.2"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.9.4",
-    "@fortawesome/fontawesome-free": "^5.13.0",
-    "@testing-library/react": "^8.0.9",
-    "babel-loader": "^8.1.0",
-    "babel-polyfill": "^6.26.0",
-    "bootstrap": "^4.5.0",
-    "css-loader": "^3.5.3",
-    "eslint": "^6.8.0",
-    "eslint-config-reforis": "^1.0.0",
-    "file-loader": "^6.0.0",
-    "jest": "^25.2.0",
-    "jest-mock-axios": "^3.2.0",
-    "moment-timezone": "^0.5.28",
-    "prop-types": "15.7.2",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
-    "react-router-dom": "^5.1.2",
-    "react-styleguidist": "^10.6.2",
-    "snapshot-diff": "^0.7.0",
-    "style-loader": "^1.2.1",
-    "webpack": "^4.43.0"
-  },
-  "scripts": {
-    "lint": "eslint src",
-    "lint:fix": "eslint --fix src",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage --colors",
-    "docs": "npx styleguidist build ",
-    "docs:watch": "styleguidist server"
-  }
+    "name": "foris",
+    "version": "5.2.0",
+    "description": "Set of components and utils for Foris and its plugins.",
+    "author": "CZ.NIC, z.s.p.o.",
+    "repository": {
+        "type": "git",
+        "url": "https://gitlab.nic.cz/turris/reforis/foris-js.git"
+    },
+    "keywords": [
+        "foris",
+        "reforis"
+    ],
+    "license": "GPL-3.0",
+    "main": "./src/index.js",
+    "dependencies": {
+        "axios": "^0.21.1",
+        "immutability-helper": "3.0.1",
+        "moment": "^2.24.0",
+        "qrcode.react": "^0.9.3",
+        "react-datetime": "^3.0.4",
+        "react-uid": "^2.2.0"
+    },
+    "peerDependencies": {
+        "bootstrap": "4.4.1",
+        "prop-types": "15.7.2",
+        "react": "16.9.0",
+        "react-dom": "16.9.0",
+        "react-router-dom": "^5.1.2"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.12.10",
+        "@babel/core": "^7.9.0",
+        "@babel/plugin-transform-runtime": "^7.9.0",
+        "@babel/preset-env": "^7.9.0",
+        "@babel/preset-react": "^7.9.4",
+        "@fortawesome/fontawesome-free": "^5.13.0",
+        "@testing-library/react": "^8.0.9",
+        "babel-loader": "^8.1.0",
+        "babel-polyfill": "^6.26.0",
+        "bootstrap": "^4.5.0",
+        "css-loader": "^5.2.4",
+        "eslint": "^6.8.0",
+        "eslint-config-prettier": "^6.11.0",
+        "eslint-config-reforis": "^1.0.0",
+        "eslint-plugin-prettier": "^3.1.4",
+        "file-loader": "^6.0.0",
+        "jest": "^25.2.0",
+        "jest-mock-axios": "^3.2.0",
+        "moment-timezone": "^0.5.28",
+        "prettier": "2.0.5",
+        "prop-types": "15.7.2",
+        "react": "16.9.0",
+        "react-dom": "16.9.0",
+        "react-router-dom": "^5.1.2",
+        "react-styleguidist": "^7.3.11",
+        "snapshot-diff": "^0.7.0",
+        "style-loader": "^1.2.1",
+        "webpack": "^5.15.0"
+    },
+    "scripts": {
+        "lint": "eslint src",
+        "lint:fix": "eslint --fix src",
+        "test": "jest",
+        "test:watch": "jest --watch",
+        "test:coverage": "jest --coverage --colors",
+        "docs": "npx styleguidist build ",
+        "docs:watch": "styleguidist server"
+    }
 }

src/alertContext/AlertContext.js

@@ -22,9 +22,12 @@ function AlertContextProvider({ children }) {
     const { AlertContext } = window;
     const [alert, setAlert] = useState(null);
 
-    const setAlertWrapper = useCallback((message, type = ALERT_TYPES.DANGER) => {
-        setAlert({ message, type });
-    }, [setAlert]);
+    const setAlertWrapper = useCallback(
+        (message, type = ALERT_TYPES.DANGER) => {
+            setAlert({ message, type });
+        },
+        [setAlert]
+    );
 
     const dismissAlert = useCallback(() => setAlert(null), [setAlert]);
 
@@ -38,7 +41,7 @@ function AlertContextProvider({ children }) {
                 </Portal>
             )}
             <AlertContext.Provider value={[setAlertWrapper, dismissAlert]}>
-                { children }
+                {children}
             </AlertContext.Provider>
         </>
     );

src/alertContext/AlertContext.md

@@ -1,4 +1,5 @@
-It provides alert context to children. `AlertContext` allows using `useAlert` in components.
+It provides alert context to children. `AlertContext` allows using `useAlert` in
+components.
 
-Notice that `<div id="alert-container"/>` should be presented in HTML doc to get it work (In reForis it's already done
-with base Jinja2 templates).
+Notice that `<div id="alert-container"/>` should be presented in HTML doc to get
+it work (In reForis it's already done with base Jinja2 templates).

src/alertContext/__tests__/AlertContext.test.js

@@ -6,9 +6,7 @@
  */
 
 import React from "react";
-import {
-    render, getByText, queryByText, fireEvent,
-} from "customTestRender";
+import { render, getByText, queryByText, fireEvent } from "customTestRender";
 
 import { useAlert, AlertContextProvider } from "../AlertContext";
 
@@ -31,7 +29,7 @@ describe("AlertContext", () => {
         const { container } = render(
             <AlertContextProvider>
                 <AlertTest />
-            </AlertContextProvider>,
+            </AlertContextProvider>
         );
         componentContainer = container;
     });

src/api/hooks.js

@@ -1,17 +1,19 @@
 /*
- * 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.
  */
 
-import {
-    useCallback, useEffect, useReducer, useState,
-} from "react";
+import { useCallback, useEffect, useReducer, useState } from "react";
 
-import { ForisURLs } from "../utils/forisUrls";
 import {
-    API_ACTIONS, API_METHODS, API_STATE, getErrorPayload, HEADERS, TIMEOUT,
+    API_ACTIONS,
+    API_METHODS,
+    API_STATE,
+    getErrorPayload,
+    HEADERS,
+    TIMEOUT,
 } from "./utils";
 
 const DATA_METHODS = ["POST", "PATCH", "PUT"];
@@ -23,76 +25,83 @@ function createAPIHook(method) {
             data: null,
         });
 
-        const sendRequest = useCallback(async ({ data, suffix } = {}) => {
-            const headers = { ...HEADERS };
-            if (contentType) {
-                headers["Content-Type"] = contentType;
-            }
-
-            dispatch({ type: API_ACTIONS.INIT });
-            try {
-                // Prepare request
-                const request = API_METHODS[method];
-                const config = {
-                    timeout: TIMEOUT,
-                    headers,
-                };
-                const url = suffix ? `${urlRoot}/${suffix}` : urlRoot;
-
-                // Make request
-                let result;
-                if (DATA_METHODS.includes(method)) {
-                    result = await request(url, data, config);
-                } else {
-                    result = await request(url, config);
+        const sendRequest = useCallback(
+            async ({ data, suffix } = {}) => {
+                const headers = { ...HEADERS };
+                if (contentType) {
+                    headers["Content-Type"] = contentType;
                 }
 
-                // Process request result
-                dispatch({
-                    type: API_ACTIONS.SUCCESS,
-                    payload: result.data,
-                });
-            } catch (error) {
-                const errorPayload = getErrorPayload(error);
-                dispatch({
-                    type: API_ACTIONS.FAILURE,
-                    status: error.response && error.response.status,
-                    payload: errorPayload,
-                });
-            }
-        }, [urlRoot, contentType]);
+                dispatch({ type: API_ACTIONS.INIT });
+                try {
+                    // Prepare request
+                    const request = API_METHODS[method];
+                    const config = {
+                        timeout: TIMEOUT,
+                        headers,
+                    };
+                    const url = suffix ? `${urlRoot}/${suffix}` : urlRoot;
+
+                    // Make request
+                    let result;
+                    if (DATA_METHODS.includes(method)) {
+                        result = await request(url, data, config);
+                    } else {
+                        result = await request(url, config);
+                    }
+
+                    // Process request result
+                    dispatch({
+                        type: API_ACTIONS.SUCCESS,
+                        payload: result.data,
+                    });
+                } catch (error) {
+                    const errorPayload = getErrorPayload(error);
+                    dispatch({
+                        type: API_ACTIONS.FAILURE,
+                        status: error.response && error.response.status,
+                        payload: errorPayload,
+                    });
+                }
+            },
+            [urlRoot, contentType]
+        );
         return [state, sendRequest];
     };
 }
 
 function APIReducer(state, action) {
     switch (action.type) {
-    case API_ACTIONS.INIT:
-        return {
-            ...state,
-            state: API_STATE.SENDING,
-        };
-    case API_ACTIONS.SUCCESS:
-        return {
-            state: API_STATE.SUCCESS,
-            data: action.payload,
-        };
-    case API_ACTIONS.FAILURE:
-        if (action.status === 403) {
-            window.location.assign(ForisURLs.login);
-        }
+        case API_ACTIONS.INIT:
+            return {
+                ...state,
+                state: API_STATE.SENDING,
+            };
+        case API_ACTIONS.SUCCESS:
+            return {
+                state: API_STATE.SUCCESS,
+                data: action.payload,
+            };
+        case API_ACTIONS.FAILURE:
+            if (action.status === 401) {
+                window.location.reload();
+            }
 
-        // Not an API error - should be rethrown.
-        if (action.payload && action.payload.stack && action.payload.message) {
-            throw (action.payload);
-        }
+            // Not an API error - should be rethrown.
+            if (
+                action.payload &&
+                action.payload.stack &&
+                action.payload.message
+            ) {
+                throw action.payload;
+            }
 
-        return {
-            state: API_STATE.ERROR,
-            data: action.payload,
-        };
-    default:
-        throw new Error();
+            return {
+                state: API_STATE.ERROR,
+                data: action.payload,
+            };
+        default:
+            throw new Error();
     }
 }
 
@@ -102,11 +111,10 @@ const useAPIPatch = createAPIHook("PATCH");
 const useAPIPut = createAPIHook("PUT");
 const useAPIDelete = createAPIHook("DELETE");
 
-export {
-    useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete,
-};
+export { useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete };
 
-export function useAPIPolling(endpoint, delay = 1000, until) { // delay ms
+export function useAPIPolling(endpoint, delay = 1000, until) {
+    // delay ms
     const [state, setState] = useState({ state: API_STATE.INIT });
     const [getResponse, get] = useAPIGet(endpoint);
 

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;
@@ -43,8 +44,10 @@ function getCookie(name) {
         for (let i = 0; i < cookies.length; i++) {
             const cookie = cookies[i].trim();
             // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === (`${name}=`)) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+            if (cookie.substring(0, name.length + 1) === `${name}=`) {
+                cookieValue = decodeURIComponent(
+                    cookie.substring(name.length + 1)
+                );
                 break;
             }
         }
@@ -54,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/Alert.js

@@ -35,12 +35,20 @@ Alert.defaultProps = {
     type: ALERT_TYPES.DANGER,
 };
 
-export function Alert({
-    type, onDismiss, children,
-}) {
+export function Alert({ type, onDismiss, children }) {
     return (
-        <div className={`alert alert-dismissible alert-${type}`}>
-            {onDismiss ? <button type="button" className="close" onClick={onDismiss}>&times;</button> : false}
+        <div
+            className={`alert ${
+                onDismiss ? "alert-dismissible" : ""
+            } alert-${type}`}
+        >
+            {onDismiss ? (
+                <button type="button" className="close" onClick={onDismiss}>
+                    &times;
+                </button>
+            ) : (
+                false
+            )}
             {children}
         </div>
     );

src/bootstrap/Alert.md

@@ -1,21 +1,21 @@
 Bootstrap alert component.
 
 ```jsx
-import {useState} from 'react';
+import { useState } from "react";
 
-function AlertExample(){
+function AlertExample() {
     const [alert, setAlert] = useState(true);
     if (alert)
-        return <Alert 
-            type='warning' 
-            onDismiss={()=>setAlert(false)}
-        >
-            Some warning out there!        
-        </Alert>;
-    return <button 
-        className='btn btn-secondary' 
-        onClick={()=>setAlert(true)}
-    >Show alert again</button>;
-};
-<AlertExample/>
+        return (
+            <Alert type="warning" onDismiss={() => setAlert(false)}>
+                Some warning out there!
+            </Alert>
+        );
+    return (
+        <button className="btn btn-secondary" onClick={() => setAlert(true)}>
+            Show alert again
+        </button>
+    );
+}
+<AlertExample />;
 ```

src/bootstrap/Button.js

@@ -25,22 +25,29 @@ Button.propTypes = {
 };
 
 export function Button({
-    className, loading, forisFormSize, children, ...props
+    className,
+    loading,
+    forisFormSize,
+    children,
+    ...props
 }) {
     let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
     if (forisFormSize) {
-        buttonClass = `${buttonClass} col-sm-12 col-lg-3`;
+        buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
     }
 
-    const span = loading
-        ? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null;
+    const span = loading ? (
+        <span
+            className="spinner-border spinner-border-sm"
+            role="status"
+            aria-hidden="true"
+        />
+    ) : null;
 
     return (
         <button type="button" className={buttonClass} {...props}>
             {span}
-            {" "}
             {span ? " " : null}
-            {" "}
             {children}
         </button>
     );

src/bootstrap/Button.md

@@ -11,5 +11,7 @@ Can be used without parameters:
 Using loading spinner:
 
 ```jsx
-<Button loading disabled>Loading...</Button>
+<Button loading disabled>
+    Loading...
+</Button>
 ```

src/bootstrap/CheckBox.js

@@ -22,9 +22,7 @@ CheckBox.defaultProps = {
     disabled: false,
 };
 
-export function CheckBox({
-    label, helpText, disabled, ...props
-}) {
+export function CheckBox({ label, helpText, disabled, ...props }) {
     const uid = useUID();
     return (
         <div className="form-group">
@@ -34,12 +32,15 @@ export function CheckBox({
                     type="checkbox"
                     id={uid}
                     disabled={disabled}
-
                     {...props}
                 />
                 <label className="custom-control-label" htmlFor={uid}>
                     {label}
-                    {helpText && <small className="form-text text-muted">{helpText}</small>}
+                    {helpText && (
+                        <small className="form-text text-muted">
+                            {helpText}
+                        </small>
+                    )}
                 </label>
             </div>
         </div>

src/bootstrap/Checkbox.md

@@ -1,16 +1,17 @@
-Checkbox with label Bootstrap component with predefined sizes and structure for using in foris forms.
-
-All additional `props` are passed to the `<input type="checkbox">` HTML component.
+Checkbox with label Bootstrap component with predefined sizes and structure for
+using in foris forms.
 
+All additional `props` are passed to the `<input type="checkbox">` HTML
+component.
 
 ```js
-import {useState} from 'react';
+import { useState } from "react";
 const [value, setValue] = useState(false);
 
 <CheckBox
     value={value}
-    label="Some label" 
+    label="Some label"
     helpText="Read the small text!"
-    onChange={event =>setValue(event.target.value)}
-/>
+    onChange={(event) => setValue(event.target.value)}
+/>;
 ```

src/bootstrap/DataTimeInput.js

@@ -7,7 +7,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import Datetime from "react-datetime/DateTime";
+import Datetime from "react-datetime";
 import moment from "moment/moment";
 import "react-datetime/css/react-datetime.css";
 import "./DataTimeInput.css";
@@ -38,14 +38,17 @@ const DEFAULT_DATE_FORMAT = "YYYY-MM-DD";
 const DEFAULT_TIME_FORMAT = "HH:mm:ss";
 
 export function DataTimeInput({
-    value, onChange, isValidDate, dateFormat, timeFormat, children, ...props
+    value,
+    onChange,
+    isValidDate,
+    dateFormat,
+    timeFormat,
+    children,
+    ...props
 }) {
     function renderInput(datetimeProps) {
         return (
-            <Input
-                {...props}
-                {...datetimeProps}
-            >
+            <Input {...props} {...datetimeProps}>
                 {children}
             </Input>
         );
@@ -54,8 +57,12 @@ export function DataTimeInput({
     return (
         <Datetime
             locale={ForisTranslations.locale}
-            dateFormat={dateFormat !== undefined ? dateFormat : DEFAULT_DATE_FORMAT}
-            timeFormat={timeFormat !== undefined ? timeFormat : DEFAULT_TIME_FORMAT}
+            dateFormat={
+                dateFormat !== undefined ? dateFormat : DEFAULT_DATE_FORMAT
+            }
+            timeFormat={
+                timeFormat !== undefined ? timeFormat : DEFAULT_TIME_FORMAT
+            }
             value={value}
             onChange={onChange}
             isValidDate={isValidDate}

src/bootstrap/DataTimeInput.md

@@ -1,25 +1,26 @@
-Adopted from `react-datetime/DateTime` datatime picker component.
-It uses `momentjs` see example.
+Adopted from `react-datetime/DateTime` datatime picker component. It uses
+`momentjs` see example.
 
-It requires `ForisTranslations.locale` to be defined in order to use right locale.
+It requires `ForisTranslations.locale` to be defined in order to use right
+locale.
 
 ```js
-ForisTranslations={locale:'en'};
+ForisTranslations = { locale: "en" };
 
-import {useState, useEffect} from 'react';
-import moment from 'moment/moment';
+import { useState, useEffect } from "react";
+import moment from "moment/moment";
 
 const [dataTime, setDataTime] = useState(moment());
 const [error, setError] = useState();
-useEffect(()=>{
-   dataTime.isValid() ? setError(null) : setError('Invalid value!');
-},[dataTime]);
- 
+useEffect(() => {
+    dataTime.isValid() ? setError(null) : setError("Invalid value!");
+}, [dataTime]);
+
 <DataTimeInput
-    label='Time to sleep'
+    label="Time to sleep"
     value={dataTime}
     error={error}
-    helpText='Example helptext...'
-    onChange={value => setDataTime(value)}
-/>
+    helpText="Example helptext..."
+    onChange={(value) => setDataTime(value)}
+/>;
 ```

src/bootstrap/DownloadButton.js

@@ -23,11 +23,7 @@ DownloadButton.defaultProps = {
 
 export function DownloadButton({ href, className, children }) {
     return (
-        <a
-            href={href}
-            className={`btn ${className}`.trim()}
-            download
-        >
+        <a href={href} className={`btn ${className}`.trim()} download>
             {children}
         </a>
     );

src/bootstrap/DownloadButton.md

@@ -1,6 +1,9 @@
 Hyperlink with apperance of a button.
 
-It has `download` attribute, which prevents closing WebSocket connection on Firefox. See [related issue](https://bugzilla.mozilla.org/show_bug.cgi?id=858538) for more details.
+It has `download` attribute, which prevents closing WebSocket connection on
+Firefox. See
+[related issue](https://bugzilla.mozilla.org/show_bug.cgi?id=858538) for more
+details.
 
 ```js
 <DownloadButton href="example.zip">Download</DownloadButton>

src/bootstrap/EmailInput.md

@@ -1,18 +1,19 @@
-Bootstrap component of email input with label with predefined sizes and structure for using in foris forms.
-It use built-in browser email address checking. It's only meaningful using inside `<form>`.
+Bootstrap component of email input with label with predefined sizes and
+structure for using in foris forms. It use built-in browser email address
+checking. It's only meaningful using inside `<form>`.
 
 All additional `props` are passed to the `<input type="email">` HTML component.
 
 ```js
-import {useState} from 'react';
-const [email, setEmail] = useState('Wrong email');
-<form onSubmit={e=>e.preventDefault()}>
+import { useState } from "react";
+const [email, setEmail] = useState("Wrong email");
+<form onSubmit={(e) => e.preventDefault()}>
     <EmailInput
         value={email}
-        label="Some label" 
+        label="Some label"
         helpText="Read the small text!"
-        onChange={event =>setEmail(event.target.value)}
+        onChange={(event) => setEmail(event.target.value)}
     />
     <button type="submit">Try to submit</button>
-</form>
+</form>;
 ```

src/bootstrap/FileInput.md

@@ -1,9 +1,10 @@
-Bootstrap component for file input. Includes label and has predefined sizes and structure for using in foris forms. 
+Bootstrap component for file input. Includes label and has predefined sizes and
+structure for using in foris forms.
 
 All additional `props` are passed to the `<input type="file">` HTML component.
 
 ```js
-import { useState } from 'react';
+import { useState } from "react";
 
 const [files, setFiles] = useState([]);
 
@@ -15,27 +16,33 @@ const label = files.length === 1 ? files[0].name : "Choose file";
         files={files}
         label={label}
         helpText="Will be uploaded"
-        onChange={event=>setFiles(event.target.files)}
+        onChange={(event) => setFiles(event.target.files)}
     />
-</form>
+</form>;
 ```
 
 ### FileInput with multiple files
+
 ```js
-import { useState } from 'react';
+import { useState } from "react";
 
 const [files, setFiles] = useState([]);
 
 // Note that files is not an array but FileList.
-const label = files.length > 0 ? Array.from(files).map(file=>file.name).join(", ") : "Choose files";
+const label =
+    files.length > 0
+        ? Array.from(files)
+              .map((file) => file.name)
+              .join(", ")
+        : "Choose files";
 
 <form className="col">
     <FileInput
         files={files}
         label={label}
         helpText="Will be uploaded"
-        onChange={event=>setFiles(event.target.files)}
+        onChange={(event) => setFiles(event.target.files)}
         multiple
     />
-</form>
+</form>;
 ```

src/bootstrap/Input.js

@@ -25,25 +25,38 @@ Input.propTypes = {
 
 /** Base bootstrap input component. */
 export function Input({
-    type, label, helpText, error, className, children, labelClassName, groupClassName, ...props
+    type,
+    label,
+    helpText,
+    error,
+    className,
+    children,
+    labelClassName,
+    groupClassName,
+    ...props
 }) {
     const uid = useUID();
-    const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
+    const inputClassName = `form-control ${className || ""} ${
+        error ? "is-invalid" : ""
+    }`.trim();
     return (
         <div className="form-group">
-            <label className={labelClassName} htmlFor={uid}>{label}</label>
+            <label className={labelClassName} htmlFor={uid}>
+                {label}
+            </label>
             <div className={`input-group ${groupClassName || ""}`.trim()}>
                 <input
                     className={inputClassName}
                     type={type}
                     id={uid}
-
                     {...props}
                 />
                 {children}
             </div>
             {error ? <div className="invalid-feedback">{error}</div> : null}
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
+            {helpText ? (
+                <small className="form-text text-muted">{helpText}</small>
+            ) : null}
         </div>
     );
 }

src/bootstrap/Modal.css

@@ -10,6 +10,6 @@
 .modal.show {
     display: block;
     animation-name: modalFade;
-    animation-duration: .3s;
+    animation-duration: 0.3s;
     background: rgba(0, 0, 0, 0.2);
 }

src/bootstrap/Modal.js

@@ -1,11 +1,11 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2020 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, { useRef } from "react";
+import React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 
 import { Portal } from "../utils/Portal";
@@ -18,6 +18,7 @@ Modal.propTypes = {
     /** Callback to manage modal visibility */
     setShown: PropTypes.func.isRequired,
     scrollable: PropTypes.bool,
+    size: PropTypes.string,
 
     /** Modal content use following: `ModalHeader`, `ModalBody`, `ModalFooter` */
     children: PropTypes.oneOfType([
@@ -26,24 +27,54 @@ Modal.propTypes = {
     ]).isRequired,
 };
 
-export function Modal({
-    shown, setShown, scrollable, children,
-}) {
+export function Modal({ shown, setShown, scrollable, size, children }) {
     const dialogRef = useRef();
+    let modalSize = "modal-";
 
     useClickOutside(dialogRef, () => setShown(false));
 
+    useEffect(() => {
+        const handleEsc = (event) => {
+            if (event.keyCode === 27) {
+                setShown(false);
+            }
+        };
+        window.addEventListener("keydown", handleEsc);
+
+        return () => {
+            window.removeEventListener("keydown", handleEsc);
+        };
+    }, [setShown]);
+
+    switch (size) {
+        case "sm":
+            modalSize += "sm";
+            break;
+        case "lg":
+            modalSize += "lg";
+            break;
+        case "xl":
+            modalSize += "xl";
+            break;
+        default:
+            modalSize = "";
+            break;
+    }
+
     return (
         <Portal containerId="modal-container">
-            <div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
+            <div
+                className={`modal fade ${shown ? "show" : ""}`.trim()}
+                role="dialog"
+            >
                 <div
                     ref={dialogRef}
-                    className={`modal-dialog modal-dialog-centered${scrollable ? " modal-dialog-scrollable" : ""}`}
+                    className={`${modalSize.trim()} modal-dialog modal-dialog-centered ${
+                        scrollable ? "modal-dialog-scrollable" : ""
+                    }`.trim()}
                     role="document"
                 >
-                    <div className="modal-content">
-                        {children}
-                    </div>
+                    <div className="modal-content">{children}</div>
                 </div>
             </div>
         </Portal>
@@ -59,7 +90,11 @@ export function ModalHeader({ setShown, title }) {
     return (
         <div className="modal-header">
             <h5 className="modal-title">{title}</h5>
-            <button type="button" className="close" onClick={() => setShown(false)}>
+            <button
+                type="button"
+                className="close"
+                onClick={() => setShown(false)}
+            >
                 <span aria-hidden="true">&times;</span>
             </button>
         </div>
@@ -85,9 +120,5 @@ ModalFooter.propTypes = {
 };
 
 export function ModalFooter({ children }) {
-    return (
-        <div className="modal-footer">
-            {children}
-        </div>
-    );
+    return <div className="modal-footer">{children}</div>;
 }

src/bootstrap/Modal.md

@@ -1,31 +1,47 @@
 Bootstrap modal component.
 
-it's required to have an element `<div id={"modal-container"}/>` somewhere on the page since modals are rendered in portals.
+It's required to have an element `<div id={"modal-container"}/>` somewhere on
+the page since modals are rendered in portals.
+
+Modals also have three optional sizes, which can be defined through the `size`
+prop:
+
+-   small - `sm`
+-   large - `lg`
+-   extra-large - `xl`
+
+For more details please visit Bootstrap
+<a href="https://getbootstrap.com/docs/4.5/components/modal/#optional-sizes" target="_blank">
+documentation</a>.
 
 ```js
-    <div id="modal-container"/>
+<div id="modal-container" />
 ```
 
 ```js
-import {ModalHeader, ModalBody, ModalFooter} from './Modal';
+import { ModalHeader, ModalBody, ModalFooter } from "./Modal";
 
-import {useState} from 'react';
+import { useState } from "react";
 const [shown, setShown] = useState(false);
 
 <>
-    <Modal setShown={setShown} shown={shown}>
-        <ModalHeader setShown={setShown} title='Warning!'/>
-        <ModalBody><p>Bla bla bla...</p></ModalBody>
+    <Modal setShown={setShown} shown={shown} size="sm">
+        <ModalHeader setShown={setShown} title="Warning!" />
+        <ModalBody>
+            <p>Bla bla bla...</p>
+        </ModalBody>
         <ModalFooter>
-            <button 
-                className='btn btn-secondary' 
+            <button
+                className="btn btn-secondary"
                 onClick={() => setShown(false)}
-            >Skip it</button>
+            >
+                Skip it
+            </button>
         </ModalFooter>
     </Modal>
-    
-    <button className='btn btn-secondary' onClick={()=>setShown(true)}>
+
+    <button className="btn btn-secondary" onClick={() => setShown(true)}>
         Show modal
     </button>
-</>
+</>;
 ```

src/bootstrap/NumberInput.css

@@ -4,7 +4,7 @@ input[type="number"] {
     appearance: textfield;
 }
 
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
 }

src/bootstrap/NumberInput.js

@@ -20,10 +20,7 @@ NumberInput.propTypes = {
     /** Help text message. */
     helpText: PropTypes.string,
     /** Number value. */
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-    ]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /** Function called when value changes. */
     onChange: PropTypes.func.isRequired,
     /** Additional description dispaled to the right of input value. */
@@ -34,15 +31,21 @@ NumberInput.defaultProps = {
     value: 0,
 };
 
-export function NumberInput({
-    onChange, inlineText, value, ...props
-}) {
+export function NumberInput({ onChange, inlineText, value, ...props }) {
     function updateValue(initialValue, difference) {
         onChange({ target: { value: initialValue + difference } });
     }
 
-    const enableIncrease = useConditionalTimeout({ callback: updateValue }, value, 1);
-    const enableDecrease = useConditionalTimeout({ callback: updateValue }, value, -1);
+    const enableIncrease = useConditionalTimeout(
+        { callback: updateValue },
+        value,
+        1
+    );
+    const enableDecrease = useConditionalTimeout(
+        { callback: updateValue },
+        value,
+        -1
+    );
 
     return (
         <Input type="number" onChange={onChange} value={value} {...props}>

src/bootstrap/NumberInput.md

@@ -1,17 +1,18 @@
-Bootstrap component of number input with label with predefined sizes and structure for using in foris forms.
+Bootstrap component of number input with label with predefined sizes and
+structure for using in foris forms.
 
 All additional `props` are passed to the `<input type="number">` HTML component.
 
 ```js
-import {useState} from 'react';
+import { useState } from "react";
 const [value, setValue] = useState(42);
 
 <NumberInput
     value={value}
-    label="Some number" 
+    label="Some number"
     helpText="Read the small text!"
-    min='33'
-    max='54'
-    onChange={event =>setValue(event.target.value)}
-/>
+    min="33"
+    max="54"
+    onChange={(event) => setValue(event.target.value)}
+/>;
 ```

src/bootstrap/PasswordInput.js

@@ -31,22 +31,24 @@ export function PasswordInput({ withEye, ...props }) {
             autoComplete={isHidden ? "new-password" : null}
             {...props}
         >
-            {withEye
-                ? (
-                    <div className="input-group-append">
-                        <button
-                            type="button"
-                            className="input-group-text"
-                            onClick={(e) => {
-                                e.preventDefault();
-                                setHidden((shouldBeHidden) => !shouldBeHidden);
-                            }}
-                        >
-                            <i className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`} />
-                        </button>
-                    </div>
-                )
-                : null}
+            {withEye ? (
+                <div className="input-group-append">
+                    <button
+                        type="button"
+                        className="input-group-text"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            setHidden((shouldBeHidden) => !shouldBeHidden);
+                        }}
+                    >
+                        <i
+                            className={`fa ${
+                                isHidden ? "fa-eye" : "fa-eye-slash"
+                            }`}
+                        />
+                    </button>
+                </div>
+            ) : null}
         </Input>
     );
 }

src/bootstrap/PasswordInput.md

@@ -1,17 +1,18 @@
-Password Bootstrap component input with label and predefined sizes and structure for using in foris forms.
-Can be used with "eye" button, see example.
+Password Bootstrap component input with label and predefined sizes and structure
+for using in foris forms. Can be used with "eye" button, see example.
 
-All additional `props` are passed to the `<input type="password">` HTML component.
+All additional `props` are passed to the `<input type="password">` HTML
+component.
 
 ```js
-import {useState} from 'react';
-const [value, setValue] = useState('secret');
+import { useState } from "react";
+const [value, setValue] = useState("secret");
 
 <PasswordInput
     withEye
     value={value}
-    label="Some password" 
+    label="Some password"
     helpText="Read the small text!"
-    onChange={event =>setValue(event.target.value)}
-/>
+    onChange={(event) => setValue(event.target.value)}
+/>;
 ```

src/bootstrap/RadioSet.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2020 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.
@@ -15,25 +15,35 @@ RadioSet.propTypes = {
     /** RadioSet label . */
     label: PropTypes.string,
     /** Choices . */
-    choices: PropTypes.arrayOf(PropTypes.shape({
-        /** Choice lable . */
-        label: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.element,
-            PropTypes.node,
-            PropTypes.arrayOf(PropTypes.node),
-        ]).isRequired,
-        /** Choice value . */
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    })).isRequired,
+    choices: PropTypes.arrayOf(
+        PropTypes.shape({
+            /** Choice lable . */
+            label: PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.element,
+                PropTypes.node,
+                PropTypes.arrayOf(PropTypes.node),
+            ]).isRequired,
+            /** Choice value . */
+            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+                .isRequired,
+        })
+    ).isRequired,
     /** Initial value . */
     value: PropTypes.string,
     /** Help text message . */
     helpText: PropTypes.string,
+    inline: PropTypes.bool,
 };
 
 export function RadioSet({
-    name, label, choices, value, helpText, ...props
+    name,
+    label,
+    choices,
+    value,
+    helpText,
+    inline,
+    ...props
 }) {
     const uid = useUID();
     const radios = choices.map((choice, key) => {
@@ -47,7 +57,7 @@ export function RadioSet({
                 value={choice.value}
                 helpText={choice.helpText}
                 checked={choice.value === value}
-
+                inline={inline}
                 {...props}
             />
         );
@@ -55,9 +65,15 @@ export function RadioSet({
 
     return (
         <div className="form-group">
-            {label && <label htmlFor={uid} className="d-block">{label}</label>}
+            {label && (
+                <label htmlFor={uid} className="d-block">
+                    {label}
+                </label>
+            )}
             {radios}
-            {helpText && <small className="form-text text-muted">{helpText}</small>}
+            {helpText && (
+                <small className="form-text text-muted">{helpText}</small>
+            )}
         </div>
     );
 }
@@ -70,24 +86,32 @@ Radio.propTypes = {
         PropTypes.arrayOf(PropTypes.node),
     ]).isRequired,
     id: PropTypes.string.isRequired,
+    inline: PropTypes.bool,
     helpText: PropTypes.string,
 };
 
-export function Radio({
-    label, id, helpText, ...props
-}) {
+export function Radio({ label, id, helpText, inline, ...props }) {
     return (
         <>
-            <div className={`custom-control custom-radio ${!helpText ? "custom-control-inline" : ""}`.trim()}>
+            <div
+                className={`custom-control custom-radio ${
+                    inline ? "custom-control-inline" : ""
+                }`.trim()}
+            >
                 <input
                     id={id}
                     className="custom-control-input"
                     type="radio"
-
                     {...props}
                 />
-                <label className="custom-control-label" htmlFor={id}>{label}</label>
-                {helpText && <small className="form-text text-muted mt-0 mb-3">{helpText}</small>}
+                <label className="custom-control-label" htmlFor={id}>
+                    {label}
+                </label>
+                {helpText && (
+                    <small className="form-text text-muted mt-0 mb-3">
+                        {helpText}
+                    </small>
+                )}
             </div>
         </>
     );

src/bootstrap/RadioSet.md

@@ -1,15 +1,16 @@
-Set of radio Bootstrap component input with label and predefined sizes and structure for using in foris forms.
+Set of radio Bootstrap component input with label and predefined sizes and
+structure for using in foris forms.
 
 All additional `props` are passed to the `<input type="number">` HTML component.
 
 Unless `helpText` is set for one of the options they are displayed inline.
 
 ```js
-import {useState} from 'react';
-const CHOICES=[
-    {value:'one',label:'1'},
-    {value:'two',label:'2'},
-    {value:'three',label:'3'},
+import { useState } from "react";
+const CHOICES = [
+    { value: "one", label: "1" },
+    { value: "two", label: "2" },
+    { value: "three", label: "3" },
 ];
 const [value, setValue] = useState(CHOICES[0].value);
 
@@ -17,10 +18,10 @@ const [value, setValue] = useState(CHOICES[0].value);
     {/*Yeah, it gets event, not value!*/}
     <RadioSet
         value={value}
-        name='some-radio'
+        name="some-radio"
         choices={CHOICES}
-        onChange={event =>setValue(event.target.value)}
+        onChange={(event) => setValue(event.target.value)}
     />
     <p>Selected value: {value}</p>
-</>
+</>;
 ```

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.
@@ -15,35 +15,35 @@ Select.propTypes = {
     /** Choices if form of {value : "Label",...}. */
     choices: PropTypes.object.isRequired,
     /** Current value. */
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-    ]).isRequired,
+    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>
-            <select
-                className="custom-select"
-                id={uid}
-                {...props}
-            >
+            <select className="custom-select" id={uid} {...props}>
                 {options}
             </select>
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
+            {helpText ? (
+                <small className="form-text text-muted">{helpText}</small>
+            ) : null}
         </div>
     );
 }

src/bootstrap/Select.md

@@ -1,13 +1,14 @@
-Select with options Bootstrap component input with label and predefined sizes and structure for using in foris forms.
+Select with options Bootstrap component input with label and predefined sizes
+and structure for using in foris forms.
 
 All additional `props` are passed to the `<select>` HTML component.
 
 ```js
-import {useState} from 'react';
-const CHOICES={
-    apple:'Apple',
-    banana:'Banana',
-    peach:'Peach',
+import { useState } from "react";
+const CHOICES = {
+    apple: "Apple",
+    banana: "Banana",
+    peach: "Peach",
 };
 const [value, setValue] = useState(Object.keys(CHOICES)[0]);
 
@@ -17,9 +18,9 @@ const [value, setValue] = useState(Object.keys(CHOICES)[0]);
         label="Fruit"
         value={value}
         choices={CHOICES}
-        onChange={event=>setValue(event.target.value)}
+        onChange={(event) => setValue(event.target.value)}
     />
     <p>Selected choice label: {CHOICES[value]}</p>
     <p>Selected choice value: {value}</p>
-</>
+</>;
 ```

src/bootstrap/Spinner.css

@@ -5,7 +5,7 @@
 }
 
 .spinner-fs-background {
-    background-color: rgba(2, 2, 2, .5);
+    background-color: rgba(2, 2, 2, 0.5);
     color: rgb(230, 230, 230);
     position: fixed;
     width: 100%;

src/bootstrap/Spinner.js

@@ -25,12 +25,12 @@ Spinner.defaultProps = {
     fullScreen: false,
 };
 
-export function Spinner({
-    fullScreen, children, className,
-}) {
+export function Spinner({ fullScreen, children, className }) {
     if (!fullScreen) {
         return (
-            <div className={`spinner-wrapper ${className || "my-3 text-center"}`}>
+            <div
+                className={`spinner-wrapper ${className || "my-3 text-center"}`}
+            >
                 <SpinnerElement>{children}</SpinnerElement>
             </div>
         );
@@ -61,7 +61,9 @@ export function SpinnerElement({ small, className, children }) {
     return (
         <>
             <div
-                className={`spinner-border ${small ? "spinner-border-sm" : ""} ${className || ""}`.trim()}
+                className={`spinner-border ${
+                    small ? "spinner-border-sm" : ""
+                } ${className || ""}`.trim()}
                 role="status"
             >
                 <span className="sr-only" />

src/bootstrap/Switch.js

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2020 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 { useUID } from "react-uid";
+
+Switch.propTypes = {
+    label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element,
+        PropTypes.node,
+        PropTypes.arrayOf(PropTypes.node),
+    ]).isRequired,
+    helpText: PropTypes.string,
+    switchHeading: PropTypes.bool,
+};
+
+export function Switch({ label, helpText, switchHeading, ...props }) {
+    const uid = useUID();
+    return (
+        <div className={`form-group ${switchHeading ? "switch" : ""}`.trim()}>
+            <div
+                className={`custom-control custom-switch ${
+                    !helpText ? "custom-control-inline" : ""
+                } ${switchHeading ? "switch-heading" : ""}`.trim()}
+            >
+                <input
+                    type="checkbox"
+                    className="custom-control-input"
+                    id={uid}
+                    {...props}
+                />
+                <label className="custom-control-label" htmlFor={uid}>
+                    {label}
+                </label>
+                {helpText && (
+                    <small className="form-text text-muted mt-0 mb-3">
+                        {helpText}
+                    </small>
+                )}
+            </div>
+        </div>
+    );
+}

src/bootstrap/TextInput.md

@@ -1,15 +1,16 @@
-Text Bootstrap component input with label and predefined sizes and structure for using in foris forms.
+Text Bootstrap component input with label and predefined sizes and structure for
+using in foris forms.
 
 All additional `props` are passed to the `<input type="text">` HTML component.
 
 ```js
-import {useState} from 'react';
-const [value, setValue] = useState('Bla bla');
+import { useState } from "react";
+const [value, setValue] = useState("Bla bla");
 
 <TextInput
     value={value}
-    label="Some text" 
+    label="Some text"
     helpText="Read the small text!"
-    onChange={event =>setValue(event.target.value)}
-/>
+    onChange={(event) => setValue(event.target.value)}
+/>;
 ```

src/bootstrap/__tests__/Button.test.js

@@ -14,19 +14,18 @@ import { Button } from "../Button";
 describe("<Button />", () => {
     it("Render button correctly", () => {
         const { container } = render(<Button>Test Button</Button>);
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
     });
 
     it("Render button with custom classes", () => {
-        const { container } = render(<Button className="one two three">Test Button</Button>);
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        const { container } = render(
+            <Button className="one two three">Test Button</Button>
+        );
+        expect(container.firstChild).toMatchSnapshot();
     });
 
     it("Render button with spinner", () => {
         const { container } = render(<Button loading>Test Button</Button>);
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
     });
 });

src/bootstrap/__tests__/CheckBox.test.js

@@ -18,22 +18,16 @@ describe("<Checkbox/>", () => {
                 label="Test label"
                 checked
                 helpText="Some help text"
-                onChange={() => {
-                }}
-            />,
+                onChange={() => {}}
+            />
         );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
     });
 
     it("Render uncheked checkbox", () => {
         const { container } = render(
-            <CheckBox
-                label="Test label"
-                helpText="Some help text"
-            />,
+            <CheckBox label="Test label" helpText="Some help text" />
         );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
     });
 });

src/bootstrap/__tests__/DownloadButton.test.js

@@ -13,7 +13,11 @@ import { DownloadButton } from "../DownloadButton";
 
 describe("<DownloadButton />", () => {
     it("should have download attribute", () => {
-        const { container } = render(<DownloadButton href="http://example.com">Test Button</DownloadButton>);
+        const { container } = render(
+            <DownloadButton href="http://example.com">
+                Test Button
+            </DownloadButton>
+        );
         expect(container.firstChild.getAttribute("download")).not.toBeNull();
     });
 });

src/bootstrap/__tests__/NumberInput.test.js

@@ -7,9 +7,7 @@
 
 import React from "react";
 
-import {
-    render, fireEvent, getByLabelText, wait,
-} from "customTestRender";
+import { render, fireEvent, getByLabelText, wait } from "customTestRender";
 
 import { NumberInput } from "../NumberInput";
 
@@ -24,7 +22,7 @@ describe("<NumberInput/>", () => {
                 helpText="Some help text"
                 value={1}
                 onChange={onChangeMock}
-            />,
+            />
         );
         componentContainer = container;
     });
@@ -36,12 +34,16 @@ describe("<NumberInput/>", () => {
     it("Increase number with button", async () => {
         const increaseButton = getByLabelText(componentContainer, "Increase");
         fireEvent.mouseDown(increaseButton);
-        await wait(() => expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } }));
+        await wait(() =>
+            expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } })
+        );
     });
 
     it("Decrease number with button", async () => {
         const decreaseButton = getByLabelText(componentContainer, "Decrease");
         fireEvent.mouseDown(decreaseButton);
-        await wait(() => expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } }));
+        await wait(() =>
+            expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } })
+        );
     });
 });

src/bootstrap/__tests__/PasswordInput.test.js

@@ -18,11 +18,9 @@ describe("<PasswordInput/>", () => {
                 label="Test label"
                 helpText="Some help text"
                 value="Some password"
-                onChange={() => {
-                }}
-            />,
+                onChange={() => {}}
+            />
         );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
     });
 });

src/bootstrap/__tests__/RadioSet.test.js

@@ -35,11 +35,9 @@ describe("<RadioSet/>", () => {
                 value="value"
                 choices={TEST_CHOICES}
                 helpText="Some help text"
-                onChange={() => {
-                }}
-            />,
+                onChange={() => {}}
+            />
         );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
     });
 });

src/bootstrap/__tests__/Select.test.js

@@ -8,7 +8,10 @@
 import React from "react";
 
 import {
-    fireEvent, getByDisplayValue, getByText, render,
+    fireEvent,
+    getByDisplayValue,
+    getByText,
+    render,
 } from "customTestRender";
 
 import { Select } from "../Select";
@@ -29,29 +32,24 @@ describe("<Select/>", () => {
                 value="1"
                 choices={TEST_CHOICES}
                 helpText="Help text"
-
                 onChange={onChangeHandler}
-            />,
+            />
         );
         selectContainer = container;
     });
 
     it("Test with snapshot.", () => {
-        expect(selectContainer)
-            .toMatchSnapshot();
+        expect(selectContainer).toMatchSnapshot();
     });
 
     it("Test onChange handling.", () => {
         const select = getByDisplayValue(selectContainer, "one");
-        expect(select.value)
-            .toBe("1");
+        expect(select.value).toBe("1");
         fireEvent.change(select, { target: { value: "2" } });
 
         const option = getByText(selectContainer, "two");
-        expect(onChangeHandler)
-            .toBeCalled();
+        expect(onChangeHandler).toBeCalled();
 
-        expect(option.value)
-            .toBe("2");
+        expect(option.value).toBe("2");
     });
 });

src/bootstrap/__tests__/Switch.test.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2020 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 { render } from "customTestRender";
+
+import { Switch } from "../Switch";
+
+describe("<Switch/>", () => {
+    it("Render switch", () => {
+        const { container } = render(
+            <Switch
+                label="Test label"
+                checked
+                helpText="Some help text"
+                onChange={() => {}}
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+
+    it("Render uncheked switch", () => {
+        const { container } = render(
+            <Switch label="Test label" helpText="Some help text" />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});

src/bootstrap/__tests__/TextInput.test.js

@@ -18,11 +18,9 @@ describe("<TextInput/>", () => {
                 label="Test label"
                 helpText="Some help text"
                 value="Some text"
-                onChange={() => {
-                }}
-            />,
+                onChange={() => {}}
+            />
         );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
     });
 });

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

@@ -5,8 +5,6 @@ exports[`<Button /> Render button correctly 1`] = `
   class="btn btn-primary "
   type="button"
 >
-   
-   
   Test Button
 </button>
 `;
@@ -16,8 +14,6 @@ exports[`<Button /> Render button with custom classes 1`] = `
   class="btn one two three"
   type="button"
 >
-   
-   
   Test Button
 </button>
 `;
@@ -33,8 +29,6 @@ exports[`<Button /> Render button with spinner 1`] = `
     role="status"
   />
    
-   
-   
   Test Button
 </button>
 `;

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

@@ -11,7 +11,7 @@ exports[`<RadioSet/> Render radio set 1`] = `
     Radios set label
   </label>
   <div
-    class="custom-control custom-radio custom-control-inline"
+    class="custom-control custom-radio"
   >
     <input
       checked=""
@@ -29,7 +29,7 @@ exports[`<RadioSet/> Render radio set 1`] = `
     </label>
   </div>
   <div
-    class="custom-control custom-radio custom-control-inline"
+    class="custom-control custom-radio"
   >
     <input
       class="custom-control-input"
@@ -46,7 +46,7 @@ exports[`<RadioSet/> Render radio set 1`] = `
     </label>
   </div>
   <div
-    class="custom-control custom-radio custom-control-inline"
+    class="custom-control custom-radio"
   >
     <input
       class="custom-control-input"

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

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Switch/> Render switch 1`] = `
+<div
+  class="form-group"
+>
+  <div
+    class="custom-control custom-switch"
+  >
+    <input
+      checked=""
+      class="custom-control-input"
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+    </label>
+    <small
+      class="form-text text-muted mt-0 mb-3"
+    >
+      Some help text
+    </small>
+  </div>
+</div>
+`;
+
+exports[`<Switch/> Render uncheked switch 1`] = `
+<div
+  class="form-group"
+>
+  <div
+    class="custom-control custom-switch"
+  >
+    <input
+      class="custom-control-input"
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+    </label>
+    <small
+      class="form-text text-muted mt-0 mb-3"
+    >
+      Some help text
+    </small>
+  </div>
+</div>
+`;

src/bootstrap/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.
@@ -7,4 +7,5 @@
 
 /** Bootstrap column size for form fields */
 // eslint-disable-next-line import/prefer-default-export
-export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3";
+export const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-4";
+export const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";

src/common/RebootButton.js

@@ -13,15 +13,9 @@ import { API_STATE } from "../api/utils";
 import { ForisURLs } from "../utils/forisUrls";
 
 import { Button } from "../bootstrap/Button";
-import {
-    Modal, ModalHeader, ModalBody, ModalFooter,
-} from "../bootstrap/Modal";
+import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
 import { useAlert } from "../alertContext/AlertContext";
 
-RebootButton.propTypes = {
-    forisFormSize: PropTypes.bool,
-};
-
 export function RebootButton(props) {
     const [triggered, setTriggered] = useState(false);
     const [modalShown, setModalShown] = useState(false);
@@ -42,13 +36,16 @@ export function RebootButton(props) {
 
     return (
         <>
-            <RebootModal shown={modalShown} setShown={setModalShown} onReboot={rebootHandler} />
+            <RebootModal
+                shown={modalShown}
+                setShown={setModalShown}
+                onReboot={rebootHandler}
+            />
             <Button
                 className="btn-danger"
                 loading={triggered}
                 disabled={triggered}
                 onClick={() => setModalShown(true)}
-
                 {...props}
             >
                 {_("Reboot")}
@@ -66,11 +63,15 @@ RebootModal.propTypes = {
 function RebootModal({ shown, setShown, onReboot }) {
     return (
         <Modal shown={shown} setShown={setShown}>
-            <ModalHeader setShown={setShown} title={_("Reboot confirmation")} />
-            <ModalBody><p>{_("Are you sure you want to restart the router?")}</p></ModalBody>
+            <ModalHeader setShown={setShown} title={_("Warning!")} />
+            <ModalBody>
+                <p>{_("Are you sure you want to restart the router?")}</p>
+            </ModalBody>
             <ModalFooter>
                 <Button onClick={() => setShown(false)}>{_("Cancel")}</Button>
-                <Button className="btn-danger" onClick={onReboot}>{_("Confirm reboot")}</Button>
+                <Button className="btn-danger" onClick={onReboot}>
+                    {_("Confirm reboot")}
+                </Button>
             </ModalFooter>
         </Modal>
     );

src/common/WiFiSettings/ResetWiFiSettings.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.
@@ -20,16 +20,15 @@ ResetWiFiSettings.propTypes = {
     endpoint: PropTypes.string.isRequired,
 };
 
-export default function ResetWiFiSettings({ ws, endpoint }) {
+export function ResetWiFiSettings({ ws, endpoint }) {
     const [isLoading, setIsLoading] = useState(false);
 
     useEffect(() => {
         const module = "wifi";
-        ws.subscribe(module)
-            .bind(module, "reset", () => {
-                // eslint-disable-next-line no-restricted-globals
-                setTimeout(() => location.reload(), 1000);
-            });
+        ws.subscribe(module).bind(module, "reset", () => {
+            // eslint-disable-next-line no-restricted-globals
+            setTimeout(() => location.reload(), 1000);
+        });
     }, [ws]);
 
     const [postResetResponse, postReset] = useAPIPost(endpoint);
@@ -38,7 +37,10 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
         if (postResetResponse.state === API_STATE.ERROR) {
             setAlert(_("An error occurred during resetting Wi-Fi settings."));
         } else if (postResetResponse.state === API_STATE.SUCCESS) {
-            setAlert(_("Wi-Fi settings are set to defaults."), ALERT_TYPES.SUCCESS);
+            setAlert(
+                _("Wi-Fi settings are set to defaults."),
+                ALERT_TYPES.SUCCESS
+            );
         }
     }, [postResetResponse, setAlert]);
 
@@ -49,26 +51,24 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
     }
 
     return (
-        <>
-            <h4>{_("Reset Wi-Fi Settings")}</h4>
+        <div className={formFieldsSize}>
+            <h2>{_("Reset Wi-Fi Settings")}</h2>
             <p>
-                {_(`
-If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the
-current Wi-Fi configuration and restore the default values.
-        `)}
+                {_(`If a number of wireless cards doesn't match, you may try \
+to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi \
+configuration and restore the default values.`)}
             </p>
-            <div className={`${formFieldsSize} text-right`}>
+            <div className="text-right">
                 <Button
-                    className="btn-warning"
+                    className="btn-primary"
                     forisFormSize
                     loading={isLoading}
                     disabled={isLoading}
-
                     onClick={onReset}
                 >
                     {_("Reset Wi-Fi Settings")}
                 </Button>
             </div>
-        </>
+        </div>
     );
 }

src/common/WiFiSettings/WiFiForm.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,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";
@@ -15,28 +15,28 @@ 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) },
-    ).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}
         />
     ));
 }
@@ -62,11 +63,13 @@ 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,
     hasGuestNetwork: PropTypes.bool,
     deviceIndex: PropTypes.number,
+    divider: PropTypes.bool,
 };
 
 DeviceForm.defaultProps = {
@@ -75,144 +78,155 @@ DeviceForm.defaultProps = {
 };
 
 function DeviceForm({
-    formData, formErrors, setFormValue, hasGuestNetwork, deviceIndex, ...props
+    formData,
+    formErrors,
+    setFormValue,
+    hasGuestNetwork,
+    deviceIndex,
+    divider,
+    ...props
 }) {
     const deviceID = formData.id;
     return (
         <>
-            <h3>{_(`Wi-Fi ${deviceID + 1}`)}</h3>
-            <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}
+                        helpText={HELP_TEXTS.ssid}
+                        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}
+                        inline
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: {
+                                    hwmode: { $set: value },
+                                    channel: { $set: "0" },
+                                    htmode: {
+                                        $set:
+                                            value === "11a" ? "VHT80" : "HT20",
+                                    },
+                                },
+                            },
+                        }))}
+                        {...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}
+                    />
+
+                    <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={{
+                                id: deviceIndex,
+                                ...formData.guest_wifi,
+                            }}
+                            formErrors={formErrors.guest_wifi || {}}
+                            setFormValue={setFormValue}
+                            {...props}
+                        />
+                    )}
+                </>
+            ) : null}
+            {divider ? <hr /> : null}
         </>
     );
 }
@@ -228,7 +242,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" : ""
+            })
                     `;
         });
     });
@@ -255,3 +271,10 @@ function getHwmodeChoices(device) {
         value: availableBand.hwmode,
     }));
 }
+
+function getEncryptionChoices(device) {
+    if (device.encryption === "custom") {
+        ENCRYPTIONMODES.custom = _("Custom");
+    }
+    return ENCRYPTIONMODES;
+}

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,73 @@ 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}
+                        helpText={HELP_TEXTS.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}
         </>
     );
 }

src/common/WiFiSettings/WiFiQRCode.js

@@ -12,7 +12,10 @@ import PropTypes from "prop-types";
 import { ForisURLs } from "../../utils/forisUrls";
 import { Button } from "../../bootstrap/Button";
 import {
-    Modal, ModalBody, ModalFooter, ModalHeader,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalHeader,
 } from "../../bootstrap/Modal";
 import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
 
@@ -36,11 +39,21 @@ export default function WiFiQRCode({ SSID, password }) {
                     setModal(true);
                 }}
             >
-                <img width="20" src={QR_ICON_PATH} alt="QR" style={{ opacity: 0.67 }} />
+                <img
+                    width="20"
+                    src={QR_ICON_PATH}
+                    alt="QR"
+                    style={{ opacity: 0.67 }}
+                />
             </button>
-            {modal
-                ? <QRCodeModal setShown={setModal} shown={modal} SSID={SSID} password={password} />
-                : null}
+            {modal ? (
+                <QRCodeModal
+                    setShown={setModal}
+                    shown={modal}
+                    SSID={SSID}
+                    password={password}
+                />
+            ) : null}
         </>
     );
 }
@@ -52,9 +65,7 @@ QRCodeModal.propTypes = {
     setShown: PropTypes.func.isRequired,
 };
 
-function QRCodeModal({
-    shown, setShown, SSID, password,
-}) {
+function QRCodeModal({ shown, setShown, SSID, password }) {
     return (
         <Modal setShown={setShown} shown={shown}>
             <ModalHeader setShown={setShown} title={_("Wi-Fi QR Code")} />

src/common/WiFiSettings/WiFiSettings.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.
@@ -10,7 +10,7 @@ import PropTypes from "prop-types";
 
 import { ForisForm } from "../../form/components/ForisForm";
 import WiFiForm from "./WiFiForm";
-import ResetWiFiSettings from "./ResetWiFiSettings";
+import { ResetWiFiSettings } from "./ResetWiFiSettings";
 
 WiFiSettings.propTypes = {
     ws: PropTypes.object.isRequired,
@@ -19,9 +19,7 @@ WiFiSettings.propTypes = {
     hasGuestNetwork: PropTypes.bool,
 };
 
-export function WiFiSettings({
-    ws, endpoint, resetEndpoint, hasGuestNetwork,
-}) {
+export function WiFiSettings({ ws, endpoint, resetEndpoint, hasGuestNetwork }) {
     return (
         <>
             <ForisForm
@@ -59,35 +57,51 @@ function prepDataToSubmit(formData) {
             return;
         }
 
-        if (!device.guest_wifi.enabled) formData.devices[idx].guest_wifi = { enabled: false };
+        if (!device.guest_wifi.enabled)
+            formData.devices[idx].guest_wifi = { enabled: false };
     });
     return formData;
 }
 
+export function byteCount(string) {
+    const buffer = Buffer.from(string, "utf-8");
+    const count = buffer.byteLength;
+    return count;
+}
+
 export function validator(formData) {
-    const formErrors = formData.devices.map(
-        (device) => {
-            if (!device.enabled) return {};
+    const formErrors = formData.devices.map((device) => {
+        if (!device.enabled) return {};
 
-            const errors = {};
-            if (device.SSID.length > 32) errors.SSID = _("SSID can't be longer than 32 symbols");
-            if (device.SSID.length === 0) errors.SSID = _("SSID can't be empty");
+        const errors = {};
+        if (device.SSID.length > 32)
+            errors.SSID = _("SSID can't be longer than 32 symbols");
+        if (device.SSID.length === 0) errors.SSID = _("SSID can't be empty");
+        if (byteCount(device.SSID) > 32)
+            errors.SSID = _("SSID can't be longer than 32 bytes");
 
-            if (device.password.length < 8) errors.password = _("Password must contain at least 8 symbols");
+        if (device.password.length < 8)
+            errors.password = _("Password must contain at least 8 symbols");
 
-            if (!device.guest_wifi.enabled) return errors;
+        if (!device.guest_wifi.enabled) return errors;
 
-            const guest_wifi_errors = {};
-            if (device.guest_wifi.SSID.length > 32) guest_wifi_errors.SSID = _("SSID can't be longer than 32 symbols");
-            if (device.guest_wifi.SSID.length === 0) guest_wifi_errors.SSID = _("SSID can't be empty");
+        const guest_wifi_errors = {};
+        if (device.guest_wifi.SSID.length > 32)
+            guest_wifi_errors.SSID = _("SSID can't be longer than 32 symbols");
+        if (device.guest_wifi.SSID.length === 0)
+            guest_wifi_errors.SSID = _("SSID can't be empty");
+        if (byteCount(device.guest_wifi.SSID) > 32)
+            guest_wifi_errors.SSID = _("SSID can't be longer than 32 bytes");
 
-            if (device.guest_wifi.password.length < 8) guest_wifi_errors.password = _("Password must contain at least 8 symbols");
+        if (device.guest_wifi.password.length < 8)
+            guest_wifi_errors.password = _(
+                "Password must contain at least 8 symbols"
+            );
 
-            if (guest_wifi_errors.SSID || guest_wifi_errors.password) {
-                errors.guest_wifi = guest_wifi_errors;
-            }
-            return errors;
-        },
-    );
+        if (guest_wifi_errors.SSID || guest_wifi_errors.password) {
+            errors.guest_wifi = guest_wifi_errors;
+        }
+        return errors;
+    });
     return JSON.stringify(formErrors).match(/\[[{},?]+\]/) ? null : formErrors;
 }

src/common/WiFiSettings/__tests__/ResetWiFiSettings.test.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.
@@ -14,7 +14,7 @@ import { mockJSONError } from "testUtils/network";
 import { mockSetAlert } from "testUtils/alertContextMock";
 import { ALERT_TYPES } from "../../../bootstrap/Alert";
 
-import ResetWiFiSettings from "../ResetWiFiSettings";
+import { ResetWiFiSettings } from "../ResetWiFiSettings";
 
 describe("<ResetWiFiSettings/>", () => {
     const webSockets = new WebSockets();
@@ -22,19 +22,34 @@ describe("<ResetWiFiSettings/>", () => {
     let getAllByText;
 
     beforeEach(() => {
-        ({ getAllByText } = render(<ResetWiFiSettings ws={webSockets} endpoint={endpoint} />));
+        ({ getAllByText } = render(
+            <ResetWiFiSettings ws={webSockets} endpoint={endpoint} />
+        ));
     });
 
     it("should display alert on open ports - success", async () => {
         fireEvent.click(getAllByText("Reset Wi-Fi Settings")[1]);
-        expect(mockAxios.post).toBeCalledWith(endpoint, undefined, expect.anything());
+        expect(mockAxios.post).toBeCalledWith(
+            endpoint,
+            undefined,
+            expect.anything()
+        );
         mockAxios.mockResponse({ data: { foo: "bar" } });
-        await wait(() => expect(mockSetAlert).toBeCalledWith("Wi-Fi settings are set to defaults.", ALERT_TYPES.SUCCESS));
+        await wait(() =>
+            expect(mockSetAlert).toBeCalledWith(
+                "Wi-Fi settings are set to defaults.",
+                ALERT_TYPES.SUCCESS
+            )
+        );
     });
 
     it("should display alert on open ports - failure", async () => {
         fireEvent.click(getAllByText("Reset Wi-Fi Settings")[1]);
         mockJSONError();
-        await wait(() => expect(mockSetAlert).toBeCalledWith("An error occurred during resetting Wi-Fi settings."));
+        await wait(() =>
+            expect(mockSetAlert).toBeCalledWith(
+                "An error occurred during resetting Wi-Fi settings."
+            )
+        );
     });
 });

src/common/WiFiSettings/__tests__/WiFiSettings.test.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.
@@ -13,8 +13,13 @@ import { fireEvent, render, wait } from "customTestRender";
 import { WebSockets } from "webSockets/WebSockets";
 import { mockJSONError } from "testUtils/network";
 
-import { wifiSettingsFixture, oneDevice, twoDevices, threeDevices } from "./__fixtures__/wifiSettings";
-import { WiFiSettings, validator } from "../WiFiSettings";
+import {
+    wifiSettingsFixture,
+    oneDevice,
+    twoDevices,
+    threeDevices,
+} from "./__fixtures__/wifiSettings";
+import { WiFiSettings, validator, byteCount } from "../WiFiSettings";
 
 describe("<WiFiSettings/>", () => {
     let firstRender;
@@ -26,7 +31,13 @@ describe("<WiFiSettings/>", () => {
 
     beforeEach(async () => {
         const webSockets = new WebSockets();
-        const renderRes = render(<WiFiSettings ws={webSockets} endpoint={endpoint} resetEndpoint="foo" />);
+        const renderRes = render(
+            <WiFiSettings
+                ws={webSockets}
+                endpoint={endpoint}
+                resetEndpoint="foo"
+            />
+        );
         asFragment = renderRes.asFragment;
         getAllByText = renderRes.getAllByText;
         getAllByLabelText = renderRes.getAllByLabelText;
@@ -38,7 +49,14 @@ describe("<WiFiSettings/>", () => {
 
     it("should handle error", async () => {
         const webSockets = new WebSockets();
-        const { getByText } = render(<WiFiSettings ws={webSockets} ws={webSockets} endpoint={endpoint} resetEndpoint="foo" />);
+        const { getByText } = render(
+            <WiFiSettings
+                ws={webSockets}
+                ws={webSockets}
+                endpoint={endpoint}
+                resetEndpoint="foo"
+            />
+        );
         const errorMessage = "An API error occurred.";
         mockJSONError(errorMessage);
         await wait(() => {
@@ -51,21 +69,21 @@ describe("<WiFiSettings/>", () => {
     });
 
     it("Snapshot one module enabled.", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
+        fireEvent.click(getByText("Wi-Fi 1"));
         expect(diffSnapshot(firstRender, asFragment())).toMatchSnapshot();
     });
 
     it("Snapshot 2.4 GHz", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
+        fireEvent.click(getByText("Wi-Fi 1"));
         const enabledRender = asFragment();
         fireEvent.click(getAllByText("2.4")[0]);
         expect(diffSnapshot(enabledRender, asFragment())).toMatchSnapshot();
     });
 
     it("Snapshot guest network.", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
+        fireEvent.click(getByText("Wi-Fi 1"));
         const enabledRender = asFragment();
-        fireEvent.click(getAllByText("Enable Guest Wifi")[0]);
+        fireEvent.click(getAllByText("Enable Guest Wi-Fi")[0]);
         expect(diffSnapshot(enabledRender, asFragment())).toMatchSnapshot();
     });
 
@@ -78,11 +96,15 @@ describe("<WiFiSettings/>", () => {
                 { enabled: false, id: 1 },
             ],
         };
-        expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            endpoint,
+            data,
+            expect.anything()
+        );
     });
 
     it("Post form: one module enabled.", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
+        fireEvent.click(getByText("Wi-Fi 1"));
 
         fireEvent.click(getByText("Save"));
         expect(mockAxios.post).toBeCalled();
@@ -94,19 +116,24 @@ describe("<WiFiSettings/>", () => {
                     enabled: true,
                     guest_wifi: { enabled: false },
                     hidden: false,
-                    htmode: "HT40",
+                    htmode: "HT80",
                     hwmode: "11a",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],
         };
-        expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            endpoint,
+            data,
+            expect.anything()
+        );
     });
 
     it("Post form: 2.4 GHz", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
+        fireEvent.click(getByText("Wi-Fi 1"));
         fireEvent.click(getAllByText("2.4")[0]);
 
         fireEvent.click(getByText("Save"));
@@ -119,21 +146,28 @@ describe("<WiFiSettings/>", () => {
                     enabled: true,
                     guest_wifi: { enabled: false },
                     hidden: false,
-                    htmode: "HT40",
+                    htmode: "HT20",
                     hwmode: "11g",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],
         };
-        expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            endpoint,
+            data,
+            expect.anything()
+        );
     });
 
     it("Post form: guest network.", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
-        fireEvent.click(getAllByText("Enable Guest Wifi")[0]);
-        fireEvent.change(getAllByLabelText("Password")[1], { target: { value: "test_password" } });
+        fireEvent.click(getByText("Wi-Fi 1"));
+        fireEvent.click(getAllByText("Enable Guest Wi-Fi")[0]);
+        fireEvent.change(getAllByLabelText("Password")[1], {
+            target: { value: "test_password" },
+        });
 
         fireEvent.click(getByText("Save"));
         expect(mockAxios.post).toBeCalled();
@@ -149,28 +183,41 @@ describe("<WiFiSettings/>", () => {
                         password: "test_password",
                     },
                     hidden: false,
-                    htmode: "HT40",
+                    htmode: "HT80",
                     hwmode: "11a",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],
         };
-        expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            endpoint,
+            data,
+            expect.anything()
+        );
     });
 
-    it("Validator function using regex for one device", () => {    
-        expect(validator(oneDevice)).toEqual(null);      
+    it("Validator function using regex for one device", () => {
+        expect(validator(oneDevice)).toEqual(null);
     });
 
     it("Validator function using regex for two devices", () => {
-        const twoDevicesFormErrors = [{SSID: "SSID can't be empty"}, {}];    
+        const twoDevicesFormErrors = [{ SSID: "SSID can't be empty" }, {}];
         expect(validator(twoDevices)).toEqual(twoDevicesFormErrors);
     });
 
     it("Validator function using regex for three devices", () => {
-        const threeDevicesFormErrors = [{}, {}, {password: "Password must contain at least 8 symbols"}];    
+        const threeDevicesFormErrors = [
+            {},
+            {},
+            { password: "Password must contain at least 8 symbols" },
+        ];
         expect(validator(threeDevices)).toEqual(threeDevicesFormErrors);
     });
+
+    it("ByteCount function", () => {
+        expect(byteCount("abc")).toEqual(3);
+    });
 });

src/common/WiFiSettings/__tests__/__fixtures__/wifiSettings.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.
@@ -226,10 +226,11 @@ export function wifiSettingsFixture() {
                     password: "",
                 },
                 hidden: false,
-                htmode: "HT40",
+                htmode: "HT80",
                 hwmode: "11a",
                 id: 0,
                 password: "TestPass",
+                encryption: "WPA3",
             },
             {
                 SSID: "Turris",
@@ -292,11 +293,7 @@ export function wifiSettingsFixture() {
                                 radar: false,
                             },
                         ],
-                        available_htmodes: [
-                            "NOHT",
-                            "HT20",
-                            "HT40",
-                        ],
+                        available_htmodes: ["NOHT", "HT20", "HT40"],
                         hwmode: "11g",
                     },
                 ],
@@ -312,6 +309,7 @@ export function wifiSettingsFixture() {
                 hwmode: "11g",
                 id: 1,
                 password: "TestPass",
+                encryption: "WPA3",
             },
         ],
     };
@@ -327,9 +325,10 @@ const oneDevice = {
             htmode: "HT40",
             hwmode: "11a",
             id: 0,
-            password: "TestPass"
-        }
-    ]
+            password: "TestPass",
+            encryption: "WPA3",
+        },
+    ],
 };
 
 const twoDevices = {
@@ -343,7 +342,8 @@ const twoDevices = {
             htmode: "HT40",
             hwmode: "11a",
             id: 0,
-            password: "TestPass"
+            password: "TestPass",
+            encryption: "WPA3",
         },
         {
             SSID: "Turris2",
@@ -353,10 +353,11 @@ const twoDevices = {
             hidden: false,
             htmode: "HT40",
             hwmode: "11a",
-            id: 0,
-            password: "TestPass"
-        }
-    ]
+            id: 1,
+            password: "TestPass",
+            encryption: "WPA3",
+        },
+    ],
 };
 
 const threeDevices = {
@@ -370,7 +371,8 @@ const threeDevices = {
             htmode: "HT40",
             hwmode: "11a",
             id: 0,
-            password: "TestPass"
+            password: "TestPass",
+            encryption: "WPA3",
         },
         {
             SSID: "Turris2",
@@ -380,8 +382,9 @@ const threeDevices = {
             hidden: false,
             htmode: "HT40",
             hwmode: "11a",
-            id: 0,
-            password: "TestPass"
+            id: 1,
+            password: "TestPass",
+            encryption: "WPA3",
         },
         {
             SSID: "Turris3",
@@ -391,10 +394,11 @@ const threeDevices = {
             hidden: false,
             htmode: "HT40",
             hwmode: "11a",
-            id: 0,
-            password: ""
-        }
-    ]
+            id: 2,
+            password: "",
+            encryption: "WPA3",
+        },
+    ],
 };
 
-export {oneDevice, twoDevices, threeDevices};
+export { oneDevice, twoDevices, threeDevices };

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

@@ -5,7 +5,7 @@ exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
 - First value
 + Second value
 
-@@ -246,207 +246,95 @@
+@@ -250,207 +250,95 @@
               value=\\"0\\"
             >
               auto
@@ -251,17 +251,14 @@ exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
 exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
 <DocumentFragment>
   <div
-    class="col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3"
+    class="card p-4 col-sm-12 col-lg-12 p-0 mb-4"
   >
     <form>
-      <h3>
-        Wi-Fi 1
-      </h3>
       <div
-        class="form-group"
+        class="form-group switch"
       >
         <div
-          class="custom-control custom-checkbox "
+          class="custom-control custom-switch custom-control-inline switch-heading"
         >
           <input
             class="custom-control-input"
@@ -272,18 +269,18 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
             class="custom-control-label"
             for="1"
           >
-            Enable
+            <h2>
+              Wi-Fi 1
+            </h2>
           </label>
         </div>
       </div>
-      <h3>
-        Wi-Fi 2
-      </h3>
+      <hr />
       <div
-        class="form-group"
+        class="form-group switch"
       >
         <div
-          class="custom-control custom-checkbox "
+          class="custom-control custom-switch custom-control-inline switch-heading"
         >
           <input
             class="custom-control-input"
@@ -294,7 +291,9 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
             class="custom-control-label"
             for="2"
           >
-            Enable
+            <h2>
+              Wi-Fi 2
+            </h2>
           </label>
         </div>
       </div>
@@ -302,32 +301,33 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
         class="text-right"
       >
         <button
-          class="btn btn-primary  col-sm-12 col-lg-3"
+          class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
           type="submit"
         >
-            Save
+          Save
         </button>
       </div>
     </form>
   </div>
-  <h4>
-    Reset Wi-Fi Settings
-  </h4>
-  <p>
-    
-If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the
-current Wi-Fi configuration and restore the default values.
-        
-  </p>
   <div
-    class="col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3 text-right"
+    class="card p-4 col-sm-12 col-lg-12 p-0 mb-4"
   >
-    <button
-      class="btn btn-warning col-sm-12 col-lg-3"
-      type="button"
+    <h2>
+      Reset Wi-Fi Settings
+    </h2>
+    <p>
+      If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values.
+    </p>
+    <div
+      class="text-right"
     >
+      <button
+        class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
+        type="button"
+      >
         Reset Wi-Fi Settings
-    </button>
+      </button>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -337,17 +337,17 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 - First value
 + Second value
 
-@@ -475,10 +475,89 @@
+@@ -513,10 +513,94 @@
+          Parameters of the guest network can be set in the Guest network tab.
           
-              </small>
-            </label>
+            </small>
           </div>
         </div>
 +       <div
 +         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\\"
 +           />
@@ -376,12 +376,17 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +             </button>
 +           </div>
 +         </div>
++         <small
++           class=\\"form-text text-muted\\"
++         >
++           SSID which contains non-standard characters could cause problems on some devices.
++         </small>
 +       </div>
 +       <div
 +         class=\\"form-group\\"
 +       >
 +         <label
-+           for=\\"21\\"
++           for=\\"23\\"
 +         >
 +           Password
 +         </label>
@@ -391,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=\\"\\"
@@ -422,21 +427,21 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +     
 +         </small>
 +       </div>
-        <h3>
-          Wi-Fi 2
-        </h3>
+        <hr />
         <div
-          class=\\"form-group\\"
-@@ -502,10 +581,11 @@
+          class=\\"form-group switch\\"
+        >
+          <div
+@@ -540,10 +624,11 @@
         <div
           class=\\"text-right\\"
         >
           <button
-            class=\\"btn btn-primary  col-sm-12 col-lg-3\\"
+            class=\\"btn btn-primary  col-sm-12 col-md-3 col-lg-2\\"
 +           disabled=\\"\\"
             type=\\"submit\\"
           >
-              Save
+            Save
           </button>
         </div>"
 `;
@@ -446,9 +451,9 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 - First value
 + Second value
 
-@@ -23,10 +23,462 @@
-            >
-              Enable
+@@ -22,10 +22,501 @@
+                Wi-Fi 1
+              </h2>
             </label>
           </div>
         </div>
@@ -486,6 +491,11 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             </button>
 +           </div>
 +         </div>
++         <small
++           class=\\"form-text text-muted\\"
++         >
++           SSID which contains non-standard characters could cause problems on some devices.
++         </small>
 +       </div>
 +       <div
 +         class=\\"form-group\\"
@@ -879,34 +889,68 @@ 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-checkbox \\"
++           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 Wifi
-+             <small
-+               class=\\"form-text text-muted\\"
-+             >
-+               
++             Enable Guest Wi-Fi
++           </label>
++           <small
++             class=\\"form-text text-muted mt-0 mb-3\\"
++           >
++             
 +         Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to
 +         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.
 +         
-+             </small>
-+           </label>
++           </small>
 +         </div>
 +       </div>
-        <h3>
-          Wi-Fi 2
-        </h3>
+        <hr />
         <div
-          class=\\"form-group\\""
+          class=\\"form-group switch\\"
+        >
+          <div"
 `;

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,11 +18,21 @@ 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.`
+    ),
     password: _(`
         WPA2 pre-shared key, that is required to connect to the network.
     `),
-    hidden: _("If set, network is not visible when scanning for available networks."),
+    hidden: _(
+        "If set, network is not visible when scanning for available networks."
+    ),
     hwmode: _(`
         The 2.4 GHz band is more widely supported by clients, but tends to have more interference. The 5 GHz band is a
         newer standard and may not be supported by all your devices. It usually has less interference, but the signal
@@ -37,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."
+    ),
 };

src/common/__tests__/RebootButton.test.js

@@ -8,7 +8,11 @@
 import React from "react";
 
 import {
-    fireEvent, getByText, queryByText, render, wait,
+    fireEvent,
+    getByText,
+    queryByText,
+    render,
+    wait,
 } from "customTestRender";
 import mockAxios from "jest-mock-axios";
 import { mockJSONError } from "testUtils/network";
@@ -19,38 +23,41 @@ import { RebootButton } from "../RebootButton";
 describe("<RebootButton/>", () => {
     let componentContainer;
     beforeEach(() => {
-        const { container } = render(<>
-            <div id="modal-container" />
-            <RebootButton />
-        </>);
+        const { container } = render(
+            <>
+                <div id="modal-container" />
+                <RebootButton />
+            </>
+        );
         componentContainer = container;
     });
 
     it("Render.", () => {
-        expect(componentContainer)
-            .toMatchSnapshot();
+        expect(componentContainer).toMatchSnapshot();
     });
 
     it("Render modal.", () => {
-        expect(queryByText(componentContainer, "Confirm reboot"))
-            .toBeNull();
+        expect(queryByText(componentContainer, "Confirm reboot")).toBeNull();
         fireEvent.click(getByText(componentContainer, "Reboot"));
-        expect(componentContainer)
-            .toMatchSnapshot();
+        expect(componentContainer).toMatchSnapshot();
     });
 
     it("Confirm reboot.", () => {
         fireEvent.click(getByText(componentContainer, "Reboot"));
         fireEvent.click(getByText(componentContainer, "Confirm reboot"));
-        expect(mockAxios.post)
-            .toHaveBeenCalledWith("/reforis/api/reboot", undefined, expect.anything());
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            "/reforis/api/reboot",
+            undefined,
+            expect.anything()
+        );
     });
 
     it("Hold error.", async () => {
         fireEvent.click(getByText(componentContainer, "Reboot"));
         fireEvent.click(getByText(componentContainer, "Confirm reboot"));
         mockJSONError();
-        await wait(() => expect(mockSetAlert)
-            .toBeCalledWith("Reboot request failed."));
+        await wait(() =>
+            expect(mockSetAlert).toBeCalledWith("Reboot request failed.")
+        );
     });
 });

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

@@ -22,7 +22,7 @@ exports[`<RebootButton/> Render modal. 1`] = `
             <h5
               class="modal-title"
             >
-              Reboot confirmation
+              Warning!
             </h5>
             <button
               class="close"
@@ -49,16 +49,12 @@ exports[`<RebootButton/> Render modal. 1`] = `
               class="btn btn-primary "
               type="button"
             >
-               
-               
               Cancel
             </button>
             <button
               class="btn btn-danger"
               type="button"
             >
-               
-               
               Confirm reboot
             </button>
           </div>
@@ -70,8 +66,6 @@ exports[`<RebootButton/> Render modal. 1`] = `
     class="btn btn-danger"
     type="button"
   >
-     
-     
     Reboot
   </button>
 </div>
@@ -86,8 +80,6 @@ exports[`<RebootButton/> Render. 1`] = `
     class="btn btn-danger"
     type="button"
   >
-     
-     
     Reboot
   </button>
 </div>

src/form/__tests__/SubmitButton.test.js

@@ -13,17 +13,14 @@ import { STATES, SubmitButton } from "../components/SubmitButton";
 describe("<SubmitButton/>", () => {
     it("Render ready", () => {
         const { container } = render(<SubmitButton state={STATES.READY} />);
-        expect(container)
-            .toMatchSnapshot();
+        expect(container).toMatchSnapshot();
     });
     it("Render saving", () => {
         const { container } = render(<SubmitButton state={STATES.SAVING} />);
-        expect(container)
-            .toMatchSnapshot();
+        expect(container).toMatchSnapshot();
     });
     it("Render load", () => {
         const { container } = render(<SubmitButton state={STATES.LOAD} />);
-        expect(container)
-            .toMatchSnapshot();
+        expect(container).toMatchSnapshot();
     });
 });

src/form/__tests__/__snapshots__/SubmitButton.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<SubmitButton/> Render load 1`] = `
 <div>
   <button
-    class="btn btn-primary  col-sm-12 col-lg-3"
+    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
     disabled=""
     type="submit"
   >
@@ -13,8 +13,6 @@ exports[`<SubmitButton/> Render load 1`] = `
       role="status"
     />
      
-     
-     
     Load settings
   </button>
 </div>
@@ -23,11 +21,9 @@ exports[`<SubmitButton/> Render load 1`] = `
 exports[`<SubmitButton/> Render ready 1`] = `
 <div>
   <button
-    class="btn btn-primary  col-sm-12 col-lg-3"
+    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
     type="submit"
   >
-     
-     
     Save
   </button>
 </div>
@@ -36,7 +32,7 @@ exports[`<SubmitButton/> Render ready 1`] = `
 exports[`<SubmitButton/> Render saving 1`] = `
 <div>
   <button
-    class="btn btn-primary  col-sm-12 col-lg-3"
+    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
     disabled=""
     type="submit"
   >
@@ -46,8 +42,6 @@ exports[`<SubmitButton/> Render saving 1`] = `
       role="status"
     />
      
-     
-     
     Updating
   </button>
 </div>

src/form/__tests__/hooks.test.js

@@ -7,9 +7,7 @@
 
 import React from "react";
 
-import {
-    act, fireEvent, render, waitForElement,
-} from "customTestRender";
+import { act, fireEvent, render, waitForElement } from "customTestRender";
 import mockAxios from "jest-mock-axios";
 import { WebSockets } from "webSockets/WebSockets";
 import { ForisForm } from "../components/ForisForm";
@@ -38,8 +36,12 @@ describe("useForm hook.", () => {
 
     beforeEach(async () => {
         mockPrepData = jest.fn(() => ({ field: "preparedData" }));
-        mockPrepDataToSubmit = jest.fn(() => ({ field: "preparedDataToSubmit" }));
-        mockValidator = jest.fn((data) => (data.field === "invalidValue" ? { field: "Error" } : {}));
+        mockPrepDataToSubmit = jest.fn(() => ({
+            field: "preparedDataToSubmit",
+        }));
+        mockValidator = jest.fn((data) =>
+            data.field === "invalidValue" ? { field: "Error" } : {}
+        );
         const { getByTestId, container } = render(
             <ForisForm
                 ws={new WebSockets()}
@@ -53,7 +55,7 @@ describe("useForm hook.", () => {
                 validator={mockValidator}
             >
                 <Child />
-            </ForisForm>,
+            </ForisForm>
         );
         mockAxios.mockResponse({ field: "fetchedData" });
 
@@ -67,16 +69,22 @@ describe("useForm hook.", () => {
         expect(Child.mock.calls[0][0].formErrors).toMatchObject({});
 
         act(() => {
-            fireEvent.change(input, { target: { value: "invalidValue", type: "text" } });
+            fireEvent.change(input, {
+                target: { value: "invalidValue", type: "text" },
+            });
         });
 
         expect(Child).toHaveBeenCalledTimes(2);
         expect(mockValidator).toHaveBeenCalledTimes(2);
-        expect(Child.mock.calls[1][0].formErrors).toMatchObject({ field: "Error" });
+        expect(Child.mock.calls[1][0].formErrors).toMatchObject({
+            field: "Error",
+        });
     });
 
     it("Update text value.", () => {
-        fireEvent.change(input, { target: { value: "newValue", type: "text" } });
+        fireEvent.change(input, {
+            target: { value: "newValue", type: "text" },
+        });
         expect(input.value).toBe("newValue");
     });
 
@@ -86,14 +94,21 @@ describe("useForm hook.", () => {
     });
 
     it("Update checkbox value.", () => {
-        fireEvent.change(input, { target: { checked: true, type: "checkbox" } });
+        fireEvent.change(input, {
+            target: { checked: true, type: "checkbox" },
+        });
         expect(input.checked).toBe(true);
     });
 
     it("Fetch data.", () => {
-        expect(mockAxios.get).toHaveBeenCalledWith("testEndpoint", expect.anything());
+        expect(mockAxios.get).toHaveBeenCalledWith(
+            "testEndpoint",
+            expect.anything()
+        );
         expect(mockPrepData).toHaveBeenCalledTimes(1);
-        expect(Child.mock.calls[0][0].formData).toMatchObject({ field: "preparedData" });
+        expect(Child.mock.calls[0][0].formData).toMatchObject({
+            field: "preparedData",
+        });
     });
 
     it("Submit.", () => {
@@ -107,7 +122,7 @@ describe("useForm hook.", () => {
         expect(mockAxios.post).toHaveBeenCalledWith(
             "testEndpoint",
             { field: "preparedDataToSubmit" },
-            expect.anything(),
+            expect.anything()
         );
     });
 });

src/form/__tests__/validation.test.js

@@ -16,120 +16,75 @@ import {
 
 describe("Validation functions", () => {
     it("validateIPv4Address valid", () => {
-        expect(validateIPv4Address("192.168.1.1"))
-            .toBe(undefined);
-        expect(validateIPv4Address("1.1.1.1"))
-            .toBe(undefined);
-        expect(validateIPv4Address("0.0.0.0"))
-            .toBe(undefined);
+        expect(validateIPv4Address("192.168.1.1")).toBe(undefined);
+        expect(validateIPv4Address("1.1.1.1")).toBe(undefined);
+        expect(validateIPv4Address("0.0.0.0")).toBe(undefined);
     });
     it("validateIPv4Address invalid", () => {
-        expect(validateIPv4Address("invalid"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv4Address("192.256.1.1"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv4Address("192.168.256.1"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv4Address("192.168.1.256"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv4Address("192.168.1.256"))
-            .not
-            .toBe(undefined);
+        expect(validateIPv4Address("invalid")).not.toBe(undefined);
+        expect(validateIPv4Address("192.256.1.1")).not.toBe(undefined);
+        expect(validateIPv4Address("192.168.256.1")).not.toBe(undefined);
+        expect(validateIPv4Address("192.168.1.256")).not.toBe(undefined);
+        expect(validateIPv4Address("192.168.1.256")).not.toBe(undefined);
     });
 
     it("validateIPv6Address valid", () => {
-        expect(validateIPv6Address("2001:0db8:85a3:0000:0000:8a2e:0370:7334"))
-            .toBe(undefined);
-        expect(validateIPv6Address("0:0:0:0:0:0:0:1"))
-            .toBe(undefined);
-        expect(validateIPv6Address("::1"))
-            .toBe(undefined);
-        expect(validateIPv6Address("::"))
-            .toBe(undefined);
+        expect(
+            validateIPv6Address("2001:0db8:85a3:0000:0000:8a2e:0370:7334")
+        ).toBe(undefined);
+        expect(validateIPv6Address("0:0:0:0:0:0:0:1")).toBe(undefined);
+        expect(validateIPv6Address("::1")).toBe(undefined);
+        expect(validateIPv6Address("::")).toBe(undefined);
     });
     it("validateIPv6Address invalid", () => {
-        expect(validateIPv6Address("invalid"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv6Address("1.1.1.1"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv6Address("1200::AB00:1234::2552:7777:1313"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv6Address("1200:0000:AB00:1234:O000:2552:7777:1313"))
-            .not
-            .toBe(undefined);
+        expect(validateIPv6Address("invalid")).not.toBe(undefined);
+        expect(validateIPv6Address("1.1.1.1")).not.toBe(undefined);
+        expect(validateIPv6Address("1200::AB00:1234::2552:7777:1313")).not.toBe(
+            undefined
+        );
+        expect(
+            validateIPv6Address("1200:0000:AB00:1234:O000:2552:7777:1313")
+        ).not.toBe(undefined);
     });
 
     it("validateIPv6Prefix valid", () => {
-        expect(validateIPv6Prefix("2002:0000::/16"))
-            .toBe(undefined);
-        expect(validateIPv6Prefix("0::/0"))
-            .toBe(undefined);
+        expect(validateIPv6Prefix("2002:0000::/16")).toBe(undefined);
+        expect(validateIPv6Prefix("0::/0")).toBe(undefined);
     });
     it("validateIPv6Prefix invalid", () => {
-        expect(validateIPv6Prefix("2001:0db8:85a3:0000:0000:8a2e:0370:7334"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv6Prefix("::1"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv6Prefix("2002:0000::/999"))
-            .not
-            .toBe(undefined);
+        expect(
+            validateIPv6Prefix("2001:0db8:85a3:0000:0000:8a2e:0370:7334")
+        ).not.toBe(undefined);
+        expect(validateIPv6Prefix("::1")).not.toBe(undefined);
+        expect(validateIPv6Prefix("2002:0000::/999")).not.toBe(undefined);
     });
 
     it("validateDomain valid", () => {
-        expect(validateDomain("example.com"))
-            .toBe(undefined);
-        expect(validateDomain("one.two.three"))
-            .toBe(undefined);
+        expect(validateDomain("example.com")).toBe(undefined);
+        expect(validateDomain("one.two.three")).toBe(undefined);
     });
     it("validateDomain invalid", () => {
-        expect(validateDomain("test/"))
-            .not
-            .toBe(undefined);
-        expect(validateDomain("."))
-            .not
-            .toBe(undefined);
+        expect(validateDomain("test/")).not.toBe(undefined);
+        expect(validateDomain(".")).not.toBe(undefined);
     });
 
     it("validateDUID valid", () => {
-        expect(validateDUID("abcdefAB"))
-            .toBe(undefined);
-        expect(validateDUID("ABCDEF12"))
-            .toBe(undefined);
-        expect(validateDUID("ABCDEF12AB"))
-            .toBe(undefined);
+        expect(validateDUID("abcdefAB")).toBe(undefined);
+        expect(validateDUID("ABCDEF12")).toBe(undefined);
+        expect(validateDUID("ABCDEF12AB")).toBe(undefined);
     });
     it("validateDUID invalid", () => {
-        expect(validateDUID("gggggggg"))
-            .not
-            .toBe(undefined);
-        expect(validateDUID("abcdefABa"))
-            .not
-            .toBe(undefined);
+        expect(validateDUID("gggggggg")).not.toBe(undefined);
+        expect(validateDUID("abcdefABa")).not.toBe(undefined);
     });
 
     it("validateMAC valid", () => {
-        expect(validateMAC("00:D0:56:F2:B5:12"))
-            .toBe(undefined);
-        expect(validateMAC("00:26:DD:14:C4:EE"))
-            .toBe(undefined);
-        expect(validateMAC("06:00:00:00:00:00"))
-            .toBe(undefined);
+        expect(validateMAC("00:D0:56:F2:B5:12")).toBe(undefined);
+        expect(validateMAC("00:26:DD:14:C4:EE")).toBe(undefined);
+        expect(validateMAC("06:00:00:00:00:00")).toBe(undefined);
     });
     it("validateMAC invalid", () => {
-        expect(validateMAC("00:00:00:00:00:0G"))
-            .not
-            .toBe(undefined);
-        expect(validateMAC("06:00:00:00:00:00:00"))
-            .not
-            .toBe(undefined);
+        expect(validateMAC("00:00:00:00:00:0G")).not.toBe(undefined);
+        expect(validateMAC("06:00:00:00:00:00:00")).not.toBe(undefined);
     });
 });

src/form/components/ForisForm.js

@@ -52,19 +52,25 @@ ForisForm.propTypes = {
     onSubmitOverridden: PropTypes.func,
     /** Reference to actual form element (useful for programmatically submitting it).
      * Pass the output of useRef hook to this prop.
-    */
+     */
     formReference: PropTypes.object,
     /** reForis form components. */
     children: PropTypes.node.isRequired,
 
     // eslint-disable-next-line react/no-unused-prop-types
     customWSProp(props) {
-        const wsModuleIsSpecified = !!(props.forisConfig && props.forisConfig.wsModule);
+        const wsModuleIsSpecified = !!(
+            props.forisConfig && props.forisConfig.wsModule
+        );
         if (props.ws && !wsModuleIsSpecified) {
-            return new Error("forisConfig.wsModule should be specified when ws object is passed.");
+            return new Error(
+                "forisConfig.wsModule should be specified when ws object is passed."
+            );
         }
         if (!props.ws && wsModuleIsSpecified) {
-            return new Error("forisConfig.wsModule is specified without passing ws object.");
+            return new Error(
+                "forisConfig.wsModule is specified without passing ws object."
+            );
         }
     },
 };
@@ -95,7 +101,10 @@ export function ForisForm({
     formReference,
     children,
 }) {
-    const [formState, onFormChangeHandler, resetFormData] = useForm(validator, prepData);
+    const [formState, onFormChangeHandler, resetFormData] = useForm(
+        validator,
+        prepData
+    );
     const [setAlert, dismissAlert] = useAlert();
 
     const [forisModuleState] = useForisModule(ws, forisConfig);
@@ -141,29 +150,39 @@ export function ForisForm({
         return SUBMIT_BUTTON_STATES.READY;
     }
 
-    const formIsDisabled = (disabled
-        || forisModuleState.state === API_STATE.SENDING
-        || postState.state === API_STATE.SENDING);
+    const formIsDisabled =
+        disabled ||
+        forisModuleState.state === API_STATE.SENDING ||
+        postState.state === API_STATE.SENDING;
     const submitButtonIsDisabled = disabled || !!formState.errors;
 
-    const childrenWithFormProps = React.Children.map(
-        children,
-        (child) => React.cloneElement(child, {
+    const childrenWithFormProps = React.Children.map(children, (child) =>
+        React.cloneElement(child, {
             initialData: formState.initialData,
             formData: formState.data,
             formErrors: formState.errors,
             setFormValue: onFormChangeHandler,
             disabled: formIsDisabled,
-        }),
+        })
     );
 
     const onSubmit = onSubmitOverridden
-        ? onSubmitOverridden(formState.data, onFormChangeHandler, onSubmitHandler)
+        ? onSubmitOverridden(
+              formState.data,
+              onFormChangeHandler,
+              onSubmitHandler
+          )
         : onSubmitHandler;
 
     function getMessageOnLeavingPage() {
-        if (JSON.stringify(formState.data) === JSON.stringify(formState.initialData)) return true;
-        return _("Changes you made may not be saved. Are you sure you want to leave?");
+        if (
+            JSON.stringify(formState.data) ===
+            JSON.stringify(formState.initialData)
+        )
+            return true;
+        return _(
+            "Changes you made may not be saved. Are you sure you want to leave?"
+        );
     }
 
     return (

src/form/components/ForisForm.md

@@ -1,8 +1,11 @@
-`<ForisForm/>` is Higher-Order Component which encapsulates entire form logic and provides with children required props.
-This component structure provides comfort API and allows to create typical Foris module forms easily.
+`<ForisForm/>` is Higher-Order Component which encapsulates entire form logic
+and provides with children required props. This component structure provides
+comfort API and allows to create typical Foris module forms easily.
 
 ## Example of usage of `<ForisForm/>`
+
 You can pass more forms as children.
+
 ```js
 <ForisForm
     ws={ws}
@@ -24,7 +27,10 @@ You can pass more forms as children.
 
 ```js
 export default function MACForm({
-    formData, formErrors, setFormValue, ...props
+    formData,
+    formErrors,
+    setFormValue,
+    ...props
 }) {
     const macSettings = formData.mac_settings;
     const errors = (formErrors || {}).mac_settings || {};
@@ -35,38 +41,33 @@ export default function MACForm({
                 label={_("Custom MAC address")}
                 checked={macSettings.custom_mac_enabled}
                 helpText={HELP_TEXTS.custom_mac_enabled}
-
-                onChange={setFormValue(
-                    (value) => ({ mac_settings: { custom_mac_enabled: { $set: value } } }),
-                )}
-
+                onChange={setFormValue((value) => ({
+                    mac_settings: { custom_mac_enabled: { $set: value } },
+                }))}
                 {...props}
             />
-            {macSettings.custom_mac_enabled
-                ? (
-                    <TextInput
-                        label={_("MAC address")}
-                        value={macSettings.custom_mac || ""}
-                        helpText={HELP_TEXTS.custom_mac}
-                        error={errors.custom_mac}
-                        required
-
-                        onChange={setFormValue(
-                            (value) => ({ mac_settings: { custom_mac: { $set: value } } }),
-                        )}
-
-                        {...props}
-                    />
-                )
-                : null}
+            {macSettings.custom_mac_enabled ? (
+                <TextInput
+                    label={_("MAC address")}
+                    value={macSettings.custom_mac || ""}
+                    helpText={HELP_TEXTS.custom_mac}
+                    error={errors.custom_mac}
+                    required
+                    onChange={setFormValue((value) => ({
+                        mac_settings: { custom_mac: { $set: value } },
+                    }))}
+                    {...props}
+                />
+            ) : null}
         </>
     );
 }
 ```
+
 The <ForisForm/> passes subsequent `props` to the child components.
 
 | Prop           | Type   | Description                                                                |
-|----------------|--------|----------------------------------------------------------------------------|
+| -------------- | ------ | -------------------------------------------------------------------------- |
 | `formData`     | object | Data returned from API.                                                    |
 | `formErrors`   | object | Errors returned after validation via validator.                            |
 | `setFormValue` | func   | Function for data update. It takes update rule as arg (see example above). |

src/form/components/SubmitButton.js

@@ -18,8 +18,7 @@ export const STATES = {
 
 SubmitButton.propTypes = {
     disabled: PropTypes.bool,
-    state: PropTypes.oneOf(Object.keys(STATES)
-        .map((key) => STATES[key])),
+    state: PropTypes.oneOf(Object.keys(STATES).map((key) => STATES[key])),
 };
 
 export function SubmitButton({ disabled, state, ...props }) {
@@ -28,14 +27,14 @@ export function SubmitButton({ disabled, state, ...props }) {
 
     let labelSubmitButton;
     switch (state) {
-    case STATES.SAVING:
-        labelSubmitButton = _("Updating");
-        break;
-    case STATES.LOAD:
-        labelSubmitButton = _("Load settings");
-        break;
-    default:
-        labelSubmitButton = _("Save");
+        case STATES.SAVING:
+            labelSubmitButton = _("Updating");
+            break;
+        case STATES.LOAD:
+            labelSubmitButton = _("Load settings");
+            break;
+        default:
+            labelSubmitButton = _("Save");
     }
 
     return (
@@ -44,7 +43,6 @@ export function SubmitButton({ disabled, state, ...props }) {
             loading={loadingSubmitButton}
             disabled={disableSubmitButton}
             forisFormSize
-
             {...props}
         >
             {labelSubmitButton}

src/form/hooks.js

@@ -23,57 +23,61 @@ export function useForm(validator, dataPreprocessor) {
         errors: {},
     });
 
-    const onFormReload = useCallback((data) => {
-        dispatch({
-            type: FORM_ACTIONS.resetData,
-            data,
-            dataPreprocessor,
-            validator,
-        });
-    }, [dataPreprocessor, validator]);
+    const onFormReload = useCallback(
+        (data) => {
+            dispatch({
+                type: FORM_ACTIONS.resetData,
+                data,
+                dataPreprocessor,
+                validator,
+            });
+        },
+        [dataPreprocessor, validator]
+    );
 
-    const onFormChangeHandler = useCallback((updateRule) => (event) => {
-        dispatch({
-            type: FORM_ACTIONS.updateValue,
-            value: getChangedValue(event.target),
-            updateRule,
-            validator,
-        });
-    }, [validator]);
+    const onFormChangeHandler = useCallback(
+        (updateRule) => (event) => {
+            dispatch({
+                type: FORM_ACTIONS.updateValue,
+                value: getChangedValue(event.target),
+                updateRule,
+                validator,
+            });
+        },
+        [validator]
+    );
 
-    return [
-        state,
-        onFormChangeHandler,
-        onFormReload,
-    ];
+    return [state, onFormChangeHandler, onFormReload];
 }
 
 function formReducer(state, action) {
     switch (action.type) {
-    case FORM_ACTIONS.updateValue: {
-        const newData = update(state.data, action.updateRule(action.value));
-        const errors = action.validator(newData);
-        return {
-            ...state,
-            data: newData,
-            errors,
-        };
-    }
-    case FORM_ACTIONS.resetData: {
-        if (!action.data) {
-            return { ...state, initialData: state.data };
+        case FORM_ACTIONS.updateValue: {
+            const newData = update(state.data, action.updateRule(action.value));
+            const errors = action.validator(newData);
+            return {
+                ...state,
+                data: newData,
+                errors,
+            };
         }
+        case FORM_ACTIONS.resetData: {
+            if (!action.data) {
+                return { ...state, initialData: state.data };
+            }
 
-        const data = action.dataPreprocessor ? action.dataPreprocessor(action.data) : action.data;
-        return {
-            data,
-            initialData: data,
-            errors: action.data ? action.validator(data) : undefined,
-        };
-    }
-    default: {
-        throw new Error();
-    }
+            const data = action.dataPreprocessor
+                ? action.dataPreprocessor(action.data)
+                : action.data;
+            return {
+                data,
+                initialData: data,
+                errors: action.data ? action.validator(data) : undefined,
+            };
+        }
+        default: {
+            throw new Error();
+        }
     }
 }
 

src/index.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.
@@ -30,26 +30,22 @@ export { PasswordInput } from "./bootstrap/PasswordInput";
 export { Radio, RadioSet } from "./bootstrap/RadioSet";
 export { Select } from "./bootstrap/Select";
 export { TextInput } from "./bootstrap/TextInput";
-export { formFieldsSize } from "./bootstrap/constants";
+export { formFieldsSize, buttonFormFieldsSize } from "./bootstrap/constants";
+export { Switch } from "./bootstrap/Switch";
 
-export {
-    Spinner,
-    SpinnerElement,
-} from "./bootstrap/Spinner";
-export {
-    Modal,
-    ModalBody,
-    ModalFooter,
-    ModalHeader,
-} from "./bootstrap/Modal";
+export { Spinner, SpinnerElement } from "./bootstrap/Spinner";
+export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
 
 // Common
 export { RebootButton } from "./common/RebootButton";
 export { WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
-
+export { ResetWiFiSettings } from "./common/WiFiSettings/ResetWiFiSettings";
 // Form
 export { ForisForm } from "./form/components/ForisForm";
-export { SubmitButton, STATES as SUBMIT_BUTTON_STATES } from "./form/components/SubmitButton";
+export {
+    SubmitButton,
+    STATES as SUBMIT_BUTTON_STATES,
+} from "./form/components/SubmitButton";
 export { useForisModule, useForm } from "./form/hooks";
 
 // WebSockets
@@ -58,13 +54,24 @@ export { WebSockets } from "./webSockets/WebSockets";
 
 // Utils
 export { Portal } from "./utils/Portal";
-export { undefinedIfEmpty, withoutUndefinedKeys, onlySpecifiedKeys } from "./utils/objectHelpers";
 export {
-    withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
+    undefinedIfEmpty,
+    withoutUndefinedKeys,
+    onlySpecifiedKeys,
+} from "./utils/objectHelpers";
+export {
+    withEither,
+    withSpinner,
+    withSending,
+    withSpinnerOnSending,
+    withError,
+    withErrorMessage,
 } from "./utils/conditionalHOCs";
 export { ErrorMessage } from "./utils/ErrorMessage";
 export { useClickOutside } from "./utils/hooks";
 export { toLocaleDateString } from "./utils/datetime";
+export { displayCard } from "./utils/displayCard";
+export { isPluginInstalled } from "./utils/isPluginInstalled";
 
 // Foris URL
 export { ForisURLs, REFORIS_URL_PREFIX } from "./utils/forisUrls";

src/testUtils/alertContextMock.js

@@ -15,7 +15,7 @@ window.AlertContext = React.createContext();
 function AlertContextMock({ children }) {
     return (
         <AlertContext.Provider value={[mockSetAlert, mockDismissAlert]}>
-            { children }
+            {children}
         </AlertContext.Provider>
     );
 }

src/testUtils/customTestRender.js

@@ -26,15 +26,14 @@ function Wrapper({ children }) {
     return (
         <AlertContextMock>
             <StaticRouter>
-                <UIDReset>
-                    {children}
-                </UIDReset>
+                <UIDReset>{children}</UIDReset>
             </StaticRouter>
         </AlertContextMock>
     );
 }
 
-const customTestRender = (ui, options) => render(ui, { wrapper: Wrapper, ...options });
+const customTestRender = (ui, options) =>
+    render(ui, { wrapper: Wrapper, ...options });
 
 // re-export everything
 export * from "@testing-library/react";

src/testUtils/network.js

@@ -8,5 +8,7 @@
 import mockAxios from "jest-mock-axios";
 
 export function mockJSONError(data) {
-    mockAxios.mockError({ response: { data, headers: { "content-type": "application/json" } } });
+    mockAxios.mockError({
+        response: { data, headers: { "content-type": "application/json" } },
+    });
 }

src/utils/ErrorMessage.js

@@ -17,7 +17,5 @@ ErrorMessage.defaultProps = {
 };
 
 export function ErrorMessage({ message }) {
-    return (
-        <p className="text-center text-danger">{message}</p>
-    );
+    return <p className="text-center text-danger">{message}</p>;
 }

src/utils/__tests__/conditionalHOCs.test.js

@@ -9,7 +9,12 @@ import React from "react";
 import { render } from "customTestRender";
 import { API_STATE } from "api/utils";
 import {
-    withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
+    withEither,
+    withSpinner,
+    withSending,
+    withSpinnerOnSending,
+    withError,
+    withErrorMessage,
 } from "../conditionalHOCs";
 
 describe("conditional HOCs", () => {
@@ -52,14 +57,18 @@ describe("conditional HOCs", () => {
         it("should render First component", () => {
             const withAlternative = withSending(Alternative);
             const FirstWithConditional = withAlternative(First);
-            const { getByText } = render(<FirstWithConditional apiState={API_STATE.SUCCESS} />);
+            const { getByText } = render(
+                <FirstWithConditional apiState={API_STATE.SUCCESS} />
+            );
             expect(getByText("First")).toBeDefined();
         });
 
         it("should render Alternative component", () => {
             const withAlternative = withSending(Alternative);
             const FirstWithConditional = withAlternative(First);
-            const { getByText } = render(<FirstWithConditional apiState={API_STATE.SENDING} />);
+            const { getByText } = render(
+                <FirstWithConditional apiState={API_STATE.SENDING} />
+            );
             expect(getByText("Alternative")).toBeDefined();
         });
     });
@@ -67,13 +76,17 @@ describe("conditional HOCs", () => {
     describe("withSpinnerOnSending", () => {
         it("should render First component", () => {
             const FirstWithConditional = withSpinnerOnSending(First);
-            const { getByText } = render(<FirstWithConditional apiState={API_STATE.SUCCESS} />);
+            const { getByText } = render(
+                <FirstWithConditional apiState={API_STATE.SUCCESS} />
+            );
             expect(getByText("First")).toBeDefined();
         });
 
         it("should render spinner", () => {
             const FirstWithConditional = withSpinnerOnSending(First);
-            const { container } = render(<FirstWithConditional apiState={API_STATE.SENDING} />);
+            const { container } = render(
+                <FirstWithConditional apiState={API_STATE.SENDING} />
+            );
             expect(container).toMatchSnapshot();
         });
     });
@@ -97,13 +110,17 @@ describe("conditional HOCs", () => {
     describe("withErrorMessage", () => {
         it("should render First component", () => {
             const FirstWithConditional = withErrorMessage(First);
-            const { getByText } = render(<FirstWithConditional apiState={API_STATE.SUCCESS} />);
+            const { getByText } = render(
+                <FirstWithConditional apiState={API_STATE.SUCCESS} />
+            );
             expect(getByText("First")).toBeDefined();
         });
 
         it("should render error message", () => {
             const FirstWithConditional = withErrorMessage(First);
-            const { container } = render(<FirstWithConditional apiState={API_STATE.ERROR} />);
+            const { container } = render(
+                <FirstWithConditional apiState={API_STATE.ERROR} />
+            );
             expect(container).toMatchSnapshot();
         });
     });

src/utils/__tests__/datetime.test.js

@@ -10,42 +10,40 @@ import { toLocaleDateString } from "../datetime";
 describe("toLocaleDateString", () => {
     it("should work with different locale", () => {
         global.ForisTranslations = { locale: "fr" };
-        expect(
-            toLocaleDateString("2020-02-20T12:51:36+00:00")
-        ).toBe("20 février 2020 12:51");
+        expect(toLocaleDateString("2020-02-20T12:51:36+00:00")).toBe(
+            "20 février 2020 12:51"
+        );
         global.ForisTranslations = { locale: "en" };
-    })
+    });
 
     it("should convert with default format", () => {
-        expect(
-            toLocaleDateString("2020-02-20T12:51:36+00:00")
-        ).toBe("February 20, 2020 12:51 PM");
+        expect(toLocaleDateString("2020-02-20T12:51:36+00:00")).toBe(
+            "February 20, 2020 12:51 PM"
+        );
     });
 
     it("should convert with custom input format", () => {
         expect(
-            toLocaleDateString(
-                "2020-02-20 12:51:36 +0000",
-                { inputFormat: "YYYY-MM-DD HH:mm:ss Z" },
-            )
+            toLocaleDateString("2020-02-20 12:51:36 +0000", {
+                inputFormat: "YYYY-MM-DD HH:mm:ss Z",
+            })
         ).toBe("February 20, 2020 12:51 PM");
     });
 
     it("should convert with custom output format", () => {
         expect(
-            toLocaleDateString(
-                "2020-02-20T12:51:36+00:00",
-                { outputFormat: "LL" },
-            )
+            toLocaleDateString("2020-02-20T12:51:36+00:00", {
+                outputFormat: "LL",
+            })
         ).toBe("February 20, 2020");
     });
 
     it("should convert with custom input and output format", () => {
         expect(
-            toLocaleDateString(
-                "2020-02-20 12:51:36 +0000",
-                { inputFormat: "YYYY-MM-DD HH:mm:ss Z", outputFormat: "LL" },
-            )
+            toLocaleDateString("2020-02-20 12:51:36 +0000", {
+                inputFormat: "YYYY-MM-DD HH:mm:ss Z",
+                outputFormat: "LL",
+            })
         ).toBe("February 20, 2020");
     });
 });

src/utils/conditionalHOCs.js

@@ -24,8 +24,8 @@ function withEither(conditionalFn, Either) {
 
 function isSending(props) {
     if (Array.isArray(props.apiState)) {
-        return props.apiState.some(
-            (state) => [API_STATE.INIT, API_STATE.SENDING].includes(state),
+        return props.apiState.some((state) =>
+            [API_STATE.INIT, API_STATE.SENDING].includes(state)
         );
     }
     return [API_STATE.INIT, API_STATE.SENDING].includes(props.apiState);
@@ -38,15 +38,18 @@ const withSpinnerOnSending = withSpinner(isSending);
 // Error handling
 
 const withError = (conditionalFn) => withEither(conditionalFn, ErrorMessage);
-const withErrorMessage = withError(
-    (props) => {
-        if (Array.isArray(props.apiState)) {
-            return props.apiState.includes(API_STATE.ERROR);
-        }
-        return props.apiState === API_STATE.ERROR;
-    },
-);
+const withErrorMessage = withError((props) => {
+    if (Array.isArray(props.apiState)) {
+        return props.apiState.includes(API_STATE.ERROR);
+    }
+    return props.apiState === API_STATE.ERROR;
+});
 
 export {
-    withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
+    withEither,
+    withSpinner,
+    withSending,
+    withSpinnerOnSending,
+    withError,
+    withErrorMessage,
 };

src/utils/datetime.js

@@ -1,8 +1,9 @@
 import moment from "moment";
 
-export function toLocaleDateString(date, { inputFormat, outputFormat = "LLL" } = {}) {
+export function toLocaleDateString(
+    date,
+    { inputFormat, outputFormat = "LLL" } = {}
+) {
     const parsedDate = inputFormat ? moment(date, inputFormat) : moment(date);
-    return parsedDate
-        .locale(ForisTranslations.locale)
-        .format(outputFormat);
+    return parsedDate.locale(ForisTranslations.locale).format(outputFormat);
 }

src/utils/displayCard.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2020 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.
+ */
+
+export function displayCard({ package_lists: packages }, cardName) {
+    const enabledPackagesNames = [];
+    packages
+        .filter((item) => item.enabled)
+        .map((item) => {
+            enabledPackagesNames.push(item.name);
+            item.options
+                .filter((option) => option.enabled)
+                .map((option) => {
+                    enabledPackagesNames.push(option.name);
+                    return null;
+                });
+            return null;
+        });
+    return enabledPackagesNames.includes(cardName);
+}

src/utils/forisUrls.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.
@@ -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`,
-    logout: `${REFORIS_URL_PREFIX}/logout`,
+    login: `/login?${REFORIS_URL_PREFIX}/`,
+    logout: `/logout`,
 
     static: `${REFORIS_URL_PREFIX}/static/reforis`,
     wifi: `${REFORIS_URL_PREFIX}/network-settings/wifi`,
@@ -18,12 +18,21 @@ export const ForisURLs = {
     packageManagement: {
         updateSettings: `${REFORIS_URL_PREFIX}/package-management/update-settings`,
         updates: `${REFORIS_URL_PREFIX}/package-management/updates`,
+        packages: `${REFORIS_URL_PREFIX}/package-management/packages`,
     },
 
+    // Plugins
+    storage: `${REFORIS_URL_PREFIX}/storage`,
+    sentinelAgreement: `${REFORIS_URL_PREFIX}/sentinel/agreement`,
+
     // Notifications links are used with <Link/> inside Router, thus url subdir is not required.
-    notifications: "/notifications",
+    overview: "/overview",
+    notifications: "/overview#notifications",
     notificationsSettings: "/administration/notifications-settings",
 
+    approveUpdates: "/package-management/updates",
+    languages: "/package-management/languages",
+    maintenance: "/administration/maintenance",
     luci: "/cgi-bin/luci",
 
     // API

src/utils/hooks.js

@@ -8,11 +8,17 @@
 import { useState, useEffect } from "react";
 
 /** Execute callback when condition is set to true. */
-export function useConditionalTimeout({ callback, timeout = 125 }, ...callbackArgs) {
+export function useConditionalTimeout(
+    { callback, timeout = 125 },
+    ...callbackArgs
+) {
     const [condition, setCondition] = useState(false);
     useEffect(() => {
         if (condition) {
-            const interval = setTimeout(() => callback(...callbackArgs), timeout);
+            const interval = setTimeout(
+                () => callback(...callbackArgs),
+                timeout
+            );
             return () => setTimeout(interval);
         }
     }, [condition, callback, timeout, callbackArgs]);

src/utils/isPluginInstalled.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright (C) 2020 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.
+ */
+
+export const isPluginInstalled = (pluginName) =>
+    ForisPlugins.some((plugin) => plugin.name === pluginName);

src/utils/objectHelpers.js

@@ -15,21 +15,18 @@ export function undefinedIfEmpty(instance) {
 
 /** Return object without keys that have undefined value. */
 export function withoutUndefinedKeys(instance) {
-    return Object.keys(instance).reduce(
-        (accumulator, key) => {
-            if (instance[key] !== undefined) {
-                accumulator[key] = instance[key];
-            }
-            return accumulator;
-        },
-        {},
-    );
+    return Object.keys(instance).reduce((accumulator, key) => {
+        if (instance[key] !== undefined) {
+            accumulator[key] = instance[key];
+        }
+        return accumulator;
+    }, {});
 }
 
 /** Return copy of passed object that has only desired keys. */
 export function onlySpecifiedKeys(object, desiredKeys) {
-    return desiredKeys.reduce(
-        (accumulator, key) => { accumulator[key] = object[key]; return accumulator; },
-        {},
-    );
+    return desiredKeys.reduce((accumulator, key) => {
+        accumulator[key] = object[key];
+        return accumulator;
+    }, {});
 }

src/utils/validations.js

@@ -30,7 +30,10 @@ const REs = {
 };
 
 const createValidator = (fieldType) => (value) => {
-    if (value && value !== "") return REs[fieldType].test(value) ? undefined : ERROR_MESSAGES[fieldType];
+    if (value && value !== "")
+        return REs[fieldType].test(value)
+            ? undefined
+            : ERROR_MESSAGES[fieldType];
 };
 
 const validateIPv4Address = createValidator("IPv4");

src/webSockets/WebSockets.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 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,12 +7,10 @@
 
 /* eslint no-console: "off" */
 
-import { ForisURLs } from "../utils/forisUrls";
-
 const PROTOCOL = window.location.protocol === "http:" ? "ws" : "wss";
 
 const URL = process.env.LIGHTTPD
-    ? `${PROTOCOL}://${window.location.hostname}/foris-ws`
+    ? `${PROTOCOL}://${window.location.host}/foris-ws`
     : `${PROTOCOL}://${window.location.hostname}:${9081}`;
 
 const WAITING_FOR_CONNECTION_TIMEOUT = 500;
@@ -21,11 +19,7 @@ export class WebSockets {
     constructor() {
         this.ws = new WebSocket(URL);
         this.ws.onerror = (e) => {
-            if (window.location.pathname !== ForisURLs.login) {
-                console.error("WS: Error observed, you aren't logged probably.");
-                window.location.replace(ForisURLs.login);
-            }
-            console.error(`WS: Error: ${e}`);
+            console.error("WS: Error:", e);
         };
         this.ws.onmessage = (e) => {
             console.debug(`WS: Received Message: ${e.data}`);
@@ -111,7 +105,9 @@ export class WebSockets {
             chain = this.callbacks[json.module][json.action];
         } catch (error) {
             if (error instanceof TypeError) {
-                console.warn(`Callback for this message wasn't found:${error.data}`);
+                console.warn(
+                    `Callback for this message wasn't found:${error.data}`
+                );
             } else throw error;
         }
 

src/webSockets/hooks.js

@@ -7,7 +7,12 @@
 
 import { useEffect, useState } from "react";
 
-export function useWSForisModule(ws, module, action = "update_settings", controllerID) {
+export function useWSForisModule(
+    ws,
+    module,
+    action = "update_settings",
+    controllerID
+) {
     const [data, setData] = useState(null);
 
     useEffect(() => {
@@ -18,14 +23,16 @@ export function useWSForisModule(ws, module, action = "update_settings", control
 
         function callback(message) {
             // Accept only messages addressed to device with passed controller ID.
-            if (controllerID !== undefined && controllerID !== message.controller_id) {
+            if (
+                controllerID !== undefined &&
+                controllerID !== message.controller_id
+            ) {
                 return;
             }
             setData(message.data);
         }
 
-        ws.subscribe(module)
-            .bind(module, action, callback);
+        ws.subscribe(module).bind(module, action, callback);
 
         return () => {
             ws.unbind(module, action, callback);

styleguide.config.js

@@ -30,9 +30,7 @@ module.exports = {
         },
         {
             name: "Alert Context",
-            components: [
-                "src/alertContext/AlertContext.js",
-            ],
+            components: ["src/alertContext/AlertContext.js"],
             exampleMode: "expand",
             usageMode: "expand",
         },
@@ -42,16 +40,20 @@ module.exports = {
             components: "src/bootstrap/*.js",
             exampleMode: "expand",
             usageMode: "expand",
-            ignore: [
-                "src/bootstrap/constants.js",
-            ],
+            ignore: ["src/bootstrap/constants.js"],
         },
     ],
     require: [
         "babel-polyfill",
         path.join(__dirname, "src/testUtils/mockGlobals"),
-        path.join(__dirname, "node_modules/bootstrap/dist/css/bootstrap.min.css"),
-        path.join(__dirname, "node_modules/@fortawesome/fontawesome-free/css/all.min.css"),
+        path.join(
+            __dirname,
+            "node_modules/bootstrap/dist/css/bootstrap.min.css"
+        ),
+        path.join(
+            __dirname,
+            "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+        ),
     ],
     webpackConfig: {
         module: {
@@ -60,10 +62,12 @@ module.exports = {
                     test: /\.js$/,
                     exclude: /node_modules/,
                     loader: "babel-loader",
-                }, {
+                },
+                {
                     test: /\.css$/,
                     use: ["style-loader", "css-loader"],
-                }, {
+                },
+                {
                     test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,
                     loader: "file-loader",
                 },

translations/cs/LC_MESSAGES/forisjs.po

@@ -7,148 +7,126 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-02-20 17:28+0100\n"
-"PO-Revision-Date: 2019-09-29 15:56+0000\n"
-"Last-Translator: Pavel Borecki <pavel.borecki@gmail.com>\n"
+"POT-Creation-Date: 2021-07-30 16:58+0300\n"
+"PO-Revision-Date: 2021-02-17 14:50+0000\n"
+"Last-Translator: Lukas Jelinek <lukas.jelinek@nic.cz>\n"
 "Language: cs\n"
-"Language-Team: Czech "
-"<https://hosted.weblate.org/projects/turris/reforis/cs/>\n"
+"Language-Team: Czech <https://hosted.weblate.org/projects/turris/foris-"
+"js/cs/>\n"
 "Plural-Forms: nplurals=3; plural=(n==1) ? 0 : (n>=2 && n<=4) ? 1 : 2\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Generated-By: Babel 2.8.0\n"
+"Generated-By: Babel 2.9.0\n"
 
-#: src/validations.js:13
-msgid "This is not a valid IPv4 address."
-msgstr "Toto není platná IPv4 adresa."
-
-#: src/validations.js:14
-msgid "This is not a valid IPv6 address."
-msgstr "Tohle není platná IPv6 adresa."
-
-#: src/validations.js:15
-msgid "This is not a valid IPv6 prefix."
-msgstr "Toto není platný IPv6 prefix."
-
-#: src/validations.js:16
-msgid "This is not a valid domain name."
-msgstr "Toto není platné doménové jméno."
-
-#: src/validations.js:17
-msgid "This is not a valid DUID."
-msgstr "Tohle není platné DUID."
-
-#: src/validations.js:18
-msgid "This is not a valid MAC address."
-msgstr "Toto není platná MAC adresa."
-
-#: src/validations.js:19
-msgid "Doesn't contain a list of emails separated by commas."
-msgstr "Neobsahuje seznam e-mailů oddělených čárkou."
-
-#: src/api/utils.js:58
+#: src/api/utils.js:60
 msgid "The session is expired. Please log in again."
 msgstr "Platnost relace skončila. Přihlaste se znovu."
 
-#: src/api/utils.js:63
+#: src/api/utils.js:65
 msgid "Timeout error occurred."
 msgstr "Došlo k chybě kvůli překročení časového limitu."
 
-#: src/api/utils.js:66
+#: src/api/utils.js:68
 msgid "No response received."
 msgstr "Neobdržena žádná odezva."
 
-#: src/api/utils.js:76
+#: src/api/utils.js:78
 msgid "An unknown API error occurred."
 msgstr "Došlo k neznámé chybě v aplikačním programovém rozhraní."
 
-#: src/common/RebootButton.js:33
+#: src/common/RebootButton.js:27
 msgid "Reboot request failed."
-msgstr "Vyžadován restart"
+msgstr "Vyžadován restart."
 
-#: src/common/RebootButton.js:54
+#: src/common/RebootButton.js:51
 msgid "Reboot"
 msgstr "Restartovat"
 
-#: src/common/RebootButton.js:69
-msgid "Reboot confirmation"
-msgstr ""
+#: src/common/RebootButton.js:66
+msgid "Warning!"
+msgstr "Varování!"
 
-#: src/common/RebootButton.js:70
+#: src/common/RebootButton.js:68
 msgid "Are you sure you want to restart the router?"
-msgstr ""
+msgstr "Opravdu chcete router restartovat?"
 
-#: src/common/RebootButton.js:72
+#: src/common/RebootButton.js:71
 msgid "Cancel"
-msgstr ""
+msgstr "Storno"
 
 #: src/common/RebootButton.js:73
 msgid "Confirm reboot"
-msgstr ""
+msgstr "Potvrdit restart"
 
-#: src/common/WiFiSettings/ResetWiFiSettings.js:39
+#: src/common/WiFiSettings/ResetWiFiSettings.js:38
 msgid "An error occurred during resetting Wi-Fi settings."
-msgstr ""
+msgstr "Při resetu nastavení Wi-Fi došlo k chybě."
 
 #: src/common/WiFiSettings/ResetWiFiSettings.js:41
 msgid "Wi-Fi settings are set to defaults."
-msgstr ""
-
-#: src/common/WiFiSettings/ResetWiFiSettings.js:53
-#: src/common/WiFiSettings/ResetWiFiSettings.js:69
-msgid "Reset Wi-Fi Settings"
-msgstr ""
+msgstr "Nastavení Wi-Fi jsou uvedena do výchozího stavu."
 
 #: src/common/WiFiSettings/ResetWiFiSettings.js:55
-msgid ""
-"\n"
-"If a number of wireless cards doesn't match, you may try to reset the Wi-"
-"Fi settings. Note that this will remove the\n"
-"current Wi-Fi configuration and restore the default values.\n"
-"        "
-msgstr ""
+#: src/common/WiFiSettings/ResetWiFiSettings.js:69
+msgid "Reset Wi-Fi Settings"
+msgstr "Resetovat nastavení Wi-Fi"
 
-#: src/common/WiFiSettings/WiFiForm.js:82
+#: src/common/WiFiSettings/WiFiForm.js:92
 msgid "Wi-Fi ${deviceID + 1}"
-msgstr ""
+msgstr "Wi-Fi ${deviceID + 1}"
 
-#: src/common/WiFiSettings/WiFiForm.js:84
-msgid "Enable"
-msgstr "Zapnout"
-
-#: src/common/WiFiSettings/WiFiForm.js:215
-msgid "auto"
-msgstr "automaticky"
-
-#: src/common/WiFiSettings/WiFiGuestForm.js:37
-msgid "Enable Guest Wifi"
-msgstr "Zapnout WiFi pro hosty"
-
-#: src/common/WiFiSettings/WiFiGuestForm.js:77
+#: src/common/WiFiSettings/WiFiForm.js:129
+#: src/common/WiFiSettings/WiFiGuestForm.js:80
 msgid "Password"
 msgstr "Heslo"
 
-#: src/common/WiFiSettings/WiFiQRCode.js:60
+#: src/common/WiFiSettings/WiFiForm.js:143
+msgid "Hide SSID"
+msgstr ""
+
+#: src/common/WiFiSettings/WiFiForm.js:177
+msgid "802.11n/ac mode"
+msgstr ""
+
+#: src/common/WiFiSettings/WiFiForm.js:190
+#, fuzzy
+msgid "Channel"
+msgstr "Storno"
+
+#: src/common/WiFiSettings/WiFiForm.js:221
+msgid "auto"
+msgstr "automaticky"
+
+#: src/common/WiFiSettings/WiFiGuestForm.js:42
+msgid "Enable Guest Wi-Fi"
+msgstr "Zapnout Wi-Fi pro hosty"
+
+#: src/common/WiFiSettings/WiFiQRCode.js:71
 msgid "Wi-Fi QR Code"
-msgstr ""
+msgstr "Wi-Fi QR kód"
 
-#: src/common/WiFiSettings/WiFiQRCode.js:80
+#: src/common/WiFiSettings/WiFiQRCode.js:91
 msgid "Download PDF"
-msgstr ""
+msgstr "Stáhnout PDF"
 
-#: src/common/WiFiSettings/WiFiSettings.js:73
-#: src/common/WiFiSettings/WiFiSettings.js:81
+#: src/common/WiFiSettings/WiFiSettings.js:78
+#: src/common/WiFiSettings/WiFiSettings.js:90
 msgid "SSID can't be longer than 32 symbols"
 msgstr "SSID nemůže být delší než 32 znaků"
 
-#: src/common/WiFiSettings/WiFiSettings.js:74
-#: src/common/WiFiSettings/WiFiSettings.js:82
+#: src/common/WiFiSettings/WiFiSettings.js:79
+#: src/common/WiFiSettings/WiFiSettings.js:92
 msgid "SSID can't be empty"
 msgstr "SSID je třeba vyplnit"
 
-#: src/common/WiFiSettings/WiFiSettings.js:76
+#: src/common/WiFiSettings/WiFiSettings.js:81
+#: src/common/WiFiSettings/WiFiSettings.js:94
+msgid "SSID can't be longer than 32 bytes"
+msgstr "SSID nemůže být delší než 32 bajtů"
+
 #: src/common/WiFiSettings/WiFiSettings.js:84
+#: src/common/WiFiSettings/WiFiSettings.js:97
 msgid "Password must contain at least 8 symbols"
 msgstr "Je třeba, aby heslo obsahovalo alespoň 8 znaků"
 
@@ -176,7 +154,19 @@ msgstr "802.11ac – kanál šíře 40 MHz"
 msgid "802.11ac - 80 MHz wide channel"
 msgstr "802.11ac – kanál šíře 80 MHz"
 
-#: src/common/WiFiSettings/constants.js:21
+#: src/common/WiFiSettings/constants.js:15
+msgid "802.11ac - 160 MHz wide channel"
+msgstr "802.11ac – kanál šíře 160 MHz"
+
+#: src/common/WiFiSettings/constants.js:22
+msgid ""
+"SSID which contains non-standard characters could cause problems on some "
+"devices."
+msgstr ""
+"SSID obsahující nestandardní znaky může na některých zařízení způsobovat "
+"problémy."
+
+#: src/common/WiFiSettings/constants.js:25
 msgid ""
 "\n"
 "        WPA2 pre-shared key, that is required to connect to the network.\n"
@@ -187,13 +177,13 @@ msgstr ""
 "síti.\n"
 "    "
 
-#: src/common/WiFiSettings/constants.js:24
+#: src/common/WiFiSettings/constants.js:28
 msgid "If set, network is not visible when scanning for available networks."
 msgstr ""
 "Při zapnutí této volby se síť nebude zobrazovat zařízením když budou "
 "vyhledávat dostupné sítě."
 
-#: src/common/WiFiSettings/constants.js:25
+#: src/common/WiFiSettings/constants.js:31
 msgid ""
 "\n"
 "        The 2.4 GHz band is more widely supported by clients, but tends "
@@ -209,7 +199,7 @@ msgstr ""
 "zařízeními. Obvykle bývá méně zarušené,\n"
 "        ale signál se hůře šíři uvnitř budov."
 
-#: src/common/WiFiSettings/constants.js:29
+#: src/common/WiFiSettings/constants.js:35
 msgid ""
 "\n"
 "        Change this to adjust 802.11n/ac mode of operation. 802.11n with "
@@ -227,7 +217,7 @@ msgstr ""
 "        20 MHz.\n"
 "    "
 
-#: src/common/WiFiSettings/constants.js:34
+#: src/common/WiFiSettings/constants.js:40
 msgid ""
 "\n"
 "        Enables Wi-Fi for guests, which is separated from LAN network. "
@@ -247,25 +237,25 @@ msgstr ""
 "hosty“.\n"
 "        "
 
-#: src/form/components/ForisForm.js:112
+#: src/form/components/ForisForm.js:121
 msgid "Settings saved successfully"
 msgstr "Nastavení úspěšně uložena"
 
-#: src/form/components/ForisForm.js:165
+#: src/form/components/ForisForm.js:183
 msgid "Changes you made may not be saved. Are you sure you want to leave?"
 msgstr ""
 "Změny, které byly provedeny, nebyly uloženy. Jste si jistý, že chcete "
 "opustit stránku?"
 
-#: src/form/components/SubmitButton.js:32
+#: src/form/components/SubmitButton.js:31
 msgid "Updating"
 msgstr "Aktualizuji"
 
-#: src/form/components/SubmitButton.js:35
+#: src/form/components/SubmitButton.js:34
 msgid "Load settings"
 msgstr "Načítám nastavení"
 
-#: src/form/components/SubmitButton.js:38
+#: src/form/components/SubmitButton.js:37
 msgid "Save"
 msgstr "Uložit"
 
@@ -273,6 +263,57 @@ msgstr "Uložit"
 msgid "An error occurred while fetching data."
 msgstr "Došlo k chybě při získávání dat."
 
+#: src/utils/validations.js:13
+msgid "This is not a valid IPv4 address."
+msgstr "Toto není platná IPv4 adresa."
+
+#: src/utils/validations.js:14
+msgid "This is not a valid IPv6 address."
+msgstr "Tohle není platná IPv6 adresa."
+
+#: src/utils/validations.js:15
+msgid "This is not a valid IPv6 prefix."
+msgstr "Toto není platný IPv6 prefix."
+
+#: src/utils/validations.js:16
+msgid "This is not a valid domain name."
+msgstr "Toto není platné doménové jméno."
+
+#: src/utils/validations.js:17
+msgid "This is not a valid DUID."
+msgstr "Tohle není platné DUID."
+
+#: src/utils/validations.js:18
+msgid "This is not a valid MAC address."
+msgstr "Toto není platná MAC adresa."
+
+#: src/utils/validations.js:19
+msgid "Doesn't contain a list of emails separated by commas."
+msgstr "Neobsahuje seznam e-mailů oddělených čárkou."
+
 #~ msgid "An unknown error occurred. Check the console for more info."
 #~ msgstr "Došlo k neznámé chybě. Další informace naleznete v konzoli."
 
+#~ msgid "Reboot confirmation"
+#~ msgstr ""
+
+#~ msgid "Enable"
+#~ msgstr "Zapnout"
+
+#~ msgid ""
+#~ "\n"
+#~ "If a number of wireless cards "
+#~ "doesn't match, you may try to "
+#~ "reset the Wi-Fi settings. Note "
+#~ "that this will remove the\n"
+#~ "current Wi-Fi configuration and restore the default values.\n"
+#~ "        "
+#~ msgstr ""
+#~ "\n"
+#~ "Pokud počet karet pro Wi-Fi "
+#~ "neodpovídá skutečnosti, můžete zkusit "
+#~ "resetovat nastavení Wi-Fi. Nezapomeňte "
+#~ "ale, že\n"
+#~ "se tím odstraní aktuální konfigurace a vrátí se výchozí hodnoty.\n"
+#~ "        "
+

translations/da/LC_MESSAGES/forisjs.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-02-20 17:28+0100\n"
+"POT-Creation-Date: 2021-07-30 16:58+0300\n"
 "PO-Revision-Date: 2019-02-19 13:34+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: da\n"
@@ -16,69 +16,41 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Generated-By: Babel 2.8.0\n"
+"Generated-By: Babel 2.9.0\n"
 
-#: src/validations.js:13
-msgid "This is not a valid IPv4 address."
-msgstr ""
-
-#: src/validations.js:14
-msgid "This is not a valid IPv6 address."
-msgstr ""
-
-#: src/validations.js:15
-msgid "This is not a valid IPv6 prefix."
-msgstr ""
-
-#: src/validations.js:16
-msgid "This is not a valid domain name."
-msgstr ""
-
-#: src/validations.js:17
-msgid "This is not a valid DUID."
-msgstr ""
-
-#: src/validations.js:18
-msgid "This is not a valid MAC address."
-msgstr ""
-
-#: src/validations.js:19
-msgid "Doesn't contain a list of emails separated by commas."
-msgstr ""
-
-#: src/api/utils.js:58
+#: src/api/utils.js:60
 msgid "The session is expired. Please log in again."
 msgstr ""
 
-#: src/api/utils.js:63
+#: src/api/utils.js:65
 msgid "Timeout error occurred."
 msgstr ""
 
-#: src/api/utils.js:66
+#: src/api/utils.js:68
 msgid "No response received."
 msgstr ""
 
-#: src/api/utils.js:76
+#: src/api/utils.js:78
 msgid "An unknown API error occurred."
 msgstr ""
 
-#: src/common/RebootButton.js:33
+#: src/common/RebootButton.js:27
 msgid "Reboot request failed."
 msgstr ""
 
-#: src/common/RebootButton.js:54
+#: src/common/RebootButton.js:51
 msgid "Reboot"
 msgstr ""
 
-#: src/common/RebootButton.js:69
-msgid "Reboot confirmation"
+#: src/common/RebootButton.js:66
+msgid "Warning!"
 msgstr ""
 
-#: src/common/RebootButton.js:70
+#: src/common/RebootButton.js:68
 msgid "Are you sure you want to restart the router?"
 msgstr ""
 
-#: src/common/RebootButton.js:72
+#: src/common/RebootButton.js:71
 msgid "Cancel"
 msgstr ""
 
@@ -86,7 +58,7 @@ msgstr ""
 msgid "Confirm reboot"
 msgstr ""
 
-#: src/common/WiFiSettings/ResetWiFiSettings.js:39
+#: src/common/WiFiSettings/ResetWiFiSettings.js:38
 msgid "An error occurred during resetting Wi-Fi settings."
 msgstr ""
 
@@ -94,60 +66,65 @@ msgstr ""
 msgid "Wi-Fi settings are set to defaults."
 msgstr ""
 
-#: src/common/WiFiSettings/ResetWiFiSettings.js:53
+#: src/common/WiFiSettings/ResetWiFiSettings.js:55
 #: src/common/WiFiSettings/ResetWiFiSettings.js:69
 msgid "Reset Wi-Fi Settings"
 msgstr ""
 
-#: src/common/WiFiSettings/ResetWiFiSettings.js:55
-msgid ""
-"\n"
-"If a number of wireless cards doesn't match, you may try to reset the Wi-"
-"Fi settings. Note that this will remove the\n"
-"current Wi-Fi configuration and restore the default values.\n"
-"        "
-msgstr ""
-
-#: src/common/WiFiSettings/WiFiForm.js:82
+#: src/common/WiFiSettings/WiFiForm.js:92
 msgid "Wi-Fi ${deviceID + 1}"
 msgstr ""
 
-#: src/common/WiFiSettings/WiFiForm.js:84
-msgid "Enable"
-msgstr ""
-
-#: src/common/WiFiSettings/WiFiForm.js:215
-msgid "auto"
-msgstr ""
-
-#: src/common/WiFiSettings/WiFiGuestForm.js:37
-msgid "Enable Guest Wifi"
-msgstr ""
-
-#: src/common/WiFiSettings/WiFiGuestForm.js:77
+#: src/common/WiFiSettings/WiFiForm.js:129
+#: src/common/WiFiSettings/WiFiGuestForm.js:80
 msgid "Password"
 msgstr ""
 
-#: src/common/WiFiSettings/WiFiQRCode.js:60
+#: src/common/WiFiSettings/WiFiForm.js:143
+msgid "Hide SSID"
+msgstr ""
+
+#: src/common/WiFiSettings/WiFiForm.js:177
+msgid "802.11n/ac mode"
+msgstr ""
+
+#: src/common/WiFiSettings/WiFiForm.js:190
+msgid "Channel"
+msgstr ""
+
+#: src/common/WiFiSettings/WiFiForm.js:221
+msgid "auto"
+msgstr ""
+
+#: src/common/WiFiSettings/WiFiGuestForm.js:42
+msgid "Enable Guest Wi-Fi"
+msgstr ""
+
+#: src/common/WiFiSettings/WiFiQRCode.js:71
 msgid "Wi-Fi QR Code"
 msgstr ""
 
-#: src/common/WiFiSettings/WiFiQRCode.js:80
+#: src/common/WiFiSettings/WiFiQRCode.js:91
 msgid "Download PDF"
 msgstr ""
 
-#: src/common/WiFiSettings/WiFiSettings.js:73
-#: src/common/WiFiSettings/WiFiSettings.js:81
+#: src/common/WiFiSettings/WiFiSettings.js:78
+#: src/common/WiFiSettings/WiFiSettings.js:90
 msgid "SSID can't be longer than 32 symbols"
 msgstr ""
 
-#: src/common/WiFiSettings/WiFiSettings.js:74
-#: src/common/WiFiSettings/WiFiSettings.js:82
+#: src/common/WiFiSettings/WiFiSettings.js:79
+#: src/common/WiFiSettings/WiFiSettings.js:92
 msgid "SSID can't be empty"
 msgstr ""
 
-#: src/common/WiFiSettings/WiFiSettings.js:76
+#: src/common/WiFiSettings/WiFiSettings.js:81
+#: src/common/WiFiSettings/WiFiSettings.js:94
+msgid "SSID can't be longer than 32 bytes"
+msgstr ""
+
 #: src/common/WiFiSettings/WiFiSettings.js:84
+#: src/common/WiFiSettings/WiFiSettings.js:97
 msgid "Password must contain at least 8 symbols"
 msgstr ""
 
@@ -175,18 +152,28 @@ msgstr ""
 msgid "802.11ac - 80 MHz wide channel"
 msgstr ""
 
-#: src/common/WiFiSettings/constants.js:21
+#: src/common/WiFiSettings/constants.js:15
+msgid "802.11ac - 160 MHz wide channel"
+msgstr ""
+
+#: src/common/WiFiSettings/constants.js:22
+msgid ""
+"SSID which contains non-standard characters could cause problems on some "
+"devices."
+msgstr ""
+
+#: src/common/WiFiSettings/constants.js:25
 msgid ""
 "\n"
 "        WPA2 pre-shared key, that is required to connect to the network.\n"
 "    "
 msgstr ""
 
-#: src/common/WiFiSettings/constants.js:24
+#: src/common/WiFiSettings/constants.js:28
 msgid "If set, network is not visible when scanning for available networks."
 msgstr ""
 
-#: src/common/WiFiSettings/constants.js:25
+#: src/common/WiFiSettings/constants.js:31
 msgid ""
 "\n"
 "        The 2.4 GHz band is more widely supported by clients, but tends "
@@ -196,7 +183,7 @@ msgid ""
 "        does not carry so well indoors."
 msgstr ""
 
-#: src/common/WiFiSettings/constants.js:29
+#: src/common/WiFiSettings/constants.js:35
 msgid ""
 "\n"
 "        Change this to adjust 802.11n/ac mode of operation. 802.11n with "
@@ -207,7 +194,7 @@ msgid ""
 "    "
 msgstr ""
 
-#: src/common/WiFiSettings/constants.js:34
+#: src/common/WiFiSettings/constants.js:40
 msgid ""
 "\n"
 "        Enables Wi-Fi for guests, which is separated from LAN network. "
@@ -219,23 +206,23 @@ msgid ""
 "        "
 msgstr ""
 
-#: src/form/components/ForisForm.js:112
+#: src/form/components/ForisForm.js:121
 msgid "Settings saved successfully"
 msgstr ""
 
-#: src/form/components/ForisForm.js:165
+#: src/form/components/ForisForm.js:183
 msgid "Changes you made may not be saved. Are you sure you want to leave?"
 msgstr ""
 
-#: src/form/components/SubmitButton.js:32
+#: src/form/components/SubmitButton.js:31
 msgid "Updating"
 msgstr ""
 
-#: src/form/components/SubmitButton.js:35
+#: src/form/components/SubmitButton.js:34
 msgid "Load settings"
 msgstr ""
 
-#: src/form/components/SubmitButton.js:38
+#: src/form/components/SubmitButton.js:37
 msgid "Save"
 msgstr ""
 
@@ -243,6 +230,53 @@ msgstr ""
 msgid "An error occurred while fetching data."
 msgstr ""
 
+#: src/utils/validations.js:13
+msgid "This is not a valid IPv4 address."
+msgstr ""
+
+#: src/utils/validations.js:14
+msgid "This is not a valid IPv6 address."
+msgstr ""
+
+#: src/utils/validations.js:15
+msgid "This is not a valid IPv6 prefix."
+msgstr ""
+
+#: src/utils/validations.js:16
+msgid "This is not a valid domain name."
+msgstr ""
+
+#: src/utils/validations.js:17
+msgid "This is not a valid DUID."
+msgstr ""
+
+#: src/utils/validations.js:18
+msgid "This is not a valid MAC address."
+msgstr ""
+
+#: src/utils/validations.js:19
+msgid "Doesn't contain a list of emails separated by commas."
+msgstr ""
+
 #~ msgid "An unknown error occurred. Check the console for more info."
 #~ msgstr ""
 
+#~ msgid "Reboot confirmation"
+#~ msgstr ""
+
+#~ msgid "Enable"
+#~ msgstr ""
+
+#~ msgid "Enable Guest Wifi"
+#~ msgstr ""
+
+#~ msgid ""
+#~ "\n"
+#~ "If a number of wireless cards "
+#~ "doesn't match, you may try to "
+#~ "reset the Wi-Fi settings. Note "
+#~ "that this will remove the\n"
+#~ "current Wi-Fi configuration and restore the default values.\n"
+#~ "        "
+#~ msgstr ""
+