From 7c079d669b93698fc16a1432a2e0e6530927b55c Mon Sep 17 00:00:00 2001 From: Owen Lester Date: Sat, 2 Nov 2024 21:18:15 -0400 Subject: [PATCH 1/8] Add email modal --- .../components/ClubEditPage/ClubEditCard.tsx | 253 +++++++++++------- 1 file changed, 162 insertions(+), 91 deletions(-) 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 ( + + ) + }, + )} + + ) + })} + + + + )} + +
) } From 50ae980a2eeb50ff1570762f0397fbb4c3cd3740 Mon Sep 17 00:00:00 2001 From: Owen Lester Date: Sat, 2 Nov 2024 21:20:14 -0400 Subject: [PATCH 2/8] cosmetic edits --- .../components/ClubEditPage/ClubEditCard.tsx | 232 +++++++++--------- 1 file changed, 114 insertions(+), 118 deletions(-) diff --git a/frontend/components/ClubEditPage/ClubEditCard.tsx b/frontend/components/ClubEditPage/ClubEditCard.tsx index f6659c62e..232381f84 100644 --- a/frontend/components/ClubEditPage/ClubEditCard.tsx +++ b/frontend/components/ClubEditPage/ClubEditCard.tsx @@ -266,8 +266,6 @@ 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 => { @@ -861,127 +859,125 @@ export default function ClubEditCard({ : creationDefaults return ( -
- - submit({ ...values, emailOverride: false }, actions) + + 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' } - 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 && ( + 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 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 && ( - Queue Closed for Summer Break + Queue Closed for New Clubs - No edits to existing clubs or applications for new clubs will - be submitted for review to OSA. + 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. )} - {!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 ( - - ) - }, - )} - - ) - })} - - - - )} -
-
+ + {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 ( + + ) + }, + )} + + ) + })} + + + + )} + ) } From 128253b97c40c39282a86ac4986f9c084a0bdc76 Mon Sep 17 00:00:00 2001 From: Owen Lester Date: Sat, 2 Nov 2024 21:24:44 -0400 Subject: [PATCH 3/8] remvoe errors --- frontend/components/ClubEditPage/ClubEditCard.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/components/ClubEditPage/ClubEditCard.tsx b/frontend/components/ClubEditPage/ClubEditCard.tsx index 232381f84..894973142 100644 --- a/frontend/components/ClubEditPage/ClubEditCard.tsx +++ b/frontend/components/ClubEditPage/ClubEditCard.tsx @@ -1,4 +1,3 @@ -import { error } from 'console' import { Field, Form, Formik } from 'formik' import Link from 'next/link' import React, { ReactElement, useState } from 'react' @@ -871,7 +870,7 @@ export default function ClubEditCard({ showEmailModal(true) errors.email = 'Please confirm your email' } - return error + return errors }} > {({ dirty, isSubmitting, setFieldValue, submitForm }) => ( From ef2ad16650759ad25c5061513a4f2eedf6790bc1 Mon Sep 17 00:00:00 2001 From: Owen Lester Date: Sat, 2 Nov 2024 21:27:13 -0400 Subject: [PATCH 4/8] fix comment --- frontend/components/ClubEditPage/ClubEditCard.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/components/ClubEditPage/ClubEditCard.tsx b/frontend/components/ClubEditPage/ClubEditCard.tsx index 894973142..b87e6fd87 100644 --- a/frontend/components/ClubEditPage/ClubEditCard.tsx +++ b/frontend/components/ClubEditPage/ClubEditCard.tsx @@ -163,7 +163,6 @@ const EmailModal = ({ setEmail, confirmSubmission, }: EmailModalProps): ReactElement => { - // Change email help as well. return ( Date: Sat, 2 Nov 2024 22:21:07 -0400 Subject: [PATCH 5/8] fixed modal --- .../components/ClubEditPage/ClubEditCard.tsx | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/frontend/components/ClubEditPage/ClubEditCard.tsx b/frontend/components/ClubEditPage/ClubEditCard.tsx index 3fb9250fc..a6caff698 100644 --- a/frontend/components/ClubEditPage/ClubEditCard.tsx +++ b/frontend/components/ClubEditPage/ClubEditCard.tsx @@ -170,19 +170,28 @@ const EmailModal = ({ show={true} closeModal={closeModal} children={ -
-
+
+ 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)} + className={`input`} + style={{ maxWidth: '350px', marginBottom: '12px' }} > - +
+ +
} /> @@ -919,19 +928,21 @@ export default function ClubEditCard({ enableReinitialize validate={(values) => { const errors: { email?: string } = {} - if (values.email.includes('upenn.edu')) { + 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 }) => ( + {({ dirty, isSubmitting, setFieldValue, submitForm, values }) => (
{emailModal && ( showEmailModal(false)} - email="" + email={values.email} setEmail={(newEmail) => setFieldValue('email', newEmail)} confirmSubmission={() => { showEmailModal(false) From c99e54d2e7cf1322899a9e6a174575139e34bc4b Mon Sep 17 00:00:00 2001 From: Owen Lester Date: Sat, 2 Nov 2024 22:35:03 -0400 Subject: [PATCH 6/8] final changes --- frontend/components/ClubEditPage/ClubEditCard.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/frontend/components/ClubEditPage/ClubEditCard.tsx b/frontend/components/ClubEditPage/ClubEditCard.tsx index a6caff698..ab88da2dc 100644 --- a/frontend/components/ClubEditPage/ClubEditCard.tsx +++ b/frontend/components/ClubEditPage/ClubEditCard.tsx @@ -166,15 +166,11 @@ const EmailModal = ({ }: EmailModalProps): ReactElement => { 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 @@ -184,8 +180,8 @@ const EmailModal = ({ name="email" value={email} onChange={(e) => setEmail(e.target.value)} - className={`input`} - style={{ maxWidth: '350px', marginBottom: '12px' }} + className="input mb-5" + style={{ maxWidth: '350px' }} >
-
+
- } - /> +
+ ) } From fa1af76df3537de031051abe8093c1851f384307 Mon Sep 17 00:00:00 2001 From: Owen Lester Date: Sun, 3 Nov 2024 14:52:07 -0500 Subject: [PATCH 8/8] fixed margin bottom --- frontend/components/ClubEditPage/ClubEditCard.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/frontend/components/ClubEditPage/ClubEditCard.tsx b/frontend/components/ClubEditPage/ClubEditCard.tsx index 06d50ba05..3f1c4d7e9 100644 --- a/frontend/components/ClubEditPage/ClubEditCard.tsx +++ b/frontend/components/ClubEditPage/ClubEditCard.tsx @@ -165,8 +165,13 @@ const EmailModal = ({ 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