Modal for emails with upenn.edu on Club Creation

frontend/components/ClubEditPage/ClubEditCard.tsx

@@ -151,6 +151,48 @@ const Card = ({
     </div>
   )
 }
+interface EmailModalProps {
+  closeModal: () => void
+  email: string
+  setEmail: (inp: string) => void
+  confirmSubmission: () => void
+}
+
+const EmailModal = ({
+  closeModal,
+  email,
+  setEmail,
+  confirmSubmission,
+}: EmailModalProps): ReactElement => {
+  return (
+    <Modal
+      width={'450px'}
+      show={true}
+      closeModal={closeModal}
+      children={
+        <div>
+          <Text className="card-content">
+            Warning: This email will be down to the public. We highly recommend
+            you don't use a personal email, and instead use a club email. Feel
+            free to ignore this if the email is not a personal email.
+          </Text>
+          <Field
+            name="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="input mb-5"
+            style={{ maxWidth: '350px' }}
+          ></Field>
+          <div>
+            <button onClick={confirmSubmission} className="button is-primary">
+              Confirm
+            </button>
+          </div>
+        </div>
+      }
+    />
+  )
+}
 
 /**
  * Remove fields in an object that are not part of a whitelist.
@@ -229,6 +271,8 @@ export default function ClubEditCard({
     ),
   )
 
+  const [emailModal, showEmailModal] = useState<boolean>(false)
+
   const submit = (data, { setSubmitting, setStatus }): Promise<void> => {
     const photo = data.image
     if (photo !== null) {
@@ -850,6 +894,7 @@ export default function ClubEditCard({
 
   const creationDefaults = {
     subtitle: '',
+    email: '',
     email_public: true,
     accepting_members: false,
     size: CLUB_SIZES[0].value,
@@ -871,9 +916,36 @@ export default function ClubEditCard({
     : creationDefaults
 
   return (
-    <Formik initialValues={initialValues} onSubmit={submit} enableReinitialize>
-      {({ dirty, isSubmitting }) => (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={(values, actions) =>
+        submit({ ...values, emailOverride: false }, actions)
+      }
+      enableReinitialize
+      validate={(values) => {
+        const errors: { email?: string } = {}
+        if (values.email.includes('upenn.edu') && !emailModal) {
+          showEmailModal(true)
+          errors.email = 'Please confirm your email'
+        }
+        return errors
+      }}
+      validateOnChange={false}
+      validateOnBlur={false}
+    >
+      {({ dirty, isSubmitting, setFieldValue, submitForm, values }) => (
         <Form>
+          {emailModal && (
+            <EmailModal
+              closeModal={() => showEmailModal(false)}
+              email={values.email}
+              setEmail={(newEmail) => setFieldValue('email', newEmail)}
+              confirmSubmission={() => {
+                showEmailModal(false)
+                submitForm()
+              }}
+            />
+          )}
           {!REAPPROVAL_QUEUE_ENABLED && (
             <LiveBanner>
               <LiveTitle>Queue Closed for Summer Break</LiveTitle>