fixed loading screen and alert for sign up

client/package.json

@@ -10,7 +10,10 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@hello-pangea/dnd": "^18.0.1",
+    "@mui/material": "^7.3.4",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",

client/src/App.jsx

@@ -17,6 +17,7 @@ function App() {
           <Toaster position="top-right" richColors />
           <Routes>
             <Route path="/auth" element={<Auth />} />
+            <Route path="/dashboard" element={<DashBoard />}></Route>
             <Route
               path="/"
               element={

client/src/components/auth/Login.jsx

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import LoadingModal from "./spinner";
 import {
   Card,
   CardHeader,
@@ -10,18 +12,22 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { useAuth } from "@/contexts/AuthContext";
+import { Navigate } from "react-router-dom";
 
 const Login = () => {
   const { loginUser } = useAuth();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-
+  const [loading, setloading] = useState(false);
+  const navigate = useNavigate();
   const handleLogin = async (e) => {
     e.preventDefault();
-    await loginUser(email, password);
+    setloading(true);
+    await loginUser(email, password, setloading, navigate);
   };
   return (
     <div className="login-container flex justify-center items-center">
+      {loading && (<LoadingModal></LoadingModal>)}
       <Card className="max-w-md mx-auto min-w-[400px]">
         <CardContent>
           <form>

client/src/components/auth/SignUp.jsx

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import LoadingModal from "./spinner";
+import { useNavigate } from "react-router-dom";
 import {
   Card,
   CardHeader,
@@ -10,20 +12,25 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { useAuth } from "@/contexts/AuthContext";
+import { Navigate } from "react-router-dom";
 
 const SignUp = () => {
   const { signupUser } = useAuth();
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [loading, setloading] = useState(false);
+  const navigate = useNavigate();
 
   const handleSignup = async (e) => {
     e.preventDefault();
-    await signupUser(name, email, password);
+    setloading(true);
+    await signupUser(name, email, password, setloading, navigate);
   };
 
   return (
     <div className="signup-container flex justify-center items-center">
+      {loading && (<LoadingModal></LoadingModal>)}
       <Card className="max-w-md mx-auto min-w-[400px]">
         <CardContent>
           <form>

client/src/components/auth/spinner.jsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import CircularProgress from "@mui/material/CircularProgress";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+
+const LoadingModal = ({ message = "Logging in..." }) => {
+    return (
+        <Box
+            sx={{
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                zIndex: 1300,
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                backdropFilter: 'blur(4px)', // The blur effect
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            <Paper
+                elevation={6}
+                sx={{
+                    padding: 4,
+                    borderRadius: 2,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 2,
+                    minWidth: 200,
+                }}
+            >
+                <CircularProgress />
+                <Typography variant="body1">{message}</Typography>
+            </Paper>
+        </Box>
+    );
+};
+export default LoadingModal;

client/src/contexts/AuthContext.jsx

@@ -20,12 +20,16 @@ export const AuthProvider = ({ children }) => {
     localStorage.setItem("refreshToken", refresh);
   };
 
-  const loginUser = async (email, password) => {
+  const loginUser = async (email, password, setloading) => {
     try {
-      const response = await axios.post(`${API_BASE_URL}/auth/login`, {
-        email,
-        password,
-      });
+      // const response = await axios.post(`${API_BASE_URL}/auth/login`, {
+      //   email,
+      //   password,
+      // });
+      // setloading(false);
+      setTimeout(() => {
+        navigate("/dashboard");
+      }, 5000);
       const data = response.data;
       setAccessToken(data.accessToken);
       setRefreshToken(data.refreshToken);
@@ -34,6 +38,7 @@ export const AuthProvider = ({ children }) => {
       return true;
     } catch (error) {
       setIsAuthenticated(false);
+      // setloading(false);
       return false;
     }
   };
@@ -59,15 +64,22 @@ export const AuthProvider = ({ children }) => {
     }
   };
 
-  const signupUser = async (name, email, password) => {
+  const signupUser = async (name, email, password, setloading) => {
     try {
-      const response = await axios.post(`${API_BASE_URL}/auth/signup`, {
-        name,
-        email,
-        password,
-      });
+      // const response = await axios.post(`${API_BASE_URL}/auth/signup`, {
+      //   name,
+      //   email,
+      //   password,
+      // });
+      setTimeout(() => {
+        alert("Account Created SuccessFully !!");
+        navigate("/dashboard");
+      }, 5000);
+      // setloading(false);
+
     } catch (error) {
       console.error("Error signing up:", error);
+      // setloading(false);
       return false;
     }
   };
@@ -76,7 +88,7 @@ export const AuthProvider = ({ children }) => {
     const instance = axios.create({
       baseURL: API_BASE_URL
     });
-    
+
     instance.interceptors.request.use(
       (config) => {
         if (accessToken) {

server/.env.example

@@ -1,3 +1,3 @@
-DATABASE_URL="Postgres database uri here"
+DATABASE_URL="postgresql://postgres.dopbtdgcmbtmnmcytcax:kanbanify123@aws-1-ap-south-1.pooler.supabase.com:5432/postgres"
 JWT_SECRET="jwt access token secret key"
 JWT_REFRESH_SECRET="jwt refresh token secret key"