Merge pull request #703 from ShivanshPlays/auth

Added spinner and react-hot-toast in the login

Benjamin/app/(auth)/login/page.tsx

@@ -1,28 +1,42 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Lock, Mail, User } from "lucide-react";
-import { signIn } from "next-auth/react";
+import { Spinner } from "@/components/ui/spinner";
+import { Loader2, Lock, Mail, User } from "lucide-react";
+import { signIn, useSession } from "next-auth/react";
 import { useState } from "react";
+import toast, { Toaster } from "react-hot-toast";
 
 const Login = () => {
   // BE logic and states
+  const session= useSession();
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
+  const [loading, setloading] =useState(false);
+
+  if (error != "") {
+    toast.error(error);
+    setError("");
+  }
 
   const handleSubmit = async (e: React.FormEvent) => {
+    setloading(true)
     e.preventDefault();
 
     const result = await signIn("credentials", {
       email,
       password,
       redirect: false,
     });
-
-    if (result?.error) alert("Invalid email or password");
-    else window.location.href = "/"; // Redirect on success
+    console.log(result)
+    if (result?.error) setError("Invalid email or password");
+    else {
+      toast.success(`Welcome ${session.data?.user?.name}`)
+      window.location.href = "/"; // Redirect on success
+    }
+    setloading(false)
   };
 
   // FE logic and states
@@ -78,8 +92,12 @@ const Login = () => {
                   />
                   <Lock className="h-7 w-7 text-Yellow" />
                 </div>
-                <Button type="submit" className="rounded-full bg-Green font-bold h-10 w-4/5 ">
-                  Login
+                <Button
+                  type="submit"
+                  disabled={loading}
+                  className="rounded-full bg-Green font-bold h-10 w-4/5 disabled"
+                >
+                  {loading?<Spinner/>:"Login"}
                 </Button>
               </form>
               <div
@@ -186,6 +204,7 @@ const Login = () => {
           )}
         </div>
       </div>
+      <Toaster />
     </>
   );
 };

Benjamin/components/ui/spinner.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { VariantProps, cva } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+
+const spinnerVariants = cva('flex-col items-center justify-center', {
+  variants: {
+    show: {
+      true: 'flex',
+      false: 'hidden',
+    },
+  },
+  defaultVariants: {
+    show: true,
+  },
+});
+
+const loaderVariants = cva('animate-spin text-primary', {
+  variants: {
+    size: {
+      small: 'size-6',
+      medium: 'size-8',
+      large: 'size-12',
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+  },
+});
+
+interface SpinnerContentProps
+  extends VariantProps<typeof spinnerVariants>,
+    VariantProps<typeof loaderVariants> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function Spinner({ size, show, children, className }: SpinnerContentProps) {
+  return (
+    <span className={spinnerVariants({ show })}>
+      <Loader2 className={cn(loaderVariants({ size }), className)} />
+      {children}
+    </span>
+  );
+}

Benjamin/package.json

@@ -37,6 +37,7 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-hot-toast": "^2.4.1",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7"
   },