Fix error message edit role

SELab-2 · May 23, 2024 · 87c9415 · 87c9415
1 parent b2e85a3
commit 87c9415
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 13 deletions.
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
@@ -86,8 +86,8 @@
     "search": "Search",
     "emailError": "Please enter a valid email",
     "emailTooShort": "Email must be at least 3 characters long",
-    "nameError": "Name must be at least 3 characters long",
-    "surnameError": "Surname must be at least 3 characters long",
+    "nameError": "Name or surname must be at least 3 characters long",
+    "surnameError": "Name or surname must be at least 3 characters long",
     "searchTutorial": "Enter a name, surname, or email to find users.",
     "searchTooShort": "The search must be at least 3 characters long",
     "noUsersFound": "No users found",

diff --git a/frontend/src/i18n/nl/translation.json b/frontend/src/i18n/nl/translation.json
@@ -87,8 +87,8 @@
     "search": "Zoeken",
     "emailError": "Vul een geldig email adres in",
     "emailTooShort": "Email moet minstens 3 karakters lang zijn",
-    "nameError": "Naam moet minstens 3 karakters lang zijn",
-    "surnameError": "Achternaam moet minstens 3 karakters lang zijn",
+    "nameError": "Naam of achternaam moet minstens 3 karakters lang zijn",
+    "surnameError": "Naam of achternaam moet minstens 3 karakters lang zijn",
     "searchTooShort": "Zoekopdracht moet minstens 3 karakters lang zijn",
     "searchTutorial": "Vul een email adres, naam of achternaam in om gebruikers op te zoeken.",
     "noUsersFound": "Geen gebruikers gevonden",

diff --git a/frontend/src/pages/editRole/EditRole.tsx b/frontend/src/pages/editRole/EditRole.tsx
@@ -47,19 +47,45 @@ const ProfileContent = () => {
     })
   }
 
-  const onSearch = async () => {
-    //validation
-    const firstValue = form.getFieldValue("first")
-    if (searchType === "name") {
+  const [isError, setIsError] = useState(false)
+
+  const checkValidate = () => {
+    if (searchType === "email") {
+      if (!emailRegex.test(form.getFieldValue("first"))) {
+        return false
+      } else {
+        return true
+      }
+    } else {
+      const firstValue = form.getFieldValue("first")
       const secondValue = form.getFieldValue("second")
-      if (!firstValue && !secondValue) return
-      if (firstValue && firstValue.length < 3) return
-      if (secondValue && secondValue.length < 3) return
+      const firstValueLength = firstValue ? firstValue.length : 0
+      const secondValueLength = secondValue ? secondValue.length : 0
+      if (firstValueLength < 3 && secondValueLength < 3) {
+        console.log("error")
+        return false
+      } else {
+        console.log("no error")
+        return true
+      }
+    }
+  }
+
+  const validate = () => {
+    if (!checkValidate()) {
+      setIsError(true)
     } else {
-      if (!firstValue || firstValue.length < 3) return
-      if (!emailRegex.test(firstValue)) return
+      setIsError(false)
+    }
+  }
+
+  const onSearch = async () => {
+    //validation
+    if (!checkValidate()) {
+      return
     }
 
+    const firstValue = form.getFieldValue("first")
     setLoading(true)
     const params = new URLSearchParams()
     if (searchType === "email") {
@@ -82,6 +108,8 @@ const ProfileContent = () => {
         form={form}
         name="search"
         onFinish={onSearch}
+        onChange={validate}
+        validateTrigger={[]}
       >
         <Form.Item>
           <Space.Compact style={{ display: 'flex' }}>
@@ -133,7 +161,10 @@ const ProfileContent = () => {
             )}
           </Space.Compact>
         </Form.Item>
+        {isError && <Typography.Text type="danger">{searchType === "email" ? t("editRole.emailError") : t("editRole.nameError")}</Typography.Text>}
+        <br />
       </Form>
+
       {users !== null ? (
         <>
           {loading ? (