diff --git a/frontend/components/ClubEditPage/ClubEditCard.tsx b/frontend/components/ClubEditPage/ClubEditCard.tsx index c7234e9b6..f6659c62e 100644 --- a/frontend/components/ClubEditPage/ClubEditCard.tsx +++ b/frontend/components/ClubEditPage/ClubEditCard.tsx @@ -1,3 +1,4 @@ +import { error } from 'console' import { Field, Form, Formik } from 'formik' import Link from 'next/link' import React, { ReactElement, useState } from 'react' @@ -41,7 +42,7 @@ import { SITE_NAME, } from '../../utils/branding' import { LiveBanner, LiveSub, LiveTitle } from '../ClubPage/LiveEventsDialog' -import { Checkbox, CheckboxLabel, Contact, Text } from '../common' +import { Checkbox, CheckboxLabel, Contact, Modal, Text } from '../common' import { CheckboxField, CheckboxTextField, @@ -150,6 +151,44 @@ const Card = ({ ) } +interface EmailModalProps { + closeModal: () => void + email: string + setEmail: (inp: string) => void + confirmSubmission: () => void +} + +const EmailModal = ({ + closeModal, + email, + setEmail, + confirmSubmission, +}: EmailModalProps): ReactElement => { + // Change email help as well. + return ( + +
+ 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. +
+ setEmail(e.target.value)} + > + + + } + /> + ) +} /** * Remove fields in an object that are not part of a whitelist. @@ -227,6 +266,10 @@ export default function ClubEditCard({ ), ) + // Need to save the email here! + // And also need t save data in a state + const [emailModal, showEmailModal] = useState(false) + const submit = (data, { setSubmitting, setStatus }): Promise => { const photo = data.image if (photo !== null) { @@ -796,6 +839,7 @@ export default function ClubEditCard({ const creationDefaults = { subtitle: '', + email: '', email_public: true, accepting_members: false, size: CLUB_SIZES[0].value, @@ -817,100 +861,127 @@ export default function ClubEditCard({ : creationDefaults return ( - - {({ dirty, isSubmitting }) => ( -
- {!REAPPROVAL_QUEUE_ENABLED && ( - - Queue Closed for Summer Break - - No edits to existing clubs or applications for new clubs will be - submitted for review to OSA. - - - )} - {!NEW_APPROVAL_QUEUE_ENABLED && - REAPPROVAL_QUEUE_ENABLED && - !isEdit && ( +
+ + submit({ ...values, emailOverride: false }, actions) + } + enableReinitialize + validate={(values) => { + const errors: { email?: string } = {} + if (values.email.includes('upenn.edu')) { + showEmailModal(true) + errors.email = 'Please confirm your email' + } + return error + }} + > + {({ dirty, isSubmitting, setFieldValue, submitForm }) => ( + + {emailModal && ( + showEmailModal(false)} + email="" + setEmail={(newEmail) => setFieldValue('email', newEmail)} + confirmSubmission={() => { + showEmailModal(false) + submitForm() + }} + /> + )} + {!REAPPROVAL_QUEUE_ENABLED && ( - Queue Closed for New Clubs + Queue Closed for Summer Break - Submissions for new clubs are closed for the time being. - Please reach out to the Office of Student Affairs at - vpul-pennosa@pobox.upenn.edu with any questions. + No edits to existing clubs or applications for new clubs will + be submitted for review to OSA. )} - - {fields.map(({ name, description, fields, hidden }, i) => { - if (hidden) { - return null - } - return ( - - {description} - {(fields as any[]).map( - (props: any, i): ReactElement | null => { - const { hidden, ...other } = props - if (hidden) { - return null - } - if (props.type === 'content') { - return
{props.content}
- } - if (other.help) { - other.helpText = other.help - delete other.help - } - if (props.type === 'select') { - other.isMulti = false - } else if (props.type === 'multiselect') { - other.isMulti = true - } - if (props.type === 'image') { - other.isImage = true - delete other.type - } - - return ( - - ) - }, - )} -
- ) - })} - -
- - )} -
+ {!NEW_APPROVAL_QUEUE_ENABLED && + REAPPROVAL_QUEUE_ENABLED && + !isEdit && ( + + Queue Closed for New Clubs + + Submissions for new clubs are closed for the time being. + Please reach out to the Office of Student Affairs at + vpul-pennosa@pobox.upenn.edu with any questions. + + + )} + + {fields.map(({ name, description, fields, hidden }, i) => { + if (hidden) { + return null + } + return ( + + {description} + {(fields as any[]).map( + (props: any, i): ReactElement | null => { + const { hidden, ...other } = props + if (hidden) { + return null + } + if (props.type === 'content') { + return
{props.content}
+ } + if (other.help) { + other.helpText = other.help + delete other.help + } + if (props.type === 'select') { + other.isMulti = false + } else if (props.type === 'multiselect') { + other.isMulti = true + } + if (props.type === 'image') { + other.isImage = true + delete other.type + } + + return ( + + ) + }, + )} +
+ ) + })} + +
+ + )} + +
) }