|
|
|
import { Input } from 'antd'
|
|
|
|
import FormItem from 'antd/lib/form/FormItem'
|
|
|
|
import { Link } from 'react-router-dom'
|
|
|
|
import { Form } from '../../elements/Form'
|
|
|
|
import { Button } from '../../elements/Button'
|
|
|
|
import { useForm } from 'antd/lib/form/Form'
|
|
|
|
import { useUserContext } from '../../contexts/UserContext'
|
|
|
|
|
|
|
|
type FormValues = { username: string; password: string }
|
|
|
|
|
|
|
|
export const Login = () => {
|
|
|
|
const userContext = useUserContext()
|
|
|
|
|
|
|
|
const [form] = useForm<FormValues>()
|
|
|
|
|
|
|
|
const handleFinish = async ({ username, password }: FormValues) => {
|
|
|
|
try {
|
|
|
|
const res = await userContext.handleLogin(username, password)
|
|
|
|
console.log('logging in', res)
|
|
|
|
} catch (err) {
|
|
|
|
console.log('error logging in')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<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>
|
|
|
|
)
|
|
|
|
}
|