1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-06-15 13:36:35 +02:00

Compare commits

...

420 Commits

Author SHA1 Message Date
377b4279fd Merge branch 'fix-table-header-color' into 'dev'
Fix table header color

See merge request turris/reforis/foris-js!272
2025-02-26 18:31:01 +01:00
317966e1c9 Update dependencies in package.json to latest versions 2025-02-25 14:06:33 +01:00
326790d80d Replace 'wait' with 'waitFor' 2025-02-25 14:06:33 +01:00
700b28c463 Add encryption property to guest WiFi settings in tests 2025-02-25 14:06:33 +01:00
3d725e7e1b Make thead of RichTable light 2025-02-25 14:06:32 +01:00
33add77704 Merge branch 'bump-version-662' into 'dev'
Bump v6.6.2

See merge request turris/reforis/foris-js!270
2025-02-20 12:53:59 +01:00
456cbcfeec Bump v6.6.2
* Enhance SubmitButton component to accept a custom label prop
* Refactor RichTable component to remove forwardRef and simplify data handling
2025-02-20 12:42:10 +01:00
bf0b2ce70c Merge branch 'refactor-richtable' into 'dev'
Refactor RichTable

See merge request turris/reforis/foris-js!269
2025-02-19 16:20:47 +01:00
1441f6ff5a Enhance SubmitButton component to accept a custom label prop and update copyright year 2025-02-19 16:17:05 +01:00
c7d0655771 Refactor RichTable component to remove forwardRef and simplify data handling 2025-02-19 16:17:04 +01:00
31cb8e2ae0 Merge branch 'bump-version-661' into 'dev'
Bump v6.6.1

See merge request turris/reforis/foris-js!267
2025-02-17 16:12:27 +01:00
0a75f24a04 Bump v6.6.1
* Refactor RichTable component to use forwardRef
2025-02-17 16:07:50 +01:00
230ae8e35b Merge branch 'improve-richtable' into 'dev'
Refactor RichTable component to use forwardRef and useImperativeHandle for improved data handling

See merge request turris/reforis/foris-js!266
2025-02-17 15:42:41 +01:00
eb4ffb0651 Refactor RichTable component to use forwardRef
And useImperativeHandle for improved data handling.
2025-02-13 16:30:23 +01:00
74722b8ff3 Merge branch 'bump-version-660' into 'dev'
Bump v6.6.0

See merge request turris/reforis/foris-js!264
2025-02-07 14:43:20 +01:00
a2f9b3bfab Bump v6.6.0
* Added & updated Weblate translations
* Added Wi-Fi and LAN settings URLs to ForisURLs
* Added Wi-Fi modes VHT/HE 80+80
* Added encryption selection to WiFiGuestForm
* Added optional close button to ModalHeader component
* Updated Wi-Fi API
* Enhanced NumberInput component with keyboard & touch accessibility
* Refactored pagination condition in RichTable component
2025-02-07 14:41:13 +01:00
2ab65be0bf Merge branch 'sync-master-dev' into 'dev'
Add Wi-Fi and LAN settings URLs to ForisURLs

See merge request turris/reforis/foris-js!262
2025-02-07 13:50:13 +01:00
36a7b4dfda Add Wi-Fi and LAN settings URLs to ForisURLs 2025-02-07 13:45:13 +01:00
9fb0871cfc Merge branch 'update-translations' into 'dev'
Add & update Weblate translations

See merge request turris/reforis/foris-js!263
2025-02-07 13:39:10 +01:00
c7087eabf2 Merge branch 'feature/add-wifi-ht-modes-80-80' into 'dev'
Add wifi modes VHT/HE 80+80

See merge request turris/reforis/foris-js!260
2025-01-21 14:36:23 +01:00
b315ea2fd0 Add wifi modes VHT/HE 80+80 2025-01-21 16:33:02 +03:00
d46629a1bd Translated using Weblate (Greek)
Currently translated at 8.5% (7 of 82 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/el/
2025-01-18 12:00:39 +01:00
8ddb590ba8 Translated using Weblate (Greek)
Currently translated at 7.3% (6 of 82 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/el/
2025-01-17 11:02:24 +01:00
1c2a4518d3 Translated using Weblate (Greek)
Currently translated at 6.0% (5 of 82 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/el/
2025-01-17 10:53:06 +01:00
b6312075d2 Translated using Weblate (Slovak)
Currently translated at 100.0% (82 of 82 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2024-12-14 10:00:19 +00:00
2feedec8d1 Translated using Weblate (French)
Currently translated at 78.0% (64 of 82 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/fr/
2024-12-14 10:00:19 +00:00
dff5f87e91 Merge branch 'refactor-number-input' into 'dev'
Enhance NumberInput component with keyboard & touch accessibility

See merge request turris/reforis/foris-js!259
2024-12-12 16:49:51 +01:00
38de792390 Update Snapshots 2024-12-12 18:47:38 +03:00
c23616811a Fix tests 2024-12-12 18:47:33 +03:00
f1132c6b22 Enhance NumberInput component with keyboard & touch accessibility 2024-12-12 18:44:21 +03:00
e8e81b36dc Translated using Weblate (French)
Currently translated at 68.2% (56 of 82 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/fr/
2024-12-11 10:24:36 +01:00
53c7bb1a10 Translated using Weblate (Czech)
Currently translated at 100.0% (82 of 82 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/cs/
2024-12-11 10:24:35 +01:00
fb1f79c6c1 Translated using Weblate (German)
Currently translated at 100.0% (71 of 71 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/de/
2024-12-11 10:24:34 +01:00
eafbc01c73 Merge branch 'feature/wifi-API-update' into 'master'
WiFi API update

See merge request turris/reforis/foris-js!252
2024-12-11 10:24:28 +01:00
73819809f4 WiFi API update
Deprecated option `hwmode=11g/11a` was replaced by `band=2g/5g/6g`
2024-12-11 10:10:23 +01:00
ffa1121d39 Merge branch 'add-encryption-selection-to-guest-form' into 'dev'
Add encryption selection to WiFiGuestForm

Closes #27

See merge request turris/reforis/foris-js!258
2024-12-09 16:59:57 +01:00
ee6865e3bb Update Snapshots 2024-12-09 16:52:51 +01:00
6352060da3 Add encryption selection to WiFiGuestForm 2024-12-09 16:52:50 +01:00
a63b5bfa4e Merge branch 'refactor-modal' into 'dev'
Add optional close button to ModalHeader component

See merge request turris/reforis/foris-js!257
2024-12-04 15:12:07 +01:00
4b2e47f8f9 Refactor pagination condition in RichTable component 2024-12-04 14:02:52 +01:00
66f83b24bd Add optional close button to ModalHeader component 2024-12-04 14:02:35 +01:00
30fd6f91b4 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!256
2024-11-13 14:24:26 +01:00
5a53eca138 Merge branch 'bump-650' into 'dev'
Bump v6.5.0

See merge request turris/reforis/foris-js!255
2024-11-13 14:14:04 +01:00
8d2a4dc108 Bump v6.5.0
* Add & update Weblate translations
* Add RichTable component with pagination and sorting
* Add @tanstack/react-table v8.20.5 to dependencies
* Update documentation
* Replace RebootButton with ActionButtonWithModal component
* Fix import path for CustomizationContextMock in customTestRender.js
2024-11-13 14:08:53 +01:00
2481a0c025 Update translation messages 2024-11-13 14:08:12 +01:00
71697424c5 Create translation messages 2024-11-13 14:07:26 +01:00
07f8e3b9de Merge branch 'add-action-btn-with-modal' into 'dev'
Replace RebootButton with ActionButtonWithModal component and update documentation

See merge request turris/reforis/foris-js!254
2024-11-12 17:48:20 +01:00
c9f2b24095 Replace RebootButton with ActionButtonWithModal component and update documentation 2024-11-12 17:39:01 +01:00
087ecfa670 Merge branch 'add-tanstack-and-richtable-component' into 'dev'
Add RichTable component

See merge request turris/reforis/foris-js!253
2024-11-08 23:52:53 +01:00
e6365ecac4 Update Snapshots 2024-11-08 17:59:15 +01:00
e57722caa0 Add RebootButton and RichTable components to documentation 2024-11-08 17:59:15 +01:00
babdf92ddd Fix import path for CustomizationContextMock in customTestRender.js 2024-11-08 17:59:02 +01:00
42294316d9 Add RichTable component with header, body, and pagination 2024-11-08 17:59:02 +01:00
b65e034b04 Add @tanstack/react-table v8.20.5 to dependencies 2024-11-04 22:27:14 +01:00
14b90bbbd4 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!251
2024-10-02 14:35:17 +02:00
85b207b1dd Merge branch 'bump-version-640' into 'dev'
Bump v6.4.0

See merge request turris/reforis/foris-js!250
2024-10-02 14:31:57 +02:00
79e61d9507 Bump v6.4.0
* Refactor Alert component to include dismiss animation and timeout
* Refactor ThreeDotsMenu component to include additional props
2024-10-02 14:30:09 +02:00
6795c3941b Merge branch 'add-alert-animation-and-timeout' into 'dev'
Add Alert animation and timeout

See merge request turris/reforis/foris-js!249
2024-10-02 13:48:31 +02:00
969e8e6411 Update Snapshots 2024-10-02 13:16:45 +02:00
0099759279 Fix tests 2024-10-02 13:16:37 +02:00
87c81a2a2d Refactor Alert component to include dismiss animation and timeout 2024-10-02 13:14:48 +02:00
81b71f8153 Refactor ThreeDotsMenu component to include additional props 2024-10-02 13:14:40 +02:00
c0fd0adbc9 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!248
2024-09-27 15:48:49 +02:00
1ec0a26199 Merge branch 'bump-version-630' into 'dev'
Bump v6.3.0

See merge request turris/reforis/foris-js!247
2024-09-27 15:39:42 +02:00
76e37b738a Bump v6.3.0
* Add ThreeDotsMenu component
* Refactor EmailInput description
* Refactor RadioSet & ignore Radio component
* Refactor npm package badge in introduction.md
* NPM audit fix
2024-09-27 15:36:10 +02:00
8a69d14429 NPM audit fix 2024-09-27 15:35:45 +02:00
4d5395c826 Add ThreeDotsMenu component to index.js 2024-09-27 15:29:46 +02:00
1fb83e08ea Merge branch 'add-threedotsmenu-component' into 'dev'
Add ThreeDotsMenu component

See merge request turris/reforis/foris-js!246
2024-09-27 15:17:55 +02:00
e6cfc6dbb0 docs: Refactor npm package badge in introduction.md 2024-09-27 15:13:29 +02:00
a93a64bf96 docs: Refactor EmailInput description 2024-09-27 15:13:28 +02:00
1ab77decfd docs: Refactor RadioSet & ignore Radio component 2024-09-27 15:13:28 +02:00
b6e1e0adae Add ThreeDotsMenu component
ThreeDotsMenu Bootstrap component is a dropdown menu
that appears when the user clicks on three dots.

It is used to display a list of actions that can be
performed on a particular item.
2024-09-27 15:13:12 +02:00
a7a4e76cd1 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!245
2024-09-25 16:22:09 +02:00
e7758cab9a Merge branch 'bump-version-621' into 'dev'
Bump v6.2.1

See merge request turris/reforis/foris-js!243
2024-09-25 16:20:01 +02:00
bf88b76613 Bump v6.2.1
* Add & update Weblate translations
* Refactor CopyInput component
* Refactor ForisURLs to include new URLs for Overview page
2024-09-25 16:15:56 +02:00
3cf85a9516 Merge branch 'update-translations' into 'dev'
Add & update Weblate translations

See merge request turris/reforis/foris-js!244
2024-09-25 16:14:48 +02:00
7c8442300a Update translation messages 2024-09-25 16:11:22 +02:00
e849397aa2 Create translation messages 2024-09-25 16:11:07 +02:00
c1b44d498c Translated using Weblate (Czech)
Currently translated at 100.0% (71 of 71 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/cs/
2024-09-25 10:15:45 +00:00
1b5a5da953 Merge branch 'add-overview-links' into 'dev'
Refactor ForisURLs to include new URLs for Overview page

See merge request turris/reforis/foris-js!242
2024-09-24 13:19:55 +02:00
7f45201f05 Refactor ForisURLs to include new URLs for Overview page 2024-09-23 17:09:13 +02:00
f34d9bbdbd Merge branch 'fix-copy-input' into 'dev'
Refactor CopyInput component

See merge request turris/reforis/foris-js!241
2024-09-23 14:07:06 +02:00
c7ff3f42f6 Refactor CopyInput component
Remove unnecessary input-group-append div and simplify structure
2024-09-23 13:59:31 +02:00
a1036514dd Translated using Weblate (Slovak)
Currently translated at 100.0% (71 of 71 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2024-09-20 14:06:15 +02:00
a352f12279 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!240
2024-09-20 14:06:10 +02:00
acfbeb2c43 Merge branch 'bump-version-620' into 'dev'
Bump v6.2.0

See merge request turris/reforis/foris-js!239
2024-09-20 13:51:48 +02:00
3bef624ce4 Bump v6.2.0
* Add useFocusTrap hook
* Add extendSession endpoint
* Refactor Spinner.css to use CSS variable for color
* Refactor Modal component to use useFocusTrap hook
* Refactor Alert component to use useFocusTrap hook
2024-09-20 13:36:45 +02:00
7d0d52666d Merge branch 'add-extend-session-url' into 'dev'
Add extendSession endpoint ot ForisURLs

See merge request turris/reforis/foris-js!238
2024-09-20 13:27:22 +02:00
52fe5d65a6 Refactor Spinner.css to use CSS variable for color 2024-09-20 13:23:01 +02:00
b99add91cf Refactor ForisURLs.js to add extendSession endpoint 2024-09-20 13:23:01 +02:00
b7a4613cf4 Merge branch 'modal-focus-trap' into 'dev'
Introduce useFocusTrap hook and refactor Modal & Alert components

See merge request turris/reforis/foris-js!237
2024-09-19 13:18:26 +02:00
9e2278e016 Update Snapshots 2024-09-17 14:33:41 +02:00
83a6ff75f6 Refactor Alert component to use useFocusTrap hook 2024-09-17 14:33:19 +02:00
02f3803265 Refactor Modal component to use useFocusTrap hook 2024-09-17 14:13:26 +02:00
bb559cbe53 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!236
2024-08-30 16:03:17 +02:00
c86e2c8944 Merge branch 'bump-611' into 'dev'
Bump v6.1.1

See merge request turris/reforis/foris-js!235
2024-08-30 16:00:56 +02:00
b96ccde81c Bump v6.1.1
* Add & updated Weblate translations
* Update icon color classes to use "text-secondary" instead of "text-dark"
* Update Wi-Fi QRCodeModal component to use new styles & add close button
* Refactore WiFiGuestForm component to get rid of obsolete div element
* NPM audit fix
2024-08-30 15:56:08 +02:00
cfa6eade17 NPM audit fix 2024-08-30 15:51:23 +02:00
380a388a38 Merge branch 'fix-icons-color' into 'dev'
Update icon color classes & refactoring

See merge request turris/reforis/foris-js!233
2024-08-30 15:49:45 +02:00
cc19b4b293 Update Snapshots 2024-08-30 15:46:45 +02:00
e7ec494bb2 Update Wi-Fi QRCodeModal component to use new button styles & add close button 2024-08-30 15:46:45 +02:00
ea590e443c Refactor WiFiGuestForm component to get rid of obsolete "input-group-append" div element 2024-08-30 15:46:45 +02:00
b127bf5edf Update icon color classes to use "text-secondary" instead of "text-dark" 2024-08-30 15:46:45 +02:00
40e4a9a4e3 Merge branch 'update-translations' into 'dev'
Add & update Weblate translations

See merge request turris/reforis/foris-js!234
2024-08-30 15:44:51 +02:00
bcb7c43863 Translated using Weblate (Spanish)
Currently translated at 100.0% (71 of 71 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/es/
2024-08-24 15:09:22 +02:00
c809817283 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!232
2024-08-23 14:22:50 +02:00
a429b7c1bf Merge branch 'bump-version-610' into 'dev'
Bump v6.1.0

See merge request turris/reforis/foris-js!231
2024-08-23 14:19:24 +02:00
4e6f6e7413 Bump v6.1.0
* Add & update  Weblate translations
* Migrate to Font Awesome v6
* NPM audit fix
2024-08-23 14:03:48 +02:00
e6356de57f NPM audit fix 2024-08-23 14:03:48 +02:00
d4a71c346c Update translation messages 2024-08-23 14:03:48 +02:00
eb9582db96 Create translation messages 2024-08-23 14:03:47 +02:00
036f191949 Merge branch 'update-translations' into 'dev'
Add & update Weblate translations

See merge request turris/reforis/foris-js!230
2024-08-23 13:42:58 +02:00
2f73516384 Merge branch 'migrate-to-fontawesome-v6' into 'dev'
Migrate to FontAwesome v6

See merge request turris/reforis/foris-js!229
2024-08-22 16:10:21 +02:00
b97ba379ec Update Snapshots 2024-08-22 16:05:41 +02:00
5f1372bb37 Migrate to FontAwesome v6 2024-08-22 16:05:40 +02:00
7c9cd9451b Translated using Weblate (French)
Currently translated at 82.6% (57 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/fr/
2024-07-27 03:09:24 +02:00
7e0752fc17 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!228
2024-07-26 16:12:26 +02:00
4c5aeed26e Merge branch 'bump-603' into 'dev'
Bump v6.0.3

See merge request turris/reforis/foris-js!227
2024-07-26 16:08:09 +02:00
d90e39a570 Bump v6.0.3
* Update WiFiQRCode component
2024-07-26 17:06:38 +03:00
2e2f326ade Merge branch 'wifi-qr-icon' into 'dev'
Update WiFiQRCode component

See merge request turris/reforis/foris-js!226
2024-07-26 14:26:00 +02:00
541ca7a784 Update WiFiQRCode component
Remove custom QR icon image with a standard fontawesome icon
2024-07-25 17:31:30 +03:00
8e0c60a576 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!225
2024-06-28 14:22:41 +02:00
928cf716d6 Merge branch 'bump-602' into 'dev'
Bump v6.0.2

See merge request turris/reforis/foris-js!224
2024-06-28 13:08:32 +02:00
bd8d5bc8cb Bump v6.0.2
* Add className prop to CheckBox and Radio components
2024-06-28 14:03:19 +03:00
804e0022eb Update Snapshots 2024-06-28 10:30:25 +03:00
d69398ac06 Add className prop to CheckBox and Radio components 2024-06-28 10:29:41 +03:00
e297410f16 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!223
2024-06-26 15:05:29 +02:00
17e5a959f7 Merge branch 'bump-601' into 'dev'
Bump v6.0.1

See merge request turris/reforis/foris-js!222
2024-06-26 15:00:58 +02:00
3b48510246 Bump v6.0.1
* Add className prop to Switch component
* Update dependencies in package.json
* NPM audit fix
2024-06-26 15:59:26 +03:00
8bac4f18f4 NPM audit fix 2024-06-26 15:57:31 +03:00
6cb2a5388e Update dependencies in package.json
Update Webpack and Prettier to latest versions
2024-06-26 15:52:57 +03:00
0b02bead71 Merge branch 'add-classname-prop-to-switch' into 'dev'
Add className prop to Switch

See merge request turris/reforis/foris-js!221
2024-06-26 14:24:49 +02:00
12c6d05ca6 Update Snapshots 2024-06-26 14:11:54 +03:00
923bbab6d5 Add className prop to Switch component 2024-06-26 14:11:16 +03:00
0ea5d43c75 Merge branch 'dev' into 'master'
Bump v6.0.0

See merge request turris/reforis/foris-js!220
2024-06-11 14:29:46 +02:00
c209796118 Merge branch 'bump-version-600' into 'dev'
Bump v6.0.0

See merge request turris/reforis/foris-js!219
2024-06-11 14:10:20 +02:00
bf7e5303e9 Bump v6.0.0
* Add CHANGELOG.md
* Add JS_DIR variable to Makefile
* Add support for shared reForis ESLint configuration
* Update dependencies in package.json
* Update Spinner.css styles for better positioning and responsiveness
* Migrate to Bootstrap 5
* NPM audit fix
* Other small improvements
2024-06-11 14:02:24 +02:00
59b3130277 Add CHANGELOG.md 2024-06-10 18:03:41 +02:00
4ca07dceb0 Fix tests 2024-06-10 16:28:25 +02:00
912f8facdb Fix linting issues 2024-06-10 16:28:25 +02:00
42fb16d066 Update Snapshots 2024-06-10 16:28:24 +02:00
cd9eb80e9c NPM audit fix 2024-06-10 16:28:24 +02:00
5a77a22755 Update dependencies in package.json 2024-06-10 16:28:23 +02:00
3fa5ab7c07 Merge branch 'remove-use-tooltip-hook' into 'dev'
Remove useTooltip hook

See merge request turris/reforis/foris-js!218
2024-04-30 13:39:29 +02:00
ff48d6ca36 Remove useTooltip hook 2024-04-30 13:37:25 +02:00
39257567d4 Merge branch 'update-bootstrap' into 'dev'
Update Bootstrap library to version 5.3.x

See merge request turris/reforis/foris-js!217
2024-04-29 15:28:09 +02:00
5ed48bf2a3 Update Snapshots 2024-04-29 15:19:22 +02:00
c8fbdc5bba Fix tests 2024-04-29 15:19:21 +02:00
46bd8edcea Add JS_DIR variable to Makefile 2024-04-29 15:19:20 +02:00
42fcc02d83 Update Bootstrap library to version 5.3.x 2024-04-29 15:19:20 +02:00
96785f0774 Merge branch 'fix-fullscreen-spinner' into 'dev'
Update Spinner.css styles for better positioning and responsiveness

See merge request turris/reforis/foris-js!216
2024-04-10 15:35:27 +02:00
7823bff6d9 Update Spinner.css styles for better positioning and responsiveness 2024-04-10 14:46:18 +02:00
bee4bee300 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!215
2024-01-19 19:56:06 +01:00
0fd7c08188 Merge branch 'update-dependencies' into 'dev'
Bump v5.6.1

See merge request turris/reforis/foris-js!213
2024-01-19 19:33:46 +01:00
32630601c2 Bump v5.6.1
* 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
2024-01-19 21:15:50 +03:00
03aad5498a gitlab-ci: Use custom reforis-image 2024-01-19 21:15:50 +03:00
2f2b812ddb NPM audit fix 2024-01-19 21:02:04 +03:00
c0bcd46b2b Update bootstrap library to version 4.6.2 2024-01-19 20:49:13 +03:00
68ea8cf460 Merge branch 'update-translations' into 'dev'
Add & update Weblate translations

See merge request turris/reforis/foris-js!214
2024-01-19 18:41:57 +01:00
79fe68dba3 Translated using Weblate (Dutch)
Currently translated at 26.0% (18 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/nl/
2024-01-04 22:08:39 +01:00
683a8736a6 Translated using Weblate (German)
Currently translated at 100.0% (69 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/de/
2024-01-04 22:08:39 +01:00
6631d4847b Translated using Weblate (Czech)
Currently translated at 100.0% (69 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/cs/
2023-11-23 17:03:52 +01:00
8887d0d68e Translated using Weblate (Czech)
Currently translated at 100.0% (69 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/cs/
2023-09-26 11:59:23 +00:00
390e4bdce8 Merge branch 'translations-september-2023' into 'master' 2023-09-25 14:52:27 +02:00
5232b55cf6 Translated using Weblate (Swedish)
Currently translated at 57.9% (40 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sv/
2023-09-22 21:00:08 +00:00
5823012c6e Translated using Weblate (German)
Currently translated at 98.5% (68 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/de/
2023-08-13 12:47:51 +02:00
e907a3a21f Translated using Weblate (German)
Currently translated at 63.7% (44 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/de/
2023-04-24 16:49:38 +02:00
9e4cb4b417 Translated using Weblate (Czech)
Currently translated at 76.8% (53 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/cs/
2023-04-16 15:52:11 +02:00
55f4d2ff15 Translated using Weblate (Polish)
Currently translated at 36.2% (25 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/pl/
2023-03-07 17:37:51 +01:00
6b464783ed Translated using Weblate (Czech)
Currently translated at 72.4% (50 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/cs/
2023-03-03 14:40:04 +01:00
85ba270135 Translated using Weblate (Norwegian Bokmål)
Currently translated at 73.9% (51 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/nb_NO/
2023-03-02 12:40:09 +01:00
80619fab3c Merge branch 'fix-button-spinner' into 'dev'
Button: Fix loading state & button's layout

See merge request turris/reforis/foris-js!211
2023-02-15 18:55:02 +01:00
a1a47e0d0f Update Snapshots 2023-01-24 19:41:54 +01:00
d49ff0150c Button: Fix loading state & button's layout 2023-01-24 19:41:53 +01:00
a0f42906f5 Translated using Weblate (Slovak)
Currently translated at 100.0% (69 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2023-01-17 23:51:47 +01:00
bc1b6e7877 Translated using Weblate (Italian)
Currently translated at 4.3% (3 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/it/
2023-01-01 00:48:44 +01:00
efb3fa80ce Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!210
2022-12-29 11:52:54 +01:00
9c3dcaf6b5 Merge branch 'bump-version-560' into 'dev'
Bump v5.6.0

See merge request turris/reforis/foris-js!209
2022-12-29 11:45:58 +01:00
fb41c9629e Bump v5.6.0
* 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
2022-12-29 11:34:19 +01:00
620eee3f53 NPM audit fix 2022-12-29 11:33:47 +01:00
f6ec82609c Merge branch 'update-translations' into 'dev'
Add & update Weblate translations

See merge request turris/reforis/foris-js!208
2022-12-28 16:27:48 +01:00
0b47c38f21 Merge branch 'fix-custom-context-mock' into 'dev'
Fix custom context mock

See merge request turris/reforis/foris-js!207
2022-12-28 16:09:20 +01:00
6183669c9b Fix CustomizationContextMock for tests 2022-12-28 15:19:24 +01:00
f3694bb62c Make ieee80211w_disabled as optional in WiFiForm 2022-12-28 15:18:42 +01:00
0f2344a005 Merge branch 'add-customization-context' into 'dev'
Add CustomizationContext and custom hook

See merge request turris/reforis/foris-js!183
2022-12-22 15:58:04 +01:00
f2ae6c4d0a Move contexts in a context folder 2022-12-22 15:35:22 +01:00
f382e743aa Update caniuse-lite 2022-12-22 15:35:22 +01:00
d71f4a7967 Remove testUtils from .gitignore
Because the testUtils folder consists of useful utils for testing,
we want to track changes in these files.
2022-12-22 15:35:21 +01:00
aeabc0bf06 Add info about CustomizationContext to the docs 2022-12-22 15:35:21 +01:00
46fe75d3cf Add tests for CustomizationContext 2022-12-22 15:35:20 +01:00
c469d8dfde Add CustomizationContext and custom hook
As we want to share customization context between reForis & Plugins
2022-12-22 15:35:20 +01:00
f327428765 Add about endpoint to forisUrls 2022-12-22 15:35:19 +01:00
5a359661da Translated using Weblate (Russian)
Currently translated at 100.0% (69 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/ru/
2022-12-07 13:47:07 +01:00
3d30e2720e Translated using Weblate (Slovak)
Currently translated at 100.0% (69 of 69 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2022-12-05 17:48:13 +01:00
badb043554 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!206
2022-12-02 16:15:39 +01:00
ab692e5c4d Merge branch 'bump-550' into 'dev'
Bump v5.5.0

See merge request turris/reforis/foris-js!205
2022-12-02 16:13:42 +01:00
2e398388b5 Bump v5.5.0
* Add & update translations
* Add a switch to disable Management Frame Protection (802.11w)
* Improved Foris JS documentation
* NPM audit fix
2022-12-02 16:08:36 +01:00
5e539de03f NPM audit fix 2022-12-02 16:06:52 +01:00
87f5557ef6 Merge branch 'update-translations' into 'master'
Add & update Weblate translations

See merge request turris/reforis/foris-js!204
2022-12-02 16:04:02 +01:00
f128c5c7d6 Update translation messages 2022-12-02 15:55:10 +01:00
7a633574da Create translation messages 2022-12-02 15:54:45 +01:00
ee40697e2b Translated using Weblate (Norwegian Bokmål)
Currently translated at 76.1% (51 of 67 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/nb_NO/
2022-12-02 15:48:45 +01:00
4525c6bc66 Translated using Weblate (Croatian)
Currently translated at 2.9% (2 of 67 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/hr/
2022-12-02 15:48:45 +01:00
1d6987b21b Translated using Weblate (Polish)
Currently translated at 32.8% (22 of 67 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/pl/
2022-12-02 15:48:45 +01:00
67fc2d32ce Translated using Weblate (Spanish)
Currently translated at 100.0% (67 of 67 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/es/
2022-12-02 15:48:45 +01:00
ab13b7aa08 Merge branch 'dev' into 'master'
Master

See merge request turris/reforis/foris-js!203
2022-12-02 15:48:41 +01:00
2a73502710 Merge branch 'feature/add-mfp-switch' into 'dev'
Add a switch to disable Management Frame Protection (802.11w)

Closes #26

See merge request turris/reforis/foris-js!202
2022-12-02 15:46:00 +01:00
003606cb8c Update Snapshots 2022-12-01 17:13:44 +01:00
aeddd9ce74 Add a switch to disable Management Frame Protection (802.11w)
In the case of WPA3 encryption Management Frame Protection is enabled
by default in OpenWrt.

But in some cases, it causes trouble with particular devices that
fails to connect to WiFi Access Point - see:
https://forum.turris.cz/t/turris-omnia-wifi-health/15704/15
2022-12-01 16:19:38 +01:00
a4fd74bf38 Merge branch 'improve-docs' into 'dev'
Improve Foris JS documentation

See merge request turris/reforis/foris-js!190
2022-09-16 16:19:00 +02:00
b0e2f62a41 Add Switch example to the docs 2022-09-16 16:10:44 +02:00
caf8af44d1 Improve docs development section 2022-09-16 16:10:44 +02:00
fd7cd49790 Add custom logo & favicon 2022-09-16 16:10:43 +02:00
d95fdf8517 Restructure styleguide configuration file
* Add version of the library
* Change colors
* Set tocMode  to "collapse"
2022-09-16 16:10:43 +02:00
68c560078b Improve docs introduction section 2022-09-16 16:10:42 +02:00
83caf505d9 Improve description in package.json 2022-09-16 16:10:42 +02:00
f3a1090dbd Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!200
2022-06-03 11:46:19 +02:00
d588291f1c Merge branch 'update-peer-deps' into 'dev'
Bump v5.4.1

See merge request turris/reforis/foris-js!198
2022-06-02 18:31:05 +02:00
bc044df7a8 Bump v5.4.1
* Add Weblate translations
* Update PropType peer dependency
* NPM audit fix
2022-06-02 11:12:05 +02:00
b4c6a7fb70 NPM audit fix 2022-06-02 11:12:04 +02:00
d6563d2ffd Update PropTypes library to v15.8.1
As reForis had updated library, there was a conflict in npm
between different versions of the library.

```
npm ERR! While resolving: reforis_js@1.2.1
npm ERR! Found: prop-types@15.8.1
npm ERR! node_modules/prop-types
npm ERR!   prop-types@"^15.8.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer prop-types@"15.7.2" from foris@5.4.0
npm ERR! node_modules/foris
npm ERR!   foris@"5.4.0" from the root project
```
2022-06-02 11:08:02 +02:00
af90d8d09d Merge branch 'update-translations' into 'master'
Add Weblate translations

See merge request turris/reforis/foris-js!199
2022-05-31 15:32:51 +02:00
006d6ce8d9 Translated using Weblate (Slovak)
Currently translated at 100.0% (67 of 67 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2022-05-30 08:14:50 +02:00
cee08f48ce Translated using Weblate (Russian)
Currently translated at 100.0% (67 of 67 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/ru/
2022-05-28 11:19:05 +02:00
2d0ca58057 Translated using Weblate (Norwegian Bokmål)
Currently translated at 68.6% (46 of 67 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/nb_NO/
2022-05-25 15:20:48 +02:00
db4a6fb763 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!197
2022-05-20 16:28:35 +02:00
caaa154d21 Merge branch 'bump-540' into 'dev'
Bump v5.4.0

See merge request turris/reforis/foris-js!196
2022-05-20 16:25:58 +02:00
518fa30306 Bump v5.4.0
* 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
2022-05-20 16:11:12 +02:00
fb3562373a NPM audit fix 2022-05-20 16:10:53 +02:00
5afbbac74c Merge branch 'fix-password-helptext' into 'dev'
Fix Wi-Fi password help text string & Add translations

See merge request turris/reforis/foris-js!195
2022-05-20 16:06:17 +02:00
f25832432b Update translation messages 2022-05-20 15:43:48 +02:00
926cb2505f Create translation messages 2022-05-20 15:43:12 +02:00
985fd08b46 Update Snapshots 2022-05-20 15:42:37 +02:00
da019b6d86 Fix Wi-Fi password helptext string 2022-05-20 15:41:59 +02:00
514f02a5f6 Merge branch 'master' into fix-password-helptext 2022-05-20 15:41:39 +02:00
c6557aae5e Merge branch 'update-translations' into 'master'
Update translations

See merge request turris/reforis/foris-js!194
2022-05-20 15:36:47 +02:00
92ed7f1ee7 Merge branch 'add-copyinput' into 'dev'
Add CopyInput bootstrap component

See merge request turris/reforis/foris-js!192
2022-05-19 16:09:31 +02:00
46ce6ebbb9 Add CopyInput bootstrap component 2022-05-19 15:56:10 +02:00
1a4ba03ff5 Wrap Input component with forwardRef
In order to pass `ref` to the child <input> DOM element.
2022-05-19 15:56:09 +02:00
e24cd76009 Merge branch 'feature/update-wifi-ax-labels-and-description' into 'dev'
Update WiFiForm labels and description for wifi ax

See merge request turris/reforis/foris-js!193
2022-04-19 16:13:46 +02:00
ae6b495683 Update Snapshots 2022-04-19 16:06:11 +02:00
272c97dc8a Update WiFiForm labels and description for wifi ax 2022-04-19 15:38:51 +02:00
fd25ae04a8 Merge branch 'feature/make-ws-path-in-ligttpd-mode-configurable' into 'dev'
Feature/make ws path in lighttpd mode configurable

See merge request turris/reforis/foris-js!191
2022-04-08 16:10:40 +02:00
cc1b0b3f81 Make WS path in lighttpd mode configurable 2022-03-23 11:12:46 +01:00
3ba279f42c Translated using Weblate (Slovak)
Currently translated at 100.0% (65 of 65 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2022-03-17 18:58:25 +01:00
0167b7ce66 Translated using Weblate (Czech)
Currently translated at 78.4% (51 of 65 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/cs/
2022-03-15 23:41:00 +01:00
9db509ace3 Translated using Weblate (Russian)
Currently translated at 100.0% (65 of 65 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/ru/
2022-03-12 07:58:23 +01:00
d42347f169 Translated using Weblate (Slovak)
Currently translated at 100.0% (65 of 65 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2022-03-11 00:09:51 +01:00
82c34e5d42 Translated using Weblate (Norwegian Bokmål)
Currently translated at 67.6% (44 of 65 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/nb_NO/
2022-03-11 00:09:51 +01:00
7867a1a494 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!185
2022-02-28 17:28:56 +01:00
1bb8abd633 Merge branch 'bump-530' into 'dev'
Bump v5.3.0

See merge request turris/reforis/foris-js!187
2022-02-28 17:01:33 +01:00
536ccc0f03 Bump v5.3.0
* Add & update translations
* Add rest of the props to DownloadButton component
* Add hostname validation
* Add wifi 802.11ax HE modes
* Set best Wi-Fi HT mode depending on the checked frequency
* Improve domain name RegEx pattern
* Remove customOrder prop in Select component
* Fix Wi-Fi translation strings
* Fix autocomplete attribute in PasswordInput
* Fix WiFi password max length check
* Fix documentation build
* Fix access token in publish script
* Refine & restructure Makefile
* Update GitLab CI image to Node.js v16
* NPM update (several dependencies)
* NPM audit fix
2022-02-28 16:57:37 +01:00
671c711a33 Fix access token in publish script
As npm has a new access token format
https://github.blog/changelog/2021-09-23-npm-has-a-new-access-token-format/
2022-02-28 16:47:52 +01:00
e2f3e6857e NPM update (several dependencies)
* qrcode.react to v1.0.1
* react-datetime to v3.1.1
* moment-timezone to v0.5.34
2022-02-28 15:49:09 +01:00
fe4ab298d8 NPM audit fix 2022-02-28 15:49:08 +01:00
0f7f89dfc0 Merge branch 'refine-makefile' into 'dev'
Refine Makefile & update GitLab CI image

See merge request turris/reforis/foris-js!189
2022-02-28 15:40:53 +01:00
be2e3fe3f0 Update snapshots 2022-02-22 17:03:35 +01:00
577ad70c06 Update translation messages 2022-02-22 16:46:22 +01:00
d17638eb6e Create translation messages 2022-02-22 16:43:31 +01:00
13869336db Fix Wi-Fi translation strings 2022-02-22 16:38:29 +01:00
7c46abcd5d gitlab-ci: Update Node.js image to v16 2022-02-22 16:38:19 +01:00
894d92b683 Makefile: Fix spelling mistakes in echo statements 2022-02-22 16:38:10 +01:00
ca335ab3a5 Makefile: Add test-js-watch recipe 2022-02-22 16:37:52 +01:00
2161fc0b32 Makefile: Divide phony targets & restructure recipes 2022-02-22 16:37:45 +01:00
0a23506a38 Fix forisjs.pot template's header comment 2022-02-22 16:37:35 +01:00
d23c7cb790 Merge branch 'master' into refine-makefile 2022-02-22 16:35:15 +01:00
129327cfcf Merge branch 'update-translations' into 'master'
Add & update translations

See merge request turris/reforis/foris-js!188
2022-02-21 17:58:04 +01:00
0a143e7de6 Merge branch 'add-hostname-validation' into 'dev'
Add hostname validation

See merge request turris/reforis/foris-js!181
2022-02-21 14:09:16 +01:00
7ec1c46a63 Add tests for hostname validation 2022-02-21 13:57:34 +01:00
7ceccd5222 Add hostname RegEx pattern & validateHostname() function 2022-02-21 13:57:24 +01:00
f868881b3d Improve domain name RegEx pattern
Previously validateDomain() function was used for hostname validations
but was weak in a chain of validations, for example, domain -> ipv4
as it accepts invalid IPv4 addresses.

So we had to split it, improve the domain name RegEx pattern and add a
hostname validation pattern.
2022-02-21 13:56:32 +01:00
188ed87fc0 Merge branch 'feature/wifi-ax-he-modes' into 'dev'
Add wifi 802.11ax HE modes

See merge request turris/reforis/foris-js!184
2022-02-21 13:31:45 +01:00
c0f64e8c6c Fix tests
"Post form: 2.4 GHz" test was failing because of added new functionality
in the previous 0194684 commit.
2022-02-21 11:28:25 +01:00
b95cfb664d Set best Wi-Fi HT mode depending on the checked frequency 2022-02-21 11:28:25 +01:00
52cdaf5bc5 Update Snapshots 2022-02-21 11:28:24 +01:00
175a07a865 Remove customOrder prop
As some options of Select component should be ordered by values or keys,
it was decided to handle sorting not in options, but locally in
corresponding lists.
2022-02-21 11:28:24 +01:00
f952e25205 Add wifi 802.11ax HE modes 2022-02-21 11:28:24 +01:00
01eeb06f9e Merge branch 'improve-password-inputs' into 'dev'
Fix autocomplete attribute in PasswordInput

Closes #23

See merge request turris/reforis/foris-js!179
2022-02-18 17:42:58 +01:00
839e227feb Update Snapshots 2022-02-18 17:40:48 +01:00
4b239ed195 Fix autocomplete attribute in PasswordInput 2022-02-18 17:40:48 +01:00
2bcbe0ae59 Merge branch 'add-props-downbutton' into 'dev'
Add rest of the props to DownloadButton component

See merge request turris/reforis/foris-js!180
2022-02-11 15:51:19 +01:00
b1ff608337 Add rest of the props to DownloadButton component 2022-02-11 15:49:39 +01:00
b662ba5b52 Merge branch 'fix-styleguidist' into 'dev'
Fix react-styleguidist build

See merge request turris/reforis/foris-js!182
2022-02-11 13:15:22 +01:00
a4115245fe NPM audit fix 2022-02-08 15:16:04 +01:00
e1a893874a Update webpack & react-styleguidist dependencies 2022-02-08 15:16:03 +01:00
dd383ef1b2 Merge branch 'fix-wifi-password-maxlength' into 'dev'
Fix WiFi password max length check

Closes #25

See merge request turris/reforis/foris-js!178
2022-01-20 10:11:12 +01:00
b6e2cb71bb Add tests for password length validation 2022-01-20 12:08:30 +03:00
048e686185 Fix WiFi password max length check
The WiFi password cannot be longer than 63 symbols.
2022-01-20 12:08:06 +03:00
eacb2f66a3 Translated using Weblate (French)
Currently translated at 100.0% (58 of 58 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/fr/
2022-01-14 06:53:49 +01:00
2433641f56 Translated using Weblate (Portuguese (Brazil))
Currently translated at 8.6% (5 of 58 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/pt_BR/
2021-12-21 13:52:41 +01:00
185d2e6436 Added translation using Weblate (Portuguese (Brazil)) 2021-12-20 11:31:53 +01:00
7f262d4941 Translated using Weblate (Slovak)
Currently translated at 100.0% (58 of 58 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2021-12-18 01:07:51 +01:00
72356bb6c1 Translated using Weblate (Russian)
Currently translated at 100.0% (58 of 58 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/ru/
2021-12-18 01:07:50 +01:00
13c94caeb5 Merge branch 'add-translations' into 'master'
Add & update Weblate translations

See merge request turris/reforis/foris-js!175
2021-12-15 17:20:16 +01:00
c24e58fae8 Update translation messages 2021-12-15 19:18:22 +03:00
6329b5a104 Create translation messages 2021-12-15 19:17:57 +03:00
fbac503586 Translated using Weblate (French)
Currently translated at 100.0% (52 of 52 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/fr/
2021-12-15 17:12:50 +01:00
550af8967c Translated using Weblate (Norwegian Bokmål)
Currently translated at 82.6% (43 of 52 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/nb_NO/
2021-12-15 17:12:50 +01:00
3640d6a90a Translated using Weblate (Norwegian Bokmål)
Currently translated at 80.7% (42 of 52 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/nb_NO/
2021-12-15 17:12:50 +01:00
7b2bc43f3f Translated using Weblate (Swedish)
Currently translated at 51.9% (27 of 52 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sv/
2021-12-15 17:12:50 +01:00
1e693b0963 Translated using Weblate (German)
Currently translated at 92.3% (48 of 52 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/de/
2021-12-15 17:12:50 +01:00
afde04c662 Translated using Weblate (Slovak)
Currently translated at 100.0% (52 of 52 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2021-12-15 17:12:50 +01:00
22fb7dcf58 Translated using Weblate (Czech)
Currently translated at 100.0% (52 of 52 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/cs/
2021-12-15 17:12:50 +01:00
b557b67308 Translated using Weblate (Russian)
Currently translated at 100.0% (52 of 52 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/ru/
2021-12-15 17:12:50 +01:00
cc6e5e2933 Translated using Weblate (Slovak)
Currently translated at 100.0% (52 of 52 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2021-12-15 17:12:50 +01:00
60f850a095 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!177
2021-12-15 17:12:43 +01:00
a1e9f23620 Merge branch 'bump-520' into 'dev'
Bump v5.2.0

See merge request turris/reforis/foris-js!176
2021-12-15 17:09:05 +01:00
579ed5ea8c Bump v5.2.0
* Remove login page
* NPM audit fix
2021-12-15 19:05:53 +03:00
c2eda33998 NPM audit fix 2021-12-15 19:05:26 +03:00
f49529018c Merge branch 'remove-login' into 'dev'
Remove reForis login page

Closes reforis#355

See merge request turris/reforis/foris-js!167
2021-12-15 16:59:46 +01:00
a66a2f4708 Remove reForis login page 2021-12-13 15:51:56 +01:00
2e473003bd Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!174
2021-11-18 18:07:17 +01:00
43cb5bff50 Bump v5.1.16
* NPM audit fix
2021-11-18 17:49:13 +01:00
c67ea089fd NPM audit fix 2021-11-18 17:49:12 +01:00
4b25f6eafc Revert "NPM audit fix"
This reverts commit 6e6c349866.
2021-11-18 17:49:12 +01:00
c1e807bc74 Merge branch 'dev' into 'master'
Bump v5.1.15

See merge request turris/reforis/foris-js!171
2021-11-03 15:28:21 +01:00
69da5afffe Merge branch 'merging-dev' into 'dev'
Bump v5.1.15

See merge request turris/reforis/foris-js!170
2021-11-03 15:23:03 +01:00
1669ac8576 Bump v5.1.15
* Add WPA3 option
* Add custom order ability of Select options
* NPM audit fix
2021-11-03 13:40:40 +01:00
6e6c349866 NPM audit fix 2021-11-03 13:38:54 +01:00
5207029462 Update snapshots 2021-11-03 13:31:10 +01:00
53aec6372d Update tests 2021-11-03 13:31:09 +01:00
a7d7e59028 Add custom order ability of Select options 2021-11-03 13:31:09 +01:00
0beb1f0418 Add WPA3 option 2021-11-03 13:31:08 +01:00
2644f6fd70 Merge branch 'update-translations' into 'master'
Add & update translations

See merge request turris/reforis/foris-js!165
2021-07-30 14:10:28 +00:00
585fec4e3e Bump v5.1.14
* Add & update translations
* Fix infinity redirect loop when WS error occurs
* NPM audit fix
2021-07-30 17:02:51 +03:00
682abc126a Update translation messages 2021-07-30 16:59:02 +03:00
a9f3f77bd5 Create translation messages 2021-07-30 16:58:34 +03:00
4703721c5c Translated using Weblate (Swedish)
Currently translated at 52.0% (26 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sv/
2021-07-30 15:56:22 +02:00
aff1ba7b6d Translated using Weblate (Slovak)
Currently translated at 100.0% (50 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2021-07-30 15:56:22 +02:00
9eb7197035 Translated using Weblate (Slovak)
Currently translated at 100.0% (50 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/sk/
2021-07-30 15:56:22 +02:00
462a86b31d Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!166
2021-07-30 13:56:18 +00:00
cbce4c1ec1 Merge branch 'fix-redirect-loop' into 'dev'
Fix infinity redirect loop when WS error occurs

See merge request turris/reforis/foris-js!161
2021-07-30 13:48:38 +00:00
aee19694b5 NPM audit fix 2021-07-30 13:49:52 +03:00
f3b1ef741a Fix infinity redirect loop when WS error occurs
There were situations when reForis infinity loop had occurred when the user was
already logged in, but the client rejected the `wss` connection. The location
path was not `/login`, and an infinity redirect took place. This should fix it.
2021-07-27 11:29:59 +03:00
c35a4a8236 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!164
2021-06-30 12:34:05 +00:00
67b8386cd0 Merge branch 'bump-5113' into 'dev'
Bump v5.1.13

See merge request turris/reforis/foris-js!163
2021-06-30 11:56:44 +00:00
f67edc39e1 Bump v5.1.13
* Add sentinelAgreement endpoint to forisUrls
* NPM audit fix
2021-06-30 10:51:03 +02:00
6f0f344eb4 NPM audit fix 2021-06-30 10:45:30 +02:00
3a39e44c34 Merge branch 'add-data-collection-endpoint' into 'dev'
Add sentinelAgreement endpoint to forisUrls

See merge request turris/reforis/foris-js!162
2021-06-30 08:41:09 +00:00
cff5f1e5e1 Add sentinelAgreement endpoint to forisUrls 2021-06-29 17:39:53 +02:00
b7bab92d5d Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!160
2021-05-14 11:55:44 +00:00
75dd0fec92 Merge branch 'fix-wifi' into 'dev'
Expend library with the ResetWifiSettings function

Closes #20

See merge request turris/reforis/foris-js!155
2021-05-14 11:46:20 +00:00
3619532124 Bump v5.1.12
* 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
2021-05-14 13:38:01 +02:00
ce62fd1043 Update Snapshots 2021-05-14 13:38:00 +02:00
c5bac99d8e NPM audit fix 2021-05-14 13:38:00 +02:00
f7146e3b14 Fix obsolete rebootPage link in forisUrls 2021-05-14 13:37:59 +02:00
18ba90567c Fix fuzzy translation messages in English catalog 2021-05-14 13:37:59 +02:00
2e9da55df7 Fix ids in wifiSettings fixture 2021-05-14 13:37:59 +02:00
da10a34d64 Revert "Fix reForis infinity redirect loop when WS error occurs"
It turned out that this fix doesn't work as expected in some cases.

This reverts commit 7505302875.
2021-05-14 13:37:58 +02:00
764a6c86cd Expend library with the ResetWifiSettings function
Use named export instead of the default for ResetWifiSettings,
as we want to use it not only inside the WiFiSettings component.
2021-05-14 13:37:58 +02:00
6059ce9e7b Merge branch 'fix-wifi-modes' into 'dev'
Fix switching Wi-Fi modes depending on bands in WiFiForm

Closes reforis#292

See merge request turris/reforis/foris-js!159
2021-05-14 11:11:01 +00:00
4368bea2c2 Update tests 2021-05-14 13:06:48 +02:00
9dd6bbca90 Fix switching Wi-Fi modes depending on bands in WiFiForm 2021-05-14 13:06:48 +02:00
d5bb99570c Merge branch 'add-packages-url' into 'dev'
Add Packages URL

See merge request turris/reforis/foris-js!158
2021-04-29 15:48:13 +00:00
e1260a5ea1 Add Packages URL into forisUrls 2021-04-21 14:10:23 +02:00
02f2c5be4f Merge branch 'update-translations' into 'dev'
Add & update translations

See merge request turris/reforis/foris-js!156
2021-04-08 18:06:53 +00:00
ce04f6c27e Merge remote-tracking branch 'weblate/master' into update-translations 2021-04-08 15:57:34 +02:00
80d4dd914d Merge branch 'fix-ios-redirect-loop' into 'dev'
Fix iOS redirect loop

Closes #19

See merge request turris/reforis/foris-js!154
2021-03-26 10:31:58 +00:00
7f82b2e73c NPM audit fix 2021-03-26 11:11:13 +01:00
ac8646a4e7 Update package-lock.json by npm v7
The lockfile v2 is used by npm v7, which is backwards compatible
to v1 lockfiles.

For more information:
https://docs.npmjs.com/cli/v7/configuring-npm/package-lock-json#lockfileversion
2021-03-26 11:11:13 +01:00
7505302875 Fix reForis infinity redirect loop when WS error occurs 2021-03-26 11:11:12 +01:00
adc6bbca14 Merge branch 'fix-translation-sources' into 'dev'
Fix translation sources in WiFiForm

See merge request turris/reforis/foris-js!153
2021-03-24 10:25:19 +00:00
86f98148c6 Fix translation sources in WiFiForm 2021-03-03 13:18:09 +01:00
f623b98acc Translated using Weblate (Russian)
Currently translated at 100.0% (50 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/ru/
2021-02-19 06:50:27 +01:00
3be1213b3b Translated using Weblate (Czech)
Currently translated at 100.0% (50 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/cs/
2021-02-17 15:50:37 +01:00
09007b922e Translated using Weblate (Russian)
Currently translated at 98.0% (49 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/ru/
2021-02-14 16:50:25 +01:00
f6231370b9 Translated using Weblate (Czech)
Currently translated at 86.0% (43 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/cs/
2021-02-14 16:50:25 +01:00
449b93ce41 Translated using Weblate (French)
Currently translated at 56.0% (28 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/fr/
2021-02-09 17:50:37 +01:00
764c8dedd8 Translated using Weblate (Russian)
Currently translated at 96.0% (48 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/ru/
2021-02-09 17:50:37 +01:00
9bfd20ef0c Translated using Weblate (Greek)
Currently translated at 8.0% (4 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/el/
2021-02-09 17:50:37 +01:00
0289c5010f Translated using Weblate (Czech)
Currently translated at 80.0% (40 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/cs/
2021-02-09 17:50:37 +01:00
1733b8609b Translated using Weblate (Russian)
Currently translated at 88.0% (44 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/ru/
2021-02-06 00:41:58 +01:00
d5c3365fdb Translated using Weblate (Greek)
Currently translated at 8.0% (4 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/el/
2021-02-06 00:41:57 +01:00
0ba4814275 Translated using Weblate (Norwegian Bokmål)
Currently translated at 82.0% (41 of 50 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/nb_NO/
2021-02-06 00:41:57 +01:00
fca410ec82 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!152
2021-02-04 13:11:19 +01:00
4f09c2da9a Merge branch 'fix-translations' into 'dev'
Fix translations

See merge request turris/reforis/foris-js!151
2021-02-04 12:43:20 +01:00
57ef9c4ea0 Bump v5.1.11
* Remove duplicated file for Norwegian language
* Fix translations inconsistency
2021-02-04 12:14:29 +01:00
b7695cc854 Remove duplicated file for Norwegian language
I noticed thanks to Weblate that there are two files for the same
language and I found this site:
http://people.skolelinux.org/pere/blog/Spr_kkoder_for_POSIX_locale_i_Norge.html

We should use nb_NO and remove nb folder.
2021-02-04 12:12:39 +01:00
fd8b8b926a Merge remote-tracking branch 'weblate/master' into fix-translations 2021-02-03 18:09:37 +01:00
b91ec527d1 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!150
2021-02-03 14:41:59 +01:00
7369d906b5 Merge branch 'bump-5110' into 'dev'
Bump v5.1.10

See merge request turris/reforis/foris-js!149
2021-02-02 10:26:00 +01:00
45fee77426 Bump v5.1.10
* Add and update translations
2021-01-29 17:14:03 +01:00
b12cba893e Merge branch 'new-translations' into 'dev'
Add new translations

See merge request turris/reforis/foris-js!148
2021-01-29 13:49:51 +01:00
09d1698647 Update translation messages 2021-01-28 11:45:37 +01:00
83c05c6c89 Create translation messages 2021-01-28 11:44:40 +01:00
a08de54ca1 Makefile: update Python version 2021-01-28 11:43:36 +01:00
cb5fa4ce34 Translated using Weblate (Hungarian)
Currently translated at 100.0% (18 of 18 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/hu/
2021-01-28 11:37:10 +01:00
fb32c84dc2 Translated using Weblate (Polish)
Currently translated at 100.0% (18 of 18 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/pl/
2021-01-28 11:37:00 +01:00
4060b3c916 Translated using Weblate (Dutch)
Currently translated at 5.5% (1 of 18 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/nl/
2021-01-28 11:36:43 +01:00
7abfd627e4 Translated using Weblate (Spanish)
Currently translated at 100.0% (18 of 18 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/es/
2021-01-28 11:36:14 +01:00
0fbc3df247 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!147
2021-01-21 10:57:46 +01:00
bc9c00d3a1 Merge branch 'bump-519' into 'dev'
Bump v5.1.9

See merge request turris/reforis/foris-js!146
2021-01-21 10:30:32 +01:00
8d75b5ec6e Bump v5.1.9
* Fix trailing space in Modal classes
* Change formFieldsSize of ResetWiFiSettings card
* Increase bottom margin of formFieldsSize
2021-01-20 11:42:24 +01:00
c1aa1948b4 Merge branch 'fix-wifi-layout' into 'dev'
Fix Wi-Fi layout

See merge request turris/reforis/foris-js!145
2021-01-19 16:42:17 +01:00
8c110ebf52 NPM audit fix 2021-01-18 23:31:43 +01:00
abb5be53aa Fix trailing space in Modal classes 2021-01-18 23:10:39 +01:00
af0fb80e45 Update Snapshots 2021-01-18 23:10:39 +01:00
688192504f Change formFieldsSize of ResetWiFiSettings card 2021-01-18 22:06:20 +01:00
b8e5dbec8d Increase bottom margin of formFieldsSize 2021-01-18 22:05:56 +01:00
bcb5365d08 Translated using Weblate (Hungarian)
Currently translated at 100.0% (18 of 18 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/hu/
2021-01-07 02:26:22 +01:00
037d1993c8 Translated using Weblate (Polish)
Currently translated at 100.0% (18 of 18 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/pl/
2020-12-23 13:29:13 +01:00
2287ddc420 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!144
2020-12-20 18:54:48 +01:00
fde751a25f Merge branch 'check-installed-plugins' into 'dev'
Add isPluginInstalled function

See merge request turris/reforis/foris-js!143
2020-12-20 18:47:06 +01:00
79006cfb99 Bump v5.1.8 2020-12-19 00:25:44 +01:00
de398901f3 Add isPluginInstalled function 2020-12-19 00:14:05 +01:00
bea429d6ac Translated using Weblate (Dutch)
Currently translated at 5.5% (1 of 18 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/nl/
2020-11-29 20:29:03 +01:00
e818120986 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!142
2020-11-27 17:55:01 +01:00
56173d4959 Merge branch 'add-storage-link' into 'dev'
Add storage link

See merge request turris/reforis/foris-js!141
2020-11-27 17:09:55 +01:00
7c837d041e Bump v5.1.7 2020-11-27 15:37:07 +01:00
473c81f9a4 Add storage link 2020-11-27 15:37:02 +01:00
ba9abca5cf Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!140
2020-11-27 13:03:14 +01:00
15567a7dde Merge branch 'release-516' into 'dev'
Bump v5.1.6

Closes #18

See merge request turris/reforis/foris-js!139
2020-11-27 12:30:39 +01:00
96150fe230 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!137
2020-09-29 11:01:27 +02:00
187ecc54e5 Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!135
2020-09-25 17:53:36 +02:00
ef66fb43cc Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!131
2020-09-11 18:14:34 +02:00
03cf73be6e Merge branch 'dev' into 'master'
Dev

See merge request turris/reforis/foris-js!129
2020-09-11 17:50:07 +02:00
d2688532af Merge branch 'dev' into 'master'
Bump v5.1.2

See merge request turris/reforis/foris-js!127
2020-09-08 18:40:57 +02:00
ad99a2034d Merge branch 'dev' into 'master'
Add "inline" option to RadioSet

See merge request turris/reforis/foris-js!124
2020-08-31 18:24:42 +02:00
f1feffb4bb Merge branch 'dev' into 'master'
Release v5.1.0

See merge request turris/reforis/foris-js!122
2020-08-26 11:55:07 +02:00
074ddf8a8b Translated using Weblate (Spanish)
Currently translated at 100.0% (18 of 18 strings)

Translation: Turris/Foris JS
Translate-URL: https://hosted.weblate.org/projects/turris/foris-js/es/
2020-05-25 15:41:39 +02:00
139 changed files with 38807 additions and 17837 deletions

View File

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

1
.gitignore vendored
View File

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

View File

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

View File

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

525
CHANGELOG.md Normal file
View File

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

View File

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

36
docs/components/Logo.js Normal file
View File

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

3
docs/components/logo.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 349 B

View File

@ -1,15 +1,15 @@
Sooner or later you will face with situation when you want/need to make some
changes in the library. Then the most important tool for you it's
Sooner or later, you will face with situation when you want/need to make some
changes in the library. Then the most important tool for you it's the
[`npm link`](https://docs.npmjs.com/cli/link).
Please, notice that it will not work if you link library just from root of the
repo. It happens due to location of sources `./src`. You need to pack library
first `make pack` and then link it from `./dist` directory.
Please, notice that it will not work if you link the library just from the root
of the repo. It happens due to the location of sources `./src`. You need to pack
the library first, `make pack` and then link it from the `./dist` directory.
Yeah it's not such comfortable solution for development. But it can fixed by
writing small script similar as `make pack` but with linking every file and
directory from `./src` to the some directory and linking then from it. Notice
that you need to link `package.json` and `package-lock.json` as well.
Yeah, it's not such a comfortable solution for development. But it can be fixed
by writing a small script similar to making a pack but by linking every file and
directory from `./src` to the same directory and linking then from it. Notice
that you need to link a `package.json` and a `package-lock.json` as well.
So step by step:

4
docs/forisjs-npm.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

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

36
docs/introduction.md Normal file
View File

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

View File

@ -19,11 +19,9 @@ module.exports = {
collectCoverageFrom: ["src/**/*.{js,jsx}"],
coverageDirectory: "coverage",
testPathIgnorePatterns: ["/node_modules/", "/__fixtures__/", "/dist/"],
testEnvironment: "jsdom",
verbose: false,
setupFilesAfterEnv: [
"@testing-library/react/cleanup-after-each",
"<rootDir>/src/testUtils/setup",
],
setupFilesAfterEnv: ["<rootDir>/src/testUtils/setup"],
globals: {
TZ: "utc",
},

39829
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,7 +1,7 @@
{
"name": "foris",
"version": "5.1.6",
"description": "Set of components and utils for Foris and its plugins.",
"version": "6.6.2",
"description": "Foris JS library is a set of components and utils for reForis application and plugins.",
"author": "CZ.NIC, z.s.p.o.",
"repository": {
"type": "git",
@ -14,49 +14,52 @@
"license": "GPL-3.0",
"main": "./src/index.js",
"dependencies": {
"axios": "^0.19.2",
"immutability-helper": "3.0.1",
"moment": "^2.24.0",
"qrcode.react": "^0.9.3",
"react-datetime": "^3.0.4",
"react-uid": "^2.2.0"
"@fortawesome/fontawesome-svg-core": "^6.7.2",
"@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"@tanstack/react-table": "^8.21.2",
"axios": "^1.7.9",
"immutability-helper": "^3.1.1",
"moment": "^2.30.1",
"qrcode.react": "^4.2.0",
"react-datetime": "^3.3.1",
"react-uid": "^2.4.0"
},
"peerDependencies": {
"bootstrap": "4.4.1",
"prop-types": "15.7.2",
"bootstrap": "^5.3.3",
"prop-types": "15.8.1",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-router-dom": "^5.1.2"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.4",
"@fortawesome/fontawesome-free": "^5.13.0",
"@testing-library/react": "^8.0.9",
"babel-loader": "^8.1.0",
"@babel/cli": "^7.26.4",
"@babel/core": "^7.26.9",
"@babel/plugin-transform-runtime": "^7.26.9",
"@babel/preset-env": "^7.26.9",
"@babel/preset-react": "^7.26.3",
"@testing-library/react": "^12.1.5",
"babel-loader": "^9.2.1",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.5.0",
"css-loader": "^3.5.3",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-config-reforis": "^1.0.0",
"eslint-plugin-prettier": "^3.1.4",
"bootstrap": "^5.3.3",
"css-loader": "^7.1.2",
"eslint": "^8.57.0",
"eslint-config-reforis": "^2.1.1",
"file-loader": "^6.0.0",
"jest": "^25.2.0",
"jest-mock-axios": "^3.2.0",
"moment-timezone": "^0.5.28",
"prettier": "2.0.5",
"prop-types": "15.7.2",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-mock-axios": "^4.8.0",
"moment-timezone": "^0.5.47",
"prettier": "^3.5.2",
"prop-types": "15.8.1",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-router-dom": "^5.1.2",
"react-styleguidist": "^10.6.2",
"snapshot-diff": "^0.7.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0"
"react-styleguidist": "^12.0.1",
"snapshot-diff": "^0.10.0",
"style-loader": "^4.0.0",
"webpack": "^5.98.0"
},
"scripts": {
"lint": "eslint src",
@ -67,4 +70,4 @@
"docs": "npx styleguidist build ",
"docs:watch": "styleguidist server"
}
}
}

1
prettier.config.js Normal file
View File

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

View File

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

View File

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

View File

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

View File

@ -1,13 +1,16 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import React, { useRef, useEffect, useState } from "react";
import PropTypes from "prop-types";
import { useFocusTrap } from "../utils/hooks";
export const ALERT_TYPES = Object.freeze({
PRIMARY: "primary",
SECONDARY: "secondary",
@ -35,21 +38,44 @@ Alert.defaultProps = {
type: ALERT_TYPES.DANGER,
};
export function Alert({ type, onDismiss, children }) {
function Alert({ type, onDismiss, children }) {
const alertRef = useRef();
const [isVisible, setIsVisible] = useState(true);
useFocusTrap(alertRef, !!onDismiss);
useEffect(() => {
if (onDismiss) {
const timeout = setTimeout(() => setIsVisible(false), 7000);
return () => clearTimeout(timeout);
}
}, [onDismiss]);
const handleAnimationEnd = () => {
if (!isVisible && onDismiss) {
onDismiss();
}
};
return (
<div
className={`alert ${
ref={alertRef}
className={`alert alert-${type} ${isVisible ? "alert-fade-in" : "alert-slide-out-top"} ${
onDismiss ? "alert-dismissible" : ""
} alert-${type}`}
}`.trim()}
role="alert"
onAnimationEnd={handleAnimationEnd}
>
{onDismiss ? (
<button type="button" className="close" onClick={onDismiss}>
&times;
</button>
) : (
false
{onDismiss && (
<button
type="button"
className="btn-close"
onClick={() => setIsVisible(false)}
aria-label={_("Close")}
/>
)}
{children}
</div>
);
}
export default Alert;

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.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
Button.propTypes = {
@ -24,31 +25,28 @@ Button.propTypes = {
]).isRequired,
};
export function Button({
className,
loading,
forisFormSize,
children,
...props
}) {
let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
function Button({ className, loading, forisFormSize, children, ...props }) {
let buttonClass = className ? `btn ${className}` : "btn btn-primary";
if (forisFormSize) {
buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
buttonClass = `${buttonClass} col-12 col-md-3 col-lg-2`;
}
const span = loading ? (
<span
className="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
/>
) : null;
return (
<button type="button" className={buttonClass} {...props}>
{span}
{span ? " " : null}
{children}
<button
type="button"
className={`${buttonClass} d-inline-flex justify-content-center align-items-center`}
{...props}
>
{loading && (
<span
className="spinner-border spinner-border-sm me-1"
role="status"
aria-hidden="true"
/>
)}
<span>{children}</span>
</button>
);
}
export default Button;

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.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
import { useUID } from "react-uid";
@ -16,33 +17,36 @@ CheckBox.propTypes = {
helpText: PropTypes.string,
/** Control if checkbox is clickable */
disabled: PropTypes.bool,
/** Additional class name */
className: PropTypes.string,
};
CheckBox.defaultProps = {
disabled: false,
};
export function CheckBox({ label, helpText, disabled, ...props }) {
function CheckBox({ label, helpText, disabled, className, ...props }) {
const uid = useUID();
return (
<div className="form-group">
<div className="custom-control custom-checkbox ">
<input
className="custom-control-input"
type="checkbox"
id={uid}
disabled={disabled}
{...props}
/>
<label className="custom-control-label" htmlFor={uid}>
{label}
{helpText && (
<small className="form-text text-muted">
{helpText}
</small>
)}
</label>
</div>
<div className={`${className || "mb-3"} form-check`.trim()}>
<input
className="form-check-input"
type="checkbox"
id={uid}
disabled={disabled}
{...props}
/>
<label className="form-check-label" htmlFor={uid}>
{label}
</label>
{helpText && (
<div className="form-text">
<small>{helpText}</small>
</div>
)}
</div>
);
}
export default CheckBox;

View File

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

View File

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

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

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.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
DownloadButton.propTypes = {
@ -21,10 +22,17 @@ DownloadButton.defaultProps = {
className: "btn-primary",
};
export function DownloadButton({ href, className, children }) {
function DownloadButton({ href, className, children, ...props }) {
return (
<a href={href} className={`btn ${className}`.trim()} download>
<a
href={href}
className={`btn ${className}`.trim()}
{...props}
download
>
{children}
</a>
);
}
export default DownloadButton;

View File

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

View File

@ -6,6 +6,7 @@ All additional `props` are passed to the `<input type="email">` HTML component.
```js
import { useState } from "react";
import Button from "./Button";
const [email, setEmail] = useState("Wrong email");
<form onSubmit={(e) => e.preventDefault()}>
<EmailInput
@ -14,6 +15,6 @@ const [email, setEmail] = useState("Wrong email");
helpText="Read the small text!"
onChange={(event) => setEmail(event.target.value)}
/>
<button type="submit">Try to submit</button>
<Button type="submit">Try to submit</Button>
</form>;
```

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

View File

@ -1,13 +1,67 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import { useUID } from "react-uid";
import React, { forwardRef } from "react";
import PropTypes from "prop-types";
import { useUID } from "react-uid";
/** Base bootstrap input component. */
const Input = forwardRef(
(
{
type,
label,
helpText,
error,
className,
children,
labelClassName,
groupClassName,
...props
},
ref
) => {
const uid = useUID();
const inputClassName = `${className || ""} ${
error ? "is-invalid" : ""
}`.trim();
return (
<div className="mb-3">
<label
className={`form-label ${labelClassName || ""}`.trim()}
htmlFor={uid}
>
{label}
</label>
<div className={`input-group ${groupClassName || ""}`.trim()}>
<input
className={`form-control ${inputClassName}`.trim()}
type={type}
id={uid}
ref={ref}
{...props}
/>
{children}
</div>
{error && <div className="invalid-feedback">{error}</div>}
{helpText && (
<div className="form-text">
<small>{helpText}</small>
</div>
)}
</div>
);
}
);
Input.displayName = "Input";
Input.propTypes = {
type: PropTypes.string.isRequired,
@ -23,40 +77,4 @@ Input.propTypes = {
groupClassName: PropTypes.string,
};
/** Base bootstrap input component. */
export function Input({
type,
label,
helpText,
error,
className,
children,
labelClassName,
groupClassName,
...props
}) {
const uid = useUID();
const inputClassName = `form-control ${className || ""} ${
error ? "is-invalid" : ""
}`.trim();
return (
<div className="form-group">
<label className={labelClassName} htmlFor={uid}>
{label}
</label>
<div className={`input-group ${groupClassName || ""}`.trim()}>
<input
className={inputClassName}
type={type}
id={uid}
{...props}
/>
{children}
</div>
{error ? <div className="invalid-feedback">{error}</div> : null}
{helpText ? (
<small className="form-text text-muted">{helpText}</small>
) : null}
</div>
);
}
export default Input;

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.
* See /LICENSE for more information.
*/
import React, { useRef, useEffect } from "react";
import PropTypes from "prop-types";
import { Portal } from "../utils/Portal";
import { useClickOutside } from "../utils/hooks";
import { useClickOutside, useFocusTrap } from "../utils/hooks";
import Portal from "../utils/Portal";
import "./Modal.css";
Modal.propTypes = {
@ -28,10 +29,11 @@ Modal.propTypes = {
};
export function Modal({ shown, setShown, scrollable, size, children }) {
const dialogRef = useRef();
const modalRef = useRef();
let modalSize = "modal-";
useClickOutside(dialogRef, () => setShown(false));
useClickOutside(modalRef, () => setShown(false));
useFocusTrap(modalRef, shown);
useEffect(() => {
const handleEsc = (event) => {
@ -64,12 +66,14 @@ export function Modal({ shown, setShown, scrollable, size, children }) {
return (
<Portal containerId="modal-container">
<div
ref={modalRef}
className={`modal fade ${shown ? "show" : ""}`.trim()}
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<div
ref={dialogRef}
className={`modal-dialog ${modalSize} modal-dialog-centered ${
className={`${modalSize.trim()} modal-dialog modal-dialog-centered ${
scrollable ? "modal-dialog-scrollable" : ""
}`.trim()}
role="document"
@ -84,19 +88,21 @@ export function Modal({ shown, setShown, scrollable, size, children }) {
ModalHeader.propTypes = {
setShown: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
showCloseButton: PropTypes.bool,
};
export function ModalHeader({ setShown, title }) {
export function ModalHeader({ setShown, title, showCloseButton = true }) {
return (
<div className="modal-header">
<h5 className="modal-title">{title}</h5>
<button
type="button"
className="close"
onClick={() => setShown(false)}
>
<span aria-hidden="true">&times;</span>
</button>
<h1 className="modal-title fs-5">{title}</h1>
{showCloseButton && (
<button
type="button"
className="btn-close"
onClick={() => setShown(false)}
aria-label={_("Close")}
/>
)}
</div>
);
}

View File

@ -1,15 +1,18 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import PropTypes from "prop-types";
import Input from "./Input";
import { useConditionalTimeout } from "../utils/hooks";
import { Input } from "./Input";
import "./NumberInput.css";
NumberInput.propTypes = {
@ -23,7 +26,7 @@ NumberInput.propTypes = {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Function called when value changes. */
onChange: PropTypes.func.isRequired,
/** Additional description dispaled to the right of input value. */
/** Additional description displayed to the right of input value. */
inlineText: PropTypes.string,
};
@ -31,7 +34,7 @@ NumberInput.defaultProps = {
value: 0,
};
export function NumberInput({ onChange, inlineText, value, ...props }) {
function NumberInput({ onChange, inlineText, value, ...props }) {
function updateValue(initialValue, difference) {
onChange({ target: { value: initialValue + difference } });
}
@ -47,29 +50,61 @@ export function NumberInput({ onChange, inlineText, value, ...props }) {
-1
);
function handleKeyDown(event, enableFunction) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
enableFunction(true);
}
}
function handleKeyUp(event, enableFunction) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
enableFunction(false);
}
}
return (
<Input type="number" onChange={onChange} value={value} {...props}>
<div className="input-group-append">
{inlineText && <p className="input-group-text">{inlineText}</p>}
<button
type="button"
className="btn btn-outline-secondary"
onMouseDown={() => enableIncrease(true)}
onMouseUp={() => enableIncrease(false)}
aria-label="Increase"
>
<i className="fas fa-plus" />
</button>
<button
type="button"
className="btn btn-outline-secondary"
onMouseDown={() => enableDecrease(true)}
onMouseUp={() => enableDecrease(false)}
aria-label="Decrease"
>
<i className="fas fa-minus" />
</button>
</div>
{inlineText && (
<span className="input-group-text">{inlineText}</span>
)}
<button
type="button"
className="btn btn-outline-secondary"
onMouseDown={() => enableIncrease(true)}
onMouseUp={() => enableIncrease(false)}
onMouseLeave={() => enableIncrease(false)}
onTouchStart={() => enableIncrease(true)}
onTouchEnd={() => enableIncrease(false)}
onTouchCancel={() => enableIncrease(false)}
onKeyDown={(event) => handleKeyDown(event, enableIncrease)}
onKeyUp={(event) => handleKeyUp(event, enableIncrease)}
onBlur={() => enableIncrease(false)}
title={_("Increase value. Hint: Hold to increase faster.")}
aria-label={_("Increase value. Hint: Hold to increase faster.")}
>
<FontAwesomeIcon icon={faPlus} />
</button>
<button
type="button"
className="btn btn-outline-secondary"
onMouseDown={() => enableDecrease(true)}
onMouseUp={() => enableDecrease(false)}
onMouseLeave={() => enableDecrease(false)}
onTouchStart={() => enableDecrease(true)}
onTouchEnd={() => enableDecrease(false)}
onTouchCancel={() => enableDecrease(false)}
onKeyDown={(event) => handleKeyDown(event, enableDecrease)}
onKeyUp={(event) => handleKeyUp(event, enableDecrease)}
onBlur={() => enableDecrease(false)}
title={_("Decrease value. Hint: Hold to decrease faster.")}
aria-label={_("Decrease value. Hint: Hold to decrease faster.")}
>
<FontAwesomeIcon icon={faMinus} />
</button>
</Input>
);
}
export default NumberInput;

View File

@ -1,14 +1,17 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React, { useState } from "react";
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import PropTypes from "prop-types";
import { Input } from "./Input";
import Input from "./Input";
PasswordInput.propTypes = {
/** Field label. */
@ -21,34 +24,37 @@ PasswordInput.propTypes = {
helpText: PropTypes.string,
/** Use show/hide password button. */
withEye: PropTypes.bool,
/** Use new-password in autocomplete attribute. */
newPass: PropTypes.bool,
};
export function PasswordInput({ withEye, ...props }) {
function PasswordInput({ withEye, newPass, ...props }) {
const [isHidden, setHidden] = useState(true);
return (
<Input
type={withEye && !isHidden ? "text" : "password"}
autoComplete={isHidden ? "new-password" : null}
autoComplete={newPass ? "new-password" : "current-password"}
{...props}
>
{withEye ? (
<div className="input-group-append">
<button
type="button"
className="input-group-text"
onClick={(e) => {
e.preventDefault();
setHidden((shouldBeHidden) => !shouldBeHidden);
}}
>
<i
className={`fa ${
isHidden ? "fa-eye" : "fa-eye-slash"
}`}
/>
</button>
</div>
) : null}
{withEye && (
<button
type="button"
className="input-group-text"
onClick={(e) => {
e.preventDefault();
setHidden((shouldBeHidden) => !shouldBeHidden);
}}
>
<FontAwesomeIcon
icon={isHidden ? faEye : faEyeSlash}
style={{ width: "1.25rem" }}
className="text-secondary"
/>
</button>
)}
</Input>
);
}
export default PasswordInput;

48
src/bootstrap/Radio.js Normal file
View File

@ -0,0 +1,48 @@
/*
* Copyright (C) 2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
Radio.propTypes = {
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
PropTypes.node,
PropTypes.arrayOf(PropTypes.node),
]).isRequired,
id: PropTypes.string.isRequired,
inline: PropTypes.bool,
helpText: PropTypes.string,
className: PropTypes.string,
};
function Radio({ label, id, helpText, inline, className, ...props }) {
return (
<div
className={`${className || "mb-3"} ${inline ? "form-check form-check-inline" : ""}`.trim()}
>
<input
id={id}
className="form-check-input me-2"
type="radio"
{...props}
/>
<label className="form-check-label" htmlFor={id}>
{label}
{helpText && (
<div className="form-text">
<small>{helpText}</small>
</div>
)}
</label>
</div>
);
}
export default Radio;

View File

@ -1,14 +1,17 @@
/*
* Copyright (C) 2020 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2020-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
import { useUID } from "react-uid";
import Radio from "./Radio";
RadioSet.propTypes = {
/** Name attribute of the input HTML tag. */
name: PropTypes.string.isRequired,
@ -17,7 +20,7 @@ RadioSet.propTypes = {
/** Choices . */
choices: PropTypes.arrayOf(
PropTypes.shape({
/** Choice lable . */
/** Choice label . */
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
@ -36,15 +39,7 @@ RadioSet.propTypes = {
inline: PropTypes.bool,
};
export function RadioSet({
name,
label,
choices,
value,
helpText,
inline,
...props
}) {
function RadioSet({ name, label, choices, value, helpText, inline, ...props }) {
const uid = useUID();
const radios = choices.map((choice, key) => {
const id = `${name}-${key}`;
@ -64,7 +59,7 @@ export function RadioSet({
});
return (
<div className="form-group">
<div className="mb-3">
{label && (
<label htmlFor={uid} className="d-block">
{label}
@ -72,47 +67,12 @@ export function RadioSet({
)}
{radios}
{helpText && (
<small className="form-text text-muted">{helpText}</small>
<div className="form-text">
<small>{helpText}</small>
</div>
)}
</div>
);
}
Radio.propTypes = {
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
PropTypes.node,
PropTypes.arrayOf(PropTypes.node),
]).isRequired,
id: PropTypes.string.isRequired,
inline: PropTypes.bool,
helpText: PropTypes.string,
};
export function Radio({ label, id, helpText, inline, ...props }) {
return (
<>
<div
className={`custom-control custom-radio ${
inline ? "custom-control-inline" : ""
}`.trim()}
>
<input
id={id}
className="custom-control-input"
type="radio"
{...props}
/>
<label className="custom-control-label" htmlFor={id}>
{label}
</label>
{helpText && (
<small className="form-text text-muted mt-0 mb-3">
{helpText}
</small>
)}
</div>
</>
);
}
export default RadioSet;

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.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
import { useUID } from "react-uid";
@ -20,25 +21,30 @@ Select.propTypes = {
helpText: PropTypes.string,
};
export function Select({ label, choices, helpText, ...props }) {
function Select({ label, choices, helpText, ...props }) {
const uid = useUID();
const options = Object.keys(choices)
.sort((a, b) => a - b || a.toString().localeCompare(b.toString()))
.map((key) => (
<option key={key} value={key}>
{choices[key]}
</option>
));
const options = Object.keys(choices).map((choice) => (
<option key={choice} value={choice}>
{choices[choice]}
</option>
));
return (
<div className="form-group">
<label htmlFor={uid}>{label}</label>
<select className="custom-select" id={uid} {...props}>
<div className="mb-3">
<label className="form-label" htmlFor={uid}>
{label}
</label>
<select className="form-select" id={uid} {...props}>
{options}
</select>
{helpText ? (
<small className="form-text text-muted">{helpText}</small>
) : null}
{helpText && (
<div className="form-text">
<small>{helpText}</small>
</div>
)}
</div>
);
}
export default Select;

View File

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

View File

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

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.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
import { useUID } from "react-uid";
@ -18,32 +19,35 @@ Switch.propTypes = {
]).isRequired,
helpText: PropTypes.string,
switchHeading: PropTypes.bool,
className: PropTypes.string,
};
export function Switch({ label, helpText, switchHeading, ...props }) {
function Switch({ label, helpText, switchHeading, className, ...props }) {
const uid = useUID();
return (
<div className={`form-group ${switchHeading ? "switch" : ""}`.trim()}>
<div
className={`custom-control custom-switch ${
!helpText ? "custom-control-inline" : ""
} ${switchHeading ? "switch-heading" : ""}`.trim()}
>
<input
type="checkbox"
className="custom-control-input"
id={uid}
{...props}
/>
<label className="custom-control-label" htmlFor={uid}>
{label}
</label>
{helpText && (
<small className="form-text text-muted mt-0 mb-3">
{helpText}
</small>
)}
</div>
<div
className={`form-check form-switch ${className || "mb-3"} ${
switchHeading ? "d-flex align-items-center" : ""
}`.trim()}
>
<input
type="checkbox"
className={`form-check-input ${switchHeading ? "me-2" : ""}`.trim()}
role="switch"
id={uid}
{...props}
/>
<label className="form-check-label" htmlFor={uid}>
{label}
</label>
{helpText && (
<div className="form-text">
<small>{helpText}</small>
</div>
)}
</div>
);
}
export default Switch;

5
src/bootstrap/Switch.md Normal file
View File

@ -0,0 +1,5 @@
Switch example:
```js
<Switch label="Enable Switch" helpText="Toggle that 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.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
import { Input } from "./Input";
import Input from "./Input";
export const TextInput = ({ ...props }) => <Input type="text" {...props} />;
function TextInput({ ...props }) {
return <Input type="text" {...props} />;
}
TextInput.propTypes = {
/** Field label. */
@ -20,3 +23,5 @@ TextInput.propTypes = {
/** Help text message. */
helpText: PropTypes.string,
};
export default TextInput;

View File

@ -0,0 +1,42 @@
/*
* Copyright (C) 2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import PropTypes from "prop-types";
import Button from "./Button";
ThreeDotsMenu.propTypes = {
/** Menu items. */
children: PropTypes.arrayOf(PropTypes.node).isRequired,
};
function ThreeDotsMenu({ children, ...props }) {
return (
<div className="dropdown position-static" {...props}>
<Button
className="btn-sm btn-link text-body"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<FontAwesomeIcon icon={faEllipsisVertical} />
</Button>
<ul className="dropdown-menu">
{children.map((child) => (
<li key={child.key || child.props.id || Math.random()}>
{child}
</li>
))}
</ul>
</div>
);
}
export default ThreeDotsMenu;

View File

@ -0,0 +1,40 @@
ThreeDotsMenu Bootstrap component is a dropdown menu that appears when the user
clicks on three dots. It is used to display a list of actions that can be
performed on a particular item.
```js
import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
const threeDotsMenuItems = [
{
text: "Edit",
icon: faEdit,
onClick: () => {
alert("Edit clicked");
},
},
{
text: "Delete",
icon: faTrash,
onClick: () => {
alert("Delete clicked");
},
},
];
<ThreeDotsMenu>
{threeDotsMenuItems.map((item, index) => (
<button key={index} onClick={item.onClick} className="dropdown-item">
<FontAwesomeIcon
icon={item.icon}
className="me-1"
width="1rem"
size="sm"
/>
{item.text}
</button>
))}
</ThreeDotsMenu>;
```

View File

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
@ -7,9 +7,9 @@
import React from "react";
import { render, fireEvent, getByLabelText, wait } from "customTestRender";
import { render, fireEvent, getByLabelText, waitFor } from "customTestRender";
import { NumberInput } from "../NumberInput";
import NumberInput from "../NumberInput";
describe("<NumberInput/>", () => {
const onChangeMock = jest.fn();
@ -32,17 +32,17 @@ describe("<NumberInput/>", () => {
});
it("Increase number with button", async () => {
const increaseButton = getByLabelText(componentContainer, "Increase");
const increaseButton = getByLabelText(componentContainer, /Increase/);
fireEvent.mouseDown(increaseButton);
await wait(() =>
await waitFor(() =>
expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } })
);
});
it("Decrease number with button", async () => {
const decreaseButton = getByLabelText(componentContainer, "Decrease");
const decreaseButton = getByLabelText(componentContainer, /Decrease/);
fireEvent.mouseDown(decreaseButton);
await wait(() =>
await waitFor(() =>
expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } })
);
});

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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.
* See /LICENSE for more information.
*/
/** Bootstrap column size for form fields */
// eslint-disable-next-line import/prefer-default-export
export const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-3";
export const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";
const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-4";
const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";
export { formFieldsSize, buttonFormFieldsSize };

View File

@ -0,0 +1,135 @@
/*
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { useAPIPost } from "../../api/hooks";
import { API_STATE } from "../../api/utils";
import Button from "../../bootstrap/Button";
import {
Modal,
ModalHeader,
ModalBody,
ModalFooter,
} from "../../bootstrap/Modal";
import { useAlert } from "../../context/alertContext/AlertContext";
ActionButtonWithModal.propTypes = {
/** Component that triggers the action. */
actionTrigger: PropTypes.elementType.isRequired,
/** URL to send the action to. */
actionUrl: PropTypes.string.isRequired,
/** Title of the modal. */
modalTitle: PropTypes.string.isRequired,
/** Message of the modal. */
modalMessage: PropTypes.string.isRequired,
/** Text of the action button in the modal. */
modalActionText: PropTypes.string,
/** Props for the action button in the modal. */
modalActionProps: PropTypes.object,
/** Message to display on successful action. */
successMessage: PropTypes.string,
/** Message to display on failed action. */
errorMessage: PropTypes.string,
};
function ActionButtonWithModal({
actionTrigger: ActionTriggerComponent,
actionUrl,
modalTitle,
modalMessage,
modalActionText,
modalActionProps,
successMessage,
errorMessage,
}) {
const [triggered, setTriggered] = useState(false);
const [modalShown, setModalShown] = useState(false);
const [triggerActionStatus, triggerAction] = useAPIPost(actionUrl);
const [setAlert] = useAlert();
useEffect(() => {
if (triggerActionStatus.state === API_STATE.SUCCESS) {
setAlert(
successMessage || _("Action successful."),
API_STATE.SUCCESS
);
}
if (triggerActionStatus.state === API_STATE.ERROR) {
setAlert(errorMessage || _("Action failed."));
}
}, [triggerActionStatus, setAlert, successMessage, errorMessage]);
const actionHandler = () => {
setTriggered(true);
triggerAction();
setModalShown(false);
};
return (
<>
<ActionModal
shown={modalShown}
setShown={setModalShown}
onAction={actionHandler}
title={modalTitle}
message={modalMessage}
actionText={modalActionText}
actionProps={modalActionProps}
/>
<ActionTriggerComponent
loading={triggered}
disabled={triggered}
onClick={() => setModalShown(true)}
/>
</>
);
}
ActionModal.propTypes = {
shown: PropTypes.bool.isRequired,
setShown: PropTypes.func.isRequired,
onAction: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
message: PropTypes.string.isRequired,
actionText: PropTypes.string,
actionProps: PropTypes.object,
};
function ActionModal({
shown,
setShown,
onAction,
title,
message,
actionText,
actionProps,
}) {
return (
<Modal shown={shown} setShown={setShown}>
<ModalHeader setShown={setShown} title={title} />
<ModalBody>
<p className="mb-0">{message}</p>
</ModalBody>
<ModalFooter>
<Button
className="btn-secondary"
onClick={() => setShown(false)}
>
{_("Cancel")}
</Button>
<Button onClick={onAction} {...actionProps}>
{actionText || _("Confirm")}
</Button>
</ModalFooter>
</Modal>
);
}
export default ActionButtonWithModal;

View File

@ -0,0 +1,39 @@
RebootButton component is a button that opens a modal dialog to confirm the
reboot of the device.
## Usage
```jsx
import React, { useEffect, createContext } from "react";
import Button from "../../bootstrap/Button";
import { AlertContextProvider } from "../../context/alertContext/AlertContext";
import ActionButtonWithModal from "./ActionButtonWithModal";
window.AlertContext = React.createContext();
const RebootButtonExample = () => {
const ActionButton = (props) => {
return <Button {...props}>Action</Button>;
};
return (
<AlertContextProvider>
<div id="modal-container" />
<div id="alert-container" />
<ActionButtonWithModal
actionTrigger={ActionButton}
actionUrl="/reforis/api/action"
modalTitle="Warning!"
modalMessage="Are you sure you want to perform this action?"
modalActionText="Confirm action"
modalActionProps={{ className: "btn-danger" }}
successMessage="Action request succeeded."
errorMessage="Action request failed."
/>
</AlertContextProvider>
);
};
<RebootButtonExample />;
```

View File

@ -1,78 +0,0 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { useAPIPost } from "../api/hooks";
import { API_STATE } from "../api/utils";
import { ForisURLs } from "../utils/forisUrls";
import { Button } from "../bootstrap/Button";
import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
import { useAlert } from "../alertContext/AlertContext";
export function RebootButton(props) {
const [triggered, setTriggered] = useState(false);
const [modalShown, setModalShown] = useState(false);
const [triggerRebootStatus, triggerReboot] = useAPIPost(ForisURLs.reboot);
const [setAlert] = useAlert();
useEffect(() => {
if (triggerRebootStatus.state === API_STATE.ERROR) {
setAlert(_("Reboot request failed."));
}
});
function rebootHandler() {
setTriggered(true);
triggerReboot();
setModalShown(false);
}
return (
<>
<RebootModal
shown={modalShown}
setShown={setModalShown}
onReboot={rebootHandler}
/>
<Button
className="btn-danger"
loading={triggered}
disabled={triggered}
onClick={() => setModalShown(true)}
{...props}
>
{_("Reboot")}
</Button>
</>
);
}
RebootModal.propTypes = {
shown: PropTypes.bool.isRequired,
setShown: PropTypes.func.isRequired,
onReboot: PropTypes.func.isRequired,
};
function RebootModal({ shown, setShown, onReboot }) {
return (
<Modal shown={shown} setShown={setShown}>
<ModalHeader setShown={setShown} title={_("Warning!")} />
<ModalBody>
<p>{_("Are you sure you want to restart the router?")}</p>
</ModalBody>
<ModalFooter>
<Button onClick={() => setShown(false)}>{_("Cancel")}</Button>
<Button className="btn-danger" onClick={onReboot}>
{_("Confirm reboot")}
</Button>
</ModalFooter>
</Modal>
);
}

View File

@ -0,0 +1,81 @@
/*
* Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React, { useMemo, useState } from "react";
import {
flexRender,
getCoreRowModel,
getSortedRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import PropTypes from "prop-types";
import RichTableBody from "./RichTableBody";
import RichTableHeader from "./RichTableHeader";
import RichTablePagination from "./RichTablePagination";
RichTable.propTypes = {
/** Columns to be displayed in the table */
columns: PropTypes.array.isRequired,
/** Data to be displayed in the table, must be passed as a stable reference, for example, useState */
data: PropTypes.array.isRequired,
/** Whether to display pagination */
withPagination: PropTypes.bool,
/** Number of rows per page, the default is 5 */
pageSize: PropTypes.number,
/** Index of the current page */
pageIndex: PropTypes.number,
};
export default function RichTable({
columns,
data,
withPagination,
pageSize = 5,
pageIndex = 0,
}) {
const tableColumns = useMemo(() => columns, [columns]);
const [sorting, setSorting] = useState([]);
const [pagination, setPagination] = useState({
pageIndex,
pageSize,
});
const table = useReactTable({
data,
columns: tableColumns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onPaginationChange: setPagination,
onSortingChange: setSorting,
state: {
sorting,
pagination,
},
});
const paginationIsNeeded = data.length > pageSize && withPagination;
return (
<div className="table-responsive">
<table className="table table-hover text-nowrap">
<RichTableHeader table={table} flexRender={flexRender} />
<RichTableBody table={table} flexRender={flexRender} />
</table>
{paginationIsNeeded && (
<RichTablePagination
table={table}
tablePageSize={pageSize}
allRows={data.length}
/>
)}
</div>
);
}

View File

@ -0,0 +1,135 @@
### Description
Rich Table is a table component based on
[Tanstack React Table](https://tanstack.com/table/). It adds some features to
the table component, such as:
- **Pagination**: The table can be paginated.
- **Sorting**: The table can be sorted by columns.
- **Row Expansion**: The table rows can be expanded. (To be implemented)
### Example
```js
import RichTable from "./RichTable";
const columns = [
{
header: "Name",
accessorKey: "name",
},
{
header: "Surname",
accessorKey: "surname",
},
{
header: "Age",
accessorKey: "age",
},
{
header: "Phone",
accessorKey: "phone",
},
];
const data = [
{
name: "John",
surname: "Coltrane",
age: 30,
phone: "123456789",
},
{
name: "Jane",
surname: "Doe",
age: 25,
phone: "987654321",
},
{
name: "Alice",
surname: "Smith",
age: 35,
phone: "123456789",
},
{
name: "Bob",
surname: "Smith",
age: 40,
phone: "987654321",
},
{
name: "Charlie",
surname: "Brown",
age: 45,
phone: "123456789",
},
{
name: "Daisy",
surname: "Brown",
age: 50,
phone: "987654321",
},
{
name: "Eve",
surname: "Johnson",
age: 55,
phone: "123456789",
},
{
name: "Frank",
surname: "Johnson",
age: 60,
phone: "987654321",
},
{
name: "Grace",
surname: "Williams",
age: 65,
phone: "123456789",
},
{
name: "Henry",
surname: "Williams",
age: 70,
phone: "987654321",
},
{
name: "Ivy",
surname: "Brown",
age: 75,
phone: "123456789",
},
{
name: "Jack",
surname: "Brown",
age: 80,
phone: "987654321",
},
{
name: "Kelly",
surname: "Johnson",
age: 85,
phone: "123456789",
},
{
name: "Liam",
surname: "Johnson",
age: 90,
phone: "987654321",
},
{
name: "Mia",
surname: "Williams",
age: 95,
phone: "123456789",
},
{
name: "Nathan",
surname: "Williams",
age: 100,
phone: "987654321",
},
];
<RichTable columns={columns} data={data} withPagination />;
```

View File

@ -0,0 +1,48 @@
/*
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import propTypes from "prop-types";
RichTableBody.propTypes = {
table: propTypes.shape({
getRowModel: propTypes.func.isRequired,
}).isRequired,
flexRender: propTypes.func.isRequired,
};
function RichTableBody({ table, flexRender }) {
return (
<tbody>
{table.getRowModel().rows.map((row) => {
return (
<tr key={row.id} className="align-middle">
{row.getVisibleCells().map((cell) => {
return (
<td
key={cell.id}
{...(cell.column.columnDef.className && {
className:
cell.column.columnDef.className,
})}
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
);
})}
</tr>
);
})}
</tbody>
);
}
export default RichTableBody;

View File

@ -0,0 +1,96 @@
/*
* Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import {
faSquareCaretUp,
faSquareCaretDown,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import propTypes from "prop-types";
RichTableHeader.propTypes = {
table: propTypes.shape({
getHeaderGroups: propTypes.func.isRequired,
}).isRequired,
flexRender: propTypes.func.isRequired,
};
function RichTableHeader({ table, flexRender }) {
const getThTitle = (header) => {
if (!header.column.getCanSort()) return undefined;
const nextSortingOrder = header.column.getNextSortingOrder();
if (nextSortingOrder === "asc") return _("Sort ascending");
if (nextSortingOrder === "desc") return _("Sort descending");
return _("Clear sort");
};
return (
<thead className="table-light">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id} role="row">
{headerGroup.headers.map((header) => (
<th
key={header.id}
colSpan={header.colSpan}
{...(header.column.columnDef.headerClassName && {
className:
header.column.columnDef.headerClassName,
})}
>
{header.isPlaceholder ||
header.column.columnDef.headerIsHidden ? (
<div className="d-none" aria-hidden="true">
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</div>
) : (
<button
type="button"
className={`btn btn-link text-decoration-none text-reset fw-bold p-0 d-flex align-items-center
${
header.column.getCanSort()
? "d-flex align-items-center"
: ""
}
`}
onClick={header.column.getToggleSortingHandler()}
title={getThTitle(header)}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{{
asc: (
<FontAwesomeIcon
icon={faSquareCaretUp}
className="ms-1 text-primary"
/>
),
desc: (
<FontAwesomeIcon
icon={faSquareCaretDown}
className="ms-1 text-primary"
/>
),
}[header.column.getIsSorted()] ?? null}
</button>
)}
</th>
))}
</tr>
))}
</thead>
);
}
export default RichTableHeader;

View File

@ -0,0 +1,128 @@
/*
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React, { useMemo } from "react";
import {
faAngleLeft,
faAnglesLeft,
faAngleRight,
faAnglesRight,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import propTypes from "prop-types";
RichTablePagination.propTypes = {
table: propTypes.shape({
getState: propTypes.func.isRequired,
getCanPreviousPage: propTypes.func.isRequired,
getCanNextPage: propTypes.func.isRequired,
firstPage: propTypes.func.isRequired,
previousPage: propTypes.func.isRequired,
nextPage: propTypes.func.isRequired,
lastPage: propTypes.func.isRequired,
setPageSize: propTypes.func.isRequired,
getPageCount: propTypes.func.isRequired,
}).isRequired,
tablePageSize: propTypes.number,
allRows: propTypes.number,
};
function RichTablePagination({ table, tablePageSize, allRows }) {
const { pagination } = table.getState();
const prevPagBtnDisabled = !table.getCanPreviousPage();
const nextPagBtnDisabled = !table.getCanNextPage();
const pageSizes = useMemo(() => {
return [tablePageSize ?? 5, 10, 25].filter(
(value, index, self) => self.indexOf(value) === index
);
}, [tablePageSize]);
const renderPaginationButton = (icon, ariaLabel, onClick, disabled) => (
<li
className={`page-item ${disabled ? "disabled" : ""}`}
style={{ cursor: disabled ? "not-allowed" : "pointer" }}
>
<button
type="button"
className="page-link"
aria-label={ariaLabel}
onClick={onClick}
disabled={disabled}
>
<FontAwesomeIcon icon={icon} />
</button>
</li>
);
return (
<nav
aria-label={_("Pagination navigation bar")}
className="d-flex gap-2 justify-content-start align-items-center mx-2 mb-1 text-nowrap"
>
<ul className="pagination pagination-sm mb-0">
{renderPaginationButton(
faAnglesLeft,
_("First page"),
() => table.firstPage(),
prevPagBtnDisabled
)}
{renderPaginationButton(
faAngleLeft,
_("Previous page"),
() => table.previousPage(),
prevPagBtnDisabled
)}
{renderPaginationButton(
faAngleRight,
_("Next page"),
() => table.nextPage(),
nextPagBtnDisabled
)}
{renderPaginationButton(
faAnglesRight,
_("Last page"),
() => table.lastPage(),
nextPagBtnDisabled
)}
</ul>
<span>
{_("Page")}&nbsp;
<span className="fw-bold">
{pagination.pageIndex + 1}
&nbsp;{_("of")}&nbsp;
{table.getPageCount().toLocaleString()}
</span>
</span>
<div
className="vr mx-1 align-self-center"
style={{ height: "1.5rem" }}
/>
<span>{_("Rows per page:")}</span>
<select
className="form-select form-select-sm w-auto"
aria-label={_("Select rows per page")}
value={pagination.pageSize}
onChange={(e) => {
table.setPageSize(Number(e.target.value));
}}
>
{pageSizes.map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
<option key={allRows} value={allRows}>
{_("All")}
</option>
</select>
</nav>
);
}
export default RichTablePagination;

View File

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

View File

@ -1,21 +1,22 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
import { Switch } from "../../bootstrap/Switch";
import { CheckBox } from "../../bootstrap/CheckBox";
import { PasswordInput } from "../../bootstrap/PasswordInput";
import { RadioSet } from "../../bootstrap/RadioSet";
import { Select } from "../../bootstrap/Select";
import { TextInput } from "../../bootstrap/TextInput";
import WiFiQRCode from "./WiFiQRCode";
import { HELP_TEXTS, HTMODES, BANDS, ENCRYPTIONMODES } from "./constants";
import WifiGuestForm from "./WiFiGuestForm";
import { HELP_TEXTS, HTMODES, HWMODES } from "./constants";
import WiFiQRCode from "./WiFiQRCode";
import PasswordInput from "../../bootstrap/PasswordInput";
import RadioSet from "../../bootstrap/RadioSet";
import Select from "../../bootstrap/Select";
import Switch from "../../bootstrap/Switch";
import TextInput from "../../bootstrap/TextInput";
WiFiForm.propTypes = {
formData: PropTypes.shape({ devices: PropTypes.arrayOf(PropTypes.object) })
@ -59,10 +60,13 @@ DeviceForm.propTypes = {
SSID: PropTypes.string.isRequired,
password: PropTypes.string.isRequired,
hidden: PropTypes.bool.isRequired,
hwmode: PropTypes.string.isRequired,
band: PropTypes.string.isRequired,
htmode: PropTypes.string.isRequired,
channel: PropTypes.string.isRequired,
guest_wifi: PropTypes.object.isRequired,
encryption: PropTypes.string.isRequired,
available_bands: PropTypes.array.isRequired,
ieee80211w_disabled: PropTypes.bool,
}),
formErrors: PropTypes.object.isRequired,
setFormValue: PropTypes.func.isRequired,
@ -86,10 +90,11 @@ function DeviceForm({
...props
}) {
const deviceID = formData.id;
const bnds = formData.available_bands;
return (
<>
<Switch
label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
label={<h2 className="mb-0">{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
checked={formData.enabled}
onChange={setFormValue((value) => ({
devices: {
@ -99,7 +104,7 @@ function DeviceForm({
switchHeading
{...props}
/>
{formData.enabled ? (
{formData.enabled && (
<>
<TextInput
label="SSID"
@ -116,17 +121,15 @@ function DeviceForm({
}))}
{...props}
>
<div className="input-group-append">
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
</div>
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
</TextInput>
<PasswordInput
withEye
label="Password"
label={_("Password")}
value={formData.password}
error={formErrors.password}
helpText={HELP_TEXTS.password}
@ -139,8 +142,8 @@ function DeviceForm({
{...props}
/>
<CheckBox
label="Hide SSID"
<Switch
label={_("Hide SSID")}
helpText={HELP_TEXTS.hidden}
checked={formData.hidden}
onChange={setFormValue((value) => ({
@ -152,25 +155,35 @@ function DeviceForm({
/>
<RadioSet
name={`hwmode-${deviceID}`}
label="GHz"
choices={getHwmodeChoices(formData)}
value={formData.hwmode}
helpText={HELP_TEXTS.hwmode}
name={`band-${deviceID}`}
label={_("Band")}
choices={getBandChoices(formData)}
value={formData.band}
helpText={HELP_TEXTS.band}
inline
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: {
hwmode: { $set: value },
channel: { $set: "0" },
onChange={setFormValue((value) => {
// Find the selected band
const selectedBand = bnds.find(
(band) => band.band === value
);
// Get the last item in the available HT modes for the selected band
const bestHtmode =
selectedBand.available_htmodes.slice(-1)[0];
return {
devices: {
[deviceIndex]: {
band: { $set: value },
channel: { $set: "0" },
htmode: { $set: bestHtmode },
},
},
},
}))}
};
})}
{...props}
/>
<Select
label="802.11n/ac mode"
label={_("802.11n/ac/ax mode")}
choices={getHtmodeChoices(formData)}
value={formData.htmode}
helpText={HELP_TEXTS.htmode}
@ -183,7 +196,7 @@ function DeviceForm({
/>
<Select
label="Channel"
label={_("Channel")}
choices={getChannelChoices(formData)}
value={formData.channel}
onChange={setFormValue((value) => ({
@ -194,6 +207,38 @@ function DeviceForm({
{...props}
/>
<Select
label={_("Encryption")}
choices={getEncryptionChoices(formData)}
helpText={HELP_TEXTS.wpa3}
value={formData.encryption}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: { encryption: { $set: value } },
},
}))}
{...props}
/>
{(formData.encryption === "WPA3" ||
formData.encryption === "WPA2/3") && (
<Switch
label={_("Disable Management Frame Protection")}
helpText={_(
"In case you have trouble connecting to WiFi Access Point, try disabling Management Frame Protection."
)}
checked={formData.ieee80211w_disabled}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: {
ieee80211w_disabled: { $set: value },
},
},
}))}
{...props}
/>
)}
{hasGuestNetwork && (
<WifiGuestForm
formData={{
@ -206,8 +251,8 @@ function DeviceForm({
/>
)}
</>
) : null}
{divider ? <hr /> : null}
)}
{divider && <hr />}
</>
);
}
@ -218,14 +263,14 @@ function getChannelChoices(device) {
};
device.available_bands.forEach((availableBand) => {
if (availableBand.hwmode !== device.hwmode) return;
if (availableBand.band !== device.band) return;
availableBand.available_channels.forEach((availableChannel) => {
channelChoices[availableChannel.number.toString()] = `
${availableChannel.number}
(${availableChannel.frequency} MHz ${
availableChannel.radar ? " ,DFS" : ""
})
availableChannel.radar ? " ,DFS" : ""
})
`;
});
});
@ -237,7 +282,7 @@ function getHtmodeChoices(device) {
const htmodeChoices = {};
device.available_bands.forEach((availableBand) => {
if (availableBand.hwmode !== device.hwmode) return;
if (availableBand.band !== device.band) return;
availableBand.available_htmodes.forEach((availableHtmod) => {
htmodeChoices[availableHtmod] = HTMODES[availableHtmod];
@ -246,9 +291,16 @@ function getHtmodeChoices(device) {
return htmodeChoices;
}
function getHwmodeChoices(device) {
function getBandChoices(device) {
return device.available_bands.map((availableBand) => ({
label: HWMODES[availableBand.hwmode],
value: availableBand.hwmode,
label: `${BANDS[availableBand.band]} GHz`,
value: availableBand.band,
}));
}
function getEncryptionChoices(device) {
if (device.encryption === "custom") {
ENCRYPTIONMODES.custom = _("Custom");
}
return ENCRYPTIONMODES;
}

View File

@ -1,18 +1,20 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
import { TextInput } from "../../bootstrap/TextInput";
import { Switch } from "../../bootstrap/Switch";
import { PasswordInput } from "../../bootstrap/PasswordInput";
import { HELP_TEXTS, ENCRYPTIONMODES } from "./constants";
import WiFiQRCode from "./WiFiQRCode";
import { HELP_TEXTS } from "./constants";
import PasswordInput from "../../bootstrap/PasswordInput";
import Select from "../../bootstrap/Select";
import Switch from "../../bootstrap/Switch";
import TextInput from "../../bootstrap/TextInput";
WifiGuestForm.propTypes = {
formData: PropTypes.shape({
@ -20,6 +22,7 @@ WifiGuestForm.propTypes = {
SSID: PropTypes.string.isRequired,
password: PropTypes.string.isRequired,
enabled: PropTypes.bool.isRequired,
encryption: PropTypes.string.isRequired,
}),
formErrors: PropTypes.shape({
SSID: PropTypes.string,
@ -67,14 +70,11 @@ export default function WifiGuestForm({
}))}
{...props}
>
<div className="input-group-append">
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
</div>
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
</TextInput>
<PasswordInput
withEye
label={_("Password")}
@ -91,6 +91,20 @@ export default function WifiGuestForm({
}))}
{...props}
/>
<Select
label={_("Encryption")}
choices={ENCRYPTIONMODES}
helpText={HELP_TEXTS.wpa3}
value={formData.encryption}
onChange={setFormValue((value) => ({
devices: {
[formData.id]: {
guest_wifi: { encryption: { $set: value } },
},
},
}))}
{...props}
/>
</>
) : null}
</>

View File

@ -1,31 +1,30 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React, { useState } from "react";
import QRCode from "qrcode.react";
import PropTypes from "prop-types";
import { ForisURLs } from "../../utils/forisUrls";
import { Button } from "../../bootstrap/Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import PropTypes from "prop-types";
import QRCode from "qrcode.react";
import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
import Button from "../../bootstrap/Button";
import {
Modal,
ModalBody,
ModalFooter,
ModalHeader,
} from "../../bootstrap/Modal";
import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
WiFiQRCode.propTypes = {
SSID: PropTypes.string.isRequired,
password: PropTypes.string.isRequired,
};
const QR_ICON_PATH = `${ForisURLs.static}/imgs/QR_icon.svg`;
export default function WiFiQRCode({ SSID, password }) {
const [modal, setModal] = useState(false);
@ -39,11 +38,11 @@ export default function WiFiQRCode({ SSID, password }) {
setModal(true);
}}
>
<img
width="20"
src={QR_ICON_PATH}
alt="QR"
style={{ opacity: 0.67 }}
<FontAwesomeIcon
icon="fa-solid fa-qrcode"
title={_("Show QR code")}
aria-label={_("Show QR code")}
className="text-secondary"
/>
</button>
{modal ? (
@ -71,23 +70,35 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
<ModalHeader setShown={setShown} title={_("Wi-Fi QR Code")} />
<ModalBody>
<QRCode
className="d-block mx-auto img-logo-black"
renderAs="svg"
value={toQRCodeContent(SSID, password)}
level="M"
size={350}
includeMargin
style={{ display: "block", margin: "auto" }}
/>
</ModalBody>
<ModalFooter>
<Button
className="btn-outline-primary"
className="btn-secondary"
onClick={(e) => {
e.preventDefault();
setShown(false);
}}
>
{_("Close")}
</Button>
<Button
className="btn-primary"
onClick={(e) => {
e.preventDefault();
createAndDownloadPdf(SSID, password);
}}
>
<i className="fas fa-arrow-down mr-2" />
<FontAwesomeIcon
icon="fa-solid fa-file-download"
className="me-2"
/>
{_("Download PDF")}
</Button>
</ModalFooter>

View File

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

View File

@ -1,15 +1,15 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import { render, fireEvent, wait } from "customTestRender";
import { render, fireEvent, waitFor } from "customTestRender";
import mockAxios from "jest-mock-axios";
import { WebSockets } from "webSockets/WebSockets";
import WebSockets from "webSockets/WebSockets";
import { mockJSONError } from "testUtils/network";
import { mockSetAlert } from "testUtils/alertContextMock";
import { ALERT_TYPES } from "../../../bootstrap/Alert";
@ -35,7 +35,7 @@ describe("<ResetWiFiSettings/>", () => {
expect.anything()
);
mockAxios.mockResponse({ data: { foo: "bar" } });
await wait(() =>
await waitFor(() =>
expect(mockSetAlert).toBeCalledWith(
"Wi-Fi settings are set to defaults.",
ALERT_TYPES.SUCCESS
@ -46,7 +46,7 @@ describe("<ResetWiFiSettings/>", () => {
it("should display alert on open ports - failure", async () => {
fireEvent.click(getAllByText("Reset Wi-Fi Settings")[1]);
mockJSONError();
await wait(() =>
await waitFor(() =>
expect(mockSetAlert).toBeCalledWith(
"An error occurred during resetting Wi-Fi settings."
)

View File

@ -1,16 +1,17 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import diffSnapshot from "snapshot-diff";
import mockAxios from "jest-mock-axios";
import { fireEvent, render, wait } from "customTestRender";
import { WebSockets } from "webSockets/WebSockets";
import { fireEvent, render, waitFor } from "customTestRender";
import WebSockets from "webSockets/WebSockets";
import { mockJSONError } from "testUtils/network";
import {
@ -19,13 +20,14 @@ import {
twoDevices,
threeDevices,
} from "./__fixtures__/wifiSettings";
import { WiFiSettings, validator, byteCount } from "../WiFiSettings";
import WiFiSettings, { validator, byteCount } from "../WiFiSettings";
describe("<WiFiSettings/>", () => {
let firstRender;
let getAllByText;
let getAllByLabelText;
let getByText;
let getByLabelText;
let asFragment;
const endpoint = "/reforis/api/wifi";
@ -41,9 +43,10 @@ describe("<WiFiSettings/>", () => {
asFragment = renderRes.asFragment;
getAllByText = renderRes.getAllByText;
getAllByLabelText = renderRes.getAllByLabelText;
getByLabelText = renderRes.getByLabelText;
getByText = renderRes.getByText;
mockAxios.mockResponse({ data: wifiSettingsFixture() });
await wait(() => renderRes.getByText("Wi-Fi 1"));
await waitFor(() => renderRes.getByText("Wi-Fi 1"));
firstRender = renderRes.asFragment();
});
@ -51,7 +54,6 @@ describe("<WiFiSettings/>", () => {
const webSockets = new WebSockets();
const { getByText } = render(
<WiFiSettings
ws={webSockets}
ws={webSockets}
endpoint={endpoint}
resetEndpoint="foo"
@ -59,7 +61,7 @@ describe("<WiFiSettings/>", () => {
);
const errorMessage = "An API error occurred.";
mockJSONError(errorMessage);
await wait(() => {
await waitFor(() => {
expect(getByText(errorMessage)).toBeTruthy();
});
});
@ -76,7 +78,7 @@ describe("<WiFiSettings/>", () => {
it("Snapshot 2.4 GHz", () => {
fireEvent.click(getByText("Wi-Fi 1"));
const enabledRender = asFragment();
fireEvent.click(getAllByText("2.4")[0]);
fireEvent.click(getAllByText(/2.4/)[0]);
expect(diffSnapshot(enabledRender, asFragment())).toMatchSnapshot();
});
@ -116,10 +118,11 @@ describe("<WiFiSettings/>", () => {
enabled: true,
guest_wifi: { enabled: false },
hidden: false,
htmode: "HT40",
hwmode: "11a",
htmode: "HT80",
band: "5g",
id: 0,
password: "TestPass",
encryption: "WPA3",
},
{ enabled: false, id: 1 },
],
@ -133,7 +136,7 @@ describe("<WiFiSettings/>", () => {
it("Post form: 2.4 GHz", () => {
fireEvent.click(getByText("Wi-Fi 1"));
fireEvent.click(getAllByText("2.4")[0]);
fireEvent.click(getAllByText(/2.4/)[0]);
fireEvent.click(getByText("Save"));
expect(mockAxios.post).toBeCalled();
@ -145,10 +148,11 @@ describe("<WiFiSettings/>", () => {
enabled: true,
guest_wifi: { enabled: false },
hidden: false,
htmode: "HT40",
hwmode: "11g",
htmode: "VHT80",
band: "2g",
id: 0,
password: "TestPass",
encryption: "WPA3",
},
{ enabled: false, id: 1 },
],
@ -178,13 +182,15 @@ describe("<WiFiSettings/>", () => {
guest_wifi: {
SSID: "TestGuestSSID",
enabled: true,
encryption: "WPA2",
password: "test_password",
},
hidden: false,
htmode: "HT40",
hwmode: "11a",
htmode: "HT80",
band: "5g",
id: 0,
password: "TestPass",
encryption: "WPA3",
},
{ enabled: false, id: 1 },
],
@ -217,4 +223,24 @@ describe("<WiFiSettings/>", () => {
it("ByteCount function", () => {
expect(byteCount("abc")).toEqual(3);
});
it("Should validate password length", () => {
const shortErrorFeedback = /Password must contain/i;
const longErrorFeedback = /Password must not contain/i;
fireEvent.click(getByText("Wi-Fi 1"));
const passwordInput = getByLabelText("Password");
const changePassword = (value) =>
fireEvent.change(passwordInput, { target: { value } });
changePassword("12");
expect(getByText(shortErrorFeedback)).toBeDefined();
changePassword(
"longpasswordlongpasswordlongpasswordlongpasswordlongpasswordlong"
);
expect(getByText(longErrorFeedback)).toBeDefined();
});
});

View File

@ -1,5 +1,5 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
@ -77,7 +77,7 @@ export function wifiSettingsFixture() {
"VHT40",
"VHT80",
],
hwmode: "11g",
band: "2g",
},
{
available_channels: [
@ -215,7 +215,7 @@ export function wifiSettingsFixture() {
"VHT40",
"VHT80",
],
hwmode: "11a",
band: "5g",
},
],
channel: 60,
@ -223,13 +223,15 @@ export function wifiSettingsFixture() {
guest_wifi: {
SSID: "TestGuestSSID",
enabled: false,
encryption: "WPA2",
password: "",
},
hidden: false,
htmode: "HT40",
hwmode: "11a",
htmode: "HT80",
band: "5g",
id: 0,
password: "TestPass",
encryption: "WPA3",
},
{
SSID: "Turris",
@ -293,7 +295,7 @@ export function wifiSettingsFixture() {
},
],
available_htmodes: ["NOHT", "HT20", "HT40"],
hwmode: "11g",
band: "2g",
},
],
channel: 11,
@ -305,9 +307,10 @@ export function wifiSettingsFixture() {
},
hidden: false,
htmode: "HT40",
hwmode: "11g",
band: "2g",
id: 1,
password: "TestPass",
encryption: "WPA3",
},
],
};
@ -321,9 +324,10 @@ const oneDevice = {
guest_wifi: { enabled: false },
hidden: false,
htmode: "HT40",
hwmode: "11a",
band: "5g",
id: 0,
password: "TestPass",
encryption: "WPA3",
},
],
};
@ -337,9 +341,10 @@ const twoDevices = {
guest_wifi: { enabled: false },
hidden: false,
htmode: "HT40",
hwmode: "11a",
band: "5g",
id: 0,
password: "TestPass",
encryption: "WPA3",
},
{
SSID: "Turris2",
@ -348,9 +353,10 @@ const twoDevices = {
guest_wifi: { enabled: false },
hidden: false,
htmode: "HT40",
hwmode: "11a",
id: 0,
band: "5g",
id: 1,
password: "TestPass",
encryption: "WPA3",
},
],
};
@ -364,9 +370,10 @@ const threeDevices = {
guest_wifi: { enabled: false },
hidden: false,
htmode: "HT40",
hwmode: "11a",
band: "5g",
id: 0,
password: "TestPass",
encryption: "WPA3",
},
{
SSID: "Turris2",
@ -375,9 +382,10 @@ const threeDevices = {
guest_wifi: { enabled: false },
hidden: false,
htmode: "HT40",
hwmode: "11a",
id: 0,
band: "5g",
id: 1,
password: "TestPass",
encryption: "WPA3",
},
{
SSID: "Turris3",
@ -386,9 +394,10 @@ const threeDevices = {
guest_wifi: { enabled: false },
hidden: false,
htmode: "HT40",
hwmode: "11a",
id: 0,
band: "5g",
id: 2,
password: "",
encryption: "WPA3",
},
],
};

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.
* See /LICENSE for more information.
@ -12,34 +12,44 @@ export const HTMODES = {
VHT20: _("802.11ac - 20 MHz wide channel"),
VHT40: _("802.11ac - 40 MHz wide channel"),
VHT80: _("802.11ac - 80 MHz wide channel"),
VHT80_80: _("802.11ac - 80+80 MHz wide channel"),
VHT160: _("802.11ac - 160 MHz wide channel"),
HE20: _("802.11ax - 20 MHz wide channel"),
HE40: _("802.11ax - 40 MHz wide channel"),
HE80: _("802.11ax - 80 MHz wide channel"),
HE80_80: _("802.11ax - 80+80 MHz wide channel"),
HE160: _("802.11ax - 160 MHz wide channel"),
};
export const HWMODES = {
"11g": "2.4",
"11a": "5",
export const BANDS = {
"2g": "2.4",
"5g": "5",
"6g": "6",
};
export const ENCRYPTIONMODES = {
WPA3: _("WPA3 only"),
"WPA2/3": _("WPA3 with WPA2 as fallback (default)"),
WPA2: _("WPA2 only"),
};
export const HELP_TEXTS = {
ssid: _(
`SSID which contains non-standard characters could cause problems on some devices.`
"SSID which contains non-standard characters could cause problems on some devices."
),
password: _(
"WPA2/3 pre-shared key, that is required to connect to the network."
),
password: _(`
WPA2 pre-shared key, that is required to connect to the network.
`),
hidden: _(
"If set, network is not visible when scanning for available networks."
),
hwmode: _(`
The 2.4 GHz band is more widely supported by clients, but tends to have more interference. The 5 GHz band is a
newer standard and may not be supported by all your devices. It usually has less interference, but the signal
does not carry so well indoors.`),
htmode: _(`
Change this to adjust 802.11n/ac mode of operation. 802.11n with 40 MHz wide channels can yield higher
throughput but can cause more interference in the network. If you don't know what to choose, use the default
option with 20 MHz wide channel.
`),
guest_wifi_enabled: _(`
Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to
access the internet, but aren't allowed to access other devices and the configuration interface of the router.
Parameters of the guest network can be set in the Guest network tab.
`),
band: _(
"The 2.4 GHz band is more widely supported by clients, but tends to have more interference. The 5 GHz band is a newer standard and may not be supported by all your devices. It usually has less interference, but the signal does not carry so well indoors."
),
htmode: _(
"Change this to adjust 802.11n/ac/ax mode of operation. 802.11n with 40 MHz wide channels can yield higher throughput but can cause more interference in the network. If you don't know what to choose, use the default option with 20 MHz wide channel."
),
guest_wifi_enabled: _(
"Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to access the internet, but aren't allowed to access other devices and the configuration interface of the router. Parameters of the guest network can be set in the Guest network tab."
),
wpa3: _(
"The WPA3 standard is the new most secure encryption method that is suggested to be used with any device that supports it. The older devices without WPA3 support require older WPA2. If you experience issues with connecting older devices, try to enable WPA2."
),
};

View File

@ -0,0 +1,86 @@
/*
* Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import Button from "bootstrap/Button";
import { fireEvent, getByText, render, waitFor } from "customTestRender";
import mockAxios from "jest-mock-axios";
import { mockJSONError } from "testUtils/network";
import { mockSetAlert } from "testUtils/alertContextMock";
import ActionButtonWithModal from "../ActionButtonWithModal/ActionButtonWithModal";
describe("<ActionButtonWithModal/>", () => {
let componentContainer;
const ActionButton = (props) => (
<Button type="button" {...props}>
Action
</Button>
);
beforeEach(() => {
const { container } = render(
<>
<div id="modal-container" />
<div id="alert-container" />
<ActionButtonWithModal
actionTrigger={ActionButton}
actionUrl="/reforis/api/action"
modalTitle="Warning!"
modalMessage="Are you sure you want to perform this action?"
modalActionText="Confirm action"
modalActionProps={{ className: "btn-danger" }}
successMessage="Action request succeeded."
errorMessage="Action request failed."
/>
</>
);
componentContainer = container;
});
it("Render button.", () => {
expect(componentContainer).toMatchSnapshot();
});
it("Render modal.", () => {
fireEvent.click(getByText(componentContainer, "Action"));
expect(componentContainer).toMatchSnapshot();
});
it("Confirm action.", () => {
fireEvent.click(getByText(componentContainer, "Action"));
fireEvent.click(getByText(componentContainer, "Confirm action"));
expect(mockAxios.post).toHaveBeenCalledWith(
"/reforis/api/action",
undefined,
expect.anything()
);
});
it("Hold error.", async () => {
fireEvent.click(getByText(componentContainer, "Action"));
fireEvent.click(getByText(componentContainer, "Confirm action"));
mockJSONError();
await waitFor(() =>
expect(mockSetAlert).toBeCalledWith("Action request failed.")
);
});
it("Show success alert on successful action.", async () => {
fireEvent.click(getByText(componentContainer, "Action"));
fireEvent.click(getByText(componentContainer, "Confirm action"));
mockAxios.mockResponse({ status: 200 });
await waitFor(() =>
expect(mockSetAlert).toBeCalledWith(
"Action request succeeded.",
"success"
)
);
});
});

View File

@ -1,63 +0,0 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import {
fireEvent,
getByText,
queryByText,
render,
wait,
} from "customTestRender";
import mockAxios from "jest-mock-axios";
import { mockJSONError } from "testUtils/network";
import { mockSetAlert } from "testUtils/alertContextMock";
import { RebootButton } from "../RebootButton";
describe("<RebootButton/>", () => {
let componentContainer;
beforeEach(() => {
const { container } = render(
<>
<div id="modal-container" />
<RebootButton />
</>
);
componentContainer = container;
});
it("Render.", () => {
expect(componentContainer).toMatchSnapshot();
});
it("Render modal.", () => {
expect(queryByText(componentContainer, "Confirm reboot")).toBeNull();
fireEvent.click(getByText(componentContainer, "Reboot"));
expect(componentContainer).toMatchSnapshot();
});
it("Confirm reboot.", () => {
fireEvent.click(getByText(componentContainer, "Reboot"));
fireEvent.click(getByText(componentContainer, "Confirm reboot"));
expect(mockAxios.post).toHaveBeenCalledWith(
"/reforis/api/reboot",
undefined,
expect.anything()
);
});
it("Hold error.", async () => {
fireEvent.click(getByText(componentContainer, "Reboot"));
fireEvent.click(getByText(componentContainer, "Confirm reboot"));
mockJSONError();
await wait(() =>
expect(mockSetAlert).toBeCalledWith("Reboot request failed.")
);
});
});

View File

@ -0,0 +1,99 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<ActionButtonWithModal/> Render button. 1`] = `
<div>
<div
id="modal-container"
/>
<div
id="alert-container"
/>
<button
class="btn btn-primary d-inline-flex justify-content-center align-items-center"
type="button"
>
<span>
Action
</span>
</button>
</div>
`;
exports[`<ActionButtonWithModal/> Render modal. 1`] = `
<div>
<div
id="modal-container"
>
<div
aria-labelledby="modal-title"
aria-modal="true"
class="modal fade show"
role="dialog"
>
<div
class="modal-dialog modal-dialog-centered"
role="document"
>
<div
class="modal-content"
>
<div
class="modal-header"
>
<h1
class="modal-title fs-5"
>
Warning!
</h1>
<button
aria-label="Close"
class="btn-close"
type="button"
/>
</div>
<div
class="modal-body"
>
<p
class="mb-0"
>
Are you sure you want to perform this action?
</p>
</div>
<div
class="modal-footer"
>
<button
class="btn btn-secondary d-inline-flex justify-content-center align-items-center"
type="button"
>
<span>
Cancel
</span>
</button>
<button
class="btn btn-danger d-inline-flex justify-content-center align-items-center"
type="button"
>
<span>
Confirm action
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div
id="alert-container"
/>
<button
class="btn btn-primary d-inline-flex justify-content-center align-items-center"
type="button"
>
<span>
Action
</span>
</button>
</div>
`;

View File

@ -1,86 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<RebootButton/> Render modal. 1`] = `
<div>
<div
id="modal-container"
>
<div
class="modal fade show"
role="dialog"
>
<div
class="modal-dialog modal-dialog-centered"
role="document"
>
<div
class="modal-content"
>
<div
class="modal-header"
>
<h5
class="modal-title"
>
Warning!
</h5>
<button
class="close"
type="button"
>
<span
aria-hidden="true"
>
×
</span>
</button>
</div>
<div
class="modal-body"
>
<p>
Are you sure you want to restart the router?
</p>
</div>
<div
class="modal-footer"
>
<button
class="btn btn-primary "
type="button"
>
Cancel
</button>
<button
class="btn btn-danger"
type="button"
>
Confirm reboot
</button>
</div>
</div>
</div>
</div>
</div>
<button
class="btn btn-danger"
type="button"
>
Reboot
</button>
</div>
`;
exports[`<RebootButton/> Render. 1`] = `
<div>
<div
id="modal-container"
/>
<button
class="btn btn-danger"
type="button"
>
Reboot
</button>
</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.
* See /LICENSE for more information.
*/
import React, { useState, useContext, useCallback } from "react";
import React, { useState, useContext, useCallback, useMemo } from "react";
import PropTypes from "prop-types";
import { Alert, ALERT_TYPES } from "../bootstrap/Alert";
import { Portal } from "../utils/Portal";
import Alert, { ALERT_TYPES } from "../../bootstrap/Alert";
import Portal from "../../utils/Portal";
AlertContextProvider.propTypes = {
children: PropTypes.oneOfType([
@ -30,6 +31,10 @@ function AlertContextProvider({ children }) {
);
const dismissAlert = useCallback(() => setAlert(null), [setAlert]);
const contextValue = useMemo(
() => [setAlertWrapper, dismissAlert],
[setAlertWrapper, dismissAlert]
);
return (
<>
@ -40,7 +45,7 @@ function AlertContextProvider({ children }) {
</Alert>
</Portal>
)}
<AlertContext.Provider value={[setAlertWrapper, dismissAlert]}>
<AlertContext.Provider value={contextValue}>
{children}
</AlertContext.Provider>
</>

View File

@ -43,14 +43,17 @@ describe("AlertContext", () => {
expect(componentContainer).toMatchSnapshot();
});
it("should dismiss alert with alert button", () => {
it("should dismiss alert with alert button", async () => {
fireEvent.click(getByText(componentContainer, "Set alert"));
// Alert is present
expect(getByText(componentContainer, "Alert content")).toBeDefined();
fireEvent.click(componentContainer.querySelector(".close"));
fireEvent.click(componentContainer.querySelector(".btn-close"));
// Alert is gone
expect(queryByText(componentContainer, "Alert content")).toBeNull();
await (() =>
expect(
queryByText(componentContainer, "Alert content")
).toBeNull());
});
it("should dismiss alert with external button", () => {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
@ -7,10 +7,10 @@
import React from "react";
import { act, fireEvent, render, waitForElement } from "customTestRender";
import { act, fireEvent, render, waitFor } from "customTestRender";
import mockAxios from "jest-mock-axios";
import { WebSockets } from "webSockets/WebSockets";
import { ForisForm } from "../components/ForisForm";
import WebSockets from "webSockets/WebSockets";
import ForisForm from "../components/ForisForm";
// It's possible to unittest each hooks via react-hooks-testing-library.
// But it's better and easier to test it by test components which uses this hooks.
@ -59,7 +59,7 @@ describe("useForm hook.", () => {
);
mockAxios.mockResponse({ field: "fetchedData" });
input = await waitForElement(() => getByTestId("test-input"));
input = await waitFor(() => getByTestId("test-input"));
form = container.firstChild.firstChild;
});

View File

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

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

View File

@ -1,14 +1,15 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import PropTypes from "prop-types";
import { Button } from "../../bootstrap/Button";
import Button from "../../bootstrap/Button";
export const STATES = {
READY: 1,
@ -19,22 +20,25 @@ export const STATES = {
SubmitButton.propTypes = {
disabled: PropTypes.bool,
state: PropTypes.oneOf(Object.keys(STATES).map((key) => STATES[key])),
label: PropTypes.string,
};
export function SubmitButton({ disabled, state, ...props }) {
export function SubmitButton({ disabled, state, label, ...props }) {
const disableSubmitButton = disabled || state !== STATES.READY;
const loadingSubmitButton = state !== STATES.READY;
let labelSubmitButton;
switch (state) {
case STATES.SAVING:
labelSubmitButton = _("Updating");
break;
case STATES.LOAD:
labelSubmitButton = _("Load settings");
break;
default:
labelSubmitButton = _("Save");
let labelSubmitButton = label;
if (!labelSubmitButton) {
switch (state) {
case STATES.SAVING:
labelSubmitButton = _("Updating");
break;
case STATES.LOAD:
labelSubmitButton = _("Load settings");
break;
default:
labelSubmitButton = _("Save");
}
}
return (

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.
* See /LICENSE for more information.
*/
import { useCallback, useEffect, useReducer } from "react";
import update from "immutability-helper";
import { useAPIGet } from "../api/hooks";
import { useWSForisModule } from "../webSockets/hooks";
import useWSForisModule from "../webSockets/hooks";
const FORM_ACTIONS = {
updateValue: 1,

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.
* See /LICENSE for more information.
@ -17,30 +17,35 @@ export {
export { API_STATE } from "./api/utils";
// Bootstrap
export { Alert, ALERT_TYPES } from "./bootstrap/Alert";
export { Button } from "./bootstrap/Button";
export { CheckBox } from "./bootstrap/CheckBox";
export { DownloadButton } from "./bootstrap/DownloadButton";
export { DataTimeInput } from "./bootstrap/DataTimeInput";
export { EmailInput } from "./bootstrap/EmailInput";
export { FileInput } from "./bootstrap/FileInput";
export { Input } from "./bootstrap/Input";
export { NumberInput } from "./bootstrap/NumberInput";
export { PasswordInput } from "./bootstrap/PasswordInput";
export { Radio, RadioSet } from "./bootstrap/RadioSet";
export { Select } from "./bootstrap/Select";
export { TextInput } from "./bootstrap/TextInput";
export { default as Alert, ALERT_TYPES } from "./bootstrap/Alert";
export { default as Button } from "./bootstrap/Button";
export { default as CheckBox } from "./bootstrap/CheckBox";
export { default as CopyInput } from "./bootstrap/CopyInput";
export { default as DownloadButton } from "./bootstrap/DownloadButton";
export { default as DataTimeInput } from "./bootstrap/DataTimeInput";
export { default as EmailInput } from "./bootstrap/EmailInput";
export { default as FileInput } from "./bootstrap/FileInput";
export { default as Input } from "./bootstrap/Input";
export { default as NumberInput } from "./bootstrap/NumberInput";
export { default as PasswordInput } from "./bootstrap/PasswordInput";
export { default as Radio } from "./bootstrap/Radio";
export { default as RadioSet } from "./bootstrap/RadioSet";
export { default as Select } from "./bootstrap/Select";
export { default as TextInput } from "./bootstrap/TextInput";
export { formFieldsSize, buttonFormFieldsSize } from "./bootstrap/constants";
export { Switch } from "./bootstrap/Switch";
export { default as Switch } from "./bootstrap/Switch";
export { default as ThreeDotsMenu } from "./bootstrap/ThreeDotsMenu";
export { Spinner, SpinnerElement } from "./bootstrap/Spinner";
export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
// Common
export { RebootButton } from "./common/RebootButton";
export { WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
export { default as ActionButtonWithModal } from "./common/ActionButtonWithModal/ActionButtonWithModal";
export { default as WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
export { default as ResetWiFiSettings } from "./common/WiFiSettings/ResetWiFiSettings";
export { default as RichTable } from "./common/RichTable/RichTable";
// Form
export { ForisForm } from "./form/components/ForisForm";
export { default as ForisForm } from "./form/components/ForisForm";
export {
SubmitButton,
STATES as SUBMIT_BUTTON_STATES,
@ -48,11 +53,11 @@ export {
export { useForisModule, useForm } from "./form/hooks";
// WebSockets
export { useWSForisModule } from "./webSockets/hooks";
export { WebSockets } from "./webSockets/WebSockets";
export { default as useWSForisModule } from "./webSockets/hooks";
export { default as WebSockets } from "./webSockets/WebSockets";
// Utils
export { Portal } from "./utils/Portal";
export { default as Portal } from "./utils/Portal";
export {
undefinedIfEmpty,
withoutUndefinedKeys,
@ -66,10 +71,11 @@ export {
withError,
withErrorMessage,
} from "./utils/conditionalHOCs";
export { ErrorMessage } from "./utils/ErrorMessage";
export { default as ErrorMessage } from "./utils/ErrorMessage";
export { useClickOutside } from "./utils/hooks";
export { toLocaleDateString } from "./utils/datetime";
export { displayCard } from "./utils/displayCard";
export { default as toLocaleDateString } from "./utils/datetime";
export { default as displayCard } from "./utils/displayCard";
export { default as isPluginInstalled } from "./utils/isPluginInstalled";
// Foris URL
export { ForisURLs, REFORIS_URL_PREFIX } from "./utils/forisUrls";
@ -80,10 +86,20 @@ export {
validateIPv6Address,
validateIPv6Prefix,
validateDomain,
validateHostname,
validateDUID,
validateMAC,
validateMultipleEmails,
} from "./utils/validations";
// Alert context
export { AlertContextProvider, useAlert } from "./alertContext/AlertContext";
export {
AlertContextProvider,
useAlert,
} from "./context/alertContext/AlertContext";
// Customization context
export {
CustomizationContextProvider,
useCustomizationContext,
} from "./context/customizationContext/CustomizationContext";

View File

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

View File

@ -0,0 +1,34 @@
/*
* Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
window.CustomizationContext = React.createContext();
const deviceDetails = {
kernel: "5.x.x",
model: "Turris Omnia",
os_branch: {
mode: "branch",
value: "hbs",
},
os_version: "6.x.x",
reforis_version: "1.x.x",
serial: 123456789,
};
const isCustomized = false;
function CustomizationContextMock({ children }) {
return (
<CustomizationContext.Provider value={{ deviceDetails, isCustomized }}>
{children}
</CustomizationContext.Provider>
);
}
export { CustomizationContextMock };

Some files were not shown because too many files have changed in this diff Show More