Minor security improvement

Update CHANGELOG.md Streamline password redacting Add default option for StreamModal boxes Remove required tag, add default value to type on custom TextField element Explicitly handle input types
micro-nova · Jun 6, 2024 · fbf38e0 · fbf38e0
1 parent 69ab173
commit fbf38e0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
   * Add streams to the stream list on the homepage in the order they were added
   * Add firmware version for main and expansion units on About page
   * Limit length of displayed stream names with ellipsis
+  * Minor security increase to Pandora passwords
   * Add restart stream button to stream player and stream modal
 * System
   * Add serial number to eink display

diff --git a/web/src/pages/Settings/Streams/StreamModal/StreamModal.jsx b/web/src/pages/Settings/Streams/StreamModal/StreamModal.jsx
@@ -14,13 +14,14 @@ const RESTART_DESC = "Sometimes the stream gets into a bad state and neds to be
 
 // We're already using mui, why are we reinventing the wheel? https://mui.com/material-ui/react-text-field/
 // if it's a matter of className control on the underlying components, that still works with the mui textfield with the InputLabelProps prop and other componentProps
-const TextField = ({ name, desc, defaultValue, onChange }) => {
+const TextField = ({ name, desc, type="text", defaultValue, onChange }) => {
+
     return (
         <>
             <div className="stream-field">
                 <div className="stream-field-name">{name}</div>
                 <input
-                    type="text"
+                    type={type}
                     defaultValue={defaultValue}
                     onChange={(e) => {
                         onChange(e.target.value);
@@ -35,6 +36,7 @@ const TextField = ({ name, desc, defaultValue, onChange }) => {
 TextField.propTypes = {
     name: PropTypes.string.isRequired,
     desc: PropTypes.string.isRequired,
+    type: PropTypes.string,
     defaultValue: PropTypes.string,
     onChange: PropTypes.func.isRequired,
 };
@@ -209,19 +211,34 @@ const StreamModal = ({ stream, onClose, apply, del }) => {
                     // Render fields from StreamFields.json
                     streamTemplate.fields.map((field) => {
                         switch (field.type) {
-                        case "text":
-                            return (
-                                <TextField
-                                    key={field.name}
-                                    name={field.name}
-                                    desc={field.desc}
-                                    required={field.required}
-                                    defaultValue={streamFields[field.name]}
-                                    onChange={(v) => {
-                                        setStreamFields({ ...streamFields, [field.name]: v });
-                                    }}
-                                />
-                            );
+                            case "text":
+                                return (
+                                    <TextField
+                                        key={field.name}
+                                        name={field.name}
+                                        desc={field.desc}
+                                        type={"text"}
+                                        required={field.required}
+                                        defaultValue={streamFields[field.name]}
+                                        onChange={(v) => {
+                                            setStreamFields({ ...streamFields, [field.name]: v });
+                                        }}
+                                    />
+                                );
+                            case "password":
+                                return (
+                                    <TextField
+                                        key={field.name}
+                                        name={field.name}
+                                        desc={field.desc}
+                                        type={"password"}
+                                        required={field.required}
+                                        defaultValue={streamFields[field.name]}
+                                        onChange={(v) => {
+                                            setStreamFields({ ...streamFields, [field.name]: v });
+                                        }}
+                                    />
+                                );
                         case "bool":
                             return (
                                 <BoolField

diff --git a/web/src/pages/Settings/Streams/StreamTemplates.json b/web/src/pages/Settings/Streams/StreamTemplates.json
@@ -96,7 +96,7 @@
       {
         "title": "Pandora Password",
         "name": "password",
-        "type": "text",
+        "type": "password",
         "required": true
       }
     ]