From 4f08bfac9d6bf871e8459bd014a5219e26aa96fe Mon Sep 17 00:00:00 2001 From: AmitChauhan63390 Date: Sat, 16 Nov 2024 15:51:25 +0530 Subject: [PATCH 01/11] centered the forms --- src/pages/Login.tsx | 7 ++++++- src/pages/Register.tsx | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 4e4a1013..62db2f5d 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -58,7 +58,11 @@ const Login = () => { display: 'flex', flexDirection: 'column', alignItems: 'center', - mt: 5, + justifyContent: 'center', + + + height: "calc(100vh - 64px)", + }} > @@ -112,6 +116,7 @@ const Login = () => { + ); }; diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx index 8c92fe7b..a138a973 100644 --- a/src/pages/Register.tsx +++ b/src/pages/Register.tsx @@ -56,7 +56,10 @@ const Register = () => { display: 'flex', flexDirection: 'column', alignItems: 'center', - mt: 5, + justifyContent: 'center', + + + height: "calc(100vh - 64px)", }} > From 069bcadccdc6e45d468cb76b4e103c0360b64310 Mon Sep 17 00:00:00 2001 From: AmitChauhan63390 Date: Sat, 16 Nov 2024 16:13:54 +0530 Subject: [PATCH 02/11] bg changed --- src/pages/Login.tsx | 5 +++-- src/pages/Register.tsx | 10 +++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 62db2f5d..7a637ccf 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -59,16 +59,17 @@ const Login = () => { flexDirection: 'column', alignItems: 'center', justifyContent: 'center', + backgroundColor: '#f5f5f5', height: "calc(100vh - 64px)", }} > - + + Welcome Back! - { flexDirection: 'column', alignItems: 'center', justifyContent: 'center', + height: "calc(100vh - 64px)", + backgroundColor: '#f5f5f5', }} > - + + + Create an account - { - + + ); }; From 0b933c3feeb093a260a60b17e2bef56ae547e95e Mon Sep 17 00:00:00 2001 From: AmitChauhan63390 Date: Sat, 16 Nov 2024 16:29:37 +0530 Subject: [PATCH 03/11] fill color changed to pink --- src/pages/Login.tsx | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 7a637ccf..8ed712f3 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -79,6 +79,21 @@ const Login = () => { margin="normal" variant="outlined" required + sx={{ + '& .MuiOutlinedInput-root': { + backgroundColor: email ? '#ffe6f9' : '#ffffff', + // backgroundColor: ' #ffe6f9', // Change fill color here + '& fieldset': { + borderColor: '#ff33cc', // Border color (optional) + }, + '&:hover fieldset': { + borderColor: '#ff33cc', // Hover border color (optional) + }, + '&.Mui-focused fieldset': { + borderColor: '#ff33cc', // Focus border color (optional) + }, + }, + }} /> { margin="normal" variant="outlined" required + sx={{ + '& .MuiOutlinedInput-root': { + backgroundColor: password ? '#ffe6f9' : '#ffffff', + // backgroundColor: ' #ffe6f9', // Change fill color here + '& fieldset': { + borderColor: '#ff33cc', // Border color (optional) + }, + '&:hover fieldset': { + borderColor: '#ff33cc', // Hover border color (optional) + }, + '&.Mui-focused fieldset': { + borderColor: '#ff33cc', // Focus border color (optional) + }, + }, + }} /> - - - - Don’t have an account?{' '} - - Register - - - - - - ); + + Don’t have an account?{" "} + + Register + + + + + ); }; export default Login; diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx index c5bdbde0..59006c76 100644 --- a/src/pages/Register.tsx +++ b/src/pages/Register.tsx @@ -1,124 +1,202 @@ -import { useState, useContext, useEffect } from 'react'; -import { useNavigate, Link } from 'react-router-dom'; -import axios from 'axios'; -import { AuthContext } from '../context/auth'; -import { TextField, Button, CircularProgress, Typography, Box, Container } from '@mui/material'; +import { useState, useContext, useEffect } from "react"; +import { useNavigate, Link } from "react-router-dom"; +import axios from "axios"; +import { AuthContext } from "../context/auth"; +import { + TextField, + Button, + CircularProgress, + Typography, + Box, + Container, +} from "@mui/material"; import { useGlobalInfoStore } from "../context/globalInfo"; import { apiUrl } from "../apiConfig"; const Register = () => { - const [form, setForm] = useState({ - email: '', - password: '', - }); - const [loading, setLoading] = useState(false); - const { notify } = useGlobalInfoStore(); - const { email, password } = form; + const [form, setForm] = useState({ + email: "", + password: "", + }); + const [loading, setLoading] = useState(false); + const { notify } = useGlobalInfoStore(); + const { email, password } = form; - const { state, dispatch } = useContext(AuthContext); - const { user } = state; - const navigate = useNavigate(); + const { state, dispatch } = useContext(AuthContext); + const { user } = state; + const navigate = useNavigate(); - useEffect(() => { - if (user !== null) navigate('/'); - }, [user, navigate]); + useEffect(() => { + if (user !== null) navigate("/"); + }, [user, navigate]); - const handleChange = (e: any) => { - const { name, value } = e.target; - setForm({ ...form, [name]: value }); - }; + const handleChange = (e: any) => { + const { name, value } = e.target; + setForm({ ...form, [name]: value }); + }; - const submitForm = async (e: any) => { - e.preventDefault(); - setLoading(true); - try { - const { data } = await axios.post(`${apiUrl}/auth/register`, { - email, - password, - }); - 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 { - setLoading(false); - } - }; + const submitForm = async (e: any) => { + e.preventDefault(); + setLoading(true); + try { + const { data } = await axios.post(`${apiUrl}/auth/register`, { + email, + password, + }); + 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 { + setLoading(false); + } + }; - return ( - + + + Create an account + + + + - - Already have an account?{' '} - - Login - - - - - - ); + {loading ? ( + <> + + Loading + + ) : ( + "Register" + )} + + + Already have an account?{" "} + + Login + + + + + ); }; export default Register; From db2f050c4ba3281bdea41eebfb0b9bc70d158d1a Mon Sep 17 00:00:00 2001 From: AmitChauhan63390 Date: Sat, 16 Nov 2024 21:56:03 +0530 Subject: [PATCH 05/11] 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 ( - - + {/* Left Side: Login Form */} + - - Welcome Back! - - - - - + + Welcome Back! + + + - - Don’t have an account?{" "} - - Register - - - - + + + + Don’t have an account?{" "} + + Register + + + + + + {/* Right Side: Aesthetic Info Section */} + + + + Welcome to Maxun + + + 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! + + + + ); }; 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 ( - - + {/* Left Side: Register Form */} + - - Create an account - - - - - - Already have an account?{" "} - - Login - - - - + + Create an Account + + + + + + + + + Already have an account?{" "} + + Login + + + + + + {/* Right Side: Aesthetic Info Section */} + + + + Welcome to Maxun + + + 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! + + + + ); }; From 459daed60cfbe040bf5bda1936f9313125521dce Mon Sep 17 00:00:00 2001 From: AmitChauhan63390 Date: Sat, 16 Nov 2024 23:21:59 +0530 Subject: [PATCH 06/11] removed overkilling stuff --- src/pages/Login.tsx | 127 +++++------------ src/pages/Register.tsx | 313 ++++++++++++++--------------------------- 2 files changed, 136 insertions(+), 304 deletions(-) diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index d03718dc..de44af12 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -2,14 +2,7 @@ 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, - Grid, -} from "@mui/material"; +import { Box, Typography, TextField, Button, CircularProgress, Grid } from "@mui/material"; import { useGlobalInfoStore } from "../context/globalInfo"; import { apiUrl } from "../apiConfig"; @@ -33,12 +26,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 { @@ -57,36 +50,35 @@ const Login = () => { }; return ( - - {/* Left Side: Login Form */} - + + - + logo + Welcome Back! { sx={{ "& .MuiOutlinedInput-root": { backgroundColor: email ? "#ffe6f9" : "#ffffff", - "& fieldset": { - borderColor: "#ff33cc", - }, - "&:hover fieldset": { - borderColor: "#ff33cc", - }, - "&.Mui-focused fieldset": { - borderColor: "#ff33cc", - }, + "& 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", - }, + "& .MuiInputLabel-root": { color: email ? "#ff33cc" : "#000000" }, + "& .MuiInputLabel-root.Mui-focused": { color: "#ff33cc" }, }} /> { sx={{ "& .MuiOutlinedInput-root": { backgroundColor: password ? "#ffe6f9" : "#ffffff", - "& fieldset": { - borderColor: "#ff33cc", - }, - "&:hover fieldset": { - borderColor: "#ff33cc", - }, - "&.Mui-focused fieldset": { - borderColor: "#ff33cc", - }, + "& 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", - }, + "& .MuiInputLabel-root": { color: password ? "#ff33cc" : "#000000" }, + "& .MuiInputLabel-root.Mui-focused": { color: "#ff33cc" }, }} /> - - Don’t have an account?{" "} @@ -184,41 +154,8 @@ const Login = () => { - - - {/* Right Side: Aesthetic Info Section */} - - - - Welcome to Maxun - - - 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! - - - + ); }; diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx index 3b90d4a5..90f33ed0 100644 --- a/src/pages/Register.tsx +++ b/src/pages/Register.tsx @@ -1,15 +1,8 @@ import axios from "axios"; -import { useState, useContext, useEffect, FormEvent } from "react"; +import { useState, useContext, useEffect } from "react"; import { useNavigate, Link } from "react-router-dom"; import { AuthContext } from "../context/auth"; -import { - Box, - Typography, - TextField, - Button, - CircularProgress, - Grid, -} from "@mui/material"; +import { Box, Typography, TextField, Button, CircularProgress } from "@mui/material"; import { useGlobalInfoStore } from "../context/globalInfo"; import { apiUrl } from "../apiConfig"; @@ -17,11 +10,10 @@ const Register = () => { const [form, setForm] = useState({ email: "", password: "", - confirmPassword: "", }); const [loading, setLoading] = useState(false); const { notify } = useGlobalInfoStore(); - const { email, password, confirmPassword } = form; + const { email, password } = form; const { state, dispatch } = useContext(AuthContext); const { user } = state; @@ -41,10 +33,6 @@ 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`, { @@ -52,7 +40,7 @@ const Register = () => { password, }); dispatch({ type: "LOGIN", payload: data }); - notify("success", "Welcome to Maxun!"); + notify("success", "Registration Successful!"); window.localStorage.setItem("user", JSON.stringify(data)); navigate("/"); } catch (err) { @@ -62,203 +50,110 @@ const Register = () => { }; return ( - - {/* Left Side: Register Form */} - + - - - Create an Account - - - - - - - - - Already have an account?{" "} - - Login - - - - - - {/* Right Side: Aesthetic Info Section */} - - - - Welcome to Maxun - - - 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! - - - - + logo + + Create an Account + + + + + + Already have an account?{" "} + + Login + + + + ); }; From cf5c8b11e92aa9070f6fbf2c884288d059b2c795 Mon Sep 17 00:00:00 2001 From: AmitChauhan63390 Date: Sat, 16 Nov 2024 23:54:06 +0530 Subject: [PATCH 07/11] on registration failed msg --- src/pages/Register.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx index 90f33ed0..d8378c73 100644 --- a/src/pages/Register.tsx +++ b/src/pages/Register.tsx @@ -43,8 +43,8 @@ const Register = () => { notify("success", "Registration Successful!"); window.localStorage.setItem("user", JSON.stringify(data)); navigate("/"); - } catch (err) { - notify("error", "Registration Failed. Please try again."); + } catch (error:any) { + notify("error", error.response.data || "Registration Failed. Please try again."); setLoading(false); } }; From 477ed726dd6cd1706b09af5e51a5d6c4f5789fa4 Mon Sep 17 00:00:00 2001 From: RohitR311 Date: Tue, 19 Nov 2024 02:59:43 +0530 Subject: [PATCH 08/11] fix: remove pink borders on text field --- src/pages/Login.tsx | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index de44af12..67c889d2 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -90,20 +90,6 @@ const Login = () => { 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" }, - }} /> { 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" }, - }} />