42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { Input } from 'antd'
|
|
import FormItem from 'antd/lib/form/FormItem'
|
|
import { Link } from 'react-router-dom'
|
|
import { User } from '../../types'
|
|
import { useUserContext } from '../../contexts/UserContext'
|
|
import { Form } from '../../elements/Form'
|
|
import { Button } from '../../elements/Button'
|
|
import { useForm } from 'antd/lib/form/Form'
|
|
|
|
type FormValues = Pick<User, 'name'> & { password: string }
|
|
|
|
export const Login = () => {
|
|
const userContext = useUserContext()
|
|
|
|
const [form] = useForm<FormValues>()
|
|
|
|
const handleFinish = ({ name, password }: FormValues) => {
|
|
userContext.handleLogin(name, password)
|
|
}
|
|
|
|
return (
|
|
<div className="login">
|
|
<Form onFinish={handleFinish} form={form}>
|
|
<h1>Log In</h1>
|
|
<FormItem label="Username" name="username">
|
|
<Input />
|
|
</FormItem>
|
|
<FormItem label="Password" name="password">
|
|
<Input type="password" />
|
|
</FormItem>
|
|
|
|
<div className="form-footer">
|
|
<Link to="/sign-up">No Account? Sign Up!</Link>
|
|
<Button type="primary" htmlType="submit">
|
|
Log In!
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
)
|
|
}
|