Changeset 303f51d for my-react-app/src/components

Timestamp:

03/03/24 21:45:56 (15 months ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

b78c0c1

Parents:

a3d63eb

Message:

RetaurantServiceImpl problemi
isAvailable od tableEntity...

File:

• my-react-app/src/components/Login.js (modified) (1 diff)

my-react-app/src/components/Login.js

@@ -1 @@
-import React, {useState} from 'react';
-import {useNavigate} from 'react-router-dom';
-const AUTH_TOKEN = 'auth_token';
+// Login.js
+import React, { useState } from 'react';
+import axios from 'axios';
+import {useNavigate} from "react-router-dom";
 
-const loginForm = (props) => {
-    const[auth, setAuth] = useState({});
+const Login = ({ onLogin }) => {
     const navigate = useNavigate();
+    const [credentials, setCredentials] = useState({ username: '', password: '' });
 
-    const login = (e) => {
-        const auth = {
-            "username":e.target.username.value,
-            "password":e.target.password.value
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setCredentials({ ...credentials, [name]: value });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            const response = await axios.post('http://localhost:8080/api/login', {
+                email: credentials.username,
+                password: credentials.password
+            });
+            const { token } = response.data;
+            // Store token securely (e.g., using HTTP cookies)
+            localStorage.setItem('token', token);
+
+            navigate("/")
+        } catch (error) {
+            // Handle login failure
+            console.error('Login failed:', error);
         }
+    };
 
-        props.login(auth, (response) => {
-            debugger;
-            localStorage.setItem(AUTH_TOKEN, response.data)
-            navigate("/");
-        })
-    }
-
-    const onChangeHandler = (e) => {
-        const name = e.target.name;
-        const value = e.target.value;
-        setAuth({name:value});
-    }
 
     return (
         <div>
-            <form onSubmit={login}>
-                <div className="row form-group">
-                    <div className="col-md-6 font-weight-bold"> Корисничко име:</div>
-                    <div className="col-md-6">
-                        <input name={"username"} onChange={onChangeHandler} defaultValue={auth.username} type="text"
-                               className="form-control"/>
-                    </div>
+            <h2>Login</h2>
+            <form onSubmit={handleSubmit}>
+                <div>
+                    <label>Username:</label>
+                    <input
+                        type="text"
+                        name="username"
+                        value={credentials.username}
+                        onChange={handleChange}
+                    />
                 </div>
-                <div className="row form-group">
-                    <div className="col-md-6 font-weight-bold"> Лозинка:</div>
-                    <div className="col-md-6">
-                        <input name={"password"} onChange={onChangeHandler} defaultValue={auth.password} type="password"
-                               className="form-control"
-                               title="Лозинка"/>
-                    </div>
+                <div>
+                    <label>Password:</label>
+                    <input
+                        type="password"
+                        name="password"
+                        value={credentials.password}
+                        onChange={handleChange}
+                    />
                 </div>
-                <div className="col-md-12 text-right">
-
-                    <button type="submit" className="btn btn-primary" title="Зачувај">
-                        <i className="fa fa-fw fa-user"></i> Логин
-                    </button>
-                </div>
+                <button type="submit">Login</button>
             </form>
         </div>
-    )
-}
+    );
+};
 
-export default loginForm;
+export default Login;