feat: add login page

2025-06-09 16:59:31 +05:00
parent 0bba6e7f54
commit e0dca78ef3
2 changed files with 106 additions and 0 deletions
--- a/client/src/pages/LoginPage.tsx
+++ b/client/src/pages/LoginPage.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { Form, Input, Button, Typography } from 'antd';
+import {
+  EyeInvisibleOutlined,
+  EyeTwoTone,
+  UserOutlined,
+} from '@ant-design/icons';
+import { AuthService } from '../services/auth';
+import { Auth } from '../types/auth';
+import { useNavigate } from 'react-router-dom';
+
+const { Text, Link } = Typography;
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+
+  const onFinish = async (values: any) => {
+    await AuthService.login(values as Auth);
+    navigate('/');
+  };
+
+  return (
+    <div
+      style={{
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <div
+        style={{
+          width: '100%',
+          maxWidth: 472,
+          padding: 24,
+          background: '#fff',
+          textAlign: 'center',
+        }}
+      >
+        <div style={{ marginBottom: 32 }}>
+          <img
+            src="./icons/logo.svg"
+            alt="logo"
+            style={{ width: 128, height: 128, marginBottom: 16 }}
+          />
+        </div>
+
+        <Form name="login" onFinish={onFinish} layout="vertical">
+          <Form.Item
+            name="login"
+            rules={[{ required: true, message: 'Введите login' }]}
+          >
+            <Input size="large" placeholder="Логин" prefix={<UserOutlined />} />
+          </Form.Item>
+
+          <Form.Item
+            name="password"
+            rules={[{ required: true, message: 'Введите пароль' }]}
+          >
+            <Input.Password
+              size="large"
+              placeholder="Пароль"
+              iconRender={(visible) =>
+                visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
+              }
+            />
+          </Form.Item>
+
+          <Form.Item>
+            <Button
+              type="primary"
+              htmlType="submit"
+              block
+              size="large"
+              style={{
+                backgroundColor: '#C2DA3D',
+                borderColor: '#C2DA3D',
+                color: '#000',
+              }}
+            >
+              Войти
+            </Button>
+          </Form.Item>
+
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            Нажимая кнопку Войти, Вы полностью принимаете{' '}
+            <Link href="/offer" target="_blank">
+              Публичную оферту
+            </Link>{' '}
+            и{' '}
+            <Link href="/privacy" target="_blank">
+              Политику обработки персональных данных
+            </Link>
+          </Text>
+        </Form>
+
+        <div style={{ marginTop: 256 }}>
+          <Link href="/forgot-password">Забыли пароль?</Link>
+        </div>
+      </div>
+    </div>
+  );
+}