fix: email regex and clean up input email

eduNEXT · Oct 9, 2023 · 3b14c1f · 3b14c1f
1 parent b6e3a7c
commit 3b14c1f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 14 deletions.
diff --git a/...nents/bulk-email-tool/bulk-email-form/bulk-email-recipient/components/EmailList/index.jsx b/...nents/bulk-email-tool/bulk-email-form/bulk-email-recipient/components/EmailList/index.jsx
@@ -44,6 +44,7 @@ function EmailList(props) {
       const data = { id: currentDateTime, email: emailFormatted };
       handleEmailLearnersSelected(data);
       setInvalidEmailError(false);
+      setEmailInputValue('');
     } else {
       setInvalidEmailError(true);
     }
@@ -52,21 +53,44 @@ function EmailList(props) {
   return (
     <Container className="col-12 my-3">
       <Form.Group controlId="emailIndividualLearners">
-        <Form.Label className="mt-3" data-testid="learners-email-input-label">{intl.formatMessage(messages.bulkEmailTaskEmailLearnersInputLabel)}</Form.Label>
+        <Form.Label className="mt-3" data-testid="learners-email-input-label">
+          {intl.formatMessage(messages.bulkEmailTaskEmailLearnersInputLabel)}
+        </Form.Label>
         <Container className="row">
-          <Form.Control data-testid="learners-email-input" name="emailSubject" className="w-lg-50" onChange={handleChangeEmailInput} placeholder={intl.formatMessage(messages.bulkEmailTaskEmailLearnersInputPlaceholder)} />
-          <Button data-testid="learners-email-add-button" variant="primary" iconAfter={SupervisedUserCircle} className="mb-2 mb-sm-0" onClick={handleAddEmail}>
-            {intl.formatMessage(messages.bulkEmailTaskEmailLearnersAddEmailButton)}
+          <Form.Control
+            data-testid="learners-email-input"
+            name="emailSubject"
+            className="w-lg-50"
+            onChange={handleChangeEmailInput}
+            value={emailInputValue}
+            placeholder={intl.formatMessage(
+              messages.bulkEmailTaskEmailLearnersInputPlaceholder,
+            )}
+          />
+          <Button
+            data-testid="learners-email-add-button"
+            variant="primary"
+            iconAfter={SupervisedUserCircle}
+            className="mb-2 mb-sm-0"
+            onClick={handleAddEmail}
+          >
+            {intl.formatMessage(
+              messages.bulkEmailTaskEmailLearnersAddEmailButton,
+            )}
           </Button>
         </Container>
-        { invalidEmailError && (
-        <Form.Control.Feedback className="px-3 mt-1" hasIcon type="invalid">
-          {intl.formatMessage(messages.bulkEmailTaskEmailLearnersErrorMessage)}
-        </Form.Control.Feedback>
+        {invalidEmailError && (
+          <Form.Control.Feedback className="px-3 mt-1" hasIcon type="invalid">
+            {intl.formatMessage(
+              messages.bulkEmailTaskEmailLearnersErrorMessage,
+            )}
+          </Form.Control.Feedback>
         )}
       </Form.Group>
       <Container className="email-list">
-        <Form.Label className="col-12" data-testid="learners-email-list-label">{intl.formatMessage(messages.bulkEmailTaskEmailLearnersListLabel)}</Form.Label>
+        <Form.Label className="col-12" data-testid="learners-email-list-label">
+          {intl.formatMessage(messages.bulkEmailTaskEmailLearnersListLabel)}
+        </Form.Label>
         {learnersEmailList.map(({ id, email }) => (
           <Chip
             className="email-chip"
@@ -80,7 +104,6 @@ function EmailList(props) {
           </Chip>
         ))}
       </Container>
-
     </Container>
   );
 }

diff --git a/...onents/bulk-email-tool/bulk-email-form/bulk-email-recipient/components/EmailList/utils.js b/...onents/bulk-email-tool/bulk-email-form/bulk-email-recipient/components/EmailList/utils.js
@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-export const isValidEmail = (email) => {
-  const emailRegex = /^(([^<>()·=~ºªÇ¨?¿*^|#¢∞¬÷"$%"≠´}{![\]\\.,;:\s@"]+(\.[^<>·$%&/=~ºªÇ¨?¿*^|#¢∞¬÷""≠´}{!()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-  return emailRegex.test(email);
-};
+// ref: https://github.com/openedx/frontend-app-authn/blob/master/src/data/constants.js#L31
+const emailRegex = /^[-!#$%&'*+/=?^_`{}|~0-9A-Za-z]+(\.[-!#$%&'*+/=?^_`{}|~0-9A-Za-z]+)*'|^"([\x20-\x21\x23-\x5b\x5d-\x7e]|\\[\x20-\x7e])*"|@((?:[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?\.)+)(?:[A-Za-z0-9-]{2,63})|\[(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}]$/;
+
+export const isValidEmail = (email) => emailRegex.test(email);