yo-next-auth/components/auth/login-form.tsx

'use client'

import { infer as zInfer } from 'zod'
import { useState, useTransition } from 'react'
import { useForm } from 'react-hook-form'
import { useSearchParams } from 'next/navigation'
import { zodResolver } from '@hookform/resolvers/zod'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { CardWrapper } from '@/components/auth/card-wrapper'
import { useI18n } from '@/locales/client'
import { Button } from '@/components/ui/button'
import FormError from '@/components/form-error'
import FormSuccess from '@/components/form-success'
import { login } from '@/actions/login'
import { LoginSchema } from '@/schemas'
import { AUTH_REGISTER_URL, AUTH_RESET_PASSWORD_URL } from '@/config/routes'
import Link from 'next/link'

export const LoginForm = () => {
  const t = useI18n()

  const searchParams = useSearchParams()
  const urlError = searchParams.get('error') === 'OAuthAccountNotLinked' ? t('auth.form.error.email_in_use') : ''

  const [showTwoFactor, setShowTwoFactor] = useState<boolean>(false)
  const [error, setError] = useState<string | undefined>('')
  const [success, setSuccess] = useState<string | undefined>('')
  const [isPending, startTransition] = useTransition()

  const form = useForm<zInfer<typeof LoginSchema>>({
    resolver: zodResolver(LoginSchema), defaultValues: {
      email: '', password: '',
    },
  })

  const onSubmit = (values: zInfer<typeof LoginSchema>) => {
    setError('')
    setSuccess('')

    startTransition(() => {
      login(values).then((data) => {
        //@ts-ignore
        if (data?.error) {
          form.reset() //@ts-ignore
          setError(t(data?.error))
        }

        //@ts-ignore
        if (data?.success) {
          form.reset() //@ts-ignore
          setSuccess(t(data?.success))
        }

        //@ts-ignore
        if (data?.twoFactor) { //@ts-ignore
          setShowTwoFactor(data?.twoFactor)
        }
      }).catch((err) => {
        setError('auth.common.something_went_wrong')
        //TODO: do logging
        console.log(err)
      })
    })
  }

  return (<CardWrapper
    headerLabel={t('auth.form.login.header_label')}
    headerTitle={t('auth.title')}
    backButtonLabel={t('auth.form.login.back_button_label')}
    backButtonHref={AUTH_REGISTER_URL}
    showSocial
    continueWithLabel={t('auth.form.label.continue_with')}
  >
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className={showTwoFactor ? 'space-y-6' : 'space-y-2'}
      >
        <div className="space-y-4">
          {showTwoFactor && (
            <FormField control={form.control} name="code"
                       render={({ field }) => (<FormItem>
                         <FormLabel>{t('form.label.two_factor')}</FormLabel>
                         <FormControl>
                           <Input
                             {...field}
                             disabled={isPending}
                             placeholder="¹₂³₄⁵₆"
                           />
                         </FormControl>
                         <FormMessage className="text-xs"/>
                       </FormItem>)}/>
          )}
          {!showTwoFactor && (<>
            <FormField control={form.control} name="email"
                       render={({ field }) => (<FormItem>
                         <FormLabel>{t('form.label.email')}</FormLabel>
                         <FormControl>
                           <Input
                             {...field}
                             disabled={isPending}
                             placeholder={t('form.placeholder.email')}
                             type="email"
                             autoComplete="email"
                           />
                         </FormControl>
                         <FormMessage className="text-xs"/>
                       </FormItem>)}/>
            <FormField control={form.control} name="password"
                       render={({ field }) => (<FormItem>
                         <FormLabel>{t('form.label.password')}</FormLabel>
                         <FormControl>
                           <Input
                             {...field}
                             disabled={isPending}
                             placeholder="******"
                             type="password"
                             autoComplete="current-password"
                           />
                         </FormControl>
                         <Button variant="link" size="sm" asChild
                                 className="mt-0 p-0 items-start font-light text-sky-900">
                           <Link href={AUTH_RESET_PASSWORD_URL}>{t('auth.form.login.reset_password_link_text')}</Link>
                         </Button>
                         <FormMessage className="text-xs"/>
                       </FormItem>)}/>
          </>)}
        </div>
        <FormSuccess message={success}/>
        <FormError message={error || urlError}/>
        <Button type="submit" className="w-full" disabled={isPending}>
          {showTwoFactor ? t('form.button.two_factor') : t('form.button.login')}
        </Button>
      </form>
    </Form>
  </CardWrapper>)
}