Modal for emails with upenn.edu on Club Creation (#744)

* Add email modal * cosmetic edits * remvoe errors * fix comment * fixed modal * final changes * fixed nits * fixed margin bottom
pennlabs · Nov 7, 2024 · d121715 · d121715
1 parent 3a002c4
commit d121715
Showing 1 changed file with 74 additions and 2 deletions.
diff --git a/frontend/components/ClubEditPage/ClubEditCard.tsx b/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}
+      marginBottom={false}
+    >
+      <div className="card-content" style={{ marginBottom: '24px' }}>
+        <Text>
+          Warning: This email will be shown to the public. We highly recommend
+          you don't use a personal email, and instead use a club email. Feel
+          free to ignore this warning if the email is not a personal email.
+        </Text>
+        <Field
+          name="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="input mb-4"
+          style={{ maxWidth: '350px' }}
+        ></Field>
+        <div>
+          <button onClick={confirmSubmission} className="button is-primary">
+            Confirm
+          </button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
 
 /**
  * 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>