From f6bb16a4e6f26aac9352b395cbba621869b609e3 Mon Sep 17 00:00:00 2001
From: devrk96 <rohit.kumawat@primathon.in>
Date: Thu, 29 Oct 2020 16:47:52 +0530
Subject: [PATCH] Fix: Invalid email error in invite modal (#1368)

* Invalid email error showing on entering incorrect email before submission

* error state name corrected

* colon removed from error message
---
 .../src/components/ads/TagInputComponent.tsx  | 19 +++++++++++++++++++
 .../form/fields/TagListField.tsx              |  1 +
 app/client/src/constants/messages.ts          |  2 +-
 .../pages/organization/OrgInviteUsersForm.tsx | 18 +++++++++++++++---
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/app/client/src/components/ads/TagInputComponent.tsx b/app/client/src/components/ads/TagInputComponent.tsx
index 2bfb538882..5e1db6998e 100644
--- a/app/client/src/components/ads/TagInputComponent.tsx
+++ b/app/client/src/components/ads/TagInputComponent.tsx
@@ -2,6 +2,9 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { Classes, TagInput } from "@blueprintjs/core";
 import { Intent } from "constants/DefaultTheme";
+import { WrappedFieldMetaProps } from "redux-form";
+import { INVITE_USERS_VALIDATION_EMAIL_LIST } from "constants/messages";
+import { isEmail } from "utils/formhelpers";
 const TagInputWrapper = styled.div<{ intent?: Intent }>`
   margin-right: 8px;
 
@@ -48,6 +51,7 @@ type TagInputProps = {
   /** Intent of the tags, which defines their color */
   intent?: Intent;
   hasError?: boolean;
+  customError: (values: any) => void;
 };
 
 /**
@@ -71,10 +75,25 @@ const TagInputComponent = (props: TagInputProps) => {
     }
   }, [_values, values]);
 
+  const validateEmail = (newValues: string[]) => {
+    if (newValues && newValues.length > 0) {
+      let error = "";
+      newValues.forEach((user: any) => {
+        if (!isEmail(user)) {
+          error = INVITE_USERS_VALIDATION_EMAIL_LIST;
+        }
+      });
+      props.customError(error);
+    } else {
+      props.customError("");
+    }
+  };
+
   const commitValues = (newValues: string[]) => {
     setValues(newValues);
     props.input.onChange &&
       props.input.onChange(newValues.filter(Boolean).join(","));
+    validateEmail(newValues);
   };
 
   const onTagsChange = (values: React.ReactNode[]) => {
diff --git a/app/client/src/components/editorComponents/form/fields/TagListField.tsx b/app/client/src/components/editorComponents/form/fields/TagListField.tsx
index a2d38ccb27..ca30384eb9 100644
--- a/app/client/src/components/editorComponents/form/fields/TagListField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/TagListField.tsx
@@ -26,6 +26,7 @@ type TagListFieldProps = {
   type: string;
   label: string;
   intent: Intent;
+  customError: (err: string) => void;
 };
 
 const TagListField = (props: TagListFieldProps) => {
diff --git a/app/client/src/constants/messages.ts b/app/client/src/constants/messages.ts
index c4fba06d0d..f8e936a8fe 100644
--- a/app/client/src/constants/messages.ts
+++ b/app/client/src/constants/messages.ts
@@ -92,7 +92,7 @@ export const NAVIGATE_TO_VALIDATION_ERROR =
   "Please enter a valid URL or page name";
 
 export const INVITE_USERS_VALIDATION_EMAIL_LIST =
-  "Invalid Email address(es) found:";
+  "Invalid Email address(es) found";
 export const INVITE_USERS_VALIDATION_ROLE_EMPTY = "Please select a role";
 
 export const INVITE_USERS_EMAIL_LIST_PLACEHOLDER = "Comma separated emails";
diff --git a/app/client/src/pages/organization/OrgInviteUsersForm.tsx b/app/client/src/pages/organization/OrgInviteUsersForm.tsx
index 18aabd68e1..d126b63665 100644
--- a/app/client/src/pages/organization/OrgInviteUsersForm.tsx
+++ b/app/client/src/pages/organization/OrgInviteUsersForm.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import styled from "styled-components";
 import { useLocation } from "react-router-dom";
 import TagListField from "components/editorComponents/form/fields/TagListField";
@@ -204,12 +204,23 @@ const validate = (values: any) => {
     errors["role"] = INVITE_USERS_VALIDATION_ROLE_EMPTY;
   }
 
+  if (values.users && values.users.length > 0) {
+    const _users = values.users.split(",").filter(Boolean);
+
+    _users.forEach((user: string) => {
+      if (!isEmail(user)) {
+        errors["users"] = INVITE_USERS_VALIDATION_EMAIL_LIST;
+      }
+    });
+  }
   return errors;
 };
 
 const { mailEnabled } = getAppsmithConfigs();
 
 const OrgInviteUsersForm = (props: any) => {
+  const [emailError, setEmailError] = useState("");
+
   const {
     handleSubmit,
     allUsers,
@@ -296,6 +307,7 @@ const OrgInviteUsersForm = (props: any) => {
               label="Emails"
               intent="success"
               data-cy="t--invite-email-input"
+              customError={(err: string) => setEmailError(err)}
             />
             <SelectField
               name="role"
@@ -377,8 +389,8 @@ const OrgInviteUsersForm = (props: any) => {
               fill
             />
           )}
-          {submitFailed && error && (
-            <Callout text={error} variant={Variant.danger} fill />
+          {((submitFailed && error) || emailError) && (
+            <Callout text={error || emailError} variant={Variant.danger} fill />
           )}
         </ErrorBox>
         {!pathRegex.test(currentPath) && canManage && (