Bump v5.1.8

Add storage link

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

.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,4 +1,4 @@
-image: node:8-alpine
+image: node:10-alpine
 
 stages:
     - test

.prettierrc

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

.weblate

@@ -0,0 +1,3 @@
+[weblate]
+url = https://hosted.weblate.org/api/
+translation = turris/foris-js

Makefile

@@ -46,6 +46,8 @@ publish-latest: collect-files
 
 lint:
 	npm run lint
+lint-js-fix:
+	npm run lint:fix
 
 test:
 	npm test

README.md

@@ -1,4 +1,5 @@
 # foris-js
+
 Set of utils and common React elements for reForis.
 
 ## Publishing package
@@ -13,6 +14,39 @@ tagged `beta`. Versions names are based on commit SHA, e.g.
 
 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
+[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`.
+2. Adding the following rules to `externals` in `webpack.conf.js` of the plugin:
+
+```js
+externals: {
+    ...
+    "react-router-dom": "ReactRouterDOM",
+}
+```
+
+### Docs
+
+Build or watch docs to get more info about library:
+
+```bash
+make docs
+```
+
+or
+
+```bash
+make docs-watch
+```

babel.cfg

@@ -0,0 +1 @@
+[javascript: src/**.js]

babel.config.js

@@ -1,25 +1,4 @@
 module.exports = {
-    presets: [
-        "@babel/preset-env",
-        "@babel/preset-react",
-    ],
-    plugins: [
-        "@babel/plugin-transform-runtime",
-        "@babel/plugin-syntax-export-default-from",
-        ["module-resolver", {
-            root: ["./src"],
-            alias: {
-                test: "./test",
-                underscore: "lodash",
-            },
-        }],
-    ],
-    env: {
-        development: {
-            ignore: ["**/__tests__/**", "**/__mocks__/**"],
-        },
-        test: {
-            ignore: [],
-        },
-    },
+    presets: ["@babel/preset-env", "@babel/preset-react"],
+    plugins: ["@babel/plugin-transform-runtime"],
 };

docs/development.md

@@ -0,0 +1,25 @@
+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.
+
+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:
+
+```bash
+make pack;
+cd dist;
+npm link;
+
+cd $project_dir/js # Navigate to JS directory of the project where you want to link the library
+npm link foris
+```
+
+And that's it ;)

docs/intro.md

@@ -1 +1,6 @@
-Foris JS library is set of componets 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.

jest.config.js

@@ -12,10 +12,13 @@ module.exports = {
         "<rootDir>/src/testUtils",
         "<rootDir>/src/",
     ],
+    moduleNameMapper: {
+        "\\.(css|less)$": "<rootDir>/src/__mocks__/styleMock.js",
+    },
     clearMocks: true,
     collectCoverageFrom: ["src/**/*.{js,jsx}"],
     coverageDirectory: "coverage",
-    testPathIgnorePatterns: ["/node_modules/", "/__fixtures__/"],
+    testPathIgnorePatterns: ["/node_modules/", "/__fixtures__/", "/dist/"],
     verbose: false,
     setupFilesAfterEnv: [
         "@testing-library/react/cleanup-after-each",
@@ -24,8 +27,5 @@ module.exports = {
     globals: {
         TZ: "utc",
     },
-    transform: {
-        "^.+\\.js$": "babel-jest",
-        "^.+\\.css$": "jest-transform-css",
-    },
+    transformIgnorePatterns: ["node_modules/(?!(react-datetime)/)"],
 };

package.json

@@ -1,68 +1,66 @@
 {
     "name": "foris",
-  "version": "3.0.0",
+    "version": "5.1.8",
     "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"
+        "url": "https://gitlab.nic.cz/turris/reforis/foris-js.git"
     },
     "keywords": [
         "foris",
         "reforis"
     ],
     "license": "GPL-3.0",
-  "main": "./index.js",
+    "main": "./src/index.js",
     "dependencies": {
-    "axios": "^0.19.0",
-    "jest-transform-css": "^2.0.0",
+        "axios": "^0.19.2",
+        "immutability-helper": "3.0.1",
         "moment": "^2.24.0",
-    "moment-timezone": "^0.5.25",
-    "prop-types": "^15.7.2",
-    "react-datetime": "^2.16.3",
-    "react-router": "^5.0.1",
+        "qrcode.react": "^0.9.3",
+        "react-datetime": "^3.0.4",
         "react-uid": "^2.2.0"
     },
     "peerDependencies": {
-    "immutability-helper": "3.0.1",
-    "react": "16.9.0",
-    "react-dom": "16.9.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-syntax-export-default-from": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "@fortawesome/fontawesome-free": "^5.11.2",
-    "@testing-library/react": "^8.0.9",
-    "babel-jest": "^24.8.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-module-resolver": "^3.2.0",
-    "babel-plugin-react-transform": "^3.0.0",
-    "babel-polyfill": "^6.26.0",
-    "bootstrap": "^4.3.1",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.2.0",
-    "eslint": "^6.1.0",
-    "eslint-config-reforis": "^1.0.0",
-    "file-loader": "^4.2.0",
-    "immutability-helper": "3.0.1",
-    "jest": "^24.8.0",
-    "jest-mock-axios": "^3.0.0",
-    "moment": "^2.24.0",
-    "moment-timezone": "^0.5.25",
+        "bootstrap": "4.4.1",
+        "prop-types": "15.7.2",
         "react": "16.9.0",
         "react-dom": "16.9.0",
-    "react-styleguidist": "^10.3.2",
-    "snapshot-diff": "^0.5.1",
-    "style-loader": "^1.0.0",
-    "webpack": "^4.41.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-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": "^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",

scripts/collect_files.sh

@@ -4,7 +4,10 @@
 mkdir -p dist
 cp -rf ./src/* dist
 cp package.json package-lock.json README.md dist
+sed -i 's/\/src//g' dist/package.json # remove ./src from main js file path
+
 cp -rf translations dist
+
 # Remove unwanted files
-rm -rf dist/**/__tests__
+find dist -type d -name __tests__ -exec rm -r {} +
 rm -rf dist/__mocks__

src/__mocks__/styleMock.js

@@ -0,0 +1,8 @@
+/*
+ * Copyright (C) 2019 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.
+ */
+
+module.exports = {};

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) => {
+    const setAlertWrapper = useCallback(
+        (message, type = ALERT_TYPES.DANGER) => {
             setAlert({ message, type });
-    }, [setAlert]);
+        },
+        [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

@@ -0,0 +1,5 @@
+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).

src/alertContext/__tests__/AlertContext.test.js

@@ -20,7 +20,7 @@ function AlertTest() {
             <button onClick={dismissAlert}>Dismiss alert</button>
         </>
     );
-};
+}
 
 describe("AlertContext", () => {
     let componentContainer;

src/api/hooks.js

@@ -5,13 +5,16 @@
  * See /LICENSE for more information.
  */
 
-import {
-    useCallback, useEffect, useReducer, useState,
-} from "react";
+import { useCallback, useEffect, useReducer, useState } from "react";
 
-import { ForisURLs } from "../forisUrls";
+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,7 +26,8 @@ function createAPIHook(method) {
             data: null,
         });
 
-        const sendRequest = useCallback(async ({ data, suffix } = {}) => {
+        const sendRequest = useCallback(
+            async ({ data, suffix } = {}) => {
                 const headers = { ...HEADERS };
                 if (contentType) {
                     headers["Content-Type"] = contentType;
@@ -53,13 +57,16 @@ function createAPIHook(method) {
                         payload: result.data,
                     });
                 } catch (error) {
+                    const errorPayload = getErrorPayload(error);
                     dispatch({
                         type: API_ACTIONS.FAILURE,
                         status: error.response && error.response.status,
-                    payload: getErrorPayload(error),
+                        payload: errorPayload,
                     });
                 }
-        }, [urlRoot, contentType]);
+            },
+            [urlRoot, contentType]
+        );
         return [state, sendRequest];
     };
 }
@@ -80,6 +87,16 @@ function APIReducer(state, action) {
             if (action.status === 403) {
                 window.location.assign(ForisURLs.login);
             }
+
+            // 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,
@@ -95,11 +112,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

@@ -13,7 +13,7 @@ export const HEADERS = {
     "X-CSRFToken": getCookie("_csrf_token"),
 };
 
-export const TIMEOUT = 5000;
+export const TIMEOUT = 30500;
 
 export const API_ACTIONS = {
     INIT: 1,
@@ -43,8 +43,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;
             }
         }
@@ -65,9 +67,8 @@ export function getErrorPayload(error) {
     if (error.request) {
         return _("No response received.");
     }
-    /* eslint no-console: "off" */
-    console.error(error);
-    return _("An unknown error occurred. Check the console for more info.");
+    // Return original error because it's not directly related to API request/response.
+    return error;
 }
 
 export function 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,20 +1,21 @@
 Bootstrap alert component.
-```jsx
-import {useState} from 'react';
 
-function AlertExample(){
+```jsx
+import { useState } from "react";
+
+function AlertExample() {
     const [alert, setAlert] = useState(true);
     if (alert)
-        return <Alert 
-            type='warning' 
-            message='Some warning out there!' 
-            onDismiss={()=>setAlert(false)}
-        />;
-    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"
     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"
         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.js

@@ -19,6 +19,8 @@ FileInput.propTypes = {
     helpText: PropTypes.string,
     /** Email value. */
     value: PropTypes.string,
+    /** Allow selecting multiple files. */
+    multiple: PropTypes.bool,
 };
 
 export function FileInput({ ...props }) {

src/bootstrap/FileInput.md

@@ -1,15 +1,48 @@
-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([]);
 
-<FileInput
+// Note that files is not an array but FileList.
+const label = files.length === 1 ? files[0].name : "Choose file";
+
+<form className="col">
+    <FileInput
         files={files}
-    label="Some file"
+        label={label}
         helpText="Will be uploaded"
-    onChange={event =>setFiles(event.target.files)}
-/>
+        onChange={(event) => setFiles(event.target.files)}
+    />
+</form>;
+```
+
+### FileInput with multiple files
+
+```js
+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";
+
+<form className="col">
+    <FileInput
+        files={files}
+        label={label}
+        helpText="Will be uploaded"
+        onChange={(event) => setFiles(event.target.files)}
+        multiple
+    />
+</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

@@ -0,0 +1,15 @@
+@keyframes modalFade {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.modal.show {
+    display: block;
+    animation-name: modalFade;
+    animation-duration: 0.3s;
+    background: rgba(0, 0, 0, 0.2);
+}

src/bootstrap/Modal.js

@@ -1,21 +1,24 @@
 /*
- * 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";
 import { useClickOutside } from "../utils/hooks";
+import "./Modal.css";
 
 Modal.propTypes = {
     /** Is modal shown value */
     shown: PropTypes.bool.isRequired,
     /** 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([
@@ -24,18 +27,54 @@ Modal.propTypes = {
     ]).isRequired,
 };
 
-export function Modal({ shown, setShown, 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 ref={dialogRef} className="modal-dialog modal-dialog-centered" role="document">
-                    <div className="modal-content">
-                        {children}
-                    </div>
+            <div
+                className={`modal fade ${shown ? "show" : ""}`.trim()}
+                role="dialog"
+            >
+                <div
+                    ref={dialogRef}
+                    className={`modal-dialog ${modalSize} modal-dialog-centered ${
+                        scrollable ? "modal-dialog-scrollable" : ""
+                    }`.trim()}
+                    role="document"
+                >
+                    <div className="modal-content">{children}</div>
                 </div>
             </div>
         </Portal>
@@ -51,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>
@@ -77,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,33 +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" />
 ```
 
-I have no idea why example doesn't work here but you can investigate HTML code and Foris project.
-
 ```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' 
+                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"
     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,8 +31,7 @@ export function PasswordInput({ withEye, ...props }) {
             autoComplete={isHidden ? "new-password" : null}
             {...props}
         >
-            {withEye
-                ? (
+            {withEye ? (
                 <div className="input-group-append">
                     <button
                         type="button"
@@ -42,11 +41,14 @@ export function PasswordInput({ withEye, ...props }) {
                             setHidden((shouldBeHidden) => !shouldBeHidden);
                         }}
                     >
-                            <i className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`} />
+                        <i
+                            className={`fa ${
+                                isHidden ? "fa-eye" : "fa-eye-slash"
+                            }`}
+                        />
                     </button>
                 </div>
-                )
-                : null}
+            ) : 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"
     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,20 +15,35 @@ RadioSet.propTypes = {
     /** RadioSet label . */
     label: PropTypes.string,
     /** Choices . */
-    choices: PropTypes.arrayOf(PropTypes.shape({
+    choices: PropTypes.arrayOf(
+        PropTypes.shape({
             /** Choice lable . */
-        label: PropTypes.string.isRequired,
+            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,
+            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) => {
@@ -42,7 +57,7 @@ export function RadioSet({
                 value={choice.value}
                 helpText={choice.helpText}
                 checked={choice.value === value}
-
+                inline={inline}
                 {...props}
             />
         );
@@ -50,34 +65,53 @@ 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>
     );
 }
 
 Radio.propTypes = {
-    label: PropTypes.string.isRequired,
+    label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element,
+        PropTypes.node,
+        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

@@ -15,34 +15,30 @@ 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,
 };
 
-export function Select({
-    label, choices, helpText, ...props
-}) {
+export function Select({ label, choices, helpText, ...props }) {
     const uid = useUID();
 
-    const options = Object.keys(choices).map(
-        (key) => <option key={key} value={key}>{choices[key]}</option>,
-    );
-
+    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>
+        ));
     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

@@ -0,0 +1,33 @@
+.spinner-wrapper .spinner-border {
+    width: 4rem;
+    height: 4rem;
+    color: #00a2e2;
+}
+
+.spinner-fs-background {
+    background-color: rgba(2, 2, 2, 0.5);
+    color: rgb(230, 230, 230);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    /*
+     * Set to high value to me sure that it always overlaps all components
+     * https://getbootstrap.com/docs/4.3/layout/overview/#z-index
+     */
+    z-index: 1100;
+}
+
+.spinner-fs-wrapper .spinner-border {
+    width: 6rem;
+    height: 6rem;
+}
+
+.spinner-fs-wrapper .spinner-text {
+    margin: 1rem;
+}

src/bootstrap/Spinner.js

@@ -8,6 +8,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import "./Spinner.css";
+
 Spinner.propTypes = {
     /** Children components put into `div` with "spinner-text" class. */
     children: PropTypes.oneOfType([
@@ -23,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>
         );
@@ -59,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"
     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={true}>Test Button</Button>);
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        const { container } = render(<Button loading>Test Button</Button>);
+        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

@@ -34,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

@@ -14,32 +14,30 @@ import { RadioSet } from "../RadioSet";
 const TEST_CHOICES = [
     {
         label: "label",
-        value: "value"
+        value: "value",
     },
     {
         label: "another label",
-        value: "another value"
+        value: "another value",
     },
     {
         label: "another one  label",
-        value: "another on value"
-    }
+        value: "another on value",
+    },
 ];
 
 describe("<RadioSet/>", () => {
     it("Render radio set", () => {
         const { container } = render(
             <RadioSet
-                name={"test_name"}
-                label='Radios set label'
-                value='value'
+                name="test_name"
+                label="Radios set label"
+                value="value"
                 choices={TEST_CHOICES}
-                helpText={"Some help text"}
-                onChange={() => {
-                }}
+                helpText="Some help text"
+                onChange={() => {}}
             />
         );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
     });
 });

src/bootstrap/__tests__/Select.test.js

@@ -7,27 +7,31 @@
 
 import React from "react";
 
-import { fireEvent, getByDisplayValue, getByText, render } from "customTestRender";
+import {
+    fireEvent,
+    getByDisplayValue,
+    getByText,
+    render,
+} from "customTestRender";
 
 import { Select } from "../Select";
 
 const TEST_CHOICES = {
-    "1": "one",
-    "2": "two",
-    "3": "three",
+    1: "one",
+    2: "two",
+    3: "three",
 };
 
 describe("<Select/>", () => {
-    var selectContainer;
+    let selectContainer;
     const onChangeHandler = jest.fn();
     beforeEach(() => {
         const { container } = render(
             <Select
-                label='Test label'
-                value='1'
+                label="Test label"
+                value="1"
                 choices={TEST_CHOICES}
-                helpText='Help text'
-
+                helpText="Help text"
                 onChange={onChangeHandler}
             />
         );
@@ -35,21 +39,17 @@ describe("<Select/>", () => {
     });
 
     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

@@ -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-3";
+export const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";

src/common/RebootButton.js

@@ -10,18 +10,12 @@ import PropTypes from "prop-types";
 
 import { useAPIPost } from "../api/hooks";
 import { API_STATE } from "../api/utils";
-import { ForisURLs } from "../forisUrls";
+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

@@ -0,0 +1,75 @@
+/*
+ * Copyright (C) 2019 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, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+import { Button } from "../../bootstrap/Button";
+import { useAlert } from "../../alertContext/AlertContext";
+import { ALERT_TYPES } from "../../bootstrap/Alert";
+import { useAPIPost } from "../../api/hooks";
+import { API_STATE } from "../../api/utils";
+import { buttonFormFieldsSize } from "../../bootstrap/constants";
+
+ResetWiFiSettings.propTypes = {
+    ws: PropTypes.object.isRequired,
+    endpoint: PropTypes.string.isRequired,
+};
+
+export default 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]);
+
+    const [postResetResponse, postReset] = useAPIPost(endpoint);
+    const [setAlert, dismissAlert] = useAlert();
+    useEffect(() => {
+        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
+            );
+        }
+    }, [postResetResponse, setAlert]);
+
+    function onReset() {
+        dismissAlert();
+        setIsLoading(true);
+        postReset();
+    }
+
+    return (
+        <>
+            <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 className={`${buttonFormFieldsSize} text-right`}>
+                <Button
+                    className="btn-warning"
+                    forisFormSize
+                    loading={isLoading}
+                    disabled={isLoading}
+                    onClick={onReset}
+                >
+                    {_("Reset Wi-Fi Settings")}
+                </Button>
+            </div>
+        </>
+    );
+}

src/common/WiFiSettings/WiFiForm.js

@@ -0,0 +1,254 @@
+/*
+ * Copyright (C) 2019 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 { Switch } from "../../bootstrap/Switch";
+import { CheckBox } from "../../bootstrap/CheckBox";
+import { PasswordInput } from "../../bootstrap/PasswordInput";
+import { RadioSet } from "../../bootstrap/RadioSet";
+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";
+
+WiFiForm.propTypes = {
+    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: () => {},
+    hasGuestNetwork: true,
+};
+
+export default function WiFiForm({
+    formData,
+    formErrors,
+    setFormValue,
+    hasGuestNetwork,
+    disabled,
+}) {
+    return formData.devices.map((device, index) => (
+        <DeviceForm
+            key={device.id}
+            formData={device}
+            deviceIndex={index}
+            formErrors={(formErrors || [])[index]}
+            setFormValue={setFormValue}
+            hasGuestNetwork={hasGuestNetwork}
+            disabled={disabled}
+            divider={index + 1 !== formData.devices.length}
+        />
+    ));
+}
+
+DeviceForm.propTypes = {
+    formData: PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        enabled: PropTypes.bool.isRequired,
+        SSID: PropTypes.string.isRequired,
+        password: PropTypes.string.isRequired,
+        hidden: PropTypes.bool.isRequired,
+        hwmode: PropTypes.string.isRequired,
+        htmode: PropTypes.string.isRequired,
+        channel: PropTypes.string.isRequired,
+        guest_wifi: PropTypes.object.isRequired,
+    }),
+    formErrors: PropTypes.object.isRequired,
+    setFormValue: PropTypes.func.isRequired,
+    hasGuestNetwork: PropTypes.bool,
+    deviceIndex: PropTypes.number,
+    divider: PropTypes.bool,
+};
+
+DeviceForm.defaultProps = {
+    formErrors: {},
+    hasGuestNetwork: true,
+};
+
+function DeviceForm({
+    formData,
+    formErrors,
+    setFormValue,
+    hasGuestNetwork,
+    deviceIndex,
+    divider,
+    ...props
+}) {
+    const deviceID = formData.id;
+    return (
+        <>
+            <Switch
+                label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
+                checked={formData.enabled}
+                onChange={setFormValue((value) => ({
+                    devices: {
+                        [deviceIndex]: { enabled: { $set: value } },
+                    },
+                }))}
+                switchHeading
+                {...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}
+                            />
+                        </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" },
+                                },
+                            },
+                        }))}
+                        {...props}
+                    />
+
+                    <Select
+                        label="802.11n/ac mode"
+                        choices={getHtmodeChoices(formData)}
+                        value={formData.htmode}
+                        helpText={HELP_TEXTS.htmode}
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { htmode: { $set: value } },
+                            },
+                        }))}
+                        {...props}
+                    />
+
+                    <Select
+                        label="Channel"
+                        choices={getChannelChoices(formData)}
+                        value={formData.channel}
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { channel: { $set: value } },
+                            },
+                        }))}
+                        {...props}
+                    />
+
+                    {hasGuestNetwork && (
+                        <WifiGuestForm
+                            formData={{
+                                id: deviceIndex,
+                                ...formData.guest_wifi,
+                            }}
+                            formErrors={formErrors.guest_wifi || {}}
+                            setFormValue={setFormValue}
+                            {...props}
+                        />
+                    )}
+                </>
+            ) : null}
+            {divider ? <hr /> : null}
+        </>
+    );
+}
+
+function getChannelChoices(device) {
+    const channelChoices = {
+        0: _("auto"),
+    };
+
+    device.available_bands.forEach((availableBand) => {
+        if (availableBand.hwmode !== device.hwmode) return;
+
+        availableBand.available_channels.forEach((availableChannel) => {
+            channelChoices[availableChannel.number.toString()] = `
+                        ${availableChannel.number}
+                        (${availableChannel.frequency} MHz ${
+                availableChannel.radar ? " ,DFS" : ""
+            })
+                    `;
+        });
+    });
+
+    return channelChoices;
+}
+
+function getHtmodeChoices(device) {
+    const htmodeChoices = {};
+
+    device.available_bands.forEach((availableBand) => {
+        if (availableBand.hwmode !== device.hwmode) return;
+
+        availableBand.available_htmodes.forEach((availableHtmod) => {
+            htmodeChoices[availableHtmod] = HTMODES[availableHtmod];
+        });
+    });
+    return htmodeChoices;
+}
+
+function getHwmodeChoices(device) {
+    return device.available_bands.map((availableBand) => ({
+        label: HWMODES[availableBand.hwmode],
+        value: availableBand.hwmode,
+    }));
+}

src/common/WiFiSettings/WiFiGuestForm.js

@@ -0,0 +1,98 @@
+/*
+ * Copyright (C) 2019 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 { TextInput } from "../../bootstrap/TextInput";
+import { Switch } from "../../bootstrap/Switch";
+import { PasswordInput } from "../../bootstrap/PasswordInput";
+import WiFiQRCode from "./WiFiQRCode";
+import { HELP_TEXTS } from "./constants";
+
+WifiGuestForm.propTypes = {
+    formData: PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        SSID: PropTypes.string.isRequired,
+        password: PropTypes.string.isRequired,
+        enabled: PropTypes.bool.isRequired,
+    }),
+    formErrors: PropTypes.shape({
+        SSID: PropTypes.string,
+        password: PropTypes.string,
+    }),
+    setFormValue: PropTypes.func.isRequired,
+    deviceIndex: PropTypes.string,
+};
+
+export default function WifiGuestForm({
+    formData,
+    formErrors,
+    setFormValue,
+    deviceIndex,
+    ...props
+}) {
+    return (
+        <>
+            <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 } },
+                        },
+                    },
+                }))}
+                {...props}
+            />
+            {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>
+
+                    <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

@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2019 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, { useState } from "react";
+import QRCode from "qrcode.react";
+import PropTypes from "prop-types";
+
+import { ForisURLs } from "../../utils/forisUrls";
+import { Button } from "../../bootstrap/Button";
+import {
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalHeader,
+} from "../../bootstrap/Modal";
+import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
+
+WiFiQRCode.propTypes = {
+    SSID: PropTypes.string.isRequired,
+    password: PropTypes.string.isRequired,
+};
+
+const QR_ICON_PATH = `${ForisURLs.static}/imgs/QR_icon.svg`;
+
+export default function WiFiQRCode({ SSID, password }) {
+    const [modal, setModal] = useState(false);
+
+    return (
+        <>
+            <button
+                type="button"
+                className="input-group-text"
+                onClick={(e) => {
+                    e.preventDefault();
+                    setModal(true);
+                }}
+            >
+                <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}
+        </>
+    );
+}
+
+QRCodeModal.propTypes = {
+    SSID: PropTypes.string.isRequired,
+    password: PropTypes.string.isRequired,
+    shown: PropTypes.bool.isRequired,
+    setShown: PropTypes.func.isRequired,
+};
+
+function QRCodeModal({ shown, setShown, SSID, password }) {
+    return (
+        <Modal setShown={setShown} shown={shown}>
+            <ModalHeader setShown={setShown} title={_("Wi-Fi QR Code")} />
+            <ModalBody>
+                <QRCode
+                    renderAs="svg"
+                    value={toQRCodeContent(SSID, password)}
+                    level="M"
+                    size={350}
+                    includeMargin
+                    style={{ display: "block", margin: "auto" }}
+                />
+            </ModalBody>
+            <ModalFooter>
+                <Button
+                    className="btn-outline-primary"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        createAndDownloadPdf(SSID, password);
+                    }}
+                >
+                    <i className="fas fa-arrow-down mr-2" />
+                    {_("Download PDF")}
+                </Button>
+            </ModalFooter>
+        </Modal>
+    );
+}

src/common/WiFiSettings/WiFiSettings.js

@@ -0,0 +1,107 @@
+/*
+ * Copyright (C) 2019 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 { ForisForm } from "../../form/components/ForisForm";
+import WiFiForm from "./WiFiForm";
+import ResetWiFiSettings from "./ResetWiFiSettings";
+
+WiFiSettings.propTypes = {
+    ws: PropTypes.object.isRequired,
+    endpoint: PropTypes.string.isRequired,
+    resetEndpoint: PropTypes.string.isRequired,
+    hasGuestNetwork: PropTypes.bool,
+};
+
+export function WiFiSettings({ ws, endpoint, resetEndpoint, hasGuestNetwork }) {
+    return (
+        <>
+            <ForisForm
+                ws={ws}
+                forisConfig={{
+                    endpoint,
+                    wsModule: "wifi",
+                }}
+                prepData={prepData}
+                prepDataToSubmit={prepDataToSubmit}
+                validator={validator}
+            >
+                <WiFiForm hasGuestNetwork={hasGuestNetwork} />
+            </ForisForm>
+            <ResetWiFiSettings ws={ws} endpoint={resetEndpoint} />
+        </>
+    );
+}
+
+function prepData(formData) {
+    formData.devices.forEach((device, idx) => {
+        formData.devices[idx].channel = device.channel.toString();
+    });
+    return formData;
+}
+
+function prepDataToSubmit(formData) {
+    formData.devices.forEach((device, idx) => {
+        delete device.available_bands;
+
+        formData.devices[idx].channel = parseInt(device.channel);
+
+        if (!device.enabled) {
+            formData.devices[idx] = { id: device.id, enabled: false };
+            return;
+        }
+
+        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 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.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");
+        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 (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

@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2019 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, fireEvent, wait } from "customTestRender";
+
+import mockAxios from "jest-mock-axios";
+import { WebSockets } from "webSockets/WebSockets";
+import { mockJSONError } from "testUtils/network";
+import { mockSetAlert } from "testUtils/alertContextMock";
+import { ALERT_TYPES } from "../../../bootstrap/Alert";
+
+import ResetWiFiSettings from "../ResetWiFiSettings";
+
+describe("<ResetWiFiSettings/>", () => {
+    const webSockets = new WebSockets();
+    const endpoint = "/reforis/api/wifi-reset";
+    let getAllByText;
+
+    beforeEach(() => {
+        ({ 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()
+        );
+        mockAxios.mockResponse({ data: { foo: "bar" } });
+        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."
+            )
+        );
+    });
+});

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

@@ -0,0 +1,220 @@
+/*
+ * Copyright (C) 2019 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 diffSnapshot from "snapshot-diff";
+import mockAxios from "jest-mock-axios";
+
+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, byteCount } from "../WiFiSettings";
+
+describe("<WiFiSettings/>", () => {
+    let firstRender;
+    let getAllByText;
+    let getAllByLabelText;
+    let getByText;
+    let asFragment;
+    const endpoint = "/reforis/api/wifi";
+
+    beforeEach(async () => {
+        const webSockets = new WebSockets();
+        const renderRes = render(
+            <WiFiSettings
+                ws={webSockets}
+                endpoint={endpoint}
+                resetEndpoint="foo"
+            />
+        );
+        asFragment = renderRes.asFragment;
+        getAllByText = renderRes.getAllByText;
+        getAllByLabelText = renderRes.getAllByLabelText;
+        getByText = renderRes.getByText;
+        mockAxios.mockResponse({ data: wifiSettingsFixture() });
+        await wait(() => renderRes.getByText("Wi-Fi 1"));
+        firstRender = renderRes.asFragment();
+    });
+
+    it("should handle error", async () => {
+        const webSockets = new WebSockets();
+        const { getByText } = render(
+            <WiFiSettings
+                ws={webSockets}
+                ws={webSockets}
+                endpoint={endpoint}
+                resetEndpoint="foo"
+            />
+        );
+        const errorMessage = "An API error occurred.";
+        mockJSONError(errorMessage);
+        await wait(() => {
+            expect(getByText(errorMessage)).toBeTruthy();
+        });
+    });
+
+    it("Snapshot both modules disabled.", () => {
+        expect(firstRender).toMatchSnapshot();
+    });
+
+    it("Snapshot one module enabled.", () => {
+        fireEvent.click(getByText("Wi-Fi 1"));
+        expect(diffSnapshot(firstRender, asFragment())).toMatchSnapshot();
+    });
+
+    it("Snapshot 2.4 GHz", () => {
+        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(getByText("Wi-Fi 1"));
+        const enabledRender = asFragment();
+        fireEvent.click(getAllByText("Enable Guest Wi-Fi")[0]);
+        expect(diffSnapshot(enabledRender, asFragment())).toMatchSnapshot();
+    });
+
+    it("Post form: both modules disabled.", () => {
+        fireEvent.click(getByText("Save"));
+        expect(mockAxios.post).toBeCalled();
+        const data = {
+            devices: [
+                { enabled: false, id: 0 },
+                { enabled: false, id: 1 },
+            ],
+        };
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            endpoint,
+            data,
+            expect.anything()
+        );
+    });
+
+    it("Post form: one module enabled.", () => {
+        fireEvent.click(getByText("Wi-Fi 1"));
+
+        fireEvent.click(getByText("Save"));
+        expect(mockAxios.post).toBeCalled();
+        const data = {
+            devices: [
+                {
+                    SSID: "TestSSID1",
+                    channel: 60,
+                    enabled: true,
+                    guest_wifi: { enabled: false },
+                    hidden: false,
+                    htmode: "HT40",
+                    hwmode: "11a",
+                    id: 0,
+                    password: "TestPass",
+                },
+                { enabled: false, id: 1 },
+            ],
+        };
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            endpoint,
+            data,
+            expect.anything()
+        );
+    });
+
+    it("Post form: 2.4 GHz", () => {
+        fireEvent.click(getByText("Wi-Fi 1"));
+        fireEvent.click(getAllByText("2.4")[0]);
+
+        fireEvent.click(getByText("Save"));
+        expect(mockAxios.post).toBeCalled();
+        const data = {
+            devices: [
+                {
+                    SSID: "TestSSID1",
+                    channel: 0,
+                    enabled: true,
+                    guest_wifi: { enabled: false },
+                    hidden: false,
+                    htmode: "HT40",
+                    hwmode: "11g",
+                    id: 0,
+                    password: "TestPass",
+                },
+                { enabled: false, id: 1 },
+            ],
+        };
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            endpoint,
+            data,
+            expect.anything()
+        );
+    });
+
+    it("Post form: guest network.", () => {
+        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();
+        const data = {
+            devices: [
+                {
+                    SSID: "TestSSID1",
+                    channel: 60,
+                    enabled: true,
+                    guest_wifi: {
+                        SSID: "TestGuestSSID",
+                        enabled: true,
+                        password: "test_password",
+                    },
+                    hidden: false,
+                    htmode: "HT40",
+                    hwmode: "11a",
+                    id: 0,
+                    password: "TestPass",
+                },
+                { enabled: false, id: 1 },
+            ],
+        };
+        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 two devices", () => {
+        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" },
+        ];
+        expect(validator(threeDevices)).toEqual(threeDevicesFormErrors);
+    });
+
+    it("ByteCount function", () => {
+        expect(byteCount("abc")).toEqual(3);
+    });
+});

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

@@ -0,0 +1,396 @@
+/*
+ * Copyright (C) 2019 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 wifiSettingsFixture() {
+    return {
+        devices: [
+            {
+                SSID: "TestSSID1",
+                available_bands: [
+                    {
+                        available_channels: [
+                            {
+                                frequency: 2412,
+                                number: 1,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2417,
+                                number: 2,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2422,
+                                number: 3,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2427,
+                                number: 4,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2432,
+                                number: 5,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2437,
+                                number: 6,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2442,
+                                number: 7,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2447,
+                                number: 8,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2452,
+                                number: 9,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2457,
+                                number: 10,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2462,
+                                number: 11,
+                                radar: false,
+                            },
+                        ],
+                        available_htmodes: [
+                            "NOHT",
+                            "HT20",
+                            "HT40",
+                            "VHT20",
+                            "VHT40",
+                            "VHT80",
+                        ],
+                        hwmode: "11g",
+                    },
+                    {
+                        available_channels: [
+                            {
+                                frequency: 5180,
+                                number: 36,
+                                radar: false,
+                            },
+                            {
+                                frequency: 5200,
+                                number: 40,
+                                radar: false,
+                            },
+                            {
+                                frequency: 5220,
+                                number: 44,
+                                radar: false,
+                            },
+                            {
+                                frequency: 5240,
+                                number: 48,
+                                radar: false,
+                            },
+                            {
+                                frequency: 5260,
+                                number: 52,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5280,
+                                number: 56,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5300,
+                                number: 60,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5320,
+                                number: 64,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5500,
+                                number: 100,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5520,
+                                number: 104,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5540,
+                                number: 108,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5560,
+                                number: 112,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5580,
+                                number: 116,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5600,
+                                number: 120,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5620,
+                                number: 124,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5640,
+                                number: 128,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5660,
+                                number: 132,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5680,
+                                number: 136,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5700,
+                                number: 140,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5720,
+                                number: 144,
+                                radar: true,
+                            },
+                            {
+                                frequency: 5745,
+                                number: 149,
+                                radar: false,
+                            },
+                            {
+                                frequency: 5765,
+                                number: 153,
+                                radar: false,
+                            },
+                            {
+                                frequency: 5785,
+                                number: 157,
+                                radar: false,
+                            },
+                            {
+                                frequency: 5805,
+                                number: 161,
+                                radar: false,
+                            },
+                            {
+                                frequency: 5825,
+                                number: 165,
+                                radar: false,
+                            },
+                        ],
+                        available_htmodes: [
+                            "NOHT",
+                            "HT20",
+                            "HT40",
+                            "VHT20",
+                            "VHT40",
+                            "VHT80",
+                        ],
+                        hwmode: "11a",
+                    },
+                ],
+                channel: 60,
+                enabled: false,
+                guest_wifi: {
+                    SSID: "TestGuestSSID",
+                    enabled: false,
+                    password: "",
+                },
+                hidden: false,
+                htmode: "HT40",
+                hwmode: "11a",
+                id: 0,
+                password: "TestPass",
+            },
+            {
+                SSID: "Turris",
+                available_bands: [
+                    {
+                        available_channels: [
+                            {
+                                frequency: 2412,
+                                number: 1,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2417,
+                                number: 2,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2422,
+                                number: 3,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2427,
+                                number: 4,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2432,
+                                number: 5,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2437,
+                                number: 6,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2442,
+                                number: 7,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2447,
+                                number: 8,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2452,
+                                number: 9,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2457,
+                                number: 10,
+                                radar: false,
+                            },
+                            {
+                                frequency: 2462,
+                                number: 11,
+                                radar: false,
+                            },
+                        ],
+                        available_htmodes: ["NOHT", "HT20", "HT40"],
+                        hwmode: "11g",
+                    },
+                ],
+                channel: 11,
+                enabled: false,
+                guest_wifi: {
+                    SSID: "TestSSID",
+                    enabled: false,
+                    password: "",
+                },
+                hidden: false,
+                htmode: "HT40",
+                hwmode: "11g",
+                id: 1,
+                password: "TestPass",
+            },
+        ],
+    };
+}
+const oneDevice = {
+    devices: [
+        {
+            SSID: "Turris1",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass",
+        },
+    ],
+};
+
+const twoDevices = {
+    devices: [
+        {
+            SSID: "",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass",
+        },
+        {
+            SSID: "Turris2",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass",
+        },
+    ],
+};
+
+const threeDevices = {
+    devices: [
+        {
+            SSID: "Turris1",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass",
+        },
+        {
+            SSID: "Turris2",
+            channel: 60,
+            enabled: false,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass",
+        },
+        {
+            SSID: "Turris3",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "",
+        },
+    ],
+};
+
+export { oneDevice, twoDevices, threeDevices };

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

@@ -0,0 +1,921 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+@@ -250,207 +250,95 @@
+              value=\\"0\\"
+            >
+              auto
+            </option>
+            <option
+-             value=\\"36\\"
++             value=\\"1\\"
+            >
+              
+-                         36
+-                         (5180 MHz )
++                         1
++                         (2412 MHz )
+                      
+            </option>
+            <option
+-             value=\\"40\\"
++             value=\\"2\\"
+            >
+              
+-                         40
+-                         (5200 MHz )
++                         2
++                         (2417 MHz )
+                      
+            </option>
+            <option
+-             value=\\"44\\"
++             value=\\"3\\"
+            >
+              
+-                         44
+-                         (5220 MHz )
++                         3
++                         (2422 MHz )
+                      
+            </option>
+            <option
+-             value=\\"48\\"
+-           >
+-             
+-                         48
+-                         (5240 MHz )
+-                     
+-           </option>
+-           <option
+-             value=\\"52\\"
+-           >
+-             
+-                         52
+-                         (5260 MHz  ,DFS)
+-                     
+-           </option>
+-           <option
+-             value=\\"56\\"
+-           >
+-             
+-                         56
+-                         (5280 MHz  ,DFS)
+-                     
+-           </option>
+-           <option
+-             value=\\"60\\"
++             value=\\"4\\"
+            >
+              
+-                         60
+-                         (5300 MHz  ,DFS)
++                         4
++                         (2427 MHz )
+                      
+            </option>
+            <option
+-             value=\\"64\\"
++             value=\\"5\\"
+            >
+              
+-                         64
+-                         (5320 MHz  ,DFS)
++                         5
++                         (2432 MHz )
+                      
+            </option>
+            <option
+-             value=\\"100\\"
++             value=\\"6\\"
+            >
+              
+-                         100
+-                         (5500 MHz  ,DFS)
++                         6
++                         (2437 MHz )
+                      
+            </option>
+            <option
+-             value=\\"104\\"
++             value=\\"7\\"
+            >
+              
+-                         104
+-                         (5520 MHz  ,DFS)
++                         7
++                         (2442 MHz )
+                      
+            </option>
+            <option
+-             value=\\"108\\"
++             value=\\"8\\"
+            >
+              
+-                         108
+-                         (5540 MHz  ,DFS)
++                         8
++                         (2447 MHz )
+                      
+            </option>
+            <option
+-             value=\\"112\\"
++             value=\\"9\\"
+            >
+              
+-                         112
+-                         (5560 MHz  ,DFS)
++                         9
++                         (2452 MHz )
+                      
+            </option>
+            <option
+-             value=\\"116\\"
++             value=\\"10\\"
+            >
+              
+-                         116
+-                         (5580 MHz  ,DFS)
++                         10
++                         (2457 MHz )
+                      
+            </option>
+            <option
+-             value=\\"120\\"
++             value=\\"11\\"
+            >
+              
+-                         120
+-                         (5600 MHz  ,DFS)
+-                     
+-           </option>
+-           <option
+-             value=\\"124\\"
+-           >
+-             
+-                         124
+-                         (5620 MHz  ,DFS)
+-                     
+-           </option>
+-           <option
+-             value=\\"128\\"
+-           >
+-             
+-                         128
+-                         (5640 MHz  ,DFS)
+-                     
+-           </option>
+-           <option
+-             value=\\"132\\"
+-           >
+-             
+-                         132
+-                         (5660 MHz  ,DFS)
+-                     
+-           </option>
+-           <option
+-             value=\\"136\\"
+-           >
+-             
+-                         136
+-                         (5680 MHz  ,DFS)
+-                     
+-           </option>
+-           <option
+-             value=\\"140\\"
+-           >
+-             
+-                         140
+-                         (5700 MHz  ,DFS)
+-                     
+-           </option>
+-           <option
+-             value=\\"144\\"
+-           >
+-             
+-                         144
+-                         (5720 MHz  ,DFS)
+-                     
+-           </option>
+-           <option
+-             value=\\"149\\"
+-           >
+-             
+-                         149
+-                         (5745 MHz )
+-                     
+-           </option>
+-           <option
+-             value=\\"153\\"
+-           >
+-             
+-                         153
+-                         (5765 MHz )
+-                     
+-           </option>
+-           <option
+-             value=\\"157\\"
+-           >
+-             
+-                         157
+-                         (5785 MHz )
+-                     
+-           </option>
+-           <option
+-             value=\\"161\\"
+-           >
+-             
+-                         161
+-                         (5805 MHz )
+-                     
+-           </option>
+-           <option
+-             value=\\"165\\"
+-           >
+-             
+-                         165
+-                         (5825 MHz )
++                         11
++                         (2462 MHz )
+                      
+            </option>
+          </select>
+        </div>
+        <div"
+`;
+
+exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
+<DocumentFragment>
+  <div
+    class="card p-4 col-sm-12 col-lg-12 p-0 mb-3"
+  >
+    <form>
+      <div
+        class="form-group switch"
+      >
+        <div
+          class="custom-control custom-switch custom-control-inline switch-heading"
+        >
+          <input
+            class="custom-control-input"
+            id="1"
+            type="checkbox"
+          />
+          <label
+            class="custom-control-label"
+            for="1"
+          >
+            <h2>
+              Wi-Fi 1
+            </h2>
+          </label>
+        </div>
+      </div>
+      <hr />
+      <div
+        class="form-group switch"
+      >
+        <div
+          class="custom-control custom-switch custom-control-inline switch-heading"
+        >
+          <input
+            class="custom-control-input"
+            id="2"
+            type="checkbox"
+          />
+          <label
+            class="custom-control-label"
+            for="2"
+          >
+            <h2>
+              Wi-Fi 2
+            </h2>
+          </label>
+        </div>
+      </div>
+      <div
+        class="text-right"
+      >
+        <button
+          class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
+          type="submit"
+        >
+          Save
+        </button>
+      </div>
+    </form>
+  </div>
+  <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="col-sm-12 col-lg-12 p-0 mb-3 text-right"
+  >
+    <button
+      class="btn btn-warning col-sm-12 col-md-3 col-lg-2"
+      type="button"
+    >
+      Reset Wi-Fi Settings
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+@@ -479,10 +479,94 @@
+          Parameters of the guest network can be set in the Guest network tab.
+          
+            </small>
+          </div>
+        </div>
++       <div
++         class=\\"form-group\\"
++       >
++         <label
++           for=\\"20\\"
++         >
++           SSID
++         </label>
++         <div
++           class=\\"input-group\\"
++         >
++           <input
++             class=\\"form-control\\"
++             id=\\"20\\"
++             type=\\"text\\"
++             value=\\"TestGuestSSID\\"
++           />
++           <div
++             class=\\"input-group-append\\"
++           >
++             <button
++               class=\\"input-group-text\\"
++               type=\\"button\\"
++             >
++               <img
++                 alt=\\"QR\\"
++                 src=\\"/reforis/static/reforis/imgs/QR_icon.svg\\"
++                 style=\\"opacity: 0.67;\\"
++                 width=\\"20\\"
++               />
++             </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\\"
++         >
++           Password
++         </label>
++         <div
++           class=\\"input-group\\"
++         >
++           <input
++             autocomplete=\\"new-password\\"
++             class=\\"form-control  is-invalid\\"
++             id=\\"21\\"
++             required=\\"\\"
++             type=\\"password\\"
++             value=\\"\\"
++           />
++           <div
++             class=\\"input-group-append\\"
++           >
++             <button
++               class=\\"input-group-text\\"
++               type=\\"button\\"
++             >
++               <i
++                 class=\\"fa fa-eye\\"
++               />
++             </button>
++           </div>
++         </div>
++         <div
++           class=\\"invalid-feedback\\"
++         >
++           Password must contain at least 8 symbols
++         </div>
++         <small
++           class=\\"form-text text-muted\\"
++         >
++           
++         WPA2 pre-shared key, that is required to connect to the network.
++     
++         </small>
++       </div>
+        <hr />
+        <div
+          class=\\"form-group switch\\"
+        >
+          <div
+@@ -506,10 +590,11 @@
+        <div
+          class=\\"text-right\\"
+        >
+          <button
+            class=\\"btn btn-primary  col-sm-12 col-md-3 col-lg-2\\"
++           disabled=\\"\\"
+            type=\\"submit\\"
+          >
+            Save
+          </button>
+        </div>"
+`;
+
+exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+@@ -22,10 +22,467 @@
+                Wi-Fi 1
+              </h2>
+            </label>
+          </div>
+        </div>
++       <div
++         class=\\"form-group\\"
++       >
++         <label
++           for=\\"4\\"
++         >
++           SSID
++         </label>
++         <div
++           class=\\"input-group\\"
++         >
++           <input
++             class=\\"form-control\\"
++             id=\\"4\\"
++             required=\\"\\"
++             type=\\"text\\"
++             value=\\"TestSSID1\\"
++           />
++           <div
++             class=\\"input-group-append\\"
++           >
++             <button
++               class=\\"input-group-text\\"
++               type=\\"button\\"
++             >
++               <img
++                 alt=\\"QR\\"
++                 src=\\"/reforis/static/reforis/imgs/QR_icon.svg\\"
++                 style=\\"opacity: 0.67;\\"
++                 width=\\"20\\"
++               />
++             </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=\\"5\\"
++         >
++           Password
++         </label>
++         <div
++           class=\\"input-group\\"
++         >
++           <input
++             autocomplete=\\"new-password\\"
++             class=\\"form-control\\"
++             id=\\"5\\"
++             required=\\"\\"
++             type=\\"password\\"
++             value=\\"TestPass\\"
++           />
++           <div
++             class=\\"input-group-append\\"
++           >
++             <button
++               class=\\"input-group-text\\"
++               type=\\"button\\"
++             >
++               <i
++                 class=\\"fa fa-eye\\"
++               />
++             </button>
++           </div>
++         </div>
++         <small
++           class=\\"form-text text-muted\\"
++         >
++           
++         WPA2 pre-shared key, that is required to connect to the network.
++     
++         </small>
++       </div>
++       <div
++         class=\\"form-group\\"
++       >
++         <div
++           class=\\"custom-control custom-checkbox \\"
++         >
++           <input
++             class=\\"custom-control-input\\"
++             id=\\"6\\"
++             type=\\"checkbox\\"
++           />
++           <label
++             class=\\"custom-control-label\\"
++             for=\\"6\\"
++           >
++             Hide SSID
++             <small
++               class=\\"form-text text-muted\\"
++             >
++               If set, network is not visible when scanning for available networks.
++             </small>
++           </label>
++         </div>
++       </div>
++       <div
++         class=\\"form-group\\"
++       >
++         <label
++           class=\\"d-block\\"
++           for=\\"7\\"
++         >
++           GHz
++         </label>
++         <div
++           class=\\"custom-control custom-radio custom-control-inline\\"
++         >
++           <input
++             class=\\"custom-control-input\\"
++             id=\\"hwmode-0-0\\"
++             name=\\"hwmode-0\\"
++             type=\\"radio\\"
++             value=\\"11g\\"
++           />
++           <label
++             class=\\"custom-control-label\\"
++             for=\\"hwmode-0-0\\"
++           >
++             2.4
++           </label>
++         </div>
++         <div
++           class=\\"custom-control custom-radio custom-control-inline\\"
++         >
++           <input
++             checked=\\"\\"
++             class=\\"custom-control-input\\"
++             id=\\"hwmode-0-1\\"
++             name=\\"hwmode-0\\"
++             type=\\"radio\\"
++             value=\\"11a\\"
++           />
++           <label
++             class=\\"custom-control-label\\"
++             for=\\"hwmode-0-1\\"
++           >
++             5
++           </label>
++         </div>
++         <small
++           class=\\"form-text text-muted\\"
++         >
++           
++         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
++         does not carry so well indoors.
++         </small>
++       </div>
++       <div
++         class=\\"form-group\\"
++       >
++         <label
++           for=\\"8\\"
++         >
++           802.11n/ac mode
++         </label>
++         <select
++           class=\\"custom-select\\"
++           id=\\"8\\"
++         >
++           <option
++             value=\\"HT20\\"
++           >
++             802.11n - 20 MHz wide channel
++           </option>
++           <option
++             value=\\"HT40\\"
++           >
++             802.11n - 40 MHz wide channel
++           </option>
++           <option
++             value=\\"NOHT\\"
++           >
++             Disabled
++           </option>
++           <option
++             value=\\"VHT20\\"
++           >
++             802.11ac - 20 MHz wide channel
++           </option>
++           <option
++             value=\\"VHT40\\"
++           >
++             802.11ac - 40 MHz wide channel
++           </option>
++           <option
++             value=\\"VHT80\\"
++           >
++             802.11ac - 80 MHz wide channel
++           </option>
++         </select>
++         <small
++           class=\\"form-text text-muted\\"
++         >
++           
++         Change this to adjust 802.11n/ac mode of operation. 802.11n with 40 MHz wide channels can yield higher
++         throughput but can cause more interference in the network. If you don't know what to choose, use the default
++         option with 20 MHz wide channel.
++     
++         </small>
++       </div>
++       <div
++         class=\\"form-group\\"
++       >
++         <label
++           for=\\"9\\"
++         >
++           Channel
++         </label>
++         <select
++           class=\\"custom-select\\"
++           id=\\"9\\"
++         >
++           <option
++             value=\\"0\\"
++           >
++             auto
++           </option>
++           <option
++             value=\\"36\\"
++           >
++             
++                         36
++                         (5180 MHz )
++                     
++           </option>
++           <option
++             value=\\"40\\"
++           >
++             
++                         40
++                         (5200 MHz )
++                     
++           </option>
++           <option
++             value=\\"44\\"
++           >
++             
++                         44
++                         (5220 MHz )
++                     
++           </option>
++           <option
++             value=\\"48\\"
++           >
++             
++                         48
++                         (5240 MHz )
++                     
++           </option>
++           <option
++             value=\\"52\\"
++           >
++             
++                         52
++                         (5260 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"56\\"
++           >
++             
++                         56
++                         (5280 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"60\\"
++           >
++             
++                         60
++                         (5300 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"64\\"
++           >
++             
++                         64
++                         (5320 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"100\\"
++           >
++             
++                         100
++                         (5500 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"104\\"
++           >
++             
++                         104
++                         (5520 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"108\\"
++           >
++             
++                         108
++                         (5540 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"112\\"
++           >
++             
++                         112
++                         (5560 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"116\\"
++           >
++             
++                         116
++                         (5580 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"120\\"
++           >
++             
++                         120
++                         (5600 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"124\\"
++           >
++             
++                         124
++                         (5620 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"128\\"
++           >
++             
++                         128
++                         (5640 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"132\\"
++           >
++             
++                         132
++                         (5660 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"136\\"
++           >
++             
++                         136
++                         (5680 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"140\\"
++           >
++             
++                         140
++                         (5700 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"144\\"
++           >
++             
++                         144
++                         (5720 MHz  ,DFS)
++                     
++           </option>
++           <option
++             value=\\"149\\"
++           >
++             
++                         149
++                         (5745 MHz )
++                     
++           </option>
++           <option
++             value=\\"153\\"
++           >
++             
++                         153
++                         (5765 MHz )
++                     
++           </option>
++           <option
++             value=\\"157\\"
++           >
++             
++                         157
++                         (5785 MHz )
++                     
++           </option>
++           <option
++             value=\\"161\\"
++           >
++             
++                         161
++                         (5805 MHz )
++                     
++           </option>
++           <option
++             value=\\"165\\"
++           >
++             
++                         165
++                         (5825 MHz )
++                     
++           </option>
++         </select>
++       </div>
++       <div
++         class=\\"form-group\\"
++       >
++         <div
++           class=\\"custom-control custom-switch\\"
++         >
++           <input
++             class=\\"custom-control-input\\"
++             id=\\"10\\"
++             type=\\"checkbox\\"
++           />
++           <label
++             class=\\"custom-control-label\\"
++             for=\\"10\\"
++           >
++             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>
++         </div>
++       </div>
+        <hr />
+        <div
+          class=\\"form-group switch\\"
+        >
+          <div"
+`;

src/common/WiFiSettings/constants.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2019 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 HTMODES = {
+    NOHT: _("Disabled"),
+    HT20: _("802.11n - 20 MHz wide channel"),
+    HT40: _("802.11n - 40 MHz wide channel"),
+    VHT20: _("802.11ac - 20 MHz wide channel"),
+    VHT40: _("802.11ac - 40 MHz wide channel"),
+    VHT80: _("802.11ac - 80 MHz wide channel"),
+    VHT160: _("802.11ac - 160 MHz wide channel"),
+};
+export const HWMODES = {
+    "11g": "2.4",
+    "11a": "5",
+};
+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."
+    ),
+    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
+        does not carry so well indoors.`),
+    htmode: _(`
+        Change this to adjust 802.11n/ac mode of operation. 802.11n with 40 MHz wide channels can yield higher
+        throughput but can cause more interference in the network. If you don't know what to choose, use the default
+        option with 20 MHz wide channel.
+    `),
+    guest_wifi_enabled: _(`
+        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.
+        `),
+};

src/common/WiFiSettings/qrCodeHelpers.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2019 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 createAndDownloadPdf(SSID, password) {
+    const docDefinition = {
+        content: [
+            {
+                text: "Wi-Fi",
+                style: "header",
+                fontSize: 55,
+                alignment: "center",
+            },
+            {
+                qr: toQRCodeContent(SSID, password),
+                fit: "350",
+                margin: [0, 80],
+                alignment: "center",
+            },
+            {
+                text: `SSID: ${SSID}`,
+                fontSize: 25,
+                alignment: "center",
+            },
+            {
+                text: `Password: ${password}`,
+                fontSize: 25,
+                alignment: "center",
+            },
+        ],
+    };
+
+    // pdfmake is exposed by reForis main application. Thus we can use it from globals.
+    window.pdfMake.createPdf(docDefinition).download("wifi.pdf");
+}
+
+export function toQRCodeContent(SSID, password) {
+    return `WIFI:S:${SSID};T:WPA2;P:${password};;`;
+}

src/common/__tests__/RebootButton.test.js

@@ -7,7 +7,13 @@
 
 import React from "react";
 
-import { fireEvent, getByText, queryByText, render, wait } from "customTestRender";
+import {
+    fireEvent,
+    getByText,
+    queryByText,
+    render,
+    wait,
+} from "customTestRender";
 import mockAxios from "jest-mock-axios";
 import { mockJSONError } from "testUtils/network";
 import { mockSetAlert } from "testUtils/alertContextMock";
@@ -17,39 +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

@@ -12,18 +12,15 @@ import { STATES, SubmitButton } from "../components/SubmitButton";
 
 describe("<SubmitButton/>", () => {
     it("Render ready", () => {
-        const { container } = render(<SubmitButton state={STATES.READY}/>);
-        expect(container)
-            .toMatchSnapshot();
+        const { container } = render(<SubmitButton state={STATES.READY} />);
+        expect(container).toMatchSnapshot();
     });
     it("Render saving", () => {
-        const { container } = render(<SubmitButton state={STATES.SAVING}/>);
-        expect(container)
-            .toMatchSnapshot();
+        const { container } = render(<SubmitButton state={STATES.SAVING} />);
+        expect(container).toMatchSnapshot();
     });
     it("Render load", () => {
-        const { container } = render(<SubmitButton state={STATES.LOAD}/>);
-        expect(container)
-            .toMatchSnapshot();
+        const { container } = render(<SubmitButton state={STATES.LOAD} />);
+        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

@@ -5,99 +5,113 @@
  * See /LICENSE for more information.
  */
 
-import React from 'react';
+import React from "react";
 
-import { act, fireEvent, render, waitForElement } from 'customTestRender';
-import mockAxios from 'jest-mock-axios';
-import { ForisForm } from "../components/ForisForm";
+import { act, fireEvent, render, waitForElement } from "customTestRender";
+import mockAxios from "jest-mock-axios";
 import { WebSockets } from "webSockets/WebSockets";
-
+import { ForisForm } from "../components/ForisForm";
 
 // It's possible to unittest each hooks via react-hooks-testing-library.
 // But it's better and easier to test it by test components which uses this hooks.
 
-const TestForm = ({formData, formErrors, setFormValue}) => {
-    return <>
+const TestForm = ({ formData, formErrors, setFormValue }) => (
+    <>
         <input
-            data-testid='test-input'
+            data-testid="test-input"
             value={formData.field}
-            onChange={setFormValue(value => ({field: {$set: value}}))}
+            onChange={setFormValue((value) => ({ field: { $set: value } }))}
         />
         <p>{formErrors.field}</p>
     </>
-};
+);
 
-describe('useForm hook.', () => {
+describe("useForm hook.", () => {
     let mockValidator;
     let mockPrepData;
     let mockPrepDataToSubmit;
     let input;
     let form;
-    const Child = jest.fn(props => <TestForm {...props}/>);
+    const Child = jest.fn((props) => <TestForm {...props} />);
 
     beforeEach(async () => {
-        mockPrepData = jest.fn(() => ({field: 'preparedData'}));
-        mockPrepDataToSubmit = jest.fn(() => ({field: 'preparedDataToSubmit'}));
-        mockValidator = jest.fn(data => data.field === 'invalidValue' ? {field: 'Error'} : {});
-        const {getByTestId, container} = render(
+        mockPrepData = jest.fn(() => ({ field: "preparedData" }));
+        mockPrepDataToSubmit = jest.fn(() => ({
+            field: "preparedDataToSubmit",
+        }));
+        mockValidator = jest.fn((data) =>
+            data.field === "invalidValue" ? { field: "Error" } : {}
+        );
+        const { getByTestId, container } = render(
             <ForisForm
                 ws={new WebSockets()}
                 // Just some module which exists...
                 forisConfig={{
-                    endpoint: 'testEndpoint',
-                    wsModule: 'testWSModule'
+                    endpoint: "testEndpoint",
+                    wsModule: "testWSModule",
                 }}
                 prepData={mockPrepData}
                 prepDataToSubmit={mockPrepDataToSubmit}
                 validator={mockValidator}
             >
-                <Child/>
+                <Child />
             </ForisForm>
         );
-        mockAxios.mockResponse({field: 'fetchedData'});
+        mockAxios.mockResponse({ field: "fetchedData" });
 
-        input = await waitForElement(() =>
-            getByTestId('test-input')
-        );
+        input = await waitForElement(() => getByTestId("test-input"));
         form = container.firstChild.firstChild;
     });
 
-    it('Validation on changing.', () => {
+    it("Validation on changing.", () => {
         expect(mockValidator).toHaveBeenCalledTimes(1);
         expect(Child).toHaveBeenCalledTimes(1);
         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'}})
-        expect(input.value).toBe('newValue');
+    it("Update text value.", () => {
+        fireEvent.change(input, {
+            target: { value: "newValue", type: "text" },
+        });
+        expect(input.value).toBe("newValue");
     });
 
-    it('Update text value.', () => {
-        fireEvent.change(input, {target: {value: 123, type: 'number'}})
-        expect(input.value).toBe('123');
+    it("Update text value.", () => {
+        fireEvent.change(input, { target: { value: 123, type: "number" } });
+        expect(input.value).toBe("123");
     });
 
-    it('Update checkbox value.', () => {
-        fireEvent.change(input, {target: {checked: true, type: 'checkbox'}})
+    it("Update checkbox value.", () => {
+        fireEvent.change(input, {
+            target: { checked: true, type: "checkbox" },
+        });
         expect(input.checked).toBe(true);
     });
 
-    it('Fetch data.', () => {
-        expect(mockAxios.get).toHaveBeenCalledWith('testEndpoint', expect.anything());
+    it("Fetch data.", () => {
+        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.', () => {
+    it("Submit.", () => {
         expect(mockAxios.get).toHaveBeenCalledTimes(1);
         expect(mockPrepDataToSubmit).toHaveBeenCalledTimes(0);
 
@@ -106,9 +120,9 @@ describe('useForm hook.', () => {
         expect(mockPrepDataToSubmit).toHaveBeenCalledTimes(1);
         expect(mockAxios.post).toHaveBeenCalledTimes(1);
         expect(mockAxios.post).toHaveBeenCalledWith(
-            'testEndpoint',
-            {'field': 'preparedDataToSubmit'},
-            expect.anything(),
+            "testEndpoint",
+            { field: "preparedDataToSubmit" },
+            expect.anything()
         );
     });
 });

src/form/__tests__/validation.test.js

@@ -11,128 +11,80 @@ import {
     validateIPv4Address,
     validateIPv6Address,
     validateIPv6Prefix,
-    validateMAC
-} from "validations";
+    validateMAC,
+} from "utils/validations";
 
 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

@@ -7,11 +7,10 @@
 
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { Prompt } from "react-router";
+import { Prompt } from "react-router-dom";
 
 import { ALERT_TYPES } from "../../bootstrap/Alert";
 import { API_STATE } from "../../api/utils";
-import { ErrorMessage } from "../../utils/ErrorMessage";
 import { formFieldsSize } from "../../bootstrap/constants";
 import { Spinner } from "../../bootstrap/Spinner";
 import { useAlert } from "../../alertContext/AlertContext";
@@ -19,6 +18,7 @@ import { useAPIPost } from "../../api/hooks";
 
 import { useForisModule, useForm } from "../hooks";
 import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
+import { ErrorMessage } from "../../utils/ErrorMessage";
 
 ForisForm.propTypes = {
     /** Optional WebSocket object. See `scr/common/WebSockets.js`.
@@ -27,7 +27,7 @@ ForisForm.propTypes = {
     ws: PropTypes.object,
     /** Foris configuration object. See usage in main components. */
     forisConfig: PropTypes.shape({
-        /** reForis Flask aplication API endpoint from `src/common/API.js`. */
+        /** reForis Flask application API endpoint from `src/common/API.js`. */
         endpoint: PropTypes.string.isRequired,
         /** `foris-controller` module name to be used via WebSockets.
          *  It can be use only with `ws` prop.
@@ -38,29 +38,39 @@ ForisForm.propTypes = {
          * */
         wsAction: PropTypes.string,
     }).isRequired,
-    /** Function to prepare data recived from the API before using in forms. */
-    prepData: PropTypes.func.isRequired,
+    /** Function to prepare data received from the API before using in forms. */
+    prepData: PropTypes.func,
     /** Function to prepare data from form before submitting. */
-    prepDataToSubmit: PropTypes.func.isRequired,
+    prepDataToSubmit: PropTypes.func,
     /** Function to handle response to POST request. */
-    postCallback: PropTypes.func.isRequired,
+    postCallback: PropTypes.func,
     /** Validate data and provide validation object. Then validation errors passed to children. */
-    validator: PropTypes.func.isRequired,
+    validator: PropTypes.func,
     /** Disables form */
     disabled: PropTypes.bool,
-    /** reForis form components. */
-    children: PropTypes.node.isRequired,
     /** Optional override of form submit callback */
     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."
+            );
         }
     },
 };
@@ -73,7 +83,12 @@ ForisForm.defaultProps = {
     disabled: false,
 };
 
-/** Serves as HOC for all foris forms components. */
+/** Serves as HOC for all foris forms components.
+ *
+ * As `<Prompt />` from `react-router-dom` is used in this component then it required to
+ * use exposed `ReactRouterDOM` object from `react-router-dom` library which is exposed by reForis.
+ * See README for more information.
+ * */
 export function ForisForm({
     ws,
     forisConfig,
@@ -83,10 +98,14 @@ export function ForisForm({
     validator,
     disabled,
     onSubmitOverridden,
+    formReference,
     children,
 }) {
-    const [formState, onFormChangeHandler, resetFormData] = useForm(validator, prepData);
-    const [setAlert] = useAlert();
+    const [formState, onFormChangeHandler, resetFormData] = useForm(
+        validator,
+        prepData
+    );
+    const [setAlert, dismissAlert] = useAlert();
 
     const [forisModuleState] = useForisModule(ws, forisConfig);
     useEffect(() => {
@@ -106,7 +125,7 @@ export function ForisForm({
     }, [postCallback, postState.state, postState.data, setAlert]);
 
     if (forisModuleState.state === API_STATE.ERROR) {
-        return <ErrorMessage />;
+        return <ErrorMessage message={forisModuleState.data} />;
     }
     if (!formState.data) {
         return <Spinner />;
@@ -115,6 +134,7 @@ export function ForisForm({
     function onSubmitHandler(event) {
         event.preventDefault();
         resetFormData();
+        dismissAlert();
         const copiedFormData = JSON.parse(JSON.stringify(formState.data));
         const preparedData = prepDataToSubmit(copiedFormData);
         post({ data: preparedData });
@@ -130,34 +150,45 @@ 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 (
         <div className={formFieldsSize}>
             <Prompt message={getMessageOnLeavingPage} />
-            <form onSubmit={onSubmit}>
+            <form onSubmit={onSubmit} ref={formReference}>
                 {childrenWithFormProps}
                 <div className="text-right">
                     <SubmitButton

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
-                ? (
+            {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 } } }),
-                        )}
-
+                    onChange={setFormValue((value) => ({
+                        mac_settings: { custom_mac: { $set: value } },
+                    }))}
                     {...props}
                 />
-                )
-                : null}
+            ) : 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 }) {
@@ -44,7 +43,6 @@ export function SubmitButton({ disabled, state, ...props }) {
             loading={loadingSubmitButton}
             disabled={disableSubmitButton}
             forisFormSize
-
             {...props}
         >
             {labelSubmitButton}

src/form/hooks.js

@@ -23,29 +23,31 @@ export function useForm(validator, dataPreprocessor) {
         errors: {},
     });
 
-    const onFormReload = useCallback((data) => {
+    const onFormReload = useCallback(
+        (data) => {
             dispatch({
                 type: FORM_ACTIONS.resetData,
                 data,
                 dataPreprocessor,
                 validator,
             });
-    }, [dataPreprocessor, validator]);
+        },
+        [dataPreprocessor, validator]
+    );
 
-    const onFormChangeHandler = useCallback((updateRule) => (event) => {
+    const onFormChangeHandler = useCallback(
+        (updateRule) => (event) => {
             dispatch({
                 type: FORM_ACTIONS.updateValue,
                 value: getChangedValue(event.target),
                 updateRule,
                 validator,
             });
-    }, [validator]);
+        },
+        [validator]
+    );
 
-    return [
-        state,
-        onFormChangeHandler,
-        onFormReload,
-    ];
+    return [state, onFormChangeHandler, onFormReload];
 }
 
 function formReducer(state, action) {
@@ -64,7 +66,9 @@ function formReducer(state, action) {
                 return { ...state, initialData: state.data };
             }
 
-        const data = action.dataPreprocessor ? action.dataPreprocessor(action.data) : action.data;
+            const data = action.dataPreprocessor
+                ? action.dataPreprocessor(action.data)
+                : action.data;
             return {
                 data,
                 initialData: data,

src/index.js

@@ -30,25 +30,21 @@ 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";
 // 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
@@ -57,15 +53,27 @@ 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 "./forisUrls";
+export { ForisURLs, REFORIS_URL_PREFIX } from "./utils/forisUrls";
 
 // Validation
 export {
@@ -76,7 +84,7 @@ export {
     validateDUID,
     validateMAC,
     validateMultipleEmails,
-} from "./validations";
+} from "./utils/validations";
 
 // Alert context
 export { AlertContextProvider, useAlert } from "./alertContext/AlertContext";

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

@@ -9,7 +9,7 @@
 
 import React from "react";
 import { UIDReset } from "react-uid";
-import { StaticRouter } from "react-router";
+import { StaticRouter } from "react-router-dom";
 import { render } from "@testing-library/react";
 import PropTypes from "prop-types";
 
@@ -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/mockGlobals.js

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+// Mock babel (gettext)
+global._ = (str) => str;
+global.ngettext = (str) => str;
+global.babel = { format: (str) => str };
+global.ForisTranslations = { locale: "en" };

src/testUtils/network.js

@@ -5,8 +5,10 @@
  * See /LICENSE for more information.
  */
 
-import mockAxios from 'jest-mock-axios';
+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/testUtils/setup.js

@@ -5,29 +5,24 @@
  * See /LICENSE for more information.
  */
 
-import mockAxios from 'jest-mock-axios';
-import moment from 'moment-timezone';
+import mockAxios from "jest-mock-axios";
+import moment from "moment-timezone";
+import "./mockGlobals";
 
 // Setup axios cleanup
 global.afterEach(() => {
     mockAxios.reset();
 });
 
-// Mock babel (gettext)
-global._ = str => str;
-global.ngettext = str => str;
-global.babel = {format: (str) => str};
-global.ForisTranslations = {};
-
 // Mock web sockets
 window.WebSocket = jest.fn();
 
 // Mock scrollIntoView
 global.HTMLElement.prototype.scrollIntoView = () => {};
 
-jest.doMock('moment', () => {
-    moment.tz.setDefault('UTC');
+// Mock timezone utilities
+jest.doMock("moment", () => {
+    moment.tz.setDefault("UTC");
     return moment;
 });
-
 Date.now = jest.fn(() => new Date(Date.UTC(2019, 1, 1, 12, 13, 14)).valueOf());

src/utils/ErrorMessage.js

@@ -6,11 +6,16 @@
  */
 
 import React from "react";
+import PropTypes from "prop-types";
 
-export function ErrorMessage() {
-    return (
-        <p className="text-center text-danger">
-            {_("An error occurred while fetching data.")}
-        </p>
-    );
+ErrorMessage.propTypes = {
+    message: PropTypes.string,
+};
+
+ErrorMessage.defaultProps = {
+    message: _("An error occurred while fetching data."),
+};
+
+export function ErrorMessage({ message }) {
+    return <p className="text-center text-danger">{message}</p>;
 }

src/utils/__tests__/conditionalHOCs.test.js

@@ -7,10 +7,15 @@
 
 import React from "react";
 import { render } from "customTestRender";
-import {
-    withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
-} from "../conditionalHOCs";
 import { API_STATE } from "api/utils";
+import {
+    withEither,
+    withSpinner,
+    withSending,
+    withSpinnerOnSending,
+    withError,
+    withErrorMessage,
+} from "../conditionalHOCs";
 
 describe("conditional HOCs", () => {
     const First = () => <p>First</p>;
@@ -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

@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2019 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 { 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"
+        );
+        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"
+        );
+    });
+
+    it("should convert with custom input format", () => {
+        expect(
+            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",
+            })
+        ).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",
+            })
+        ).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) => {
+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

@@ -0,0 +1,9 @@
+import moment from "moment";
+
+export function toLocaleDateString(
+    date,
+    { inputFormat, outputFormat = "LLL" } = {}
+) {
+    const parsedDate = inputFormat ? moment(date, inputFormat) : moment(date);
+    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

@@ -10,6 +10,8 @@ export const REFORIS_API_URL_PREFIX = `${REFORIS_URL_PREFIX}/api`;
 
 export const ForisURLs = {
     login: `${REFORIS_URL_PREFIX}/login`,
+    logout: `${REFORIS_URL_PREFIX}/logout`,
+
     static: `${REFORIS_URL_PREFIX}/static/reforis`,
     wifi: `${REFORIS_URL_PREFIX}/network-settings/wifi`,
 
@@ -18,10 +20,16 @@ export const ForisURLs = {
         updates: `${REFORIS_URL_PREFIX}/package-management/updates`,
     },
 
+    storage: `${REFORIS_URL_PREFIX}/storage`,
+
     // 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",
+    rebootPage: "/administration/reboot",
     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]);