From 7dd44811a6c7df59b1a9b0c7f55b7a3865d9e6a9 Mon Sep 17 00:00:00 2001
From: HF
Date: Wed, 24 Feb 2021 03:41:39 +0100
Subject: [PATCH] add captcha alert, remove some old captcha stuff
---
README.md | 34 +++++-----
deployment/example-ecosystem-captchas.yml | 2 +-
src/captchaserver.js | 4 +-
src/components/Alert.jsx | 23 ++++---
src/components/Captcha.jsx | 74 ++++++++++++++++++++--
src/components/ChatBox.jsx | 4 +-
src/components/HelpModal.jsx | 14 -----
src/components/SignUpForm.jsx | 4 ++
src/core/config.js | 8 +--
src/ssr-components/Html.jsx | 23 -------
src/ssr-components/Main.jsx | 3 +-
src/ui/placePixel.js | 13 ++--
src/utils/captcha.js | 75 +++--------------------
13 files changed, 127 insertions(+), 154 deletions(-)
diff --git a/README.md b/README.md
index b2b7c887..98040dd4 100644
--- a/README.md
+++ b/README.md
@@ -79,24 +79,22 @@ Configuration takes place in the environment variables that are defined in ecosy
#### Optional Configuration
-| Variable | Description | Example |
-|-------------------|:--------------------------------------|--------------------|
-| ASSET_SERVER | URL for assets | "http://localhost" |
-| USE_PROXYCHECK | Check users for Proxies | 0 |
-| APISOCKET_KEY | Key for API Socket for SpecialAccess™ | "SDfasife3" |
-| ADMIN_IDS | Ids of users with Admin rights | "1,12,3" |
-| CAPTCHA_METHOD | 0: none, 1: reCaptcha, 2: hCaptcha | 2 |
-| CAPTCHA_SECRET | re/hCaptcha secret key | "asdieewff" |
-| CAPTCHA_SITEKEY | re/hCaptcha site key | "23ksdfssd" |
-| CAPTCHA_TIME | time in minutes between captchas | 30 |
-| SESSION_SECRET | random sting for express sessions | "ayylmao" |
-| LOG_MYSQL | if sql queries should get logged | 0 |
-| USE_XREALIP | see ngins / CDN section | 1 |
-| BACKUP_URL | url of backup server (see Backup) | "http://localhost" |
-| BACKUP_DIR | mounted directory of backup server | "/mnt/backup/" |
-| GMAIL_USER | gmail username if used for mails | "ppfun@gmail.com" |
-| GMAIL_PW | gmail password if used for mails | "lolrofls" |
-| HOURLY_EVENT | run hourly void event on main canvas | 1 |
+| Variable | Description | Example |
+|-------------------|:--------------------------------------|-------------------------|
+| ASSET_SERVER | URL for assets | "http://localhost" |
+| USE_PROXYCHECK | Check users for Proxies | 0 |
+| APISOCKET_KEY | Key for API Socket for SpecialAccess™ | "SDfasife3" |
+| ADMIN_IDS | Ids of users with Admin rights | "1,12,3" |
+| CAPTCHA_URL | URL where captcha is served | "http://localhost:8080" |
+| CAPTCHA_TIME | time in minutes between captchas | 30 |
+| SESSION_SECRET | random sting for express sessions | "ayylmao" |
+| LOG_MYSQL | if sql queries should get logged | 0 |
+| USE_XREALIP | see ngins / CDN section | 1 |
+| BACKUP_URL | url of backup server (see Backup) | "http://localhost" |
+| BACKUP_DIR | mounted directory of backup server | "/mnt/backup/" |
+| GMAIL_USER | gmail username if used for mails | "ppfun@gmail.com" |
+| GMAIL_PW | gmail password if used for mails | "lolrofls" |
+| HOURLY_EVENT | run hourly void event on main canvas | 1 |
Notes:
diff --git a/deployment/example-ecosystem-captchas.yml b/deployment/example-ecosystem-captchas.yml
index 107fd8b3..f98120f5 100644
--- a/deployment/example-ecosystem-captchas.yml
+++ b/deployment/example-ecosystem-captchas.yml
@@ -3,6 +3,6 @@ apps:
name : 'captchas'
node_args: --nouse-idle-notification --expose-gc
env:
- PORT: 80
+ PORT: 8080
HOST: "localhost"
REDIS_URL: 'redis://localhost:6379'
diff --git a/src/captchaserver.js b/src/captchaserver.js
index 5ba5a451..1ea20a15 100644
--- a/src/captchaserver.js
+++ b/src/captchaserver.js
@@ -8,7 +8,7 @@ import process from 'process';
import http from 'http';
import ppfunCaptcha from 'ppfun-captcha';
-const PORT = process.env.PORT || 80;
+const PORT = process.env.PORT || 8080;
const HOST = process.env.HOST || 'localhost';
const server = http.createServer((req, res) => {
@@ -25,7 +25,7 @@ const server = http.createServer((req, res) => {
const ip = req.headers['x-real-ip'] || req.connection.remoteAddress;
console.log(`Serving ${captcha.text} to ${ip}`);
res.writeHead(200, {
- 'Content-Type': 'text/html',
+ 'Content-Type': 'image/svg+xml',
'Cache-Control': 'no-cache',
});
res.write(captcha.data);
diff --git a/src/components/Alert.jsx b/src/components/Alert.jsx
index c18ee30f..242db59a 100644
--- a/src/components/Alert.jsx
+++ b/src/components/Alert.jsx
@@ -3,9 +3,10 @@
* @flow
*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
+import Captcha from './Captcha';
import { closeAlert } from '../actions';
const Alert = () => {
@@ -20,9 +21,9 @@ const Alert = () => {
} = useSelector((state) => state.alert);
const dispatch = useDispatch();
- const close = () => {
+ const close = useCallback(() => {
dispatch(closeAlert());
- };
+ }, [dispatch]);
const onTransitionEnd = () => {
if (!alertOpen) setRender(false);
@@ -54,12 +55,16 @@ const Alert = () => {
{alertMessage}
-
+ {(alertType === 'captcha')
+ ?
+ : (
+
+ )}
diff --git a/src/components/Captcha.jsx b/src/components/Captcha.jsx
index 78f97f8d..73c2a5c8 100644
--- a/src/components/Captcha.jsx
+++ b/src/components/Captcha.jsx
@@ -2,10 +2,74 @@
* @flow
*/
-import React from 'react';
+import React, { useState } from 'react';
import { t } from 'ttag';
-const Captcha = ({
-}) => (
- div />
-);
+import { IoReloadCircleSharp } from 'react-icons/io5';
+
+function getUrl() {
+ return `${window.ssv.captchaurl}/captcha.svg?${new Date().getTime()}`;
+}
+
+const Captcha = ({ callback, cancel }) => {
+ const [captchaUrl, setCaptchaUrl] = useState(getUrl());
+ const [text, setText] = useState('');
+ const [error, setError] = useState(false);
+
+ return (
+
+
+ {t`Type the characters from the following image:`}
+
+ ({t`Tip: Not case-sensitive; I and l are the same`})
+
+
+
![]({captchaUrl})
setError(true)}
+ />
+
+ {t`Can't read? Reload:`}
+ setCaptchaUrl(getUrl())}
+ >
+
+
+
+
{
+ const txt = evt.target.value;
+ setText(txt);
+ if (callback) callback(txt);
+ }}
+ />
+ {(!callback) && (
+
+
+
+
+ )}
+
+ );
+};
+
+export default React.memo(Captcha);
diff --git a/src/components/ChatBox.jsx b/src/components/ChatBox.jsx
index 0fa3c12c..df0b9eef 100644
--- a/src/components/ChatBox.jsx
+++ b/src/components/ChatBox.jsx
@@ -25,7 +25,7 @@ const ChatBox = () => {
}, 10);
}, [chatOpen]);
- const onTransitionEnd =() => {
+ const onTransitionEnd = () => {
if (!chatOpen) setRender(false);
};
@@ -44,6 +44,6 @@ const ChatBox = () => {
)
);
-}
+};
export default React.memo(ChatBox);
diff --git a/src/components/HelpModal.jsx b/src/components/HelpModal.jsx
index 2729be31..4af09dac 100644
--- a/src/components/HelpModal.jsx
+++ b/src/components/HelpModal.jsx
@@ -90,20 +90,6 @@ can be downloaded from mega.nz here: `}crazygames.com
- { (typeof window.hcaptcha === 'undefined')
- ? (
-
-
- {jt`This site is protected by reCAPTCHA and the Google ${reCaptchaPP} and ${reCaptchaTOS} apply.`}
-
-
- ) : (
-
-
- {jt`This site is protected by hCAPTCHA and its ${hCaptchaPP} and ${hCaptchaTOS} apply.`}
-
-
- )}
);
};
diff --git a/src/components/SignUpForm.jsx b/src/components/SignUpForm.jsx
index 153ebdfa..74a16509 100644
--- a/src/components/SignUpForm.jsx
+++ b/src/components/SignUpForm.jsx
@@ -121,6 +121,7 @@ class SignUpForm extends React.Component {
this.setState({ name: evt.target.value })}
type="text"
placeholder={t`Name`}
@@ -128,6 +129,7 @@ class SignUpForm extends React.Component {
this.setState({ email: evt.target.value })}
type="text"
placeholder={t`Email`}
@@ -135,6 +137,7 @@ class SignUpForm extends React.Component {
this.setState({ password: evt.target.value })}
type="password"
placeholder={t`Password`}
@@ -142,6 +145,7 @@ class SignUpForm extends React.Component {
this.setState({
confirmPassword: evt.target.value,
})}
diff --git a/src/core/config.js b/src/core/config.js
index b807ac66..521ab2db 100644
--- a/src/core/config.js
+++ b/src/core/config.js
@@ -20,6 +20,8 @@ export const TILE_FOLDER = path.join(__dirname, `./${TILE_FOLDER_REL}`);
export const ASSET_SERVER = process.env.ASSET_SERVER || '.';
+export const CAPTCHA_URL = process.env.CAPTCHA_URL || 'http://localhost:8080';
+
export const USE_XREALIP = process.env.USE_XREALIP || false;
export const BACKUP_URL = process.env.BACKUP_URL || null;
@@ -86,12 +88,6 @@ export const auth = {
},
};
-// o: none
-// 1: reCaptcha
-// 2: hCaptcha
-export const CAPTCHA_METHOD = Number(process.env.CAPTCHA_METHOD || 0);
-export const CAPTCHA_SECRET = process.env.CAPTCHA_SECRET || false;
-export const CAPTCHA_SITEKEY = process.env.CAPTCHA_SITEKEY || false;
// time on which to display captcha in minutes
export const CAPTCHA_TIME = parseInt(process.env.CAPTCHA_TIME, 10) || 30;
diff --git a/src/ssr-components/Html.jsx b/src/ssr-components/Html.jsx
index 8d7dbe28..02e3b7e7 100644
--- a/src/ssr-components/Html.jsx
+++ b/src/ssr-components/Html.jsx
@@ -11,7 +11,6 @@
/* eslint-disable max-len */
import React from 'react';
-import { CAPTCHA_METHOD, CAPTCHA_SITEKEY } from '../core/config';
const Html = ({
title,
@@ -48,10 +47,6 @@ const Html = ({
dangerouslySetInnerHTML={{ __html: style.cssText }}
/>
))}
- {(CAPTCHA_METHOD === 1) && CAPTCHA_SITEKEY && useCaptcha
- && }
- {(CAPTCHA_METHOD === 2) && CAPTCHA_SITEKEY && useCaptcha
- && }
{code && (