From 9ba975cc9254f28251ad8ed9cdf84f7c14e77b1a Mon Sep 17 00:00:00 2001 From: Tben <52448020+BenjaminToby@users.noreply.github.com> Date: Thu, 6 Jan 2022 09:05:14 +0100 Subject: [PATCH] add mailing system --- .gitignore | 4 +- functions/frontend/submitContactForm.js | 31 +++ package-lock.json | 299 +++++++++++++----------- package.json | 1 + pages/api/contactForm.js | 68 ++++++ pages/contact.jsx | 12 +- pages/index.jsx | 2 +- styles/main.css | 22 +- 8 files changed, 291 insertions(+), 148 deletions(-) create mode 100644 functions/frontend/submitContactForm.js create mode 100644 pages/api/contactForm.js diff --git a/.gitignore b/.gitignore index 1380c2e..62aec3e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ node_modules -.next \ No newline at end of file +.next +node_shell +.env \ No newline at end of file diff --git a/functions/frontend/submitContactForm.js b/functions/frontend/submitContactForm.js new file mode 100644 index 0000000..65b0d58 --- /dev/null +++ b/functions/frontend/submitContactForm.js @@ -0,0 +1,31 @@ +export default async function submitContactForm(e, setSuccess) { + e.preventDefault(); + + let name = e.target[0].value; + let email = e.target[1].value; + let message = e.target[2].value; + + let body = { + name: name, + email: email, + message: message, + }; + + let res = await fetch("/api/contactForm", { + method: "post", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(body), + }); + + let data = await res.json(); + + console.log(data); + + if (data.msg === "Success") { + setSuccess("Success"); + } else { + setSuccess("Failed"); + } +} diff --git a/package-lock.json b/package-lock.json index 9c27cfd..f3e71c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,10 +5,12 @@ "requires": true, "packages": { "": { + "name": "personal_site", "version": "1.0.0", "license": "ISC", "dependencies": { "next": "^12.0.4", + "nodemailer": "^6.7.2", "react": "^17.0.2", "react-dom": "^17.0.2" } @@ -711,19 +713,19 @@ "integrity": "sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA==" }, "node_modules/@next/env": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.4.tgz", - "integrity": "sha512-QtZ6X5c6Zqa7oWs5csEmZ7xy+gLdtRKKg02SOT5l0Ziea4P5IU8mSOCyNC4fZmXewcRVjpbY+yGqAAP7hJUfOA==" + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.7.tgz", + "integrity": "sha512-TNDqBV37wd95SiNdZsSUq8gnnrTwr+aN9wqy4Zxrxw4bC/jCHNsbK94DxjkG99VL30VCRXXDBTA1/Wa2jIpF9Q==" }, "node_modules/@next/polyfill-module": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.4.tgz", - "integrity": "sha512-mk9yCDNpfXINTJKFTZNgwYs7eqRFpc5D/49O/fKB59blihyKl1GY1sZ0l7a2bn5l1X/WuaZzcIfqnrwkneqeaQ==" + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.7.tgz", + "integrity": "sha512-sA8LAMMlmcspIZw/jeQuJTyA3uGrqOhTBaQE+G9u6DPohqrBFRkaz7RzzJeqXkUXw600occsIBknSjyVd1R67A==" }, "node_modules/@next/react-dev-overlay": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.4.tgz", - "integrity": "sha512-9O0lXyzv5goFSmDwq9Hp8JE+DcObvd+bTXvmGSSvYR91AlIoVlH8/PwATx8Rf5YEuqggn/XKR1hn2kBYcbcGnA==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.7.tgz", + "integrity": "sha512-dSQLgpZ5uzyittFtIHlJCLAbc0LlMFbRBSYuGsIlrtGyjYN+WMcnz8lK48VLxNPFGuB/hEzkWV4TW5Zu75+Fzg==", "dependencies": { "@babel/code-frame": "7.12.11", "anser": "1.4.9", @@ -813,9 +815,9 @@ } }, "node_modules/@next/react-refresh-utils": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.4.tgz", - "integrity": "sha512-kNUDmpBaJ+8Lb8CtKNynRFF9oijCjUKKru6Ont+JKhti9//5dNFFIcuo607bJSH86un06OEK0TZUt5XWVlbkjw==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.7.tgz", + "integrity": "sha512-Pglj1t+7RxH0txEqVcD8ZxrJgqLDmKvQDqxKq3ZPRWxMv7LTl7FVT2Pnb36QFeBwCvMVl67jxsADKsW0idz8sA==", "peerDependencies": { "react-refresh": "0.8.3", "webpack": "^4 || ^5" @@ -827,9 +829,9 @@ } }, "node_modules/@next/swc-android-arm64": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.0.4.tgz", - "integrity": "sha512-6mXumia8ZPcy7bYu9kjItfWxrE6SFaJyqQDaFy9G9WrU9x3M1R1Yok8B2X1mboM8itD0tq+t3R/ebQEkkmevUw==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.0.7.tgz", + "integrity": "sha512-yViT7EEc7JqxncRT+ZTeTsrAYXLlcefo0Y0eAfYmmalGD2605L4FWAVrJi4WnrSLji7l+veczw1WBmNeHICKKA==", "cpu": [ "arm64" ], @@ -842,9 +844,9 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.4.tgz", - "integrity": "sha512-7WMen1qhF5JmjKD9S5IEgEoaPJOXyIZj/Nsqa8ZSWxdF5oogp3uYYbKb/rvMYoKzpIbjyoLH/OCM5lm5IFM4iw==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.7.tgz", + "integrity": "sha512-vhAyW2rDEUcQesRVaj0z1hSoz7QhDzzGd0V1/5/5i9YJOfOtyrPsVJ82tlf7BfXl6/Ep+eKNfWVIb5/Jv89EKg==", "cpu": [ "arm64" ], @@ -857,9 +859,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.4.tgz", - "integrity": "sha512-PVgefMWjxP6CU1HQs39+Bfpjcue6qErJfvJ/+n2zimjLzyeQAmD6LM9f1lDSttW2LjKjasoxR5qkRNLVlqzlaA==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.7.tgz", + "integrity": "sha512-km+6Rx6TvbraoQ1f0MXa69ol/x0RxzucFGa2OgZaYJERas0spy0iwW8hpASsGcf597D8VRW1x+R2C7ZdjVBSTw==", "cpu": [ "x64" ], @@ -872,9 +874,9 @@ } }, "node_modules/@next/swc-linux-arm-gnueabihf": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.4.tgz", - "integrity": "sha512-8xGQu3sJiIdriKiCux3jDJ9pwivELEg7z2zfW0CqmQMbKNB7qP9lc0pq6CxshtKyXRMczNWRMtQ3Cjwep+UvNg==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.7.tgz", + "integrity": "sha512-d0zWr877YqZ2cf/DQy6obouaR39r0FPebcXj2nws9AC99m68CO2xVpWv9jT7mFvpY+T40HJisLH80jSZ2iQ9sA==", "cpu": [ "arm" ], @@ -887,9 +889,9 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.4.tgz", - "integrity": "sha512-HhEWcBkqGr3E7SYLtN9VnYUGamAWaLcXawHN33Em0WP7gzXrBqz0iIJNH7uEzHDS6980EqU/rrkLyhCHrYSZgQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.7.tgz", + "integrity": "sha512-fdobh5u6gG13Gd5LkHhJ+W8tF9hbaFolRW99FhzArMe5/nMKlLdBymOxvitE3K4gSFQxbXJA6TbU0Vv0e59Kww==", "cpu": [ "arm64" ], @@ -902,9 +904,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.4.tgz", - "integrity": "sha512-oZyQ9wjtE7OX9RlnovP7izNx2AR/RzTuYWU4Ttim8ssABsipQSxSlfRaeb+Qi6jTc6k+lrPhjRfaZ+fGv/m2Ag==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.7.tgz", + "integrity": "sha512-vx0c5Q3oIScFNT/4jI9rCe0yPzKuCqWOkiO/OOV0ixSI2gLhbrwDIcdkm79fKVn3i8JOJunxE4zDoFeR/g8xqQ==", "cpu": [ "arm64" ], @@ -917,9 +919,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.4.tgz", - "integrity": "sha512-aBuf78QzL93T59Lk9kEGfHcA+9SzYIH7dGon1nqVxtAd2iqicKYNVaVcb38VKeiIBXMSUHXTdu6Ee053ZCOmSw==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.7.tgz", + "integrity": "sha512-9ITyp6s6uGVKNx3C/GP7GrYycbcwTADG7TdIXzXUxOOZORrdB1GNg3w/EL3Am4VMPPEpO6v1RfKo2IKZpVKfTA==", "cpu": [ "x64" ], @@ -932,9 +934,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.4.tgz", - "integrity": "sha512-yDgqUqL4H8M3Y0hv30ZyL9UvjnK4iXmD4I6iJz+XIHSRdA/VUiyKKoL7okf9hxr0mSxBtagbZ5A3qEoW/VliUQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.7.tgz", + "integrity": "sha512-C+k+cygbIZXYfc+Hx2fNPUBEg7jzio+mniP5ywZevuTXW14zodIfQ3ZMoMJR8EpOVvYpjWFk2uAjiwqgx8vo/g==", "cpu": [ "x64" ], @@ -947,9 +949,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.4.tgz", - "integrity": "sha512-evDUrEYsUo+PMHsedaymfZO98VwV9wNFzuWVCyKgqg6SD1ZRpzbpqYQY7aINIuqZVdIWZElBE6EM+oxaj7PuWQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.7.tgz", + "integrity": "sha512-7jTRjOKkDVnb5s7VoHT7eX+eyT/5BQJ/ljP2G56riAgKGqPL63/V7FXemLhhLT67D+OjoP8DRA2E2ne6IPHk4w==", "cpu": [ "arm64" ], @@ -962,9 +964,9 @@ } }, "node_modules/@next/swc-win32-ia32-msvc": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.4.tgz", - "integrity": "sha512-Lbmz0xlo8vW4EDWyzCfy3nGfqt7skqwxaERwe+vDVTBZ56mvJ5dsdyjqK24sxu4FFkWR7SaU4eNlHwZR+A3kTg==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.7.tgz", + "integrity": "sha512-2u5pGDsk7H6gGxob2ATIojzlwKzgYsrijo7RRpXOiPePVqwPWg6/pmhaJzLdpfjaBgRg1NFmwSp/7Ump9X8Ijg==", "cpu": [ "ia32" ], @@ -977,9 +979,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.4.tgz", - "integrity": "sha512-f+7WNIJOno5QEelrmob+3vN5EZJb3KCkOrnvUsQ0+LCCD0dIPIhCjeHAh3BGj9msGu8ijnXvD7JxVxE5V26cnQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.7.tgz", + "integrity": "sha512-frEWtbf+q8Oz4e2UqKJrNssk6DZ6/NLCQXn5/ORWE9dPAfe9XS6aK5FRZ6DuEPmmKd5gOoRkKJFFz5nYd+TeyQ==", "cpu": [ "x64" ], @@ -1792,9 +1794,9 @@ } }, "node_modules/graceful-fs": { - "version": "4.2.8", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz", - "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==" + "version": "4.2.9", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz", + "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==" }, "node_modules/has": { "version": "1.0.3", @@ -2404,17 +2406,17 @@ } }, "node_modules/next": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/next/-/next-12.0.4.tgz", - "integrity": "sha512-1pvjcSZBm5OLoGmDhp4JwKwIE798WbqUNLuyU7w6a2jUkdWaxOYtkE/ROXQTi2pXHj7+6rm68AvhxROLX2NHQg==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/next/-/next-12.0.7.tgz", + "integrity": "sha512-sKO8GJJYfuk9c+q+zHSNumvff+wP7ufmOlwT6BuzwiYfFJ61VTTkfTcDLSJ+95ErQJiC54uS4Yg5JEE8H6jXRA==", "dependencies": { "@babel/runtime": "7.15.4", "@hapi/accept": "5.0.2", "@napi-rs/triples": "1.0.3", - "@next/env": "12.0.4", - "@next/polyfill-module": "12.0.4", - "@next/react-dev-overlay": "12.0.4", - "@next/react-refresh-utils": "12.0.4", + "@next/env": "12.0.7", + "@next/polyfill-module": "12.0.7", + "@next/react-dev-overlay": "12.0.7", + "@next/react-refresh-utils": "12.0.7", "acorn": "8.5.0", "assert": "2.0.0", "browserify-zlib": "0.2.0", @@ -2456,7 +2458,7 @@ "use-subscription": "1.5.1", "util": "0.12.4", "vm-browserify": "1.1.2", - "watchpack": "2.1.1" + "watchpack": "2.3.0" }, "bin": { "next": "dist/bin/next" @@ -2465,23 +2467,23 @@ "node": ">=12.22.0" }, "optionalDependencies": { - "@next/swc-android-arm64": "12.0.4", - "@next/swc-darwin-arm64": "12.0.4", - "@next/swc-darwin-x64": "12.0.4", - "@next/swc-linux-arm-gnueabihf": "12.0.4", - "@next/swc-linux-arm64-gnu": "12.0.4", - "@next/swc-linux-arm64-musl": "12.0.4", - "@next/swc-linux-x64-gnu": "12.0.4", - "@next/swc-linux-x64-musl": "12.0.4", - "@next/swc-win32-arm64-msvc": "12.0.4", - "@next/swc-win32-ia32-msvc": "12.0.4", - "@next/swc-win32-x64-msvc": "12.0.4" + "@next/swc-android-arm64": "12.0.7", + "@next/swc-darwin-arm64": "12.0.7", + "@next/swc-darwin-x64": "12.0.7", + "@next/swc-linux-arm-gnueabihf": "12.0.7", + "@next/swc-linux-arm64-gnu": "12.0.7", + "@next/swc-linux-arm64-musl": "12.0.7", + "@next/swc-linux-x64-gnu": "12.0.7", + "@next/swc-linux-x64-musl": "12.0.7", + "@next/swc-win32-arm64-msvc": "12.0.7", + "@next/swc-win32-ia32-msvc": "12.0.7", + "@next/swc-win32-x64-msvc": "12.0.7" }, "peerDependencies": { "fibers": ">= 3.1.0", "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0", - "react": "^17.0.2 || ^18.0.0", - "react-dom": "^17.0.2 || ^18.0.0", + "react": "^17.0.2 || ^18.0.0-0", + "react-dom": "^17.0.2 || ^18.0.0-0", "sass": "^1.3.0" }, "peerDependenciesMeta": { @@ -2517,6 +2519,14 @@ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz", "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==" }, + "node_modules/nodemailer": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.7.2.tgz", + "integrity": "sha512-Dz7zVwlef4k5R71fdmxwR8Q39fiboGbu3xgswkzGwczUfjp873rVxt1O46+Fh0j1ORnAC6L9+heI8uUpO6DT7Q==", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -3265,9 +3275,9 @@ "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" }, "node_modules/watchpack": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz", - "integrity": "sha512-Oo7LXCmc1eE1AjyuSBmtC3+Wy4HcV8PxWh2kP6fOl8yTlNS7r0K9l1ao2lrrUza7V39Y3D/BbJgY8VeSlc5JKw==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.0.tgz", + "integrity": "sha512-MnN0Q1OsvB/GGHETrFeZPQaOelWh/7O+EiFlj8sM9GPjtQkis7k01aAxrg/18kTfoIVcLL+haEVFlXDaSRwKRw==", "dependencies": { "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.1.2" @@ -3902,19 +3912,19 @@ "integrity": "sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA==" }, "@next/env": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.4.tgz", - "integrity": "sha512-QtZ6X5c6Zqa7oWs5csEmZ7xy+gLdtRKKg02SOT5l0Ziea4P5IU8mSOCyNC4fZmXewcRVjpbY+yGqAAP7hJUfOA==" + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.7.tgz", + "integrity": "sha512-TNDqBV37wd95SiNdZsSUq8gnnrTwr+aN9wqy4Zxrxw4bC/jCHNsbK94DxjkG99VL30VCRXXDBTA1/Wa2jIpF9Q==" }, "@next/polyfill-module": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.4.tgz", - "integrity": "sha512-mk9yCDNpfXINTJKFTZNgwYs7eqRFpc5D/49O/fKB59blihyKl1GY1sZ0l7a2bn5l1X/WuaZzcIfqnrwkneqeaQ==" + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.7.tgz", + "integrity": "sha512-sA8LAMMlmcspIZw/jeQuJTyA3uGrqOhTBaQE+G9u6DPohqrBFRkaz7RzzJeqXkUXw600occsIBknSjyVd1R67A==" }, "@next/react-dev-overlay": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.4.tgz", - "integrity": "sha512-9O0lXyzv5goFSmDwq9Hp8JE+DcObvd+bTXvmGSSvYR91AlIoVlH8/PwATx8Rf5YEuqggn/XKR1hn2kBYcbcGnA==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.7.tgz", + "integrity": "sha512-dSQLgpZ5uzyittFtIHlJCLAbc0LlMFbRBSYuGsIlrtGyjYN+WMcnz8lK48VLxNPFGuB/hEzkWV4TW5Zu75+Fzg==", "requires": { "@babel/code-frame": "7.12.11", "anser": "1.4.9", @@ -3975,75 +3985,75 @@ } }, "@next/react-refresh-utils": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.4.tgz", - "integrity": "sha512-kNUDmpBaJ+8Lb8CtKNynRFF9oijCjUKKru6Ont+JKhti9//5dNFFIcuo607bJSH86un06OEK0TZUt5XWVlbkjw==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.7.tgz", + "integrity": "sha512-Pglj1t+7RxH0txEqVcD8ZxrJgqLDmKvQDqxKq3ZPRWxMv7LTl7FVT2Pnb36QFeBwCvMVl67jxsADKsW0idz8sA==", "requires": {} }, "@next/swc-android-arm64": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.0.4.tgz", - "integrity": "sha512-6mXumia8ZPcy7bYu9kjItfWxrE6SFaJyqQDaFy9G9WrU9x3M1R1Yok8B2X1mboM8itD0tq+t3R/ebQEkkmevUw==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.0.7.tgz", + "integrity": "sha512-yViT7EEc7JqxncRT+ZTeTsrAYXLlcefo0Y0eAfYmmalGD2605L4FWAVrJi4WnrSLji7l+veczw1WBmNeHICKKA==", "optional": true }, "@next/swc-darwin-arm64": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.4.tgz", - "integrity": "sha512-7WMen1qhF5JmjKD9S5IEgEoaPJOXyIZj/Nsqa8ZSWxdF5oogp3uYYbKb/rvMYoKzpIbjyoLH/OCM5lm5IFM4iw==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.7.tgz", + "integrity": "sha512-vhAyW2rDEUcQesRVaj0z1hSoz7QhDzzGd0V1/5/5i9YJOfOtyrPsVJ82tlf7BfXl6/Ep+eKNfWVIb5/Jv89EKg==", "optional": true }, "@next/swc-darwin-x64": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.4.tgz", - "integrity": "sha512-PVgefMWjxP6CU1HQs39+Bfpjcue6qErJfvJ/+n2zimjLzyeQAmD6LM9f1lDSttW2LjKjasoxR5qkRNLVlqzlaA==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.7.tgz", + "integrity": "sha512-km+6Rx6TvbraoQ1f0MXa69ol/x0RxzucFGa2OgZaYJERas0spy0iwW8hpASsGcf597D8VRW1x+R2C7ZdjVBSTw==", "optional": true }, "@next/swc-linux-arm-gnueabihf": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.4.tgz", - "integrity": "sha512-8xGQu3sJiIdriKiCux3jDJ9pwivELEg7z2zfW0CqmQMbKNB7qP9lc0pq6CxshtKyXRMczNWRMtQ3Cjwep+UvNg==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.7.tgz", + "integrity": "sha512-d0zWr877YqZ2cf/DQy6obouaR39r0FPebcXj2nws9AC99m68CO2xVpWv9jT7mFvpY+T40HJisLH80jSZ2iQ9sA==", "optional": true }, "@next/swc-linux-arm64-gnu": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.4.tgz", - "integrity": "sha512-HhEWcBkqGr3E7SYLtN9VnYUGamAWaLcXawHN33Em0WP7gzXrBqz0iIJNH7uEzHDS6980EqU/rrkLyhCHrYSZgQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.7.tgz", + "integrity": "sha512-fdobh5u6gG13Gd5LkHhJ+W8tF9hbaFolRW99FhzArMe5/nMKlLdBymOxvitE3K4gSFQxbXJA6TbU0Vv0e59Kww==", "optional": true }, "@next/swc-linux-arm64-musl": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.4.tgz", - "integrity": "sha512-oZyQ9wjtE7OX9RlnovP7izNx2AR/RzTuYWU4Ttim8ssABsipQSxSlfRaeb+Qi6jTc6k+lrPhjRfaZ+fGv/m2Ag==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.7.tgz", + "integrity": "sha512-vx0c5Q3oIScFNT/4jI9rCe0yPzKuCqWOkiO/OOV0ixSI2gLhbrwDIcdkm79fKVn3i8JOJunxE4zDoFeR/g8xqQ==", "optional": true }, "@next/swc-linux-x64-gnu": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.4.tgz", - "integrity": "sha512-aBuf78QzL93T59Lk9kEGfHcA+9SzYIH7dGon1nqVxtAd2iqicKYNVaVcb38VKeiIBXMSUHXTdu6Ee053ZCOmSw==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.7.tgz", + "integrity": "sha512-9ITyp6s6uGVKNx3C/GP7GrYycbcwTADG7TdIXzXUxOOZORrdB1GNg3w/EL3Am4VMPPEpO6v1RfKo2IKZpVKfTA==", "optional": true }, "@next/swc-linux-x64-musl": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.4.tgz", - "integrity": "sha512-yDgqUqL4H8M3Y0hv30ZyL9UvjnK4iXmD4I6iJz+XIHSRdA/VUiyKKoL7okf9hxr0mSxBtagbZ5A3qEoW/VliUQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.7.tgz", + "integrity": "sha512-C+k+cygbIZXYfc+Hx2fNPUBEg7jzio+mniP5ywZevuTXW14zodIfQ3ZMoMJR8EpOVvYpjWFk2uAjiwqgx8vo/g==", "optional": true }, "@next/swc-win32-arm64-msvc": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.4.tgz", - "integrity": "sha512-evDUrEYsUo+PMHsedaymfZO98VwV9wNFzuWVCyKgqg6SD1ZRpzbpqYQY7aINIuqZVdIWZElBE6EM+oxaj7PuWQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.7.tgz", + "integrity": "sha512-7jTRjOKkDVnb5s7VoHT7eX+eyT/5BQJ/ljP2G56riAgKGqPL63/V7FXemLhhLT67D+OjoP8DRA2E2ne6IPHk4w==", "optional": true }, "@next/swc-win32-ia32-msvc": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.4.tgz", - "integrity": "sha512-Lbmz0xlo8vW4EDWyzCfy3nGfqt7skqwxaERwe+vDVTBZ56mvJ5dsdyjqK24sxu4FFkWR7SaU4eNlHwZR+A3kTg==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.7.tgz", + "integrity": "sha512-2u5pGDsk7H6gGxob2ATIojzlwKzgYsrijo7RRpXOiPePVqwPWg6/pmhaJzLdpfjaBgRg1NFmwSp/7Ump9X8Ijg==", "optional": true }, "@next/swc-win32-x64-msvc": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.4.tgz", - "integrity": "sha512-f+7WNIJOno5QEelrmob+3vN5EZJb3KCkOrnvUsQ0+LCCD0dIPIhCjeHAh3BGj9msGu8ijnXvD7JxVxE5V26cnQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.7.tgz", + "integrity": "sha512-frEWtbf+q8Oz4e2UqKJrNssk6DZ6/NLCQXn5/ORWE9dPAfe9XS6aK5FRZ6DuEPmmKd5gOoRkKJFFz5nYd+TeyQ==", "optional": true }, "@types/node": { @@ -4692,9 +4702,9 @@ "peer": true }, "graceful-fs": { - "version": "4.2.8", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz", - "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==" + "version": "4.2.9", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz", + "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==" }, "has": { "version": "1.0.3", @@ -5110,28 +5120,28 @@ "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==" }, "next": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/next/-/next-12.0.4.tgz", - "integrity": "sha512-1pvjcSZBm5OLoGmDhp4JwKwIE798WbqUNLuyU7w6a2jUkdWaxOYtkE/ROXQTi2pXHj7+6rm68AvhxROLX2NHQg==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/next/-/next-12.0.7.tgz", + "integrity": "sha512-sKO8GJJYfuk9c+q+zHSNumvff+wP7ufmOlwT6BuzwiYfFJ61VTTkfTcDLSJ+95ErQJiC54uS4Yg5JEE8H6jXRA==", "requires": { "@babel/runtime": "7.15.4", "@hapi/accept": "5.0.2", "@napi-rs/triples": "1.0.3", - "@next/env": "12.0.4", - "@next/polyfill-module": "12.0.4", - "@next/react-dev-overlay": "12.0.4", - "@next/react-refresh-utils": "12.0.4", - "@next/swc-android-arm64": "12.0.4", - "@next/swc-darwin-arm64": "12.0.4", - "@next/swc-darwin-x64": "12.0.4", - "@next/swc-linux-arm-gnueabihf": "12.0.4", - "@next/swc-linux-arm64-gnu": "12.0.4", - "@next/swc-linux-arm64-musl": "12.0.4", - "@next/swc-linux-x64-gnu": "12.0.4", - "@next/swc-linux-x64-musl": "12.0.4", - "@next/swc-win32-arm64-msvc": "12.0.4", - "@next/swc-win32-ia32-msvc": "12.0.4", - "@next/swc-win32-x64-msvc": "12.0.4", + "@next/env": "12.0.7", + "@next/polyfill-module": "12.0.7", + "@next/react-dev-overlay": "12.0.7", + "@next/react-refresh-utils": "12.0.7", + "@next/swc-android-arm64": "12.0.7", + "@next/swc-darwin-arm64": "12.0.7", + "@next/swc-darwin-x64": "12.0.7", + "@next/swc-linux-arm-gnueabihf": "12.0.7", + "@next/swc-linux-arm64-gnu": "12.0.7", + "@next/swc-linux-arm64-musl": "12.0.7", + "@next/swc-linux-x64-gnu": "12.0.7", + "@next/swc-linux-x64-musl": "12.0.7", + "@next/swc-win32-arm64-msvc": "12.0.7", + "@next/swc-win32-ia32-msvc": "12.0.7", + "@next/swc-win32-x64-msvc": "12.0.7", "acorn": "8.5.0", "assert": "2.0.0", "browserify-zlib": "0.2.0", @@ -5173,7 +5183,7 @@ "use-subscription": "1.5.1", "util": "0.12.4", "vm-browserify": "1.1.2", - "watchpack": "2.1.1" + "watchpack": "2.3.0" } }, "node-fetch": { @@ -5194,6 +5204,11 @@ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz", "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==" }, + "nodemailer": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.7.2.tgz", + "integrity": "sha512-Dz7zVwlef4k5R71fdmxwR8Q39fiboGbu3xgswkzGwczUfjp873rVxt1O46+Fh0j1ORnAC6L9+heI8uUpO6DT7Q==" + }, "normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -5771,9 +5786,9 @@ "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" }, "watchpack": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz", - "integrity": "sha512-Oo7LXCmc1eE1AjyuSBmtC3+Wy4HcV8PxWh2kP6fOl8yTlNS7r0K9l1ao2lrrUza7V39Y3D/BbJgY8VeSlc5JKw==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.0.tgz", + "integrity": "sha512-MnN0Q1OsvB/GGHETrFeZPQaOelWh/7O+EiFlj8sM9GPjtQkis7k01aAxrg/18kTfoIVcLL+haEVFlXDaSRwKRw==", "requires": { "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.1.2" diff --git a/package.json b/package.json index 8a2528f..55346a2 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "homepage": "https://github.com/BenjaminToby/personal_site#readme", "dependencies": { "next": "^12.0.4", + "nodemailer": "^6.7.2", "react": "^17.0.2", "react-dom": "^17.0.2" } diff --git a/pages/api/contactForm.js b/pages/api/contactForm.js new file mode 100644 index 0000000..e13217a --- /dev/null +++ b/pages/api/contactForm.js @@ -0,0 +1,68 @@ +/** + * + * + * Imports + * ------------------------------------------------------------------------------ + * + */ +const fs = require("fs"); +const nodemailer = require("nodemailer"); + +/** ********************* Functions and Other API Imports */ + +// let transporter = nodemailer.createTransport({ +// host: "smtp.dreamhost.com", +// port: 465, +// secure: true, // true for 465, false for other ports +// auth: { +// user: "info@tben.design", +// pass: "tobybenoti", +// }, +// }); + +let transporter = nodemailer.createTransport({ + host: "smtp.gmail.com", + port: 465, + secure: true, + auth: { + user: "benoti.san@gmail.com", + pass: "pzeacyigrdutlbbr", + }, +}); + +/** + * + * + * API handler + * ------------------------------------------------------------------------------ + * @param {Object} req - http incoming request + * @param {Object} res - http response + * + */ +export default async function handler(req, res) { + /** ********************* Get Page Data */ + if (req.method === "POST") { + let name = req.body.name; + let email = req.body.email; + let message = req.body.message; + + console.log("Message Sending ..."); + + try { + // send mail with defined transport object + let info = await transporter.sendMail({ + from: email, // sender address + to: "benoti.san@gmail.com", // list of receivers + subject: "Tben Client Request", // Subject line + text: "Hello from tben", + html: `

Message from ${name}

${message}

`, // html body + }); + + console.log("Message sent: %s", info.messageId); + res.json({ msg: "Success", info: info }); + } catch (error) { + console.log(error); + res.json({ msg: "Failed" }); + } + } +} diff --git a/pages/contact.jsx b/pages/contact.jsx index 2a47446..4cb56ab 100644 --- a/pages/contact.jsx +++ b/pages/contact.jsx @@ -1,8 +1,12 @@ import React from 'react' import TextShuffler from '../components/actions/TextShuffler' +import submitContactForm from '../functions/frontend/submitContactForm' import GeneralLayout from '../layouts/general_layout/GeneralLayout' const contact = () => { + + let [success, setSuccess] = React.useState(false); + return (

@@ -10,11 +14,13 @@ const contact = () => { -
- - + { submitContactForm(e, setSuccess) }}> + + + {success === "Success" &&
Success!!!
} + {success === "Failed" &&
Failed
}
) diff --git a/pages/index.jsx b/pages/index.jsx index b7dbf27..2f56eb3 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -8,7 +8,7 @@ const index = () => {

- +
See my resume diff --git a/styles/main.css b/styles/main.css index b41cb3b..2186d61 100644 --- a/styles/main.css +++ b/styles/main.css @@ -29,7 +29,6 @@ body { margin: 0px; padding: 40px; top: 0; - display: flex; justify-content: center; background-color: var(--dark-color); color: white; @@ -250,6 +249,7 @@ form { display: flex; flex-direction: column; gap: 20px; + position: relative; } input, @@ -262,6 +262,26 @@ textarea { resize: none; } +.message-response { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: var(--dark-color); + border: 2px solid #688e26; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 24px; + gap: 10px; +} + +.message-response.failed { + border: 2px solid #d42222; +} + /* ############################################################################################### ################################################################################################## ##################################################################################################