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