Compare commits
No commits in common. "0b9cfbcd2ddfd504951d92cb639e65a67ca10a5f" and "5ac961330ee792e54f83ef698a2b027a69deecce" have entirely different histories.
0b9cfbcd2d
...
5ac961330e
|
@ -1,4 +0,0 @@
|
||||||
package ch.bbw.pr.tresorbackend.controller;
|
|
||||||
|
|
||||||
public class RecaptchaController {
|
|
||||||
}
|
|
|
@ -103,27 +103,3 @@ 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,7 +1,5 @@
|
||||||
import React, { useState } from 'react';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { loginUser, captchaCheck } from '../../comunication/FetchUser';
|
import { loginUser } from '../../comunication/FetchUser';
|
||||||
import ReCAPTCHA from 'react-google-recaptcha';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* LoginUser
|
* LoginUser
|
||||||
|
@ -9,26 +7,15 @@ import ReCAPTCHA from 'react-google-recaptcha';
|
||||||
*/
|
*/
|
||||||
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);
|
||||||
if (isLoginValid || captchaData.success) {
|
console.log(loginValues);
|
||||||
|
if (isLoginValid) {
|
||||||
setLoginValues({ userName: loginValues.email, password: loginValues.password });
|
setLoginValues({ userName: loginValues.email, password: loginValues.password });
|
||||||
navigate('/');
|
navigate('/');
|
||||||
}
|
}
|
||||||
|
@ -46,7 +33,7 @@ function LoginUser({ loginValues, setLoginValues }) {
|
||||||
<div>
|
<div>
|
||||||
<label>Email:</label>
|
<label>Email:</label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="text"
|
||||||
value={loginValues.email}
|
value={loginValues.email}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setLoginValues(prevValues => ({ ...prevValues, email: e.target.value }))}
|
setLoginValues(prevValues => ({ ...prevValues, email: e.target.value }))}
|
||||||
|
@ -57,7 +44,7 @@ function LoginUser({ loginValues, setLoginValues }) {
|
||||||
<div>
|
<div>
|
||||||
<label>Password:</label>
|
<label>Password:</label>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="text"
|
||||||
value={loginValues.password}
|
value={loginValues.password}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setLoginValues(prevValues => ({ ...prevValues, password: e.target.value }))}
|
setLoginValues(prevValues => ({ ...prevValues, password: e.target.value }))}
|
||||||
|
@ -67,10 +54,6 @@ 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,23 +25,15 @@ 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) {
|
||||||
|
@ -55,49 +47,49 @@ function RegisterUser({ loginValues, setLoginValues }) {
|
||||||
<h2>Register user</h2>
|
<h2>Register user</h2>
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<section>
|
<section>
|
||||||
<aside>
|
<aside>
|
||||||
<div>
|
<div>
|
||||||
<label>Firstname:</label>
|
<label>Firstname:</label>
|
||||||
<input
|
<input
|
||||||
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 *"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label>Lastname:</label>
|
<label>Lastname:</label>
|
||||||
<input
|
<input
|
||||||
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 *"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label>Email:</label>
|
<label>Email:</label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="text"
|
||||||
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"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
<aside>
|
<aside>
|
||||||
<div>
|
<div>
|
||||||
<label>Password:</label>
|
<label>Password:</label>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="text"
|
||||||
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 *"
|
||||||
/>
|
/>
|
||||||
|
@ -105,10 +97,10 @@ function RegisterUser({ loginValues, setLoginValues }) {
|
||||||
<div>
|
<div>
|
||||||
<label>Password confirmation:</label>
|
<label>Password confirmation:</label>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="text"
|
||||||
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