Merge branch 'add-encryption-selection-to-guest-form' into 'dev'

Add encryption selection to WiFiGuestForm

Closes #27

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

src/bootstrap/Modal.js

@@ -88,18 +88,21 @@ export function Modal({ shown, setShown, scrollable, size, children }) {
 ModalHeader.propTypes = {
     setShown: PropTypes.func.isRequired,
     title: PropTypes.string.isRequired,
+    showCloseButton: PropTypes.bool,
 };
 
-export function ModalHeader({ setShown, title }) {
+export function ModalHeader({ setShown, title, showCloseButton = true }) {
     return (
         <div className="modal-header">
             <h1 className="modal-title fs-5">{title}</h1>
+            {showCloseButton && (
                 <button
                     type="button"
                     className="btn-close"
                     onClick={() => setShown(false)}
                     aria-label={_("Close")}
                 />
+            )}
         </div>
     );
 }

src/common/RichTable/RichTable.js

@@ -64,13 +64,15 @@ function RichTable({
         },
     });
 
+    const paginationIsNeeded = tableData.length > pageSize && withPagination;
+
     return (
         <div className="table-responsive">
             <table className="table table-hover text-nowrap">
                 <RichTableHeader table={table} flexRender={flexRender} />
                 <RichTableBody table={table} flexRender={flexRender} />
             </table>
-            {withPagination && (
+            {paginationIsNeeded && (
                 <RichTablePagination
                     table={table}
                     tablePageSize={pageSize}

src/common/WiFiSettings/WiFiGuestForm.js

@@ -9,9 +9,10 @@ import React from "react";
 
 import PropTypes from "prop-types";
 
-import { HELP_TEXTS } from "./constants";
+import { HELP_TEXTS, ENCRYPTIONMODES } from "./constants";
 import WiFiQRCode from "./WiFiQRCode";
 import PasswordInput from "../../bootstrap/PasswordInput";
+import Select from "../../bootstrap/Select";
 import Switch from "../../bootstrap/Switch";
 import TextInput from "../../bootstrap/TextInput";
 
@@ -21,6 +22,7 @@ WifiGuestForm.propTypes = {
         SSID: PropTypes.string.isRequired,
         password: PropTypes.string.isRequired,
         enabled: PropTypes.bool.isRequired,
+        encryption: PropTypes.string.isRequired,
     }),
     formErrors: PropTypes.shape({
         SSID: PropTypes.string,
@@ -89,6 +91,20 @@ export default function WifiGuestForm({
                         }))}
                         {...props}
                     />
+                    <Select
+                        label={_("Encryption")}
+                        choices={ENCRYPTIONMODES}
+                        helpText={HELP_TEXTS.wpa3}
+                        value={formData.encryption}
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [formData.id]: {
+                                    guest_wifi: { encryption: { $set: value } },
+                                },
+                            },
+                        }))}
+                        {...props}
+                    />
                 </>
             ) : null}
         </>

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

@@ -339,7 +339,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 - First value
 + Second value
 
-@@ -524,10 +524,87 @@
+@@ -524,10 +524,124 @@
             <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>
@@ -421,13 +421,50 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +             WPA2/3 pre-shared key, that is required to connect to the network.
 +           </small>
 +         </div>
++       </div>
++       <div
++         class="mb-3"
++       >
++         <label
++           class="form-label"
++           for="14"
++         >
++           Encryption
++         </label>
++         <select
++           class="form-select"
++           id="14"
++         >
++           <option
++             value="WPA3"
++           >
++             WPA3 only
++           </option>
++           <option
++             value="WPA2/3"
++           >
++             WPA3 with WPA2 as fallback (default)
++           </option>
++           <option
++             value="WPA2"
++           >
++             WPA2 only
++           </option>
++         </select>
++         <div
++           class="form-text"
++         >
++           <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>
         <hr />
         <div
           class="form-check form-switch mb-3 d-flex align-items-center"
         >
           <input
-@@ -550,10 +627,11 @@
+@@ -550,10 +664,11 @@
         <div
           class="text-end"
         >