added captcha
This commit is contained in:
parent
0ea0b8b3c6
commit
0b9cfbcd2d
|
@ -0,0 +1,4 @@
|
|||
package ch.bbw.pr.tresorbackend.controller;
|
||||
|
||||
public class RecaptchaController {
|
||||
}
|
|
@ -103,3 +103,27 @@ export const loginUser = async (loginValue) => {
|
|||
throw new Error('Failed to log in. ' || error.message);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export const captchaCheck = async (captchaToken) => {
|
||||
const protocol = process.env.REACT_APP_API_PROTOCOL; // "http"
|
||||
const host = process.env.REACT_APP_API_HOST; // "localhost"
|
||||
const port = process.env.REACT_APP_API_PORT; // "8080"
|
||||
const path = process.env.REACT_APP_API_PATH; // "/api"
|
||||
const portPart = port ? `:${port}` : ''; // port is optional
|
||||
const API_URL = `${protocol}://${host}${portPart}${path}`;
|
||||
|
||||
try {
|
||||
|
||||
const res = await fetch(`${API_URL}/verify-recaptcha`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ captchaToken }),
|
||||
});
|
||||
|
||||
return await res.json();
|
||||
} catch (error) {
|
||||
console.error('Failed to log in:', error.message);
|
||||
throw new Error('Failed to log in. ' || error.message);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { loginUser } from '../../comunication/FetchUser';
|
||||
import { loginUser, captchaCheck } from '../../comunication/FetchUser';
|
||||
import ReCAPTCHA from 'react-google-recaptcha';
|
||||
|
||||
/**
|
||||
* LoginUser
|
||||
|
@ -7,15 +9,26 @@ import { loginUser } from '../../comunication/FetchUser';
|
|||
*/
|
||||
function LoginUser({ loginValues, setLoginValues }) {
|
||||
const navigate = useNavigate();
|
||||
const [recaptchaToken, setRecaptchaToken] = useState(null);
|
||||
|
||||
const handleCaptcha = (token) => {
|
||||
setRecaptchaToken(token);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!recaptchaToken) {
|
||||
alert("Please verify reCAPTCHA");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const captchaData = await captchaCheck(recaptchaToken);
|
||||
|
||||
let isLoginValid = false
|
||||
isLoginValid = await loginUser(loginValues);
|
||||
console.log(loginValues);
|
||||
if (isLoginValid) {
|
||||
if (isLoginValid || captchaData.success) {
|
||||
setLoginValues({ userName: loginValues.email, password: loginValues.password });
|
||||
navigate('/');
|
||||
}
|
||||
|
@ -54,6 +67,10 @@ function LoginUser({ loginValues, setLoginValues }) {
|
|||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
<ReCAPTCHA
|
||||
sitekey="6LdJj1crAAAAABcEz65x0DUAsuJUBCKwdSi1Mewj"
|
||||
onChange={handleCaptcha}
|
||||
/>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue