feat: loading and error feed back on login form

src/components/login-form.tsx

@@ -8,6 +8,8 @@ import { Label } from '@/components/ui/label'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useGlobal } from '@/providers/GlobalProvider'
+import { Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
 
 export function LoginForm({ className, ...props }: React.ComponentProps<'div'>) {
   const router = useRouter()
@@ -39,14 +41,19 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
             password,
           }),
         })
-        const user = await loginReq.json()
+        const loginResponse = await loginReq.json()
 
-        setUser(user.user)
+        if (loginResponse.errors?.length) {
+          loginResponse.errors.forEach((e: Error) => {
+            toast(e.message)
+          })
+        }
 
-        if (user.token) router.push(searchParams.get('redirectUrl') || '/')
+        if (loginResponse.user) setUser(loginResponse.user)
+
+        if (loginResponse.token) router.push(searchParams.get('redirectUrl') || '/')
       } catch (error) {
-        console.error('Login failed:', error)
+        toast('Unknown issue while authenticating. Try again')
-      } finally {
         setIsLoading(false)
       }
     }
@@ -85,16 +92,11 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
                   </div>
                   <Input id="password" name="password" type="password" required />
                 </div>
-                <Button type="submit" className="w-full">
+                <Button disabled={isLoading} type="submit" className="w-full">
-                  Login
+                  {isLoading && <Loader2 />}
+                  <span>Login</span>
                 </Button>
               </div>
-              <div className="text-center text-sm">
-                Don&apos;t have an account?{' '}
-                <a href="/requestAccess" className="underline underline-offset-4">
-                  Request Access
-                </a>
-              </div>
             </div>
           </form>
         </CardContent>

src/providers/GlobalProvider.tsx

@@ -8,7 +8,7 @@ type GlobalProps = {
 }
 
 type GlobalState = {
-  setUser: (users?: User) => void
+  setUser: (user?: User) => void
 } & GlobalProps
 
 const defaultState = {