From 3a2808003cd8068966f92c4c17cdc7b1f78f6f0c Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 20 Mar 2024 20:48:17 -0300
Subject: [PATCH] Add error handling for password input in InputComponent

---
 .../src/components/inputComponent/index.tsx   | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

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<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, "");