chore(login): Add error message for invalid password

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<string | null>(null);
   const form = useForm<z.infer<typeof signInEmailPasswordSchema>>({
     resolver: zodResolver(signInEmailPasswordSchema),
     defaultValues: {
@@ -57,17 +61,29 @@ function LoginEmailPassword() {
     },
   });
 
-  const onSubmit = (data: z.infer<typeof signInEmailPasswordSchema>) => {
-    void authClient.signIn.email({
+  const onSubmit = async (data: z.infer<typeof signInEmailPasswordSchema>) => {
+    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 (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        {errorMessage && (
+          <Alert variant="destructive">
+            <AlertDescription>{errorMessage}</AlertDescription>
+          </Alert>
+        )}
         <FormField
           control={form.control}
           name="email"
@@ -111,7 +127,7 @@ function LoginEmailPassword() {
       </form>
     </Form>
   );
-}
+};
 
 export default function Login() {
   const authConfig = useAuthConfig();