Bump v5.0.1

New channel bandwidth & Natural Sort of options

Closes reforis#200

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

README.md

@@ -33,3 +33,12 @@ externals: {
 }
 ```
 
+### Docs
+Build or watch docs to get more info about library:
+```bash
+make docs
+```
+or
+```bash
+make docs-watch
+```

docs/development.md

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

docs/intro.md

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "4.2.0",
+  "version": "5.0.1",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {
@@ -14,10 +14,9 @@
   "license": "GPL-3.0",
   "main": "./src/index.js",
   "dependencies": {
-    "axios": "^0.19.1",
+    "axios": "^0.19.2",
     "immutability-helper": "3.0.1",
     "moment": "^2.24.0",
-    "pdfmake": "^0.1.63",
     "qrcode.react": "^0.9.3",
     "react-datetime": "^2.16.3",
     "react-uid": "^2.2.0"
@@ -30,26 +29,31 @@
     "react-router-dom": "^5.1.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.7",
-    "@babel/core": "^7.7.7",
-    "@babel/plugin-transform-runtime": "^7.7.6",
-    "@babel/preset-env": "^7.7.7",
-    "@babel/preset-react": "^7.7.4",
-    "@fortawesome/fontawesome-free": "^5.12.0",
+    "@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.0.6",
+    "babel-loader": "^8.1.0",
     "babel-polyfill": "^6.26.0",
+    "bootstrap": "^4.5.0",
+    "css-loader": "^3.5.3",
     "eslint": "^6.8.0",
     "eslint-config-reforis": "^1.0.0",
-    "jest": "^24.9.0",
+    "file-loader": "^6.0.0",
+    "jest": "^25.2.0",
     "jest-mock-axios": "^3.2.0",
-    "moment-timezone": "^0.5.27",
+    "moment-timezone": "^0.5.28",
     "prop-types": "15.7.2",
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-router-dom": "^5.1.2",
-    "react-styleguidist": "^10.4.2",
-    "snapshot-diff": "^0.5.1"
+    "react-styleguidist": "^10.6.2",
+    "snapshot-diff": "^0.7.0",
+    "style-loader": "^1.2.1",
+    "webpack": "^4.43.0"
   },
   "scripts": {
     "lint": "eslint src",

src/alertContext/AlertContext.md

@@ -0,0 +1,4 @@
+It provides alert context to children. `AlertContext` allows using `useAlert` in components.
+
+Notice that `<div id="alert-container"/>` should be presented in HTML doc to get it work (In reForis it's already done
+with base Jinja2 templates).

src/api/hooks.js

@@ -9,7 +9,7 @@ import {
     useCallback, useEffect, useReducer, useState,
 } from "react";
 
-import { ForisURLs } from "../forisUrls";
+import { ForisURLs } from "../utils/forisUrls";
 import {
     API_ACTIONS, API_METHODS, API_STATE, getErrorPayload, HEADERS, TIMEOUT,
 } from "./utils";

src/bootstrap/Alert.md

@@ -1,4 +1,5 @@
 Bootstrap alert component.
+
 ```jsx
 import {useState} from 'react';
 
@@ -7,14 +8,14 @@ function AlertExample(){
     if (alert)
         return <Alert 
             type='warning' 
-            message='Some warning out there!' 
             onDismiss={()=>setAlert(false)}
-        />;
+        >
+            Some warning out there!        
+        </Alert>;
     return <button 
         className='btn btn-secondary' 
         onClick={()=>setAlert(true)}
     >Show alert again</button>;
 };
 <AlertExample/>
-
 ```

src/bootstrap/FileInput.js

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

src/bootstrap/FileInput.md

@@ -3,13 +3,39 @@ Bootstrap component for file input. Includes label and has predefined sizes and
 All additional `props` are passed to the `<input type="file">` HTML component.
 
 ```js
-import {useState} from 'react';
+import { useState } from 'react';
+
 const [files, setFiles] = useState([]);
 
-<FileInput
-    files={files}
-    label="Some file"
-    helpText="Will be uploaded"
-    onChange={event =>setFiles(event.target.files)}
-/>
+// Note that files is not an array but FileList.
+const label = files.length === 1 ? files[0].name : "Choose file";
+
+<form className="col">
+    <FileInput
+        files={files}
+        label={label}
+        helpText="Will be uploaded"
+        onChange={event=>setFiles(event.target.files)}
+    />
+</form>
+```
+
+### FileInput with multiple files
+```js
+import { useState } from 'react';
+
+const [files, setFiles] = useState([]);
+
+// Note that files is not an array but FileList.
+const label = files.length > 0 ? Array.from(files).map(file=>file.name).join(", ") : "Choose files";
+
+<form className="col">
+    <FileInput
+        files={files}
+        label={label}
+        helpText="Will be uploaded"
+        onChange={event=>setFiles(event.target.files)}
+        multiple
+    />
+</form>
 ```

src/bootstrap/Modal.js

@@ -17,6 +17,7 @@ Modal.propTypes = {
     shown: PropTypes.bool.isRequired,
     /** Callback to manage modal visibility */
     setShown: PropTypes.func.isRequired,
+    scrollable: PropTypes.bool,
 
     /** Modal content use following: `ModalHeader`, `ModalBody`, `ModalFooter` */
     children: PropTypes.oneOfType([
@@ -25,7 +26,9 @@ Modal.propTypes = {
     ]).isRequired,
 };
 
-export function Modal({ shown, setShown, children }) {
+export function Modal({
+    shown, setShown, scrollable, children,
+}) {
     const dialogRef = useRef();
 
     useClickOutside(dialogRef, () => setShown(false));
@@ -33,7 +36,11 @@ export function Modal({ shown, setShown, children }) {
     return (
         <Portal containerId="modal-container">
             <div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
-                <div ref={dialogRef} className="modal-dialog modal-dialog-centered" role="document">
+                <div
+                    ref={dialogRef}
+                    className={`modal-dialog modal-dialog-centered${scrollable ? " modal-dialog-scrollable" : ""}`}
+                    role="document"
+                >
                     <div className="modal-content">
                         {children}
                     </div>

src/bootstrap/Modal.md

@@ -6,8 +6,6 @@ it's required to have an element `<div id={"modal-container"}/>` somewhere on th
     <div id="modal-container"/>
 ```
 
-I have no idea why example doesn't work here but you can investigate HTML code and Foris project.
-
 ```js
 import {ModalHeader, ModalBody, ModalFooter} from './Modal';
 

src/bootstrap/RadioSet.js

@@ -17,7 +17,12 @@ RadioSet.propTypes = {
     /** Choices . */
     choices: PropTypes.arrayOf(PropTypes.shape({
         /** Choice lable . */
-        label: PropTypes.string.isRequired,
+        label: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element,
+            PropTypes.node,
+            PropTypes.arrayOf(PropTypes.node),
+        ]).isRequired,
         /** Choice value . */
         value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     })).isRequired,
@@ -58,7 +63,12 @@ export function RadioSet({
 }
 
 Radio.propTypes = {
-    label: PropTypes.string.isRequired,
+    label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element,
+        PropTypes.node,
+        PropTypes.arrayOf(PropTypes.node),
+    ]).isRequired,
     id: PropTypes.string.isRequired,
     helpText: PropTypes.string,
 };

src/bootstrap/Select.js

@@ -28,10 +28,11 @@ export function Select({
 }) {
     const uid = useUID();
 
-    const options = Object.keys(choices).map(
+    const options = Object.keys(choices).sort(
+        (a, b) => a - b || a.toString().localeCompare(b.toString()),
+    ).map(
         (key) => <option key={key} value={key}>{choices[key]}</option>,
     );
-
     return (
         <div className="form-group">
             <label htmlFor={uid}>{label}</label>

src/common/RebootButton.js

@@ -10,7 +10,7 @@ import PropTypes from "prop-types";
 
 import { useAPIPost } from "../api/hooks";
 import { API_STATE } from "../api/utils";
-import { ForisURLs } from "../forisUrls";
+import { ForisURLs } from "../utils/forisUrls";
 
 import { Button } from "../bootstrap/Button";
 import {

src/common/WiFiSettings/WiFiForm.js

@@ -31,22 +31,22 @@ WiFiForm.propTypes = {
 
 WiFiForm.defaultProps = {
     formData: { devices: [] },
-    setFormValue: () => {},
+    setFormValue: () => { },
     hasGuestNetwork: true,
 };
 
 export default function WiFiForm({
-    formData, formErrors, setFormValue, hasGuestNetwork, ...props
+    formData, formErrors, setFormValue, hasGuestNetwork, disabled,
 }) {
-    return formData.devices.map((device) => (
+    return formData.devices.map((device, index) => (
         <DeviceForm
             key={device.id}
             formData={device}
-            formErrors={(formErrors || [])[device.id]}
+            deviceIndex={index}
+            formErrors={(formErrors || [])[index]}
             setFormValue={setFormValue}
             hasGuestNetwork={hasGuestNetwork}
-
-            {...props}
+            disabled={disabled}
         />
     ));
 }
@@ -66,6 +66,7 @@ DeviceForm.propTypes = {
     formErrors: PropTypes.object.isRequired,
     setFormValue: PropTypes.func.isRequired,
     hasGuestNetwork: PropTypes.bool,
+    deviceIndex: PropTypes.number,
 };
 
 DeviceForm.defaultProps = {
@@ -74,7 +75,7 @@ DeviceForm.defaultProps = {
 };
 
 function DeviceForm({
-    formData, formErrors, setFormValue, hasGuestNetwork, ...props
+    formData, formErrors, setFormValue, hasGuestNetwork, deviceIndex, ...props
 }) {
     const deviceID = formData.id;
     return (
@@ -85,7 +86,7 @@ function DeviceForm({
                 checked={formData.enabled}
 
                 onChange={setFormValue(
-                    (value) => ({ devices: { [deviceID]: { enabled: { $set: value } } } }),
+                    (value) => ({ devices: { [deviceIndex]: { enabled: { $set: value } } } }),
                 )}
 
                 {...props}
@@ -99,7 +100,13 @@ function DeviceForm({
                             error={formErrors.SSID || null}
                             required
                             onChange={setFormValue(
-                                (value) => ({ devices: { [deviceID]: { SSID: { $set: value } } } }),
+                                (value) => ({
+                                    devices: {
+                                        [deviceIndex]: {
+                                            SSID: { $set: value },
+                                        },
+                                    },
+                                }),
                             )}
 
                             {...props}
@@ -122,7 +129,7 @@ function DeviceForm({
 
                             onChange={setFormValue(
                                 (value) => (
-                                    { devices: { [deviceID]: { password: { $set: value } } } }
+                                    { devices: { [deviceIndex]: { password: { $set: value } } } }
                                 ),
                             )}
 
@@ -136,7 +143,7 @@ function DeviceForm({
 
                             onChange={setFormValue(
                                 (value) => (
-                                    { devices: { [deviceID]: { hidden: { $set: value } } } }
+                                    { devices: { [deviceIndex]: { hidden: { $set: value } } } }
                                 ),
                             )}
 
@@ -153,7 +160,7 @@ function DeviceForm({
                             onChange={setFormValue(
                                 (value) => ({
                                     devices: {
-                                        [deviceID]: {
+                                        [deviceIndex]: {
                                             hwmode: { $set: value },
                                             channel: { $set: "0" },
                                         },
@@ -172,7 +179,7 @@ function DeviceForm({
 
                             onChange={setFormValue(
                                 (value) => (
-                                    { devices: { [deviceID]: { htmode: { $set: value } } } }
+                                    { devices: { [deviceIndex]: { htmode: { $set: value } } } }
                                 ),
                             )}
 
@@ -186,7 +193,7 @@ function DeviceForm({
 
                             onChange={setFormValue(
                                 (value) => (
-                                    { devices: { [deviceID]: { channel: { $set: value } } } }
+                                    { devices: { [deviceIndex]: { channel: { $set: value } } } }
                                 ),
                             )}
 
@@ -195,7 +202,7 @@ function DeviceForm({
 
                         {hasGuestNetwork && (
                             <WifiGuestForm
-                                formData={{ id: deviceID, ...formData.guest_wifi }}
+                                formData={{ id: deviceIndex, ...formData.guest_wifi }}
                                 formErrors={formErrors.guest_wifi || {}}
 
                                 setFormValue={setFormValue}

src/common/WiFiSettings/WiFiQRCode.js

@@ -9,7 +9,7 @@ import React, { useState } from "react";
 import QRCode from "qrcode.react";
 import PropTypes from "prop-types";
 
-import { ForisURLs } from "../../forisUrls";
+import { ForisURLs } from "../../utils/forisUrls";
 import { Button } from "../../bootstrap/Button";
 import {
     Modal, ModalBody, ModalFooter, ModalHeader,

src/common/WiFiSettings/WiFiSettings.js

@@ -64,7 +64,7 @@ function prepDataToSubmit(formData) {
     return formData;
 }
 
-function validator(formData) {
+export function validator(formData) {
     const formErrors = formData.devices.map(
         (device) => {
             if (!device.enabled) return {};
@@ -89,5 +89,5 @@ function validator(formData) {
             return errors;
         },
     );
-    return JSON.stringify(formErrors) === "[{},{}]" ? null : formErrors;
+    return JSON.stringify(formErrors).match(/\[[{},?]+\]/) ? null : formErrors;
 }

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

@@ -13,8 +13,8 @@ import { fireEvent, render, wait } from "customTestRender";
 import { WebSockets } from "webSockets/WebSockets";
 import { mockJSONError } from "testUtils/network";
 
-import { wifiSettingsFixture } from "./__fixtures__/wifiSettings";
-import { WiFiSettings } from "../WiFiSettings";
+import { wifiSettingsFixture, oneDevice, twoDevices, threeDevices } from "./__fixtures__/wifiSettings";
+import { WiFiSettings, validator } from "../WiFiSettings";
 
 describe("<WiFiSettings/>", () => {
     let firstRender;
@@ -159,4 +159,18 @@ describe("<WiFiSettings/>", () => {
         };
         expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
     });
+
+    it("Validator function using regex for one device", () => {    
+        expect(validator(oneDevice)).toEqual(null);      
+    });
+
+    it("Validator function using regex for two devices", () => {
+        const twoDevicesFormErrors = [{SSID: "SSID can't be empty"}, {}];    
+        expect(validator(twoDevices)).toEqual(twoDevicesFormErrors);
+    });
+
+    it("Validator function using regex for three devices", () => {
+        const threeDevicesFormErrors = [{}, {}, {password: "Password must contain at least 8 symbols"}];    
+        expect(validator(threeDevices)).toEqual(threeDevicesFormErrors);
+    });
 });

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

@@ -316,3 +316,85 @@ export function wifiSettingsFixture() {
         ],
     };
 }
+const oneDevice = {
+    devices: [
+        {
+            SSID: "Turris1",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass"
+        }
+    ]
+};
+
+const twoDevices = {
+    devices: [
+        {
+            SSID: "",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass"
+        },
+        {
+            SSID: "Turris2",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass"
+        }
+    ]
+};
+
+const threeDevices = {
+    devices: [
+        {
+            SSID: "Turris1",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass"
+        },
+        {
+            SSID: "Turris2",
+            channel: 60,
+            enabled: false,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: "TestPass"
+        },
+        {
+            SSID: "Turris3",
+            channel: 60,
+            enabled: true,
+            guest_wifi: { enabled: false },
+            hidden: false,
+            htmode: "HT40",
+            hwmode: "11a",
+            id: 0,
+            password: ""
+        }
+    ]
+};
+
+export {oneDevice, twoDevices, threeDevices};

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

@@ -617,11 +617,6 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +           id=\\"8\\"
 +         >
 +           <option
-+             value=\\"NOHT\\"
-+           >
-+             Disabled
-+           </option>
-+           <option
 +             value=\\"HT20\\"
 +           >
 +             802.11n - 20 MHz wide channel
@@ -632,6 +627,11 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             802.11n - 40 MHz wide channel
 +           </option>
 +           <option
++             value=\\"NOHT\\"
++           >
++             Disabled
++           </option>
++           <option
 +             value=\\"VHT20\\"
 +           >
 +             802.11ac - 20 MHz wide channel

src/common/WiFiSettings/constants.js

@@ -12,6 +12,7 @@ export const HTMODES = {
     VHT20: _("802.11ac - 20 MHz wide channel"),
     VHT40: _("802.11ac - 40 MHz wide channel"),
     VHT80: _("802.11ac - 80 MHz wide channel"),
+    VHT160: _("802.11ac - 160 MHz wide channel"),
 };
 export const HWMODES = {
     "11g": "2.4",

src/common/WiFiSettings/qrCodeHelpers.js

@@ -5,22 +5,36 @@
  * See /LICENSE for more information.
  */
 
-import pdfMake from "pdfmake";
-
 export function createAndDownloadPdf(SSID, password) {
     const docDefinition = {
         content: [
             {
-                text: "Wi-Fi", style: "header", fontSize: 55, alignment: "center",
+                text: "Wi-Fi",
+                style: "header",
+                fontSize: 55,
+                alignment: "center",
             },
             {
-                qr: toQRCodeContent(SSID, password), fit: "350", margin: [0, 80], alignment: "center",
+                qr: toQRCodeContent(SSID, password),
+                fit: "350",
+                margin: [0, 80],
+                alignment: "center",
+            },
+            {
+                text: `SSID: ${SSID}`,
+                fontSize: 25,
+                alignment: "center",
+            },
+            {
+                text: `Password: ${password}`,
+                fontSize: 25,
+                alignment: "center",
             },
-            { text: `SSID: ${SSID}`, fontSize: 25, alignment: "center" },
-            { text: `Password: ${password}`, fontSize: 25, alignment: "center" },
         ],
     };
-    pdfMake.createPdf(docDefinition).download("wifi.pdf");
+
+    // pdfmake is exposed by reForis main application. Thus we can use it from globals.
+    window.pdfMake.createPdf(docDefinition).download("wifi.pdf");
 }
 
 export function toQRCodeContent(SSID, password) {

src/form/__tests__/validation.test.js

@@ -12,7 +12,7 @@ import {
     validateIPv6Address,
     validateIPv6Prefix,
     validateMAC,
-} from "validations";
+} from "utils/validations";
 
 describe("Validation functions", () => {
     it("validateIPv4Address valid", () => {

src/form/components/ForisForm.js

@@ -149,6 +149,7 @@ export function ForisForm({
     const childrenWithFormProps = React.Children.map(
         children,
         (child) => React.cloneElement(child, {
+            initialData: formState.initialData,
             formData: formState.data,
             formErrors: formState.errors,
             setFormValue: onFormChangeHandler,

src/index.js

@@ -67,7 +67,7 @@ export { useClickOutside } from "./utils/hooks";
 export { toLocaleDateString } from "./utils/datetime";
 
 // Foris URL
-export { ForisURLs, REFORIS_URL_PREFIX } from "./forisUrls";
+export { ForisURLs, REFORIS_URL_PREFIX } from "./utils/forisUrls";
 
 // Validation
 export {
@@ -78,7 +78,7 @@ export {
     validateDUID,
     validateMAC,
     validateMultipleEmails,
-} from "./validations";
+} from "./utils/validations";
 
 // Alert context
 export { AlertContextProvider, useAlert } from "./alertContext/AlertContext";

src/testUtils/mockGlobals.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright (C) 2020 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+// Mock babel (gettext)
+global._ = (str) => str;
+global.ngettext = (str) => str;
+global.babel = { format: (str) => str };
+global.ForisTranslations = { locale: "en" };

src/testUtils/setup.js

@@ -7,18 +7,13 @@
 
 import mockAxios from "jest-mock-axios";
 import moment from "moment-timezone";
+import "./mockGlobals";
 
 // Setup axios cleanup
 global.afterEach(() => {
     mockAxios.reset();
 });
 
-// Mock babel (gettext)
-global._ = (str) => str;
-global.ngettext = (str) => str;
-global.babel = { format: (str) => str };
-global.ForisTranslations = { locale: "en" };
-
 // Mock web sockets
 window.WebSocket = jest.fn();
 

src/utils/forisUrls.js

@@ -10,6 +10,8 @@ export const REFORIS_API_URL_PREFIX = `${REFORIS_URL_PREFIX}/api`;
 
 export const ForisURLs = {
     login: `${REFORIS_URL_PREFIX}/login`,
+    logout: `${REFORIS_URL_PREFIX}/logout`,
+
     static: `${REFORIS_URL_PREFIX}/static/reforis`,
     wifi: `${REFORIS_URL_PREFIX}/network-settings/wifi`,
 

src/utils/validations.js

@@ -23,7 +23,7 @@ const REs = {
     IPv4: /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
     IPv6: /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/,
     IPv6Prefix: /^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\/([0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8]))$/,
-    domain: /^([a-zA-Z0-9-]{1,63}\.?)*$/,
+    domain: /^[A-Za-z0-9][A-Za-z0-9.-]{1,255}$/,
     DUID: /^([0-9a-fA-F]{2}){4}([0-9a-fA-F]{2})*$/,
     MAC: /^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{2}$/,
     MultipleEmails: /^([a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)( *, *[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)*$/,

src/webSockets/WebSockets.js

@@ -7,7 +7,7 @@
 
 /* eslint no-console: "off" */
 
-import { ForisURLs } from "../forisUrls";
+import { ForisURLs } from "../utils/forisUrls";
 
 const PROTOCOL = window.location.protocol === "http:" ? "ws" : "wss";
 

styleguide.config.js

@@ -14,6 +14,10 @@ module.exports = {
             name: "Foris JS",
             content: "docs/intro.md",
         },
+        {
+            name: "Development (Linking)",
+            content: "docs/development.md",
+        },
         {
             name: "Foris forms",
             components: [
@@ -24,6 +28,14 @@ module.exports = {
             exampleMode: "expand",
             usageMode: "expand",
         },
+        {
+            name: "Alert Context",
+            components: [
+                "src/alertContext/AlertContext.js",
+            ],
+            exampleMode: "expand",
+            usageMode: "expand",
+        },
         {
             name: "Bootstrap components",
             description: "Set of bootstrap components.",
@@ -37,6 +49,7 @@ module.exports = {
     ],
     require: [
         "babel-polyfill",
+        path.join(__dirname, "src/testUtils/mockGlobals"),
         path.join(__dirname, "node_modules/bootstrap/dist/css/bootstrap.min.css"),
         path.join(__dirname, "node_modules/@fortawesome/fontawesome-free/css/all.min.css"),
     ],

translations/forisjs.pot

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-02-20 17:28+0100\n"
+"POT-Creation-Date: 2020-05-07 16:12+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -17,34 +17,6 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.8.0\n"
 
-#: src/validations.js:13
-msgid "This is not a valid IPv4 address."
-msgstr ""
-
-#: src/validations.js:14
-msgid "This is not a valid IPv6 address."
-msgstr ""
-
-#: src/validations.js:15
-msgid "This is not a valid IPv6 prefix."
-msgstr ""
-
-#: src/validations.js:16
-msgid "This is not a valid domain name."
-msgstr ""
-
-#: src/validations.js:17
-msgid "This is not a valid DUID."
-msgstr ""
-
-#: src/validations.js:18
-msgid "This is not a valid MAC address."
-msgstr ""
-
-#: src/validations.js:19
-msgid "Doesn't contain a list of emails separated by commas."
-msgstr ""
-
 #: src/api/utils.js:58
 msgid "The session is expired. Please log in again."
 msgstr ""
@@ -107,15 +79,15 @@ msgid ""
 "        "
 msgstr ""
 
-#: src/common/WiFiSettings/WiFiForm.js:82
+#: src/common/WiFiSettings/WiFiForm.js:81
 msgid "Wi-Fi ${deviceID + 1}"
 msgstr ""
 
-#: src/common/WiFiSettings/WiFiForm.js:84
+#: src/common/WiFiSettings/WiFiForm.js:83
 msgid "Enable"
 msgstr ""
 
-#: src/common/WiFiSettings/WiFiForm.js:215
+#: src/common/WiFiSettings/WiFiForm.js:214
 msgid "auto"
 msgstr ""
 
@@ -222,7 +194,7 @@ msgstr ""
 msgid "Settings saved successfully"
 msgstr ""
 
-#: src/form/components/ForisForm.js:165
+#: src/form/components/ForisForm.js:166
 msgid "Changes you made may not be saved. Are you sure you want to leave?"
 msgstr ""
 
@@ -242,3 +214,31 @@ msgstr ""
 msgid "An error occurred while fetching data."
 msgstr ""
 
+#: src/utils/validations.js:13
+msgid "This is not a valid IPv4 address."
+msgstr ""
+
+#: src/utils/validations.js:14
+msgid "This is not a valid IPv6 address."
+msgstr ""
+
+#: src/utils/validations.js:15
+msgid "This is not a valid IPv6 prefix."
+msgstr ""
+
+#: src/utils/validations.js:16
+msgid "This is not a valid domain name."
+msgstr ""
+
+#: src/utils/validations.js:17
+msgid "This is not a valid DUID."
+msgstr ""
+
+#: src/utils/validations.js:18
+msgid "This is not a valid MAC address."
+msgstr ""
+
+#: src/utils/validations.js:19
+msgid "Doesn't contain a list of emails separated by commas."
+msgstr ""
+