diff --git a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx b/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx index 0c745c656..f4ce00f67 100644 --- a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx +++ b/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx @@ -12,8 +12,7 @@ import type { useForm } from "@homarr/form"; import { useZodForm } from "@homarr/form"; import { showErrorNotification, showSuccessNotification } from "@homarr/notifications"; import { useScopedI18n } from "@homarr/translation/client"; -import type { z } from "@homarr/validation"; -import { validation } from "@homarr/validation"; +import { validation, z } from "@homarr/validation"; interface LoginFormProps { providers: string[]; @@ -22,15 +21,17 @@ interface LoginFormProps { callbackUrl: string; } +const extendedValidation = validation.user.signIn.extend({ provider: z.enum(["credentials", "ldap"]) }); + export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, callbackUrl }: LoginFormProps) => { const t = useScopedI18n("user"); const router = useRouter(); const [isPending, setIsPending] = useState(false); - const form = useZodForm(validation.user.signIn, { + const form = useZodForm(extendedValidation, { initialValues: { name: "", password: "", - credentialType: "basic", + provider: "credentials", }, }); @@ -95,14 +96,14 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c {credentialInputsVisible && ( <> -
void signInAsync("credentials", credentials))}> + void signInAsync(credentials.provider, credentials))}> {providers.includes("credentials") && ( - + {t("action.login.label")} @@ -110,7 +111,7 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c )} {providers.includes("ldap") && ( - + {t("action.login.labelWith", { provider: "LDAP" })} )} @@ -133,18 +134,18 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c interface SubmitButtonProps { isPending: boolean; form: ReturnType FormType>>; - credentialType: "basic" | "ldap"; + provider: "credentials" | "ldap"; } -const SubmitButton = ({ isPending, form, credentialType, children }: PropsWithChildren) => { - const isCurrentProviderActive = form.getValues().credentialType === credentialType; +const SubmitButton = ({ isPending, form, provider, children }: PropsWithChildren) => { + const isCurrentProviderActive = form.getValues().provider === provider; return (