Merge pull request #23 from hendriksen-mark/main

Add hue icons, fix warnings about id and key missing, add properties for username and password.
diyhue · Aug 2, 2024 · 158bd45 · 158bd45
2 parents 8d4c373 + 24c1e8a
commit 158bd45
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 32 deletions.
diff --git a/src/Mainframe/HeaderSection.jsx b/src/Mainframe/HeaderSection.jsx
@@ -82,6 +82,7 @@ const HeaderSection = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
 
       <div className="onbtn">
         <FlipSwitch
+          id="onbtn"
           value={group0State}
           onChange={(e) => handleToggleChange(e)}
           checked={group0State}

diff --git a/src/Pages/Account.jsx b/src/Pages/Account.jsx
@@ -103,6 +103,7 @@ const Account = ({ HOST_IP, API_KEY }) => {
                   readOnly={true}
                   type="text"
                   value={email}
+                  autoComplete="username"
                 />
               </div>
               <div className="form-control">
@@ -112,6 +113,7 @@ const Account = ({ HOST_IP, API_KEY }) => {
                   placeholder="Enter Password"
                   value={pass}
                   onChange={(e) => handleChange(e)}
+                  autoComplete="new-password"
                 />
               </div>
               <small>
@@ -132,6 +134,7 @@ const Account = ({ HOST_IP, API_KEY }) => {
                   placeholder="Repeat Password"
                   value={pass1}
                   onChange={(e) => setPass1(e)}
+                  autoComplete="new-password"
                 />
               </div>
               {pass !== pass1 && (

diff --git a/src/Pages/Alarm.jsx b/src/Pages/Alarm.jsx
@@ -64,6 +64,7 @@ const Alarm = ({ HOST_IP, API_KEY }) => {
             <div className="headline">Motion notifications alarm</div>
             <form className="add-form">
               <FlipSwitch
+                id="alarm"
                 value={enable}
                 onChange={(e) => toggleEnable(e)}
                 checked={enable}

diff --git a/src/Pages/Bridge.jsx b/src/Pages/Bridge.jsx
@@ -59,6 +59,7 @@ const Bridge = ({ HOST_IP, API_KEY }) => {
     axios
       .get(`${HOST_IP}/api/${API_KEY}/config`)
       .then((result) => {
+        //console.log(result.data);
         setBridgeName(result.data["name"]);
         setSwversion(result.data["swversion"]);
         setApiVersion(result.data["apiversion"]);
@@ -416,6 +417,7 @@ const Bridge = ({ HOST_IP, API_KEY }) => {
             </div>
             <div className="form-control">
               <FlipSwitch
+                id="Remote API"
                 value={remoteApi}
                 onChange={(e) => setRemoteApi(e)}
                 checked={remoteApi}
@@ -425,6 +427,7 @@ const Bridge = ({ HOST_IP, API_KEY }) => {
             </div>
             <div className="form-control">
               <FlipSwitch
+                id="Discovery"
                 value={discovery}
                 onChange={(e) => setDiscovery(e)}
                 checked={discovery}

diff --git a/src/Pages/Deconz.jsx b/src/Pages/Deconz.jsx
@@ -89,6 +89,7 @@ const Deconz = ({ HOST_IP, API_KEY }) => {
             <div className="headline">Deconz Config</div>
             <form className="add-form">
               <FlipSwitch
+                id="Deconz"
                 value={enable}
                 onChange={(e) => toggleEnable(e)}
                 checked={enable}

diff --git a/src/Pages/HA.jsx b/src/Pages/HA.jsx
@@ -72,6 +72,7 @@ const HA = ({ HOST_IP, API_KEY }) => {
             <div className="headline">Home Assistant config</div>
             <form className="add-form">
               <FlipSwitch
+                id="ha"
                 value={enable}
                 onChange={(e) => setEnable(e)}
                 checked={enable}

diff --git a/src/Pages/Mqtt.jsx b/src/Pages/Mqtt.jsx
@@ -68,6 +68,7 @@ const Mqtt = ({ HOST_IP, API_KEY }) => {
             <div className="headline">ZigBee2MQTT config</div>
             <form className="add-form">
               <FlipSwitch
+                id="mqtt"
                 value={enable}
                 onChange={(e) => setEnable(e)}
                 checked={enable}

diff --git a/src/Pages/Settings.jsx b/src/Pages/Settings.jsx
@@ -184,6 +184,7 @@ const Settings = ({ HOST_IP, API_KEY }) => {
             <p>To add ports separate the ports with "," ex: 80,81,82</p>
             <form className="add-form">
               <FlipSwitch
+                id="ports"
                 value={enable}
                 onChange={(e) => toggleEnable(e)}
                 checked={enable}
@@ -218,6 +219,7 @@ const Settings = ({ HOST_IP, API_KEY }) => {
             <p>Set which protocol to find.</p>
             <form className="add-form">
               <FlipSwitch
+                id="Yeelight"
                 value={yeelight}
                 onChange={(e) => setYeelight(e)}
                 checked={yeelight}
@@ -226,6 +228,7 @@ const Settings = ({ HOST_IP, API_KEY }) => {
               />
 
               <FlipSwitch
+                id="Native_multi"
                 value={native_multi}
                 onChange={(e) => setNative_multi(e)}
                 checked={native_multi}
@@ -234,6 +237,7 @@ const Settings = ({ HOST_IP, API_KEY }) => {
               />
 
               <FlipSwitch
+                id="Tasmota"
                 value={tasmota}
                 onChange={(e) => setTasmota(e)}
                 checked={tasmota}
@@ -242,6 +246,7 @@ const Settings = ({ HOST_IP, API_KEY }) => {
               />
 
               <FlipSwitch
+                id="Wled"
                 value={wled}
                 onChange={(e) => setWled(e)}
                 checked={wled}
@@ -250,6 +255,7 @@ const Settings = ({ HOST_IP, API_KEY }) => {
               />
 
               <FlipSwitch
+                id="Shelly"
                 value={shelly}
                 onChange={(e) => setShelly(e)}
                 checked={shelly}
@@ -258,6 +264,7 @@ const Settings = ({ HOST_IP, API_KEY }) => {
               />
 
               <FlipSwitch
+                id="Esphome"
                 value={esphome}
                 onChange={(e) => setEsphome(e)}
                 checked={esphome}
@@ -266,6 +273,7 @@ const Settings = ({ HOST_IP, API_KEY }) => {
               />
 
               <FlipSwitch
+                id="Hyperion"
                 value={hyperion}
                 onChange={(e) => setHyperion(e)}
                 checked={hyperion}
@@ -274,6 +282,7 @@ const Settings = ({ HOST_IP, API_KEY }) => {
               />
 
               <FlipSwitch
+                id="Tpkasa"
                 value={tpkasa}
                 onChange={(e) => setTpkasa(e)}
                 checked={tpkasa}
@@ -282,6 +291,7 @@ const Settings = ({ HOST_IP, API_KEY }) => {
               />
 
               <FlipSwitch
+                id="Elgato"
                 value={elgato}
                 onChange={(e) => setElgato(e)}
                 checked={elgato}

diff --git a/src/components/FlipSwitch/FlipSwitch.jsx b/src/components/FlipSwitch/FlipSwitch.jsx
@@ -1,11 +1,12 @@
 import "./flipswitch.scss";
 
-const FlipSwitch = ({ value = '', onChange = undefined, checked = false, label = '', position = undefined }) => (
+const FlipSwitch = ({ value = '', onChange = undefined, checked = false, label = '', position = undefined, id }) => (
   <>
     <div className="flipSwitch">
       <p>{label}</p>
       <label className={`flipSwitchLabel ${position}`}>
         <input
+          id={id}
           type="checkbox"
           value={value}
           onChange={(e) => onChange(e.target.checked)}

diff --git a/src/components/GenericText/GenericText.jsx b/src/components/GenericText/GenericText.jsx
@@ -1,15 +1,17 @@
 import "./genericText.scss";
 
-const GenericText = ({ label = '', value = '', placeholder = '', readOnly = false, type = 'text', onChange = undefined, pattern = '' }) => {
+const GenericText = ({ label = '', value = '', placeholder = '', readOnly = false, type = 'text', onChange = undefined, pattern = '', autoComplete = 'off' }) => {
     return (<>
-        <label>{label}</label>
+        <label htmlFor={label}>{label}</label>
         <input
+            id={label}
             readOnly={readOnly}
             type={type}
             pattern={pattern}
             placeholder={placeholder}
             value={value}
             onChange={(e) => onChange && onChange(e.target.value)}
+            autoComplete={autoComplete}
         />
     </>);
 };

diff --git a/src/components/Group/GroupHeader.jsx b/src/components/Group/GroupHeader.jsx
@@ -62,6 +62,7 @@ const GroupHeader = ({ HOST_IP, api_key, id, group, lights }) => {
         </div>
         <div className="flipSwitch">
           <FlipSwitch
+            id={"group " + id}
             value={group.state["any_on"]}
             onChange={(e) => handleToggleChange(e)}
             checked={group.state["any_on"]}

diff --git a/src/components/GroupLight/GroupLight.jsx b/src/components/GroupLight/GroupLight.jsx
@@ -1,12 +1,12 @@
 import axios from "axios";
 
-import { FaLightbulb } from "react-icons/fa";
 import { RiAlertLine } from "react-icons/ri";
 import { AnimatePresence } from "framer-motion";
 
 import { cieToRgb, colorTemperatureToRgb } from "../ColorFormatConverter/ColorFormatConverter";
 import FlipSwitch from "../FlipSwitch/FlipSwitch";
 import BrightnessSlider from "../BrightnessSlider/BrightnessSlider";
+import { HueIcons } from "../../static/icons/hass-hue-icons";
 
 const Light = ({ HOST_IP, api_key, id, light }) => {
   const switchLight = (newState) => {
@@ -36,7 +36,10 @@ const Light = ({ HOST_IP, api_key, id, light }) => {
     <div className="groupCard light">
       <div className="row top">
         <div className="gradient" style={getStyle()}>
-          <FaLightbulb />
+          <HueIcons
+            type={"light-" + light["config"]["archetype"]}
+            color="#eeeeee"
+          />
         </div>
         <div className="text">
           <p className="name">
@@ -45,6 +48,7 @@ const Light = ({ HOST_IP, api_key, id, light }) => {
           </p>
         </div>
         <FlipSwitch
+          id={"light " + id}
           value={light["state"]["on"]}
           checked={light["state"]["on"]}
           onChange={(e) => switchLight({ on: e })}

diff --git a/src/components/User/User.jsx b/src/components/User/User.jsx
@@ -76,7 +76,7 @@ const User = ({ HOST_IP, api_key, id, user, whitelist }) => {
         {Object.entries(whitelist)
           .filter((new_user) => new_user[1].name !== user["name"])
           .map(([new_id, new_user]) => (
-            <div className="form-control">
+            <div key={new_id} className="form-control">
               <GenericButton
                 value={new_user["name"]}
                 color="blue"