pavle.golubovic
/
website-new
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

Google reCAPTCHA

strapiSEO
ntasicc 3 лет назад
Родитель
68b86b0c67
Сommit
742c435641
7 измененных файлов: 160 добавлений и 44 удалений
Разделённый вид Показать статистику Diff
  1. 2
    1
      frontend/.env
  2. 45
    2
      frontend/package-lock.json
  3. 2
    1
      frontend/package.json
  4. 45
    19
      frontend/src/components/shared/ClientForm.jsx
  5. 1
    1
      frontend/src/components/shared/CookieBanner.jsx
  6. 47
    18
      frontend/src/components/shared/JobForm.jsx
  7. 18
    2
      frontend/yarn.lock

+ 2
- 1
frontend/.env Просмотреть файл

@@ -9,4 +9,5 @@ REACT_APP_API_URL = "https://websitediligentapi.azurewebsites.net"
//http://localhost:1337
MAILCHIMP_FORM_URL = http://eepurl.com/iaRrv1
GOOGLE_TRACKING_ID = "G-PTZC3WLTZ1"
REACT_APP_MEASUREMENT_ID = G-PD7YZVDG30
REACT_APP_MEASUREMENT_ID = G-PD7YZVDG30
REACT_APP_SITE_KEY = 6LdCnHgjAAAAAAV4z_GBHwLYdKhxE9Y3oBzO6cxK

+ 45
- 2
frontend/package-lock.json Просмотреть файл

@@ -1,12 +1,12 @@
{
"name": "frontend",
"version": "1.1.6",
"version": "1.1.8",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "frontend",
"version": "1.1.6",
"version": "1.1.8",
"dependencies": {
"@faceless-ui/slider": "^1.1.14",
"@faceless-ui/window-info": "^2.1.1",
@@ -30,6 +30,7 @@
"react-dropzone": "^12.0.5",
"react-ga": "^3.3.1",
"react-ga4": "^1.4.1",
"react-google-recaptcha": "^2.1.0",
"react-mailchimp-subscribe": "^2.1.3",
"react-markdown": "^8.0.0",
"react-router-dom": "^6.2.1",
@@ -14398,6 +14399,18 @@
"node": ">=14"
}
},
"node_modules/react-async-script": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
"integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
"dependencies": {
"hoist-non-react-statics": "^3.3.0",
"prop-types": "^15.5.0"
},
"peerDependencies": {
"react": ">=16.4.1"
}
},
"node_modules/react-cookie": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
@@ -14581,6 +14594,18 @@
"resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-1.4.1.tgz",
"integrity": "sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w=="
},
"node_modules/react-google-recaptcha": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz",
"integrity": "sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==",
"dependencies": {
"prop-types": "^15.5.0",
"react-async-script": "^1.1.1"
},
"peerDependencies": {
"react": ">=16.4.1"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -28153,6 +28178,15 @@
"whatwg-fetch": "^3.6.2"
}
},
"react-async-script": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
"integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
"requires": {
"hoist-non-react-statics": "^3.3.0",
"prop-types": "^15.5.0"
}
},
"react-cookie": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
@@ -28290,6 +28324,15 @@
"resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-1.4.1.tgz",
"integrity": "sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w=="
},
"react-google-recaptcha": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz",
"integrity": "sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==",
"requires": {
"prop-types": "^15.5.0",
"react-async-script": "^1.1.1"
}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

+ 2
- 1
frontend/package.json Просмотреть файл

@@ -1,6 +1,6 @@
{
"name": "frontend",
"version": "1.1.8",
"version": "1.1.9",
"private": true,
"dependencies": {
"@faceless-ui/slider": "^1.1.14",
@@ -25,6 +25,7 @@
"react-dropzone": "^12.0.5",
"react-ga": "^3.3.1",
"react-ga4": "^1.4.1",
"react-google-recaptcha": "^2.1.0",
"react-mailchimp-subscribe": "^2.1.3",
"react-markdown": "^8.0.0",
"react-router-dom": "^6.2.1",

+ 45
- 19
frontend/src/components/shared/ClientForm.jsx Просмотреть файл

@@ -1,3 +1,4 @@
import React, { useRef } from 'react';
import TagInput from '../TagInput';
import img from '../../assets/images/Inqueries.png';
import * as Yup from 'yup';
@@ -7,12 +8,15 @@ import { useContext, useState } from 'react';
import * as emailjs from 'emailjs-com';
import { motion } from 'framer-motion';
import ReactGA from 'react-ga4';
import ReCAPTCHA from 'react-google-recaptcha';
import axios from 'axios';

export default function ClientForm() {
//search context for prevous entry TODO
const { clientForm, setClientForm } = useContext(ClientFormContext);
const [sucMsg, setSucMsg] = useState(false);

const captchaRef = useRef(null);
const [msgText, setMsgText] = useState('');
const changeFormHandler = event => {
const { name, value } = event.target;
setClientForm({
@@ -54,7 +58,7 @@ export default function ClientForm() {
<Formik
initialValues={clientForm}
validationSchema={validationSchema}
onSubmit={values => {
onSubmit={async values => {
const data = {
Tag: values.tag,
Subject: values.subject,
@@ -64,22 +68,41 @@ export default function ClientForm() {
Description: values.description,
};

emailjs
.send(
process.env.REACT_APP_SERVICE_ID,
process.env.REACT_APP_CLIENT_TEMPLATE_ID,
data,
process.env.REACT_APP_USER_ID,
)
.then(
result => {
console.log(result.text);
const token = captchaRef.current.getValue();
captchaRef.current.reset();
if (token.length === 0) {
setSucMsg(true);
setMsgText('Please fill reCAPTCHA and try again. Thank you!');
} else {
await axios
.post('http://localhost:2000/verify-token', { token })
.then(res => {
setSucMsg(true);
},
error => {
console.log(error.text);
},
);
if (res.data.data.success)
setMsgText('Submission Succesful! Thank you!');
else setMsgText('Please fill reCAPTCHA and try again. Thank you!');
})
.catch(error => {
console.log(error);
});
}

// emailjs
// .send(
// process.env.REACT_APP_SERVICE_ID,
// process.env.REACT_APP_CLIENT_TEMPLATE_ID,
// data,
// process.env.REACT_APP_USER_ID,
// )
// .then(
// result => {
// console.log(result.text);
// setSucMsg(true);
// },
// error => {
// console.log(error.text);
// },
// );
ReactGA.event('contact', {
category: 'Contact',
action: 'Business Inquiry',
@@ -210,7 +233,10 @@ export default function ClientForm() {
/>
</div>
</div>

<ReCAPTCHA
sitekey={process.env.REACT_APP_SITE_KEY}
ref={captchaRef}
/>
<div className=" py-3 text-right">
<button
type="submit"
@@ -221,7 +247,7 @@ export default function ClientForm() {
</div>
{sucMsg && (
<div className={'text-sm text-right text-dg-primary-900'}>
Submission Succesful! Thank you!
{msgText}
</div>
)}
</div>

+ 1
- 1
frontend/src/components/shared/CookieBanner.jsx Просмотреть файл

@@ -23,7 +23,7 @@ const CookieBanner = ({ handleAccept, handleDecline }) => {
{cookie_p}
</p>
</div>
<div className="max-w-banner w-full flex items-center justify-end p-0 gap-2.5">
<div className="max-w-banner w-full flex items-center justify-end p-0 md:gap-2.5">
<button
onClick={handleDecline}
className="flex items-start p-0 text-dg-primary-900 bg-dg-primary-75 font-semibold font-secondary md:px-64p px-42p md:py-20p py-15p md:w-max w-36 whitespace-nowrap"

+ 47
- 18
frontend/src/components/shared/JobForm.jsx Просмотреть файл

@@ -10,9 +10,13 @@ import { motion } from 'framer-motion';
import ReactGA from 'react-ga4';
import MyDropzone from './MyDropzone';
import HashPositions from './HashPositions';
import ReCAPTCHA from 'react-google-recaptcha';
import axios from 'axios';

export default function JobForm(props) {
const [sucMsg, setSucMsg] = useState(false);
const captchaRef = useRef(null);
const [msgText, setMsgText] = useState('');
const cntCareersJobs = props.cntCareers;
let defaultPositionSelection = props.defaultPositionSelection;
//search context for prevous entry TODO
@@ -83,7 +87,7 @@ export default function JobForm(props) {
initialValues={jobForm}
validationSchema={validationSchema}
onChange={changeFormHandler}
onSubmit={values => {
onSubmit={async values => {
const prepFile = async file => {
if (file.size >= 2000000) {
setErrorMsg('File too large!');
@@ -114,7 +118,7 @@ export default function JobForm(props) {
setErrorMsg('CV is Required');
} else {
setErrorMsg('');
prepFile(jobForm.file).then(res => {
prepFile(jobForm.file).then(async res => {
const newtemplateParams = {
Position: values.position,
Other: values.other,
@@ -126,22 +130,42 @@ export default function JobForm(props) {
File: res,
};

emailjs
.send(
process.env.REACT_APP_SERVICE_ID,
process.env.REACT_APP_JOB_TEMPLATE_ID,
newtemplateParams,
process.env.REACT_APP_USER_ID,
)
.then(
result => {
console.log(result.text);
const token = captchaRef.current.getValue();
captchaRef.current.reset();
if (token.length === 0) {
setSucMsg(true);
setMsgText('Please fill reCAPTCHA and try again. Thank you!');
} else {
await axios
.post('http://localhost:2000/verify-token', { token })
.then(res => {
setSucMsg(true);
},
error => {
console.log(error.text);
},
);
if (res.data.data.success)
setMsgText('Submission Succesful! Thank you!');
else
setMsgText('Please fill reCAPTCHA and try again. Thank you!');
})
.catch(error => {
console.log(error);
});
}

// emailjs
// .send(
// process.env.REACT_APP_SERVICE_ID,
// process.env.REACT_APP_JOB_TEMPLATE_ID,
// newtemplateParams,
// process.env.REACT_APP_USER_ID,
// )
// .then(
// result => {
// console.log(result.text);
// setSucMsg(true);
// },
// error => {
// console.log(error.text);
// },
// );
});
}
ReactGA.event('contact', {
@@ -369,6 +393,11 @@ export default function JobForm(props) {
</div>
</div>

<ReCAPTCHA
sitekey={process.env.REACT_APP_SITE_KEY}
ref={captchaRef}
/>

<div className=" py-3 text-right">
<button
type="submit"
@@ -379,7 +408,7 @@ export default function JobForm(props) {
</div>
{sucMsg && (
<div className={'text-sm text-right text-dg-primary-900'}>
Submission Succesful! Thank you!
{msgText}
</div>
)}
</div>

+ 18
- 2
frontend/yarn.lock Просмотреть файл

@@ -7739,7 +7739,7 @@
"kleur" "^3.0.3"
"sisteransi" "^1.0.5"

"prop-types@^15.0.0", "prop-types@^15.5.10", "prop-types@^15.6.0", "prop-types@^15.7.2", "prop-types@^15.8.1":
"prop-types@^15.0.0", "prop-types@^15.5.0", "prop-types@^15.5.10", "prop-types@^15.6.0", "prop-types@^15.7.2", "prop-types@^15.8.1":
"integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
"resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
"version" "15.8.1"
@@ -7837,6 +7837,14 @@
"regenerator-runtime" "^0.13.9"
"whatwg-fetch" "^3.6.2"

"react-async-script@^1.1.1":
"integrity" "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q=="
"resolved" "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz"
"version" "1.2.0"
dependencies:
"hoist-non-react-statics" "^3.3.0"
"prop-types" "^15.5.0"

"react-cookie@^4.1.1":
"integrity" "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A=="
"resolved" "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz"
@@ -7914,6 +7922,14 @@
"resolved" "https://registry.npmjs.org/react-ga4/-/react-ga4-1.4.1.tgz"
"version" "1.4.1"

"react-google-recaptcha@^2.1.0":
"integrity" "sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ=="
"resolved" "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz"
"version" "2.1.0"
dependencies:
"prop-types" "^15.5.0"
"react-async-script" "^1.1.1"

"react-is@^16.13.1", "react-is@^16.7.0", "react-is@>= 16.8.0":
"integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
"resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -8033,7 +8049,7 @@
optionalDependencies:
"fsevents" "^2.3.2"

"react@*", "react@^15.6.2 || ^16.0 || ^17 || ^18", "react@^16 || ^17 || ^18", "react@^16.8 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.3.0", "react@>= 16.8", "react@>= 16.8.0", "react@>=15", "react@>=16", "react@>=16.8", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@17.0.2":
"react@*", "react@^15.6.2 || ^16.0 || ^17 || ^18", "react@^16 || ^17 || ^18", "react@^16.8 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.3.0", "react@>= 16.8", "react@>= 16.8.0", "react@>=15", "react@>=16", "react@>=16.4.1", "react@>=16.8", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@17.0.2":
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
"version" "17.0.2"

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить