137 lines
3.1 KiB
React
137 lines
3.1 KiB
React
import React, { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import config from "../config";
|
|
import { useAuth } from "../AuthContext";
|
|
import PageWrapper from "../components/PageWrapper";
|
|
|
|
const styles = {
|
|
form: {
|
|
backgroundColor: "#2a2a2a",
|
|
padding: "2rem",
|
|
borderRadius: "8px",
|
|
boxShadow: "0 0 10px rgba(0,0,0,0.5)",
|
|
width: "100%",
|
|
maxWidth: "350px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "1rem",
|
|
},
|
|
title: {
|
|
textAlign: "center",
|
|
color: "#f2f2f2",
|
|
marginBottom: "1rem",
|
|
},
|
|
input: {
|
|
padding: "0.75rem",
|
|
borderRadius: "4px",
|
|
border: "1px solid #444",
|
|
backgroundColor: "#333",
|
|
color: "#eee",
|
|
outline: "none",
|
|
},
|
|
buttonRow: {
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
gap: "0.5rem",
|
|
},
|
|
button: {
|
|
flex: 1,
|
|
padding: "0.75rem",
|
|
borderRadius: "4px",
|
|
border: "none",
|
|
backgroundColor: "#555",
|
|
color: "#fff",
|
|
cursor: "pointer",
|
|
transition: "background 0.2s ease",
|
|
},
|
|
};
|
|
|
|
const Login = () => {
|
|
const navigate = useNavigate();
|
|
const { login } = useAuth();
|
|
|
|
const [form, setForm] = useState({
|
|
username: "",
|
|
password: "",
|
|
});
|
|
|
|
const handleChange = (e) => {
|
|
setForm({ ...form, [e.target.name]: e.target.value });
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
const payload = {
|
|
username: form.username,
|
|
password: form.password,
|
|
};
|
|
|
|
try {
|
|
const res = await fetch(`${config.apiBaseUrl}/api/Auth/login`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const data = await res.json();
|
|
throw new Error(data.message || "Login failed");
|
|
}
|
|
|
|
const data = await res.json();
|
|
login(data.accessToken);
|
|
|
|
localStorage.setItem("token", data.accessToken);
|
|
localStorage.setItem("role", data.role);
|
|
localStorage.setItem("username", data.username);
|
|
|
|
navigate("/dashboard");
|
|
} catch (err) {
|
|
console.error("Login error:", err);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<PageWrapper center>
|
|
<form onSubmit={handleSubmit} style={styles.form}>
|
|
<h2 style={styles.title}>Login</h2>
|
|
<input
|
|
type="text"
|
|
name="username"
|
|
placeholder="Username"
|
|
value={form.username}
|
|
onChange={handleChange}
|
|
style={styles.input}
|
|
required
|
|
/>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
placeholder="Password"
|
|
value={form.password}
|
|
onChange={handleChange}
|
|
style={styles.input}
|
|
required
|
|
/>
|
|
<div style={styles.buttonRow}>
|
|
<button type="submit" style={styles.button}>
|
|
Login
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate("/register")}
|
|
style={styles.button}
|
|
>
|
|
Register
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</PageWrapper>
|
|
);
|
|
};
|
|
|
|
export default Login;
|