From c518a75af7d11fc04f54a0acf62554a0decdedbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A1bor=20Tam=C3=A1s?= Date: Wed, 3 Apr 2024 17:31:56 +0200 Subject: [PATCH] added reCaptcha v2 , refactored components --- .github/workflows/dev.yml | 82 +++++----- .github/workflows/main.yml | 82 +++++----- .gitignore | 3 +- gatsby-config.js | 4 + package.json | 1 + src/components/footer.js | 256 ++++++++++---------------------- src/components/modals/signUp.js | 225 +++++++++++----------------- src/pages/index.js | 25 +--- 8 files changed, 258 insertions(+), 420 deletions(-) diff --git a/.github/workflows/dev.yml b/.github/workflows/dev.yml index 1d156d8d4..863707a8d 100644 --- a/.github/workflows/dev.yml +++ b/.github/workflows/dev.yml @@ -4,47 +4,49 @@ name: CI # Controls when the workflow will run on: - # Triggers the workflow on push request events but only for the main branch - push: - branches: [dev] + # Triggers the workflow on push request events but only for the main branch + push: + branches: [dev] - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: - # This workflow contains a single job called "build" - build: - # The type of runner that the job will run on - runs-on: ubuntu-latest - - # Steps represent a sequence of tasks that will be executed as part of the job - steps: - # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - - name: Check out latest code - uses: actions/checkout@v2 - - # Grab the required version of NodeJS - - name: Set Node.js - uses: actions/setup-node@v3 - with: - node-version: "18.17.0" - - # Install all the Node dependencies for Gatsby, using your package.json file. - - name: Install Dependencies - run: npm install --legacy-peer-deps - - # Speaks for itself no? - - name: Build Gatsby Site - run: npm run build - - # This was the hardest part for me to figure out - see article for more details - - name: Install Deployment SSH Key - uses: shimataro/ssh-key-action@v2 - with: - key: ${{secrets.deploy_key}} - known_hosts: ${{secrets.known_hosts}} - - # Finally, deploy it to your very own server - - name: Deploy To Live - run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_dev}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_dev}} + # This workflow contains a single job called "build" + build: + # The type of runner that the job will run on + runs-on: ubuntu-latest + + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it + - name: Check out latest code + uses: actions/checkout@v2 + + # Grab the required version of NodeJS + - name: Set Node.js + uses: actions/setup-node@v3 + with: + node-version: "18.17.0" + + # Install all the Node dependencies for Gatsby, using your package.json file. + - name: Install Dependencies + run: npm install --legacy-peer-deps + + # Speaks for itself no? + - name: Build Gatsby Site + run: npm run build + env: + GATSBY_RECAPTCHA_SITE_KEY: ${{ secrets.GATSBY_RECAPTCHA_SITE_KEY }} + + # This was the hardest part for me to figure out - see article for more details + - name: Install Deployment SSH Key + uses: shimataro/ssh-key-action@v2 + with: + key: ${{secrets.deploy_key}} + known_hosts: ${{secrets.known_hosts}} + + # Finally, deploy it to your very own server + - name: Deploy To Live + run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_dev}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_dev}} diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 1408165da..b8c371ab0 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -4,47 +4,49 @@ name: CI # Controls when the workflow will run on: - # Triggers the workflow on push request events but only for the main branch - push: - branches: [main] + # Triggers the workflow on push request events but only for the main branch + push: + branches: [main] - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: - # This workflow contains a single job called "build" - build: - # The type of runner that the job will run on - runs-on: ubuntu-latest - - # Steps represent a sequence of tasks that will be executed as part of the job - steps: - # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - - name: Check out latest code - uses: actions/checkout@v2 - - # Grab the required version of NodeJS - - name: Set Node.js - uses: actions/setup-node@v3 - with: - node-version: "18.17.0" - - # Install all the Node dependencies for Gatsby, using your package.json file. - - name: Install Dependencies - run: npm install --legacy-peer-deps - - # Speaks for itself no? - - name: Build Gatsby Site - run: npm run build - - # This was the hardest part for me to figure out - see article for more details - - name: Install Deployment SSH Key - uses: shimataro/ssh-key-action@v2 - with: - key: ${{secrets.deploy_key}} - known_hosts: ${{secrets.known_hosts}} - - # Finally, deploy it to your very own server - - name: Deploy To Live - run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_main}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_main}} + # This workflow contains a single job called "build" + build: + # The type of runner that the job will run on + runs-on: ubuntu-latest + + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it + - name: Check out latest code + uses: actions/checkout@v2 + + # Grab the required version of NodeJS + - name: Set Node.js + uses: actions/setup-node@v3 + with: + node-version: "18.17.0" + + # Install all the Node dependencies for Gatsby, using your package.json file. + - name: Install Dependencies + run: npm install --legacy-peer-deps + + # Speaks for itself no? + - name: Build Gatsby Site + run: npm run build + env: + GATSBY_RECAPTCHA_SITE_KEY: ${{ secrets.GATSBY_RECAPTCHA_SITE_KEY }} + + # This was the hardest part for me to figure out - see article for more details + - name: Install Deployment SSH Key + uses: shimataro/ssh-key-action@v2 + with: + key: ${{secrets.deploy_key}} + known_hosts: ${{secrets.known_hosts}} + + # Finally, deploy it to your very own server + - name: Deploy To Live + run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_main}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_main}} diff --git a/.gitignore b/.gitignore index 3ac05bf65..d0e9d4806 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ public/ node_modules/ .vscode/ .DS_Store -.env package-lock.json .idea/ +.env.development +.env.production \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index 614a5fe90..0eec55683 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,3 +1,7 @@ +require("dotenv").config({ + path: `.env.${process.env.NODE_ENV}`, +}); + module.exports = { siteMetadata: { title: `The first modular blockchain network`, diff --git a/package.json b/package.json index c8ed77c96..e730a24ca 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "qs": "^6.11.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-google-recaptcha": "^3.1.0", "react-helmet": "^6.1.0", "react-in-viewport": "^1.0.0-alpha.30", "react-lottie-player": "^1.5.5", diff --git a/src/components/footer.js b/src/components/footer.js index 1760a2ad8..73bfe031d 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -1,12 +1,9 @@ -import * as React from "react"; +import React from "react"; import { Link } from "gatsby"; -import addToMailchimp from "gatsby-plugin-mailchimp"; +import SignUp from "./modals/signUp"; // import FooterBox from "../components/footer-box"; import FooterBox2 from "../components/footer-box-2"; -import ReactModal from "react-modal"; - -ReactModal.setAppElement("#___gatsby"); const navigation = { column1: { @@ -96,187 +93,86 @@ const navigation = { }, }; -class Footer extends React.Component { - constructor(props) { - super(props); - - this.state = { - email: "", - listFields: { - "group[57543]": "1", - }, - isModalOpen: false, - popupTitle: "", - msg: "", - }; - } - handleModalOpen = (event) => { - this.setState({ isModalOpen: true }); - document.body.style.overflow = "hidden"; - }; - - handleModalClose = (event) => { - this.setState({ isModalOpen: false }); - document.body.style.overflow = "unset"; - }; - - mailchimp(url) { - addToMailchimp(this.state.email, this.state.listFields, url) // listFields are optional if you are only capturing the email address. - .then((data) => { - this.setState({ msg: data.msg }); - if (data.result === "error" && data.msg.includes("is already subscribed")) { - this.setState({ success: true }); - this.setState({ isModalOpen: true }); - this.setState({ popupTitle: "Thank you!" }); - this.setState({ msg: "Thank you for subscribing!" }); - } else { - if (data.result === "success") { - this.setState({ success: true }); - this.setState({ isModalOpen: true }); - this.setState({ popupTitle: "Thank you!" }); - this.setState({ msg: this.state.msg }); - } else { - this.setState({ isModalOpen: true }); - this.setState({ popupTitle: "Error" }); - } - } - //console.log(data) - }) - .catch(() => {}); - } - - _handleSubmit = (e) => { - e.preventDefault(); - const listFields = {}; - - listFields["group[57543][1]"] = 1; - - this.setState( - (prevState) => ({ - listFields, - }), - () => { - if (this.state.email) { - this.mailchimp("https://celestia.us6.list-manage.com/subscribe/post?u=cde2461ba84f5279fff352829&id=8d165e36d3"); - } - } - ); - }; - - change = (e) => { - e.preventDefault(); - this.setState({ email: e.target.value }); - }; +const Footer = (props) => { + return ( + + ); +}; export default Footer; diff --git a/src/components/modals/signUp.js b/src/components/modals/signUp.js index df110ac9e..7273f3232 100644 --- a/src/components/modals/signUp.js +++ b/src/components/modals/signUp.js @@ -1,152 +1,107 @@ -import * as React from "react"; +import React, { useState, useRef } from "react"; import addToMailchimp from "gatsby-plugin-mailchimp"; -import Success from "./success"; +import ReactModal from "react-modal"; +import ReCAPTCHA from "react-google-recaptcha"; -export default class SignUp extends React.Component { - constructor(props) { - super(props); +ReactModal.setAppElement("#___gatsby"); - this.state = { - email: "", - developer: this.props.modalType === "developer" ? true : false, - operator: this.props.modalType === "operator" ? true : false, - newsletter: true, - success: false, - popupTitle: "Thank you", - msg: "", - }; - } +const SignUp = (props) => { + const [email, setEmail] = useState(""); + const [listFields, setListFields] = useState({ "group[57543]": "1" }); + const [isModalOpen, setIsModalOpen] = useState(false); + const [popupTitle, setPopupTitle] = useState("Thank you"); + const [msg, setMsg] = useState(""); + const [captchaError, setCaptchaError] = useState(""); - mailchimp(url) { - addToMailchimp(this.state.email, this.state.listFields, url) // listFields are optional if you are only capturing the email address. + const siteKey = process.env.GATSBY_RECAPTCHA_SITE_KEY; + const [token, setToken] = useState(null); + const reCaptchaRef = useRef(null); + + const handleChange = (e) => { + setEmail(e.target.value); + }; + + const onReCAPTCHAChange = (token) => { + setToken(token); + setCaptchaError(""); + }; + + const asyncScriptOnLoad = () => { + console.log("reCAPTCHA script loaded"); + }; + + const mailchimp = (url) => { + addToMailchimp(email, listFields, url) .then((data) => { - this.setState({ msg: data.msg }); + setMsg(data.msg); if (data.result === "error" && data.msg.includes("is already subscribed")) { - this.setState({ success: true }); - this.setState({ popupTitle: "Thank you!" }); - this.setState({ msg: "Thank you for subscribing!" }); + setPopupTitle("Thank you!"); + setMsg("Thank you for subscribing!"); + setIsModalOpen(true); } else { - if (data.result === "success") { - this.setState({ success: true }); - this.setState({ popupTitle: "Thank you!" }); - this.setState({ msg: this.state.msg }); - } else { - this.setState({ popupTitle: "Error" }); - } + setPopupTitle(data.result === "success" ? "Thank you!" : "Error"); + setIsModalOpen(true); } - //console.log(data) }) .catch(() => {}); - } + }; - _handleSubmit = (e) => { - e.preventDefault(); - const listFields = {}; + const handleModalClose = () => { + setIsModalOpen(false); + }; - if (this.state.newsletter) { - listFields["group[57543][1]"] = 1; - } - if (this.state.developer) { - listFields["group[57543][2]"] = 2; + const handleSubmit = async (e) => { + e.preventDefault(); + if (!token) { + setCaptchaError("Please complete the reCAPTCHA challenge!"); // Set captcha error message + return; } - if (this.state.operator) { - listFields["group[57543][4]"] = 4; + const updatedListFields = { ...listFields, "group[57543][1]": 1 }; + setListFields(updatedListFields); + if (email) { + mailchimp("https://celestia.us6.list-manage.com/subscribe/post?u=cde2461ba84f5279fff352829&id=8d165e36d3"); } - - this.setState( - (prevState) => ({ - listFields, - }), - () => { - if (this.state.email) { - this.mailchimp("https://celestia.us6.list-manage.com/subscribe/post?u=cde2461ba84f5279fff352829&id=8d165e36d3"); - } - } - ); }; - change = (e) => { - e.preventDefault(); - this.setState({ [e.target.id]: e.target.value }); - }; - changeCheckbox = (e) => { - this.setState({ [e.target.id]: e.target.checked }); - }; - render() { - return ( -
- {this.state.msg ? ( - - ) : ( -
-
-

Sign up to be the first to try our limited-access developer beta or validate on our testnet.

-
this._handleSubmit(e)}> -
- - this.change(e)} /> -
-
- -
-
-
- this.changeCheckbox(e)} - /> - -
-
-
-
- this.changeCheckbox(e)} - /> - -
-
-
-
-
- -
-
-
- this.changeCheckbox(e)} - /> - -
-
-
-
-
- -
-
+ + return ( +
+ +
+

{popupTitle}

+
+ +
+ +
+
+
+ + {captchaError &&
{captchaError}
} +
+
-
- )} + + +
- ); - } -} +
+ ); +}; + +export default SignUp; diff --git a/src/pages/index.js b/src/pages/index.js index 4c8e9792f..20639dd53 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,5 +1,4 @@ -import React, { useState } from "react"; -import ReactModal from "react-modal"; +import React from "react"; import Layout from "../components/layout"; import { Link } from "gatsby"; @@ -13,7 +12,6 @@ import { exploreCelestia } from "../datas/home/explore-celestia"; import { socialChannels } from "../datas/home/social-channels"; import BackersSection from "../components/sections/backers-sections"; -import SignUp from "../components/modals/signUp"; import Image from "../components/imageComponent"; import CommunityItem from "../components/modules/community-item"; @@ -26,21 +24,8 @@ import lottiAnim1 from "../anim/trans-anim-1.json"; import lottiAnim2 from "../anim/trans-anim-2.json"; const IndexPage = () => { - const [isModalOpen, setIsModalOpen] = useState(false); - const [modalType] = useState(""); const enableBackers = false; - // const handleModalOpen = (event) => { - // setModalType(event.target.id); - // setIsModalOpen(true); - // document.body.style.overflow = "hidden"; - // }; - - const handleModalClose = (event) => { - setIsModalOpen(false); - document.body.style.overflow = "unset"; - }; - return ( @@ -260,14 +245,6 @@ const IndexPage = () => {
- -
- - -
-
);