diff --git a/apps/web/app/routes/auth/login.tsx b/apps/web/app/routes/auth/login.tsx index c4c250f65..70d1511b0 100644 --- a/apps/web/app/routes/auth/login.tsx +++ b/apps/web/app/routes/auth/login.tsx @@ -1,11 +1,14 @@ "use client"; +import { useState } from "react"; +import type { FC } from "react"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { z } from "zod"; import { SiGoogle, SiOkta } from "@icons-pack/react-simple-icons"; import { authClient } from "~/api/auth-client"; import { useAuthConfig } from "~/api/auth-config"; +import { Alert, AlertDescription } from "~/components/ui/alert"; import { Button } from "~/components/ui/button"; import { Card, @@ -48,7 +51,8 @@ const signInEmailPasswordSchema = z.object({ password: z.string(), }); -function LoginEmailPassword() { +const LoginEmailPassword: FC = () => { + const [errorMessage, setErrorMessage] = useState(null); const form = useForm>({ resolver: zodResolver(signInEmailPasswordSchema), defaultValues: { @@ -57,17 +61,29 @@ function LoginEmailPassword() { }, }); - const onSubmit = (data: z.infer) => { - void authClient.signIn.email({ + const onSubmit = async (data: z.infer) => { + setErrorMessage(null); + const { error } = await authClient.signIn.email({ ...data, rememberMe: true, callbackURL: "/workspaces", }); + if (error) + setErrorMessage( + error.code === "INVALID_EMAIL_OR_PASSWORD" && error.message + ? error.message + : "Failed to sign in", + ); }; return (
+ {errorMessage && ( + + {errorMessage} + + )} ); -} +}; export default function Login() { const authConfig = useAuthConfig();