cash-stacks/frontend/src/pages/Login/index.tsx

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 { useAppContext } from '../../contexts/AppContext'
import { useStacks } from '../../hooks/getMany/useStacks'

type FormValues = { email: string; password: string }

export const Login = () => {
  const appContext = useAppContext()
  const stacks = useStacks('')

  const [form] = useForm<FormValues>()

  const handleFinish = async ({ email, password }: FormValues) => {
    const res = await appContext.post('/dj-rest-auth/login', {
      email,
      password,
    })
    console.log(res)
  }

  return (
    <div className="login">
      <Form onFinish={handleFinish} form={form}>
        <h1>Log In</h1>
        <FormItem label="email" name="email">
          <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>
  )
}