TPS
/
halkbank_shahsyotag_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

captcha integrated

This commit is contained in:
VividTruthKeeper 2022-03-25 16:31:12 +05:00
parent 9d0cf7fd18
commit 5a165b46bf
6 changed files with 132 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
package-lock.json generated
View File

@ -5,7 +5,6 @@
"requires": true,
"packages": {
"": {
"name": "react-halkbank",
"version": "0.1.0",
"dependencies": {
"@testing-library/jest-dom": "5.16.1",
@ -15,6 +14,7 @@
"node-sass": "^7.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-recaptcha": "^2.1.0",
"react-router-dom": "^6.2.1",
"react-scripts": "^5.0.0",
"web-vitals": "2.1.4"
@ -4155,6 +4155,8 @@
"version": "8.9.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
"integrity": "sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==",
"optional": true,
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.1",
"json-schema-traverse": "^1.0.0",
@ -4169,7 +4171,9 @@
"node_modules/ajv-formats/node_modules/json-schema-traverse": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
"optional": true,
"peer": true
},
"node_modules/ajv-keywords": {
"version": "3.5.2",
@ -8319,6 +8323,19 @@
"@babel/runtime": "^7.7.6"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hoist-non-react-statics/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -13852,6 +13869,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-dev-utils": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@ -13987,6 +14016,18 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
},
"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": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -20283,14 +20324,13 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
"requires": {
"ajv": "^8.0.0"
},
"requires": {},
"dependencies": {
"ajv": {
"version": "8.9.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
"version": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
"integrity": "sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==",
"optional": true,
"peer": true,
"requires": {
"fast-deep-equal": "^3.1.1",
"json-schema-traverse": "^1.0.0",
@ -20301,7 +20341,9 @@
"json-schema-traverse": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
"optional": true,
"peer": true
}
}
},
@ -23353,6 +23395,21 @@
"@babel/runtime": "^7.7.6"
}
},
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
},
"dependencies": {
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
}
}
},
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -27245,6 +27302,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-dev-utils": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@ -27346,6 +27412,15 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
},
"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": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

1
package.json
View File

@ -10,6 +10,7 @@
"node-sass": "^7.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-recaptcha": "^2.1.0",
"react-router-dom": "^6.2.1",
"react-scripts": "^5.0.0",
"web-vitals": "2.1.4"

16
src/components/sign/RegForm.js
View File

@ -2,6 +2,7 @@
import React, { useState, useEffect, useRef, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../../backend/UserContext";
import ReCAPTCHA from "react-google-recaptcha";
// IMPORT IMAGES
import up from "../../icons/clipboard-white.svg";
@ -22,6 +23,9 @@ import { ValidateUserName } from "../../validators/ValidateUserName";
import { ValidatePhoneNumber } from "../../validators/ValidatePhoneNumber";
import { getDate } from "../../helpers/Date";
// SITEKEY
import { sitekey } from "../../recaptcha";
const RegForm = () => {
const [isPassword, setIsPassword] = useState(true);
const [error, setError] = useState(false);
@ -51,6 +55,7 @@ const RegForm = () => {
user: null,
password: null,
match: false,
captcha: false,
});
const [ppSerie, setPpSerie] = useState(null);
@ -84,7 +89,8 @@ const RegForm = () => {
inputValid.homeTel &&
inputValid.user &&
inputValid.password &&
inputValid.match
inputValid.match &&
inputValid.captcha
) {
setBtnEnabled(true);
} else {
@ -526,7 +532,13 @@ const RegForm = () => {
""
)}
<div className="reg-btns">
<h1>CAPTCHA</h1>
<ReCAPTCHA
className="captcha"
sitekey={sitekey}
onChange={(e) => {
setInputValid({ ...inputValid, captcha: true });
}}
/>
<h2>
Все поля с символом ( <span>*</span> ) обязательны для заполнения
Все поля доожны быть заполненны латиницей

20
src/components/sign/SignForm.js
View File

@ -1,6 +1,7 @@
// IMPORT MODULES
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import ReCAPTCHA from "react-google-recaptcha";
// IMPORT IMAGES
import logout from "../../icons/logout.svg";
@ -12,6 +13,9 @@ import Loader from "../../components/global/Loader";
// IMPORT HELPERS
import { ValidateEmail } from "../../validators/ValidateEmail";
// SITEKEY
import { sitekey } from "../../recaptcha";
const SignForm = ({
setRecoveryOpen,
setFormData,
@ -24,11 +28,17 @@ const SignForm = ({
login: null,
password: null,
email: null,
captcha: false,
});
const [btnEnabled, setBtnEnabled] = useState(false);
useEffect(() => {
if (inputValid.login && inputValid.password && inputValid.email) {
if (
inputValid.login &&
inputValid.password &&
inputValid.email &&
inputValid.captcha
) {
setBtnEnabled(true);
} else {
setBtnEnabled(false);
@ -99,7 +109,13 @@ const SignForm = ({
{error ? <span>Неверные имя пользователя или пароль</span> : ""}
</div>
<div className="captcha">
<h1>CAPTCHA</h1>
<ReCAPTCHA
className="captcha"
sitekey={sitekey}
onChange={(e) => {
setInputValid({ ...inputValid, captcha: true });
}}
/>
</div>
{/* <div className="forget">
<h3

16
src/pages/Recovery.js
View File

@ -1,6 +1,7 @@
// IMPORT MODULES
import React, { useState, useEffect, useContext, useRef } from "react";
import { UserContext } from "../backend/UserContext";
import ReCAPTCHA from "react-google-recaptcha";
// IMPORT COMPONENTS
import Breadcrumb from "../components/global/Breadcrumb";
@ -17,6 +18,9 @@ import { ValidatePassword } from "../validators/ValidatePassword";
import { ValidateEmail } from "../validators/ValidateEmail";
import { changePassword } from "../backend/changePassword";
// SITEKEY
import { sitekey } from "../recaptcha";
const Recovery = () => {
const inp1 = useRef();
const inp2 = useRef();
@ -32,6 +36,7 @@ const Recovery = () => {
email: false,
new: false,
match: false,
captcha: false,
});
const [btnEnabled, setBtnEnabled] = useState(false);
const formData = new FormData();
@ -40,7 +45,8 @@ const Recovery = () => {
if (
inputValid.email &&
inputValid.new === inputValid.match &&
inputValid.new
inputValid.new &&
inputValid.captcha
) {
setBtnEnabled(true);
} else {
@ -204,6 +210,14 @@ const Recovery = () => {
)}
</div>
</div>
<div className="captcha-block">
<ReCAPTCHA
sitekey={sitekey}
onChange={() => {
setInputValid({ ...inputValid, captcha: true });
}}
/>
</div>
</form>
</div>
) : (

1
src/recaptcha.js Normal file
View File

@ -0,0 +1 @@
export const sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI";