From 477923643ea824f84dde4f59cb356e4491016de9 Mon Sep 17 00:00:00 2001 From: Sahil Gaba Date: Tue, 5 Nov 2024 14:09:31 -0500 Subject: [PATCH] backed up the contact form to recommit into main --- frontend/package-lock.json | 15 ++ frontend/package.json | 1 + frontend/src/pages/ContactPage.tsx | 227 ++++++++++++++++------------- frontend/yarn.lock | 10 +- 4 files changed, 143 insertions(+), 110 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7c6a2ea..4d047ba 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,7 @@ "name": "h4i-navbar", "version": "0.1.0", "dependencies": { + "@emailjs/browser": "^4.4.1", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", @@ -2161,6 +2162,15 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emailjs/browser": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.4.1.tgz", + "integrity": "sha512-DGSlP9sPvyFba3to2A50kDtZ+pXVp/0rhmqs2LmbMS3I5J8FSOgLwzY2Xb4qfKlOVHh29EAutLYwe5yuEZmEFg==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -16208,6 +16218,11 @@ "integrity": "sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==", "requires": {} }, + "@emailjs/browser": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.4.1.tgz", + "integrity": "sha512-DGSlP9sPvyFba3to2A50kDtZ+pXVp/0rhmqs2LmbMS3I5J8FSOgLwzY2Xb4qfKlOVHh29EAutLYwe5yuEZmEFg==" + }, "@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index db02ff8..c2bbf18 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@emailjs/browser": "^4.4.1", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", diff --git a/frontend/src/pages/ContactPage.tsx b/frontend/src/pages/ContactPage.tsx index 5f54c73..c4e0020 100644 --- a/frontend/src/pages/ContactPage.tsx +++ b/frontend/src/pages/ContactPage.tsx @@ -1,120 +1,137 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { Link } from 'react-router-dom'; -import { convertTypeAcquisitionFromJson, formatDiagnostic } from 'typescript'; +import emailjs from '@emailjs/browser'; +import React, { useState } from 'react'; import styles from '../styles/contact/Contact.module.css'; import MessageSent from './MessageSent'; function ContactPage() { - const [sent, setSent] = useState(false); - const state = { - fname: "", - lname: "", - subject: "", - email: "", - phone: "", - text: "" - } - const handleChange = (e: React.FormEvent | React.FormEvent) => { - const { value, name } = e.currentTarget; - state[name as keyof typeof state] = value; - }; - function submitValid() { - return state.fname && state.lname && state.subject && state.email && state.phone && state.text; - } + const [sent, setSent] = useState(false); + const [contactInfo] = useState({ + firstName: '', + lastName: '', + subject: '', + email: '', + phoneNumber: '', + message: '', + }); - const [contactInfo] = useState({ - firstName: '', - lastName: '', - subject: '', - email: '', - phoneNumber: '', - message: '', - }); + const handleChange = (e: React.FormEvent | React.FormEvent) => { + const { value, name } = e.currentTarget; + contactInfo[name as keyof typeof contactInfo] = value; + }; - function updateInfo(event: React.FormEvent | React.FormEvent) { - const formProp = event.currentTarget - if (formProp.id == "firstName") { - contactInfo.firstName = formProp.value; - } else if (formProp.id == "lastName") { - contactInfo.lastName = formProp.value; - } else if (formProp.id == "subject") { - contactInfo.subject = formProp.value; - } else if (formProp.id == "email") { - contactInfo.email = formProp.value; - } else if (formProp.id == "phoneNumber") { - contactInfo.phoneNumber = formProp.value; - } else if (formProp.id == "message") { - contactInfo.message = formProp.value; - } + function updateInfo(event: React.FormEvent | React.FormEvent) { + const formProp = event.currentTarget; + if (formProp.id == 'firstName') { + contactInfo.firstName = formProp.value; + } else if (formProp.id == 'lastName') { + contactInfo.lastName = formProp.value; + } else if (formProp.id == 'subject') { + contactInfo.subject = formProp.value; + } else if (formProp.id == 'email') { + contactInfo.email = formProp.value; + } else if (formProp.id == 'phoneNumber') { + contactInfo.phoneNumber = formProp.value; + } else if (formProp.id == 'message') { + contactInfo.message = formProp.value; } + } + console.log(process.env.PUBLIC_KEY); - function validateForm(event: React.FormEvent) { - console.log(contactInfo) - const verifyEmail = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/; - const verifyPhoneNumberCaseOne = /^[0-9]{10}$/; - const verifyPhoneNumberCaseTwo = /^[0-9]{3} [0-9]{3} [0-9]{4}$/; - const verifyPhoneNumberCaseThree = /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/; - - if (contactInfo.firstName === '' || contactInfo.lastName === '' || contactInfo.subject === '' - || contactInfo.email === '' || contactInfo.phoneNumber === '' || contactInfo.message === '') { + async function validateForm(event: React.FormEvent) { + console.log(contactInfo); + const verifyEmail = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/; + const verifyPhoneNumberCaseOne = /^[0-9]{10}$/; + const verifyPhoneNumberCaseTwo = /^[0-9]{3} [0-9]{3} [0-9]{4}$/; + const verifyPhoneNumberCaseThree = /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/; - event.preventDefault(); - alert("contact information is empty") - return false; - } - - if (!verifyEmail.test(contactInfo.email)) { - event.preventDefault(); - alert("Email is invalid") - return false; - } - if (!verifyPhoneNumberCaseOne.test(contactInfo.phoneNumber) && !verifyPhoneNumberCaseTwo.test(contactInfo.phoneNumber) - && !verifyPhoneNumberCaseThree.test(contactInfo.phoneNumber)) { - event.preventDefault(); - alert("Phone number is invalid\nFormat: 0000000000 or 000-000-0000 or 000 000 0000") - return false; - } + if ( + contactInfo.firstName === '' || + contactInfo.lastName === '' || + contactInfo.subject === '' || + contactInfo.email === '' || + contactInfo.phoneNumber === '' || + contactInfo.message === '' + ) { + event.preventDefault(); + alert('contact information is empty'); + return false; + } - return true + if (!verifyEmail.test(contactInfo.email)) { + event.preventDefault(); + alert('Email is invalid'); + return false; + } + if ( + !verifyPhoneNumberCaseOne.test(contactInfo.phoneNumber) && + !verifyPhoneNumberCaseTwo.test(contactInfo.phoneNumber) && + !verifyPhoneNumberCaseThree.test(contactInfo.phoneNumber) + ) { + event.preventDefault(); + alert('Phone number is invalid\nFormat: 0000000000 or 000-000-0000 or 000 000 0000'); + return false; } + await emailjs + .send('service_rux8luc', 'template_fgd74qw', contactInfo, { + publicKey: 'oqfPTswPuNLGMxG8o', + }) + .then( + () => { + console.log('SUCCESS!'); + }, + (error) => { + console.log('FAILED...', error); + }, + ); + return true; + } - return sent ? : ( -
-
-

Contact Us

-
-
- - -
-
- - -
+ return sent ? ( + + ) : ( +
+
+

Contact Us

+ { + form.preventDefault(); + setSent(true); + validateForm(form); + }} + method="POST" + > +
+ + +
+
+ + +
-

- - -

-

- - -

-

- - -

-

- - -

-
- { submitValid() && setSent(true) }}> -
- -
-
- ) +

+ + +

+

+ + +

+

+ + +

+

+ + +

+
+ +
+ +
+
+ ); } -export default ContactPage; \ No newline at end of file +export default ContactPage; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 953841a..5839b4a 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1168,6 +1168,11 @@ resolved "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-1.0.0.tgz" integrity sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw== +"@emailjs/browser@^4.4.1": + version "4.4.1" + resolved "https://registry.npmjs.org/@emailjs/browser/-/browser-4.4.1.tgz" + integrity sha512-DGSlP9sPvyFba3to2A50kDtZ+pXVp/0rhmqs2LmbMS3I5J8FSOgLwzY2Xb4qfKlOVHh29EAutLYwe5yuEZmEFg== + "@eslint/eslintrc@^1.3.0": version "1.3.0" resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz" @@ -4578,11 +4583,6 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== -fsevents@^2.3.2, fsevents@~2.3.2: - version "2.3.2" - resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz" - integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== - function-bind@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"