._.

src/components/Header.css

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

src/components/Header.jsx

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

src/pages/Login.jsx

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