design changed

src/pages/Login.tsx

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { useState, useContext, useEffect } from "react";
+import { useState, useContext, useEffect, FormEvent } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { AuthContext } from "../context/auth";
 import {
@@ -8,6 +8,7 @@ import {
   TextField,
   Button,
   CircularProgress,
+  Grid,
 } from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
@@ -49,22 +50,24 @@ const Login = () => {
       notify("success", "Welcome to Maxun!");
       window.localStorage.setItem("user", JSON.stringify(data));
       navigate("/");
-    } catch (err: any) {
+    } catch (err) {
-      notify("error", err.response.data || "Login Failed. Please try again.");
+      notify("error", "Login Failed. Please try again.");
       setLoading(false);
     }
   };
 
   return (
-    <Box
+    <Grid container sx={{ height: "calc(100vh - 60px)" }}>
+      {/* Left Side: Login Form */}
+      <Grid
+        item
+        xs={12}
+        md={6}
         sx={{
           display: "flex",
-        flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
-        backgroundColor: "#f5f5f5",
+          backgroundColor: "#ffffff", // Light background color
-
-        height: "calc(100vh - 64px)",
         }}
       >
         <Box
@@ -74,15 +77,16 @@ const Login = () => {
             textAlign: "center",
             maxWidth: 400,
             width: "100%",
-          backgroundColor: "#fff",
+            backgroundColor: "#f9f9f9",
-          padding: 3,
+            padding: 4,
             borderRadius: 4,
-          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+            boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.1)",
+            border: "2px solid #ff00c3",
             display: "flex",
             flexDirection: "column",
           }}
         >
-        <Typography variant="h4" gutterBottom color={"#ff00c3"}>
+          <Typography variant="h4" gutterBottom color="#ff00c3">
             Welcome Back!
           </Typography>
           <TextField
@@ -95,34 +99,29 @@ const Login = () => {
             variant="outlined"
             required
             sx={{
-            // Styles for the input root
               "& .MuiOutlinedInput-root": {
-              backgroundColor: email ? "#ffe6f9" : "#ffffff", // Pinkish fill when email has value, white otherwise
+                backgroundColor: email ? "#ffe6f9" : "#ffffff",
                 "& fieldset": {
-                borderColor: "#ff33cc", // Pink border color
+                  borderColor: "#ff33cc",
                 },
                 "&:hover fieldset": {
-                borderColor: "#ff33cc", // Pink border on hover
+                  borderColor: "#ff33cc",
                 },
                 "&.Mui-focused fieldset": {
-                borderColor: "#ff33cc", // Pink border when focused
+                  borderColor: "#ff33cc",
                 },
               },
-            // Styles for autofill state
               "& input:-webkit-autofill": {
-              WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset", // Pinkish autofill background
+                WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset",
-              WebkitTextFillColor: "#000", // Black text color in autofill
+                WebkitTextFillColor: "#000",
-              transition: "background-color 5000s ease-in-out 0s",
               },
-            // Styles for the label (legend)
               "& .MuiInputLabel-root": {
-              color: email ? "#ff33cc" : "#000000", // Pink label when filled, black otherwise
+                color: email ? "#ff33cc" : "#000000",
               },
               "& .MuiInputLabel-root.Mui-focused": {
-              color: "#ff33cc", // Pink label when focused
+                color: "#ff33cc",
               },
             }}
-          
           />
           <TextField
             fullWidth
@@ -135,34 +134,29 @@ const Login = () => {
             variant="outlined"
             required
             sx={{
-            // Styles for the input root
               "& .MuiOutlinedInput-root": {
-              backgroundColor: password ? "#ffe6f9" : "#ffffff", // Pinkish fill when email has value, white otherwise
+                backgroundColor: password ? "#ffe6f9" : "#ffffff",
                 "& fieldset": {
-                borderColor: "#ff33cc", // Pink border color
+                  borderColor: "#ff33cc",
                 },
                 "&:hover fieldset": {
-                borderColor: "#ff33cc", // Pink border on hover
+                  borderColor: "#ff33cc",
                 },
                 "&.Mui-focused fieldset": {
-                borderColor: "#ff33cc", // Pink border when focused
+                  borderColor: "#ff33cc",
                 },
               },
-            // Styles for autofill state
               "& input:-webkit-autofill": {
-              WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset", // Pinkish autofill background
+                WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset",
-              WebkitTextFillColor: "#000", // Black text color in autofill
+                WebkitTextFillColor: "#000",
-              transition: "background-color 5000s ease-in-out 0s",
               },
-            // Styles for the label (legend)
               "& .MuiInputLabel-root": {
-              color: password ? "#ff33cc" : "#000000", // Pink label when filled, black otherwise
+                color: password ? "#ff33cc" : "#000000",
               },
               "& .MuiInputLabel-root.Mui-focused": {
-              color: "#ff33cc", // Pink label when focused
+                color: "#ff33cc",
               },
             }}
-          
           />
 
           <Button
@@ -185,12 +179,46 @@ const Login = () => {
 
           <Typography variant="body2" align="center">
             Don’t have an account?{" "}
-          <Link to="/register" style={{ textDecoration: "none" }}>
+            <Link to="/register" style={{ textDecoration: "none", color: "#ff33cc" }}>
               Register
             </Link>
           </Typography>
         </Box>
+      </Grid>
+
+      {/* Right Side: Aesthetic Info Section */}
+      <Grid
+        item
+        xs={12}
+        md={6}
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f5f5f5", // Subtle light background
+          padding: 4,
+          textAlign: "center",
+        }}
+      >
+        <Box>
+          <Typography
+            variant="h3"
+            gutterBottom
+            sx={{
+              fontWeight: "bold",
+              color: "#ff33cc",
+              textShadow: "1px 1px 5px rgba(255, 0, 195, 0.2)",
+            }}
+          >
+            Welcome to Maxun
+          </Typography>
+          <Typography variant="h6" sx={{ color: "#555" }}>
+            Maxun is a powerful visual website scraper that makes extracting data from any website as easy as a few clicks. 
+            No more complex code or time-consuming processes—Maxun does the heavy lifting for you. Start your data extraction journey with us!
+          </Typography>
         </Box>
+      </Grid>
+    </Grid>
   );
 };
 

src/pages/Register.tsx

@@ -1,14 +1,14 @@
-import { useState, useContext, useEffect } from "react";
-import { useNavigate, Link } from "react-router-dom";
 import axios from "axios";
+import { useState, useContext, useEffect, FormEvent } from "react";
+import { useNavigate, Link } from "react-router-dom";
 import { AuthContext } from "../context/auth";
 import {
+  Box,
+  Typography,
   TextField,
   Button,
   CircularProgress,
-  Typography,
+  Grid,
-  Box,
-  Container,
 } from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
@@ -17,17 +17,21 @@ const Register = () => {
   const [form, setForm] = useState({
     email: "",
     password: "",
+    confirmPassword: "",
   });
   const [loading, setLoading] = useState(false);
   const { notify } = useGlobalInfoStore();
-  const { email, password } = form;
+  const { email, password, confirmPassword } = form;
 
   const { state, dispatch } = useContext(AuthContext);
   const { user } = state;
+
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (user !== null) navigate("/");
+    if (user) {
+      navigate("/");
+    }
   }, [user, navigate]);
 
   const handleChange = (e: any) => {
@@ -37,39 +41,38 @@ const Register = () => {
 
   const submitForm = async (e: any) => {
     e.preventDefault();
+    if (password !== confirmPassword) {
+      notify("error", "Passwords do not match.");
+      return;
+    }
     setLoading(true);
     try {
       const { data } = await axios.post(`${apiUrl}/auth/register`, {
         email,
         password,
       });
-      dispatch({
+      dispatch({ type: "LOGIN", payload: data });
-        type: "LOGIN",
-        payload: data,
-      });
       notify("success", "Welcome to Maxun!");
       window.localStorage.setItem("user", JSON.stringify(data));
       navigate("/");
-    } catch (err: any) {
+    } catch (err) {
-      notify(
+      notify("error", "Registration Failed. Please try again.");
-        "error",
-        err.response.data || "Registration Failed. Please try again."
-      );
-    } finally {
       setLoading(false);
     }
   };
 
   return (
-    <Box
+    <Grid container sx={{ height: "calc(100vh - 60px)" }}>
+      {/* Left Side: Register Form */}
+      <Grid
+        item
+        xs={12}
+        md={6}
         sx={{
           display: "flex",
-        flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
-
+          backgroundColor: "#ffffff", // Light background color
-        height: "calc(100vh - 64px)",
-        backgroundColor: "#f5f5f5",
         }}
       >
         <Box
@@ -79,105 +82,130 @@ const Register = () => {
             textAlign: "center",
             maxWidth: 400,
             width: "100%",
-          backgroundColor: "#fff",
+            backgroundColor: "#f9f9f9",
-          padding: 3,
+            padding: 4,
             borderRadius: 4,
-          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+            boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.1)",
+            border: "2px solid #ff00c3",
             display: "flex",
             flexDirection: "column",
           }}
         >
-        <Typography variant="h4" gutterBottom color={"#ff00c3"}>
+          <Typography variant="h4" gutterBottom color="#ff00c3">
-          Create an account
+            Create an Account
           </Typography>
           <TextField
-          margin="normal"
-          required
             fullWidth
-          id="email"
+            label="Email"
-          label="Email Address"
             name="email"
             value={email}
             onChange={handleChange}
-          autoComplete="email"
+            margin="normal"
+            variant="outlined"
+            required
             sx={{
-            // Styles for the input root
               "& .MuiOutlinedInput-root": {
-              backgroundColor: email ? "#ffe6f9" : "#ffffff", // Pinkish fill when email has value, white otherwise
+                backgroundColor: email ? "#ffe6f9" : "#ffffff",
                 "& fieldset": {
-                borderColor: "#ff33cc", // Pink border color
+                  borderColor: "#ff33cc",
                 },
                 "&:hover fieldset": {
-                borderColor: "#ff33cc", // Pink border on hover
+                  borderColor: "#ff33cc",
                 },
                 "&.Mui-focused fieldset": {
-                borderColor: "#ff33cc", // Pink border when focused
+                  borderColor: "#ff33cc",
                 },
               },
-            // Styles for autofill state
               "& input:-webkit-autofill": {
-              WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset", // Pinkish autofill background
+                WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset",
-              WebkitTextFillColor: "#000", // Black text color in autofill
+                WebkitTextFillColor: "#000",
-              transition: "background-color 5000s ease-in-out 0s",
               },
-            // Styles for the label (legend)
               "& .MuiInputLabel-root": {
-              color: email ? "#ff33cc" : "#000000", // Pink label when filled, black otherwise
+                color: email ? "#ff33cc" : "#000000",
               },
               "& .MuiInputLabel-root.Mui-focused": {
-              color: "#ff33cc", // Pink label when focused
+                color: "#ff33cc",
               },
             }}
-          
           />
           <TextField
-          margin="normal"
-          required
             fullWidth
-          name="password"
             label="Password"
+            name="password"
             type="password"
-          id="password"
             value={password}
             onChange={handleChange}
-          autoComplete="current-password"
+            margin="normal"
+            variant="outlined"
+            required
             sx={{
-            // Styles for the input root
               "& .MuiOutlinedInput-root": {
-              backgroundColor: password ? "#ffe6f9" : "#ffffff", // Pinkish fill when email has value, white otherwise
+                backgroundColor: password ? "#ffe6f9" : "#ffffff",
                 "& fieldset": {
-                borderColor: "#ff33cc", // Pink border color
+                  borderColor: "#ff33cc",
                 },
                 "&:hover fieldset": {
-                borderColor: "#ff33cc", // Pink border on hover
+                  borderColor: "#ff33cc",
                 },
                 "&.Mui-focused fieldset": {
-                borderColor: "#ff33cc", // Pink border when focused
+                  borderColor: "#ff33cc",
                 },
               },
-            // Styles for autofill state
               "& input:-webkit-autofill": {
-              WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset", // Pinkish autofill background
+                WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset",
-              WebkitTextFillColor: "#000", // Black text color in autofill
+                WebkitTextFillColor: "#000",
-              transition: "background-color 5000s ease-in-out 0s",
               },
-            // Styles for the label (legend)
               "& .MuiInputLabel-root": {
-              color: password ? "#ff33cc" : "#000000", // Pink label when filled, black otherwise
+                color: password ? "#ff33cc" : "#000000",
               },
               "& .MuiInputLabel-root.Mui-focused": {
-              color: "#ff33cc", // Pink label when focused
+                color: "#ff33cc",
               },
             }}
-          
           />
+          <TextField
+            fullWidth
+            label="Confirm Password"
+            name="confirmPassword"
+            type="password"
+            value={confirmPassword}
+            onChange={handleChange}
+            margin="normal"
+            variant="outlined"
+            required
+            sx={{
+              "& .MuiOutlinedInput-root": {
+                backgroundColor: confirmPassword ? "#ffe6f9" : "#ffffff",
+                "& fieldset": {
+                  borderColor: "#ff33cc",
+                },
+                "&:hover fieldset": {
+                  borderColor: "#ff33cc",
+                },
+                "&.Mui-focused fieldset": {
+                  borderColor: "#ff33cc",
+                },
+              },
+              "& input:-webkit-autofill": {
+                WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset",
+                WebkitTextFillColor: "#000",
+              },
+              "& .MuiInputLabel-root": {
+                color: confirmPassword ? "#ff33cc" : "#000000",
+              },
+              "& .MuiInputLabel-root.Mui-focused": {
+                color: "#ff33cc",
+              },
+            }}
+          />
+
           <Button
             type="submit"
             fullWidth
             variant="contained"
             color="primary"
-          sx={{ mt: 3, mb: 2 }}
+            sx={{ mt: 2, mb: 2 }}
-          disabled={loading || !email || !password}
+            disabled={loading || !email || !password || !confirmPassword}
           >
             {loading ? (
               <>
@@ -188,14 +216,49 @@ const Register = () => {
               "Register"
             )}
           </Button>
+
           <Typography variant="body2" align="center">
             Already have an account?{" "}
-          <Link to="/login" style={{ textDecoration: "none" }}>
+            <Link to="/login" style={{ textDecoration: "none", color: "#ff33cc" }}>
               Login
             </Link>
           </Typography>
         </Box>
+      </Grid>
+
+      {/* Right Side: Aesthetic Info Section */}
+      <Grid
+        item
+        xs={12}
+        md={6}
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f5f5f5", // Subtle light background
+          padding: 4,
+          textAlign: "center",
+        }}
+      >
+        <Box>
+          <Typography
+            variant="h3"
+            gutterBottom
+            sx={{
+              fontWeight: "bold",
+              color: "#ff33cc",
+              textShadow: "1px 1px 5px rgba(255, 0, 195, 0.2)",
+            }}
+          >
+            Welcome to Maxun
+          </Typography>
+          <Typography variant="h6" sx={{ color: "#555" }}>
+            Maxun is a powerful visual website scraper that makes extracting data from any website as easy as a few clicks. 
+            No more complex code or time-consuming processes—Maxun does the heavy lifting for you. Start your data extraction journey with us!
+          </Typography>
         </Box>
+      </Grid>
+    </Grid>
   );
 };