added captcha

183_12_1_tresorbackend_rupe-master/src/main/java/ch/bbw/pr/tresorbackend/controller/RecaptchaController.java

@@ -0,0 +1,4 @@
+package ch.bbw.pr.tresorbackend.controller;
+
+public class RecaptchaController {
+}

183_12_2_tresorfrontend_rupe-master/src/comunication/FetchUser.js

@@ -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);
+    }
+}

183_12_2_tresorfrontend_rupe-master/src/pages/user/LoginUser.js

@@ -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('/');
             }
@@ -33,7 +46,7 @@ function LoginUser({ loginValues, setLoginValues }) {
                         <div>
                             <label>Email:</label>
                             <input
-                                type="text"
+                                type="email"
                                 value={loginValues.email}
                                 onChange={(e) =>
                                     setLoginValues(prevValues => ({ ...prevValues, email: e.target.value }))}
@@ -44,7 +57,7 @@ function LoginUser({ loginValues, setLoginValues }) {
                         <div>
                             <label>Password:</label>
                             <input
-                                type="text"
+                                type="password"
                                 value={loginValues.password}
                                 onChange={(e) =>
                                     setLoginValues(prevValues => ({ ...prevValues, password: e.target.value }))}
@@ -54,6 +67,10 @@ function LoginUser({ loginValues, setLoginValues }) {
                         </div>
                     </aside>
                 </section>
+                <ReCAPTCHA
+                    sitekey="6LdJj1crAAAAABcEz65x0DUAsuJUBCKwdSi1Mewj"
+                    onChange={handleCaptcha}
+                />
                 <button type="submit">Login</button>
             </form>
         </div>

183_12_2_tresorfrontend_rupe-master/src/pages/user/RegisterUser.js

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import {postUser} from "../../comunication/FetchUser";
+import { postUser } from "../../comunication/FetchUser";
 
 /**
  * RegisterUser
  * @author Peter Rutschmann
  */
-function RegisterUser({loginValues, setLoginValues}) {
+function RegisterUser({ loginValues, setLoginValues }) {
     const navigate = useNavigate();
 
     const initialState = {
@@ -25,15 +25,23 @@ function RegisterUser({loginValues, setLoginValues}) {
         setErrorMessage('');
 
         //validate
-        if(credentials.password !== credentials.passwordConfirmation) {
+        if (credentials.password !== credentials.passwordConfirmation) {
             console.log("password != passwordConfirmation");
             setErrorMessage('Password and password-confirmation are not equal.');
             return;
         }
 
+        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,}$/;;
+
+        if (!passwordRegex.test(credentials.password)) {
+            setErrorMessage('Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.');
+            return;
+        }
+
+
         try {
             await postUser(credentials);
-            setLoginValues({userName: credentials.email, password: credentials.password});
+            setLoginValues({ userName: credentials.email, password: credentials.password });
             setCredentials(initialState);
             navigate('/');
         } catch (error) {
@@ -47,49 +55,49 @@ function RegisterUser({loginValues, setLoginValues}) {
             <h2>Register user</h2>
             <form onSubmit={handleSubmit}>
                 <section>
-                <aside>
-                    <div>
-                        <label>Firstname:</label>
-                        <input
-                            type="text"
-                            value={credentials.firstName}
-                            onChange={(e) =>
-                                setCredentials(prevValues => ({...prevValues, firstName: e.target.value}))}
-                            required
-                            placeholder="Please enter your firstname *"
-                        />
-                    </div>
-                    <div>
-                        <label>Lastname:</label>
-                        <input
-                            type="text"
-                            value={credentials.lastName}
-                            onChange={(e) =>
-                                setCredentials(prevValues => ({...prevValues, lastName: e.target.value}))}
-                            required
-                            placeholder="Please enter your lastname *"
-                        />
-                    </div>
-                    <div>
-                        <label>Email:</label>
-                        <input
-                            type="text"
-                            value={credentials.email}
-                            onChange={(e) =>
-                                setCredentials(prevValues => ({...prevValues, email: e.target.value}))}
-                            required
-                            placeholder="Please enter your email"
-                        />
-                    </div>
-                </aside>
+                    <aside>
+                        <div>
+                            <label>Firstname:</label>
+                            <input
+                                type="text"
+                                value={credentials.firstName}
+                                onChange={(e) =>
+                                    setCredentials(prevValues => ({ ...prevValues, firstName: e.target.value }))}
+                                required
+                                placeholder="Please enter your firstname *"
+                            />
+                        </div>
+                        <div>
+                            <label>Lastname:</label>
+                            <input
+                                type="text"
+                                value={credentials.lastName}
+                                onChange={(e) =>
+                                    setCredentials(prevValues => ({ ...prevValues, lastName: e.target.value }))}
+                                required
+                                placeholder="Please enter your lastname *"
+                            />
+                        </div>
+                        <div>
+                            <label>Email:</label>
+                            <input
+                                type="email"
+                                value={credentials.email}
+                                onChange={(e) =>
+                                    setCredentials(prevValues => ({ ...prevValues, email: e.target.value }))}
+                                required
+                                placeholder="Please enter your email"
+                            />
+                        </div>
+                    </aside>
                     <aside>
                         <div>
                             <label>Password:</label>
                             <input
-                                type="text"
+                                type="password"
                                 value={credentials.password}
                                 onChange={(e) =>
-                                    setCredentials(prevValues => ({...prevValues, password: e.target.value}))}
+                                    setCredentials(prevValues => ({ ...prevValues, password: e.target.value }))}
                                 required
                                 placeholder="Please enter your pwd *"
                             />
@@ -97,10 +105,10 @@ function RegisterUser({loginValues, setLoginValues}) {
                         <div>
                             <label>Password confirmation:</label>
                             <input
-                                type="text"
+                                type="password"
                                 value={credentials.passwordConfirmation}
                                 onChange={(e) =>
-                                    setCredentials(prevValues => ({...prevValues, passwordConfirmation: e.target.value}))}
+                                    setCredentials(prevValues => ({ ...prevValues, passwordConfirmation: e.target.value }))}
                                 required
                                 placeholder="Please confirm your pwd *"
                             />