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
3 years ago
|
import { Button, Form, Input } from 'antd'
|
||
|
import FormItem from 'antd/lib/form/FormItem'
|
||
3 years ago
|
import { Link } from 'react-router-dom'
|
||
3 years ago
|
import { User } from '../../types'
|
||
3 years ago
|
|
||
3 years ago
|
import './style.scss'
|
||
3 years ago
|
import { useUserContext } from '../../contexts/UserContext'
|
||
3 years ago
|
|
||
3 years ago
|
type FormValues = Pick<User, 'name'> & { password: string }
|
||
3 years ago
|
|
||
3 years ago
|
export const Login = () => {
|
||
|
const userContext = useUserContext()
|
||
3 years ago
|
|
||
3 years ago
|
const [form] = Form.useForm<FormValues>()
|
||
3 years ago
|
|
||
3 years ago
|
const handleFinish = ({ name, password }: FormValues) => {
|
||
|
userContext.handleLogin(name, password)
|
||
3 years ago
|
}
|
||
|
|
||
|
return (
|
||
|
<div className="login">
|
||
3 years ago
|
<h1>Log In</h1>
|
||
|
<Form onFinish={handleFinish} form={form}>
|
||
|
<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>
|
||
3 years ago
|
</div>
|
||
|
)
|
||
|
}
|