src/constants/index.js

@@ -0,0 +1,3 @@
+export default {
+    baseUrl: "http://192.168.68.150:8469"
+}

src/pages/login/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import './style.css';
+
+import { baseUrl } from "../../constants";
+
+class Login extends React.Component {
+  state = {
+    username: '',
+    password: ''
+  };
+
+  handleChange = (event) => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+    const { username, password } = this.state;
+    fetch(`${baseUrl}/auth/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ username, password })
+    })
+      .then(response => response.json())
+      .then(data => {
+        if (data.token) {
+          // store the token in local storage or state
+          localStorage.setItem('token', data.token);
+          this.props.history.push('/dashboard');
+        } else {
+          // handle login failure
+          alert('Invalid username or password');
+        }
+      })
+      .catch(error => console.error(error));
+  };
+
+  render() {
+    return (
+      <div className="login-page">
+        <div className="login-container">
+          <h2>Login</h2>
+          <form onSubmit={this.handleSubmit} className="login-form">
+            <div>
+            <label htmlFor="username">Username:</label>
+            <input
+              type="text"
+              name="username"
+              value={this.state.username}
+              onChange={this.handleChange}
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="password">Password:</label>
+            <input
+              type="password"
+              name="password"
+              value={this.state.password}
+              onChange={this.handleChange}
+              required
+            />
+          </div>
+          <button type="submit">Login</button>
+        </form>
+      </div>
+      </div>
+    );
+  }
+}
+
+export default Login;

src/pages/login/style.css

@@ -0,0 +1,50 @@
+.login-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f4f4f4;
+}
+
+.login-container {
+  background-color: #fff;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 300px;
+  text-align: center;
+}
+
+.login-container h2 {
+  margin-bottom: 1rem;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.login-form label {
+  margin-top: 0.5rem;
+}
+
+.login-form input {
+  padding: 0.75rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.login-form button {
+  background-color: #28a745;
+  color: white;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 1rem;
+}
+
+.login-form button:hover {
+  background-color: #218838;
+}