From 72ae70524b2c02b3a1e41735a698033be5233334 Mon Sep 17 00:00:00 2001
From: Shivansh <shivanshsaxena2910@gmail.com>
Date: Wed, 16 Oct 2024 03:00:16 +0530
Subject: [PATCH] added spinner and react-hot-toast

---
 Benjamin/app/(auth)/login/page.tsx | 33 +++++++++++++++++-----
 Benjamin/components/ui/spinner.tsx | 45 ++++++++++++++++++++++++++++++
 Benjamin/package-lock.json         | 27 +++++++++++++++++-
 Benjamin/package.json              |  1 +
 4 files changed, 98 insertions(+), 8 deletions(-)
 create mode 100644 Benjamin/components/ui/spinner.tsx

diff --git a/Benjamin/app/(auth)/login/page.tsx b/Benjamin/app/(auth)/login/page.tsx
index 369843b..a2f7d29 100644
--- a/Benjamin/app/(auth)/login/page.tsx
+++ b/Benjamin/app/(auth)/login/page.tsx
@@ -1,18 +1,28 @@
 "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", {
@@ -20,9 +30,13 @@ const Login = () => {
       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
@@ -77,8 +91,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
@@ -185,6 +203,7 @@ const Login = () => {
           )}
         </div>
       </div>
+      <Toaster />
     </>
   );
 };
diff --git a/Benjamin/components/ui/spinner.tsx b/Benjamin/components/ui/spinner.tsx
new file mode 100644
index 0000000..e6c08b2
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/Benjamin/package-lock.json b/Benjamin/package-lock.json
index 8e544fd..26fff21 100644
--- a/Benjamin/package-lock.json
+++ b/Benjamin/package-lock.json
@@ -29,6 +29,7 @@
         "next-auth": "^4.24.8",
         "react": "^18",
         "react-dom": "^18",
+        "react-hot-toast": "^2.4.1",
         "tailwind-merge": "^2.5.3",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -2741,7 +2742,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -4129,6 +4129,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -5991,6 +6000,22 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/Benjamin/package.json b/Benjamin/package.json
index 691e0ab..1b090a8 100644
--- a/Benjamin/package.json
+++ b/Benjamin/package.json
@@ -35,6 +35,7 @@
     "next-auth": "^4.24.8",
     "react": "^18",
     "react-dom": "^18",
+    "react-hot-toast": "^2.4.1",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7"
   },