Merge branch 'dev' into 'master'

Dev

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

.eslintrc.js

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

.gitignore

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

.gitlab-ci.yml

@@ -1,4 +1,4 @@
-image: node:10-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

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

CHANGELOG.md

@@ -0,0 +1,397 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to
+[Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [6.0.2] - 2024-06-28
+
+### Added
+
+-   Added className prop to CheckBox and Radio components
+
+## [6.0.1] - 2024-06-26
+
+### Added
+
+-   Added className prop to Switch component
+
+### Changed
+
+-   Updated dependencies in package.json
+-   NPM audit fix
+
+## [6.0.0] - 2024-06-11
+
+### Added
+
+-   Added CHANGELOG.md
+-   Added JS_DIR variable to Makefile
+-   Added support for shared reForis ESLint configuration
+
+### Changed
+
+-   Updated dependencies in package.json
+-   Updated Spinner.css styles for better positioning and responsiveness
+-   Migrated to Bootstrap 5
+-   NPM audit fix
+-   Other small improvements
+
+## [5.6.1] - 2024-01-19
+
+-   Added & updated Weblate translations
+-   Fixed loading state & button's layout
+-   Updated bootstrap library to version 4.6.2
+-   Used custom reforis-image in GitLab CI/CD
+-   NPM audit fix
+
+## [5.6.0] - 2022-12-29
+
+-   Add & update Weblate translations
+-   Add CustomizationContext and custom hook
+-   Update caniuse-lite
+-   Remove testUtils from .gitignore
+-   Make ieee80211w_disabled as optional in WiFiForm
+-   Move contexts in a context folder
+-   NPM audit fix
+
+## [5.5.0] - 2022-12-02
+
+-   Add & update translations
+-   Add a switch to disable Management Frame Protection (802.11w)
+-   Improved Foris JS documentation
+-   NPM audit fix
+
+## [5.4.1] - 2022-06-03
+
+-   Add Weblate translations
+-   Update PropType peer dependency
+-   NPM audit fix
+
+## [5.4.0] - 2022-05-20
+
+-   Add & update translations
+-   Add CopyInput bootstrap component
+-   Update WiFiForm labels and description for wifi ax
+-   Make WS path in lighttpd mode configurable
+-   Fix Wi-Fi password helptext string
+-   NPM audit fix
+
+## [5.3.0] - 2022-02-21
+
+-   Added & update translations
+-   Added rest of the props to DownloadButton component
+-   Added hostname validation
+-   Added wifi 802.11ax HE modes
+-   Set best Wi-Fi HT mode depending on the checked frequency
+-   Improved domain name RegEx pattern
+-   Removed customOrder prop in Select component
+-   Fixed Wi-Fi translation strings
+-   Fixed autocomplete attribute in PasswordInput
+-   Fixed WiFi password max length check
+-   Fixed documentation build
+-   Fixed access token in publish script
+-   Refined & restructure Makefile
+-   Updated GitLab CI image to Node.js v16
+-   NPM update (several dependencies)
+-   NPM audit fix
+
+## [5.2.0] - 2021-12-15
+
+-   Remove login page
+-   NPM audit fix
+
+## [5.1.16] - 2021-11-18
+
+-   Revert bad NPM audit fix
+-   NPM audit fix
+
+## [5.1.15] - 2021-11-03
+
+-   Add WPA3 option
+-   Add custom order ability of Select options
+-   NPM audit fix
+
+## [5.1.14] - 2021-07-30
+
+-   Add & update translations
+-   Fix infinity redirect loop when WS error occurs
+-   NPM audit fix
+
+## [5.1.13] - 2021-06-30
+
+-   Add sentinelAgreement endpoint to forisUrls
+-   NPM audit fix
+
+## [5.1.12] - 2021-05-14
+
+-   Add & update translations
+-   Add & fix obsolete links
+-   Expend library with the ResetWifiSettings function
+-   Fix switching Wi-Fi modes depending on bands in WiFiForm
+-   Fix translation sources in WiFiForm
+-   NPM audit fix
+-   Other small improvements
+
+## [5.1.11] - 2021-01-04
+
+-   Remove duplicated file for Norwegian language
+-   Fix translations inconsistency
+
+## [5.1.10] - 2021-12-29
+
+-   Add and update translations
+
+## [5.1.9] - 2021-12-20
+
+-   Increase bottom margin of formFieldsSize
+-   Change formFieldsSize of ResetWiFiSettings card
+-   Fix trailing space in Modal classes
+
+## [5.1.8] - 2020-12-19
+
+-   Add isPluginInstalled function
+
+## [5.1.7] - 2020-11-27
+
+## [5.1.6] - 2020-11-25
+
+-   NPM audit fix
+-   Add displayCard function to utils
+-   Add optional sizes to Modal
+-   Add information about optional sizes to docs
+-   Remove redundant merge.py
+
+## [5.1.5] - 2020-09-25
+
+-   Fix DateTime import
+-   Fix extra empty space in Switch's classes
+
+## [5.1.4] - 2020-09-25
+
+-   Add inline option to Wi-Fi's RadioSet
+-   Fix Alert's dismissible class condition
+-   Add closing bootstrap modal using ESC
+-   Change reboot modal's heading to "Warning!"
+
+## [5.1.3] - 2020-09-11
+
+-   Add SSID validation for 32 bytes length
+-   Add helpText for SSID input
+
+## [5.1.2] - 2020-09-08
+
+-   Fix infinity loop caused by WebSockets
+-   Resolve small issues
+
+## [5.1.1] - 2020-08-31
+
+-   Add "inline" option to RadioSet
+-   NPM audit fix
+
+## [5.1.0] - 2020-08-25
+
+-   Add new Switch component
+-   Swap checkboxes for switches on Wi-Fi page
+-   Decrease button width on different breakpoints
+-   Add integration of Prettier + ESLint + reForis Style Guide
+-   Add appropriate links to dropdown headers
+-   Add semantic & accessibility structure for headings
+-   NPM audit & Update packages
+-   GitLab CI: image update to node 10
+
+## [5.0.3] - 2020-09-23
+
+-   Fixes issue with WebSockets
+
+## [5.0.2] - 2020-09-22
+
+-   Fix infinity loop caused by WebSockets
+
+## [5.0.1] - 2020-07-21
+
+-   Fix Wi-Fi Form
+-   NPM audit fix & update of packages
+
+## [5.0.0] - 2020-05-07
+
+-   I've realized that it should be major update due to broken API.
+
+## [4.5.1] - 2020-05-07
+
+-   Add initialData to ForisForm children.
+-   Update translations .pot file.
+
+## [4.5.0] - 2020-03-25
+
+-   Use exposed pdfmake.
+-   NPM audit fix & update of packages.
+
+## [4.4.0] - 2020-03-13
+
+-   Update domain validation.
+
+## [4.3.1] - 2020-03-06
+
+-   Add logout link.
+
+## [4.3.0] - 2020-02-26
+
+-   Allow RadioSet accept elements as children.
+-   Add option to make modal scrollable.
+
+## [4.2.0] - 2020-02-21
+
+-   Add translations.
+-   Improve datatime localization.
+
+## [4.1.0] - 2020-02-20
+
+-   Added date and time utilities.
+
+## [4.0.0] - 2020-02-20
+
+-   Throw an error if unhandled exception happens during API request.
+
+## [3.4.0] - 2020-02-17
+
+-   Display actual GET error response within the form.
+-   Added styles extracted from reForis.
+-   Added reference to form element (for programmatically submitting it).
+
+## [3.2.0] - 2020-01-17
+
+-   Swapped react-router with react-router-dom. Prepared Foris JS for using
+    react-router-dom exposed by reForis.
+-   Added controller ID filter to WebSocket hook.
+-   Updated translation messages after moving WiFi form.
+-   Increased request timeout to 30.5 sec.
+
+## [3.1.1] - 2020-01-10
+
+-   Fixed package dependencies related to exposing libraries via reForis
+
+## [3.1.0] - 2020-01-09
+
+-   Added Wi-Fi settings form
+-   Fixed path to index.js file in package.json
+
+## [3.0.0] - 2020-01-07
+
+-   Removal of Babel compiler
+-   Fixed width of ForisForm, removed default sizing for form widgets (like
+    buttons)
+
+## [2.1.1] - 2020-01-06
+
+-   Display date and time picker above input element
+
+## [2.1.0] - 2019-12-19
+
+-   Set WebSocket logging to debug level
+-   Added hook that detects clicking outside of component
+-   Added Radio to list of publicly available components
+-   Fixed link to git repository in package.json
+
+## [2.0.0] - 2019-12-09
+
+-   Added dynamic suffix for API URLs (allowing to use one hook for different
+    resources with e.g. PUT)
+-   Added unsubscribe method to WebSocket client
+-   Added custom class to SpinnerElement
+-   Improved documentation
+-   Published README.md
+
+## [1.4.0] - 2019-11-29
+
+-   Add reboot button.
+-   Fix Foris URLs prefixes
+
+## [1.3.3] - 2019-11-22
+
+-   Add translations from Weblate.
+
+## [1.3.2] - 2019-11-20
+
+-   Expose only AlertContext.
+-   Add hook for API pooling.
+
+## [1.3.1] - 2019-11-14
+
+## [1.2.0] - 2019-10-24
+
+## [1.1.0] - 2019-10-22
+
+## [1.0.0] - 2019-10-07
+
+## [0.0.7] - 2019-09-02
+
+[unreleased]:
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.2...master
+[6.0.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.1...v6.0.2
+[6.0.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.0...v6.0.1
+[6.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.6.1...v6.0.0
+[5.6.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.6.0...v5.6.1
+[5.6.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.5.0...v5.6.0
+[5.5.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.4.1...v5.5.0
+[5.4.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.4.0...v5.4.1
+[5.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.3.0...v5.4.0
+[5.3.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.2.0...v5.3.0
+[5.2.0]:
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.16...v5.2.0
+[5.1.16]:
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.15...v5.1.16
+[5.1.15]:
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.14...v5.1.15
+[5.1.14]:
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.13...v5.1.14
+[5.1.13]:
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.12...v5.1.13
+[5.1.12]:
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.11...v5.1.12
+[5.1.11]:
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.10...v5.1.11
+[5.1.10]:
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.9...v5.1.10
+[5.1.9]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.8...v5.1.9
+[5.1.8]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.7...v5.1.8
+[5.1.7]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.6...v5.1.7
+[5.1.6]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.5...v5.1.6
+[5.1.5]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.4...v5.1.5
+[5.1.4]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.3...v5.1.4
+[5.1.3]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.2...v5.1.3
+[5.1.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.1...v5.1.2
+[5.1.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.0...v5.1.1
+[5.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.0.3...v5.1.0
+[5.0.3]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.0.2...v5.0.3
+[5.0.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.0.1...v5.0.2
+[5.0.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.5.0...v5.0.1
+[5.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.5.1...v5.0.0
+[4.5.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.5.0...v4.5.1
+[4.5.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.4.0...v4.5.0
+[4.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.3.1...v4.4.0
+[4.3.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.3.0...v4.3.1
+[4.3.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.2.0...v4.3.0
+[4.2.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.1.0...v4.2.0
+[4.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.0.0...v4.1.0
+[4.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v3.4.0...v4.0.0
+[3.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v3.2.0...v3.4.0
+[3.2.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v3.1.1...v3.2.0
+[3.1.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v3.1.0...v3.1.1
+[3.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v3.0.0...v3.1.0
+[3.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v2.1.1...v3.0.0
+[2.1.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v2.1.0...v2.1.1
+[2.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v2.0.0...v2.1.0
+[2.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.4.0...v2.0.0
+[1.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.3.3...v1.4.0
+[1.3.3]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.3.2...v1.3.3
+[1.3.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.3.1...v1.3.2
+[1.3.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.2.0...v1.3.1
+[1.2.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.1.0...v1.2.0
+[1.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.0.0...v1.1.0
+[1.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v0.0.7...v1.0.0
+[0.0.7]: https://gitlab.nic.cz/turris/reforis/foris-js/-/tags/v0.0.7

Makefile

@@ -1,20 +1,31 @@
-.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
+JS_DIR=js
 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,43 +37,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
 
+
+# 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

docs/components/Logo.js

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

docs/components/logo.svg

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

docs/development.md

@@ -1,15 +1,15 @@
-Sooner or later you will face with situation when you want/need to make some
-changes in the library. Then the most important tool for you it's
+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 library just from root of the
-repo. It happens due to location of sources `./src`. You need to pack library
-first `make pack` and then link it from `./dist` directory.
+Please, notice that it will not work if you link 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 comfortable solution for development. But it can fixed by
-writing small script similar as `make pack` but with linking every file and
-directory from `./src` to the some directory and linking then from it. Notice
-that you need to link `package.json` and `package-lock.json` as well.
+Yeah, it's not such 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:
 

docs/forisjs-npm.svg

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

docs/intro.md

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

docs/introduction.md

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

jest.config.js

@@ -19,6 +19,7 @@ module.exports = {
     collectCoverageFrom: ["src/**/*.{js,jsx}"],
     coverageDirectory: "coverage",
     testPathIgnorePatterns: ["/node_modules/", "/__fixtures__/", "/dist/"],
+    testEnvironment: "jsdom",
     verbose: false,
     setupFilesAfterEnv: [
         "@testing-library/react/cleanup-after-each",

package.json

@@ -1,7 +1,7 @@
 {
     "name": "foris",
-    "version": "5.1.5",
-    "description": "Set of components and utils for Foris and its plugins.",
+    "version": "6.0.2",
+    "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",
@@ -14,49 +14,48 @@
     "license": "GPL-3.0",
     "main": "./src/index.js",
     "dependencies": {
-        "axios": "^0.19.2",
-        "immutability-helper": "3.0.1",
-        "moment": "^2.24.0",
-        "qrcode.react": "^0.9.3",
-        "react-datetime": "^3.0.4",
-        "react-uid": "^2.2.0"
+        "axios": "^1.7.2",
+        "immutability-helper": "^3.1.1",
+        "moment": "^2.30.1",
+        "qrcode.react": "^3.1.0",
+        "react-datetime": "^3.2.0",
+        "react-uid": "^2.3.3"
     },
     "peerDependencies": {
-        "bootstrap": "4.4.1",
-        "prop-types": "15.7.2",
+        "bootstrap": "^5.3.3",
+        "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2"
     },
     "devDependencies": {
-        "@babel/cli": "^7.8.4",
-        "@babel/core": "^7.9.0",
-        "@babel/plugin-transform-runtime": "^7.9.0",
-        "@babel/preset-env": "^7.9.0",
-        "@babel/preset-react": "^7.9.4",
-        "@fortawesome/fontawesome-free": "^5.13.0",
+        "@babel/cli": "^7.24.7",
+        "@babel/core": "^7.24.7",
+        "@babel/plugin-transform-runtime": "^7.24.7",
+        "@babel/preset-env": "^7.24.7",
+        "@babel/preset-react": "^7.24.7",
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "@testing-library/react": "^8.0.9",
         "babel-loader": "^8.1.0",
         "babel-polyfill": "^6.26.0",
-        "bootstrap": "^4.5.0",
-        "css-loader": "^3.5.3",
-        "eslint": "^6.8.0",
-        "eslint-config-prettier": "^6.11.0",
-        "eslint-config-reforis": "^1.0.0",
-        "eslint-plugin-prettier": "^3.1.4",
+        "bootstrap": "^5.3.3",
+        "css-loader": "^5.2.4",
+        "eslint": "^8.57.0",
+        "eslint-config-reforis": "^2.1.1",
         "file-loader": "^6.0.0",
-        "jest": "^25.2.0",
-        "jest-mock-axios": "^3.2.0",
-        "moment-timezone": "^0.5.28",
-        "prettier": "2.0.5",
-        "prop-types": "15.7.2",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "jest-mock-axios": "^4.7.3",
+        "moment-timezone": "^0.5.45",
+        "prettier": "^3.3.2",
+        "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2",
-        "react-styleguidist": "^10.6.2",
-        "snapshot-diff": "^0.7.0",
+        "react-styleguidist": "^12.0.1",
+        "snapshot-diff": "^0.10.0",
         "style-loader": "^1.2.1",
-        "webpack": "^4.43.0"
+        "webpack": "^5.92.1"
     },
     "scripts": {
         "lint": "eslint src",

prettier.config.js

@@ -0,0 +1 @@
+module.exports = require("eslint-config-reforis/prettier.config");

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -7,7 +7,6 @@
 
 import { useCallback, useEffect, useReducer, useState } from "react";
 
-import { ForisURLs } from "../utils/forisUrls";
 import {
     API_ACTIONS,
     API_METHODS,
@@ -84,8 +83,8 @@ function APIReducer(state, action) {
                 data: action.payload,
             };
         case API_ACTIONS.FAILURE:
-            if (action.status === 403) {
-                window.location.assign(ForisURLs.login);
+            if (action.status === 401) {
+                window.location.reload();
             }
 
             // Not an API error - should be rethrown.
@@ -112,9 +111,8 @@ const useAPIPatch = createAPIHook("PATCH");
 const useAPIPut = createAPIHook("PUT");
 const useAPIDelete = createAPIHook("DELETE");
 
-export { useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete };
-
-export function useAPIPolling(endpoint, delay = 1000, until) {
+/* eslint-disable default-param-last */
+function useAPIPolling(endpoint, delay = 1000, until) {
     // delay ms
     const [state, setState] = useState({ state: API_STATE.INIT });
     const [getResponse, get] = useAPIGet(endpoint);
@@ -134,3 +132,12 @@ export function useAPIPolling(endpoint, delay = 1000, until) {
 
     return [state];
 }
+
+export {
+    useAPIGet,
+    useAPIPost,
+    useAPIPatch,
+    useAPIPut,
+    useAPIDelete,
+    useAPIPolling,
+};

src/api/utils.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -11,6 +11,7 @@ export const HEADERS = {
     Accept: "application/json",
     "Content-Type": "application/json",
     "X-CSRFToken": getCookie("_csrf_token"),
+    "X-Requested-With": "json",
 };
 
 export const TIMEOUT = 30500;
@@ -56,7 +57,7 @@ function getCookie(name) {
 
 export function getErrorPayload(error) {
     if (error.response) {
-        if (error.response.status === 403) {
+        if (error.response.status === 401) {
             return _("The session is expired. Please log in again.");
         }
         return getJSONErrorMessage(error);

src/bootstrap/Alert.js

@@ -1,11 +1,12 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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";
 
 export const ALERT_TYPES = Object.freeze({
@@ -35,21 +36,24 @@ Alert.defaultProps = {
     type: ALERT_TYPES.DANGER,
 };
 
-export function Alert({ type, onDismiss, children }) {
+function Alert({ type, onDismiss, children }) {
     return (
         <div
-            className={`alert ${
+            className={`alert alert-${type} ${
                 onDismiss ? "alert-dismissible" : ""
-            } alert-${type}`}
+            }`.trim()}
         >
-            {onDismiss ? (
-                <button type="button" className="close" onClick={onDismiss}>
-                    &times;
-                </button>
-            ) : (
-                false
+            {onDismiss && (
+                <button
+                    type="button"
+                    className="btn-close"
+                    onClick={onDismiss}
+                    aria-label={_("Close")}
+                />
             )}
             {children}
         </div>
     );
 }
+
+export default Alert;

src/bootstrap/Button.js

@@ -1,11 +1,12 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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";
 
 Button.propTypes = {
@@ -24,31 +25,28 @@ Button.propTypes = {
     ]).isRequired,
 };
 
-export function Button({
-    className,
-    loading,
-    forisFormSize,
-    children,
-    ...props
-}) {
-    let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
+function Button({ className, loading, forisFormSize, children, ...props }) {
+    let buttonClass = className ? `btn ${className}` : "btn btn-primary";
     if (forisFormSize) {
-        buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
+        buttonClass = `${buttonClass} col-12 col-md-3 col-lg-2`;
     }
 
-    const span = loading ? (
-        <span
-            className="spinner-border spinner-border-sm"
-            role="status"
-            aria-hidden="true"
-        />
-    ) : null;
-
     return (
-        <button type="button" className={buttonClass} {...props}>
-            {span}
-            {span ? " " : null}
-            {children}
+        <button
+            type="button"
+            className={`${buttonClass} d-inline-flex justify-content-center align-items-center`}
+            {...props}
+        >
+            {loading && (
+                <span
+                    className="spinner-border spinner-border-sm me-1"
+                    role="status"
+                    aria-hidden="true"
+                />
+            )}
+            <span>{children}</span>
         </button>
     );
 }
+
+export default Button;

src/bootstrap/CheckBox.js

@@ -1,11 +1,12 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 { useUID } from "react-uid";
 
@@ -16,33 +17,36 @@ CheckBox.propTypes = {
     helpText: PropTypes.string,
     /** Control if checkbox is clickable */
     disabled: PropTypes.bool,
+    /** Additional class name */
+    className: PropTypes.string,
 };
 
 CheckBox.defaultProps = {
     disabled: false,
 };
 
-export function CheckBox({ label, helpText, disabled, ...props }) {
+function CheckBox({ label, helpText, disabled, className, ...props }) {
     const uid = useUID();
+
     return (
-        <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>
-                    )}
-                </label>
-            </div>
+        <div className={`${className || "mb-3"} form-check`.trim()}>
+            <input
+                className="form-check-input"
+                type="checkbox"
+                id={uid}
+                disabled={disabled}
+                {...props}
+            />
+            <label className="form-check-label" htmlFor={uid}>
+                {label}
+            </label>
+            {helpText && (
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
+            )}
         </div>
     );
 }
+
+export default CheckBox;

src/bootstrap/CopyInput.js

@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2019-2024 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,
+};
+
+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>
+    );
+}
+
+export default CopyInput;

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

@@ -1,18 +1,19 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 moment from "moment/moment";
 import PropTypes from "prop-types";
 import Datetime from "react-datetime";
-import moment from "moment/moment";
 import "react-datetime/css/react-datetime.css";
 import "./DataTimeInput.css";
 
-import { Input } from "./Input";
+import Input from "./Input";
 
 DataTimeInput.propTypes = {
     /** Field label. */
@@ -37,7 +38,7 @@ DataTimeInput.propTypes = {
 const DEFAULT_DATE_FORMAT = "YYYY-MM-DD";
 const DEFAULT_TIME_FORMAT = "HH:mm:ss";
 
-export function DataTimeInput({
+function DataTimeInput({
     value,
     onChange,
     isValidDate,
@@ -46,13 +47,13 @@ export function DataTimeInput({
     children,
     ...props
 }) {
-    function renderInput(datetimeProps) {
+    const renderInput = (datetimeProps) => {
         return (
             <Input {...props} {...datetimeProps}>
                 {children}
             </Input>
         );
-    }
+    };
 
     return (
         <Datetime
@@ -70,3 +71,5 @@ export function DataTimeInput({
         />
     );
 }
+
+export default DataTimeInput;

src/bootstrap/DownloadButton.js

@@ -1,11 +1,12 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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";
 
 DownloadButton.propTypes = {
@@ -21,10 +22,17 @@ DownloadButton.defaultProps = {
     className: "btn-primary",
 };
 
-export function DownloadButton({ href, className, children }) {
+function DownloadButton({ href, className, children, ...props }) {
     return (
-        <a href={href} className={`btn ${className}`.trim()} download>
+        <a
+            href={href}
+            className={`btn ${className}`.trim()}
+            {...props}
+            download
+        >
             {children}
         </a>
     );
 }
+
+export default DownloadButton;

src/bootstrap/EmailInput.js

@@ -6,11 +6,14 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
-import { Input } from "./Input";
+import Input from "./Input";
 
-export const EmailInput = ({ ...props }) => <Input type="email" {...props} />;
+function EmailInput({ ...props }) {
+    return <Input type="email" {...props} />;
+}
 
 EmailInput.propTypes = {
     /** Field label. */
@@ -22,3 +25,5 @@ EmailInput.propTypes = {
     /** Email value. */
     value: PropTypes.string,
 };
+
+export default EmailInput;

src/bootstrap/FileInput.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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,7 +8,8 @@
 import React from "react";
 
 import PropTypes from "prop-types";
-import { Input } from "./Input";
+
+import Input from "./Input";
 
 FileInput.propTypes = {
     /** Field label. */
@@ -23,7 +24,7 @@ FileInput.propTypes = {
     multiple: PropTypes.bool,
 };
 
-export function FileInput({ ...props }) {
+function FileInput({ ...props }) {
     return (
         <Input
             type="file"
@@ -34,3 +35,5 @@ export function FileInput({ ...props }) {
         />
     );
 }
+
+export default FileInput;

src/bootstrap/Input.js

@@ -1,13 +1,67 @@
 /*
- * 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 { useUID } from "react-uid";
+import React, { forwardRef } from "react";
+
 import PropTypes from "prop-types";
+import { useUID } from "react-uid";
+
+/** Base bootstrap input component. */
+const Input = forwardRef(
+    (
+        {
+            type,
+            label,
+            helpText,
+            error,
+            className,
+            children,
+            labelClassName,
+            groupClassName,
+            ...props
+        },
+        ref
+    ) => {
+        const uid = useUID();
+
+        const inputClassName = `${className || ""} ${
+            error ? "is-invalid" : ""
+        }`.trim();
+
+        return (
+            <div className="mb-3">
+                <label
+                    className={`form-label ${labelClassName || ""}`.trim()}
+                    htmlFor={uid}
+                >
+                    {label}
+                </label>
+                <div className={`input-group ${groupClassName || ""}`.trim()}>
+                    <input
+                        className={`form-control ${inputClassName}`.trim()}
+                        type={type}
+                        id={uid}
+                        ref={ref}
+                        {...props}
+                    />
+                    {children}
+                </div>
+                {error && <div className="invalid-feedback">{error}</div>}
+                {helpText && (
+                    <div className="form-text">
+                        <small>{helpText}</small>
+                    </div>
+                )}
+            </div>
+        );
+    }
+);
+
+Input.displayName = "Input";
 
 Input.propTypes = {
     type: PropTypes.string.isRequired,
@@ -23,40 +77,4 @@ Input.propTypes = {
     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">
-            <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>
-    );
-}
+export default Input;

src/bootstrap/Modal.js

@@ -1,15 +1,16 @@
 /*
- * Copyright (C) 2020 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2020-2024 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, { useRef, useEffect } from "react";
+
 import PropTypes from "prop-types";
 
-import { Portal } from "../utils/Portal";
 import { useClickOutside } from "../utils/hooks";
+import Portal from "../utils/Portal";
 import "./Modal.css";
 
 Modal.propTypes = {
@@ -18,6 +19,7 @@ Modal.propTypes = {
     /** Callback to manage modal visibility */
     setShown: PropTypes.func.isRequired,
     scrollable: PropTypes.bool,
+    size: PropTypes.string,
 
     /** Modal content use following: `ModalHeader`, `ModalBody`, `ModalFooter` */
     children: PropTypes.oneOfType([
@@ -26,8 +28,9 @@ Modal.propTypes = {
     ]).isRequired,
 };
 
-export function Modal({ shown, setShown, scrollable, children }) {
+export function Modal({ shown, setShown, scrollable, size, children }) {
     const dialogRef = useRef();
+    let modalSize = "modal-";
 
     useClickOutside(dialogRef, () => setShown(false));
 
@@ -44,14 +47,32 @@ export function Modal({ shown, setShown, scrollable, children }) {
         };
     }, [setShown]);
 
+    switch (size) {
+        case "sm":
+            modalSize += "sm";
+            break;
+        case "lg":
+            modalSize += "lg";
+            break;
+        case "xl":
+            modalSize += "xl";
+            break;
+        default:
+            modalSize = "";
+            break;
+    }
+
     return (
         <Portal containerId="modal-container">
-            <div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
+            <div
+                className={`modal fade ${shown ? "show" : ""}`.trim()}
+                role="dialog"
+            >
                 <div
                     ref={dialogRef}
-                    className={`modal-dialog modal-dialog-centered${
-                        scrollable ? " modal-dialog-scrollable" : ""
-                    }`}
+                    className={`${modalSize.trim()} modal-dialog modal-dialog-centered ${
+                        scrollable ? "modal-dialog-scrollable" : ""
+                    }`.trim()}
                     role="document"
                 >
                     <div className="modal-content">{children}</div>
@@ -72,11 +93,10 @@ export function ModalHeader({ setShown, title }) {
             <h5 className="modal-title">{title}</h5>
             <button
                 type="button"
-                className="close"
+                className="btn-close"
                 onClick={() => setShown(false)}
-            >
-                <span aria-hidden="true">&times;</span>
-            </button>
+                aria-label={_("Close")}
+            />
         </div>
     );
 }

src/bootstrap/Modal.md

@@ -1,8 +1,19 @@
 Bootstrap modal component.
 
-it's required to have an element `<div id={"modal-container"}/>` somewhere on
+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" />
 ```
@@ -14,7 +25,7 @@ import { useState } from "react";
 const [shown, setShown] = useState(false);
 
 <>
-    <Modal setShown={setShown} shown={shown}>
+    <Modal setShown={setShown} shown={shown} size="sm">
         <ModalHeader setShown={setShown} title="Warning!" />
         <ModalBody>
             <p>Bla bla bla...</p>

src/bootstrap/NumberInput.js

@@ -1,15 +1,16 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 Input from "./Input";
 import { useConditionalTimeout } from "../utils/hooks";
-import { Input } from "./Input";
 import "./NumberInput.css";
 
 NumberInput.propTypes = {
@@ -23,7 +24,7 @@ NumberInput.propTypes = {
     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. */
+    /** Additional description displayed to the right of input value. */
     inlineText: PropTypes.string,
 };
 
@@ -31,7 +32,7 @@ NumberInput.defaultProps = {
     value: 0,
 };
 
-export function NumberInput({ onChange, inlineText, value, ...props }) {
+function NumberInput({ onChange, inlineText, value, ...props }) {
     function updateValue(initialValue, difference) {
         onChange({ target: { value: initialValue + difference } });
     }
@@ -49,27 +50,29 @@ export function NumberInput({ onChange, inlineText, value, ...props }) {
 
     return (
         <Input type="number" onChange={onChange} value={value} {...props}>
-            <div className="input-group-append">
-                {inlineText && <p className="input-group-text">{inlineText}</p>}
-                <button
-                    type="button"
-                    className="btn btn-outline-secondary"
-                    onMouseDown={() => enableIncrease(true)}
-                    onMouseUp={() => enableIncrease(false)}
-                    aria-label="Increase"
-                >
-                    <i className="fas fa-plus" />
-                </button>
-                <button
-                    type="button"
-                    className="btn btn-outline-secondary"
-                    onMouseDown={() => enableDecrease(true)}
-                    onMouseUp={() => enableDecrease(false)}
-                    aria-label="Decrease"
-                >
-                    <i className="fas fa-minus" />
-                </button>
-            </div>
+            {inlineText && (
+                <span className="input-group-text">{inlineText}</span>
+            )}
+            <button
+                type="button"
+                className="btn btn-outline-secondary"
+                onMouseDown={() => enableIncrease(true)}
+                onMouseUp={() => enableIncrease(false)}
+                aria-label="Increase"
+            >
+                <i className="fas fa-plus" />
+            </button>
+            <button
+                type="button"
+                className="btn btn-outline-secondary"
+                onMouseDown={() => enableDecrease(true)}
+                onMouseUp={() => enableDecrease(false)}
+                aria-label="Decrease"
+            >
+                <i className="fas fa-minus" />
+            </button>
         </Input>
     );
 }
+
+export default NumberInput;

src/bootstrap/PasswordInput.js

@@ -1,14 +1,15 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 } from "react";
+
 import PropTypes from "prop-types";
 
-import { Input } from "./Input";
+import Input from "./Input";
 
 PasswordInput.propTypes = {
     /** Field label. */
@@ -21,34 +22,35 @@ 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 }) {
+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 ? (
-                <div className="input-group-append">
-                    <button
-                        type="button"
-                        className="input-group-text"
-                        onClick={(e) => {
-                            e.preventDefault();
-                            setHidden((shouldBeHidden) => !shouldBeHidden);
-                        }}
-                    >
-                        <i
-                            className={`fa ${
-                                isHidden ? "fa-eye" : "fa-eye-slash"
-                            }`}
-                        />
-                    </button>
-                </div>
-            ) : null}
+            {withEye && (
+                <button
+                    type="button"
+                    className="input-group-text"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        setHidden((shouldBeHidden) => !shouldBeHidden);
+                    }}
+                >
+                    <i
+                        className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`}
+                    />
+                </button>
+            )}
         </Input>
     );
 }
+
+export default PasswordInput;

src/bootstrap/RadioSet.js

@@ -1,11 +1,12 @@
 /*
- * Copyright (C) 2020 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2020-2024 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 { useUID } from "react-uid";
 
@@ -17,7 +18,7 @@ RadioSet.propTypes = {
     /** Choices . */
     choices: PropTypes.arrayOf(
         PropTypes.shape({
-            /** Choice lable . */
+            /** Choice label . */
             label: PropTypes.oneOfType([
                 PropTypes.string,
                 PropTypes.element,
@@ -36,15 +37,7 @@ RadioSet.propTypes = {
     inline: PropTypes.bool,
 };
 
-export function RadioSet({
-    name,
-    label,
-    choices,
-    value,
-    helpText,
-    inline,
-    ...props
-}) {
+function RadioSet({ name, label, choices, value, helpText, inline, ...props }) {
     const uid = useUID();
     const radios = choices.map((choice, key) => {
         const id = `${name}-${key}`;
@@ -64,7 +57,7 @@ export function RadioSet({
     });
 
     return (
-        <div className="form-group">
+        <div className="mb-3">
             {label && (
                 <label htmlFor={uid} className="d-block">
                     {label}
@@ -72,7 +65,9 @@ export function RadioSet({
             )}
             {radios}
             {helpText && (
-                <small className="form-text text-muted">{helpText}</small>
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
             )}
         </div>
     );
@@ -88,31 +83,30 @@ Radio.propTypes = {
     id: PropTypes.string.isRequired,
     inline: PropTypes.bool,
     helpText: PropTypes.string,
+    className: PropTypes.string,
 };
 
-export function Radio({ label, id, helpText, inline, ...props }) {
+export function Radio({ label, id, helpText, inline, className, ...props }) {
     return (
-        <>
-            <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>
+        <div
+            className={`${className || "mb-3"} ${inline ? "form-check form-check-inline" : ""}`.trim()}
+        >
+            <input
+                id={id}
+                className="form-check-input me-2"
+                type="radio"
+                {...props}
+            />
+            <label className="form-check-label" htmlFor={id}>
+                {label}
                 {helpText && (
-                    <small className="form-text text-muted mt-0 mb-3">
-                        {helpText}
-                    </small>
+                    <div className="form-text">
+                        <small>{helpText}</small>
+                    </div>
                 )}
-            </div>
-        </>
+            </label>
+        </div>
     );
 }
+
+export default RadioSet;

src/bootstrap/Select.js

@@ -1,11 +1,12 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 { useUID } from "react-uid";
 
@@ -20,25 +21,30 @@ Select.propTypes = {
     helpText: PropTypes.string,
 };
 
-export function Select({ label, choices, helpText, ...props }) {
+function Select({ label, choices, helpText, ...props }) {
     const uid = useUID();
 
-    const options = Object.keys(choices)
-        .sort((a, b) => a - b || a.toString().localeCompare(b.toString()))
-        .map((key) => (
-            <option key={key} value={key}>
-                {choices[key]}
-            </option>
-        ));
+    const options = Object.keys(choices).map((choice) => (
+        <option key={choice} value={choice}>
+            {choices[choice]}
+        </option>
+    ));
+
     return (
-        <div className="form-group">
-            <label htmlFor={uid}>{label}</label>
-            <select className="custom-select" id={uid} {...props}>
+        <div className="mb-3">
+            <label className="form-label" htmlFor={uid}>
+                {label}
+            </label>
+            <select className="form-select" id={uid} {...props}>
                 {options}
             </select>
-            {helpText ? (
-                <small className="form-text text-muted">{helpText}</small>
-            ) : null}
+            {helpText && (
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
+            )}
         </div>
     );
 }
+
+export default Select;

src/bootstrap/Spinner.css

@@ -1,3 +1,11 @@
+.spinner-fs-wrapper {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1101; /* increase z-index by 1 to ensure it's on top of spinner-fs-background */
+}
+
 .spinner-wrapper .spinner-border {
     width: 4rem;
     height: 4rem;
@@ -7,10 +15,8 @@
 .spinner-fs-background {
     background-color: rgba(2, 2, 2, 0.5);
     color: rgb(230, 230, 230);
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
+    width: 100vw;
+    height: 100vh;
 
     display: flex;
     align-items: center;
@@ -31,3 +37,7 @@
 .spinner-fs-wrapper .spinner-text {
     margin: 1rem;
 }
+
+.spinner-border-sm {
+    min-width: 16px;
+}

src/bootstrap/Spinner.js

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
 import "./Spinner.css";
@@ -16,7 +17,7 @@ Spinner.propTypes = {
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node,
     ]),
-    /** Render component with full-screen mode (using apropriate `.css` styles) */
+    /** Render component with full-screen mode (using appropriate `.css` styles) */
     fullScreen: PropTypes.bool.isRequired,
     className: PropTypes.string,
 };

src/bootstrap/Switch.js

@@ -1,11 +1,12 @@
 /*
- * Copyright (c) 2020 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (c) 2020-2024 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 { useUID } from "react-uid";
 
@@ -18,32 +19,35 @@ Switch.propTypes = {
     ]).isRequired,
     helpText: PropTypes.string,
     switchHeading: PropTypes.bool,
+    className: PropTypes.string,
 };
 
-export function Switch({ label, helpText, switchHeading, ...props }) {
+function Switch({ label, helpText, switchHeading, className, ...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
+            className={`form-check form-switch ${className || "mb-3"} ${
+                switchHeading ? "d-flex align-items-center" : ""
+            }`.trim()}
+        >
+            <input
+                type="checkbox"
+                className={`form-check-input ${switchHeading ? "me-2" : ""}`.trim()}
+                role="switch"
+                id={uid}
+                {...props}
+            />
+            <label className="form-check-label" htmlFor={uid}>
+                {label}
+            </label>
+            {helpText && (
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
+            )}
         </div>
     );
 }
+
+export default Switch;

src/bootstrap/Switch.md

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

src/bootstrap/TextInput.js

@@ -1,16 +1,19 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 { Input } from "./Input";
+import Input from "./Input";
 
-export const TextInput = ({ ...props }) => <Input type="text" {...props} />;
+function TextInput({ ...props }) {
+    return <Input type="text" {...props} />;
+}
 
 TextInput.propTypes = {
     /** Field label. */
@@ -20,3 +23,5 @@ TextInput.propTypes = {
     /** Help text message. */
     helpText: PropTypes.string,
 };
+
+export default TextInput;

src/bootstrap/__tests__/Button.test.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import { Button } from "../Button";
+import Button from "../Button";
 
 describe("<Button />", () => {
     it("Render button correctly", () => {

src/bootstrap/__tests__/CheckBox.test.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import { CheckBox } from "../CheckBox";
+import CheckBox from "../CheckBox";
 
 describe("<Checkbox/>", () => {
     it("Render checkbox", () => {

src/bootstrap/__tests__/DownloadButton.test.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import { DownloadButton } from "../DownloadButton";
+import DownloadButton from "../DownloadButton";
 
 describe("<DownloadButton />", () => {
     it("should have download attribute", () => {

src/bootstrap/__tests__/NumberInput.test.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import { render, fireEvent, getByLabelText, wait } from "customTestRender";
 
-import { NumberInput } from "../NumberInput";
+import NumberInput from "../NumberInput";
 
 describe("<NumberInput/>", () => {
     const onChangeMock = jest.fn();

src/bootstrap/__tests__/PasswordInput.test.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import { PasswordInput } from "../PasswordInput";
+import PasswordInput from "../PasswordInput";
 
 describe("<PasswordInput/>", () => {
     it("Render password input", () => {

src/bootstrap/__tests__/RadioSet.test.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import { RadioSet } from "../RadioSet";
+import RadioSet from "../RadioSet";
 
 const TEST_CHOICES = [
     {

src/bootstrap/__tests__/Select.test.js

@@ -14,7 +14,7 @@ import {
     render,
 } from "customTestRender";
 
-import { Select } from "../Select";
+import Select from "../Select";
 
 const TEST_CHOICES = {
     1: "one",

src/bootstrap/__tests__/Switch.test.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import { Switch } from "../Switch";
+import Switch from "../Switch";
 
 describe("<Switch/>", () => {
     it("Render switch", () => {

src/bootstrap/__tests__/TextInput.test.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import { TextInput } from "../TextInput";
+import TextInput from "../TextInput";
 
 describe("<TextInput/>", () => {
     it("Render text input", () => {

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

@@ -2,33 +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"
 >
-  Test 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"
 >
-  Test 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 me-1"
     role="status"
   />
-   
-  Test Button
+  <span>
+    Test Button
+  </span>
 </button>
 `;

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

@@ -2,55 +2,51 @@
 
 exports[`<Checkbox/> Render checkbox 1`] = `
 <div
-  class="form-group"
+  class="mb-3 form-check"
 >
-  <div
-    class="custom-control custom-checkbox "
+  <input
+    checked=""
+    class="form-check-input"
+    id="1"
+    type="checkbox"
+  />
+  <label
+    class="form-check-label"
+    for="1"
   >
-    <input
-      checked=""
-      class="custom-control-input"
-      id="1"
-      type="checkbox"
-    />
-    <label
-      class="custom-control-label"
-      for="1"
-    >
-      Test label
-      <small
-        class="form-text text-muted"
-      >
-        Some help text
-      </small>
-    </label>
+    Test label
+  </label>
+  <div
+    class="form-text"
+  >
+    <small>
+      Some help text
+    </small>
   </div>
 </div>
 `;
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="form-group"
+  class="mb-3 form-check"
 >
-  <div
-    class="custom-control custom-checkbox "
+  <input
+    class="form-check-input"
+    id="1"
+    type="checkbox"
+  />
+  <label
+    class="form-check-label"
+    for="1"
   >
-    <input
-      class="custom-control-input"
-      id="1"
-      type="checkbox"
-    />
-    <label
-      class="custom-control-label"
-      for="1"
-    >
-      Test label
-      <small
-        class="form-text text-muted"
-      >
-        Some help text
-      </small>
-    </label>
+    Test label
+  </label>
+  <div
+    class="form-text"
+  >
+    <small>
+      Some help text
+    </small>
   </div>
 </div>
 `;

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

@@ -2,9 +2,10 @@
 
 exports[`<NumberInput/> Render number input 1`] = `
 <div
-  class="form-group"
+  class="mb-3"
 >
   <label
+    class="form-label"
     for="1"
   >
     Test label
@@ -18,33 +19,31 @@ exports[`<NumberInput/> Render number input 1`] = `
       type="number"
       value="1"
     />
-    <div
-      class="input-group-append"
+    <button
+      aria-label="Increase"
+      class="btn btn-outline-secondary"
+      type="button"
     >
-      <button
-        aria-label="Increase"
-        class="btn btn-outline-secondary"
-        type="button"
-      >
-        <i
-          class="fas fa-plus"
-        />
-      </button>
-      <button
-        aria-label="Decrease"
-        class="btn btn-outline-secondary"
-        type="button"
-      >
-        <i
-          class="fas fa-minus"
-        />
-      </button>
-    </div>
+      <i
+        class="fas fa-plus"
+      />
+    </button>
+    <button
+      aria-label="Decrease"
+      class="btn btn-outline-secondary"
+      type="button"
+    >
+      <i
+        class="fas fa-minus"
+      />
+    </button>
   </div>
-  <small
-    class="form-text text-muted"
+  <div
+    class="form-text"
   >
-    Some help text
-  </small>
+    <small>
+      Some help text
+    </small>
+  </div>
 </div>
 `;

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

@@ -2,9 +2,10 @@
 
 exports[`<PasswordInput/> Render password input 1`] = `
 <div
-  class="form-group"
+  class="mb-3"
 >
   <label
+    class="form-label"
     for="1"
   >
     Test label
@@ -13,17 +14,19 @@ exports[`<PasswordInput/> Render password input 1`] = `
     class="input-group"
   >
     <input
-      autocomplete="new-password"
+      autocomplete="current-password"
       class="form-control"
       id="1"
       type="password"
       value="Some password"
     />
   </div>
-  <small
-    class="form-text text-muted"
+  <div
+    class="form-text"
   >
-    Some help text
-  </small>
+    <small>
+      Some help text
+    </small>
+  </div>
 </div>
 `;

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

@@ -2,7 +2,7 @@
 
 exports[`<RadioSet/> Render radio set 1`] = `
 <div
-  class="form-group"
+  class="mb-3"
 >
   <label
     class="d-block"
@@ -11,61 +11,63 @@ exports[`<RadioSet/> Render radio set 1`] = `
     Radios set label
   </label>
   <div
-    class="custom-control custom-radio"
+    class="mb-3"
   >
     <input
       checked=""
-      class="custom-control-input"
+      class="form-check-input me-2"
       id="test_name-0"
       name="test_name"
       type="radio"
       value="value"
     />
     <label
-      class="custom-control-label"
+      class="form-check-label"
       for="test_name-0"
     >
       label
     </label>
   </div>
   <div
-    class="custom-control custom-radio"
+    class="mb-3"
   >
     <input
-      class="custom-control-input"
+      class="form-check-input me-2"
       id="test_name-1"
       name="test_name"
       type="radio"
       value="another value"
     />
     <label
-      class="custom-control-label"
+      class="form-check-label"
       for="test_name-1"
     >
       another label
     </label>
   </div>
   <div
-    class="custom-control custom-radio"
+    class="mb-3"
   >
     <input
-      class="custom-control-input"
+      class="form-check-input me-2"
       id="test_name-2"
       name="test_name"
       type="radio"
       value="another on value"
     />
     <label
-      class="custom-control-label"
+      class="form-check-label"
       for="test_name-2"
     >
       another one  label
     </label>
   </div>
-  <small
-    class="form-text text-muted"
+  <div
+    class="form-text"
   >
-    Some help text
-  </small>
+    <small>
+      Some help text
+    </small>
+  </div>
 </div>
 `;

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

@@ -3,15 +3,16 @@
 exports[`<Select/> Test with snapshot. 1`] = `
 <div>
   <div
-    class="form-group"
+    class="mb-3"
   >
     <label
+      class="form-label"
       for="1"
     >
       Test label
     </label>
     <select
-      class="custom-select"
+      class="form-select"
       id="1"
     >
       <option
@@ -30,11 +31,13 @@ exports[`<Select/> Test with snapshot. 1`] = `
         three
       </option>
     </select>
-    <small
-      class="form-text text-muted"
+    <div
+      class="form-text"
     >
-      Help text
-    </small>
+      <small>
+        Help text
+      </small>
+    </div>
   </div>
 </div>
 `;

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

@@ -2,26 +2,25 @@
 
 exports[`<Switch/> Render switch 1`] = `
 <div
-  class="form-group"
+  class="form-check form-switch mb-3"
 >
-  <div
-    class="custom-control custom-switch"
+  <input
+    checked=""
+    class="form-check-input"
+    id="1"
+    role="switch"
+    type="checkbox"
+  />
+  <label
+    class="form-check-label"
+    for="1"
   >
-    <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"
-    >
+    Test label
+  </label>
+  <div
+    class="form-text"
+  >
+    <small>
       Some help text
     </small>
   </div>
@@ -30,25 +29,24 @@ exports[`<Switch/> Render switch 1`] = `
 
 exports[`<Switch/> Render uncheked switch 1`] = `
 <div
-  class="form-group"
+  class="form-check form-switch mb-3"
 >
-  <div
-    class="custom-control custom-switch"
+  <input
+    class="form-check-input"
+    id="1"
+    role="switch"
+    type="checkbox"
+  />
+  <label
+    class="form-check-label"
+    for="1"
   >
-    <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"
-    >
+    Test label
+  </label>
+  <div
+    class="form-text"
+  >
+    <small>
       Some help text
     </small>
   </div>

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

@@ -2,9 +2,10 @@
 
 exports[`<TextInput/> Render text input 1`] = `
 <div
-  class="form-group"
+  class="mb-3"
 >
   <label
+    class="form-label"
     for="1"
   >
     Test label
@@ -19,10 +20,12 @@ exports[`<TextInput/> Render text input 1`] = `
       value="Some text"
     />
   </div>
-  <small
-    class="form-text text-muted"
+  <div
+    class="form-text"
   >
-    Some help text
-  </small>
+    <small>
+      Some help text
+    </small>
+  </div>
 </div>
 `;

src/bootstrap/constants.js

@@ -1,11 +1,12 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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.
  */
 
 /** Bootstrap column size for form fields */
-// eslint-disable-next-line import/prefer-default-export
-export const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-3";
-export const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";
+const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-4";
+const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";
+
+export { formFieldsSize, buttonFormFieldsSize };

src/common/RebootButton.js

@@ -1,22 +1,22 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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, useEffect } from "react";
+
 import PropTypes from "prop-types";
 
 import { useAPIPost } from "../api/hooks";
 import { API_STATE } from "../api/utils";
+import Button from "../bootstrap/Button";
+import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
+import { useAlert } from "../context/alertContext/AlertContext";
 import { ForisURLs } from "../utils/forisUrls";
 
-import { Button } from "../bootstrap/Button";
-import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
-import { useAlert } from "../alertContext/AlertContext";
-
-export function RebootButton(props) {
+function RebootButton(props) {
     const [triggered, setTriggered] = useState(false);
     const [modalShown, setModalShown] = useState(false);
     const [triggerRebootStatus, triggerReboot] = useAPIPost(ForisURLs.reboot);
@@ -28,11 +28,11 @@ export function RebootButton(props) {
         }
     });
 
-    function rebootHandler() {
+    const rebootHandler = () => {
         setTriggered(true);
         triggerReboot();
         setModalShown(false);
-    }
+    };
 
     return (
         <>
@@ -76,3 +76,5 @@ function RebootModal({ shown, setShown, onReboot }) {
         </Modal>
     );
 }
+
+export default RebootButton;

src/common/WiFiSettings/ResetWiFiSettings.js

@@ -1,26 +1,27 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 "../../alertContext/AlertContext";
-import { ALERT_TYPES } from "../../bootstrap/Alert";
 import { useAPIPost } from "../../api/hooks";
 import { API_STATE } from "../../api/utils";
-import { buttonFormFieldsSize } from "../../bootstrap/constants";
+import { ALERT_TYPES } from "../../bootstrap/Alert";
+import Button from "../../bootstrap/Button";
+import { formFieldsSize } from "../../bootstrap/constants";
+import { useAlert } from "../../context/alertContext/AlertContext";
 
 ResetWiFiSettings.propTypes = {
     ws: PropTypes.object.isRequired,
     endpoint: PropTypes.string.isRequired,
 };
 
-export default function ResetWiFiSettings({ ws, endpoint }) {
+function ResetWiFiSettings({ ws, endpoint }) {
     const [isLoading, setIsLoading] = useState(false);
 
     useEffect(() => {
@@ -44,24 +45,23 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
         }
     }, [postResetResponse, setAlert]);
 
-    function onReset() {
+    const 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.
-        `)}
+                {_(
+                    "If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values."
+                )}
             </p>
-            <div className={`${buttonFormFieldsSize} text-right`}>
+            <div className="text-end">
                 <Button
-                    className="btn-warning"
+                    className="btn-primary"
                     forisFormSize
                     loading={isLoading}
                     disabled={isLoading}
@@ -70,6 +70,8 @@ current Wi-Fi configuration and restore the default values.
                     {_("Reset Wi-Fi Settings")}
                 </Button>
             </div>
-        </>
+        </div>
     );
 }
+
+export default ResetWiFiSettings;

src/common/WiFiSettings/WiFiForm.js

@@ -1,21 +1,22 @@
 /*
- * 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 PropTypes from "prop-types";
-import { Switch } from "../../bootstrap/Switch";
-import { CheckBox } from "../../bootstrap/CheckBox";
-import { PasswordInput } from "../../bootstrap/PasswordInput";
-import { RadioSet } from "../../bootstrap/RadioSet";
-import { Select } from "../../bootstrap/Select";
-import { TextInput } from "../../bootstrap/TextInput";
-import WiFiQRCode from "./WiFiQRCode";
+
+import { HELP_TEXTS, HTMODES, HWMODES, ENCRYPTIONMODES } from "./constants";
 import WifiGuestForm from "./WiFiGuestForm";
-import { HELP_TEXTS, HTMODES, HWMODES } from "./constants";
+import WiFiQRCode from "./WiFiQRCode";
+import PasswordInput from "../../bootstrap/PasswordInput";
+import RadioSet from "../../bootstrap/RadioSet";
+import Select from "../../bootstrap/Select";
+import Switch from "../../bootstrap/Switch";
+import TextInput from "../../bootstrap/TextInput";
 
 WiFiForm.propTypes = {
     formData: PropTypes.shape({ devices: PropTypes.arrayOf(PropTypes.object) })
@@ -63,6 +64,9 @@ DeviceForm.propTypes = {
         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,
@@ -86,10 +90,11 @@ function DeviceForm({
     ...props
 }) {
     const deviceID = formData.id;
+    const bnds = formData.available_bands;
     return (
         <>
             <Switch
-                label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
+                label={<h2 className="mb-0">{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
                 checked={formData.enabled}
                 onChange={setFormValue((value) => ({
                     devices: {
@@ -99,7 +104,7 @@ function DeviceForm({
                 switchHeading
                 {...props}
             />
-            {formData.enabled ? (
+            {formData.enabled && (
                 <>
                     <TextInput
                         label="SSID"
@@ -116,17 +121,15 @@ function DeviceForm({
                         }))}
                         {...props}
                     >
-                        <div className="input-group-append">
-                            <WiFiQRCode
-                                SSID={formData.SSID}
-                                password={formData.password}
-                            />
-                        </div>
+                        <WiFiQRCode
+                            SSID={formData.SSID}
+                            password={formData.password}
+                        />
                     </TextInput>
 
                     <PasswordInput
                         withEye
-                        label="Password"
+                        label={_("Password")}
                         value={formData.password}
                         error={formErrors.password}
                         helpText={HELP_TEXTS.password}
@@ -139,8 +142,8 @@ function DeviceForm({
                         {...props}
                     />
 
-                    <CheckBox
-                        label="Hide SSID"
+                    <Switch
+                        label={_("Hide SSID")}
                         helpText={HELP_TEXTS.hidden}
                         checked={formData.hidden}
                         onChange={setFormValue((value) => ({
@@ -158,19 +161,29 @@ function DeviceForm({
                         value={formData.hwmode}
                         helpText={HELP_TEXTS.hwmode}
                         inline
-                        onChange={setFormValue((value) => ({
-                            devices: {
-                                [deviceIndex]: {
-                                    hwmode: { $set: value },
-                                    channel: { $set: "0" },
+                        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 mode"
+                        label={_("802.11n/ac/ax mode")}
                         choices={getHtmodeChoices(formData)}
                         value={formData.htmode}
                         helpText={HELP_TEXTS.htmode}
@@ -183,7 +196,7 @@ function DeviceForm({
                     />
 
                     <Select
-                        label="Channel"
+                        label={_("Channel")}
                         choices={getChannelChoices(formData)}
                         value={formData.channel}
                         onChange={setFormValue((value) => ({
@@ -194,6 +207,38 @@ function DeviceForm({
                         {...props}
                     />
 
+                    <Select
+                        label={_("Encryption")}
+                        choices={getEncryptionChoices(formData)}
+                        helpText={HELP_TEXTS.wpa3}
+                        value={formData.encryption}
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { encryption: { $set: value } },
+                            },
+                        }))}
+                        {...props}
+                    />
+
+                    {(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={{
@@ -206,8 +251,8 @@ function DeviceForm({
                         />
                     )}
                 </>
-            ) : null}
-            {divider ? <hr /> : null}
+            )}
+            {divider && <hr />}
         </>
     );
 }
@@ -224,8 +269,8 @@ function getChannelChoices(device) {
             channelChoices[availableChannel.number.toString()] = `
                         ${availableChannel.number}
                         (${availableChannel.frequency} MHz ${
-                availableChannel.radar ? " ,DFS" : ""
-            })
+                            availableChannel.radar ? " ,DFS" : ""
+                        })
                     `;
         });
     });
@@ -252,3 +297,10 @@ function getHwmodeChoices(device) {
         value: availableBand.hwmode,
     }));
 }
+
+function getEncryptionChoices(device) {
+    if (device.encryption === "custom") {
+        ENCRYPTIONMODES.custom = _("Custom");
+    }
+    return ENCRYPTIONMODES;
+}

src/common/WiFiSettings/WiFiGuestForm.js

@@ -1,18 +1,19 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 { TextInput } from "../../bootstrap/TextInput";
-import { Switch } from "../../bootstrap/Switch";
-import { PasswordInput } from "../../bootstrap/PasswordInput";
-import WiFiQRCode from "./WiFiQRCode";
 import { HELP_TEXTS } from "./constants";
+import WiFiQRCode from "./WiFiQRCode";
+import PasswordInput from "../../bootstrap/PasswordInput";
+import Switch from "../../bootstrap/Switch";
+import TextInput from "../../bootstrap/TextInput";
 
 WifiGuestForm.propTypes = {
     formData: PropTypes.shape({

src/common/WiFiSettings/WiFiQRCode.js

@@ -6,18 +6,19 @@
  */
 
 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 PropTypes from "prop-types";
+import QRCode from "qrcode.react";
+
+import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
+import Button from "../../bootstrap/Button";
 import {
     Modal,
     ModalBody,
     ModalFooter,
     ModalHeader,
 } from "../../bootstrap/Modal";
-import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
+import { ForisURLs } from "../../utils/forisUrls";
 
 WiFiQRCode.propTypes = {
     SSID: PropTypes.string.isRequired,
@@ -87,7 +88,7 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
                         createAndDownloadPdf(SSID, password);
                     }}
                 >
-                    <i className="fas fa-arrow-down mr-2" />
+                    <i className="fas fa-file-download me-2" />
                     {_("Download PDF")}
                 </Button>
             </ModalFooter>

src/common/WiFiSettings/WiFiSettings.js

@@ -1,16 +1,17 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 { ForisForm } from "../../form/components/ForisForm";
-import WiFiForm from "./WiFiForm";
 import ResetWiFiSettings from "./ResetWiFiSettings";
+import WiFiForm from "./WiFiForm";
+import ForisForm from "../../form/components/ForisForm";
 
 WiFiSettings.propTypes = {
     ws: PropTypes.object.isRequired,
@@ -19,7 +20,7 @@ WiFiSettings.propTypes = {
     hasGuestNetwork: PropTypes.bool,
 };
 
-export function WiFiSettings({ ws, endpoint, resetEndpoint, hasGuestNetwork }) {
+function WiFiSettings({ ws, endpoint, resetEndpoint, hasGuestNetwork }) {
     return (
         <>
             <ForisForm
@@ -59,6 +60,10 @@ function prepDataToSubmit(formData) {
 
         if (!device.guest_wifi.enabled)
             formData.devices[idx].guest_wifi = { enabled: false };
+
+        if (device.encryption === "WPA2") {
+            delete formData.devices[idx].ieee80211w_disabled;
+        }
     });
     return formData;
 }
@@ -82,6 +87,10 @@ export function validator(formData) {
 
         if (device.password.length < 8)
             errors.password = _("Password must contain at least 8 symbols");
+        if (device.password.length >= 64)
+            errors.password = _(
+                "Password must not contain more than 63 symbols"
+            );
 
         if (!device.guest_wifi.enabled) return errors;
 
@@ -97,6 +106,10 @@ export function validator(formData) {
             guest_wifi_errors.password = _(
                 "Password must contain at least 8 symbols"
             );
+        if (device.guest_wifi.password.length >= 64)
+            guest_wifi_errors.password = _(
+                "Password must not contain more than 63 symbols"
+            );
 
         if (guest_wifi_errors.SSID || guest_wifi_errors.password) {
             errors.guest_wifi = guest_wifi_errors;
@@ -105,3 +118,5 @@ export function validator(formData) {
     });
     return JSON.stringify(formErrors).match(/\[[{},?]+\]/) ? null : formErrors;
 }
+
+export default WiFiSettings;

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -9,7 +9,7 @@ import React from "react";
 import { render, fireEvent, wait } from "customTestRender";
 
 import mockAxios from "jest-mock-axios";
-import { WebSockets } from "webSockets/WebSockets";
+import WebSockets from "webSockets/WebSockets";
 import { mockJSONError } from "testUtils/network";
 import { mockSetAlert } from "testUtils/alertContextMock";
 import { ALERT_TYPES } from "../../../bootstrap/Alert";

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -10,7 +10,7 @@ import diffSnapshot from "snapshot-diff";
 import mockAxios from "jest-mock-axios";
 
 import { fireEvent, render, wait } from "customTestRender";
-import { WebSockets } from "webSockets/WebSockets";
+import WebSockets from "webSockets/WebSockets";
 import { mockJSONError } from "testUtils/network";
 
 import {
@@ -19,13 +19,14 @@ import {
     twoDevices,
     threeDevices,
 } from "./__fixtures__/wifiSettings";
-import { WiFiSettings, validator, byteCount } from "../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";
 
@@ -41,6 +42,7 @@ describe("<WiFiSettings/>", () => {
         asFragment = renderRes.asFragment;
         getAllByText = renderRes.getAllByText;
         getAllByLabelText = renderRes.getAllByLabelText;
+        getByLabelText = renderRes.getByLabelText;
         getByText = renderRes.getByText;
         mockAxios.mockResponse({ data: wifiSettingsFixture() });
         await wait(() => renderRes.getByText("Wi-Fi 1"));
@@ -51,7 +53,6 @@ describe("<WiFiSettings/>", () => {
         const webSockets = new WebSockets();
         const { getByText } = render(
             <WiFiSettings
-                ws={webSockets}
                 ws={webSockets}
                 endpoint={endpoint}
                 resetEndpoint="foo"
@@ -116,10 +117,11 @@ describe("<WiFiSettings/>", () => {
                     enabled: true,
                     guest_wifi: { enabled: false },
                     hidden: false,
-                    htmode: "HT40",
+                    htmode: "HT80",
                     hwmode: "11a",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],
@@ -145,10 +147,11 @@ describe("<WiFiSettings/>", () => {
                     enabled: true,
                     guest_wifi: { enabled: false },
                     hidden: false,
-                    htmode: "HT40",
+                    htmode: "VHT80",
                     hwmode: "11g",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],
@@ -181,10 +184,11 @@ describe("<WiFiSettings/>", () => {
                         password: "test_password",
                     },
                     hidden: false,
-                    htmode: "HT40",
+                    htmode: "HT80",
                     hwmode: "11a",
                     id: 0,
                     password: "TestPass",
+                    encryption: "WPA3",
                 },
                 { enabled: false, id: 1 },
             ],
@@ -217,4 +221,24 @@ describe("<WiFiSettings/>", () => {
     it("ByteCount function", () => {
         expect(byteCount("abc")).toEqual(3);
     });
+
+    it("Should validate password length", () => {
+        const shortErrorFeedback = /Password must contain/i;
+        const longErrorFeedback = /Password must not contain/i;
+
+        fireEvent.click(getByText("Wi-Fi 1"));
+
+        const passwordInput = getByLabelText("Password");
+
+        const changePassword = (value) =>
+            fireEvent.change(passwordInput, { target: { value } });
+
+        changePassword("12");
+        expect(getByText(shortErrorFeedback)).toBeDefined();
+
+        changePassword(
+            "longpasswordlongpasswordlongpasswordlongpasswordlongpasswordlong"
+        );
+        expect(getByText(longErrorFeedback)).toBeDefined();
+    });
 });

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -226,10 +226,11 @@ export function wifiSettingsFixture() {
                     password: "",
                 },
                 hidden: false,
-                htmode: "HT40",
+                htmode: "HT80",
                 hwmode: "11a",
                 id: 0,
                 password: "TestPass",
+                encryption: "WPA3",
             },
             {
                 SSID: "Turris",
@@ -308,6 +309,7 @@ export function wifiSettingsFixture() {
                 hwmode: "11g",
                 id: 1,
                 password: "TestPass",
+                encryption: "WPA3",
             },
         ],
     };
@@ -324,6 +326,7 @@ const oneDevice = {
             hwmode: "11a",
             id: 0,
             password: "TestPass",
+            encryption: "WPA3",
         },
     ],
 };
@@ -340,6 +343,7 @@ const twoDevices = {
             hwmode: "11a",
             id: 0,
             password: "TestPass",
+            encryption: "WPA3",
         },
         {
             SSID: "Turris2",
@@ -349,8 +353,9 @@ const twoDevices = {
             hidden: false,
             htmode: "HT40",
             hwmode: "11a",
-            id: 0,
+            id: 1,
             password: "TestPass",
+            encryption: "WPA3",
         },
     ],
 };
@@ -367,6 +372,7 @@ const threeDevices = {
             hwmode: "11a",
             id: 0,
             password: "TestPass",
+            encryption: "WPA3",
         },
         {
             SSID: "Turris2",
@@ -376,8 +382,9 @@ const threeDevices = {
             hidden: false,
             htmode: "HT40",
             hwmode: "11a",
-            id: 0,
+            id: 1,
             password: "TestPass",
+            encryption: "WPA3",
         },
         {
             SSID: "Turris3",
@@ -387,8 +394,9 @@ const threeDevices = {
             hidden: false,
             htmode: "HT40",
             hwmode: "11a",
-            id: 0,
+            id: 2,
             password: "",
+            encryption: "WPA3",
         },
     ],
 };

src/common/WiFiSettings/constants.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -13,33 +13,40 @@ export const HTMODES = {
     VHT40: _("802.11ac - 40 MHz wide channel"),
     VHT80: _("802.11ac - 80 MHz wide channel"),
     VHT160: _("802.11ac - 160 MHz wide channel"),
+    HE20: _("802.11ax - 20 MHz wide channel"),
+    HE40: _("802.11ax - 40 MHz wide channel"),
+    HE80: _("802.11ax - 80 MHz wide channel"),
+    HE160: _("802.11ax - 160 MHz wide channel"),
 };
 export const HWMODES = {
     "11g": "2.4",
     "11a": "5",
 };
+export const ENCRYPTIONMODES = {
+    WPA3: _("WPA3 only"),
+    "WPA2/3": _("WPA3 with WPA2 as fallback (default)"),
+    WPA2: _("WPA2 only"),
+};
 export const HELP_TEXTS = {
     ssid: _(
-        `SSID which contains non-standard characters could cause problems on some devices.`
+        "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."
     ),
-    password: _(`
-        WPA2 pre-shared key, that is required to connect to the network.
-    `),
     hidden: _(
         "If set, network is not visible when scanning for available networks."
     ),
-    hwmode: _(`
-        The 2.4 GHz band is more widely supported by clients, but tends to have more interference. The 5 GHz band is a
-        newer standard and may not be supported by all your devices. It usually has less interference, but the signal
-        does not carry so well indoors.`),
-    htmode: _(`
-        Change this to adjust 802.11n/ac mode of operation. 802.11n with 40 MHz wide channels can yield higher
-        throughput but can cause more interference in the network. If you don't know what to choose, use the default
-        option with 20 MHz wide channel.
-    `),
-    guest_wifi_enabled: _(`
-        Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to
-        access the internet, but aren't allowed to access other devices and the configuration interface of the router.
-        Parameters of the guest network can be set in the Guest network tab.
-        `),
+    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/__tests__/RebootButton.test.js

@@ -18,7 +18,7 @@ import mockAxios from "jest-mock-axios";
 import { mockJSONError } from "testUtils/network";
 import { mockSetAlert } from "testUtils/alertContextMock";
 
-import { RebootButton } from "../RebootButton";
+import RebootButton from "../RebootButton";
 
 describe("<RebootButton/>", () => {
     let componentContainer;

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

@@ -25,15 +25,10 @@ exports[`<RebootButton/> Render modal. 1`] = `
               Warning!
             </h5>
             <button
-              class="close"
+              aria-label="Close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
           <div
             class="modal-body"
@@ -46,16 +41,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"
             >
-              Cancel
+              <span>
+                Cancel
+              </span>
             </button>
             <button
-              class="btn btn-danger"
+              class="btn btn-danger d-inline-flex justify-content-center align-items-center"
               type="button"
             >
-              Confirm reboot
+              <span>
+                Confirm reboot
+              </span>
             </button>
           </div>
         </div>
@@ -63,10 +62,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"
   >
-    Reboot
+    <span>
+      Reboot
+    </span>
   </button>
 </div>
 `;
@@ -77,10 +78,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"
   >
-    Reboot
+    <span>
+      Reboot
+    </span>
   </button>
 </div>
 `;

src/context/alertContext/AlertContext.js

@@ -1,15 +1,16 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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, useContext, useCallback } from "react";
+import React, { useState, useContext, useCallback, useMemo } 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([
@@ -30,6 +31,10 @@ function AlertContextProvider({ children }) {
     );
 
     const dismissAlert = useCallback(() => setAlert(null), [setAlert]);
+    const contextValue = useMemo(
+        () => [setAlertWrapper, dismissAlert],
+        [setAlertWrapper, dismissAlert]
+    );
 
     return (
         <>
@@ -40,7 +45,7 @@ function AlertContextProvider({ children }) {
                     </Alert>
                 </Portal>
             )}
-            <AlertContext.Provider value={[setAlertWrapper, dismissAlert]}>
+            <AlertContext.Provider value={contextValue}>
                 {children}
             </AlertContext.Provider>
         </>

src/context/alertContext/__tests__/AlertContext.test.js

@@ -48,7 +48,7 @@ describe("AlertContext", () => {
         // Alert is present
         expect(getByText(componentContainer, "Alert content")).toBeDefined();
 
-        fireEvent.click(componentContainer.querySelector(".close"));
+        fireEvent.click(componentContainer.querySelector(".btn-close"));
         // Alert is gone
         expect(queryByText(componentContainer, "Alert content")).toBeNull();
     });

src/context/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap

@@ -6,14 +6,13 @@ exports[`AlertContext should render alert 1`] = `
     id="alert-container"
   >
     <div
-      class="alert alert-dismissible alert-danger"
+      class="alert alert-danger alert-dismissible"
     >
       <button
-        class="close"
+        aria-label="Close"
+        class="btn-close"
         type="button"
-      >
-        ×
-      </button>
+      />
       Alert content
     </div>
   </div>

src/context/customizationContext/CustomizationContext.js

@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2019-2024 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, useMemo } from "react";
+
+import PropTypes from "prop-types";
+
+import { useAPIGet } from "../../api/hooks";
+import { Spinner } from "../../bootstrap/Spinner";
+import { ForisURLs } from "../../utils/forisUrls";
+
+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]);
+
+    const deviceDetails = useMemo(
+        () => getCustomizationResponse.data || {},
+        [getCustomizationResponse.data]
+    );
+
+    const isCustomized = useMemo(
+        () =>
+            !!(
+                deviceDetails.customization !== undefined &&
+                deviceDetails.customization === "shield"
+            ),
+        [deviceDetails.customization]
+    );
+
+    const contextValue = useMemo(
+        () => ({ deviceDetails, isCustomized }),
+        [deviceDetails, isCustomized]
+    );
+
+    if (getCustomizationResponse.state !== "success") {
+        return <Spinner fullScreen />;
+    }
+
+    return (
+        <CustomizationContext.Provider value={contextValue}>
+            {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__/__snapshots__/SubmitButton.test.js.snap

@@ -3,17 +3,18 @@
 exports[`<SubmitButton/> Render load 1`] = `
 <div>
   <button
-    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
+    class="btn btn-primary col-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 me-1"
       role="status"
     />
-     
-    Load settings
+    <span>
+      Load settings
+    </span>
   </button>
 </div>
 `;
@@ -21,10 +22,12 @@ exports[`<SubmitButton/> Render load 1`] = `
 exports[`<SubmitButton/> Render ready 1`] = `
 <div>
   <button
-    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
+    class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     type="submit"
   >
-    Save
+    <span>
+      Save
+    </span>
   </button>
 </div>
 `;
@@ -32,17 +35,18 @@ exports[`<SubmitButton/> Render ready 1`] = `
 exports[`<SubmitButton/> Render saving 1`] = `
 <div>
   <button
-    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
+    class="btn btn-primary col-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 me-1"
       role="status"
     />
-     
-    Updating
+    <span>
+      Updating
+    </span>
   </button>
 </div>
 `;

src/form/__tests__/hooks.test.js

@@ -9,8 +9,8 @@ import React from "react";
 
 import { act, fireEvent, render, waitForElement } from "customTestRender";
 import mockAxios from "jest-mock-axios";
-import { WebSockets } from "webSockets/WebSockets";
-import { ForisForm } from "../components/ForisForm";
+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.

src/form/__tests__/validation.test.js

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

src/form/components/ForisForm.js

@@ -1,24 +1,24 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 } from "react";
+
 import PropTypes from "prop-types";
 import { Prompt } from "react-router-dom";
 
-import { ALERT_TYPES } from "../../bootstrap/Alert";
+import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
+import { useAPIPost } from "../../api/hooks";
 import { API_STATE } from "../../api/utils";
+import { ALERT_TYPES } from "../../bootstrap/Alert";
 import { formFieldsSize } from "../../bootstrap/constants";
 import { Spinner } from "../../bootstrap/Spinner";
-import { useAlert } from "../../alertContext/AlertContext";
-import { useAPIPost } from "../../api/hooks";
-
+import { useAlert } from "../../context/alertContext/AlertContext";
+import ErrorMessage from "../../utils/ErrorMessage";
 import { useForisModule, useForm } from "../hooks";
-import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
-import { ErrorMessage } from "../../utils/ErrorMessage";
 
 ForisForm.propTypes = {
     /** Optional WebSocket object. See `scr/common/WebSockets.js`.
@@ -89,7 +89,7 @@ ForisForm.defaultProps = {
  * use exposed `ReactRouterDOM` object from `react-router-dom` library which is exposed by reForis.
  * See README for more information.
  * */
-export function ForisForm({
+function ForisForm({
     ws,
     forisConfig,
     prepData,
@@ -131,16 +131,16 @@ export function ForisForm({
         return <Spinner />;
     }
 
-    function onSubmitHandler(event) {
+    const onSubmitHandler = (event) => {
         event.preventDefault();
         resetFormData();
         dismissAlert();
         const copiedFormData = JSON.parse(JSON.stringify(formState.data));
         const preparedData = prepDataToSubmit(copiedFormData);
         post({ data: preparedData });
-    }
+    };
 
-    function getSubmitButtonState() {
+    const getSubmitButtonState = () => {
         if (postState.state === API_STATE.SENDING) {
             return SUBMIT_BUTTON_STATES.SAVING;
         }
@@ -148,7 +148,7 @@ export function ForisForm({
             return SUBMIT_BUTTON_STATES.LOAD;
         }
         return SUBMIT_BUTTON_STATES.READY;
-    }
+    };
 
     const formIsDisabled =
         disabled ||
@@ -174,7 +174,7 @@ export function ForisForm({
           )
         : onSubmitHandler;
 
-    function getMessageOnLeavingPage() {
+    const getMessageOnLeavingPage = () => {
         if (
             JSON.stringify(formState.data) ===
             JSON.stringify(formState.initialData)
@@ -183,14 +183,14 @@ export function ForisForm({
         return _(
             "Changes you made may not be saved. Are you sure you want to leave?"
         );
-    }
+    };
 
     return (
         <div className={formFieldsSize}>
             <Prompt message={getMessageOnLeavingPage} />
             <form onSubmit={onSubmit} ref={formReference}>
                 {childrenWithFormProps}
-                <div className="text-right">
+                <div className="text-end">
                     <SubmitButton
                         state={getSubmitButtonState()}
                         disabled={submitButtonIsDisabled}
@@ -200,3 +200,5 @@ export function ForisForm({
         </div>
     );
 }
+
+export default ForisForm;

src/form/components/SubmitButton.js

@@ -6,9 +6,10 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
-import { Button } from "../../bootstrap/Button";
+import Button from "../../bootstrap/Button";
 
 export const STATES = {
     READY: 1,

src/form/hooks.js

@@ -1,15 +1,16 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 { useCallback, useEffect, useReducer } from "react";
+
 import update from "immutability-helper";
 
 import { useAPIGet } from "../api/hooks";
-import { useWSForisModule } from "../webSockets/hooks";
+import useWSForisModule from "../webSockets/hooks";
 
 const FORM_ACTIONS = {
     updateValue: 1,

src/index.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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.
@@ -17,31 +17,32 @@ export {
 export { API_STATE } from "./api/utils";
 
 // Bootstrap
-export { Alert, ALERT_TYPES } from "./bootstrap/Alert";
-export { Button } from "./bootstrap/Button";
-export { CheckBox } from "./bootstrap/CheckBox";
-export { DownloadButton } from "./bootstrap/DownloadButton";
-export { DataTimeInput } from "./bootstrap/DataTimeInput";
-export { EmailInput } from "./bootstrap/EmailInput";
-export { FileInput } from "./bootstrap/FileInput";
-export { Input } from "./bootstrap/Input";
-export { NumberInput } from "./bootstrap/NumberInput";
-export { PasswordInput } from "./bootstrap/PasswordInput";
-export { Radio, RadioSet } from "./bootstrap/RadioSet";
-export { Select } from "./bootstrap/Select";
-export { TextInput } from "./bootstrap/TextInput";
+export { default as Alert, ALERT_TYPES } from "./bootstrap/Alert";
+export { default as Button } from "./bootstrap/Button";
+export { default as CheckBox } from "./bootstrap/CheckBox";
+export { default as CopyInput } from "./bootstrap/CopyInput";
+export { default as DownloadButton } from "./bootstrap/DownloadButton";
+export { default as DataTimeInput } from "./bootstrap/DataTimeInput";
+export { default as EmailInput } from "./bootstrap/EmailInput";
+export { default as FileInput } from "./bootstrap/FileInput";
+export { default as Input } from "./bootstrap/Input";
+export { default as NumberInput } from "./bootstrap/NumberInput";
+export { default as PasswordInput } from "./bootstrap/PasswordInput";
+export { default as RadioSet, Radio } from "./bootstrap/RadioSet";
+export { default as Select } from "./bootstrap/Select";
+export { default as TextInput } from "./bootstrap/TextInput";
 export { formFieldsSize, buttonFormFieldsSize } from "./bootstrap/constants";
-export { Switch } from "./bootstrap/Switch";
+export { default as Switch } from "./bootstrap/Switch";
 
 export { Spinner, SpinnerElement } from "./bootstrap/Spinner";
 export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
 
 // Common
-export { RebootButton } from "./common/RebootButton";
-export { WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
-
+export { default as RebootButton } from "./common/RebootButton";
+export { default as WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
+export { default as ResetWiFiSettings } from "./common/WiFiSettings/ResetWiFiSettings";
 // Form
-export { ForisForm } from "./form/components/ForisForm";
+export { default as ForisForm } from "./form/components/ForisForm";
 export {
     SubmitButton,
     STATES as SUBMIT_BUTTON_STATES,
@@ -49,11 +50,11 @@ export {
 export { useForisModule, useForm } from "./form/hooks";
 
 // WebSockets
-export { useWSForisModule } from "./webSockets/hooks";
-export { WebSockets } from "./webSockets/WebSockets";
+export { default as useWSForisModule } from "./webSockets/hooks";
+export { default as WebSockets } from "./webSockets/WebSockets";
 
 // Utils
-export { Portal } from "./utils/Portal";
+export { default as Portal } from "./utils/Portal";
 export {
     undefinedIfEmpty,
     withoutUndefinedKeys,
@@ -67,9 +68,11 @@ export {
     withError,
     withErrorMessage,
 } from "./utils/conditionalHOCs";
-export { ErrorMessage } from "./utils/ErrorMessage";
+export { default as ErrorMessage } from "./utils/ErrorMessage";
 export { useClickOutside } from "./utils/hooks";
-export { toLocaleDateString } from "./utils/datetime";
+export { default as toLocaleDateString } from "./utils/datetime";
+export { default as displayCard } from "./utils/displayCard";
+export { default as isPluginInstalled } from "./utils/isPluginInstalled";
 
 // Foris URL
 export { ForisURLs, REFORIS_URL_PREFIX } from "./utils/forisUrls";
@@ -80,10 +83,20 @@ export {
     validateIPv6Address,
     validateIPv6Prefix,
     validateDomain,
+    validateHostname,
     validateDUID,
     validateMAC,
     validateMultipleEmails,
 } from "./utils/validations";
 
 // Alert context
-export { AlertContextProvider, useAlert } from "./alertContext/AlertContext";
+export {
+    AlertContextProvider,
+    useAlert,
+} from "./context/alertContext/AlertContext";
+
+// Customization context
+export {
+    CustomizationContextProvider,
+    useCustomizationContext,
+} from "./context/customizationContext/CustomizationContext";

src/testUtils/customTestRender.js

@@ -14,6 +14,7 @@ import { render } from "@testing-library/react";
 import PropTypes from "prop-types";
 
 import { AlertContextMock } from "./alertContextMock";
+import { CustomizationContextMock } from "./cutomizationContextMock";
 
 Wrapper.propTypes = {
     children: PropTypes.oneOfType([
@@ -24,11 +25,13 @@ Wrapper.propTypes = {
 
 function Wrapper({ children }) {
     return (
-        <AlertContextMock>
-            <StaticRouter>
-                <UIDReset>{children}</UIDReset>
-            </StaticRouter>
-        </AlertContextMock>
+        <CustomizationContextMock>
+            <AlertContextMock>
+                <StaticRouter>
+                    <UIDReset>{children}</UIDReset>
+                </StaticRouter>
+            </AlertContextMock>
+        </CustomizationContextMock>
     );
 }
 

src/testUtils/cutomizationContextMock.js

@@ -0,0 +1,34 @@
+/*
+ * 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";
+
+window.CustomizationContext = React.createContext();
+
+const deviceDetails = {
+    kernel: "5.x.x",
+    model: "Turris Omnia",
+    os_branch: {
+        mode: "branch",
+        value: "hbs",
+    },
+    os_version: "6.x.x",
+    reforis_version: "1.x.x",
+    serial: 123456789,
+};
+
+const isCustomized = false;
+
+function CustomizationContextMock({ children }) {
+    return (
+        <CustomizationContext.Provider value={{ deviceDetails, isCustomized }}>
+            {children}
+        </CustomizationContext.Provider>
+    );
+}
+
+export { CustomizationContextMock };

src/utils/ErrorMessage.js

@@ -1,11 +1,12 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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";
 
 ErrorMessage.propTypes = {
@@ -16,6 +17,8 @@ ErrorMessage.defaultProps = {
     message: _("An error occurred while fetching data."),
 };
 
-export function ErrorMessage({ message }) {
+function ErrorMessage({ message }) {
     return <p className="text-center text-danger">{message}</p>;
 }
+
+export default ErrorMessage;

src/utils/Portal.js

@@ -1,14 +1,22 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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 PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 
-export function Portal({ containerId, children }) {
+Portal.propTypes = {
+    containerId: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+};
+
+function Portal({ containerId, children }) {
     const container = document.getElementById(containerId);
     if (container) return ReactDOM.createPortal(children, container);
     return null;
 }
+
+export default Portal;

src/utils/__tests__/datetime.test.js

@@ -5,7 +5,7 @@
  * See /LICENSE for more information.
  */
 
-import { toLocaleDateString } from "../datetime";
+import toLocaleDateString from "../datetime";
 
 describe("toLocaleDateString", () => {
     it("should work with different locale", () => {

src/utils/conditionalHOCs.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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.
@@ -7,16 +7,23 @@
 
 import React from "react";
 
-import { Spinner } from "../bootstrap/Spinner";
+import ErrorMessage from "./ErrorMessage";
 import { API_STATE } from "../api/utils";
-import { ErrorMessage } from "./ErrorMessage";
+import { Spinner } from "../bootstrap/Spinner";
 
 function withEither(conditionalFn, Either) {
-    return (Component) => (props) => {
-        if (conditionalFn(props)) {
-            return <Either {...props} />;
+    return (Component) => {
+        function WithEither(props) {
+            if (conditionalFn(props)) {
+                return <Either {...props} />;
+            }
+            return <Component {...props} />;
         }
-        return <Component {...props} />;
+
+        // Setting displayName for better debugging
+        WithEither.displayName = `WithEither(${Component.displayName || Component.name || "Component"})`;
+
+        return WithEither;
     };
 }
 

src/utils/datetime.js

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

src/utils/displayCard.js

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

src/utils/forisUrls.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -9,8 +9,8 @@ export const REFORIS_URL_PREFIX = "/reforis";
 export const REFORIS_API_URL_PREFIX = `${REFORIS_URL_PREFIX}/api`;
 
 export const ForisURLs = {
-    login: `${REFORIS_URL_PREFIX}/login`,
-    logout: `${REFORIS_URL_PREFIX}/logout`,
+    login: `/login?${REFORIS_URL_PREFIX}/`,
+    logout: `/logout`,
 
     static: `${REFORIS_URL_PREFIX}/static/reforis`,
     wifi: `${REFORIS_URL_PREFIX}/network-settings/wifi`,
@@ -18,8 +18,13 @@ export const ForisURLs = {
     packageManagement: {
         updateSettings: `${REFORIS_URL_PREFIX}/package-management/update-settings`,
         updates: `${REFORIS_URL_PREFIX}/package-management/updates`,
+        packages: `${REFORIS_URL_PREFIX}/package-management/packages`,
     },
 
+    // Plugins
+    storage: `${REFORIS_URL_PREFIX}/storage`,
+    sentinelAgreement: `${REFORIS_URL_PREFIX}/sentinel/agreement`,
+
     // Notifications links are used with <Link/> inside Router, thus url subdir is not required.
     overview: "/overview",
     notifications: "/overview#notifications",
@@ -27,9 +32,10 @@ export const ForisURLs = {
 
     approveUpdates: "/package-management/updates",
     languages: "/package-management/languages",
-    rebootPage: "/administration/reboot",
+    maintenance: "/administration/maintenance",
     luci: "/cgi-bin/luci",
 
     // API
+    about: `${REFORIS_API_URL_PREFIX}/about`,
     reboot: `${REFORIS_API_URL_PREFIX}/reboot`,
 };

src/utils/hooks.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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.

src/utils/isPluginInstalled.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright (C) 2020-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+const isPluginInstalled = (pluginName) =>
+    ForisPlugins.some((plugin) => plugin.name === pluginName);
+
+export default isPluginInstalled;

src/utils/validations.js

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

src/webSockets/WebSockets.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2020 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2020-2022 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,27 +7,19 @@
 
 /* eslint no-console: "off" */
 
-import { ForisURLs } from "../utils/forisUrls";
-
 const PROTOCOL = window.location.protocol === "http:" ? "ws" : "wss";
 
 const URL = process.env.LIGHTTPD
-    ? `${PROTOCOL}://${window.location.host}/foris-ws`
-    : `${PROTOCOL}://${window.location.hostname}:${9081}`;
+    ? `${PROTOCOL}://${window.location.host}/${process.env.WSPATH || "foris-ws"}`
+    : `${PROTOCOL}://${window.location.hostname}:9081`;
 
 const WAITING_FOR_CONNECTION_TIMEOUT = 500;
 
-export class WebSockets {
+class WebSockets {
     constructor() {
         this.ws = new WebSocket(URL);
         this.ws.onerror = (e) => {
-            if (window.location.pathname !== ForisURLs.login) {
-                console.error(
-                    "WS: Error observed, you aren't logged probably."
-                );
-                window.location.replace(ForisURLs.login);
-            }
-            console.error(`WS: Error: ${e}`);
+            console.error("WS: Error:", e);
         };
         this.ws.onmessage = (e) => {
             console.debug(`WS: Received Message: ${e.data}`);
@@ -128,3 +120,5 @@ export class WebSockets {
         this.ws.close();
     }
 }
+
+export default WebSockets;

src/webSockets/hooks.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 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.
@@ -7,7 +7,8 @@
 
 import { useEffect, useState } from "react";
 
-export function useWSForisModule(
+/* eslint-disable default-param-last */
+function useWSForisModule(
     ws,
     module,
     action = "update_settings",
@@ -41,3 +42,5 @@ export function useWSForisModule(
 
     return [data];
 }
+
+export default useWSForisModule;