fix(front)fix auth error reloading page
This commit is contained in:
@@ -4,14 +4,12 @@ import { useNavigate } from "react-router-dom";
|
||||
|
||||
const AuthForm = () => {
|
||||
const [formData, setFormData] = useState({ username: "", password: "" });
|
||||
const [message, setMessage] = useState({ text: "", isError: false });
|
||||
const navigate = useNavigate();
|
||||
|
||||
const API_BASE = "/api";
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setMessage({ text: "", isError: false });
|
||||
|
||||
try {
|
||||
const response = await axios.post(`${API_BASE}/login`, formData);
|
||||
@@ -20,13 +18,16 @@ const AuthForm = () => {
|
||||
if (data.token) {
|
||||
localStorage.setItem("token", data.token);
|
||||
localStorage.setItem("user", JSON.stringify(data.user));
|
||||
localStorage.removeItem("error");
|
||||
navigate("/");
|
||||
}
|
||||
} catch (err) {
|
||||
setMessage({
|
||||
text: err.response?.data?.error || err.message || "Неверный логин или пароль",
|
||||
isError: true,
|
||||
});
|
||||
let errorMessage =
|
||||
err.response?.data?.error || err.message || "Неверный логин или пароль";
|
||||
const errorLog = {
|
||||
message: errorMessage,
|
||||
};
|
||||
localStorage.setItem("error", JSON.stringify(errorLog));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -61,11 +62,9 @@ const AuthForm = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{message.text && (
|
||||
<p
|
||||
className={`text-sm ${message.isError ? "text-red-500" : "text-green-500"}`}
|
||||
>
|
||||
{message.text}
|
||||
{localStorage.getItem("error") && (
|
||||
<p className={`text-sm text-red-500`}>
|
||||
{JSON.parse(localStorage.getItem("error"))["message"] || ""}
|
||||
</p>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,19 +1,11 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Command, Contact } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Header({ onRefresh, onOpenScanner }) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [isLogoutPromptOpen, setIsLogoutPromptOpen] = useState(false);
|
||||
|
||||
const openLogoutPrompt = () => {
|
||||
setIsLogoutPromptOpen(true);
|
||||
};
|
||||
|
||||
const handleLogoutClick = () => {
|
||||
const handleLogout = () => {
|
||||
localStorage.clear();
|
||||
setIsLogoutPromptOpen(false);
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
@@ -62,12 +54,14 @@ export default function Header({ onRefresh, onOpenScanner }) {
|
||||
Привет, {user?.first_name}!
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center justify-center w-5 h-5 gap-2 py-1.5 px-1.5 rounded-full bg-red-500 text-white text-xs font-bold uppercase shrink-0 select-none"
|
||||
onClick={openLogoutPrompt}
|
||||
>
|
||||
x
|
||||
</button>
|
||||
<div className="flex items-center justify-center">
|
||||
<button
|
||||
className="flex items-center justify-center w-5 h-5 ml-2 gap-2 py-2 px-2 rounded-full bg-red-500 text-white text-xs font-bold uppercase shrink-0 select-none"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
x
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user