Add error handling for password input in InputComponent

src/frontend/src/components/inputComponent/index.tsx

@@ -1,5 +1,6 @@
 import * as Form from "@radix-ui/react-form";
 import { useEffect, useRef, useState } from "react";
+import useAlertStore from "../../stores/alertStore";
 import { InputComponentType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
@@ -20,6 +21,7 @@ export default function InputComponent({
   id = "",
   blurOnEnter = false,
 }: InputComponentType): JSX.Element {
+  const setErrorData = useAlertStore.getState().setErrorData;
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
   // Clear component state
@@ -85,7 +87,22 @@ export default function InputComponent({
           )}
           placeholder={password && editNode ? "Key" : placeholder}
           onChange={(e) => {
-            onChange(e.target.value);
+            // if the user copies a password from another input
+            // it might come as ••••••••••• it causes errors
+            // in ascii encoding, so we need to handle it
+            if (password) {
+              // check if all chars are •
+              if (e.target.value.split("").every((char) => char === "•")) {
+                setErrorData({
+                  title: `Invalid characters: ${e.target.value}`,
+                  list: [
+                    "It seems you are trying to paste a password. Make sure the value is visible before copying from another field.",
+                  ],
+                });
+              }
+
+              onChange(e.target.value);
+            }
           }}
           onKeyDown={(e) => {
             handleKeyDown(e, value, "");