Numerum/WEB_logistics
Numerum/WEB_logistics
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

._.

Browse Source
This commit is contained in:
Андрей Дувакин 2024-10-07 18:54:03 +05:00
parent 3979f02c7e
commit 8cacef14de
3 changed files with 52 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Header.css
View File

@ -9,6 +9,11 @@
border-radius: 0.5rem !important; border-radius: 0.5rem !important;
} }
.navbar-nav .nav-item {
display: flex;
align-items: center;
}
.nav-link.active { .nav-link.active {
color: #ffffff !important; color: #ffffff !important;
background-color: #007bff !important; background-color: #007bff !important;

48
src/components/Header.jsx
View File

@ -39,10 +39,10 @@ const Header = () => {
<ul className="navbar-nav mx-auto"> <ul className="navbar-nav mx-auto">
<li className="nav-item"> <li className="nav-item">
<NavLink <NavLink
exact={"false"} className={({ isActive }) =>
className="nav-link" isActive ? "nav-link active" : "nav-link"
}
to="/" to="/"
activeClassName="active"
> >
Заказы Заказы
</NavLink> </NavLink>
@ -51,70 +51,70 @@ const Header = () => {
<> <>
<li className="nav-item"> <li className="nav-item">
<NavLink <NavLink
exact={"false"} className={({ isActive }) =>
className="nav-link" isActive ? "nav-link active" : "nav-link"
}
to="/accessories" to="/accessories"
activeClassName="active"
> >
Компоненты Компоненты
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<NavLink <NavLink
exact={"false"} className={({ isActive }) =>
className="nav-link" isActive ? "nav-link active" : "nav-link"
}
to="/users" to="/users"
activeClassName="active"
> >
Пользователи Пользователи
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<NavLink <NavLink
exact={"false"} className={({ isActive }) =>
className="nav-link" isActive ? "nav-link active" : "nav-link"
}
to="/cities" to="/cities"
activeClassName="active"
> >
Города Города
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<NavLink <NavLink
exact={"false"} className={({ isActive }) =>
className="nav-link" isActive ? "nav-link active" : "nav-link"
}
to="/trucks" to="/trucks"
activeClassName="active"
> >
Грузовики Грузовики
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<NavLink <NavLink
exact={"false"} className={({ isActive }) =>
className="nav-link" isActive ? "nav-link active" : "nav-link"
}
to="/statuses" to="/statuses"
activeClassName="active"
> >
Статусы Статусы
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<NavLink <NavLink
exact={"false"} className={({ isActive }) =>
className="nav-link" isActive ? "nav-link active" : "nav-link"
}
to="/federal_districts" to="/federal_districts"
activeClassName="active"
> >
Федеральные округа Федеральные округа
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<NavLink <NavLink
exact={"false"} className={({ isActive }) =>
className="nav-link" isActive ? "nav-link active" : "nav-link"
}
to="/roles" to="/roles"
activeClassName="active"
> >
Роли Роли
</NavLink> </NavLink>

27
src/pages/Login.jsx
View File

@ -7,11 +7,13 @@ const Login = () => {
const [login, setLogin] = useState(""); const [login, setLogin] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [error, setError] = useState(""); const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const { login: loginContext } = useAuth(); const { login: loginContext } = useAuth();
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
setLoading(true);
try { try {
const userData = await loginUser({ login, password }); const userData = await loginUser({ login, password });
@ -19,6 +21,8 @@ const Login = () => {
navigate("/"); navigate("/");
} catch (error) { } catch (error) {
setError(error.detail ? error.detail : "Ошибка авторизации"); setError(error.detail ? error.detail : "Ошибка авторизации");
} finally {
setLoading(false);
} }
}; };
@ -27,7 +31,7 @@ const Login = () => {
<h2 className="text-center">Вход</h2> <h2 className="text-center">Вход</h2>
{error && <p className="text-danger text-center">{error}</p>} {error && <p className="text-danger text-center">{error}</p>}
<form onSubmit={handleSubmit} className="border p-4 rounded shadow"> <form onSubmit={handleSubmit} className="border p-4 rounded shadow">
<div className="form-group"> <div className="form-group mb-3">
<label htmlFor="login">Логин</label> <label htmlFor="login">Логин</label>
<input <input
type="text" type="text"
@ -38,7 +42,7 @@ const Login = () => {
required required
/> />
</div> </div>
<div className="form-group"> <div className="form-group mb-3">
<label htmlFor="password">Пароль</label> <label htmlFor="password">Пароль</label>
<input <input
type="password" type="password"
@ -49,8 +53,23 @@ const Login = () => {
required required
/> />
</div> </div>
<button type="submit" className="btn btn-primary btn-block"> <button
Войти type="submit"
className="btn btn-primary btn-block"
disabled={loading}
>
{loading ? (
<>
<span
className="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
></span>
Загрузка...
</>
) : (
"Войти"
)}
</button> </button>
</form> </form>
</div> </div>