Spaces:
Sleeping
Sleeping
'use client'; | |
import React from 'react'; | |
import { Form, Input, Button, Checkbox, Typography, Layout, FormProps } from 'antd'; | |
import './styles.css'; | |
import { useRouter } from 'next/navigation'; | |
const { Title } = Typography; | |
const { Content } = Layout; | |
type FieldType = { | |
username?: string; | |
password?: string; | |
remember?: string; | |
}; | |
const LoginPage = () => { | |
const router = useRouter(); | |
const onFinish: FormProps<FieldType>['onFinish'] = (values) => { | |
console.log('Success:', values); | |
router.push('/dashboard'); | |
}; | |
const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => { | |
console.log('Failed:', errorInfo); | |
}; | |
return ( | |
<Layout className="layout"> | |
<Content className="content"> | |
<div className="login-container"> | |
<Title level={2}>Login</Title> | |
<Form | |
name="basic" | |
initialValues={{ remember: true }} | |
onFinish={onFinish} | |
onFinishFailed={onFinishFailed} | |
autoComplete="off" | |
> | |
<Form.Item | |
name="username" | |
rules={[{ required: true, message: 'Please input your username!' }]} | |
> | |
<Input placeholder="Username" /> | |
</Form.Item> | |
<Form.Item | |
name="password" | |
rules={[{ required: true, message: 'Please input your password!' }]} | |
> | |
<Input.Password placeholder="Password" /> | |
</Form.Item> | |
<Form.Item name="remember" valuePropName="checked"> | |
<Checkbox>Remember me</Checkbox> | |
</Form.Item> | |
<Form.Item> | |
<Button type="primary" htmlType="submit" block> | |
Log in | |
</Button> | |
</Form.Item> | |
</Form> | |
</div> | |
</Content> | |
</Layout> | |
); | |
}; | |
export default LoginPage; | |