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' }}
+ >
+
+
+ Confirm
+
+
+
+
+ )
+}
/**
* 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 }) => (