1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-11-14 17:35:35 +01:00

Merge branch 'dev' into 'master'

Bump v6.0.0

See merge request turris/reforis/foris-js!220
This commit is contained in:
Aleksandr Gumroian 2024-06-11 14:29:46 +02:00
commit 0ea5d43c75
78 changed files with 14979 additions and 15403 deletions

View File

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

View File

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

378
CHANGELOG.md Normal file
View File

@ -0,0 +1,378 @@
# 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.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.0...master
[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

View File

@ -11,6 +11,7 @@ MSGID_BUGS_ADDRESS="tech.support@turris.cz"
DEV_PYTHON=python3 DEV_PYTHON=python3
VENV_NAME?=venv VENV_NAME?=venv
JS_DIR=js
VENV_BIN=$(shell pwd)/$(VENV_NAME)/bin VENV_BIN=$(shell pwd)/$(VENV_NAME)/bin
.PHONY: all .PHONY: all

View File

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

28163
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{ {
"name": "foris", "name": "foris",
"version": "5.6.1", "version": "6.0.0",
"description": "Foris JS library is a set of components and utils for reForis application and plugins.", "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
"author": "CZ.NIC, z.s.p.o.", "author": "CZ.NIC, z.s.p.o.",
"repository": { "repository": {
@ -14,49 +14,48 @@
"license": "GPL-3.0", "license": "GPL-3.0",
"main": "./src/index.js", "main": "./src/index.js",
"dependencies": { "dependencies": {
"axios": "^0.21.1", "axios": "^1.7.2",
"immutability-helper": "3.0.1", "immutability-helper": "^3.1.1",
"moment": "^2.24.0", "moment": "^2.30.1",
"qrcode.react": "^1.0.1", "qrcode.react": "^3.1.0",
"react-datetime": "^3.1.1", "react-datetime": "^3.2.0",
"react-uid": "^2.2.0" "react-uid": "^2.3.3"
}, },
"peerDependencies": { "peerDependencies": {
"bootstrap": "^4.6.2", "bootstrap": "^5.3.3",
"prop-types": "15.8.1", "prop-types": "15.8.1",
"react": "16.9.0", "react": "16.9.0",
"react-dom": "16.9.0", "react-dom": "16.9.0",
"react-router-dom": "^5.1.2" "react-router-dom": "^5.1.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.12.10", "@babel/cli": "^7.24.7",
"@babel/core": "^7.9.0", "@babel/core": "^7.24.7",
"@babel/plugin-transform-runtime": "^7.9.0", "@babel/plugin-transform-runtime": "^7.24.7",
"@babel/preset-env": "^7.9.0", "@babel/preset-env": "^7.24.7",
"@babel/preset-react": "^7.9.4", "@babel/preset-react": "^7.24.7",
"@fortawesome/fontawesome-free": "^5.13.0", "@fortawesome/fontawesome-free": "^6.5.2",
"@testing-library/react": "^8.0.9", "@testing-library/react": "^8.0.9",
"babel-loader": "^8.1.0", "babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"bootstrap": "^4.6.2", "bootstrap": "^5.3.3",
"css-loader": "^5.2.4", "css-loader": "^5.2.4",
"eslint": "^6.8.0", "eslint": "^8.57.0",
"eslint-config-prettier": "^6.11.0", "eslint-config-reforis": "^2.1.1",
"eslint-config-reforis": "^1.0.0",
"eslint-plugin-prettier": "^3.1.4",
"file-loader": "^6.0.0", "file-loader": "^6.0.0",
"jest": "^25.2.0", "jest": "^29.7.0",
"jest-mock-axios": "^3.2.0", "jest-environment-jsdom": "^29.7.0",
"moment-timezone": "^0.5.34", "jest-mock-axios": "^4.7.3",
"prettier": "2.0.5", "moment-timezone": "^0.5.45",
"prettier": "^3.3.1",
"prop-types": "15.8.1", "prop-types": "15.8.1",
"react": "16.9.0", "react": "16.9.0",
"react-dom": "16.9.0", "react-dom": "16.9.0",
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",
"react-styleguidist": "^11.2.0", "react-styleguidist": "^12.0.1",
"snapshot-diff": "^0.7.0", "snapshot-diff": "^0.10.0",
"style-loader": "^1.2.1", "style-loader": "^1.2.1",
"webpack": "^5.68.0" "webpack": "^5.91.0"
}, },
"scripts": { "scripts": {
"lint": "eslint src", "lint": "eslint src",

1
prettier.config.js Normal file
View File

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

View File

@ -111,9 +111,8 @@ const useAPIPatch = createAPIHook("PATCH");
const useAPIPut = createAPIHook("PUT"); const useAPIPut = createAPIHook("PUT");
const useAPIDelete = createAPIHook("DELETE"); const useAPIDelete = createAPIHook("DELETE");
export { useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete }; /* eslint-disable default-param-last */
function useAPIPolling(endpoint, delay = 1000, until) {
export function useAPIPolling(endpoint, delay = 1000, until) {
// delay ms // delay ms
const [state, setState] = useState({ state: API_STATE.INIT }); const [state, setState] = useState({ state: API_STATE.INIT });
const [getResponse, get] = useAPIGet(endpoint); const [getResponse, get] = useAPIGet(endpoint);
@ -133,3 +132,12 @@ export function useAPIPolling(endpoint, delay = 1000, until) {
return [state]; return [state];
} }
export {
useAPIGet,
useAPIPost,
useAPIPatch,
useAPIPut,
useAPIDelete,
useAPIPolling,
};

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export const ALERT_TYPES = Object.freeze({ export const ALERT_TYPES = Object.freeze({
@ -35,21 +36,24 @@ Alert.defaultProps = {
type: ALERT_TYPES.DANGER, type: ALERT_TYPES.DANGER,
}; };
export function Alert({ type, onDismiss, children }) { function Alert({ type, onDismiss, children }) {
return ( return (
<div <div
className={`alert ${ className={`alert alert-${type} ${
onDismiss ? "alert-dismissible" : "" onDismiss ? "alert-dismissible" : ""
} alert-${type}`} }`.trim()}
> >
{onDismiss ? ( {onDismiss && (
<button type="button" className="close" onClick={onDismiss}> <button
&times; type="button"
</button> className="btn-close"
) : ( onClick={onDismiss}
false aria-label={_("Close")}
/>
)} )}
{children} {children}
</div> </div>
); );
} }
export default Alert;

View File

@ -1,11 +1,12 @@
/* /*
* Copyright (C) 2019-2023 CZ.NIC z.s.p.o. (https://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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
Button.propTypes = { Button.propTypes = {
@ -24,16 +25,10 @@ Button.propTypes = {
]).isRequired, ]).isRequired,
}; };
export function Button({ function Button({ className, loading, forisFormSize, children, ...props }) {
className,
loading,
forisFormSize,
children,
...props
}) {
let buttonClass = className ? `btn ${className}` : "btn btn-primary"; let buttonClass = className ? `btn ${className}` : "btn btn-primary";
if (forisFormSize) { if (forisFormSize) {
buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`; buttonClass = `${buttonClass} col-12 col-md-3 col-lg-2`;
} }
return ( return (
@ -44,7 +39,7 @@ export function Button({
> >
{loading && ( {loading && (
<span <span
className="spinner-border spinner-border-sm mr-1" className="spinner-border spinner-border-sm me-1"
role="status" role="status"
aria-hidden="true" aria-hidden="true"
/> />
@ -53,3 +48,5 @@ export function Button({
</button> </button>
); );
} }
export default Button;

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useUID } from "react-uid"; import { useUID } from "react-uid";
@ -22,27 +23,28 @@ CheckBox.defaultProps = {
disabled: false, disabled: false,
}; };
export function CheckBox({ label, helpText, disabled, ...props }) { function CheckBox({ label, helpText, disabled, ...props }) {
const uid = useUID(); const uid = useUID();
return ( return (
<div className="form-group"> <div className="mb-3 form-check">
<div className="custom-control custom-checkbox ">
<input <input
className="custom-control-input" className="form-check-input"
type="checkbox" type="checkbox"
id={uid} id={uid}
disabled={disabled} disabled={disabled}
{...props} {...props}
/> />
<label className="custom-control-label" htmlFor={uid}> <label className="form-check-label" htmlFor={uid}>
{label} {label}
{helpText && (
<small className="form-text text-muted">
{helpText}
</small>
)}
</label> </label>
{helpText && (
<div className="form-text">
<small>{helpText}</small>
</div> </div>
)}
</div> </div>
); );
} }
export default CheckBox;

View File

@ -1,13 +1,15 @@
/* /*
* Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React, { useState, useRef } from "react"; import React, { useState, useRef } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Input } from "./Input";
import Input from "./Input";
CopyInput.propTypes = { CopyInput.propTypes = {
/** Field label. */ /** Field label. */
@ -22,7 +24,7 @@ CopyInput.propTypes = {
readOnly: PropTypes.bool, readOnly: PropTypes.bool,
}; };
export function CopyInput({ value, ...props }) { function CopyInput({ value, ...props }) {
const inputTextRef = useRef(); const inputTextRef = useRef();
const [isCopied, setIsCopied] = useState(false); const [isCopied, setIsCopied] = useState(false);
@ -58,3 +60,5 @@ export function CopyInput({ value, ...props }) {
</Input> </Input>
); );
} }
export default CopyInput;

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import moment from "moment/moment";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Datetime from "react-datetime"; import Datetime from "react-datetime";
import moment from "moment/moment";
import "react-datetime/css/react-datetime.css"; import "react-datetime/css/react-datetime.css";
import "./DataTimeInput.css"; import "./DataTimeInput.css";
import { Input } from "./Input"; import Input from "./Input";
DataTimeInput.propTypes = { DataTimeInput.propTypes = {
/** Field label. */ /** Field label. */
@ -37,7 +38,7 @@ DataTimeInput.propTypes = {
const DEFAULT_DATE_FORMAT = "YYYY-MM-DD"; const DEFAULT_DATE_FORMAT = "YYYY-MM-DD";
const DEFAULT_TIME_FORMAT = "HH:mm:ss"; const DEFAULT_TIME_FORMAT = "HH:mm:ss";
export function DataTimeInput({ function DataTimeInput({
value, value,
onChange, onChange,
isValidDate, isValidDate,
@ -46,13 +47,13 @@ export function DataTimeInput({
children, children,
...props ...props
}) { }) {
function renderInput(datetimeProps) { const renderInput = (datetimeProps) => {
return ( return (
<Input {...props} {...datetimeProps}> <Input {...props} {...datetimeProps}>
{children} {children}
</Input> </Input>
); );
} };
return ( return (
<Datetime <Datetime
@ -70,3 +71,5 @@ export function DataTimeInput({
/> />
); );
} }
export default DataTimeInput;

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
DownloadButton.propTypes = { DownloadButton.propTypes = {
@ -21,7 +22,7 @@ DownloadButton.defaultProps = {
className: "btn-primary", className: "btn-primary",
}; };
export function DownloadButton({ href, className, children, ...props }) { function DownloadButton({ href, className, children, ...props }) {
return ( return (
<a <a
href={href} href={href}
@ -33,3 +34,5 @@ export function DownloadButton({ href, className, children, ...props }) {
</a> </a>
); );
} }
export default DownloadButton;

View File

@ -6,11 +6,14 @@
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; 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 = { EmailInput.propTypes = {
/** Field label. */ /** Field label. */
@ -22,3 +25,5 @@ EmailInput.propTypes = {
/** Email value. */ /** Email value. */
value: PropTypes.string, value: PropTypes.string,
}; };
export default EmailInput;

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
@ -8,7 +8,8 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Input } from "./Input";
import Input from "./Input";
FileInput.propTypes = { FileInput.propTypes = {
/** Field label. */ /** Field label. */
@ -23,7 +24,7 @@ FileInput.propTypes = {
multiple: PropTypes.bool, multiple: PropTypes.bool,
}; };
export function FileInput({ ...props }) { function FileInput({ ...props }) {
return ( return (
<Input <Input
type="file" type="file"
@ -34,3 +35,5 @@ export function FileInput({ ...props }) {
/> />
); );
} }
export default FileInput;

View File

@ -6,11 +6,12 @@
*/ */
import React, { forwardRef } from "react"; import React, { forwardRef } from "react";
import { useUID } from "react-uid";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useUID } from "react-uid";
/** Base bootstrap input component. */ /** Base bootstrap input component. */
export const Input = forwardRef( const Input = forwardRef(
( (
{ {
type, type,
@ -27,18 +28,21 @@ export const Input = forwardRef(
) => { ) => {
const uid = useUID(); const uid = useUID();
const inputClassName = `form-control ${className || ""} ${ const inputClassName = `${className || ""} ${
error ? "is-invalid" : "" error ? "is-invalid" : ""
}`.trim(); }`.trim();
return ( return (
<div className="form-group"> <div className="mb-3">
<label className={labelClassName} htmlFor={uid}> <label
className={`form-label ${labelClassName || ""}`.trim()}
htmlFor={uid}
>
{label} {label}
</label> </label>
<div className={`input-group ${groupClassName || ""}`.trim()}> <div className={`input-group ${groupClassName || ""}`.trim()}>
<input <input
className={inputClassName} className={`form-control ${inputClassName}`.trim()}
type={type} type={type}
id={uid} id={uid}
ref={ref} ref={ref}
@ -46,15 +50,19 @@ export const Input = forwardRef(
/> />
{children} {children}
</div> </div>
{error ? <div className="invalid-feedback">{error}</div> : null} {error && <div className="invalid-feedback">{error}</div>}
{helpText ? ( {helpText && (
<small className="form-text text-muted">{helpText}</small> <div className="form-text">
) : null} <small>{helpText}</small>
</div>
)}
</div> </div>
); );
} }
); );
Input.displayName = "Input";
Input.propTypes = { Input.propTypes = {
type: PropTypes.string.isRequired, type: PropTypes.string.isRequired,
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
@ -68,3 +76,5 @@ Input.propTypes = {
labelClassName: PropTypes.string, labelClassName: PropTypes.string,
groupClassName: PropTypes.string, groupClassName: PropTypes.string,
}; };
export default Input;

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React, { useRef, useEffect } from "react"; import React, { useRef, useEffect } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Portal } from "../utils/Portal";
import { useClickOutside } from "../utils/hooks"; import { useClickOutside } from "../utils/hooks";
import Portal from "../utils/Portal";
import "./Modal.css"; import "./Modal.css";
Modal.propTypes = { Modal.propTypes = {
@ -92,11 +93,10 @@ export function ModalHeader({ setShown, title }) {
<h5 className="modal-title">{title}</h5> <h5 className="modal-title">{title}</h5>
<button <button
type="button" type="button"
className="close" className="btn-close"
onClick={() => setShown(false)} onClick={() => setShown(false)}
> aria-label={_("Close")}
<span aria-hidden="true">&times;</span> />
</button>
</div> </div>
); );
} }

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Input from "./Input";
import { useConditionalTimeout } from "../utils/hooks"; import { useConditionalTimeout } from "../utils/hooks";
import { Input } from "./Input";
import "./NumberInput.css"; import "./NumberInput.css";
NumberInput.propTypes = { NumberInput.propTypes = {
@ -23,7 +24,7 @@ NumberInput.propTypes = {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Function called when value changes. */ /** Function called when value changes. */
onChange: PropTypes.func.isRequired, 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, inlineText: PropTypes.string,
}; };
@ -31,7 +32,7 @@ NumberInput.defaultProps = {
value: 0, value: 0,
}; };
export function NumberInput({ onChange, inlineText, value, ...props }) { function NumberInput({ onChange, inlineText, value, ...props }) {
function updateValue(initialValue, difference) { function updateValue(initialValue, difference) {
onChange({ target: { value: initialValue + difference } }); onChange({ target: { value: initialValue + difference } });
} }
@ -49,8 +50,9 @@ export function NumberInput({ onChange, inlineText, value, ...props }) {
return ( return (
<Input type="number" onChange={onChange} value={value} {...props}> <Input type="number" onChange={onChange} value={value} {...props}>
<div className="input-group-append"> {inlineText && (
{inlineText && <p className="input-group-text">{inlineText}</p>} <span className="input-group-text">{inlineText}</span>
)}
<button <button
type="button" type="button"
className="btn btn-outline-secondary" className="btn btn-outline-secondary"
@ -69,7 +71,8 @@ export function NumberInput({ onChange, inlineText, value, ...props }) {
> >
<i className="fas fa-minus" /> <i className="fas fa-minus" />
</button> </button>
</div>
</Input> </Input>
); );
} }
export default NumberInput;

View File

@ -1,14 +1,15 @@
/* /*
* Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React, { useState } from "react"; import React, { useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Input } from "./Input"; import Input from "./Input";
PasswordInput.propTypes = { PasswordInput.propTypes = {
/** Field label. */ /** Field label. */
@ -25,7 +26,7 @@ PasswordInput.propTypes = {
newPass: PropTypes.bool, newPass: PropTypes.bool,
}; };
export function PasswordInput({ withEye, newPass, ...props }) { function PasswordInput({ withEye, newPass, ...props }) {
const [isHidden, setHidden] = useState(true); const [isHidden, setHidden] = useState(true);
return ( return (
@ -34,8 +35,7 @@ export function PasswordInput({ withEye, newPass, ...props }) {
autoComplete={newPass ? "new-password" : "current-password"} autoComplete={newPass ? "new-password" : "current-password"}
{...props} {...props}
> >
{withEye ? ( {withEye && (
<div className="input-group-append">
<button <button
type="button" type="button"
className="input-group-text" className="input-group-text"
@ -45,13 +45,12 @@ export function PasswordInput({ withEye, newPass, ...props }) {
}} }}
> >
<i <i
className={`fa ${ className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`}
isHidden ? "fa-eye" : "fa-eye-slash"
}`}
/> />
</button> </button>
</div> )}
) : null}
</Input> </Input>
); );
} }
export default PasswordInput;

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useUID } from "react-uid"; import { useUID } from "react-uid";
@ -17,7 +18,7 @@ RadioSet.propTypes = {
/** Choices . */ /** Choices . */
choices: PropTypes.arrayOf( choices: PropTypes.arrayOf(
PropTypes.shape({ PropTypes.shape({
/** Choice lable . */ /** Choice label . */
label: PropTypes.oneOfType([ label: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
PropTypes.element, PropTypes.element,
@ -36,15 +37,7 @@ RadioSet.propTypes = {
inline: PropTypes.bool, inline: PropTypes.bool,
}; };
export function RadioSet({ function RadioSet({ name, label, choices, value, helpText, inline, ...props }) {
name,
label,
choices,
value,
helpText,
inline,
...props
}) {
const uid = useUID(); const uid = useUID();
const radios = choices.map((choice, key) => { const radios = choices.map((choice, key) => {
const id = `${name}-${key}`; const id = `${name}-${key}`;
@ -64,7 +57,7 @@ export function RadioSet({
}); });
return ( return (
<div className="form-group"> <div className="mb-3">
{label && ( {label && (
<label htmlFor={uid} className="d-block"> <label htmlFor={uid} className="d-block">
{label} {label}
@ -72,7 +65,9 @@ export function RadioSet({
)} )}
{radios} {radios}
{helpText && ( {helpText && (
<small className="form-text text-muted">{helpText}</small> <div className="form-text">
<small>{helpText}</small>
</div>
)} )}
</div> </div>
); );
@ -92,27 +87,25 @@ Radio.propTypes = {
export function Radio({ label, id, helpText, inline, ...props }) { export function Radio({ label, id, helpText, inline, ...props }) {
return ( return (
<>
<div <div
className={`custom-control custom-radio ${ className={`mb-2 ${inline ? "form-check form-check-inline" : ""}`.trim()}
inline ? "custom-control-inline" : ""
}`.trim()}
> >
<input <input
id={id} id={id}
className="custom-control-input" className="form-check-input me-2"
type="radio" type="radio"
{...props} {...props}
/> />
<label className="custom-control-label" htmlFor={id}> <label className="form-check-label" htmlFor={id}>
{label} {label}
</label>
{helpText && ( {helpText && (
<small className="form-text text-muted mt-0 mb-3"> <div className="form-text">
{helpText} <small>{helpText}</small>
</small> </div>
)} )}
</label>
</div> </div>
</>
); );
} }
export default RadioSet;

View File

@ -1,11 +1,12 @@
/* /*
* Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useUID } from "react-uid"; import { useUID } from "react-uid";
@ -20,7 +21,7 @@ Select.propTypes = {
helpText: PropTypes.string, helpText: PropTypes.string,
}; };
export function Select({ label, choices, helpText, ...props }) { function Select({ label, choices, helpText, ...props }) {
const uid = useUID(); const uid = useUID();
const options = Object.keys(choices).map((choice) => ( const options = Object.keys(choices).map((choice) => (
@ -30,14 +31,20 @@ export function Select({ label, choices, helpText, ...props }) {
)); ));
return ( return (
<div className="form-group"> <div className="mb-3">
<label htmlFor={uid}>{label}</label> <label className="form-label" htmlFor={uid}>
<select className="custom-select" id={uid} {...props}> {label}
</label>
<select className="form-select" id={uid} {...props}>
{options} {options}
</select> </select>
{helpText ? ( {helpText && (
<small className="form-text text-muted">{helpText}</small> <div className="form-text">
) : null} <small>{helpText}</small>
</div>
)}
</div> </div>
); );
} }
export default Select;

View File

@ -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 { .spinner-wrapper .spinner-border {
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;
@ -7,10 +15,8 @@
.spinner-fs-background { .spinner-fs-background {
background-color: rgba(2, 2, 2, 0.5); background-color: rgba(2, 2, 2, 0.5);
color: rgb(230, 230, 230); color: rgb(230, 230, 230);
position: fixed; width: 100vw;
width: 100%; height: 100vh;
height: 100%;
top: 0;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -6,6 +6,7 @@
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import "./Spinner.css"; import "./Spinner.css";
@ -16,7 +17,7 @@ Spinner.propTypes = {
PropTypes.arrayOf(PropTypes.node), PropTypes.arrayOf(PropTypes.node),
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, fullScreen: PropTypes.bool.isRequired,
className: PropTypes.string, className: PropTypes.string,
}; };

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useUID } from "react-uid"; import { useUID } from "react-uid";
@ -20,30 +21,32 @@ Switch.propTypes = {
switchHeading: PropTypes.bool, switchHeading: PropTypes.bool,
}; };
export function Switch({ label, helpText, switchHeading, ...props }) { function Switch({ label, helpText, switchHeading, ...props }) {
const uid = useUID(); const uid = useUID();
return ( return (
<div className={`form-group ${switchHeading ? "switch" : ""}`.trim()}>
<div <div
className={`custom-control custom-switch ${ className={`form-check form-switch mb-3 ${
!helpText ? "custom-control-inline" : "" switchHeading ? "d-flex align-items-center" : null
} ${switchHeading ? "switch-heading" : ""}`.trim()} }`.trim()}
> >
<input <input
type="checkbox" type="checkbox"
className="custom-control-input" className={`form-check-input ${switchHeading ? "me-2" : ""}`.trim()}
role="switch"
id={uid} id={uid}
{...props} {...props}
/> />
<label className="custom-control-label" htmlFor={uid}> <label className="form-check-label" htmlFor={uid}>
{label} {label}
</label> </label>
{helpText && ( {helpText && (
<small className="form-text text-muted mt-0 mb-3"> <div className="form-text">
{helpText} <small>{helpText}</small>
</small>
)}
</div> </div>
)}
</div> </div>
); );
} }
export default Switch;

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; 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 = { TextInput.propTypes = {
/** Field label. */ /** Field label. */
@ -20,3 +23,5 @@ TextInput.propTypes = {
/** Help text message. */ /** Help text message. */
helpText: PropTypes.string, helpText: PropTypes.string,
}; };
export default TextInput;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -29,7 +29,7 @@ exports[`<Button /> Render button with spinner 1`] = `
> >
<span <span
aria-hidden="true" aria-hidden="true"
class="spinner-border spinner-border-sm mr-1" class="spinner-border spinner-border-sm me-1"
role="status" role="status"
/> />
<span> <span>

View File

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

View File

@ -2,9 +2,10 @@
exports[`<NumberInput/> Render number input 1`] = ` exports[`<NumberInput/> Render number input 1`] = `
<div <div
class="form-group" class="mb-3"
> >
<label <label
class="form-label"
for="1" for="1"
> >
Test label Test label
@ -18,9 +19,6 @@ exports[`<NumberInput/> Render number input 1`] = `
type="number" type="number"
value="1" value="1"
/> />
<div
class="input-group-append"
>
<button <button
aria-label="Increase" aria-label="Increase"
class="btn btn-outline-secondary" class="btn btn-outline-secondary"
@ -40,11 +38,12 @@ exports[`<NumberInput/> Render number input 1`] = `
/> />
</button> </button>
</div> </div>
</div> <div
<small class="form-text"
class="form-text text-muted"
> >
<small>
Some help text Some help text
</small> </small>
</div> </div>
</div>
`; `;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,11 +1,12 @@
/* /*
* Copyright (C) 2019-2021 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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
/** Bootstrap column size for form fields */ /** Bootstrap column size for form fields */
// eslint-disable-next-line import/prefer-default-export const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-4";
export 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 const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";
export { formFieldsSize, buttonFormFieldsSize };

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useAPIPost } from "../api/hooks"; import { useAPIPost } from "../api/hooks";
import { API_STATE } from "../api/utils"; import { API_STATE } from "../api/utils";
import { ForisURLs } from "../utils/forisUrls"; import Button from "../bootstrap/Button";
import { Button } from "../bootstrap/Button";
import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal"; import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
import { useAlert } from "../context/alertContext/AlertContext"; import { useAlert } from "../context/alertContext/AlertContext";
import { ForisURLs } from "../utils/forisUrls";
export function RebootButton(props) { function RebootButton(props) {
const [triggered, setTriggered] = useState(false); const [triggered, setTriggered] = useState(false);
const [modalShown, setModalShown] = useState(false); const [modalShown, setModalShown] = useState(false);
const [triggerRebootStatus, triggerReboot] = useAPIPost(ForisURLs.reboot); const [triggerRebootStatus, triggerReboot] = useAPIPost(ForisURLs.reboot);
@ -28,11 +28,11 @@ export function RebootButton(props) {
} }
}); });
function rebootHandler() { const rebootHandler = () => {
setTriggered(true); setTriggered(true);
triggerReboot(); triggerReboot();
setModalShown(false); setModalShown(false);
} };
return ( return (
<> <>
@ -76,3 +76,5 @@ function RebootModal({ shown, setShown, onReboot }) {
</Modal> </Modal>
); );
} }
export default RebootButton;

View File

@ -1,26 +1,27 @@
/* /*
* Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Button } from "../../bootstrap/Button";
import { useAlert } from "../../context/alertContext/AlertContext";
import { ALERT_TYPES } from "../../bootstrap/Alert";
import { useAPIPost } from "../../api/hooks"; import { useAPIPost } from "../../api/hooks";
import { API_STATE } from "../../api/utils"; import { API_STATE } from "../../api/utils";
import { ALERT_TYPES } from "../../bootstrap/Alert";
import Button from "../../bootstrap/Button";
import { formFieldsSize } from "../../bootstrap/constants"; import { formFieldsSize } from "../../bootstrap/constants";
import { useAlert } from "../../context/alertContext/AlertContext";
ResetWiFiSettings.propTypes = { ResetWiFiSettings.propTypes = {
ws: PropTypes.object.isRequired, ws: PropTypes.object.isRequired,
endpoint: PropTypes.string.isRequired, endpoint: PropTypes.string.isRequired,
}; };
export function ResetWiFiSettings({ ws, endpoint }) { function ResetWiFiSettings({ ws, endpoint }) {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
useEffect(() => { useEffect(() => {
@ -44,11 +45,11 @@ export function ResetWiFiSettings({ ws, endpoint }) {
} }
}, [postResetResponse, setAlert]); }, [postResetResponse, setAlert]);
function onReset() { const onReset = () => {
dismissAlert(); dismissAlert();
setIsLoading(true); setIsLoading(true);
postReset(); postReset();
} };
return ( return (
<div className={formFieldsSize}> <div className={formFieldsSize}>
@ -58,7 +59,7 @@ export function ResetWiFiSettings({ ws, endpoint }) {
"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> </p>
<div className="text-right"> <div className="text-end">
<Button <Button
className="btn-primary" className="btn-primary"
forisFormSize forisFormSize
@ -72,3 +73,5 @@ export function ResetWiFiSettings({ ws, endpoint }) {
</div> </div>
); );
} }
export default ResetWiFiSettings;

View File

@ -6,15 +6,17 @@
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Switch } from "../../bootstrap/Switch";
import { PasswordInput } from "../../bootstrap/PasswordInput";
import { RadioSet } from "../../bootstrap/RadioSet";
import { Select } from "../../bootstrap/Select";
import { TextInput } from "../../bootstrap/TextInput";
import WiFiQRCode from "./WiFiQRCode";
import WifiGuestForm from "./WiFiGuestForm";
import { HELP_TEXTS, HTMODES, HWMODES, ENCRYPTIONMODES } from "./constants"; import { HELP_TEXTS, HTMODES, HWMODES, ENCRYPTIONMODES } from "./constants";
import WifiGuestForm from "./WiFiGuestForm";
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 = { WiFiForm.propTypes = {
formData: PropTypes.shape({ devices: PropTypes.arrayOf(PropTypes.object) }) formData: PropTypes.shape({ devices: PropTypes.arrayOf(PropTypes.object) })
@ -92,7 +94,7 @@ function DeviceForm({
return ( return (
<> <>
<Switch <Switch
label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>} label={<h2 className="mb-0">{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
checked={formData.enabled} checked={formData.enabled}
onChange={setFormValue((value) => ({ onChange={setFormValue((value) => ({
devices: { devices: {
@ -119,12 +121,10 @@ function DeviceForm({
}))} }))}
{...props} {...props}
> >
<div className="input-group-append">
<WiFiQRCode <WiFiQRCode
SSID={formData.SSID} SSID={formData.SSID}
password={formData.password} password={formData.password}
/> />
</div>
</TextInput> </TextInput>
<PasswordInput <PasswordInput

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; 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 { 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 = { WifiGuestForm.propTypes = {
formData: PropTypes.shape({ formData: PropTypes.shape({

View File

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

View File

@ -1,16 +1,17 @@
/* /*
* Copyright (C) 2019-2021 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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { ForisForm } from "../../form/components/ForisForm"; import ResetWiFiSettings from "./ResetWiFiSettings";
import WiFiForm from "./WiFiForm"; import WiFiForm from "./WiFiForm";
import { ResetWiFiSettings } from "./ResetWiFiSettings"; import ForisForm from "../../form/components/ForisForm";
WiFiSettings.propTypes = { WiFiSettings.propTypes = {
ws: PropTypes.object.isRequired, ws: PropTypes.object.isRequired,
@ -19,7 +20,7 @@ WiFiSettings.propTypes = {
hasGuestNetwork: PropTypes.bool, hasGuestNetwork: PropTypes.bool,
}; };
export function WiFiSettings({ ws, endpoint, resetEndpoint, hasGuestNetwork }) { function WiFiSettings({ ws, endpoint, resetEndpoint, hasGuestNetwork }) {
return ( return (
<> <>
<ForisForm <ForisForm
@ -117,3 +118,5 @@ export function validator(formData) {
}); });
return JSON.stringify(formErrors).match(/\[[{},?]+\]/) ? null : formErrors; return JSON.stringify(formErrors).match(/\[[{},?]+\]/) ? null : formErrors;
} }
export default WiFiSettings;

View File

@ -9,12 +9,12 @@ import React from "react";
import { render, fireEvent, wait } from "customTestRender"; import { render, fireEvent, wait } from "customTestRender";
import mockAxios from "jest-mock-axios"; import mockAxios from "jest-mock-axios";
import { WebSockets } from "webSockets/WebSockets"; import WebSockets from "webSockets/WebSockets";
import { mockJSONError } from "testUtils/network"; import { mockJSONError } from "testUtils/network";
import { mockSetAlert } from "testUtils/alertContextMock"; import { mockSetAlert } from "testUtils/alertContextMock";
import { ALERT_TYPES } from "../../../bootstrap/Alert"; import { ALERT_TYPES } from "../../../bootstrap/Alert";
import { ResetWiFiSettings } from "../ResetWiFiSettings"; import ResetWiFiSettings from "../ResetWiFiSettings";
describe("<ResetWiFiSettings/>", () => { describe("<ResetWiFiSettings/>", () => {
const webSockets = new WebSockets(); const webSockets = new WebSockets();

View File

@ -10,7 +10,7 @@ import diffSnapshot from "snapshot-diff";
import mockAxios from "jest-mock-axios"; import mockAxios from "jest-mock-axios";
import { fireEvent, render, wait } from "customTestRender"; import { fireEvent, render, wait } from "customTestRender";
import { WebSockets } from "webSockets/WebSockets"; import WebSockets from "webSockets/WebSockets";
import { mockJSONError } from "testUtils/network"; import { mockJSONError } from "testUtils/network";
import { import {
@ -19,7 +19,7 @@ import {
twoDevices, twoDevices,
threeDevices, threeDevices,
} from "./__fixtures__/wifiSettings"; } from "./__fixtures__/wifiSettings";
import { WiFiSettings, validator, byteCount } from "../WiFiSettings"; import WiFiSettings, { validator, byteCount } from "../WiFiSettings";
describe("<WiFiSettings/>", () => { describe("<WiFiSettings/>", () => {
let firstRender; let firstRender;

View File

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

View File

@ -25,15 +25,10 @@ exports[`<RebootButton/> Render modal. 1`] = `
Warning! Warning!
</h5> </h5>
<button <button
class="close" aria-label="Close"
class="btn-close"
type="button" type="button"
> />
<span
aria-hidden="true"
>
×
</span>
</button>
</div> </div>
<div <div
class="modal-body" class="modal-body"

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * 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 PropTypes from "prop-types";
import { Alert, ALERT_TYPES } from "../../bootstrap/Alert"; import Alert, { ALERT_TYPES } from "../../bootstrap/Alert";
import { Portal } from "../../utils/Portal"; import Portal from "../../utils/Portal";
AlertContextProvider.propTypes = { AlertContextProvider.propTypes = {
children: PropTypes.oneOfType([ children: PropTypes.oneOfType([
@ -30,6 +31,10 @@ function AlertContextProvider({ children }) {
); );
const dismissAlert = useCallback(() => setAlert(null), [setAlert]); const dismissAlert = useCallback(() => setAlert(null), [setAlert]);
const contextValue = useMemo(
() => [setAlertWrapper, dismissAlert],
[setAlertWrapper, dismissAlert]
);
return ( return (
<> <>
@ -40,7 +45,7 @@ function AlertContextProvider({ children }) {
</Alert> </Alert>
</Portal> </Portal>
)} )}
<AlertContext.Provider value={[setAlertWrapper, dismissAlert]}> <AlertContext.Provider value={contextValue}>
{children} {children}
</AlertContext.Provider> </AlertContext.Provider>
</> </>

View File

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

View File

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

View File

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

View File

@ -3,13 +3,13 @@
exports[`<SubmitButton/> Render load 1`] = ` exports[`<SubmitButton/> Render load 1`] = `
<div> <div>
<button <button
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center" class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
disabled="" disabled=""
type="submit" type="submit"
> >
<span <span
aria-hidden="true" aria-hidden="true"
class="spinner-border spinner-border-sm mr-1" class="spinner-border spinner-border-sm me-1"
role="status" role="status"
/> />
<span> <span>
@ -22,7 +22,7 @@ exports[`<SubmitButton/> Render load 1`] = `
exports[`<SubmitButton/> Render ready 1`] = ` exports[`<SubmitButton/> Render ready 1`] = `
<div> <div>
<button <button
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center" class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
type="submit" type="submit"
> >
<span> <span>
@ -35,13 +35,13 @@ exports[`<SubmitButton/> Render ready 1`] = `
exports[`<SubmitButton/> Render saving 1`] = ` exports[`<SubmitButton/> Render saving 1`] = `
<div> <div>
<button <button
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center" class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
disabled="" disabled=""
type="submit" type="submit"
> >
<span <span
aria-hidden="true" aria-hidden="true"
class="spinner-border spinner-border-sm mr-1" class="spinner-border spinner-border-sm me-1"
role="status" role="status"
/> />
<span> <span>

View File

@ -9,8 +9,8 @@ import React from "react";
import { act, fireEvent, render, waitForElement } from "customTestRender"; import { act, fireEvent, render, waitForElement } from "customTestRender";
import mockAxios from "jest-mock-axios"; import mockAxios from "jest-mock-axios";
import { WebSockets } from "webSockets/WebSockets"; import WebSockets from "webSockets/WebSockets";
import { ForisForm } from "../components/ForisForm"; import ForisForm from "../components/ForisForm";
// It's possible to unittest each hooks via react-hooks-testing-library. // 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. // But it's better and easier to test it by test components which uses this hooks.

View File

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

View File

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

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import { useCallback, useEffect, useReducer } from "react"; import { useCallback, useEffect, useReducer } from "react";
import update from "immutability-helper"; import update from "immutability-helper";
import { useAPIGet } from "../api/hooks"; import { useAPIGet } from "../api/hooks";
import { useWSForisModule } from "../webSockets/hooks"; import useWSForisModule from "../webSockets/hooks";
const FORM_ACTIONS = { const FORM_ACTIONS = {
updateValue: 1, updateValue: 1,

View File

@ -1,5 +1,5 @@
/* /*
* Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
@ -17,32 +17,32 @@ export {
export { API_STATE } from "./api/utils"; export { API_STATE } from "./api/utils";
// Bootstrap // Bootstrap
export { Alert, ALERT_TYPES } from "./bootstrap/Alert"; export { default as Alert, ALERT_TYPES } from "./bootstrap/Alert";
export { Button } from "./bootstrap/Button"; export { default as Button } from "./bootstrap/Button";
export { CheckBox } from "./bootstrap/CheckBox"; export { default as CheckBox } from "./bootstrap/CheckBox";
export { CopyInput } from "./bootstrap/CopyInput"; export { default as CopyInput } from "./bootstrap/CopyInput";
export { DownloadButton } from "./bootstrap/DownloadButton"; export { default as DownloadButton } from "./bootstrap/DownloadButton";
export { DataTimeInput } from "./bootstrap/DataTimeInput"; export { default as DataTimeInput } from "./bootstrap/DataTimeInput";
export { EmailInput } from "./bootstrap/EmailInput"; export { default as EmailInput } from "./bootstrap/EmailInput";
export { FileInput } from "./bootstrap/FileInput"; export { default as FileInput } from "./bootstrap/FileInput";
export { Input } from "./bootstrap/Input"; export { default as Input } from "./bootstrap/Input";
export { NumberInput } from "./bootstrap/NumberInput"; export { default as NumberInput } from "./bootstrap/NumberInput";
export { PasswordInput } from "./bootstrap/PasswordInput"; export { default as PasswordInput } from "./bootstrap/PasswordInput";
export { Radio, RadioSet } from "./bootstrap/RadioSet"; export { default as RadioSet, Radio } from "./bootstrap/RadioSet";
export { Select } from "./bootstrap/Select"; export { default as Select } from "./bootstrap/Select";
export { TextInput } from "./bootstrap/TextInput"; export { default as TextInput } from "./bootstrap/TextInput";
export { formFieldsSize, buttonFormFieldsSize } from "./bootstrap/constants"; 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 { Spinner, SpinnerElement } from "./bootstrap/Spinner";
export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal"; export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
// Common // Common
export { RebootButton } from "./common/RebootButton"; export { default as RebootButton } from "./common/RebootButton";
export { WiFiSettings } from "./common/WiFiSettings/WiFiSettings"; export { default as WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
export { ResetWiFiSettings } from "./common/WiFiSettings/ResetWiFiSettings"; export { default as ResetWiFiSettings } from "./common/WiFiSettings/ResetWiFiSettings";
// Form // Form
export { ForisForm } from "./form/components/ForisForm"; export { default as ForisForm } from "./form/components/ForisForm";
export { export {
SubmitButton, SubmitButton,
STATES as SUBMIT_BUTTON_STATES, STATES as SUBMIT_BUTTON_STATES,
@ -50,11 +50,11 @@ export {
export { useForisModule, useForm } from "./form/hooks"; export { useForisModule, useForm } from "./form/hooks";
// WebSockets // WebSockets
export { useWSForisModule } from "./webSockets/hooks"; export { default as useWSForisModule } from "./webSockets/hooks";
export { WebSockets } from "./webSockets/WebSockets"; export { default as WebSockets } from "./webSockets/WebSockets";
// Utils // Utils
export { Portal } from "./utils/Portal"; export { default as Portal } from "./utils/Portal";
export { export {
undefinedIfEmpty, undefinedIfEmpty,
withoutUndefinedKeys, withoutUndefinedKeys,
@ -68,11 +68,11 @@ export {
withError, withError,
withErrorMessage, withErrorMessage,
} from "./utils/conditionalHOCs"; } from "./utils/conditionalHOCs";
export { ErrorMessage } from "./utils/ErrorMessage"; export { default as ErrorMessage } from "./utils/ErrorMessage";
export { useClickOutside } from "./utils/hooks"; export { useClickOutside } from "./utils/hooks";
export { toLocaleDateString } from "./utils/datetime"; export { default as toLocaleDateString } from "./utils/datetime";
export { displayCard } from "./utils/displayCard"; export { default as displayCard } from "./utils/displayCard";
export { isPluginInstalled } from "./utils/isPluginInstalled"; export { default as isPluginInstalled } from "./utils/isPluginInstalled";
// Foris URL // Foris URL
export { ForisURLs, REFORIS_URL_PREFIX } from "./utils/forisUrls"; export { ForisURLs, REFORIS_URL_PREFIX } from "./utils/forisUrls";

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
ErrorMessage.propTypes = { ErrorMessage.propTypes = {
@ -16,6 +17,8 @@ ErrorMessage.defaultProps = {
message: _("An error occurred while fetching data."), message: _("An error occurred while fetching data."),
}; };
export function ErrorMessage({ message }) { function ErrorMessage({ message }) {
return <p className="text-center text-danger">{message}</p>; return <p className="text-center text-danger">{message}</p>;
} }
export default ErrorMessage;

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import PropTypes from "prop-types";
import ReactDOM from "react-dom"; 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); const container = document.getElementById(containerId);
if (container) return ReactDOM.createPortal(children, container); if (container) return ReactDOM.createPortal(children, container);
return null; return null;
} }
export default Portal;

View File

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

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
@ -7,16 +7,23 @@
import React from "react"; import React from "react";
import { Spinner } from "../bootstrap/Spinner"; import ErrorMessage from "./ErrorMessage";
import { API_STATE } from "../api/utils"; import { API_STATE } from "../api/utils";
import { ErrorMessage } from "./ErrorMessage"; import { Spinner } from "../bootstrap/Spinner";
function withEither(conditionalFn, Either) { function withEither(conditionalFn, Either) {
return (Component) => (props) => { return (Component) => {
function WithEither(props) {
if (conditionalFn(props)) { if (conditionalFn(props)) {
return <Either {...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;
}; };
} }

View File

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

View File

@ -1,11 +1,11 @@
/* /*
* 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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
export function displayCard({ package_lists: packages }, cardName) { function displayCard({ package_lists: packages }, cardName) {
const enabledPackagesNames = []; const enabledPackagesNames = [];
packages packages
.filter((item) => item.enabled) .filter((item) => item.enabled)
@ -21,3 +21,5 @@ export function displayCard({ package_lists: packages }, cardName) {
}); });
return enabledPackagesNames.includes(cardName); return enabledPackagesNames.includes(cardName);
} }
export default displayCard;

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.

View File

@ -1,9 +1,11 @@
/* /*
* 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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
export const isPluginInstalled = (pluginName) => const isPluginInstalled = (pluginName) =>
ForisPlugins.some((plugin) => plugin.name === pluginName); ForisPlugins.some((plugin) => plugin.name === pluginName);
export default isPluginInstalled;

View File

@ -23,12 +23,15 @@ export const ERROR_MESSAGES = {
const REs = { 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]?)$/, 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]))$/, 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]))$/, 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,}$/, 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, 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})*$/, DUID: /^([0-9a-fA-F]{2}){4}([0-9a-fA-F]{2})*$/,
MAC: /^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{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) => { const createValidator = (fieldType) => (value) => {

View File

@ -10,14 +10,12 @@
const PROTOCOL = window.location.protocol === "http:" ? "ws" : "wss"; const PROTOCOL = window.location.protocol === "http:" ? "ws" : "wss";
const URL = process.env.LIGHTTPD const URL = process.env.LIGHTTPD
? `${PROTOCOL}://${window.location.host}/${ ? `${PROTOCOL}://${window.location.host}/${process.env.WSPATH || "foris-ws"}`
process.env.WSPATH || "foris-ws"
}`
: `${PROTOCOL}://${window.location.hostname}:9081`; : `${PROTOCOL}://${window.location.hostname}:9081`;
const WAITING_FOR_CONNECTION_TIMEOUT = 500; const WAITING_FOR_CONNECTION_TIMEOUT = 500;
export class WebSockets { class WebSockets {
constructor() { constructor() {
this.ws = new WebSocket(URL); this.ws = new WebSocket(URL);
this.ws.onerror = (e) => { this.ws.onerror = (e) => {
@ -122,3 +120,5 @@ export class WebSockets {
this.ws.close(); this.ws.close();
} }
} }
export default WebSockets;

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
@ -7,7 +7,8 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
export function useWSForisModule( /* eslint-disable default-param-last */
function useWSForisModule(
ws, ws,
module, module,
action = "update_settings", action = "update_settings",
@ -41,3 +42,5 @@ export function useWSForisModule(
return [data]; return [data];
} }
export default useWSForisModule;

View File

@ -105,8 +105,5 @@ module.exports = {
}, },
], ],
}, },
devServer: {
publicPath: "/",
},
}, },
}; };