Compare commits
	
		
			2 Commits
		
	
	
		
			5ac961330e
			...
			0b9cfbcd2d
		
	
	| Author | SHA1 | Date | 
|---|---|---|
|  | 0b9cfbcd2d | |
|  | 0ea0b8b3c6 | 
|  | @ -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); |         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 { useNavigate } from 'react-router-dom'; | ||||||
| import { loginUser } from '../../comunication/FetchUser'; | import { loginUser, captchaCheck } from '../../comunication/FetchUser'; | ||||||
|  | import ReCAPTCHA from 'react-google-recaptcha'; | ||||||
| 
 | 
 | ||||||
| /** | /** | ||||||
|  * LoginUser |  * LoginUser | ||||||
|  | @ -7,15 +9,26 @@ import { loginUser } from '../../comunication/FetchUser'; | ||||||
|  */ |  */ | ||||||
| function LoginUser({ loginValues, setLoginValues }) { | function LoginUser({ loginValues, setLoginValues }) { | ||||||
|     const navigate = useNavigate(); |     const navigate = useNavigate(); | ||||||
|  |     const [recaptchaToken, setRecaptchaToken] = useState(null); | ||||||
|  | 
 | ||||||
|  |     const handleCaptcha = (token) => { | ||||||
|  |         setRecaptchaToken(token); | ||||||
|  |     }; | ||||||
| 
 | 
 | ||||||
|     const handleSubmit = async (e) => { |     const handleSubmit = async (e) => { | ||||||
|         e.preventDefault(); |         e.preventDefault(); | ||||||
| 
 | 
 | ||||||
|  |         if (!recaptchaToken) { | ||||||
|  |             alert("Please verify reCAPTCHA"); | ||||||
|  |             return; | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|         try { |         try { | ||||||
|  |             const captchaData = await captchaCheck(recaptchaToken); | ||||||
|  | 
 | ||||||
|             let isLoginValid = false |             let isLoginValid = false | ||||||
|             isLoginValid = await loginUser(loginValues); |             isLoginValid = await loginUser(loginValues); | ||||||
|             console.log(loginValues); |             if (isLoginValid || captchaData.success) { | ||||||
|             if (isLoginValid) { |  | ||||||
|                 setLoginValues({ userName: loginValues.email, password: loginValues.password }); |                 setLoginValues({ userName: loginValues.email, password: loginValues.password }); | ||||||
|                 navigate('/'); |                 navigate('/'); | ||||||
|             } |             } | ||||||
|  | @ -33,7 +46,7 @@ function LoginUser({ loginValues, setLoginValues }) { | ||||||
|                         <div> |                         <div> | ||||||
|                             <label>Email:</label> |                             <label>Email:</label> | ||||||
|                             <input |                             <input | ||||||
|                                 type="text" |                                 type="email" | ||||||
|                                 value={loginValues.email} |                                 value={loginValues.email} | ||||||
|                                 onChange={(e) => |                                 onChange={(e) => | ||||||
|                                     setLoginValues(prevValues => ({ ...prevValues, email: e.target.value }))} |                                     setLoginValues(prevValues => ({ ...prevValues, email: e.target.value }))} | ||||||
|  | @ -44,7 +57,7 @@ function LoginUser({ loginValues, setLoginValues }) { | ||||||
|                         <div> |                         <div> | ||||||
|                             <label>Password:</label> |                             <label>Password:</label> | ||||||
|                             <input |                             <input | ||||||
|                                 type="text" |                                 type="password" | ||||||
|                                 value={loginValues.password} |                                 value={loginValues.password} | ||||||
|                                 onChange={(e) => |                                 onChange={(e) => | ||||||
|                                     setLoginValues(prevValues => ({ ...prevValues, password: e.target.value }))} |                                     setLoginValues(prevValues => ({ ...prevValues, password: e.target.value }))} | ||||||
|  | @ -54,6 +67,10 @@ function LoginUser({ loginValues, setLoginValues }) { | ||||||
|                         </div> |                         </div> | ||||||
|                     </aside> |                     </aside> | ||||||
|                 </section> |                 </section> | ||||||
|  |                 <ReCAPTCHA | ||||||
|  |                     sitekey="6LdJj1crAAAAABcEz65x0DUAsuJUBCKwdSi1Mewj" | ||||||
|  |                     onChange={handleCaptcha} | ||||||
|  |                 /> | ||||||
|                 <button type="submit">Login</button> |                 <button type="submit">Login</button> | ||||||
|             </form> |             </form> | ||||||
|         </div> |         </div> | ||||||
|  |  | ||||||
|  | @ -1,12 +1,12 @@ | ||||||
| import React, { useState } from 'react'; | import React, { useState } from 'react'; | ||||||
| import { useNavigate } from 'react-router-dom'; | import { useNavigate } from 'react-router-dom'; | ||||||
| import {postUser} from "../../comunication/FetchUser"; | import { postUser } from "../../comunication/FetchUser"; | ||||||
| 
 | 
 | ||||||
| /** | /** | ||||||
|  * RegisterUser |  * RegisterUser | ||||||
|  * @author Peter Rutschmann |  * @author Peter Rutschmann | ||||||
|  */ |  */ | ||||||
| function RegisterUser({loginValues, setLoginValues}) { | function RegisterUser({ loginValues, setLoginValues }) { | ||||||
|     const navigate = useNavigate(); |     const navigate = useNavigate(); | ||||||
| 
 | 
 | ||||||
|     const initialState = { |     const initialState = { | ||||||
|  | @ -25,15 +25,23 @@ function RegisterUser({loginValues, setLoginValues}) { | ||||||
|         setErrorMessage(''); |         setErrorMessage(''); | ||||||
| 
 | 
 | ||||||
|         //validate
 |         //validate
 | ||||||
|         if(credentials.password !== credentials.passwordConfirmation) { |         if (credentials.password !== credentials.passwordConfirmation) { | ||||||
|             console.log("password != passwordConfirmation"); |             console.log("password != passwordConfirmation"); | ||||||
|             setErrorMessage('Password and password-confirmation are not equal.'); |             setErrorMessage('Password and password-confirmation are not equal.'); | ||||||
|             return; |             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 { |         try { | ||||||
|             await postUser(credentials); |             await postUser(credentials); | ||||||
|             setLoginValues({userName: credentials.email, password: credentials.password}); |             setLoginValues({ userName: credentials.email, password: credentials.password }); | ||||||
|             setCredentials(initialState); |             setCredentials(initialState); | ||||||
|             navigate('/'); |             navigate('/'); | ||||||
|         } catch (error) { |         } catch (error) { | ||||||
|  | @ -54,7 +62,7 @@ function RegisterUser({loginValues, setLoginValues}) { | ||||||
|                                 type="text" |                                 type="text" | ||||||
|                                 value={credentials.firstName} |                                 value={credentials.firstName} | ||||||
|                                 onChange={(e) => |                                 onChange={(e) => | ||||||
|                                 setCredentials(prevValues => ({...prevValues, firstName: e.target.value}))} |                                     setCredentials(prevValues => ({ ...prevValues, firstName: e.target.value }))} | ||||||
|                                 required |                                 required | ||||||
|                                 placeholder="Please enter your firstname *" |                                 placeholder="Please enter your firstname *" | ||||||
|                             /> |                             /> | ||||||
|  | @ -65,7 +73,7 @@ function RegisterUser({loginValues, setLoginValues}) { | ||||||
|                                 type="text" |                                 type="text" | ||||||
|                                 value={credentials.lastName} |                                 value={credentials.lastName} | ||||||
|                                 onChange={(e) => |                                 onChange={(e) => | ||||||
|                                 setCredentials(prevValues => ({...prevValues, lastName: e.target.value}))} |                                     setCredentials(prevValues => ({ ...prevValues, lastName: e.target.value }))} | ||||||
|                                 required |                                 required | ||||||
|                                 placeholder="Please enter your lastname *" |                                 placeholder="Please enter your lastname *" | ||||||
|                             /> |                             /> | ||||||
|  | @ -73,10 +81,10 @@ function RegisterUser({loginValues, setLoginValues}) { | ||||||
|                         <div> |                         <div> | ||||||
|                             <label>Email:</label> |                             <label>Email:</label> | ||||||
|                             <input |                             <input | ||||||
|                             type="text" |                                 type="email" | ||||||
|                                 value={credentials.email} |                                 value={credentials.email} | ||||||
|                                 onChange={(e) => |                                 onChange={(e) => | ||||||
|                                 setCredentials(prevValues => ({...prevValues, email: e.target.value}))} |                                     setCredentials(prevValues => ({ ...prevValues, email: e.target.value }))} | ||||||
|                                 required |                                 required | ||||||
|                                 placeholder="Please enter your email" |                                 placeholder="Please enter your email" | ||||||
|                             /> |                             /> | ||||||
|  | @ -86,10 +94,10 @@ function RegisterUser({loginValues, setLoginValues}) { | ||||||
|                         <div> |                         <div> | ||||||
|                             <label>Password:</label> |                             <label>Password:</label> | ||||||
|                             <input |                             <input | ||||||
|                                 type="text" |                                 type="password" | ||||||
|                                 value={credentials.password} |                                 value={credentials.password} | ||||||
|                                 onChange={(e) => |                                 onChange={(e) => | ||||||
|                                     setCredentials(prevValues => ({...prevValues, password: e.target.value}))} |                                     setCredentials(prevValues => ({ ...prevValues, password: e.target.value }))} | ||||||
|                                 required |                                 required | ||||||
|                                 placeholder="Please enter your pwd *" |                                 placeholder="Please enter your pwd *" | ||||||
|                             /> |                             /> | ||||||
|  | @ -97,10 +105,10 @@ function RegisterUser({loginValues, setLoginValues}) { | ||||||
|                         <div> |                         <div> | ||||||
|                             <label>Password confirmation:</label> |                             <label>Password confirmation:</label> | ||||||
|                             <input |                             <input | ||||||
|                                 type="text" |                                 type="password" | ||||||
|                                 value={credentials.passwordConfirmation} |                                 value={credentials.passwordConfirmation} | ||||||
|                                 onChange={(e) => |                                 onChange={(e) => | ||||||
|                                     setCredentials(prevValues => ({...prevValues, passwordConfirmation: e.target.value}))} |                                     setCredentials(prevValues => ({ ...prevValues, passwordConfirmation: e.target.value }))} | ||||||
|                                 required |                                 required | ||||||
|                                 placeholder="Please confirm your pwd *" |                                 placeholder="Please confirm your pwd *" | ||||||
|                             /> |                             /> | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue