Merge branch 'dev' into 'master'

Dev

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

.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",
     },
 };

.gitlab-ci.yml

@@ -1,4 +1,4 @@
-image: node:8-alpine
+image: registry.nic.cz/turris/reforis/reforis/reforis-image
 
 stages:
     - test
@@ -6,7 +6,7 @@ stages:
     - publish
 
 before_script:
-  - apk add make
+    - apt-get update && apt-get install -y make
     - npm install
 
 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

@@ -1,20 +1,30 @@
-.PHONY: all install-js watch-js build-js collect-files pack publish-beta publish-latest lint test test-js-update-snapshots create-messages update-messages docs docs-watch clean
+# Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+#
+# This is free software, licensed under the GNU General Public License v3.
+# See /LICENSE for more information.
 
-DEV_PYTHON=python3.7
+PROJECT="Foris JS"
+# Retrieve Foris JS version from package.json 
+VERSION= $(shell sed -En "s/.*version['\"]: ['\"](.+)['\"].*/\1/p" package.json)
+COPYRIGHT_HOLDER="CZ.NIC, z.s.p.o. (https://www.nic.cz/)"
+MSGID_BUGS_ADDRESS="tech.support@turris.cz"
+
+DEV_PYTHON=python3
 VENV_NAME?=venv
 VENV_BIN=$(shell pwd)/$(VENV_NAME)/bin
 
+.PHONY: all
 all:
 	@echo "make install-js"
-	@echo "    Install dependencies"
-	@echo "make watch-js"
-	@echo "    Compile JS in watch mode."
-	@echo "make build-js"
-	@echo "    Compile JS."
-	@echo "make lint-js"
-	@echo "    Run linter"
-	@echo "make test-js"
-	@echo "    Run tests"
+	@echo "    Install npm dependencies."
+	@echo "make lint"
+	@echo "    Run linter on the project."
+	@echo "make test"
+	@echo "    Run tests on the project."
+	@echo "make test-js-watch"
+	@echo "    Run tests on the project in watch mode."
+	@echo "make test-js-update-snapshots"
+	@echo "    Update snapshots."
 	@echo "make create-messages"
 	@echo "    Create locale messages (.pot)."
 	@echo "make update-messages"
@@ -26,46 +36,93 @@ all:
 	@echo "make clean"
 	@echo "    Remove python artifacts and virtualenv."
 
+
+# Preparation
+
+.PHONY: venv
 venv: $(VENV_NAME)/bin/activate
 $(VENV_NAME)/bin/activate:
 	test -d $(VENV_NAME) || $(DEV_PYTHON) -m virtualenv -p $(DEV_PYTHON) $(VENV_NAME)
 	$(VENV_BIN)/$(DEV_PYTHON) -m pip install -r requirements.txt
 	touch $(VENV_NAME)/bin/activate
 
+
+# Installation
+
+.PHONY: install-js
 install-js: package.json
 	npm install --save-dev
 
-watch-js:
-	npm run build:watch
-build-js:
-	npm run build
 
+# Publishing
+
+.PHONY: collect-files
 collect-files:
 	sh scripts/collect_files.sh
+
+.PHONY: pack
 pack: collect-files
 	cd dist && npm pack
+
+.PHONY: publish-beta
 publish-beta: collect-files
 	sh scripts/publish.sh beta
+
+.PHONY: publish-latest
 publish-latest: collect-files
 	sh scripts/publish.sh latest
 
+
+# Linting
+
+.PHONY: lint
 lint:
 	npm run lint
 
+.PHONY: lint-js-fix
+lint-js-fix:
+	npm run lint:fix
+
+
+# Testing
+
+.PHONY: test
 test:
 	npm test
+
+.PHONY: test-js-watch
+test-js-watch:
+	cd $(JS_DIR); npm test -- --watch
+
+.PHONY: test-js-update-snapshots
 test-js-update-snapshots:
 	npm test -- -u
 
-create-messages: venv
-	$(VENV_BIN)/pybabel extract -F babel.cfg -o ./translations/forisjs.pot .
-update-messages: venv
-	$(VENV_BIN)/pybabel update -i ./translations/forisjs.pot -d ./translations -D forisjs
 
+# Translations
+
+.PHONY: create-messages
+create-messages: venv
+	$(VENV_BIN)/pybabel extract -F babel.cfg -o ./translations/forisjs.pot . --project=$(PROJECT) --version=$(VERSION) --copyright-holder=$(COPYRIGHT_HOLDER) --msgid-bugs-address=$(MSGID_BUGS_ADDRESS)
+
+.PHONY: update-messages
+update-messages: venv
+	$(VENV_BIN)/pybabel update -i ./translations/forisjs.pot -d ./translations -D forisjs --update-header-comment
+
+
+# Documentation
+
+.PHONY: docs
 docs:
 	npm run-script docs
+
+.PHONY: docs-watch
 docs-watch:
 	npm run-script docs:watch
 
+
+# Other
+
+.PHONY: clean
 clean:
 	rm -rf node_modules dist

README.md

@@ -1,4 +1,5 @@
 # foris-js
+
 Set of utils and common React elements for reForis.
 
 ## Publishing package
@@ -16,3 +17,36 @@ tagged `beta`. Versions names are based on commit SHA, e.g.
    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.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/components/Logo.js

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

docs/components/logo.svg

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

docs/development.md

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

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

docs/intro.md

@@ -1 +0,0 @@
-Foris JS library is set of componets and utils for Foris JS application and plugins.

docs/introduction.md

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

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,70 +1,66 @@
 {
     "name": "foris",
-  "version": "2.0.0",
-  "description": "Set of components and utils for Foris and its plugins.",
+    "version": "5.6.1",
+    "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
         "type": "git",
-    "url": "https://gitlab.labs.nic.cz/turris/reforis/forisjs.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.21.1",
+        "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": "^1.0.1",
+        "react-datetime": "^3.1.1",
         "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.0.4",
-    "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.6.2",
+        "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
-    "react-styleguidist": "^9.1.16",
-    "snapshot-diff": "^0.5.1",
-    "style-loader": "^1.0.0",
-    "webpack": "^4.41.0"
+        "react-router-dom": "^5.1.2"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.12.10",
+        "@babel/core": "^7.9.0",
+        "@babel/plugin-transform-runtime": "^7.9.0",
+        "@babel/preset-env": "^7.9.0",
+        "@babel/preset-react": "^7.9.4",
+        "@fortawesome/fontawesome-free": "^5.13.0",
+        "@testing-library/react": "^8.0.9",
+        "babel-loader": "^8.1.0",
+        "babel-polyfill": "^6.26.0",
+        "bootstrap": "^4.6.2",
+        "css-loader": "^5.2.4",
+        "eslint": "^6.8.0",
+        "eslint-config-prettier": "^6.11.0",
+        "eslint-config-reforis": "^1.0.0",
+        "eslint-plugin-prettier": "^3.1.4",
+        "file-loader": "^6.0.0",
+        "jest": "^25.2.0",
+        "jest-mock-axios": "^3.2.0",
+        "moment-timezone": "^0.5.34",
+        "prettier": "2.0.5",
+        "prop-types": "15.8.1",
+        "react": "16.9.0",
+        "react-dom": "16.9.0",
+        "react-router-dom": "^5.1.2",
+        "react-styleguidist": "^11.2.0",
+        "snapshot-diff": "^0.7.0",
+        "style-loader": "^1.2.1",
+        "webpack": "^5.68.0"
     },
     "scripts": {
-    "build": "rm -rf dist; babel src --out-dir dist --source-maps inline --copy-files",
-    "build:watch": "babel src --verbose --watch --out-dir dist --source-maps inline --copy-files",
         "lint": "eslint src",
+        "lint:fix": "eslint --fix src",
         "test": "jest",
         "test:watch": "jest --watch",
         "test:coverage": "jest --coverage --colors",

scripts/collect_files.sh

@@ -1,9 +1,13 @@
 #!/bin/sh
 
 # Collect files
-npm run build
-cp package.json README.md dist
+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__

scripts/publish.sh

@@ -6,8 +6,7 @@ then
     exit 1
 else
     cd dist
-    # Need to replace "_" with "-" as GitLab CI won't accept secret vars with "-"
-    echo "//registry.npmjs.org/:_authToken=$(echo "$NPM_TOKEN" | tr _ -)" > .npmrc
+    echo "//registry.npmjs.org/:_authToken=$(echo "$NPM_TOKEN")" > .npmrc
     echo "unsafe-perm = true" >> ~/.npmrc
     if test "$1" = "beta"
     then

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/api/hooks.js

@@ -1,17 +1,19 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
 
-import {
-    useCallback, useEffect, useReducer, useState,
-} from "react";
+import { useCallback, useEffect, useReducer, useState } from "react";
 
-import { ForisURLs } from "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 +25,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 +56,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];
     };
 }
@@ -77,9 +83,19 @@ function APIReducer(state, action) {
                 data: action.payload,
             };
         case API_ACTIONS.FAILURE:
-        if (action.status === 403) {
-            window.location.assign(ForisURLs.login);
+            if (action.status === 401) {
+                window.location.reload();
             }
+
+            // Not an API error - should be rethrown.
+            if (
+                action.payload &&
+                action.payload.stack &&
+                action.payload.message
+            ) {
+                throw action.payload;
+            }
+
             return {
                 state: API_STATE.ERROR,
                 data: action.payload,
@@ -95,11 +111,10 @@ const useAPIPatch = createAPIHook("PATCH");
 const useAPIPut = createAPIHook("PUT");
 const useAPIDelete = createAPIHook("DELETE");
 
-export {
-    useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete,
-};
+export { useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete };
 
-export function useAPIPolling(endpoint, delay = 1000, until) { // delay ms
+export function useAPIPolling(endpoint, delay = 1000, until) {
+    // delay ms
     const [state, setState] = useState({ state: API_STATE.INIT });
     const [getResponse, get] = useAPIGet(endpoint);
 

src/api/utils.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -11,9 +11,10 @@ export const HEADERS = {
     Accept: "application/json",
     "Content-Type": "application/json",
     "X-CSRFToken": getCookie("_csrf_token"),
+    "X-Requested-With": "json",
 };
 
-export const TIMEOUT = 5000;
+export const TIMEOUT = 30500;
 
 export const API_ACTIONS = {
     INIT: 1,
@@ -43,8 +44,10 @@ function getCookie(name) {
         for (let i = 0; i < cookies.length; i++) {
             const cookie = cookies[i].trim();
             // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === (`${name}=`)) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+            if (cookie.substring(0, name.length + 1) === `${name}=`) {
+                cookieValue = decodeURIComponent(
+                    cookie.substring(name.length + 1)
+                );
                 break;
             }
         }
@@ -54,7 +57,7 @@ function getCookie(name) {
 
 export function getErrorPayload(error) {
     if (error.response) {
-        if (error.response.status === 403) {
+        if (error.response.status === 401) {
             return _("The session is expired. Please log in again.");
         }
         return getJSONErrorMessage(error);
@@ -65,9 +68,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';
+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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2023 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -8,11 +8,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const OFFSET = 8;
-const SIZE = 3;
-const SIZE_CLASS = ` offset-lg-${OFFSET} col-lg-${SIZE}`;
-const SIZE_CLASS_SM = " col-sm-12";
-
 Button.propTypes = {
     /** Additional class name. */
     className: PropTypes.string,
@@ -30,21 +25,31 @@ Button.propTypes = {
 };
 
 export function Button({
-    className, loading, forisFormSize, children, ...props
+    className,
+    loading,
+    forisFormSize,
+    children,
+    ...props
 }) {
-    className = className ? `btn ${className}` : "btn btn-primary ";
-    if (forisFormSize) className += SIZE_CLASS + SIZE_CLASS_SM;
-
-    const span = loading
-        ? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null;
+    let buttonClass = className ? `btn ${className}` : "btn btn-primary";
+    if (forisFormSize) {
+        buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
+    }
 
     return (
-        <button type="button" className={className} {...props}>
-            {span}
-            {" "}
-            {span ? " " : null}
-            {" "}
-            {children}
+        <button
+            type="button"
+            className={`${buttonClass} d-inline-flex justify-content-center align-items-center`}
+            {...props}
+        >
+            {loading && (
+                <span
+                    className="spinner-border spinner-border-sm mr-1"
+                    role="status"
+                    aria-hidden="true"
+                />
+            )}
+            <span>{children}</span>
         </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

@@ -9,42 +9,38 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 
-import { formFieldsSize } from "./constants";
-
 CheckBox.propTypes = {
     /** Label message */
     label: PropTypes.string.isRequired,
     /** Help text message */
     helpText: PropTypes.string,
-    /** Apply default size (full-width) */
-    useDefaultSize: PropTypes.bool,
     /** Control if checkbox is clickable */
     disabled: PropTypes.bool,
 };
 
 CheckBox.defaultProps = {
-    useDefaultSize: true,
     disabled: false,
 };
 
-export function CheckBox({
-    label, helpText, useDefaultSize, disabled, ...props
-}) {
+export function CheckBox({ label, helpText, disabled, ...props }) {
     const uid = useUID();
     return (
-        <div className={`form-group ${useDefaultSize ? formFieldsSize : ""}`.trim()}>
+        <div className="form-group">
             <div className="custom-control custom-checkbox ">
                 <input
                     className="custom-control-input"
                     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/CopyInput.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React, { useState, useRef } from "react";
+import PropTypes from "prop-types";
+import { Input } from "./Input";
+
+CopyInput.propTypes = {
+    /** Field label. */
+    label: PropTypes.string.isRequired,
+    /** Field value. */
+    value: PropTypes.string,
+    /** Help text message. */
+    helpText: PropTypes.string,
+    /** Disable input field */
+    disabled: PropTypes.bool,
+    /** Readonly input field */
+    readOnly: PropTypes.bool,
+};
+
+export function CopyInput({ value, ...props }) {
+    const inputTextRef = useRef();
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleCopyClick = async () => {
+        // Clipboard API works only in a secure (HTTPS) context.
+        if (navigator.clipboard) {
+            await navigator.clipboard.writeText(value);
+        } else {
+            // Fallback to the "classic" copy to clipboard implementation.
+            inputTextRef.current.focus();
+            inputTextRef.current.select();
+            document.execCommand("copy");
+            inputTextRef.current.blur();
+        }
+
+        setIsCopied(true);
+        setTimeout(() => {
+            setIsCopied(false);
+        }, 1500);
+    };
+
+    return (
+        <Input type="text" value={value} ref={inputTextRef} {...props}>
+            <div className="input-group-append">
+                <button
+                    className="btn btn-outline-secondary"
+                    type="button"
+                    onClick={handleCopyClick}
+                >
+                    <span>{isCopied ? _("Copied!") : _("Copy")}</span>
+                </button>
+            </div>
+        </Input>
+    );
+}

src/bootstrap/CopyInput.md

@@ -0,0 +1,17 @@
+CopyInput Bootstrap component contains input with a label, predefined sizes, and
+structure for use in ForisForm and the "Copy" button (copy to clipboard). It can
+be used with `readOnly` and `disabled` parameters, please see an example.
+
+All additional `props` are passed to the `<input type="text">` HTML component.
+
+```js
+import React, { useState } from "react";
+const [value, setValue] = useState("Text to appear in clipboard.");
+
+<CopyInput
+    label="Copy me"
+    value={value}
+    helpText="Read the small text!"
+    readOnly
+/>;
+```

src/bootstrap/DataTimeInput.css

@@ -0,0 +1,4 @@
+/* Override defaults from "react-datetime" - display picker above input */
+.rdtPicker {
+    bottom: 0;
+}

src/bootstrap/DataTimeInput.js

@@ -7,9 +7,10 @@
 
 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";
 
 import { Input } from "./Input";
 
@@ -37,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>
         );
@@ -53,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.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

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

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.js

@@ -6,8 +6,8 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
+
 import { Input } from "./Input";
 
 export const EmailInput = ({ ...props }) => <Input type="email" {...props} />;

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([]);
 
+// 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

@@ -1,15 +1,59 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
 
-import React from "react";
+import React, { forwardRef } from "react";
 import { useUID } from "react-uid";
 import PropTypes from "prop-types";
 
-import { formFieldsSize } from "./constants";
+/** Base bootstrap input component. */
+export const Input = forwardRef(
+    (
+        {
+            type,
+            label,
+            helpText,
+            error,
+            className,
+            children,
+            labelClassName,
+            groupClassName,
+            ...props
+        },
+        ref
+    ) => {
+        const uid = useUID();
+
+        const inputClassName = `form-control ${className || ""} ${
+            error ? "is-invalid" : ""
+        }`.trim();
+
+        return (
+            <div className="form-group">
+                <label className={labelClassName} htmlFor={uid}>
+                    {label}
+                </label>
+                <div className={`input-group ${groupClassName || ""}`.trim()}>
+                    <input
+                        className={inputClassName}
+                        type={type}
+                        id={uid}
+                        ref={ref}
+                        {...props}
+                    />
+                    {children}
+                </div>
+                {error ? <div className="invalid-feedback">{error}</div> : null}
+                {helpText ? (
+                    <small className="form-text text-muted">{helpText}</small>
+                ) : null}
+            </div>
+        );
+    }
+);
 
 Input.propTypes = {
     type: PropTypes.string.isRequired,
@@ -24,28 +68,3 @@ Input.propTypes = {
     labelClassName: PropTypes.string,
     groupClassName: PropTypes.string,
 };
-
-/** Base bootstrap input component. */
-export function Input({
-    type, label, helpText, error, className, children, labelClassName, groupClassName, ...props
-}) {
-    const uid = useUID();
-    const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
-    return (
-        <div className={`form-group ${formFieldsSize}`}>
-            <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}
-        </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,20 +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, { useEffect, useRef } from "react";
+import React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 
-import { Portal } from "utils/Portal";
+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([
@@ -23,27 +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(() => {
-        function handleClickOutsideDialog(e) {
-            if (!dialogRef.current.contains(e.target)) setShown(false);
+        const handleEsc = (event) => {
+            if (event.keyCode === 27) {
+                setShown(false);
             }
+        };
+        window.addEventListener("keydown", handleEsc);
 
-        document.addEventListener("mousedown", handleClickOutsideDialog);
         return () => {
-            document.removeEventListener("mousedown", handleClickOutsideDialog);
+            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={`${modalSize.trim()} modal-dialog modal-dialog-centered ${
+                        scrollable ? "modal-dialog-scrollable" : ""
+                    }`.trim()}
+                    role="document"
+                >
+                    <div className="modal-content">{children}</div>
                 </div>
             </div>
         </Portal>
@@ -59,7 +90,11 @@ export function ModalHeader({ setShown, title }) {
     return (
         <div className="modal-header">
             <h5 className="modal-title">{title}</h5>
-            <button type="button" className="close" onClick={() => setShown(false)}>
+            <button
+                type="button"
+                className="close"
+                onClick={() => setShown(false)}
+            >
                 <span aria-hidden="true">&times;</span>
             </button>
         </div>
@@ -85,9 +120,5 @@ ModalFooter.propTypes = {
 };
 
 export function ModalFooter({ children }) {
-    return (
-        <div className="modal-footer">
-            {children}
-        </div>
-    );
+    return <div className="modal-footer">{children}</div>;
 }

src/bootstrap/Modal.md

@@ -1,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" />
 ```
 
-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

@@ -8,7 +8,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useConditionalTimeout } from "utils/hooks";
+import { useConditionalTimeout } from "../utils/hooks";
 import { Input } from "./Input";
 import "./NumberInput.css";
 
@@ -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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -21,18 +21,20 @@ PasswordInput.propTypes = {
     helpText: PropTypes.string,
     /** Use show/hide password button. */
     withEye: PropTypes.bool,
+    /** Use new-password in autocomplete attribute. */
+    newPass: PropTypes.bool,
 };
 
-export function PasswordInput({ withEye, ...props }) {
+export function PasswordInput({ withEye, newPass, ...props }) {
     const [isHidden, setHidden] = useState(true);
+
     return (
         <Input
             type={withEye && !isHidden ? "text" : "password"}
-            autoComplete={isHidden ? "new-password" : null}
+            autoComplete={newPass ? "new-password" : "current-password"}
             {...props}
         >
-            {withEye
-                ? (
+            {withEye ? (
                 <div className="input-group-append">
                     <button
                         type="button"
@@ -42,11 +44,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.
@@ -9,28 +9,41 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 
-import { formFieldsSize } from "./constants";
-
 RadioSet.propTypes = {
     /** Name attribute of the input HTML tag. */
     name: PropTypes.string.isRequired,
     /** 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) => {
@@ -44,42 +57,61 @@ export function RadioSet({
                 value={choice.value}
                 helpText={choice.helpText}
                 checked={choice.value === value}
-
+                inline={inline}
                 {...props}
             />
         );
     });
 
     return (
-        <div className={`form-group ${formFieldsSize}`}>
-            {label && <label htmlFor={uid} className="d-block">{label}</label>}
+        <div className="form-group">
+            {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,
 };
 
-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';
+import { useState } from "react";
 const CHOICES = [
-    {value:'one',label:'1'},
-    {value:'two',label:'2'},
-    {value:'three',label:'3'},
+    { value: "one", label: "1" },
+    { value: "two", label: "2" },
+    { value: "three", label: "3" },
 ];
 const [value, setValue] = useState(CHOICES[0].value);
 
@@ -17,10 +18,10 @@ const [value, setValue] = useState(CHOICES[0].value);
     {/*Yeah, it gets event, not value!*/}
     <RadioSet
         value={value}
-        name='some-radio'
+        name="some-radio"
         choices={CHOICES}
-        onChange={event =>setValue(event.target.value)}
+        onChange={(event) => setValue(event.target.value)}
     />
     <p>Selected value: {value}</p>
-</>
+</>;
 ```

src/bootstrap/Select.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -15,34 +15,29 @@ 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).map((choice) => (
+        <option key={choice} value={choice}>
+            {choices[choice]}
+        </option>
+    ));
 
     return (
-        <div className="form-group col-sm-12 offset-lg-1 col-lg-10">
+        <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';
+import { useState } from "react";
 const CHOICES = {
-    apple:'Apple',
-    banana:'Banana',
-    peach:'Peach',
+    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,37 @@
+.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;
+}
+
+.spinner-border-sm {
+    min-width: 16px;
+}

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/Switch.md

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

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

@@ -2,39 +2,38 @@
 
 exports[`<Button /> Render button correctly 1`] = `
 <button
-  class="btn btn-primary "
+  class="btn btn-primary d-inline-flex justify-content-center align-items-center"
   type="button"
 >
-   
-   
+  <span>
     Test Button
+  </span>
 </button>
 `;
 
 exports[`<Button /> Render button with custom classes 1`] = `
 <button
-  class="btn one two three"
+  class="btn one two three d-inline-flex justify-content-center align-items-center"
   type="button"
 >
-   
-   
+  <span>
     Test Button
+  </span>
 </button>
 `;
 
 exports[`<Button /> Render button with spinner 1`] = `
 <button
-  class="btn btn-primary "
+  class="btn btn-primary d-inline-flex justify-content-center align-items-center"
   type="button"
 >
   <span
     aria-hidden="true"
-    class="spinner-border spinner-border-sm"
+    class="spinner-border spinner-border-sm mr-1"
     role="status"
   />
-   
-   
-   
+  <span>
     Test Button
+  </span>
 </button>
 `;

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

@@ -2,7 +2,7 @@
 
 exports[`<Checkbox/> Render checkbox 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <div
     class="custom-control custom-checkbox "
@@ -30,7 +30,7 @@ exports[`<Checkbox/> Render checkbox 1`] = `
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <div
     class="custom-control custom-checkbox "

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

@@ -2,7 +2,7 @@
 
 exports[`<NumberInput/> Render number input 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     for="1"

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

@@ -2,7 +2,7 @@
 
 exports[`<PasswordInput/> Render password input 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     for="1"
@@ -13,7 +13,7 @@ exports[`<PasswordInput/> Render password input 1`] = `
     class="input-group"
   >
     <input
-      autocomplete="new-password"
+      autocomplete="current-password"
       class="form-control"
       id="1"
       type="password"

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

@@ -2,7 +2,7 @@
 
 exports[`<RadioSet/> Render radio set 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     class="d-block"
@@ -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__/Select.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Select/> Test with snapshot. 1`] = `
 <div>
   <div
-    class="form-group col-sm-12 offset-lg-1 col-lg-10"
+    class="form-group"
   >
     <label
       for="1"

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/__tests__/__snapshots__/TextInput.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<TextInput/> Render text input 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     for="1"

src/bootstrap/constants.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -7,4 +7,5 @@
 
 /** Bootstrap column size for form fields */
 // eslint-disable-next-line import/prefer-default-export
-export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10";
+export const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-4";
+export const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";

src/common/RebootButton.js

@@ -8,19 +8,13 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
-import { useAPIPost } from "api/hooks";
-import { API_STATE } from "api/utils";
-import { ForisURLs } from "forisUrls";
+import { useAPIPost } from "../api/hooks";
+import { API_STATE } from "../api/utils";
+import { ForisURLs } from "../utils/forisUrls";
 
-import { Button } from "bootstrap/Button";
-import {
-    Modal, ModalHeader, ModalBody, ModalFooter,
-} from "bootstrap/Modal";
-import { useAlert } from "alertContext/AlertContext";
-
-RebootButton.propTypes = {
-    forisFormSize: PropTypes.bool,
-};
+import { Button } from "../bootstrap/Button";
+import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
+import { useAlert } from "../context/alertContext/AlertContext";
 
 export function RebootButton(props) {
     const [triggered, setTriggered] = 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,74 @@
+/*
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+import { Button } from "../../bootstrap/Button";
+import { useAlert } from "../../context/alertContext/AlertContext";
+import { ALERT_TYPES } from "../../bootstrap/Alert";
+import { useAPIPost } from "../../api/hooks";
+import { API_STATE } from "../../api/utils";
+import { formFieldsSize } from "../../bootstrap/constants";
+
+ResetWiFiSettings.propTypes = {
+    ws: PropTypes.object.isRequired,
+    endpoint: PropTypes.string.isRequired,
+};
+
+export function ResetWiFiSettings({ ws, endpoint }) {
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        const module = "wifi";
+        ws.subscribe(module).bind(module, "reset", () => {
+            // eslint-disable-next-line no-restricted-globals
+            setTimeout(() => location.reload(), 1000);
+        });
+    }, [ws]);
+
+    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 (
+        <div className={formFieldsSize}>
+            <h2>{_("Reset Wi-Fi Settings")}</h2>
+            <p>
+                {_(
+                    "If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values."
+                )}
+            </p>
+            <div className="text-right">
+                <Button
+                    className="btn-primary"
+                    forisFormSize
+                    loading={isLoading}
+                    disabled={isLoading}
+                    onClick={onReset}
+                >
+                    {_("Reset Wi-Fi Settings")}
+                </Button>
+            </div>
+        </div>
+    );
+}

src/common/WiFiSettings/WiFiForm.js

@@ -0,0 +1,306 @@
+/*
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Switch } from "../../bootstrap/Switch";
+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, ENCRYPTIONMODES } 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,
+        encryption: PropTypes.string.isRequired,
+        available_bands: PropTypes.array.isRequired,
+        ieee80211w_disabled: PropTypes.bool,
+    }),
+    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;
+    const bnds = formData.available_bands;
+    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}
+                    />
+
+                    <Switch
+                        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) => {
+                            // Get the last item in an array of available HT modes
+                            const [best2] = bnds[0].available_htmodes.slice(-1);
+                            const [best5] = bnds[1].available_htmodes.slice(-1);
+                            return {
+                                devices: {
+                                    [deviceIndex]: {
+                                        hwmode: { $set: value },
+                                        channel: { $set: "0" },
+                                        htmode: {
+                                            $set:
+                                                // Set HT mode depending on checked frequency
+                                                value === "11a" ? best5 : best2,
+                                        },
+                                    },
+                                },
+                            };
+                        })}
+                        {...props}
+                    />
+
+                    <Select
+                        label={_("802.11n/ac/ax mode")}
+                        choices={getHtmodeChoices(formData)}
+                        value={formData.htmode}
+                        helpText={HELP_TEXTS.htmode}
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { htmode: { $set: value } },
+                            },
+                        }))}
+                        {...props}
+                    />
+
+                    <Select
+                        label={_("Channel")}
+                        choices={getChannelChoices(formData)}
+                        value={formData.channel}
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { channel: { $set: value } },
+                            },
+                        }))}
+                        {...props}
+                    />
+
+                    <Select
+                        label={_("Encryption")}
+                        choices={getEncryptionChoices(formData)}
+                        helpText={HELP_TEXTS.wpa3}
+                        value={formData.encryption}
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { encryption: { $set: value } },
+                            },
+                        }))}
+                        {...props}
+                    />
+
+                    {(formData.encryption === "WPA3" ||
+                        formData.encryption === "WPA2/3") && (
+                        <Switch
+                            label={_("Disable Management Frame Protection")}
+                            helpText={_(
+                                "In case you have trouble connecting to WiFi Access Point, try disabling Management Frame Protection."
+                            )}
+                            checked={formData.ieee80211w_disabled}
+                            onChange={setFormValue((value) => ({
+                                devices: {
+                                    [deviceIndex]: {
+                                        ieee80211w_disabled: { $set: value },
+                                    },
+                                },
+                            }))}
+                            {...props}
+                        />
+                    )}
+
+                    {hasGuestNetwork && (
+                        <WifiGuestForm
+                            formData={{
+                                id: deviceIndex,
+                                ...formData.guest_wifi,
+                            }}
+                            formErrors={formErrors.guest_wifi || {}}
+                            setFormValue={setFormValue}
+                            {...props}
+                        />
+                    )}
+                </>
+            )}
+            {divider && <hr />}
+        </>
+    );
+}
+
+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,
+    }));
+}
+
+function getEncryptionChoices(device) {
+    if (device.encryption === "custom") {
+        ENCRYPTIONMODES.custom = _("Custom");
+    }
+    return ENCRYPTIONMODES;
+}

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,119 @@
+/*
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import 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 };
+
+        if (device.encryption === "WPA2") {
+            delete formData.devices[idx].ieee80211w_disabled;
+        }
+    });
+    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.password.length >= 64)
+            errors.password = _(
+                "Password must not contain more than 63 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 (device.guest_wifi.password.length >= 64)
+            guest_wifi_errors.password = _(
+                "Password must not contain more than 63 symbols"
+            );
+
+        if (guest_wifi_errors.SSID || guest_wifi_errors.password) {
+            errors.guest_wifi = guest_wifi_errors;
+        }
+        return errors;
+    });
+    return JSON.stringify(formErrors).match(/\[[{},?]+\]/) ? null : formErrors;
+}

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

@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import 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,244 @@
+/*
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import 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 getByLabelText;
+    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;
+        getByLabelText = renderRes.getByLabelText;
+        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}
+                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: "HT80",
+                    hwmode: "11a",
+                    id: 0,
+                    password: "TestPass",
+                    encryption: "WPA3",
+                },
+                { 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: "VHT80",
+                    hwmode: "11g",
+                    id: 0,
+                    password: "TestPass",
+                    encryption: "WPA3",
+                },
+                { 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: "HT80",
+                    hwmode: "11a",
+                    id: 0,
+                    password: "TestPass",
+                    encryption: "WPA3",
+                },
+                { 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);
+    });
+
+    it("Should validate password length", () => {
+        const shortErrorFeedback = /Password must contain/i;
+        const longErrorFeedback = /Password must not contain/i;
+
+        fireEvent.click(getByText("Wi-Fi 1"));
+
+        const passwordInput = getByLabelText("Password");
+
+        const changePassword = (value) =>
+            fireEvent.change(passwordInput, { target: { value } });
+
+        changePassword("12");
+        expect(getByText(shortErrorFeedback)).toBeDefined();
+
+        changePassword(
+            "longpasswordlongpasswordlongpasswordlongpasswordlongpasswordlong"
+        );
+        expect(getByText(longErrorFeedback)).toBeDefined();
+    });
+});

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

@@ -0,0 +1,404 @@
+/*
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+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: "HT80",
+                hwmode: "11a",
+                id: 0,
+                password: "TestPass",
+                encryption: "WPA3",
+            },
+            {
+                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",
+                encryption: "WPA3",
+            },
+        ],
+    };
+}
+const oneDevice = {
+    devices: [
+        {
+            SSID: "Turris1",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass",
+            encryption: "WPA3",
+        },
+    ],
+};
+
+const twoDevices = {
+    devices: [
+        {
+            SSID: "",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass",
+            encryption: "WPA3",
+        },
+        {
+            SSID: "Turris2",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 1,
+            password: "TestPass",
+            encryption: "WPA3",
+        },
+    ],
+};
+
+const threeDevices = {
+    devices: [
+        {
+            SSID: "Turris1",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass",
+            encryption: "WPA3",
+        },
+        {
+            SSID: "Turris2",
+            channel: 60,
+            enabled: false,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 1,
+            password: "TestPass",
+            encryption: "WPA3",
+        },
+        {
+            SSID: "Turris3",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 2,
+            password: "",
+            encryption: "WPA3",
+        },
+    ],
+};
+
+export { oneDevice, twoDevices, threeDevices };

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

@@ -0,0 +1,969 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+@@ -241,207 +241,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-4"
+  >
+    <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 d-inline-flex justify-content-center align-items-center"
+          type="submit"
+        >
+          <span>
+            Save
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+  <div
+    class="card p-4 col-sm-12 col-lg-12 p-0 mb-4"
+  >
+    <h2>
+      Reset Wi-Fi Settings
+    </h2>
+    <p>
+      If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values.
+    </p>
+    <div
+      class="text-right"
+    >
+      <button
+        class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
+        type="button"
+      >
+        <span>
+          Reset Wi-Fi Settings
+        </span>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+@@ -524,10 +524,92 @@
+            >
+              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>
++       <div
++         class=\\"form-group\\"
++       >
++         <label
++           for=\\"24\\"
++         >
++           SSID
++         </label>
++         <div
++           class=\\"input-group\\"
++         >
++           <input
++             class=\\"form-control\\"
++             id=\\"24\\"
++             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=\\"25\\"
++         >
++           Password
++         </label>
++         <div
++           class=\\"input-group\\"
++         >
++           <input
++             autocomplete=\\"current-password\\"
++             class=\\"form-control  is-invalid\\"
++             id=\\"25\\"
++             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/3 pre-shared key, that is required to connect to the network.
++         </small>
++       </div>
+        <hr />
+        <div
+          class=\\"form-group switch\\"
+        >
+          <div
+@@ -551,10 +633,11 @@
+        <div
+          class=\\"text-right\\"
+        >
+          <button
+            class=\\"btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center\\"
++           disabled=\\"\\"
+            type=\\"submit\\"
+          >
+            <span>
+              Save
+            </span>"
+`;
+
+exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+@@ -22,10 +22,512 @@
+                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=\\"current-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/3 pre-shared key, that is required to connect to the network.
++         </small>
++       </div>
++       <div
++         class=\\"form-group\\"
++       >
++         <div
++           class=\\"custom-control custom-switch\\"
++         >
++           <input
++             class=\\"custom-control-input\\"
++             id=\\"6\\"
++             type=\\"checkbox\\"
++           />
++           <label
++             class=\\"custom-control-label\\"
++             for=\\"6\\"
++           >
++             Hide SSID
++           </label>
++           <small
++             class=\\"form-text text-muted mt-0 mb-3\\"
++           >
++             If set, network is not visible when scanning for available networks.
++           </small>
++         </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/ax mode
++         </label>
++         <select
++           class=\\"custom-select\\"
++           id=\\"8\\"
++         >
++           <option
++             value=\\"NOHT\\"
++           >
++             Disabled
++           </option>
++           <option
++             value=\\"HT20\\"
++           >
++             802.11n - 20 MHz wide channel
++           </option>
++           <option
++             value=\\"HT40\\"
++           >
++             802.11n - 40 MHz wide channel
++           </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/ax 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\\"
++       >
++         <label
++           for=\\"10\\"
++         >
++           Encryption
++         </label>
++         <select
++           class=\\"custom-select\\"
++           id=\\"10\\"
++         >
++           <option
++             value=\\"WPA3\\"
++           >
++             WPA3 only
++           </option>
++           <option
++             value=\\"WPA2/3\\"
++           >
++             WPA3 with WPA2 as fallback (default)
++           </option>
++           <option
++             value=\\"WPA2\\"
++           >
++             WPA2 only
++           </option>
++         </select>
++         <small
++           class=\\"form-text text-muted\\"
++         >
++           The WPA3 standard is the new most secure encryption method that is suggested to be used with any device that supports it. The older devices without WPA3 support require older WPA2. If you experience issues with connecting older devices, try to enable WPA2.
++         </small>
++       </div>
++       <div
++         class=\\"form-group\\"
++       >
++         <div
++           class=\\"custom-control custom-switch\\"
++         >
++           <input
++             class=\\"custom-control-input\\"
++             id=\\"11\\"
++             type=\\"checkbox\\"
++           />
++           <label
++             class=\\"custom-control-label\\"
++             for=\\"11\\"
++           >
++             Disable Management Frame Protection
++           </label>
++           <small
++             class=\\"form-text text-muted mt-0 mb-3\\"
++           >
++             In case you have trouble connecting to WiFi Access Point, try disabling Management Frame Protection.
++           </small>
++         </div>
++       </div>
++       <div
++         class=\\"form-group\\"
++       >
++         <div
++           class=\\"custom-control custom-switch\\"
++         >
++           <input
++             class=\\"custom-control-input\\"
++             id=\\"12\\"
++             type=\\"checkbox\\"
++           />
++           <label
++             class=\\"custom-control-label\\"
++             for=\\"12\\"
++           >
++             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,52 @@
+/*
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+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"),
+    HE20: _("802.11ax - 20 MHz wide channel"),
+    HE40: _("802.11ax - 40 MHz wide channel"),
+    HE80: _("802.11ax - 80 MHz wide channel"),
+    HE160: _("802.11ax - 160 MHz wide channel"),
+};
+export const HWMODES = {
+    "11g": "2.4",
+    "11a": "5",
+};
+export const ENCRYPTIONMODES = {
+    WPA3: _("WPA3 only"),
+    "WPA2/3": _("WPA3 with WPA2 as fallback (default)"),
+    WPA2: _("WPA2 only"),
+};
+export const HELP_TEXTS = {
+    ssid: _(
+        "SSID which contains non-standard characters could cause problems on some devices."
+    ),
+    password: _(
+        "WPA2/3 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/ax 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."
+    ),
+    wpa3: _(
+        "The WPA3 standard is the new most secure encryption method that is suggested to be used with any device that supports it. The older devices without WPA3 support require older WPA2. If you experience issues with connecting older devices, try to enable WPA2."
+    ),
+};

src/common/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(<>
+        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"
@@ -46,20 +46,20 @@ exports[`<RebootButton/> Render modal. 1`] = `
             class="modal-footer"
           >
             <button
-              class="btn btn-primary "
+              class="btn btn-primary d-inline-flex justify-content-center align-items-center"
               type="button"
             >
-               
-               
+              <span>
                 Cancel
+              </span>
             </button>
             <button
-              class="btn btn-danger"
+              class="btn btn-danger d-inline-flex justify-content-center align-items-center"
               type="button"
             >
-               
-               
+              <span>
                 Confirm reboot
+              </span>
             </button>
           </div>
         </div>
@@ -67,12 +67,12 @@ exports[`<RebootButton/> Render modal. 1`] = `
     </div>
   </div>
   <button
-    class="btn btn-danger"
+    class="btn btn-danger d-inline-flex justify-content-center align-items-center"
     type="button"
   >
-     
-     
+    <span>
       Reboot
+    </span>
   </button>
 </div>
 `;
@@ -83,12 +83,12 @@ exports[`<RebootButton/> Render. 1`] = `
     id="modal-container"
   />
   <button
-    class="btn btn-danger"
+    class="btn btn-danger d-inline-flex justify-content-center align-items-center"
     type="button"
   >
-     
-     
+    <span>
       Reboot
+    </span>
   </button>
 </div>
 `;

src/context/alertContext/AlertContext.js

@@ -8,8 +8,8 @@
 import React, { useState, useContext, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { Alert, ALERT_TYPES } from "bootstrap/Alert";
-import { Portal } from "utils/Portal";
+import { Alert, ALERT_TYPES } from "../../bootstrap/Alert";
+import { Portal } from "../../utils/Portal";
 
 AlertContextProvider.propTypes = {
     children: PropTypes.oneOfType([
@@ -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]);
 

src/context/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/context/alertContext/__tests__/AlertContext.test.js

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

src/context/customizationContext/CustomizationContext.js

@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React, { useContext, useEffect } from "react";
+import PropTypes from "prop-types";
+
+import { useAPIGet } from "../../api/hooks";
+import { ForisURLs } from "../../utils/forisUrls";
+
+import { Spinner } from "../../bootstrap/Spinner";
+
+CustomizationContextProvider.propTypes = {
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node,
+    ]),
+};
+
+function CustomizationContextProvider({ children }) {
+    const { CustomizationContext } = window;
+    const [getCustomizationResponse, getCustomization] = useAPIGet(
+        ForisURLs.about
+    );
+
+    useEffect(() => {
+        getCustomization();
+    }, [getCustomization]);
+
+    if (getCustomizationResponse.state !== "success") {
+        return <Spinner fullScreen />;
+    }
+
+    const deviceDetails = getCustomizationResponse.data || {};
+
+    const isCustomized = !!(
+        deviceDetails &&
+        deviceDetails.customization !== undefined &&
+        deviceDetails.customization === "shield"
+    );
+
+    return (
+        <CustomizationContext.Provider value={{ deviceDetails, isCustomized }}>
+            {children}
+        </CustomizationContext.Provider>
+    );
+}
+
+function useCustomizationContext() {
+    const { CustomizationContext } = window;
+    return useContext(CustomizationContext);
+}
+
+export { CustomizationContextProvider, useCustomizationContext };

src/context/customizationContext/CustomizationContext.md

@@ -0,0 +1,3 @@
+It provides customization context to the children. `CustomizationContext` allows
+using `useCustomizationContext` in components to check if the reForis UI is
+customized or not for specific devices.

src/context/customizationContext/__tests__/CustomizationContext.test.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+
+import { render, wait, getByText } from "customTestRender";
+import mockAxios from "jest-mock-axios";
+
+import {
+    useCustomizationContext,
+    CustomizationContextProvider,
+} from "../CustomizationContext";
+
+const CUSTOM = "Description / component for customized reForis (Shield)";
+const ORIGINAL = "Description / component for original reForis (other devices)";
+
+const CustomizationTest = () => {
+    const { isCustomized } = useCustomizationContext();
+
+    return <p>{isCustomized ? CUSTOM : ORIGINAL}</p>;
+};
+
+describe("CustomizationContext", () => {
+    let componentContainer;
+    beforeEach(() => {
+        const { container } = render(
+            <CustomizationContextProvider>
+                <CustomizationTest />
+            </CustomizationContextProvider>
+        );
+        componentContainer = container;
+    });
+
+    it("should render component without customization", async () => {
+        mockAxios.mockResponse({ data: {} });
+
+        await wait(() => getByText(componentContainer, ORIGINAL));
+
+        expect(componentContainer).toMatchSnapshot();
+    });
+
+    it("should render customized component", async () => {
+        mockAxios.mockResponse({ data: { customization: "shield" } });
+
+        await wait(() => getByText(componentContainer, CUSTOM));
+
+        expect(componentContainer).toMatchSnapshot();
+    });
+});

src/context/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomizationContext should render component without customization 1`] = `
+<div>
+  <p>
+    Description / component for original reForis (other devices)
+  </p>
+</div>
+`;
+
+exports[`CustomizationContext should render customized component 1`] = `
+<div>
+  <p>
+    Description / component for customized reForis (Shield)
+  </p>
+</div>
+`;

src/form/__tests__/SubmitButton.test.js

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

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

@@ -3,19 +3,18 @@
 exports[`<SubmitButton/> Render load 1`] = `
 <div>
   <button
-    class="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     disabled=""
     type="submit"
   >
     <span
       aria-hidden="true"
-      class="spinner-border spinner-border-sm"
+      class="spinner-border spinner-border-sm mr-1"
       role="status"
     />
-     
-     
-     
+    <span>
       Load settings
+    </span>
   </button>
 </div>
 `;
@@ -23,12 +22,12 @@ exports[`<SubmitButton/> Render load 1`] = `
 exports[`<SubmitButton/> Render ready 1`] = `
 <div>
   <button
-    class="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     type="submit"
   >
-     
-     
+    <span>
       Save
+    </span>
   </button>
 </div>
 `;
@@ -36,19 +35,18 @@ exports[`<SubmitButton/> Render ready 1`] = `
 exports[`<SubmitButton/> Render saving 1`] = `
 <div>
   <button
-    class="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     disabled=""
     type="submit"
   >
     <span
       aria-hidden="true"
-      class="spinner-border spinner-border-sm"
+      class="spinner-border spinner-border-sm mr-1"
       role="status"
     />
-     
-     
-     
+    <span>
       Updating
+    </span>
   </button>
 </div>
 `;

src/form/__tests__/hooks.test.js

@@ -5,47 +5,50 @@
  * 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 { 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 mockWebSockets;
     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'} : {});
+        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={mockWebSockets}
+                ws={new WebSockets()}
                 // Just some module which exists...
                 forisConfig={{
-                    endpoint: 'testEndpoint',
-                    wsModule: 'testWSModule'
+                    endpoint: "testEndpoint",
+                    wsModule: "testWSModule",
                 }}
                 prepData={mockPrepData}
                 prepDataToSubmit={mockPrepDataToSubmit}
@@ -54,50 +57,61 @@ describe('useForm hook.', () => {
                 <Child />
             </ForisForm>
         );
-        mockAxios.mockResponse({field: 'fetchedData'});
+        mockAxios.mockResponse({ field: "fetchedData" });
 
-        input = await waitForElement(() =>
-            getByTestId('test-input')
-        );
-        form = container.firstChild
+        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

@@ -1,138 +1,100 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
 
 import {
-    validateDomain,
-    validateDUID,
     validateIPv4Address,
     validateIPv6Address,
     validateIPv6Prefix,
-    validateMAC
-} from "validations";
+    validateDomain,
+    validateHostname,
+    validateDUID,
+    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("validateHostname valid", () => {
+        expect(validateHostname("new-android")).toBe(undefined);
+        expect(validateHostname("local")).toBe(undefined);
+    });
+    it("validateHostname invalid", () => {
+        expect(validateHostname("-android")).not.toBe(undefined);
+        expect(validateHostname("local.")).not.toBe(undefined);
     });
 
     it("validateDUID valid", () => {
-        expect(validateDUID("abcdefAB"))
-            .toBe(undefined);
-        expect(validateDUID("ABCDEF12"))
-            .toBe(undefined);
-        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);
     });
 });