You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.1 KiB
41 lines
1.1 KiB
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> |
|
) |
|
}
|
|
|