Merge branch 'remove-use-tooltip-hook' into 'dev'

Remove useTooltip hook

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

.gitlab-ci.yml

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

Makefile

@@ -11,6 +11,7 @@ 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

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "5.6.0",
+    "version": "5.6.1",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -22,7 +22,7 @@
         "react-uid": "^2.2.0"
     },
     "peerDependencies": {
-        "bootstrap": "4.4.1",
+        "bootstrap": "^5.3.3",
         "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
@@ -34,11 +34,11 @@
         "@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",
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "@testing-library/react": "^8.0.9",
         "babel-loader": "^8.1.0",
         "babel-polyfill": "^6.26.0",
-        "bootstrap": "^4.5.0",
+        "bootstrap": "^5.3.3",
         "css-loader": "^5.2.4",
         "eslint": "^6.8.0",
         "eslint-config-prettier": "^6.11.0",

src/bootstrap/Alert.js

@@ -38,16 +38,17 @@ Alert.defaultProps = {
 export function Alert({ type, onDismiss, children }) {
     return (
         <div
-            className={`alert ${
+            className={`alert alert-${type} ${
                 onDismiss ? "alert-dismissible" : ""
-            } alert-${type}`}
+            }`.trim()}
         >
-            {onDismiss ? (
-                <button type="button" className="close" onClick={onDismiss}>
-                    &times;
-                </button>
-            ) : (
-                false
+            {onDismiss && (
+                <button
+                    type="button"
+                    className="btn-close"
+                    onClick={onDismiss}
+                    aria-label={_("Close")}
+                />
             )}
             {children}
         </div>

src/bootstrap/Button.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2023 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.
@@ -31,24 +31,25 @@ export function Button({
     children,
     ...props
 }) {
-    let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
+    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>
     );
 }

src/bootstrap/CheckBox.js

@@ -24,25 +24,24 @@ CheckBox.defaultProps = {
 
 export function CheckBox({ label, helpText, disabled, ...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="mb-3 form-check">
+            <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>
     );
 }

src/bootstrap/Input.js

@@ -27,18 +27,21 @@ export const Input = forwardRef(
     ) => {
         const uid = useUID();
 
-        const inputClassName = `form-control ${className || ""} ${
+        const inputClassName = `${className || ""} ${
             error ? "is-invalid" : ""
         }`.trim();
 
         return (
-            <div className="form-group">
-                <label className={labelClassName} htmlFor={uid}>
+            <div className="mb-3">
+                <label
+                    className={`form-label ${labelClassName || ""}`.trim()}
+                    htmlFor={uid}
+                >
                     {label}
                 </label>
                 <div className={`input-group ${groupClassName || ""}`.trim()}>
                     <input
-                        className={inputClassName}
+                        className={`form-control ${inputClassName}`.trim()}
                         type={type}
                         id={uid}
                         ref={ref}
@@ -46,10 +49,12 @@ export const Input = forwardRef(
                     />
                     {children}
                 </div>
-                {error ? <div className="invalid-feedback">{error}</div> : null}
-                {helpText ? (
-                    <small className="form-text text-muted">{helpText}</small>
-                ) : null}
+                {error && <div className="invalid-feedback">{error}</div>}
+                {helpText && (
+                    <div className="form-text">
+                        <small>{helpText}</small>
+                    </div>
+                )}
             </div>
         );
     }

src/bootstrap/Modal.js

@@ -92,11 +92,10 @@ export function ModalHeader({ setShown, title }) {
             <h5 className="modal-title">{title}</h5>
             <button
                 type="button"
-                className="close"
+                className="btn-close"
                 onClick={() => setShown(false)}
-            >
-                <span aria-hidden="true">&times;</span>
-            </button>
+                aria-label={_("Close")}
+            />
         </div>
     );
 }

src/bootstrap/NumberInput.js

@@ -23,7 +23,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,
 };
 
@@ -49,27 +49,27 @@ export function NumberInput({ onChange, inlineText, value, ...props }) {
 
     return (
         <Input type="number" onChange={onChange} value={value} {...props}>
-            <div className="input-group-append">
-                {inlineText && <p className="input-group-text">{inlineText}</p>}
-                <button
-                    type="button"
-                    className="btn btn-outline-secondary"
-                    onMouseDown={() => enableIncrease(true)}
-                    onMouseUp={() => enableIncrease(false)}
-                    aria-label="Increase"
-                >
-                    <i className="fas fa-plus" />
-                </button>
-                <button
-                    type="button"
-                    className="btn btn-outline-secondary"
-                    onMouseDown={() => enableDecrease(true)}
-                    onMouseUp={() => enableDecrease(false)}
-                    aria-label="Decrease"
-                >
-                    <i className="fas fa-minus" />
-                </button>
-            </div>
+            {inlineText && (
+                <span className="input-group-text">{inlineText}</span>
+            )}
+            <button
+                type="button"
+                className="btn btn-outline-secondary"
+                onMouseDown={() => enableIncrease(true)}
+                onMouseUp={() => enableIncrease(false)}
+                aria-label="Increase"
+            >
+                <i className="fas fa-plus" />
+            </button>
+            <button
+                type="button"
+                className="btn btn-outline-secondary"
+                onMouseDown={() => enableDecrease(true)}
+                onMouseUp={() => enableDecrease(false)}
+                aria-label="Decrease"
+            >
+                <i className="fas fa-minus" />
+            </button>
         </Input>
     );
 }

src/bootstrap/PasswordInput.js

@@ -34,24 +34,20 @@ export function PasswordInput({ withEye, newPass, ...props }) {
             autoComplete={newPass ? "new-password" : "current-password"}
             {...props}
         >
-            {withEye ? (
-                <div className="input-group-append">
-                    <button
-                        type="button"
-                        className="input-group-text"
-                        onClick={(e) => {
-                            e.preventDefault();
-                            setHidden((shouldBeHidden) => !shouldBeHidden);
-                        }}
-                    >
-                        <i
-                            className={`fa ${
-                                isHidden ? "fa-eye" : "fa-eye-slash"
-                            }`}
-                        />
-                    </button>
-                </div>
-            ) : null}
+            {withEye && (
+                <button
+                    type="button"
+                    className="input-group-text"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        setHidden((shouldBeHidden) => !shouldBeHidden);
+                    }}
+                >
+                    <i
+                        className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`}
+                    />
+                </button>
+            )}
         </Input>
     );
 }

src/bootstrap/RadioSet.js

@@ -17,7 +17,7 @@ RadioSet.propTypes = {
     /** Choices . */
     choices: PropTypes.arrayOf(
         PropTypes.shape({
-            /** Choice lable . */
+            /** Choice label . */
             label: PropTypes.oneOfType([
                 PropTypes.string,
                 PropTypes.element,
@@ -64,7 +64,7 @@ export function RadioSet({
     });
 
     return (
-        <div className="form-group">
+        <div className="mb-3">
             {label && (
                 <label htmlFor={uid} className="d-block">
                     {label}
@@ -72,7 +72,9 @@ export function RadioSet({
             )}
             {radios}
             {helpText && (
-                <small className="form-text text-muted">{helpText}</small>
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
             )}
         </div>
     );
@@ -94,24 +96,24 @@ export function Radio({ label, id, helpText, inline, ...props }) {
     return (
         <>
             <div
-                className={`custom-control custom-radio ${
-                    inline ? "custom-control-inline" : ""
+                className={`mb-2 ${
+                    inline ? "form-check form-check-inline" : ""
                 }`.trim()}
             >
                 <input
                     id={id}
-                    className="custom-control-input"
+                    className="form-check-input me-2"
                     type="radio"
                     {...props}
                 />
-                <label className="custom-control-label" htmlFor={id}>
+                <label className="form-check-label" htmlFor={id}>
                     {label}
+                    {helpText && (
+                        <div className="form-text">
+                            <small>{helpText}</small>
+                        </div>
+                    )}
                 </label>
-                {helpText && (
-                    <small className="form-text text-muted mt-0 mb-3">
-                        {helpText}
-                    </small>
-                )}
             </div>
         </>
     );

src/bootstrap/Select.js

@@ -30,14 +30,18 @@ export function Select({ label, choices, helpText, ...props }) {
     ));
 
     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>
     );
 }

src/bootstrap/Spinner.css

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

src/bootstrap/Spinner.js

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

src/bootstrap/Switch.js

@@ -22,28 +22,30 @@ Switch.propTypes = {
 
 export function Switch({ label, helpText, switchHeading, ...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 mb-3 ${
+                switchHeading ? "d-flex align-items-center" : null
+            }`.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>
     );
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/common/WiFiSettings/ResetWiFiSettings.js

@@ -58,7 +58,7 @@ export function ResetWiFiSettings({ ws, endpoint }) {
                     "If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values."
                 )}
             </p>
-            <div className="text-right">
+            <div className="text-end">
                 <Button
                     className="btn-primary"
                     forisFormSize

src/common/WiFiSettings/WiFiForm.js

@@ -92,7 +92,7 @@ function DeviceForm({
     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: {
@@ -119,12 +119,10 @@ 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

src/common/WiFiSettings/WiFiQRCode.js

@@ -87,7 +87,7 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
                         createAndDownloadPdf(SSID, password);
                     }}
                 >
-                    <i className="fas fa-arrow-down mr-2" />
+                    <i className="fas fa-file-download me-2" />
                     {_("Download PDF")}
                 </Button>
             </ModalFooter>

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

@@ -5,7 +5,7 @@ exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
 - First value
 + Second value
 
-@@ -241,207 +241,95 @@
+@@ -243,207 +243,95 @@
               value=\\"0\\"
             >
               auto
@@ -255,56 +255,56 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
   >
     <form>
       <div
-        class="form-group switch"
+        class="form-check form-switch mb-3 d-flex align-items-center"
       >
-        <div
-          class="custom-control custom-switch custom-control-inline switch-heading"
+        <input
+          class="form-check-input me-2"
+          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"
+          <h2
+            class="mb-0"
           >
-            <h2>
-              Wi-Fi 1
-            </h2>
-          </label>
-        </div>
+            Wi-Fi 1
+          </h2>
+        </label>
       </div>
       <hr />
       <div
-        class="form-group switch"
+        class="form-check form-switch mb-3 d-flex align-items-center"
       >
-        <div
-          class="custom-control custom-switch custom-control-inline switch-heading"
+        <input
+          class="form-check-input me-2"
+          id="2"
+          role="switch"
+          type="checkbox"
+        />
+        <label
+          class="form-check-label"
+          for="2"
         >
-          <input
-            class="custom-control-input"
-            id="2"
-            type="checkbox"
-          />
-          <label
-            class="custom-control-label"
-            for="2"
+          <h2
+            class="mb-0"
           >
-            <h2>
-              Wi-Fi 2
-            </h2>
-          </label>
-        </div>
+            Wi-Fi 2
+          </h2>
+        </label>
       </div>
       <div
-        class="text-right"
+        class="text-end"
       >
         <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>
     </form>
@@ -319,13 +319,15 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
       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
-      class="text-right"
+      class="text-end"
     >
       <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="button"
       >
-        Reset Wi-Fi Settings
+        <span>
+          Reset Wi-Fi Settings
+        </span>
       </button>
     </div>
   </div>
@@ -337,16 +339,17 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 - First value
 + Second value
 
-@@ -524,10 +524,92 @@
-            >
+@@ -527,10 +527,94 @@
+            <small>
               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.
             </small>
           </div>
         </div>
 +       <div
-+         class=\\"form-group\\"
++         class=\\"mb-3\\"
 +       >
 +         <label
++           class=\\"form-label\\"
 +           for=\\"24\\"
 +         >
 +           SSID
@@ -376,16 +379,19 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +             </button>
 +           </div>
 +         </div>
-+         <small
-+           class=\\"form-text text-muted\\"
++         <div
++           class=\\"form-text\\"
 +         >
-+           SSID which contains non-standard characters could cause problems on some devices.
-+         </small>
++           <small>
++             SSID which contains non-standard characters could cause problems on some devices.
++           </small>
++         </div>
 +       </div>
 +       <div
-+         class=\\"form-group\\"
++         class=\\"mb-3\\"
 +       >
 +         <label
++           class=\\"form-label\\"
 +           for=\\"25\\"
 +         >
 +           Password
@@ -395,53 +401,51 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +         >
 +           <input
 +             autocomplete=\\"current-password\\"
-+             class=\\"form-control  is-invalid\\"
++             class=\\"form-control is-invalid\\"
 +             id=\\"25\\"
 +             required=\\"\\"
 +             type=\\"password\\"
 +             value=\\"\\"
 +           />
-+           <div
-+             class=\\"input-group-append\\"
++           <button
++             class=\\"input-group-text\\"
++             type=\\"button\\"
 +           >
-+             <button
-+               class=\\"input-group-text\\"
-+               type=\\"button\\"
-+             >
-+               <i
-+                 class=\\"fa fa-eye\\"
-+               />
-+             </button>
-+           </div>
++             <i
++               class=\\"fa fa-eye\\"
++             />
++           </button>
 +         </div>
 +         <div
 +           class=\\"invalid-feedback\\"
 +         >
 +           Password must contain at least 8 symbols
 +         </div>
-+         <small
-+           class=\\"form-text text-muted\\"
++         <div
++           class=\\"form-text\\"
 +         >
-+           WPA2/3 pre-shared key, that is required to connect to the network.
-+         </small>
++           <small>
++             WPA2/3 pre-shared key, that is required to connect to the network.
++           </small>
++         </div>
 +       </div>
         <hr />
         <div
-          class=\\"form-group switch\\"
+          class=\\"form-check form-switch mb-3 d-flex align-items-center\\"
         >
-          <div
-@@ -551,10 +633,11 @@
+          <input
+@@ -553,10 +637,11 @@
         <div
-          class=\\"text-right\\"
+          class=\\"text-end\\"
         >
           <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\\"
           >
-            Save
-          </button>
-        </div>"
+            <span>
+              Save
+            </span>"
 `;
 
 exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
@@ -449,16 +453,17 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 - First value
 + Second value
 
-@@ -22,10 +22,512 @@
-                Wi-Fi 1
-              </h2>
-            </label>
-          </div>
+@@ -21,10 +21,516 @@
+            >
+              Wi-Fi 1
+            </h2>
+          </label>
         </div>
 +       <div
-+         class=\\"form-group\\"
++         class=\\"mb-3\\"
 +       >
 +         <label
++           class=\\"form-label\\"
 +           for=\\"4\\"
 +         >
 +           SSID
@@ -473,32 +478,31 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             type=\\"text\\"
 +             value=\\"TestSSID1\\"
 +           />
-+           <div
-+             class=\\"input-group-append\\"
++           <button
++             class=\\"input-group-text\\"
++             type=\\"button\\"
 +           >
-+             <button
-+               class=\\"input-group-text\\"
-+               type=\\"button\\"
-+             >
-+               <img
-+                 alt=\\"QR\\"
-+                 src=\\"/reforis/static/reforis/imgs/QR_icon.svg\\"
-+                 style=\\"opacity: 0.67;\\"
-+                 width=\\"20\\"
-+               />
-+             </button>
-+           </div>
++             <img
++               alt=\\"QR\\"
++               src=\\"/reforis/static/reforis/imgs/QR_icon.svg\\"
++               style=\\"opacity: 0.67;\\"
++               width=\\"20\\"
++             />
++           </button>
 +         </div>
-+         <small
-+           class=\\"form-text text-muted\\"
++         <div
++           class=\\"form-text\\"
 +         >
-+           SSID which contains non-standard characters could cause problems on some devices.
-+         </small>
++           <small>
++             SSID which contains non-standard characters could cause problems on some devices.
++           </small>
++         </div>
 +       </div>
 +       <div
-+         class=\\"form-group\\"
++         class=\\"mb-3\\"
 +       >
 +         <label
++           class=\\"form-label\\"
 +           for=\\"5\\"
 +         >
 +           Password
@@ -514,51 +518,48 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             type=\\"password\\"
 +             value=\\"TestPass\\"
 +           />
-+           <div
-+             class=\\"input-group-append\\"
++           <button
++             class=\\"input-group-text\\"
++             type=\\"button\\"
 +           >
-+             <button
-+               class=\\"input-group-text\\"
-+               type=\\"button\\"
-+             >
-+               <i
-+                 class=\\"fa fa-eye\\"
-+               />
-+             </button>
-+           </div>
++             <i
++               class=\\"fa fa-eye\\"
++             />
++           </button>
 +         </div>
-+         <small
-+           class=\\"form-text text-muted\\"
++         <div
++           class=\\"form-text\\"
 +         >
-+           WPA2/3 pre-shared key, that is required to connect to the network.
-+         </small>
++           <small>
++             WPA2/3 pre-shared key, that is required to connect to the network.
++           </small>
++         </div>
 +       </div>
 +       <div
-+         class=\\"form-group\\"
++         class=\\"form-check form-switch mb-3 null\\"
 +       >
-+         <div
-+           class=\\"custom-control custom-switch\\"
++         <input
++           class=\\"form-check-input\\"
++           id=\\"6\\"
++           role=\\"switch\\"
++           type=\\"checkbox\\"
++         />
++         <label
++           class=\\"form-check-label\\"
++           for=\\"6\\"
 +         >
-+           <input
-+             class=\\"custom-control-input\\"
-+             id=\\"6\\"
-+             type=\\"checkbox\\"
-+           />
-+           <label
-+             class=\\"custom-control-label\\"
-+             for=\\"6\\"
-+           >
-+             Hide SSID
-+           </label>
-+           <small
-+             class=\\"form-text text-muted mt-0 mb-3\\"
-+           >
++           Hide SSID
++         </label>
++         <div
++           class=\\"form-text\\"
++         >
++           <small>
 +             If set, network is not visible when scanning for available networks.
 +           </small>
 +         </div>
 +       </div>
 +       <div
-+         class=\\"form-group\\"
++         class=\\"mb-3\\"
 +       >
 +         <label
 +           class=\\"d-block\\"
@@ -567,56 +568,59 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +           GHz
 +         </label>
 +         <div
-+           class=\\"custom-control custom-radio custom-control-inline\\"
++           class=\\"mb-2 form-check form-check-inline\\"
 +         >
 +           <input
-+             class=\\"custom-control-input\\"
++             class=\\"form-check-input me-2\\"
 +             id=\\"hwmode-0-0\\"
 +             name=\\"hwmode-0\\"
 +             type=\\"radio\\"
 +             value=\\"11g\\"
 +           />
 +           <label
-+             class=\\"custom-control-label\\"
++             class=\\"form-check-label\\"
 +             for=\\"hwmode-0-0\\"
 +           >
 +             2.4
 +           </label>
 +         </div>
 +         <div
-+           class=\\"custom-control custom-radio custom-control-inline\\"
++           class=\\"mb-2 form-check form-check-inline\\"
 +         >
 +           <input
 +             checked=\\"\\"
-+             class=\\"custom-control-input\\"
++             class=\\"form-check-input me-2\\"
 +             id=\\"hwmode-0-1\\"
 +             name=\\"hwmode-0\\"
 +             type=\\"radio\\"
 +             value=\\"11a\\"
 +           />
 +           <label
-+             class=\\"custom-control-label\\"
++             class=\\"form-check-label\\"
 +             for=\\"hwmode-0-1\\"
 +           >
 +             5
 +           </label>
 +         </div>
-+         <small
-+           class=\\"form-text text-muted\\"
++         <div
++           class=\\"form-text\\"
 +         >
-+           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.
-+         </small>
++           <small>
++             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.
++           </small>
++         </div>
 +       </div>
 +       <div
-+         class=\\"form-group\\"
++         class=\\"mb-3\\"
 +       >
 +         <label
++           class=\\"form-label\\"
 +           for=\\"8\\"
 +         >
 +           802.11n/ac/ax mode
 +         </label>
 +         <select
-+           class=\\"custom-select\\"
++           class=\\"form-select\\"
 +           id=\\"8\\"
 +         >
 +           <option
@@ -650,22 +654,25 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             802.11ac - 80 MHz wide channel
 +           </option>
 +         </select>
-+         <small
-+           class=\\"form-text text-muted\\"
++         <div
++           class=\\"form-text\\"
 +         >
-+           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.
-+         </small>
++           <small>
++             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.
++           </small>
++         </div>
 +       </div>
 +       <div
-+         class=\\"form-group\\"
++         class=\\"mb-3\\"
 +       >
 +         <label
++           class=\\"form-label\\"
 +           for=\\"9\\"
 +         >
 +           Channel
 +         </label>
 +         <select
-+           class=\\"custom-select\\"
++           class=\\"form-select\\"
 +           id=\\"9\\"
 +         >
 +           <option
@@ -876,15 +883,16 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +         </select>
 +       </div>
 +       <div
-+         class=\\"form-group\\"
++         class=\\"mb-3\\"
 +       >
 +         <label
++           class=\\"form-label\\"
 +           for=\\"10\\"
 +         >
 +           Encryption
 +         </label>
 +         <select
-+           class=\\"custom-select\\"
++           class=\\"form-select\\"
 +           id=\\"10\\"
 +         >
 +           <option
@@ -903,63 +911,63 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             WPA2 only
 +           </option>
 +         </select>
-+         <small
-+           class=\\"form-text text-muted\\"
++         <div
++           class=\\"form-text\\"
 +         >
-+           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.
-+         </small>
++           <small>
++             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.
++           </small>
++         </div>
 +       </div>
 +       <div
-+         class=\\"form-group\\"
++         class=\\"form-check form-switch mb-3 null\\"
 +       >
-+         <div
-+           class=\\"custom-control custom-switch\\"
++         <input
++           class=\\"form-check-input\\"
++           id=\\"11\\"
++           role=\\"switch\\"
++           type=\\"checkbox\\"
++         />
++         <label
++           class=\\"form-check-label\\"
++           for=\\"11\\"
 +         >
-+           <input
-+             class=\\"custom-control-input\\"
-+             id=\\"11\\"
-+             type=\\"checkbox\\"
-+           />
-+           <label
-+             class=\\"custom-control-label\\"
-+             for=\\"11\\"
-+           >
-+             Disable Management Frame Protection
-+           </label>
-+           <small
-+             class=\\"form-text text-muted mt-0 mb-3\\"
-+           >
++           Disable Management Frame Protection
++         </label>
++         <div
++           class=\\"form-text\\"
++         >
++           <small>
 +             In case you have trouble connecting to WiFi Access Point, try disabling Management Frame Protection.
 +           </small>
 +         </div>
 +       </div>
 +       <div
-+         class=\\"form-group\\"
++         class=\\"form-check form-switch mb-3 null\\"
 +       >
-+         <div
-+           class=\\"custom-control custom-switch\\"
++         <input
++           class=\\"form-check-input\\"
++           id=\\"12\\"
++           role=\\"switch\\"
++           type=\\"checkbox\\"
++         />
++         <label
++           class=\\"form-check-label\\"
++           for=\\"12\\"
 +         >
-+           <input
-+             class=\\"custom-control-input\\"
-+             id=\\"12\\"
-+             type=\\"checkbox\\"
-+           />
-+           <label
-+             class=\\"custom-control-label\\"
-+             for=\\"12\\"
-+           >
-+             Enable Guest Wi-Fi
-+           </label>
-+           <small
-+             class=\\"form-text text-muted mt-0 mb-3\\"
-+           >
++           Enable Guest Wi-Fi
++         </label>
++         <div
++           class=\\"form-text\\"
++         >
++           <small>
 +             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.
 +           </small>
 +         </div>
 +       </div>
         <hr />
         <div
-          class=\\"form-group switch\\"
+          class=\\"form-check form-switch mb-3 d-flex align-items-center\\"
         >
-          <div"
+          <input"
 `;

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

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

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

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

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

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

src/form/__tests__/__snapshots__/SubmitButton.test.js.snap

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

src/form/components/ForisForm.js

@@ -190,7 +190,7 @@ export function ForisForm({
             <Prompt message={getMessageOnLeavingPage} />
             <form onSubmit={onSubmit} ref={formReference}>
                 {childrenWithFormProps}
-                <div className="text-right">
+                <div className="text-end">
                     <SubmitButton
                         state={getSubmitButtonState()}
                         disabled={submitButtonIsDisabled}

src/utils/hooks.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.

translations/cs/LC_MESSAGES/forisjs.po

@@ -8,15 +8,16 @@ msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
 "POT-Creation-Date: 2022-12-02 15:54+0100\n"
-"PO-Revision-Date: 2022-03-15 22:41+0000\n"
-"Last-Translator: Koli <lukas.koluch@gmail.com>\n"
+"PO-Revision-Date: 2023-11-23 16:03+0000\n"
+"Last-Translator: Lukas Jelinek <lukas.jelinek@nic.cz>\n"
+"Language-Team: Czech <https://hosted.weblate.org/projects/turris/foris-js/cs/"
+">\n"
 "Language: cs\n"
-"Language-Team: Czech <https://hosted.weblate.org/projects/turris/foris-"
-"js/cs/>\n"
-"Plural-Forms: nplurals=3; plural=(n==1) ? 0 : (n>=2 && n<=4) ? 1 : 2;\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=3; plural=(n==1) ? 0 : (n>=2 && n<=4) ? 1 : 2;\n"
+"X-Generator: Weblate 5.2.1-rc\n"
 "Generated-By: Babel 2.11.0\n"
 
 #: src/api/utils.js:61
@@ -37,11 +38,11 @@ msgstr "Došlo k neznámé chybě v aplikačním programovém rozhraní."
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copied!"
-msgstr ""
+msgstr "Zkopírováno!"
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copy"
-msgstr ""
+msgstr "Kopírovat"
 
 #: src/common/RebootButton.js:27
 msgid "Reboot request failed."
@@ -61,7 +62,7 @@ msgstr "Opravdu chcete router restartovat?"
 
 #: src/common/RebootButton.js:71
 msgid "Cancel"
-msgstr "Storno"
+msgstr "Zrušit"
 
 #: src/common/RebootButton.js:73
 msgid "Confirm reboot"
@@ -78,7 +79,7 @@ msgstr "Nastavení Wi-Fi jsou uvedena do výchozího stavu."
 #: src/common/WiFiSettings/ResetWiFiSettings.js:55
 #: src/common/WiFiSettings/ResetWiFiSettings.js:69
 msgid "Reset Wi-Fi Settings"
-msgstr "Resetovat nastavení Wi-Fi"
+msgstr "Reset nastavení Wi-Fi"
 
 #: src/common/WiFiSettings/ResetWiFiSettings.js:57
 msgid ""
@@ -86,6 +87,9 @@ msgid ""
 "Fi settings. Note that this will remove the current Wi-Fi configuration "
 "and restore the default values."
 msgstr ""
+"Pokud se počet bezdrátových karet neshoduje, můžete zkusit obnovit nastavení "
+"Wi-Fi. Je třeba upozornit, že se tím odstraní aktuální konfigurace Wi-Fi a "
+"obnoví se výchozí hodnoty."
 
 #: src/common/WiFiSettings/WiFiForm.js:95
 msgid "Wi-Fi ${deviceID + 1}"
@@ -101,9 +105,8 @@ msgid "Hide SSID"
 msgstr "Skrýt SSID"
 
 #: src/common/WiFiSettings/WiFiForm.js:186
-#, fuzzy
 msgid "802.11n/ac/ax mode"
-msgstr "Režim 802.11n/ac"
+msgstr "Režim 802.11n/ac/ax"
 
 #: src/common/WiFiSettings/WiFiForm.js:199
 msgid "Channel"
@@ -115,22 +118,23 @@ msgstr "Šifrování"
 
 #: src/common/WiFiSettings/WiFiForm.js:226
 msgid "Disable Management Frame Protection"
-msgstr ""
+msgstr "Vypnout Management Frame Protection"
 
 #: src/common/WiFiSettings/WiFiForm.js:227
 msgid ""
 "In case you have trouble connecting to WiFi Access Point, try disabling "
 "Management Frame Protection."
 msgstr ""
+"Máte-li problémy při připojování k přístupovému bodu Wi-Fi, zkuste vypnout "
+"Management Frame Protection."
 
 #: src/common/WiFiSettings/WiFiForm.js:262
 msgid "auto"
 msgstr "automaticky"
 
 #: src/common/WiFiSettings/WiFiForm.js:303
-#, fuzzy
 msgid "Custom"
-msgstr "automaticky"
+msgstr "Uživatelsky určené"
 
 #: src/common/WiFiSettings/WiFiGuestForm.js:42
 msgid "Enable Guest Wi-Fi"
@@ -166,9 +170,8 @@ msgstr "Je třeba, aby heslo obsahovalo alespoň 8 znaků"
 
 #: src/common/WiFiSettings/WiFiSettings.js:90
 #: src/common/WiFiSettings/WiFiSettings.js:109
-#, fuzzy
 msgid "Password must not contain more than 63 symbols"
-msgstr "Je třeba, aby heslo obsahovalo alespoň 8 znaků"
+msgstr "Heslo nesmí obsahovat více než 63 znaků"
 
 #: src/common/WiFiSettings/constants.js:9
 msgid "Disabled"
@@ -199,24 +202,20 @@ msgid "802.11ac - 160 MHz wide channel"
 msgstr "802.11ac – kanál šíře 160 MHz"
 
 #: src/common/WiFiSettings/constants.js:16
-#, fuzzy
 msgid "802.11ax - 20 MHz wide channel"
-msgstr "802.11ac – kanál šíře 20 MHz"
+msgstr "802.11ax – kanál šíře 20 MHz"
 
 #: src/common/WiFiSettings/constants.js:17
-#, fuzzy
 msgid "802.11ax - 40 MHz wide channel"
-msgstr "802.11ac – kanál šíře 40 MHz"
+msgstr "802.11ax – kanál šíře 40 MHz"
 
 #: src/common/WiFiSettings/constants.js:18
-#, fuzzy
 msgid "802.11ax - 80 MHz wide channel"
-msgstr "802.11ac – kanál šíře 80 MHz"
+msgstr "802.11ax – kanál šíře 80 MHz"
 
 #: src/common/WiFiSettings/constants.js:19
-#, fuzzy
 msgid "802.11ax - 160 MHz wide channel"
-msgstr "802.11ac – kanál šíře 160 MHz"
+msgstr "802.11ax – kanál šíře 160 MHz"
 
 #: src/common/WiFiSettings/constants.js:26
 msgid "WPA3 only"
@@ -224,7 +223,7 @@ msgstr "pouze WPA3"
 
 #: src/common/WiFiSettings/constants.js:27
 msgid "WPA3 with WPA2 as fallback (default)"
-msgstr ""
+msgstr "WPA3, nouzově WPA2 (výchozí)"
 
 #: src/common/WiFiSettings/constants.js:28
 msgid "WPA2 only"
@@ -239,13 +238,8 @@ msgstr ""
 "problémy."
 
 #: src/common/WiFiSettings/constants.js:34
-#, fuzzy
 msgid "WPA2/3 pre-shared key, that is required to connect to the network."
-msgstr ""
-"\n"
-"        WPA2 předsdílený klíč, který je vyžadován pro připojení se k "
-"síti.\n"
-"    "
+msgstr "Předsdílený klíč WPA2/3, který je vyžadován pro připojení se k síti."
 
 #: src/common/WiFiSettings/constants.js:37
 msgid "If set, network is not visible when scanning for available networks."
@@ -254,38 +248,29 @@ msgstr ""
 "vyhledávat dostupné sítě."
 
 #: src/common/WiFiSettings/constants.js:40
-#, fuzzy
 msgid ""
 "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."
 msgstr ""
-"\n"
-"        Pásmo 2,4 GHz je v klientských zařízeních podporováno nejčastěji,"
-" ale bývá více zarušené. Pásmo 5 GHz je\n"
-"        novější standard a nemusí být podporováno všemi vámi používanými "
-"zařízeními. Obvykle bývá méně zarušené,\n"
-"        ale signál se hůře šíři uvnitř budov."
+"Pásmo 2,4 GHz je v klientských zařízeních podporováno nejčastěji, bývá ale "
+"více zarušené. Pásmo 5 GHz je novější standard a nemusí být podporováno "
+"všemi vámi používanými zařízeními. Obvykle bývá méně zarušené, signál se ale "
+"hůře šíří uvnitř budov."
 
 #: src/common/WiFiSettings/constants.js:43
-#, fuzzy
 msgid ""
 "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."
 msgstr ""
-"\n"
-"        Změna tohoto upraví režim fungování 802.11n/ac. 802.11n s kanály "
-"o šíři 40 MHz kanály může pomoci k vyšší\n"
-"        propustnosti, ale je náchylnější na rušení. Pokud nevíte co "
-"zvolit, použijte výchozí volbu s kanálem šíře\n"
-"        20 MHz.\n"
-"    "
+"Změna tohoto parametru upraví režim fungování 802.11n/ac. 802.11n s kanály o "
+"šíři 40 MHz může pomoci k vyšší propustnosti, je ale náchylnější na rušení. "
+"Pokud nevíte co zvolit, použijte výchozí volbu s kanálem šíře 20 MHz."
 
 #: src/common/WiFiSettings/constants.js:46
-#, fuzzy
 msgid ""
 "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 "
@@ -293,14 +278,10 @@ msgid ""
 "router. Parameters of the guest network can be set in the Guest network "
 "tab."
 msgstr ""
-"\n"
-"        Zapíná Wi-Fi pro hosty, která je oddělená od místní sítě (LAN). "
-"Zařízením připojeným k této síti je umožněn\n"
-"        přístup do Internetu, ale už ne na ostatní zařízení a k rozhraní "
-"pro nastavování směrovače.\n"
-"        Parametry sítě pro hosty je možné nastavit na panelu „Síť pro "
-"hosty“.\n"
-"        "
+"Zapíná Wi-Fi pro hosty, která je oddělená od místní sítě (LAN). Zařízením "
+"připojeným k této síti je umožněn přístup do Internetu, ale už ne na ostatní "
+"zařízení a k rozhraní pro nastavování směrovače. Parametry sítě pro hosty je "
+"možné nastavit na panelu „Síť pro hosty“."
 
 #: src/common/WiFiSettings/constants.js:49
 msgid ""
@@ -309,6 +290,10 @@ msgid ""
 "without WPA3 support require older WPA2. If you experience issues with "
 "connecting older devices, try to enable WPA2."
 msgstr ""
+"Standard WPA3 je nová nejbezpečnější metoda, již se doporučuje používat se "
+"všemi zařízeními, která ji podporují. Starší zařízení bez podpory WPA3 "
+"potřebují starší WPA2. Zaznamenáte-li problémy s připojováním starších "
+"zařízení, zkuste zapnout WPA2."
 
 #: src/form/components/ForisForm.js:121
 msgid "Settings saved successfully"
@@ -353,7 +338,6 @@ msgid "This is not a valid domain name."
 msgstr "Toto není platné doménové jméno."
 
 #: src/utils/validations.js:17
-#, fuzzy
 msgid "This is not a valid hostname."
 msgstr "Toto není platné doménové jméno."
 
@@ -394,4 +378,3 @@ msgstr "Neobsahuje seznam e-mailů oddělených čárkou."
 #~ "ale, že\n"
 #~ "se tím odstraní aktuální konfigurace a vrátí se výchozí hodnoty.\n"
 #~ "        "
-

translations/de/LC_MESSAGES/forisjs.po

@@ -8,15 +8,16 @@ msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
 "POT-Creation-Date: 2022-12-02 15:54+0100\n"
-"PO-Revision-Date: 2021-09-24 19:38+0000\n"
-"Last-Translator: CryptKid <CryptKiddie@chaospott.de>\n"
+"PO-Revision-Date: 2024-01-04 21:08+0000\n"
+"Last-Translator: Erik Pfannenstein <debianignatz@gmx.de>\n"
+"Language-Team: German <https://hosted.weblate.org/projects/turris/foris-js/"
+"de/>\n"
 "Language: de\n"
-"Language-Team: German <https://hosted.weblate.org/projects/turris/foris-"
-"js/de/>\n"
-"Plural-Forms: nplurals=2; plural=n != 1;\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: Weblate 5.4-dev\n"
 "Generated-By: Babel 2.11.0\n"
 
 #: src/api/utils.js:61
@@ -37,11 +38,11 @@ msgstr "Ein unbekannter API-Fehler ist aufgetreten."
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copied!"
-msgstr ""
+msgstr "Kopiert!"
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copy"
-msgstr ""
+msgstr "Kopieren"
 
 #: src/common/RebootButton.js:27
 msgid "Reboot request failed."
@@ -88,6 +89,9 @@ msgid ""
 "Fi settings. Note that this will remove the current Wi-Fi configuration "
 "and restore the default values."
 msgstr ""
+"Falls die Anzahl der WLAN-Karten nicht korrekt ist, könnte es helfen, die "
+"WLAN-Einstellungen zurückzusetzen. Beachten Sie, dass dabei die aktuelle "
+"WLAN-Konfiguration mit den Werkseinstellungen überschrieben wird."
 
 #: src/common/WiFiSettings/WiFiForm.js:95
 msgid "Wi-Fi ${deviceID + 1}"
@@ -103,9 +107,8 @@ msgid "Hide SSID"
 msgstr "SSID verbergen"
 
 #: src/common/WiFiSettings/WiFiForm.js:186
-#, fuzzy
 msgid "802.11n/ac/ax mode"
-msgstr "802.11n/ac Modus"
+msgstr "802.11n/ac/ax-Modus"
 
 #: src/common/WiFiSettings/WiFiForm.js:199
 msgid "Channel"
@@ -113,26 +116,27 @@ msgstr "Kanal"
 
 #: src/common/WiFiSettings/WiFiForm.js:211
 msgid "Encryption"
-msgstr ""
+msgstr "Verschlüsselung"
 
 #: src/common/WiFiSettings/WiFiForm.js:226
 msgid "Disable Management Frame Protection"
-msgstr ""
+msgstr "Management Frame Protection abschalten"
 
 #: src/common/WiFiSettings/WiFiForm.js:227
 msgid ""
 "In case you have trouble connecting to WiFi Access Point, try disabling "
 "Management Frame Protection."
 msgstr ""
+"Falls Sie beim Verbinden mit dem WiFi-Access-Point Probleme haben, schalten "
+"Sie testweise die Management Frame Protection ab."
 
 #: src/common/WiFiSettings/WiFiForm.js:262
 msgid "auto"
 msgstr "automatisch"
 
 #: src/common/WiFiSettings/WiFiForm.js:303
-#, fuzzy
 msgid "Custom"
-msgstr "automatisch"
+msgstr "Benutzerdefiniert"
 
 #: src/common/WiFiSettings/WiFiGuestForm.js:42
 msgid "Enable Guest Wi-Fi"
@@ -149,17 +153,17 @@ msgstr "PDF herunterladen"
 #: src/common/WiFiSettings/WiFiSettings.js:82
 #: src/common/WiFiSettings/WiFiSettings.js:98
 msgid "SSID can't be longer than 32 symbols"
-msgstr "SSID darf nicht länger als 32 Symbole sein"
+msgstr "Die SSID darf nicht länger als 32 Zeichen sein"
 
 #: src/common/WiFiSettings/WiFiSettings.js:83
 #: src/common/WiFiSettings/WiFiSettings.js:100
 msgid "SSID can't be empty"
-msgstr "SSID darf nicht leer sein"
+msgstr "Die SSID darf nicht leer sein"
 
 #: src/common/WiFiSettings/WiFiSettings.js:85
 #: src/common/WiFiSettings/WiFiSettings.js:102
 msgid "SSID can't be longer than 32 bytes"
-msgstr "SSID darf nicht länger als 32 Symbole sein"
+msgstr "Die SSID darf nicht länger als 32 Bytes sein"
 
 #: src/common/WiFiSettings/WiFiSettings.js:88
 #: src/common/WiFiSettings/WiFiSettings.js:105
@@ -168,9 +172,8 @@ msgstr "Das Passwort muss mindestens 8 Zeichen enthalten"
 
 #: src/common/WiFiSettings/WiFiSettings.js:90
 #: src/common/WiFiSettings/WiFiSettings.js:109
-#, fuzzy
 msgid "Password must not contain more than 63 symbols"
-msgstr "Das Passwort muss mindestens 8 Zeichen enthalten"
+msgstr "Das Passwort darf höchstens 63 Zeichen enthalten"
 
 #: src/common/WiFiSettings/constants.js:9
 msgid "Disabled"
@@ -197,56 +200,48 @@ msgid "802.11ac - 80 MHz wide channel"
 msgstr "802.11ac - 80 MHz breiter Kanal"
 
 #: src/common/WiFiSettings/constants.js:15
-#, fuzzy
 msgid "802.11ac - 160 MHz wide channel"
-msgstr "802.11ac - 80 MHz breiter Kanal"
+msgstr "802.11ac - 160 MHz breiter Kanal"
 
 #: src/common/WiFiSettings/constants.js:16
-#, fuzzy
 msgid "802.11ax - 20 MHz wide channel"
-msgstr "802.11ac - 20 MHz breiter Kanal"
+msgstr "802.11ax - 20 MHz breiter Kanal"
 
 #: src/common/WiFiSettings/constants.js:17
-#, fuzzy
 msgid "802.11ax - 40 MHz wide channel"
-msgstr "802.11ac - 40 MHz breiter Kanal"
+msgstr "802.11ax - 40 MHz breiter Kanal"
 
 #: src/common/WiFiSettings/constants.js:18
-#, fuzzy
 msgid "802.11ax - 80 MHz wide channel"
-msgstr "802.11ac - 80 MHz breiter Kanal"
+msgstr "802.11ax - 80 MHz breiter Kanal"
 
 #: src/common/WiFiSettings/constants.js:19
-#, fuzzy
 msgid "802.11ax - 160 MHz wide channel"
-msgstr "802.11ac - 80 MHz breiter Kanal"
+msgstr "802.11ax - 160 MHz breiter Kanal"
 
 #: src/common/WiFiSettings/constants.js:26
 msgid "WPA3 only"
-msgstr ""
+msgstr "Nur WPA3"
 
 #: src/common/WiFiSettings/constants.js:27
 msgid "WPA3 with WPA2 as fallback (default)"
-msgstr ""
+msgstr "WPA3 mit WPA2 als Ausweichmöglichkeit (Voreinstellung)"
 
 #: src/common/WiFiSettings/constants.js:28
 msgid "WPA2 only"
-msgstr ""
+msgstr "Nur WPA2"
 
 #: src/common/WiFiSettings/constants.js:31
 msgid ""
 "SSID which contains non-standard characters could cause problems on some "
 "devices."
 msgstr ""
+"SSIDs, die nicht standardmäßige Zeichen enthalten, können auf manchen "
+"Geräten Probleme verursachen."
 
 #: src/common/WiFiSettings/constants.js:34
-#, fuzzy
 msgid "WPA2/3 pre-shared key, that is required to connect to the network."
-msgstr ""
-"\n"
-"        WPA2 Pre-Shared Key, der für die Verbindung mit dem Netzwerk "
-"benötigt wird.\n"
-"    "
+msgstr "WPA2/3 Pre-Shard Key, der zum Verbinden mit dem Netzwerk notwendig ist."
 
 #: src/common/WiFiSettings/constants.js:37
 msgid "If set, network is not visible when scanning for available networks."
@@ -255,39 +250,31 @@ msgstr ""
 "drahtlosen Netzwerke angezeigt."
 
 #: src/common/WiFiSettings/constants.js:40
-#, fuzzy
 msgid ""
 "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."
 msgstr ""
-"\n"
-"        Das 2,4 GHz-Band wird stärker von Clients unterstützt, hat aber "
-"tendenziell mehr Interferenzen. Das 5-GHz-Band ist ein\n"
-"        neuerer Standard und wird möglicherweise nicht von allen Geräten "
-"unterstützt. Es hat in der Regel weniger Interferenzen, aber das Signal\n"
-"        trägt nicht so gut drinnen."
+"Das 2,4 GHz-Band wird von allen Geräten unterstützt, ist aber tendenziell "
+"stärker mit Interferenzen belastet. Das 5-GHz-Band ist ein neuerer Standard, "
+"der möglicherweise nicht von allen Ihren Geräten unterstützt wird. Es hat in "
+"der Regel weniger Interferenzen, aber das Signal trägt nicht so gut in "
+"Innenräumen."
 
 #: src/common/WiFiSettings/constants.js:43
-#, fuzzy
 msgid ""
 "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."
 msgstr ""
-"\n"
-"        Ändern Sie diese Option, um den Betriebsmodus 802.11n/ac "
-"anzupassen. 802.11n mit 40 MHz breiten Kanälen können höhere\n"
-"        durchsatz, kann jedoch zu mehr Interferenzen im Netzwerk führen. "
-"Wenn Sie nicht wissen, was Sie wählen sollen, verwenden Sie die "
-"Standardeinstellung\n"
-"        Option mit 20 MHz breitem Kanal.\n"
-"    "
+"Ändern Sie diese Option, um den 802.11n/ac/ax-Betriebsmodus anzupassen. 40 "
+"MHz breite Kanäle können bei 802.11n mehr Daten transportieren, jedoch zu "
+"mehr Interferenzen im Netzwerk führen. Wenn Sie nicht wissen, was Sie wählen "
+"sollen, verwenden Sie die Voreinstellung mit 20 MHz Kanalbreite."
 
 #: src/common/WiFiSettings/constants.js:46
-#, fuzzy
 msgid ""
 "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 "
@@ -295,14 +282,11 @@ msgid ""
 "router. Parameters of the guest network can be set in the Guest network "
 "tab."
 msgstr ""
-"\n"
-"        Ermöglicht Wi-Fi für Gäste, das vom LAN-Netzwerk getrennt ist. "
-"Geräte, die mit diesem Netzwerk verbunden sind, dürfen\n"
-"        auf das Internet zugreifen, dürfen aber nicht auf andere Geräte "
-"und die Konfigurationsschnittstelle des Routers zugreifen.\n"
-"        Die Parameter des Gastnetzwerks können in der Registerkarte "
-"Gastnetzwerk eingestellt werden.\n"
-"        "
+"Ermöglicht ein Wi-Fi für Gäste, das vom LAN-Netzwerk getrennt ist. Geräte, "
+"die mit diesem Netzwerk verbunden sind, dürfen auf das Internet zugreifen, "
+"nicht jedoch auf andere Geräte oder die Konfigurationsschnittstelle des "
+"Routers. Die Parameter des Gastnetzwerks können auf der Gastnetzwerk-"
+"Registerkarte eingestellt werden."
 
 #: src/common/WiFiSettings/constants.js:49
 msgid ""
@@ -311,6 +295,11 @@ msgid ""
 "without WPA3 support require older WPA2. If you experience issues with "
 "connecting older devices, try to enable WPA2."
 msgstr ""
+"Der WPA3-Standard ist die neue Verschlüsselungsmethode mit der besten "
+"Sicherheit. Er empfiehlt sich für jedes Gerät, das ihn unterstützt, aber "
+"ältere Geräte, bei denen das noch nicht der Fall ist, müssen auf das ältere "
+"WPA2 ausweichen. Falls Sie Probleme dabei haben, ältere Geräte mit dem WLAN "
+"zu verbinden, schalten Sie versuchsweise WPA2 ein."
 
 #: src/form/components/ForisForm.js:121
 msgid "Settings saved successfully"
@@ -319,6 +308,8 @@ msgstr "Einstellungen erfolgreich gespeichert"
 #: src/form/components/ForisForm.js:183
 msgid "Changes you made may not be saved. Are you sure you want to leave?"
 msgstr ""
+"Änderungen, die Sie vorgenommen haben, werden möglicherweise nicht "
+"gespeichert. Möchten Sie wirklich gehen?"
 
 #: src/form/components/SubmitButton.js:31
 msgid "Updating"
@@ -334,11 +325,11 @@ msgstr "Speichern"
 
 #: src/utils/ErrorMessage.js:16
 msgid "An error occurred while fetching data."
-msgstr ""
+msgstr "Beim Abruf der Daten ist ein Fehler aufgetreten."
 
 #: src/utils/validations.js:13
 msgid "This is not a valid IPv4 address."
-msgstr "Dies ist keine gültige IPv4-Adresse."
+msgstr "Das ist keine gültige IPv4 Adresse."
 
 #: src/utils/validations.js:14
 msgid "This is not a valid IPv6 address."
@@ -353,9 +344,8 @@ msgid "This is not a valid domain name."
 msgstr "Dies ist kein gültiger Domainname."
 
 #: src/utils/validations.js:17
-#, fuzzy
 msgid "This is not a valid hostname."
-msgstr "Dies ist kein gültiger Domainname."
+msgstr "Dies ist kein gültiger Hostname."
 
 #: src/utils/validations.js:18
 msgid "This is not a valid DUID."
@@ -387,4 +377,3 @@ msgstr "Enthält keine Liste von E-Mails, die durch Kommas getrennt sind."
 #~ "current Wi-Fi configuration and restore the default values.\n"
 #~ "        "
 #~ msgstr ""
-

translations/it/LC_MESSAGES/forisjs.po

@@ -8,19 +8,21 @@ msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
 "POT-Creation-Date: 2022-12-02 15:54+0100\n"
-"PO-Revision-Date: 2019-02-19 13:34+0100\n"
-"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"PO-Revision-Date: 2022-12-31 23:48+0000\n"
+"Last-Translator: Anselmo <anselmo@casinadicornia.com>\n"
+"Language-Team: Italian <https://hosted.weblate.org/projects/turris/foris-js/"
+"it/>\n"
 "Language: it\n"
-"Language-Team: it <LL@li.org>\n"
-"Plural-Forms: nplurals=2; plural=(n != 1);\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: Weblate 4.15.1-dev\n"
 "Generated-By: Babel 2.11.0\n"
 
 #: src/api/utils.js:61
 msgid "The session is expired. Please log in again."
-msgstr ""
+msgstr "Sessione scaduta. Ripetere l'accesso."
 
 #: src/api/utils.js:66
 msgid "Timeout error occurred."
@@ -93,7 +95,7 @@ msgstr ""
 #: src/common/WiFiSettings/WiFiForm.js:132
 #: src/common/WiFiSettings/WiFiGuestForm.js:80
 msgid "Password"
-msgstr ""
+msgstr "Password"
 
 #: src/common/WiFiSettings/WiFiForm.js:146
 msgid "Hide SSID"
@@ -295,7 +297,7 @@ msgstr ""
 
 #: src/utils/validations.js:13
 msgid "This is not a valid IPv4 address."
-msgstr ""
+msgstr "Indirizzo IPv4 non valido."
 
 #: src/utils/validations.js:14
 msgid "This is not a valid IPv6 address."
@@ -414,4 +416,3 @@ msgstr ""
 #~ " default option with 20 MHz wide "
 #~ "channel."
 #~ msgstr ""
-

translations/nb_NO/LC_MESSAGES/forisjs.po

@@ -8,15 +8,16 @@ msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
 "POT-Creation-Date: 2022-12-02 15:54+0100\n"
-"PO-Revision-Date: 2022-10-26 07:01+0000\n"
+"PO-Revision-Date: 2023-03-02 11:40+0000\n"
 "Last-Translator: Allan Nordhøy <epost@anotheragency.no>\n"
+"Language-Team: Norwegian Bokmål <https://hosted.weblate.org/projects/turris/"
+"foris-js/nb_NO/>\n"
 "Language: nb_NO\n"
-"Language-Team: Norwegian Bokmål "
-"<https://hosted.weblate.org/projects/turris/foris-js/nb_NO/>\n"
-"Plural-Forms: nplurals=2; plural=n != 1;\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: Weblate 4.16.2-dev\n"
 "Generated-By: Babel 2.11.0\n"
 
 #: src/api/utils.js:61
@@ -121,14 +122,18 @@ msgid "Encryption"
 msgstr "Kryptering"
 
 #: src/common/WiFiSettings/WiFiForm.js:226
+#, fuzzy
 msgid "Disable Management Frame Protection"
-msgstr ""
+msgstr "Skru av håndtering av rammebeskyttelse"
 
 #: src/common/WiFiSettings/WiFiForm.js:227
+#, fuzzy
 msgid ""
 "In case you have trouble connecting to WiFi Access Point, try disabling "
 "Management Frame Protection."
 msgstr ""
+"I fall du har problemer med å koble til Wi-Fi-tilgangspunkt, kan du skru av "
+"håndtering av rammebeskyttelse."
 
 #: src/common/WiFiSettings/WiFiForm.js:262
 msgid "auto"
@@ -388,4 +393,3 @@ msgstr "Inneholder ikke en kommainndelt liste med e-postadresser."
 #~ "\n"
 #~ "gjeldende Wi-Fi-oppsett og tilbakestiller forvalgte verdier.\n"
 #~ "        "
-

translations/nl/LC_MESSAGES/forisjs.po

@@ -8,15 +8,16 @@ msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
 "POT-Creation-Date: 2022-12-02 15:54+0100\n"
-"PO-Revision-Date: 2020-11-29 19:29+0000\n"
-"Last-Translator: Johan van de Wetering <mail@jvdwetering.nl>\n"
+"PO-Revision-Date: 2024-01-04 21:08+0000\n"
+"Last-Translator: powerburner-nl <peter.mulder.1981@gmail.com>\n"
+"Language-Team: Dutch <https://hosted.weblate.org/projects/turris/foris-js/nl/"
+">\n"
 "Language: nl\n"
-"Language-Team: Dutch <https://hosted.weblate.org/projects/turris/foris-"
-"js/nl/>\n"
-"Plural-Forms: nplurals=2; plural=n != 1;\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: Weblate 5.4-dev\n"
 "Generated-By: Babel 2.11.0\n"
 
 #: src/api/utils.js:61
@@ -54,19 +55,19 @@ msgstr "Opnieuw opstarten"
 
 #: src/common/RebootButton.js:66
 msgid "Warning!"
-msgstr ""
+msgstr "Waarschuwing!"
 
 #: src/common/RebootButton.js:68
 msgid "Are you sure you want to restart the router?"
-msgstr ""
+msgstr "Weet u zeker dat u de router opnieuw wilt opstarten?"
 
 #: src/common/RebootButton.js:71
 msgid "Cancel"
-msgstr ""
+msgstr "Annuleren"
 
 #: src/common/RebootButton.js:73
 msgid "Confirm reboot"
-msgstr ""
+msgstr "Opnieuw opstarten bevestigen"
 
 #: src/common/WiFiSettings/ResetWiFiSettings.js:38
 msgid "An error occurred during resetting Wi-Fi settings."
@@ -418,4 +419,3 @@ msgstr "Bevat geen lijst met e-mails gescheiden door komma's."
 #~ " default option with 20 MHz wide "
 #~ "channel."
 #~ msgstr ""
-

translations/pl/LC_MESSAGES/forisjs.po

@@ -8,16 +8,17 @@ msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
 "POT-Creation-Date: 2022-12-02 15:54+0100\n"
-"PO-Revision-Date: 2022-09-27 15:19+0000\n"
-"Last-Translator: Orest Worhacz <areyouloco@paranoici.org>\n"
+"PO-Revision-Date: 2023-03-07 16:37+0000\n"
+"Last-Translator: Arusekk <arek_koz@o2.pl>\n"
+"Language-Team: Polish <https://hosted.weblate.org/projects/turris/foris-js/"
+"pl/>\n"
 "Language: pl\n"
-"Language-Team: Polish <https://hosted.weblate.org/projects/turris/foris-"
-"js/pl/>\n"
-"Plural-Forms: nplurals=3; plural=n==1 ? 0 : n%10>=2 && n%10<=4 && "
-"(n%100<10 || n%100>=20) ? 1 : 2;\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=3; plural=n==1 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 "
+"|| n%100>=20) ? 1 : 2;\n"
+"X-Generator: Weblate 4.16.2-dev\n"
 "Generated-By: Babel 2.11.0\n"
 
 #: src/api/utils.js:61
@@ -57,9 +58,8 @@ msgid "Warning!"
 msgstr "Ostrzeżenie!"
 
 #: src/common/RebootButton.js:68
-#, fuzzy
 msgid "Are you sure you want to restart the router?"
-msgstr "Czy jesteś pewien/pewna, że chcesz zrestartować router?"
+msgstr "Czy na pewno zrestartować router?"
 
 #: src/common/RebootButton.js:71
 msgid "Cancel"
@@ -130,7 +130,7 @@ msgstr ""
 
 #: src/common/WiFiSettings/WiFiForm.js:303
 msgid "Custom"
-msgstr ""
+msgstr "Własny"
 
 #: src/common/WiFiSettings/WiFiGuestForm.js:42
 msgid "Enable Guest Wi-Fi"
@@ -171,7 +171,7 @@ msgstr ""
 
 #: src/common/WiFiSettings/constants.js:9
 msgid "Disabled"
-msgstr ""
+msgstr "Wyłączone"
 
 #: src/common/WiFiSettings/constants.js:10
 msgid "802.11n - 20 MHz wide channel"
@@ -417,4 +417,3 @@ msgstr "Nie zawiera listy e-maili oddzielonych przecinkami."
 #~ " default option with 20 MHz wide "
 #~ "channel."
 #~ msgstr ""
-

translations/sk/LC_MESSAGES/forisjs.po

@@ -8,7 +8,7 @@ msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
 "POT-Creation-Date: 2022-12-02 15:54+0100\n"
-"PO-Revision-Date: 2022-12-05 16:48+0000\n"
+"PO-Revision-Date: 2023-01-17 22:51+0000\n"
 "Last-Translator: Atec <dr.atec@gmail.com>\n"
 "Language-Team: Slovak <https://hosted.weblate.org/projects/turris/foris-js/"
 "sk/>\n"
@@ -17,7 +17,7 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=3; plural=(n==1) ? 0 : (n>=2 && n<=4) ? 1 : 2;\n"
-"X-Generator: Weblate 4.15-dev\n"
+"X-Generator: Weblate 4.15.1-dev\n"
 "Generated-By: Babel 2.11.0\n"
 
 #: src/api/utils.js:61

translations/sv/LC_MESSAGES/forisjs.po

@@ -8,16 +8,16 @@ msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
 "POT-Creation-Date: 2022-12-02 15:54+0100\n"
-"PO-Revision-Date: 2021-09-26 03:39+0000\n"
-"Last-Translator: Kristoffer Grundström "
-"<swedishsailfishosuser@tutanota.com>\n"
+"PO-Revision-Date: 2023-09-22 21:00+0000\n"
+"Last-Translator: Kristoffer Grundström <swedishsailfishosuser@tutanota.com>\n"
+"Language-Team: Swedish <https://hosted.weblate.org/projects/turris/foris-js/"
+"sv/>\n"
 "Language: sv\n"
-"Language-Team: Swedish <https://hosted.weblate.org/projects/turris/foris-"
-"js/sv/>\n"
-"Plural-Forms: nplurals=2; plural=n != 1;\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: Weblate 5.1-dev\n"
 "Generated-By: Babel 2.11.0\n"
 
 #: src/api/utils.js:61
@@ -30,19 +30,19 @@ msgstr ""
 
 #: src/api/utils.js:69
 msgid "No response received."
-msgstr ""
+msgstr "Inget svar togs emot."
 
 #: src/api/utils.js:79
 msgid "An unknown API error occurred."
-msgstr ""
+msgstr "Ett okänt API-fel inträffade."
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copied!"
-msgstr ""
+msgstr "Kopierades!"
 
 #: src/bootstrap/CopyInput.js:55
 msgid "Copy"
-msgstr ""
+msgstr "Kopiera"
 
 #: src/common/RebootButton.js:27
 msgid "Reboot request failed."
@@ -70,11 +70,11 @@ msgstr "Bekräfta omstart"
 
 #: src/common/WiFiSettings/ResetWiFiSettings.js:38
 msgid "An error occurred during resetting Wi-Fi settings."
-msgstr ""
+msgstr "Ett fel inträffade under återställningen av Wi-Fi-inställningarna."
 
 #: src/common/WiFiSettings/ResetWiFiSettings.js:41
 msgid "Wi-Fi settings are set to defaults."
-msgstr ""
+msgstr "Wi-Fi-inställningarna har ställts in standardinställningarna."
 
 #: src/common/WiFiSettings/ResetWiFiSettings.js:55
 #: src/common/WiFiSettings/ResetWiFiSettings.js:69
@@ -87,6 +87,9 @@ msgid ""
 "Fi settings. Note that this will remove the current Wi-Fi configuration "
 "and restore the default values."
 msgstr ""
+"Om ett antal trådlösa kort inte matchar så kan du prova att återställa Wi-Fi-"
+"inställningarna. Notera att det här kommer att ta bort den nuvarande Wi-Fi-"
+"konfigurationen och återställa till standardvärdena."
 
 #: src/common/WiFiSettings/WiFiForm.js:95
 msgid "Wi-Fi ${deviceID + 1}"
@@ -99,11 +102,11 @@ msgstr "Lösenord"
 
 #: src/common/WiFiSettings/WiFiForm.js:146
 msgid "Hide SSID"
-msgstr ""
+msgstr "Göm SSID"
 
 #: src/common/WiFiSettings/WiFiForm.js:186
 msgid "802.11n/ac/ax mode"
-msgstr ""
+msgstr "802.11n/ac/ax-läge"
 
 #: src/common/WiFiSettings/WiFiForm.js:199
 #, fuzzy
@@ -112,7 +115,7 @@ msgstr "Avbryt"
 
 #: src/common/WiFiSettings/WiFiForm.js:211
 msgid "Encryption"
-msgstr ""
+msgstr "Kryptering"
 
 #: src/common/WiFiSettings/WiFiForm.js:226
 msgid "Disable Management Frame Protection"
@@ -221,7 +224,7 @@ msgstr "802.11ac - 160 MHz bred kanal"
 
 #: src/common/WiFiSettings/constants.js:26
 msgid "WPA3 only"
-msgstr ""
+msgstr "Endast WPA3"
 
 #: src/common/WiFiSettings/constants.js:27
 msgid "WPA3 with WPA2 as fallback (default)"
@@ -229,13 +232,15 @@ msgstr ""
 
 #: src/common/WiFiSettings/constants.js:28
 msgid "WPA2 only"
-msgstr ""
+msgstr "Endast WPA2"
 
 #: src/common/WiFiSettings/constants.js:31
 msgid ""
 "SSID which contains non-standard characters could cause problems on some "
 "devices."
 msgstr ""
+"SSID som innehåller icke-standardiserade tecken kan orsaka problem i en del "
+"enheter."
 
 #: src/common/WiFiSettings/constants.js:34
 msgid "WPA2/3 pre-shared key, that is required to connect to the network."
@@ -424,4 +429,3 @@ msgstr ""
 #~ " default option with 20 MHz wide "
 #~ "channel."
 #~ msgstr ""
-