Skip to content

backed up the contact form to recommit into main #125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

backed up the contact form to recommit into main #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
227 changes: 122 additions & 105 deletions frontend/src/pages/ContactPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<HTMLInputElement> | React.FormEvent<HTMLTextAreaElement>) => {
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<HTMLInputElement> | React.FormEvent<HTMLTextAreaElement>) => {
const { value, name } = e.currentTarget;
contactInfo[name as keyof typeof contactInfo] = value;
};

function updateInfo(event: React.FormEvent<HTMLInputElement> | React.FormEvent<HTMLTextAreaElement>) {
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<HTMLInputElement> | React.FormEvent<HTMLTextAreaElement>) {
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<HTMLFormElement>) {
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<HTMLFormElement>) {
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 ? <MessageSent /> : (
<div id={styles.headerDiv}>
<div id={styles.headerContent}>
<h1 id={styles.title}>Contact Us</h1>
<form action="https://formsubmit.co/50a550228ae91c27050614b130c7b1c5" onSubmit={validateForm} method='POST'>
<div>
<label>First Name</label>
<input type="text" name="fname" onChange={handleChange} required />
</div>
<div>
<label>Last Name</label>
<input type="text" name="lname" onChange={handleChange} required />
</div>
return sent ? (
<MessageSent />
) : (
<div id={styles.headerDiv}>
<div id={styles.headerContent}>
<h1 id={styles.title}>Contact Us</h1>
<form
onSubmit={(form) => {
form.preventDefault();
setSent(true);
validateForm(form);
}}
method="POST"
>
<div>
<label>First Name</label>
<input type="text" name="firstName" onChange={handleChange} required />
</div>
<div>
<label>Last Name</label>
<input type="text" name="lastName" onChange={handleChange} required />
</div>

<p>
<label>Subject</label>
<input type="text" name="subject" onChange={handleChange} required />
</p>
<p>
<label>Email Address</label>
<input type="text" name="email" onChange={handleChange} required />
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone" onChange={handleChange} required />
</p>
<p>
<label>Your message</label>
<textarea name="text" onChange={handleChange} required></textarea>
</p>
<div className={styles.buttonHolder}>
<input type="submit" value="Send Message" onClick={() => { submitValid() && setSent(true) }}></input>
</div>
</form>
</div>
</div>
)
<p>
<label>Subject</label>
<input type="text" name="subject" onChange={handleChange} required />
</p>
<p>
<label>Email Address</label>
<input type="text" name="email" onChange={handleChange} required />
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phoneNumber" onChange={handleChange} required />
</p>
<p>
<label>Your message</label>
<textarea name="message" onChange={handleChange} required></textarea>
</p>
<div className={styles.buttonHolder}>
<button type="submit" value="Send Message"></button>
</div>
</form>
</div>
</div>
);
}

export default ContactPage;
export default ContactPage;
10 changes: 5 additions & 5 deletions frontend/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down