{labels.title}
- {error && (
-
- {labels.errorPrefix}
- {error}
-
- )}
-
{
const response = await loginUser(loginData).unwrap();
const token = response.access_token || response.token;
if (!token) {
- throw new Error("Токен не получен от сервера");
+ throw new Error("Сервер не вернул токен авторизации");
}
localStorage.setItem("access_token", token);
dispatch(setUser({ token }));
await dispatch(checkAuth()).unwrap();
} catch (error) {
- const errorMessage = error?.data?.detail || "Не удалось войти";
+ const errorMessage = error?.data?.detail || "Не удалось войти. Проверьте логин и пароль.";
console.error(error);
dispatch(setError(errorMessage));
notification.error({
diff --git a/web-app/src/Components/Pages/LoginPage/useLoginPageUI.js b/web-app/src/Components/Pages/LoginPage/useLoginPageUI.js
index 765e87b..91af0ef 100644
--- a/web-app/src/Components/Pages/LoginPage/useLoginPageUI.js
+++ b/web-app/src/Components/Pages/LoginPage/useLoginPageUI.js
@@ -1,13 +1,13 @@
-import {useEffect, useRef} from "react";
-import {useNavigate} from "react-router-dom";
-import {useSelector} from "react-redux";
-import {Grid} from "antd";
+import { useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { Grid } from "antd";
-const {useBreakpoint} = Grid;
+const { useBreakpoint } = Grid;
const useLoginPageUI = () => {
const navigate = useNavigate();
- const {user, userData, isLoading} = useSelector((state) => state.auth);
+ const { user, userData, isLoading } = useSelector((state) => state.auth);
const screens = useBreakpoint();
const hasRedirected = useRef(false);
@@ -19,15 +19,32 @@ const useLoginPageUI = () => {
padding: screens.xs ? 10 : 20,
border: "1px solid #ddd",
borderRadius: 8,
+ textAlign: "center",
};
const titleStyle = {
textAlign: "center",
+ marginBottom: 20,
};
- const errorStyle = {
- color: "red",
- marginBottom: 15,
+ const logoStyle = {
+ width: 80,
+ marginBottom: 10,
+ borderRadius: 20,
+ border: "1px solid #ddd",
+ };
+
+ const appNameStyle = {
+ textAlign: "center",
+ color: "#1890ff",
+ marginBottom: 40,
+ };
+
+ const logoBlockStyle = {
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ justifyContent: "center",
};
const labels = {
@@ -37,7 +54,6 @@ const useLoginPageUI = () => {
submitButton: "Войти",
loginRequired: "Пожалуйста, введите логин",
passwordRequired: "Пожалуйста, введите пароль",
- errorPrefix: "Ошибка при входе: ",
};
useEffect(() => {
@@ -52,8 +68,10 @@ const useLoginPageUI = () => {
containerStyle,
formContainerStyle,
titleStyle,
- errorStyle,
+ logoStyle,
+ appNameStyle,
labels,
+ logoBlockStyle,
};
};