Archivos finales

README.md

@@ -1,5 +1,5 @@
 # Como implementar re-CAPTCHA con REACT
-### [Tutorial: https://youtu.be/](https://youtu.be/)
+### [Tutorial: https://youtu.be/gauhWyPaYas](https://youtu.be/gauhWyPaYas)
 
 ![Como implementar re-CAPTCHA con REACT](https://raw.githubusercontent.com/falconmasters/google-recaptcha-v2/master/img/thumb.png)
 

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-google-recaptcha": "^2.1.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"
   },

src/App.js

@@ -1,22 +1,62 @@
-import React from 'react';
+import React, {useRef, useState} from 'react';
+import ReCAPTCHA from "react-google-recaptcha";
 
 const App = () => {
+	const [captchaValido, cambiarCaptchaValido] = useState(null);
+	const [usuarioValido, cambiarUsuarioValido] = useState(false);
+
+	const captcha = useRef(null);
+
+	const onChange = () => {
+		if(captcha.current.getValue()){
+			console.log('El usuario no es un robot');
+			cambiarCaptchaValido(true);
+		}
+	}
+
+	const submit = (e) => {
+		e.preventDefault();
+
+		// Validamos los inputs del formulario
+		// Si son correctos ya podemos enviar el fomulario, actualizar la Interfaz, etc.
+
+		if(captcha.current.getValue()){
+			console.log('El usuario no es un robot');
+			cambiarUsuarioValido(true);
+			cambiarCaptchaValido(true);
+		} else {
+			console.log('Por favor acepta el captcha');
+			cambiarUsuarioValido(false);
+			cambiarCaptchaValido(false);
+		}
+	}
+
 	return (
 		<div className="contenedor">
-			<div className="registrate">
-				<h1>Registrate</h1>
-				<form className="formulario" action="" onSubmit={submit}>
-					<input type="text" name="usuario" id="usuario" placeholder="Usuario" />
-					<input type="password" name="password" id="password" placeholder="Contraseña" />
-					<input type="password" name="password2" id="password2" placeholder="Repetir Contraseña" />
-					<div className="recaptcha">
-					</div>
-					<button type="submit">Iniciar Sesion</button>
-				</form>
-			</div>
-			<div>
-				<h1>Bienvenido</h1>
-			</div>
+			{!usuarioValido &&
+				<div className="registrate">
+					<h1>Registrate</h1>
+					<form className="formulario" action="" onSubmit={submit}>
+						<input type="text" name="usuario" id="usuario" placeholder="Usuario" />
+						<input type="password" name="password" id="password" placeholder="Contraseña" />
+						<input type="password" name="password2" id="password2" placeholder="Repetir Contraseña" />
+						<div className="recaptcha">
+							<ReCAPTCHA
+								ref={captcha}
+								sitekey="TU CLAVE DE CAPTCHA"
+								onChange={onChange}
+							/>
+						</div>
+						{captchaValido === false && <div className="error-captcha">Por favor acepta el captcha</div>}
+						<button type="submit">Iniciar Sesion</button>
+					</form>
+				</div>
+			}
+			{usuarioValido && 
+				<div>
+					<h1>Bienvenido</h1>
+				</div>
+			}
 		</div>
 	);
 }