✨ login integration

App.tsx

@@ -5,6 +5,8 @@ import { IRootState } from '@/store';
 import { toggleRTL, toggleTheme, toggleMenu, toggleLayout, toggleAnimation, toggleNavbar, toggleSemidark } from '@/store/themeConfigSlice';
 import Loading from '@/components/layouts/loading';
 import { getTranslation } from '@/i18n';
+import { Toaster } from 'react-hot-toast';
+
 
 function App({ children }: PropsWithChildren) {
     const themeConfig = useSelector((state: IRootState) => state.themeConfig);
@@ -33,6 +35,7 @@ function App({ children }: PropsWithChildren) {
             } main-section relative font-nunito text-sm font-normal antialiased`}
         >
             {isLoading ? <Loading /> : children}
+            <Toaster />
         </div>
     );
 }

app/(auth)/login/page.tsx

@@ -1,8 +1,3 @@
-import IconFacebookCircle from '@/components/icon/icon-facebook-circle';
-import IconGoogle from '@/components/icon/icon-google';
-import IconInstagram from '@/components/icon/icon-instagram';
-import IconTwitter from '@/components/icon/icon-twitter';
-
 import Link from 'next/link';
 import { Metadata } from 'next';
 import React from 'react';

app/(auth)/register/page.tsx

@@ -1,8 +1,4 @@
 import ComponentsAuthRegisterForm from '@/components/auth/components-auth-register-form';
-import IconFacebookCircle from '@/components/icon/icon-facebook-circle';
-import IconGoogle from '@/components/icon/icon-google';
-import IconInstagram from '@/components/icon/icon-instagram';
-import IconTwitter from '@/components/icon/icon-twitter';
 import Link from 'next/link';
 import React from 'react';
 
@@ -30,14 +26,10 @@ const RegisterPage = (props: Props) => {
                                 <p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to register</p>
                             </div>
                             <ComponentsAuthRegisterForm />
-                            <div className="relative my-7 text-center md:mb-9">
-                                <span className="absolute inset-x-0 top-1/2 h-px w-full -translate-y-1/2 bg-white-light dark:bg-white-dark"></span>
-                                <span className="relative bg-white px-2 font-bold uppercase text-white-dark dark:bg-dark dark:text-white-light">or</span>
-                            </div>
 
                             <div className="text-center dark:text-white">
                                 Already have an account ?&nbsp;
-                                <Link href="/auth/boxed-signin" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white">
+                                <Link href="/login" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white">
                                     SIGN IN
                                 </Link>
                             </div>

components/auth/components-auth-login-form.tsx

@@ -2,13 +2,36 @@
 import IconLockDots from '@/components/icon/icon-lock-dots';
 import IconMail from '@/components/icon/icon-mail';
 import { useRouter } from 'next/navigation';
-import React from 'react';
+import { useState } from "react";
+import axios from "axios";
+import toast from 'react-hot-toast';
 
 const ComponentsAuthLoginForm = () => {
-    const router = useRouter();
+    const [email, setEmail] = useState("")
-    const submitForm = (e: any) => {
+    const [password, setPassword] = useState("")
-        e.preventDefault();
+    const [loading, setLoading] = useState(false)
-        router.push('/');
+    const router = useRouter()
+
+    const submitForm = async (e: React.FormEvent) => {
+        e.preventDefault()
+        setLoading(true)
+
+        try {
+            const res = await axios.post(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/login`, {
+                email,
+                password,
+            })
+
+            localStorage.setItem("token", res.data.token)
+
+            toast.success("Login successful!")
+            router.push("/")
+        } catch (err: any) {
+            console.error("Login error:", err)
+            toast.error(err.response?.data?.error || "Invalid credentials")
+        } finally {
+            setLoading(false)
+        }
     };
 
     return (
@@ -16,7 +39,7 @@ const ComponentsAuthLoginForm = () => {
             <div>
                 <label htmlFor="Email">Email</label>
                 <div className="relative text-white-dark">
-                    <input id="Email" type="email" placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
+                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
                     <span className="absolute start-4 top-1/2 -translate-y-1/2">
                         <IconMail fill={true} />
                     </span>
@@ -25,14 +48,14 @@ const ComponentsAuthLoginForm = () => {
             <div>
                 <label htmlFor="Password">Password</label>
                 <div className="relative text-white-dark">
-                    <input id="Password" type="password" placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
+                    <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
                     <span className="absolute start-4 top-1/2 -translate-y-1/2">
                         <IconLockDots fill={true} />
                     </span>
                 </div>
             </div>
-            <button type="submit" className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
+            <button type="submit" disabled={loading} className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
-                Sign in
+                {loading ? "Logging in..." : "Sign In"}
             </button>
         </form>
     );

package-lock.json

@@ -30,6 +30,7 @@
                 "react-animate-height": "^3.1.0",
                 "react-apexcharts": "^1.7.0",
                 "react-dom": "18.2.0",
+                "react-hot-toast": "^2.5.2",
                 "react-i18next": "^12.1.5",
                 "react-perfect-scrollbar": "^1.5.8",
                 "react-popper": "^2.3.0",
@@ -1612,9 +1613,9 @@
             }
         },
         "node_modules/csstype": {
-            "version": "3.1.1",
+            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-            "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
         },
         "node_modules/damerau-levenshtein": {
             "version": "1.0.8",
@@ -2806,6 +2807,14 @@
             "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
             "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
         },
+        "node_modules/goober": {
+            "version": "2.1.16",
+            "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+            "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+            "peerDependencies": {
+                "csstype": "^3.0.10"
+            }
+        },
         "node_modules/gopd": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -4527,6 +4536,22 @@
             "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
             "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
         },
+        "node_modules/react-hot-toast": {
+            "version": "2.5.2",
+            "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz",
+            "integrity": "sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==",
+            "dependencies": {
+                "csstype": "^3.1.3",
+                "goober": "^2.1.16"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "react": ">=16",
+                "react-dom": ">=16"
+            }
+        },
         "node_modules/react-i18next": {
             "version": "12.1.5",
             "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.1.5.tgz",
@@ -6736,9 +6761,9 @@
             "dev": true
         },
         "csstype": {
-            "version": "3.1.1",
+            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-            "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
         },
         "damerau-levenshtein": {
             "version": "1.0.8",
@@ -7616,6 +7641,12 @@
             "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
             "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
         },
+        "goober": {
+            "version": "2.1.16",
+            "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+            "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+            "requires": {}
+        },
         "gopd": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -8776,6 +8807,15 @@
             "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
             "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
         },
+        "react-hot-toast": {
+            "version": "2.5.2",
+            "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz",
+            "integrity": "sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==",
+            "requires": {
+                "csstype": "^3.1.3",
+                "goober": "^2.1.16"
+            }
+        },
         "react-i18next": {
             "version": "12.1.5",
             "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.1.5.tgz",

package.json

@@ -31,6 +31,7 @@
         "react-animate-height": "^3.1.0",
         "react-apexcharts": "^1.7.0",
         "react-dom": "18.2.0",
+        "react-hot-toast": "^2.5.2",
         "react-i18next": "^12.1.5",
         "react-perfect-scrollbar": "^1.5.8",
         "react-popper": "^2.3.0",