From 0d0300fe2cc1abc8f6ba0a296e672af1a69871a1 Mon Sep 17 00:00:00 2001 From: hallehau Date: Fri, 26 Apr 2024 00:59:02 -0400 Subject: [PATCH 1/4] added validation for the Name field, should only accept names with letters, whitespaces, periods, and dashes --- lantern-club/package-lock.json | 60 +++++++++++++++++++ lantern-club/package.json | 4 ++ .../src/components/contact/Contact.tsx | 13 +++- 3 files changed, 75 insertions(+), 2 deletions(-) diff --git a/lantern-club/package-lock.json b/lantern-club/package-lock.json index 80bdb2e..fd5f30f 100644 --- a/lantern-club/package-lock.json +++ b/lantern-club/package-lock.json @@ -10,6 +10,7 @@ "hasInstallScript": true, "dependencies": { "@auth/prisma-adapter": "^1.0.2", + "@coffeeandfun/google-profanity-words": "^2.1.0", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", @@ -32,8 +33,11 @@ "nodemailer": "^6.9.9", "react": "^18.2.0", "react-dom": "latest", + "react-form-input-validation": "^2.1.0", + "react-hook-form": "^7.51.3", "react-intersection-observer": "^9.8.1", "react-multi-carousel": "^2.8.4", + "swr": "^2.2.5", "uuid": "^9.0.1" }, "devDependencies": { @@ -137,6 +141,11 @@ "node": ">=6.9.0" } }, + "node_modules/@coffeeandfun/google-profanity-words": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@coffeeandfun/google-profanity-words/-/google-profanity-words-2.1.0.tgz", + "integrity": "sha512-j7/N2C01g5W22ReQ4laVR5MdTFRidDLkVY9z6z9Mresla83sd9vQalMXypQnT1+RuHErEfGIYNm5/Hu/LF/zzA==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -5779,6 +5788,32 @@ "react": "^18.2.0" } }, + "node_modules/react-form-input-validation": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-form-input-validation/-/react-form-input-validation-2.1.0.tgz", + "integrity": "sha512-XQUoQd540ykxUkEuoakJXo55IXMzgBgLFsT81CjnQ9LTufgGibOyKyJ5ByPdfPotpRwHbdxURMU5b9rq+8Vj4Q==", + "dependencies": { + "validatorjs": "^3.22.1" + }, + "peerDependencies": { + "react": ">=16.9.0" + } + }, + "node_modules/react-hook-form": { + "version": "7.51.3", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.3.tgz", + "integrity": "sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==", + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-intersection-observer": { "version": "9.8.1", "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.8.1.tgz", @@ -6482,6 +6517,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swr": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz", + "integrity": "sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==", + "dependencies": { + "client-only": "^0.0.1", + "use-sync-external-store": "^1.2.0" + }, + "peerDependencies": { + "react": "^16.11.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/tailwindcss": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz", @@ -6842,6 +6889,14 @@ "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==" }, + "node_modules/use-sync-external-store": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.1.tgz", + "integrity": "sha512-6MCBDr76UJmRpbF8pzP27uIoTocf3tITaMJ52mccgAhMJycuh5A/RL6mDZCTwTisj0Qfeq69FtjMCUX27U78oA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", @@ -6871,6 +6926,11 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/validatorjs": { + "version": "3.22.1", + "resolved": "https://registry.npmjs.org/validatorjs/-/validatorjs-3.22.1.tgz", + "integrity": "sha512-451KiCt/3E8qV/8fOUdO0YkA8zUdQBNVxubg9jvgEB+JAg9IlRKrClzwq2ir2ndj7TWmPYQ7bXFb4BxcyX2iWw==" + }, "node_modules/webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", diff --git a/lantern-club/package.json b/lantern-club/package.json index b607b11..2a9c8fd 100644 --- a/lantern-club/package.json +++ b/lantern-club/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@auth/prisma-adapter": "^1.0.2", + "@coffeeandfun/google-profanity-words": "^2.1.0", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", @@ -33,8 +34,11 @@ "nodemailer": "^6.9.9", "react": "^18.2.0", "react-dom": "latest", + "react-form-input-validation": "^2.1.0", + "react-hook-form": "^7.51.3", "react-intersection-observer": "^9.8.1", "react-multi-carousel": "^2.8.4", + "swr": "^2.2.5", "uuid": "^9.0.1" }, "devDependencies": { diff --git a/lantern-club/src/components/contact/Contact.tsx b/lantern-club/src/components/contact/Contact.tsx index 952276a..f332c3d 100644 --- a/lantern-club/src/components/contact/Contact.tsx +++ b/lantern-club/src/components/contact/Contact.tsx @@ -15,14 +15,21 @@ export default function Contact() { const onSubmit = (event: FormEvent) => { event.preventDefault(); + + addEventListener("invalid", (event) => {}); + oninvalid = (event) => {}; const tempFormData: { [key: string]: string } = {}; new FormData(event.currentTarget).forEach((value, key) => { tempFormData[key] = value.toString(); }); - setFormData(tempFormData); // Store form data for later submission - setShowConfirmation(true); // Show the confirmation popup + if (false) { + + } else { + setFormData(tempFormData); // Store form data for later submission + setShowConfirmation(true); // Show the confirmation popu + } }; const onConfirmSubmit = async () => { @@ -87,6 +94,8 @@ export default function Contact() { required type="text" name="name" + pattern="[A-Za-z\s]+" + title="Name field can only contain letters" className="mt-2 w-full p-3 border-contact-g1 border-4 mr-7 outline-gc2 h-8 contact-input rounded-3xl" > From 17a27bbb79d9ea778ac0608ca5c2a0dede7ae46b Mon Sep 17 00:00:00 2001 From: hallehau Date: Fri, 26 Apr 2024 01:25:15 -0400 Subject: [PATCH 2/4] updated the pattern to include periods, whitespaces, and hyphens --- lantern-club/src/components/contact/Contact.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lantern-club/src/components/contact/Contact.tsx b/lantern-club/src/components/contact/Contact.tsx index f332c3d..396e580 100644 --- a/lantern-club/src/components/contact/Contact.tsx +++ b/lantern-club/src/components/contact/Contact.tsx @@ -94,8 +94,8 @@ export default function Contact() { required type="text" name="name" - pattern="[A-Za-z\s]+" - title="Name field can only contain letters" + pattern="[A-Za-z.\s\-]+" + title="Must be a valid name (no numbers, symbols, etc.)" className="mt-2 w-full p-3 border-contact-g1 border-4 mr-7 outline-gc2 h-8 contact-input rounded-3xl" > From d9ffa8755d32839d938102e1cd101af6e17d27e4 Mon Sep 17 00:00:00 2001 From: hallehau Date: Fri, 26 Apr 2024 01:26:06 -0400 Subject: [PATCH 3/4] deleted unnecessary lines of code --- lantern-club/src/components/contact/Contact.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/lantern-club/src/components/contact/Contact.tsx b/lantern-club/src/components/contact/Contact.tsx index 396e580..5ecd863 100644 --- a/lantern-club/src/components/contact/Contact.tsx +++ b/lantern-club/src/components/contact/Contact.tsx @@ -15,21 +15,12 @@ export default function Contact() { const onSubmit = (event: FormEvent) => { event.preventDefault(); - - addEventListener("invalid", (event) => {}); - oninvalid = (event) => {}; const tempFormData: { [key: string]: string } = {}; new FormData(event.currentTarget).forEach((value, key) => { tempFormData[key] = value.toString(); }); - if (false) { - - } else { - setFormData(tempFormData); // Store form data for later submission - setShowConfirmation(true); // Show the confirmation popu - } }; const onConfirmSubmit = async () => { From 0130ec421ce742a29a283446b29f6c796eefa350 Mon Sep 17 00:00:00 2001 From: hallehau Date: Fri, 26 Apr 2024 18:58:08 -0400 Subject: [PATCH 4/4] Added back the two lines of code for the confirmation pop-up, sorry I must have deleted it by accident ahah :D --- lantern-club/src/components/contact/Contact.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lantern-club/src/components/contact/Contact.tsx b/lantern-club/src/components/contact/Contact.tsx index 5ecd863..2218677 100644 --- a/lantern-club/src/components/contact/Contact.tsx +++ b/lantern-club/src/components/contact/Contact.tsx @@ -21,6 +21,9 @@ export default function Contact() { tempFormData[key] = value.toString(); }); + setFormData(tempFormData); // Store form data for later submission + setShowConfirmation(true); // Show the confirmation popup + }; const onConfirmSubmit = async () => {