From 1d9a27b14e131f3ddab8605c401a15b6c3b59b2f Mon Sep 17 00:00:00 2001 From: pedroacamargo Date: Sun, 2 Jul 2023 21:14:24 +0100 Subject: [PATCH] Email handler system incompleted --- package-lock.json | 28 +++ package.json | 2 + src/Styles/Footer.scss | 5 + src/Styles/contact/ContactForms.styles.scss | 206 ++++++++++++++++++ .../contacts/ContactForms.component.tsx | 61 ++++++ src/components/global/Footer.component.tsx | 5 +- src/routes/Contact.component.tsx | 6 +- yarn.lock | 10 + 8 files changed, 321 insertions(+), 2 deletions(-) create mode 100644 src/Styles/Footer.scss create mode 100644 src/Styles/contact/ContactForms.styles.scss create mode 100644 src/components/contacts/ContactForms.component.tsx diff --git a/package-lock.json b/package-lock.json index f9e42fe..fdca8a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "website", "version": "0.1.0", "dependencies": { + "@emailjs/browser": "^3.11.0", "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-brands-svg-icons": "^6.4.0", "@fortawesome/free-regular-svg-icons": "^6.4.0", @@ -20,6 +21,7 @@ "@types/react-dom": "^18.2.6", "axios": "^1.4.0", "babel-plugin-macros": "^3.1.0", + "email-js": "^2.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-particles": "^2.10.1", @@ -2317,6 +2319,14 @@ "node": ">=10.0.0" } }, + "node_modules/@emailjs/browser": { + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-3.11.0.tgz", + "integrity": "sha512-RkY3FKZ3fPdK++OeF46mRTFpmmQWCHUVHZH209P3NE4D5sg2Atg7S2wa3gw5062Gl4clt4Wn5SyC4WhlVZC5pA==", + "engines": { + "node": ">=14.0.0" + } + }, "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", @@ -7217,6 +7227,14 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.433.tgz", "integrity": "sha512-MGO1k0w1RgrfdbLVwmXcDhHHuxCn2qRgR7dYsJvWFKDttvYPx6FNzCGG0c/fBBvzK2LDh3UV7Tt9awnHnvAAUQ==" }, + "node_modules/email-js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/email-js/-/email-js-2.0.2.tgz", + "integrity": "sha512-ElfOy+BMZbQuivo8Qp+A2Gz6N06ZUHEk+q67O0zgTRU5d+n2rvbfX0w2jyo7B/F+zPJAXq/J1SHaG9ghbhWAPQ==", + "engines": { + "node": ">=v4.2.1" + } + }, "node_modules/emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", @@ -19981,6 +19999,11 @@ "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==", "dev": true }, + "@emailjs/browser": { + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-3.11.0.tgz", + "integrity": "sha512-RkY3FKZ3fPdK++OeF46mRTFpmmQWCHUVHZH209P3NE4D5sg2Atg7S2wa3gw5062Gl4clt4Wn5SyC4WhlVZC5pA==" + }, "@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -23581,6 +23604,11 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.433.tgz", "integrity": "sha512-MGO1k0w1RgrfdbLVwmXcDhHHuxCn2qRgR7dYsJvWFKDttvYPx6FNzCGG0c/fBBvzK2LDh3UV7Tt9awnHnvAAUQ==" }, + "email-js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/email-js/-/email-js-2.0.2.tgz", + "integrity": "sha512-ElfOy+BMZbQuivo8Qp+A2Gz6N06ZUHEk+q67O0zgTRU5d+n2rvbfX0w2jyo7B/F+zPJAXq/J1SHaG9ghbhWAPQ==" + }, "emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", diff --git a/package.json b/package.json index dee8a29..c9aa696 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@emailjs/browser": "^3.11.0", "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-brands-svg-icons": "^6.4.0", "@fortawesome/free-regular-svg-icons": "^6.4.0", @@ -15,6 +16,7 @@ "@types/react-dom": "^18.2.6", "axios": "^1.4.0", "babel-plugin-macros": "^3.1.0", + "email-js": "^2.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-particles": "^2.10.1", diff --git a/src/Styles/Footer.scss b/src/Styles/Footer.scss new file mode 100644 index 0000000..9d49410 --- /dev/null +++ b/src/Styles/Footer.scss @@ -0,0 +1,5 @@ +footer { + height: 200px; + width: 100%; + background-color: black; +} \ No newline at end of file diff --git a/src/Styles/contact/ContactForms.styles.scss b/src/Styles/contact/ContactForms.styles.scss new file mode 100644 index 0000000..b90724b --- /dev/null +++ b/src/Styles/contact/ContactForms.styles.scss @@ -0,0 +1,206 @@ +@import "../VariablesGlobal.scss"; + +.forms-container { + padding-top: 70px; + overflow: hidden; + + @include flexcenter(); + flex-direction: column; + + background-color: black; + + + h1 { + padding: 10px; + color: rgb(248, 252, 1); + font-family: $fontABout; + } + + .send-email-container { + @include flexcenter(); + flex-direction: column; + position: relative; + + padding: 20px; + width: 80%; + + .form-section { + + display: flex; + padding: 10px; + margin: 10px; + border-radius: 10px; + + .input-container { + position: relative; + + .input-field { + display: block; + padding: 10px 10px; + background-color: transparent; + border: 0; + color: white; + outline: none; + margin: 10px; + margin-left: 20px; + margin-right: 30px; + border-bottom: 2px solid #ccc; + + & + .input-label { + position: absolute; + padding: 5px; + color: rgba(139, 19, 19, 0); + font-family: $fontABout; + left: 10px; + top: 9px; + transition: 1s; + z-index: -1; + } + + & + .input-label + .input-icon { + position: absolute; + color: black; + background-color: whitesmoke; + padding: 10px; + border-radius: 15px 0 0 15px; + font-family: $fontABout; + left: -14px; + top: 9px; + transition: .5s ease; + } + + + & + .input-label + .input-icon + .linebot { + position: absolute; + bottom: 10px; + left: 20px; + height: 2px; + width: 0px; + background-color: #8a0808; + transition: all 1s ease; + } + + + &:focus + .input-label { + top: -10px; + font-size: 12px; + color: #8a0808; + z-index: 10; + } + + &:focus + .input-label + .input-icon { + background-color: #8a0808; + color: white; + } + + &:focus + .input-label + .input-icon + .linebot { + width: 250px; + } + + } + + .textarea { + width: 700px; + height: 300px; + background-color: #3002022a; + padding: 20px; + + &:focus + .input-label { + top: -15px; + font-size: 12px; + color: #8a0808; + z-index: 10; + } + + &:focus + .input-label + .input-icon + .linebot { + width: 700px; + } + + & + .input-label + .input-icon { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + color: black; + background-color: whitesmoke; + padding: 10px; + border-radius: 15px 0 0 15px; + font-family: $fontABout; + left: -14px; + top: 9px; + height: 94.5%; + transition: .5s ease; + } + + } + + + } + + } + + .btn-submit { + padding: 10px; + background-color: black; + color: white; + font-family: $fontRaleway; + border: 1px solid white; + border-radius: 10px; + transition: .5s; + font-size: 1.3em; + margin: 10px; + cursor: pointer; + z-index: 1; + + &:hover { + background-color: white; + color: black; + } + } + + .light-blink { + width: 70px; + height: 50px; + position: absolute; + bottom: 30px; + background-color: white; + filter: blur(10px); + z-index: 0; + } + } +} + +@media screen and (max-width: 1000px) { + + .forms-container .send-email-container .form-section .input-container .textarea { + width: 450px; + + &:focus + .input-label + .input-icon + .linebot { + width: 450px; + } + } +} + + +@media screen and (max-width: 600px) { + + + .forms-container .send-email-container { + + &:last-child { + margin-left: 50px; + .input-container .textarea { + width: 300px; + + &:focus + .input-label + .input-icon + .linebot { + width: 300px; + } + } + } + + .form-section { + flex-direction: column; + margin: 20px; + } + } +} \ No newline at end of file diff --git a/src/components/contacts/ContactForms.component.tsx b/src/components/contacts/ContactForms.component.tsx new file mode 100644 index 0000000..9f451e1 --- /dev/null +++ b/src/components/contacts/ContactForms.component.tsx @@ -0,0 +1,61 @@ +import React, { useRef } from 'react' +import "../../Styles/contact/ContactForms.styles.scss" +import emailjs from '@emailjs/browser'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faEnvelope, faUser } from '@fortawesome/free-solid-svg-icons'; + +export const ContactForms = () => { + const form = useRef(); + const username = useRef(); + const email = useRef(); + const textarea = useRef(); + + const clearForms = () => { + username.current.value = ""; + email.current.value = ""; + textarea.current.value = ""; + } + + const sendEmail = (e: any) => { + e.preventDefault(); + + emailjs.sendForm('service_qhoywu6','template_vs1p5gw',form.current,'xLPFLTtIufxxG0Vqn').then((result) => { + clearForms(); + alert("Message was sent successfully") + }) + } + + return ( +
+

Send me an Email

+ +
+
+
+ + +
+ +
+
+ + +
+ +
+
+
+
+