2024-11-08 - non-recipient search

Author: Luch76

web-ui/src/components/feedback_external_recipient_selector/NewExternalRecipientModal.jsx

@@ -8,17 +8,23 @@ const NewExternalRecipientModal = ({ open, onClose, onSubmit }) => {
     const [firstName, setFirstName] = useState('');
     const [lastName, setLastName] = useState('');
     const [companyName, setCompanyName] = useState('');
+    const [emailError, setEmailError] = useState('');
 
     useEffect(() => {
         if (open) {
             setEmail('');
             setFirstName('');
             setLastName('');
             setCompanyName('');
+            setEmailError('');
         }
     }, [open]);
 
     const handleSubmit = () => {
+        if (!validateEmail(email)) {
+            setEmailError('Please enter a valid email address');
+            return;
+        }
         const newRecipient = {
             email,
             firstName,
@@ -28,6 +34,11 @@ const NewExternalRecipientModal = ({ open, onClose, onSubmit }) => {
         onSubmit(newRecipient);
     };
 
+    const validateEmail = (email) => {
+        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return re.test(String(email).toLowerCase());
+    };
+
     return (
         <Modal open={open} onClose={onClose}>
             <Box sx={{ ...modalStyle }}>
@@ -44,7 +55,12 @@ const NewExternalRecipientModal = ({ open, onClose, onSubmit }) => {
                 <TextField
                     label="Email"
                     value={email}
-                    onChange={(e) => setEmail(e.target.value)}
+                    onChange={(e) => {
+                        setEmail(e.target.value);
+                        if (emailError) setEmailError('');
+                    }}
+                    error={!!emailError}
+                    helperText={emailError}
                     fullWidth
                     margin="normal"
                 />
@@ -69,7 +85,12 @@ const NewExternalRecipientModal = ({ open, onClose, onSubmit }) => {
                     fullWidth
                     margin="normal"
                 />
-                <Button variant="contained" color="primary" onClick={handleSubmit}>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={handleSubmit}
+                    disabled={!email || !!emailError}
+                >
                     Submit
                 </Button>
             </Box>