From db2f050c4ba3281bdea41eebfb0b9bc70d158d1a Mon Sep 17 00:00:00 2001
From: AmitChauhan63390 <amit63390@gmail.com>
Date: Sat, 16 Nov 2024 21:56:03 +0530
Subject: [PATCH] design changed

---
 src/pages/Login.tsx    | 292 +++++++++++++++++++---------------
 src/pages/Register.tsx | 353 ++++++++++++++++++++++++-----------------
 2 files changed, 368 insertions(+), 277 deletions(-)

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 9d075f98..d03718dc 100644
--- a/src/pages/Login.tsx
+++ b/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";
@@ -32,12 +33,12 @@ const Login = () => {
     }
   }, [user, navigate]);
 
-  const handleChange = (e: any) => {
+  const handleChange = (e:any) => {
     const { name, value } = e.target;
     setForm({ ...form, [name]: value });
   };
 
-  const submitForm = async (e: any) => {
+  const submitForm = async (e:any) => {
     e.preventDefault();
     setLoading(true);
     try {
@@ -49,148 +50,175 @@ const Login = () => {
       notify("success", "Welcome to Maxun!");
       window.localStorage.setItem("user", JSON.stringify(data));
       navigate("/");
-    } catch (err: any) {
-      notify("error", err.response.data || "Login Failed. Please try again.");
+    } catch (err) {
+      notify("error", "Login Failed. Please try again.");
       setLoading(false);
     }
   };
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "#f5f5f5",
-
-        height: "calc(100vh - 64px)",
-      }}
-    >
-      <Box
-        component="form"
-        onSubmit={submitForm}
+    <Grid container sx={{ height: "calc(100vh - 60px)" }}>
+      {/* Left Side: Login Form */}
+      <Grid
+        item
+        xs={12}
+        md={6}
         sx={{
-          textAlign: "center",
-          maxWidth: 400,
-          width: "100%",
-          backgroundColor: "#fff",
-          padding: 3,
-          borderRadius: 4,
-          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
           display: "flex",
-          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#ffffff", // Light background color
         }}
       >
-        <Typography variant="h4" gutterBottom color={"#ff00c3"}>
-          Welcome Back!
-        </Typography>
-        <TextField
-          fullWidth
-          label="Email"
-          name="email"
-          value={email}
-          onChange={handleChange}
-          margin="normal"
-          variant="outlined"
-          required
+        <Box
+          component="form"
+          onSubmit={submitForm}
           sx={{
-            // Styles for the input root
-            "& .MuiOutlinedInput-root": {
-              backgroundColor: email ? "#ffe6f9" : "#ffffff", // Pinkish fill when email has value, white otherwise
-              "& fieldset": {
-                borderColor: "#ff33cc", // Pink border color
-              },
-              "&:hover fieldset": {
-                borderColor: "#ff33cc", // Pink border on hover
-              },
-              "&.Mui-focused fieldset": {
-                borderColor: "#ff33cc", // Pink border when focused
-              },
-            },
-            // Styles for autofill state
-            "& input:-webkit-autofill": {
-              WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset", // Pinkish autofill background
-              WebkitTextFillColor: "#000", // Black text color in autofill
-              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
-            },
-            "& .MuiInputLabel-root.Mui-focused": {
-              color: "#ff33cc", // Pink label when focused
-            },
+            textAlign: "center",
+            maxWidth: 400,
+            width: "100%",
+            backgroundColor: "#f9f9f9",
+            padding: 4,
+            borderRadius: 4,
+            boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.1)",
+            border: "2px solid #ff00c3",
+            display: "flex",
+            flexDirection: "column",
           }}
-          
-        />
-        <TextField
-          fullWidth
-          label="Password"
-          name="password"
-          type="password"
-          value={password}
-          onChange={handleChange}
-          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
-              "& fieldset": {
-                borderColor: "#ff33cc", // Pink border color
-              },
-              "&:hover fieldset": {
-                borderColor: "#ff33cc", // Pink border on hover
-              },
-              "&.Mui-focused fieldset": {
-                borderColor: "#ff33cc", // Pink border when focused
-              },
-            },
-            // Styles for autofill state
-            "& input:-webkit-autofill": {
-              WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset", // Pinkish autofill background
-              WebkitTextFillColor: "#000", // Black text color in autofill
-              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
-            },
-            "& .MuiInputLabel-root.Mui-focused": {
-              color: "#ff33cc", // Pink label when focused
-            },
-          }}
-          
-        />
-
-        <Button
-          type="submit"
-          fullWidth
-          variant="contained"
-          color="primary"
-          sx={{ mt: 2, mb: 2 }}
-          disabled={loading || !email || !password}
         >
-          {loading ? (
-            <>
-              <CircularProgress size={20} sx={{ mr: 2 }} />
-              Loading
-            </>
-          ) : (
-            "Login"
-          )}
-        </Button>
+          <Typography variant="h4" gutterBottom color="#ff00c3">
+            Welcome Back!
+          </Typography>
+          <TextField
+            fullWidth
+            label="Email"
+            name="email"
+            value={email}
+            onChange={handleChange}
+            margin="normal"
+            variant="outlined"
+            required
+            sx={{
+              "& .MuiOutlinedInput-root": {
+                backgroundColor: email ? "#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: email ? "#ff33cc" : "#000000",
+              },
+              "& .MuiInputLabel-root.Mui-focused": {
+                color: "#ff33cc",
+              },
+            }}
+          />
+          <TextField
+            fullWidth
+            label="Password"
+            name="password"
+            type="password"
+            value={password}
+            onChange={handleChange}
+            margin="normal"
+            variant="outlined"
+            required
+            sx={{
+              "& .MuiOutlinedInput-root": {
+                backgroundColor: password ? "#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: password ? "#ff33cc" : "#000000",
+              },
+              "& .MuiInputLabel-root.Mui-focused": {
+                color: "#ff33cc",
+              },
+            }}
+          />
 
-        <Typography variant="body2" align="center">
-          Don’t have an account?{" "}
-          <Link to="/register" style={{ textDecoration: "none" }}>
-            Register
-          </Link>
-        </Typography>
-      </Box>
-    </Box>
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 2, mb: 2 }}
+            disabled={loading || !email || !password}
+          >
+            {loading ? (
+              <>
+                <CircularProgress size={20} sx={{ mr: 2 }} />
+                Loading
+              </>
+            ) : (
+              "Login"
+            )}
+          </Button>
+
+          <Typography variant="body2" align="center">
+            Don’t have an account?{" "}
+            <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>
   );
 };
 
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index 59006c76..3b90d4a5 100644
--- a/src/pages/Register.tsx
+++ b/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,
-  Box,
-  Container,
+  Grid,
 } 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,165 +41,224 @@ 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({
-        type: "LOGIN",
-        payload: data,
-      });
+      dispatch({ type: "LOGIN", payload: data });
       notify("success", "Welcome to Maxun!");
       window.localStorage.setItem("user", JSON.stringify(data));
       navigate("/");
-    } catch (err: any) {
-      notify(
-        "error",
-        err.response.data || "Registration Failed. Please try again."
-      );
-    } finally {
+    } catch (err) {
+      notify("error", "Registration Failed. Please try again.");
       setLoading(false);
     }
   };
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-
-        height: "calc(100vh - 64px)",
-        backgroundColor: "#f5f5f5",
-      }}
-    >
-      <Box
-        component="form"
-        onSubmit={submitForm}
+    <Grid container sx={{ height: "calc(100vh - 60px)" }}>
+      {/* Left Side: Register Form */}
+      <Grid
+        item
+        xs={12}
+        md={6}
         sx={{
-          textAlign: "center",
-          maxWidth: 400,
-          width: "100%",
-          backgroundColor: "#fff",
-          padding: 3,
-          borderRadius: 4,
-          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
           display: "flex",
-          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#ffffff", // Light background color
         }}
       >
-        <Typography variant="h4" gutterBottom color={"#ff00c3"}>
-          Create an account
-        </Typography>
-        <TextField
-          margin="normal"
-          required
-          fullWidth
-          id="email"
-          label="Email Address"
-          name="email"
-          value={email}
-          onChange={handleChange}
-          autoComplete="email"
+        <Box
+          component="form"
+          onSubmit={submitForm}
           sx={{
-            // Styles for the input root
-            "& .MuiOutlinedInput-root": {
-              backgroundColor: email ? "#ffe6f9" : "#ffffff", // Pinkish fill when email has value, white otherwise
-              "& fieldset": {
-                borderColor: "#ff33cc", // Pink border color
-              },
-              "&:hover fieldset": {
-                borderColor: "#ff33cc", // Pink border on hover
-              },
-              "&.Mui-focused fieldset": {
-                borderColor: "#ff33cc", // Pink border when focused
-              },
-            },
-            // Styles for autofill state
-            "& input:-webkit-autofill": {
-              WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset", // Pinkish autofill background
-              WebkitTextFillColor: "#000", // Black text color in autofill
-              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
-            },
-            "& .MuiInputLabel-root.Mui-focused": {
-              color: "#ff33cc", // Pink label when focused
-            },
+            textAlign: "center",
+            maxWidth: 400,
+            width: "100%",
+            backgroundColor: "#f9f9f9",
+            padding: 4,
+            borderRadius: 4,
+            boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.1)",
+            border: "2px solid #ff00c3",
+            display: "flex",
+            flexDirection: "column",
           }}
-          
-        />
-        <TextField
-          margin="normal"
-          required
-          fullWidth
-          name="password"
-          label="Password"
-          type="password"
-          id="password"
-          value={password}
-          onChange={handleChange}
-          autoComplete="current-password"
-          sx={{
-            // Styles for the input root
-            "& .MuiOutlinedInput-root": {
-              backgroundColor: password ? "#ffe6f9" : "#ffffff", // Pinkish fill when email has value, white otherwise
-              "& fieldset": {
-                borderColor: "#ff33cc", // Pink border color
-              },
-              "&:hover fieldset": {
-                borderColor: "#ff33cc", // Pink border on hover
-              },
-              "&.Mui-focused fieldset": {
-                borderColor: "#ff33cc", // Pink border when focused
-              },
-            },
-            // Styles for autofill state
-            "& input:-webkit-autofill": {
-              WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset", // Pinkish autofill background
-              WebkitTextFillColor: "#000", // Black text color in autofill
-              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
-            },
-            "& .MuiInputLabel-root.Mui-focused": {
-              color: "#ff33cc", // Pink label when focused
-            },
-          }}
-          
-        />
-        <Button
-          type="submit"
-          fullWidth
-          variant="contained"
-          color="primary"
-          sx={{ mt: 3, mb: 2 }}
-          disabled={loading || !email || !password}
         >
-          {loading ? (
-            <>
-              <CircularProgress size={20} sx={{ mr: 2 }} />
-              Loading
-            </>
-          ) : (
-            "Register"
-          )}
-        </Button>
-        <Typography variant="body2" align="center">
-          Already have an account?{" "}
-          <Link to="/login" style={{ textDecoration: "none" }}>
-            Login
-          </Link>
-        </Typography>
-      </Box>
-    </Box>
+          <Typography variant="h4" gutterBottom color="#ff00c3">
+            Create an Account
+          </Typography>
+          <TextField
+            fullWidth
+            label="Email"
+            name="email"
+            value={email}
+            onChange={handleChange}
+            margin="normal"
+            variant="outlined"
+            required
+            sx={{
+              "& .MuiOutlinedInput-root": {
+                backgroundColor: email ? "#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: email ? "#ff33cc" : "#000000",
+              },
+              "& .MuiInputLabel-root.Mui-focused": {
+                color: "#ff33cc",
+              },
+            }}
+          />
+          <TextField
+            fullWidth
+            label="Password"
+            name="password"
+            type="password"
+            value={password}
+            onChange={handleChange}
+            margin="normal"
+            variant="outlined"
+            required
+            sx={{
+              "& .MuiOutlinedInput-root": {
+                backgroundColor: password ? "#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: password ? "#ff33cc" : "#000000",
+              },
+              "& .MuiInputLabel-root.Mui-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: 2, mb: 2 }}
+            disabled={loading || !email || !password || !confirmPassword}
+          >
+            {loading ? (
+              <>
+                <CircularProgress size={20} sx={{ mr: 2 }} />
+                Loading
+              </>
+            ) : (
+              "Register"
+            )}
+          </Button>
+
+          <Typography variant="body2" align="center">
+            Already have an account?{" "}
+            <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>
   );
 };