added backend and login portal

3 files changed, 54 insertions, 13 deletions

diff --git a/src/App.js b/src/App.js
index 3784575..36c6c6a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,22 +1,13 @@
-import logo from './logo.svg';
+import React from 'react';
 import './App.css';
+import Login from './components/Login';
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <h1>Admin Panel</h1>
+        <Login />
       </header>
     </div>
   );
diff --git a/src/components/Login.js b/src/components/Login.js
new file mode 100644
index 0000000..620ece0
--- /dev/null
+++ b/src/components/Login.js
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+function Login() {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        try {
+            const response = await axios.post('http://localhost:5000/login', {
+                username, 
+                password,
+            });
+            console.log(response.data);
+            // handle successful login, e.g., redirect to admin panel
+        } catch (error) {
+            setError('Invalid credentialas');
+            console.error('Error logging in', error);
+        }
+    };
+
+    return (
+        <div className="Login">
+            <h2>Login</h2>
+            {error && <p style={{ color: 'red' }}>{error}</p>}
+            <form onSubmit={handleSubmit}>
+                <div>
+                    <lable>Username:</lable>
+                    <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} required />
+                </div>
+                <div>
+                    <lable>Password:</lable>
+                    <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+                </div>
+                <button type="submit">Login</button>
+            </form>
+        </div>
+    );
+}
+
+export default Login;
\ No newline at end of file
diff --git a/src/components/MyComponent.js b/src/components/MyComponent.js
new file mode 100644
index 0000000..b9434ea
--- /dev/null
+++ b/src/components/MyComponent.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function MyComponent() {
+    return <div>This is my component!</div>;
+}
+
+export default MyComponent;
\ No newline at end of file