login in frontend

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

@@ -69,3 +69,37 @@ export const postUser = async (content) => {
         throw new Error('Failed to save user. ' || error.message);
     }
 };
+
+export const loginUser = async (loginValue) => {
+    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 response = await fetch(`${API_URL}/users/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                email: `${loginValue.email}`,
+                password: `${loginValue.password}`,
+            })
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json;
+            throw new Error(errorData.message || 'Server response failed.');
+        }
+        const data = response;
+        console.log('User successfully logged in:', data);
+        return true;
+    } 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/Layout.js

@@ -4,7 +4,7 @@ import { Outlet, Link } from "react-router-dom";
  * Layout
  * @author Peter Rutschmann
  */
-const Layout = ({loginValues}) => {
+const Layout = ({ loginValues }) => {
     return (
         <>
             <nav>
@@ -12,18 +12,18 @@ const Layout = ({loginValues}) => {
                 <p>{loginValues.email === '' ? 'No user logged in' : 'user:' + loginValues.email}</p>
                 <ul>
                     <li><a href="/">Secrets</a>
-                    <ul>
-                        <li><Link to="/secret/secrets">my secrets</Link></li>
-                        <li><Link to="/secret/newcredential">new credential</Link></li>
-                        <li><Link to="/secret/newcreditcard">new credit-card</Link></li>
-                        <li><Link to="/secret/newnote">new note</Link></li>
-                    </ul>
+                        <ul>
+                            <li><Link to="/secret/secrets">my secrets</Link></li>
+                            <li><Link to="/secret/newcredential">new credential</Link></li>
+                            <li><Link to="/secret/newcreditcard">new credit-card</Link></li>
+                            <li><Link to="/secret/newnote">new note</Link></li>
+                        </ul>
                     </li>
                     <li><a href="/">User</a>
-                    <ul>
-                        <li><Link to="/user/login">login</Link></li>
-                        <li><Link to="/user/register">register</Link></li>
-                    </ul>
+                        <ul>
+                            <li><Link to="/user/login">login</Link></li>
+                            <li><Link to="/user/register">register</Link></li>
+                        </ul>
                     </li>
                     <li><a href="/">Admin</a>
                         <ul>
@@ -38,8 +38,8 @@ const Layout = ({loginValues}) => {
                     </li>
                 </ul>
             </nav>
-            <hr/>
-            <Outlet/>
+            <hr />
+            <Outlet />
         </>
     )
 };

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

@@ -1,16 +1,27 @@
 import { useNavigate } from 'react-router-dom';
+import { loginUser } from '../../comunication/FetchUser';
 
 /**
  * LoginUser
  * @author Peter Rutschmann
  */
-function LoginUser({loginValues, setLoginValues}) {
+function LoginUser({ loginValues, setLoginValues }) {
     const navigate = useNavigate();
 
     const handleSubmit = async (e) => {
         e.preventDefault();
-        console.log(loginValues);
-        navigate('/')
+
+        try {
+            let isLoginValid = false
+            isLoginValid = await loginUser(loginValues);
+            console.log(loginValues);
+            if (isLoginValid) {
+                setLoginValues({ userName: loginValues.email, password: loginValues.password });
+                navigate('/');
+            }
+        } catch (error) {
+            console.error('Failed to fetch to server:', error.message);
+        }
     };
 
     return (
@@ -25,7 +36,7 @@ function LoginUser({loginValues, setLoginValues}) {
                                 type="text"
                                 value={loginValues.email}
                                 onChange={(e) =>
-                                    setLoginValues(prevValues => ({...prevValues, email: e.target.value}))}
+                                    setLoginValues(prevValues => ({ ...prevValues, email: e.target.value }))}
                                 required
                                 placeholder="Please enter your email *"
                             />
@@ -36,7 +47,7 @@ function LoginUser({loginValues, setLoginValues}) {
                                 type="text"
                                 value={loginValues.password}
                                 onChange={(e) =>
-                                    setLoginValues(prevValues => ({...prevValues, password: e.target.value}))}
+                                    setLoginValues(prevValues => ({ ...prevValues, password: e.target.value }))}
                                 required
                                 placeholder="Please enter your password *"
                             />