foris 5.2.0-beta.dd383ef1 → 5.3.0-beta.92ed7f1e

package/bootstrap/CopyInput.js

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

package/bootstrap/CopyInput.md

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

package/bootstrap/DownloadButton.js

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

package/bootstrap/Input.js

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

package/bootstrap/PasswordInput.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -21,14 +21,17 @@ PasswordInput.propTypes = {
     helpText: PropTypes.string,
     /** Use show/hide password button. */
     withEye: PropTypes.bool,
+    /** Use new-password in autocomplete attribute. */
+    newPass: PropTypes.bool,
 };
 
-export function PasswordInput({ withEye, ...props }) {
+export function PasswordInput({ withEye, newPass, ...props }) {
     const [isHidden, setHidden] = useState(true);
+
     return (
         <Input
             type={withEye && !isHidden ? "text" : "password"}
-            autoComplete={isHidden ? "new-password" : null}
+            autoComplete={newPass ? "new-password" : "current-password"}
             {...props}
         >
             {withEye ? (

package/bootstrap/Select.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2021 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.
@@ -18,20 +18,14 @@ Select.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     /** Help text message. */
     helpText: PropTypes.string,
-    /** Turns on/off alphabetical ordering of the Select options. */
-    customOrder: PropTypes.bool,
 };
 
-export function Select({ label, choices, helpText, customOrder, ...props }) {
+export function Select({ label, choices, helpText, ...props }) {
     const uid = useUID();
 
-    const keys = Object.keys(choices);
-    if (!customOrder) {
-        keys.sort((a, b) => a - b || a.toString().localeCompare(b.toString()));
-    }
-    const options = keys.map((key) => (
-        <option key={key} value={key}>
-            {choices[key]}
+    const options = Object.keys(choices).map((choice) => (
+        <option key={choice} value={choice}>
+            {choices[choice]}
         </option>
     ));
 

package/common/WiFiSettings/ResetWiFiSettings.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2021 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.
@@ -54,9 +54,9 @@ export function ResetWiFiSettings({ ws, endpoint }) {
         <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="text-right">
                 <Button

package/common/WiFiSettings/WiFiForm.js

@@ -64,6 +64,7 @@ DeviceForm.propTypes = {
         channel: PropTypes.string.isRequired,
         guest_wifi: PropTypes.object.isRequired,
         encryption: PropTypes.string.isRequired,
+        available_bands: PropTypes.array.isRequired,
     }),
     formErrors: PropTypes.object.isRequired,
     setFormValue: PropTypes.func.isRequired,
@@ -87,6 +88,7 @@ function DeviceForm({
     ...props
 }) {
     const deviceID = formData.id;
+    const bnds = formData.available_bands;
     return (
         <>
             <Switch
@@ -159,23 +161,29 @@ function DeviceForm({
                         value={formData.hwmode}
                         helpText={HELP_TEXTS.hwmode}
                         inline
-                        onChange={setFormValue((value) => ({
-                            devices: {
-                                [deviceIndex]: {
-                                    hwmode: { $set: value },
-                                    channel: { $set: "0" },
-                                    htmode: {
-                                        $set:
-                                            value === "11a" ? "VHT80" : "HT20",
+                        onChange={setFormValue((value) => {
+                            // Get the last item in an array of available HT modes
+                            const [best2] = bnds[0].available_htmodes.slice(-1);
+                            const [best5] = bnds[1].available_htmodes.slice(-1);
+                            return {
+                                devices: {
+                                    [deviceIndex]: {
+                                        hwmode: { $set: value },
+                                        channel: { $set: "0" },
+                                        htmode: {
+                                            $set:
+                                                // Set HT mode depending on checked frequency
+                                                value === "11a" ? best5 : best2,
+                                        },
                                     },
                                 },
-                            },
-                        }))}
+                            };
+                        })}
                         {...props}
                     />
 
                     <Select
-                        label={_("802.11n/ac mode")}
+                        label={_("802.11n/ac/ax mode")}
                         choices={getHtmodeChoices(formData)}
                         value={formData.htmode}
                         helpText={HELP_TEXTS.htmode}
@@ -209,7 +217,6 @@ function DeviceForm({
                                 [deviceIndex]: { encryption: { $set: value } },
                             },
                         }))}
-                        customOrder
                         {...props}
                     />
 

package/common/WiFiSettings/constants.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -13,6 +13,10 @@ export const HTMODES = {
     VHT40: _("802.11ac - 40 MHz wide channel"),
     VHT80: _("802.11ac - 80 MHz wide channel"),
     VHT160: _("802.11ac - 160 MHz wide channel"),
+    HE20: _("802.11ax - 20 MHz wide channel"),
+    HE40: _("802.11ax - 40 MHz wide channel"),
+    HE80: _("802.11ax - 80 MHz wide channel"),
+    HE160: _("802.11ax - 160 MHz wide channel"),
 };
 export const HWMODES = {
     "11g": "2.4",
@@ -25,28 +29,23 @@ export const ENCRYPTIONMODES = {
 };
 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 pre-shared key, that is required to connect to the network."
     ),
-    password: _(`
-        WPA2 pre-shared key, that is required to connect to the network.
-    `),
     hidden: _(
         "If set, network is not visible when scanning for available networks."
     ),
-    hwmode: _(`
-        The 2.4 GHz band is more widely supported by clients, but tends to have more interference. The 5 GHz band is a
-        newer standard and may not be supported by all your devices. It usually has less interference, but the signal
-        does not carry so well indoors.`),
-    htmode: _(`
-        Change this to adjust 802.11n/ac mode of operation. 802.11n with 40 MHz wide channels can yield higher
-        throughput but can cause more interference in the network. If you don't know what to choose, use the default
-        option with 20 MHz wide channel.
-    `),
-    guest_wifi_enabled: _(`
-        Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to
-        access the internet, but aren't allowed to access other devices and the configuration interface of the router.
-        Parameters of the guest network can be set in the Guest network tab.
-        `),
+    hwmode: _(
+        "The 2.4 GHz band is more widely supported by clients, but tends to have more interference. The 5 GHz band is a newer standard and may not be supported by all your devices. It usually has less interference, but the signal does not carry so well indoors."
+    ),
+    htmode: _(
+        "Change this to adjust 802.11n/ac/ax mode of operation. 802.11n with 40 MHz wide channels can yield higher throughput but can cause more interference in the network. If you don't know what to choose, use the default option with 20 MHz wide channel."
+    ),
+    guest_wifi_enabled: _(
+        "Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to access the internet, but aren't allowed to access other devices and the configuration interface of the router. Parameters of the guest network can be set in the Guest network tab."
+    ),
     wpa3: _(
         "The WPA3 standard is the new most secure encryption method that is suggested to be used with any device that supports it. The older devices without WPA3 support require older WPA2. If you experience issues with connecting older devices, try to enable WPA2."
     ),

package/index.js

@@ -20,6 +20,7 @@ export { API_STATE } from "./api/utils";
 export { Alert, ALERT_TYPES } from "./bootstrap/Alert";
 export { Button } from "./bootstrap/Button";
 export { CheckBox } from "./bootstrap/CheckBox";
+export { CopyInput } from "./bootstrap/CopyInput";
 export { DownloadButton } from "./bootstrap/DownloadButton";
 export { DataTimeInput } from "./bootstrap/DataTimeInput";
 export { EmailInput } from "./bootstrap/EmailInput";
@@ -82,6 +83,7 @@ export {
     validateIPv6Address,
     validateIPv6Prefix,
     validateDomain,
+    validateHostname,
     validateDUID,
     validateMAC,
     validateMultipleEmails,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "5.2.0-beta.dd383ef1",
+    "version": "5.3.0-beta.92ed7f1e",
     "description": "Set of components and utils for Foris and its plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -17,8 +17,8 @@
         "axios": "^0.21.1",
         "immutability-helper": "3.0.1",
         "moment": "^2.24.0",
-        "qrcode.react": "^0.9.3",
-        "react-datetime": "^3.0.4",
+        "qrcode.react": "^1.0.1",
+        "react-datetime": "^3.1.1",
         "react-uid": "^2.2.0"
     },
     "peerDependencies": {
@@ -47,16 +47,16 @@
         "file-loader": "^6.0.0",
         "jest": "^25.2.0",
         "jest-mock-axios": "^3.2.0",
-        "moment-timezone": "^0.5.28",
+        "moment-timezone": "^0.5.34",
         "prettier": "2.0.5",
         "prop-types": "15.7.2",
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2",
-        "react-styleguidist": "^7.3.11",
+        "react-styleguidist": "^11.2.0",
         "snapshot-diff": "^0.7.0",
         "style-loader": "^1.2.1",
-        "webpack": "^5.15.0"
+        "webpack": "^5.68.0"
     },
     "scripts": {
         "lint": "eslint src",