Wi-Fi settings form

2025-06-16 13:46:16 +02:00 · 2020-01-09 11:25:29 +01:00
parent 9dcc689491
commit 5fd0d3626a
33 changed files with 2913 additions and 97 deletions
--- a/src/common/WiFiSettings/WiFiGuestForm.js
+++ b/src/common/WiFiSettings/WiFiGuestForm.js
@ -0,0 +1,100 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+import { CheckBox } from "../../bootstrap/CheckBox";
+import { TextInput } from "../../bootstrap/TextInput";
+import { PasswordInput } from "../../bootstrap/PasswordInput";
+import WiFiQRCode from "./WiFiQRCode";
+import { HELP_TEXTS } from "./constants";
+
+WifiGuestForm.propTypes = {
+    formData: PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        SSID: PropTypes.string.isRequired,
+        password: PropTypes.string.isRequired,
+        enabled: PropTypes.bool.isRequired,
+    }),
+    formErrors: PropTypes.shape({
+        SSID: PropTypes.string,
+        password: PropTypes.string,
+    }),
+    setFormValue: PropTypes.func.isRequired,
+};
+
+export default function WifiGuestForm({
+    formData, formErrors, setFormValue, ...props
+}) {
+    return (
+        <>
+            <CheckBox
+                label={_("Enable Guest Wifi")}
+                checked={formData.enabled}
+                helpText={HELP_TEXTS.guest_wifi_enabled}
+
+                onChange={setFormValue(
+                    (value) => (
+                        { devices: { [formData.id]: { guest_wifi: { enabled: { $set: value } } } } }
+                    ),
+                )}
+
+                {...props}
+            />
+            {formData.enabled
+                ? (
+                    <>
+                        <TextInput
+                            label="SSID"
+                            value={formData.SSID}
+                            error={formErrors.SSID}
+
+                            onChange={setFormValue(
+                                (value) => ({
+                                    devices: {
+                                        [formData.id]: { guest_wifi: { SSID: { $set: value } } },
+                                    },
+                                }),
+                            )}
+
+                            {...props}
+                        >
+                            <div className="input-group-append">
+                                <WiFiQRCode
+                                    SSID={formData.SSID}
+                                    password={formData.password}
+                                />
+                            </div>
+                        </TextInput>
+
+                        <PasswordInput
+                            withEye
+                            label={_("Password")}
+                            value={formData.password}
+                            helpText={HELP_TEXTS.password}
+                            error={formErrors.password}
+                            required
+
+                            onChange={setFormValue(
+                                (value) => ({
+                                    devices: {
+                                        [formData.id]: {
+                                            guest_wifi: { password: { $set: value } },
+                                        },
+                                    },
+                                }),
+                            )}
+
+                            {...props}
+                        />
+                    </>
+                )
+                : null}
+        </>
+    );
+}