Files
36-character-flower/src/features/auth/components/desktop-login-form.tsx

46 lines
1.3 KiB
TypeScript

import { useController } from 'react-hook-form'
import { useModalStore } from '@/store'
import { useLoginForm } from '../hooks/use-login-form'
import { DesktopLoginFormView } from './desktop-login-form-view'
interface DesktopLoginFormProps {
onSuccess?: () => void
}
export function DesktopLoginForm({ onSuccess }: DesktopLoginFormProps) {
const { form, isSubmitting, onSubmit, submitError } = useLoginForm({
onSuccess,
})
const setModalOpen = useModalStore((state) => state.setModalOpen)
const usernameField = useController({
control: form.control,
name: 'username',
})
const passwordField = useController({
control: form.control,
name: 'password',
})
function handleSwitchToRegister() {
setModalOpen('desktopLogin', false)
setModalOpen('desktopRegister', true)
}
return (
<DesktopLoginFormView
username={usernameField.field.value ?? ''}
password={passwordField.field.value ?? ''}
errors={{
password: form.formState.errors.password?.message,
username: form.formState.errors.username?.message,
}}
isSubmitting={isSubmitting}
onPasswordChange={passwordField.field.onChange}
onSubmit={onSubmit}
onSwitchToRegister={handleSwitchToRegister}
onUsernameChange={usernameField.field.onChange}
submitError={submitError}
/>
)
}