add Login Page

youtube_collection_web/src/assets/locales/en-US.json

@@ -1,3 +1,8 @@
 {
-	"hello":"Hello"
+	"hello": "Hello",
+	"login_page": {
+		"login": "Login",
+		"username": "Username",
+		"password": "Password"
+	}
 }

youtube_collection_web/src/assets/locales/zh-CN.json

@@ -1,3 +1,8 @@
 {
-	"hello":"你好"
+	"hello": "你好",
+	"login_page": {
+		"login": "登录",
+		"username": "用户名",
+		"password": "密码"
+	}
 }

youtube_collection_web/src/components/Login.js

@@ -1,16 +1,103 @@
 import React from 'react'
-import { useNavigate } from 'react-router-dom';
-import { Button } from 'antd'
+// import { useNavigate } from 'react-router-dom';
+import { Card, Button, Flex, Form, Input, Space } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+
+const boxStyle = {
+    width: '100%',
+    height: '100vh',
+    borderRadius: 6,
+    border: '1px solid #40a9ff',
+};
+
+const justify = "center"
+const alignItems = "center"
+
+
 
 function Login() {
-    const navigate = useNavigate();
+    // const navigate = useNavigate();
+    const [t] = useTranslation()
+    const [form] = Form.useForm();
     function button_onclick() {
-        navigate('/home')
+        alert(form.getFieldValue('username'))
+        // navigate('/home')
     }
+    const onReset = () => {
+        form.resetFields();
+    };
     return (
+
         <div>
+            <Flex style={boxStyle} justify={justify} align={alignItems}>
+                <Card title={t('login_page.login')} bordered={false} style={{ width: 600 }}>
+                    <Form
+                        name="basic"
+                        labelAlign="left"
+                        labelCol={{
+                            offset: 4,
+                            span: 8,
+                        }}
+                        wrapperCol={{
+                            span: 16,
+                        }}
+                        style={{
+                            maxWidth: 600,
+                        }}
+                        initialValues={{
+                            remember: true,
+                        }}
+                        onFinish={button_onclick}
+                        autoComplete="off"
+                        form={form}
+                    >
+                        <Form.Item
+                            label={t('login_page.username')}
+                            name="username"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: 'Please input your username!',
+                                },
+                            ]}
+                        >
+                            <Input />
+                        </Form.Item>
+
+                        <Form.Item
+                            label={t('login_page.password')}
+                            name="password"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: 'Please input your password!',
+                                },
+                            ]}
+                        >
+                            <Input.Password />
+                        </Form.Item>
+
+                        <Form.Item
+                            wrapperCol={{
+                                offset: 0,
+                                span: 24,
+                            }}
+                        >
+                            <Space>
+                                <Button type="primary" htmlType="submit">
+                                    Submit
+                                </Button>
+                                <Button htmlType="button" onClick={onReset}>
+                                    Reset
+                                </Button>
+                            </Space>
+
+                        </Form.Item>
+                    </Form>
+                </Card>
 
-            <Button onClick={button_onclick}>Home</Button>
+            </Flex>
         </div>
     )
 }