diff --git a/frontend/components/ClubEditPage/ClubEditCard.tsx b/frontend/components/ClubEditPage/ClubEditCard.tsx index 679a310ba..3f1c4d7e9 100644 --- a/frontend/components/ClubEditPage/ClubEditCard.tsx +++ b/frontend/components/ClubEditPage/ClubEditCard.tsx @@ -151,6 +151,48 @@ const Card = ({ ) } +interface EmailModalProps { + closeModal: () => void + email: string + setEmail: (inp: string) => void + confirmSubmission: () => void +} + +const EmailModal = ({ + closeModal, + email, + setEmail, + confirmSubmission, +}: EmailModalProps): ReactElement => { + return ( + +
+ + 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. + + setEmail(e.target.value)} + className="input mb-4" + style={{ maxWidth: '350px' }} + > +
+ +
+
+
+ ) +} /** * Remove fields in an object that are not part of a whitelist. @@ -229,6 +271,8 @@ export default function ClubEditCard({ ), ) + const [emailModal, showEmailModal] = useState(false) + const submit = (data, { setSubmitting, setStatus }): Promise => { 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 ( - - {({ dirty, isSubmitting }) => ( + + 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 }) => (
+ {emailModal && ( + showEmailModal(false)} + email={values.email} + setEmail={(newEmail) => setFieldValue('email', newEmail)} + confirmSubmission={() => { + showEmailModal(false) + submitForm() + }} + /> + )} {!REAPPROVAL_QUEUE_ENABLED && ( Queue Closed for Summer Break