From eb1b00e40f98ddf345cd96f0a28e474d60ab2711 Mon Sep 17 00:00:00 2001
From: Varun Raj <mailme@varunraj.in>
Date: Wed, 4 Sep 2024 20:07:59 +0530
Subject: [PATCH] fix: added authentication error message block

Signed-off-by: Varun Raj <mailme@varunraj.in>
---
 src/components/auth/LoginForm.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx
index d0bb04d..9c7f21a 100644
--- a/src/components/auth/LoginForm.tsx
+++ b/src/components/auth/LoginForm.tsx
@@ -15,6 +15,8 @@ import { loginUser } from "@/handlers/api/user.handler"
 import { useConfig } from "@/contexts/ConfigContext"
 import { IUser } from "@/types/user"
 import Head from "next/head"
+import { Tooltip } from "../ui/tooltip"
+import { set } from "date-fns"
 
 export const description =
   "A login form with email and password. There's an option to login with Google and a link to sign up if you don't have an account."
@@ -40,6 +42,7 @@ export function LoginForm(
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { 
     e.preventDefault() 
     setLoading(true)
+    setErrorMessage(null)
     loginUser(formData.email, formData.password)
     .then(onLogin)
     .catch((error) => {
@@ -71,6 +74,11 @@ export function LoginForm(
           </CardHeader>
           <CardContent>
             <form className="grid gap-4" onSubmit={handleSubmit}>
+              {errorMessage && (
+                <div className="border text-center border-red-500 text-red-500 p-2 rounded-lg text-xs" role="alert">
+                  <p>{errorMessage}</p>
+                </div>
+              )}
               <div className="grid gap-2">
                 <Label htmlFor="email">Email</Label>
                 <Input
@@ -93,9 +101,9 @@ export function LoginForm(
               <p className="text-xs text-gray-400 text-center">
                 Or Use <code>IMMICH_API_KEY</code> in your environment to use API Key instead of password.
               </p>
-              {/* <Button variant="outline" className="w-full" disabled={loading}>
-                Login with OAuth
-              </Button> */}
+              <Button variant="outline" className="w-full" disabled={true}>
+                Login with OAuth (Comming Soon)
+              </Button>
             </form>
           </CardContent>
         </Card>