diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index edde2a6c9..08de2ea08 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/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(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, "");