добавил стили, перделал ворму

front/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

front/src/index.css

@@ -1,5 +1,7 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -11,15 +13,14 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  --purple: 7700FF
+  --black
 }
 
-a {
+#root {
-  font-weight: 500;
+  max-width: 1280px;
-  color: #646cff;
+  margin: 0 auto;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
 }
 
 body {
@@ -28,14 +29,14 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(135deg, #7700ff 0%, #ff4f12 100%);;
+
 }
 
-h1 {
+/*button {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
@@ -52,9 +53,9 @@ button:hover {
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
-}
+}*/
 
-@media (prefers-color-scheme: light) {
+/*@media (prefers-color-scheme: light) {
   :root {
     color: #213547;
     background-color: #ffffff;
@@ -65,4 +66,22 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
+}*/
+
+button {
+  font-family: inherit;
+}
+
+input {
+  font-family: inherit;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
 }

front/src/main.tsx

@@ -1,7 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import App from './App.tsx'
 import { BrowserRouter } from 'react-router'
 import AppRoutes from './app/routes.tsx'
 import { Provider } from 'react-redux'

front/src/pages/LoginPage/LoginPage.css

@@ -0,0 +1,290 @@
+.login-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.login-logo {
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.login-logo-image {
+  max-width: 200px;
+  max-height: 80px;
+}
+
+.login-form-card {
+  width: 100%;
+  max-width: 400px;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.15);
+  padding: 40px;
+  border: 1px solid rgba(16, 24, 40, 0.1);
+}
+
+.login-title {
+  text-align: center;
+  margin-bottom: 32px;
+  color: #101828;
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 1.2;
+}
+
+.login-error-alert {
+  background: #fff2f0;
+  border: 1px solid #ffccc7;
+  color: #a8071a;
+  padding: 14px 16px;
+  border-radius: 10px;
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.login-error-alert:before {
+  content: '⚠️';
+  font-size: 16px;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-label {
+  font-weight: 600;
+  color: #101828;
+  font-size: 14px;
+  letter-spacing: -0.2px;
+}
+
+.form-input {
+  padding: 14px 16px;
+  border: 2px solid #e4e7ec;
+  border-radius: 10px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  background: #ffffff;
+  color: #101828;
+}
+
+.form-input::placeholder {
+  color: #98a2b3;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #7700ff;
+  box-shadow: 0 0 0 4px rgba(119, 0, 255, 0.1);
+}
+
+.form-input.error {
+  border-color: #ff4f12;
+  box-shadow: 0 0 0 4px rgba(255, 79, 18, 0.1);
+}
+
+.form-error {
+  color: #ff4f12;
+  font-size: 13px;
+  margin-top: 6px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.form-error:before {
+  content: '•';
+  font-size: 16px;
+}
+
+.checkbox-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  padding: 8px 0;
+}
+
+.checkbox-input {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border: 2px solid #d0d5dd;
+  border-radius: 6px;
+  background: #ffffff;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.checkbox-input:checked {
+  background: #7700ff;
+  border-color: #7700ff;
+}
+
+.checkbox-input:checked:after {
+  content: '✓';
+  position: absolute;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.checkbox-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(119, 0, 255, 0.1);
+}
+
+.checkbox-label {
+  font-size: 14px;
+  color: #101828;
+  cursor: pointer;
+  font-weight: 500;
+  user-select: none;
+}
+
+.login-submit-button {
+  background: linear-gradient(135deg, #7700ff 0%, #ff4f12 100%);
+  color: #ffffff;
+  border: none;
+  padding: 16px;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 16px;
+  letter-spacing: -0.2px;
+  position: relative;
+  overflow: hidden;
+}
+
+.login-submit-button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(119, 0, 255, 0.3);
+}
+
+.login-submit-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.login-submit-button:disabled {
+  background: #d0d5dd;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.login-submit-button.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid transparent;
+  border-top: 2px solid #ffffff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.login-forgot-password {
+  text-align: center;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid #eaecf0;
+}
+
+.forgot-password-link {
+  color: #7700ff;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 600;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 8px 16px;
+  border-radius: 8px;
+}
+
+.forgot-password-link:hover {
+  color: #ff4f12;
+  background: rgba(119, 0, 255, 0.05);
+  text-decoration: none;
+}
+
+.forgot-password-link:disabled {
+  color: #98a2b3;
+  cursor: not-allowed;
+  background: none;
+}
+
+/* Анимация появления формы */
+.login-form-card {
+  animation: slideUp 0.6s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Адаптивность */
+@media (max-width: 480px) {
+  .login-form-card {
+    padding: 32px 24px;
+    margin: 0 16px;
+  }
+  
+  .login-logo {
+    margin-bottom: 32px;
+  }
+  
+  .login-logo-image {
+    max-width: 160px;
+    max-height: 60px;
+  }
+  
+  .login-title {
+    font-size: 24px;
+    margin-bottom: 28px;
+  }
+  
+  .form-input {
+    padding: 12px 14px;
+  }
+}

front/src/pages/LoginPage/LoginPage.tsx

@@ -1,33 +1,135 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Form, Input, Button, Checkbox, Alert, Card, Spin, Image } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import { useAppDispatch, useAppSelector } from '../../app/hooks';
 import { loginThunk } from "../../features/auth/authThunks";
 import { clearError } from '../../features/auth/authSlice';
+import './LoginPage.css'
 
-interface LoginForm {
+interface FormData {
   email: string;
   password: string;
   rememberMe: boolean;
 }
 
+interface FormErrors {
+  email?: string;
+  password?: string;
+}
+
 const LoginPage: React.FC = () => {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const { loading, error, token } = useAppSelector((state) => state.auth);
   
-  const [form] = Form.useForm();
+  const [formData, setFormData] = useState<FormData>({
+    email: '',
+    password: '',
+    rememberMe: false
+  });
   
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [touched, setTouched] = useState<{ email: boolean; password: boolean }>({
+    email: false,
+    password: false
+  });
+
+  // Редирект если пользователь уже авторизован
   useEffect(() => {
     if (token) {
-      navigate('/');
+      navigate('/data-collection');
     }
   }, [token, navigate]);
 
-  const handleSubmit = async (values: LoginForm) => {
+  // Валидация email
+  const validateEmail = (email: string): string | undefined => {
+    if (!email) {
+      return 'Пожалуйста, введите email';
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      return 'Введите корректный email адрес';
+    }
+    return undefined;
+  };
+
+  // Валидация пароля
+  const validatePassword = (password: string): string | undefined => {
+    if (!password) {
+      return 'Пожалуйста, введите пароль';
+    }
+    if (password.length < 8) {
+      return 'Пароль должен содержать минимум 8 символов';
+    }
+    return undefined;
+  };
+
+  // Общая валидация формы
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {
+      email: validateEmail(formData.email),
+      password: validatePassword(formData.password)
+    };
+    
+    setErrors(newErrors);
+    return !newErrors.email && !newErrors.password;
+  };
+
+  // Обработчик изменения полей
+  const handleInputChange = (field: keyof FormData) => (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = field === 'rememberMe' ? e.target.checked : e.target.value;
+    
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+
+    // Валидация при изменении (только для touched полей)
+    if (touched[field as keyof typeof touched]) {
+      if (field === 'email') {
+        setErrors(prev => ({
+          ...prev,
+          email: validateEmail(value as string)
+        }));
+      } else if (field === 'password') {
+        setErrors(prev => ({
+          ...prev,
+          password: validatePassword(value as string)
+        }));
+      }
+    }
+  };
+
+  // Обработчик потери фокуса
+  const handleBlur = (field: keyof typeof touched) => () => {
+    setTouched(prev => ({ ...prev, [field]: true }));
+    
+    // Валидация при потере фокуса
+    if (field === 'email') {
+      setErrors(prev => ({
+        ...prev,
+        email: validateEmail(formData.email)
+      }));
+    } else if (field === 'password') {
+      setErrors(prev => ({
+        ...prev,
+        password: validatePassword(formData.password)
+      }));
+    }
+  };
+
+  // Обработчик отправки формы
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Помечаем все поля как touched при отправке
+    setTouched({ email: true, password: true });
+    
+    if (validateForm()) {
       try {
-      const result = await dispatch(loginThunk(values)).unwrap();
+        const result = await dispatch(loginThunk(formData)).unwrap();
         
         if (result.token) {
           navigate('/data-collection');
@@ -35,6 +137,7 @@ const LoginPage: React.FC = () => {
       } catch (error) {
         console.error('Login error:', error);
       }
+    }
   };
 
   const handleForgotPassword = () => {
@@ -43,106 +146,125 @@ const LoginPage: React.FC = () => {
 
   return (
     <div className="login-container">
+      {/* Логотип компании */}
       <div className="login-logo">
-        <Image
+        <img
-          src="/logo.png"
+          src="https://www.company.rt.ru/about/identity/files/RGB_RT_logo-horizontal_main_ru.png"
           alt="Company Logo"
-          preview={false}
           className="login-logo-image"
-          fallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iODAiIGZpbGw9IiNmZmYiLz48dGV4dCB4PSIxMDAiIHk9IjQwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkxPR08gQ09NUEFOWTwvdGV4dD48L3N2Zz4="
+          onError={(e) => {
+            e.currentTarget.src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iODAiIGZpbGw9IiNmZmYiLz48dGV4dCB4PSIxMDAiIHk9IjQwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkxPR08gQ09NUEFOWTwvdGV4dD48L3N2Zz4=";
+          }}
         />
       </div>
 
-      <Card
+      {/* Форма авторизации */}
-        className="login-form-card"
+      <div className="login-form-card">
-        
-      >
         <h2 className="login-title">
           Вход в систему
         </h2>
 
+        {/* Блок ошибок */}
         {error && (
-          <Alert
+          <div className="login-error-alert">
-            message={error}
+            {error}
-            type="error"
+            <button 
-            showIcon
+              onClick={() => dispatch(clearError())}
-            closable
+              style={{ 
-            onClose={() => dispatch(clearError())}
+                marginLeft: 'auto', 
-            className="login-error-alert"
+                background: 'none', 
-          />
+                border: 'none', 
+                cursor: 'pointer',
+                fontSize: '16px'
+              }}
+            >
+              ×
+            </button>
+          </div>
         )}
 
-        <Form
+        <form className="login-form" onSubmit={handleSubmit}>
-          form={form}
+          {/* Поле ввода email */}
-          name="login"
+          <div className="form-group">
-          onFinish={handleSubmit}
+            <label htmlFor="email" className="form-label">
-          autoComplete="off"
+              Email
-          layout="vertical"
+            </label>
-        >
+            <input
-          <Form.Item
+              id="email"
-            name="email"
+              type="email"
-            label="Email"
+              className={`form-input ${errors.email ? 'error' : ''}`}
-            rules={[
-              { required: true, message: 'Пожалуйста, введите email' },
-              { type: 'email', message: 'Введите корректный email адрес' },
-            ]}
-            className="login-form-item"
-          >
-            <Input
-              prefix={<UserOutlined />}
               placeholder="Введите email"
-              size="large"
+              value={formData.email}
-            />
+              onChange={handleInputChange('email')}
-          </Form.Item>
+              onBlur={handleBlur('email')}
-
-          <Form.Item
-            name="password"
-            label="Пароль"
-            rules={[
-              { required: true, message: 'Пожалуйста, введите пароль' },
-              { min: 8, message: 'Пароль должен содержать минимум 8 символов' },
-            ]}
-            className="login-form-item"
-          >
-            <Input.Password
-              prefix={<LockOutlined />}
-              placeholder="Введите пароль"
-              size="large"
-            />
-          </Form.Item>
-
-          <Form.Item 
-            name="rememberMe" 
-            valuePropName="checked"
-            className="login-form-item"
-          >
-            <Checkbox>Запомнить меня</Checkbox>
-          </Form.Item>
-
-          <Form.Item className="login-form-item">
-            <Button
-              type="primary"
-              htmlType="submit"
-              size="large"
-              block
               disabled={loading}
-              className="login-submit-button"
+            />
-            >
+            {errors.email && (
-              {loading ? <Spin size="small" /> : 'Войти'}
+              <div className="form-error">{errors.email}</div>
-            </Button>
+            )}
-          </Form.Item>
+          </div>
-        </Form>
 
+          {/* Поле ввода пароля */}
+          <div className="form-group">
+            <label htmlFor="password" className="form-label">
+              Пароль
+            </label>
+            <input
+              id="password"
+              type="password"
+              className={`form-input ${errors.password ? 'error' : ''}`}
+              placeholder="Введите пароль"
+              value={formData.password}
+              onChange={handleInputChange('password')}
+              onBlur={handleBlur('password')}
+              disabled={loading}
+            />
+            {errors.password && (
+              <div className="form-error">{errors.password}</div>
+            )}
+          </div>
+
+          {/* Чекбокс "Запомнить меня" */}
+          <label className="checkbox-group">
+            <input
+              type="checkbox"
+              className="checkbox-input"
+              checked={formData.rememberMe}
+              onChange={handleInputChange('rememberMe')}
+              disabled={loading}
+            />
+            <span className="checkbox-label">Запомнить меня</span>
+          </label>
+
+          {/* Кнопка входа */}
+          <button
+            type="submit"
+            disabled={loading}
+            className={`login-submit-button ${loading ? 'loading' : ''}`}
+          >
+            {loading ? (
+              <>
+                <div className="spinner"></div>
+                Вход...
+              </>
+            ) : (
+              'Войти'
+            )}
+          </button>
+        </form>
+
+        {/* Ссылка "Забыли пароль?" */}
         <div className="login-forgot-password">
-          <Button
+          <button
-            type="link"
+            type="button"
             onClick={handleForgotPassword}
-            className="login-forgot-password-button"
+            className="forgot-password-link"
+            disabled={loading}
           >
             Забыли пароль?
-          </Button>
+          </button>
+        </div>
       </div>
-      </Card>
     </div>
   );
 };