diff --git a/package-lock.json b/package-lock.json index c5ba431f1..c7364b601 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1358,6 +1358,11 @@ } } }, + "@hcaptcha/react-hcaptcha": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@hcaptcha/react-hcaptcha/-/react-hcaptcha-0.1.6.tgz", + "integrity": "sha512-+wgsq+xeyVTiKLLOiNLn6MsmJENBAb/DZ3mUKiCrAazOZT5C44GS4axlew6DxOw4H0hGId4f+BncL1lk/2NIwA==" + }, "@istanbuljs/load-nyc-config": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz", @@ -10421,6 +10426,12 @@ } } }, + "hcaptcha-test-keys": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/hcaptcha-test-keys/-/hcaptcha-test-keys-1.0.0.tgz", + "integrity": "sha512-HEXyt7gwvAjORUgTh52tJM3l+CzdJo4m4BH8QeM7tzL4WQAQiSQ6P53XsxhnWkUszb/xdpzsrfAAoYmYlrRUow==", + "dev": true + }, "he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", @@ -12215,8 +12226,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz", "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=", - "dev": true, - "optional": true + "dev": true }, "json-parse-better-errors": { "version": "1.0.2", @@ -17532,12 +17542,6 @@ } } }, - "recaptcha-test-keys": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/recaptcha-test-keys/-/recaptcha-test-keys-1.0.0.tgz", - "integrity": "sha1-IDbYIu9bPz6YIKT5vOB+M3sVgnE=", - "dev": true - }, "rechoir": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", diff --git a/package.json b/package.json index 1006c2eaf..0863ba041 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "dependencies": { "@babel/runtime": "^7.9.2", "@f/cookies-enabled": "^1.1.1", + "@hcaptcha/react-hcaptcha": "^0.1.6", "@material-ui/core": "^4.9.0", "@material-ui/icons": "^4.9.0", "@material-ui/styles": "^4.9.0", @@ -38,7 +39,6 @@ "just-map-values": "^1.1.0", "just-omit": "^1.1.0", "lie": "^3.3.0", - "load-script2": "^1.0.1", "lodash": "^4.17.15", "ms": "^2.1.2", "nanoraf": "^3.1.0", @@ -126,6 +126,7 @@ "gulp-newer": "^1.4.0", "gulp-sourcemaps": "^2.6.4", "gulp-yaml": "^2.0.2", + "hcaptcha-test-keys": "^1.0.0", "html-loader": "^1.0.0", "html-webpack-plugin": "^4.0.2", "http-proxy-middleware": "^1.0.0", @@ -142,7 +143,6 @@ "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", "postcss-url": "^8.0.0", - "recaptcha-test-keys": "^1.0.0", "rimraf": "^3.0.0", "rollup": "^2.0.3", "rollup-plugin-babel": "^4.3.3", @@ -180,10 +180,5 @@ "start": "gulp start", "prerelease": "npm run clean && npm test && npm run prod", "postpublish": "cd packages/u-wave-web-middleware && npm publish" - }, - "greenkeeper": { - "ignore": [ - "load-script2" - ] } } diff --git a/src/components/Dialogs/LoginDialog/RegisterForm.js b/src/components/Dialogs/LoginDialog/RegisterForm.js index 627ce3d40..97a927685 100644 --- a/src/components/Dialogs/LoginDialog/RegisterForm.js +++ b/src/components/Dialogs/LoginDialog/RegisterForm.js @@ -7,11 +7,11 @@ import CircularProgress from '@material-ui/core/CircularProgress'; import EmailIcon from '@material-ui/icons/Email'; import PasswordIcon from '@material-ui/icons/Lock'; import UserIcon from '@material-ui/icons/Person'; +import ReCaptcha from '@hcaptcha/react-hcaptcha'; import Form from '../../Form'; import FormGroup from '../../Form/Group'; import TextField from '../../Form/TextField'; import Button from '../../Form/Button'; -import ReCaptcha from '../../ReCaptcha'; import SocialLogin from './SocialLogin'; import Separator from './Separator'; diff --git a/src/components/ReCaptcha/ReCaptcha.js b/src/components/ReCaptcha/ReCaptcha.js deleted file mode 100644 index 90b994193..000000000 --- a/src/components/ReCaptcha/ReCaptcha.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -export default class ReCaptcha extends React.Component { - static propTypes = { - grecaptcha: PropTypes.object.isRequired, - sitekey: PropTypes.string.isRequired, - theme: PropTypes.string, - onResponse: PropTypes.func.isRequired, - }; - - static defaultProps = { - theme: 'light', - }; - - componentDidMount() { - const { grecaptcha, sitekey, theme } = this.props; - - grecaptcha.render(this.container, { - sitekey, - theme, - callback: this.handleResponse, - }); - } - - handleResponse = (res) => { - const { onResponse } = this.props; - - if (onResponse) { - onResponse(res); - } - }; - - refContainer = (container) => { - this.container = container; - }; - - render() { - return
; - } -} diff --git a/src/components/ReCaptcha/index.css b/src/components/ReCaptcha/index.css deleted file mode 100644 index c3e8cc610..000000000 --- a/src/components/ReCaptcha/index.css +++ /dev/null @@ -1,9 +0,0 @@ -:root { - --recaptcha-iframe-height: 78px; -} - -.ReCaptcha-spinner { - width: var(--recaptcha-iframe-height); - height: var(--recaptcha-iframe-height); - margin: auto; -} diff --git a/src/components/ReCaptcha/index.js b/src/components/ReCaptcha/index.js deleted file mode 100644 index 2a0af69e7..000000000 --- a/src/components/ReCaptcha/index.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import loadScript from 'load-script2'; -import CircularProgress from '@material-ui/core/CircularProgress'; -import InternalCaptcha from './ReCaptcha'; - -const GRECAPTCHA_API = 'https://www.google.com/recaptcha/api.js'; -const onloadCallbackName = 'grecaptchaOnload__$'; -const onloadCallbacks = []; - -function loadReCaptcha(cb) { - loadScript(`${GRECAPTCHA_API}?onload=${onloadCallbackName}&render=explicit`); - onloadCallbacks.push(cb); -} - -function onload() { - onloadCallbacks.forEach((fn) => fn(window.grecaptcha)); -} - -export default class ReCaptcha extends React.Component { - constructor(props) { - super(props); - this.state = { - grecaptcha: window.grecaptcha, - }; - } - - componentDidMount() { - const { grecaptcha } = this.state; - - if (!grecaptcha) { - this.load(); - } - } - - load() { - if (typeof window[onloadCallbackName] !== 'function') { - window[onloadCallbackName] = onload; - } - - loadReCaptcha((grecaptcha) => { - this.setState({ grecaptcha }); - }); - } - - render() { - const { grecaptcha } = this.state; - - if (!grecaptcha) { - return ; - } - - return ( - - ); - } -} diff --git a/src/components/index.css b/src/components/index.css index ae7b5f78e..365249e4c 100644 --- a/src/components/index.css +++ b/src/components/index.css @@ -17,7 +17,6 @@ @import "./Overlay/index.css"; @import "./Player/index.css"; @import "./PlaylistManager/index.css"; -@import "./ReCaptcha/index.css"; @import "./RoomHistory/index.css"; @import "./SearchBar/index.css"; @import "./ServerList/index.css"; diff --git a/tasks/serve.js b/tasks/serve.js index ece7b957e..4b51f6fa2 100644 --- a/tasks/serve.js +++ b/tasks/serve.js @@ -5,8 +5,8 @@ const path = require('path'); const log = require('fancy-log'); const chalk = require('chalk'); const emojione = require('u-wave-web-emojione'); -const recaptchaTestKeys = require('recaptcha-test-keys'); const express = require('express'); +const hcaptchaTestKeys = require('hcaptcha-test-keys'); const { createProxyMiddleware } = require('http-proxy-middleware'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); @@ -127,7 +127,7 @@ function serve(done) { publicPath: '/', // Point u-wave-web middleware to the virtual webpack filesystem. fs: dev.fileSystem, - recaptcha: { key: recaptchaTestKeys.sitekey }, + recaptcha: { key: hcaptchaTestKeys.sitekey }, }); }); @@ -149,7 +149,7 @@ function serve(done) { socketUrl, emoji: emojione.emoji, basePath: path.join(__dirname, '../packages/u-wave-web-middleware/public'), - recaptcha: { key: recaptchaTestKeys.sitekey }, + recaptcha: { key: hcaptchaTestKeys.sitekey }, }); app.use(webClient);