design changed
This commit is contained in:
AmitChauhan63390
@@ -1,5 +1,5 @@
|
|||||||
import axios from "axios";
|
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 { useNavigate, Link } from "react-router-dom";
|
||||||
import { AuthContext } from "../context/auth";
|
import { AuthContext } from "../context/auth";
|
||||||
import {
|
import {
|
||||||
@@ -8,6 +8,7 @@ import {
|
|||||||
TextField,
|
TextField,
|
||||||
Button,
|
Button,
|
||||||
CircularProgress,
|
CircularProgress,
|
||||||
|
Grid,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { useGlobalInfoStore } from "../context/globalInfo";
|
import { useGlobalInfoStore } from "../context/globalInfo";
|
||||||
import { apiUrl } from "../apiConfig";
|
import { apiUrl } from "../apiConfig";
|
||||||
@@ -32,12 +33,12 @@ const Login = () => {
|
|||||||
}
|
}
|
||||||
}, [user, navigate]);
|
}, [user, navigate]);
|
||||||
|
|
||||||
const handleChange = (e: any) => {
|
const handleChange = (e:any) => {
|
||||||
const { name, value } = e.target;
|
const { name, value } = e.target;
|
||||||
setForm({ ...form, [name]: value });
|
setForm({ ...form, [name]: value });
|
||||||
};
|
};
|
||||||
|
|
||||||
const submitForm = async (e: any) => {
|
const submitForm = async (e:any) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
@@ -49,148 +50,175 @@ const Login = () => {
|
|||||||
notify("success", "Welcome to Maxun!");
|
notify("success", "Welcome to Maxun!");
|
||||||
window.localStorage.setItem("user", JSON.stringify(data));
|
window.localStorage.setItem("user", JSON.stringify(data));
|
||||||
navigate("/");
|
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);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Grid container sx={{ height: "calc(100vh - 60px)" }}>
|
||||||
sx={{
|
{/* Left Side: Login Form */}
|
||||||
display: "flex",
|
<Grid
|
||||||
flexDirection: "column",
|
item
|
||||||
alignItems: "center",
|
xs={12}
|
||||||
justifyContent: "center",
|
md={6}
|
||||||
backgroundColor: "#f5f5f5",
|
|
||||||
|
|
||||||
height: "calc(100vh - 64px)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
component="form"
|
|
||||||
onSubmit={submitForm}
|
|
||||||
sx={{
|
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",
|
display: "flex",
|
||||||
flexDirection: "column",
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
backgroundColor: "#ffffff", // Light background color
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography variant="h4" gutterBottom color={"#ff00c3"}>
|
<Box
|
||||||
Welcome Back!
|
component="form"
|
||||||
</Typography>
|
onSubmit={submitForm}
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Email"
|
|
||||||
name="email"
|
|
||||||
value={email}
|
|
||||||
onChange={handleChange}
|
|
||||||
margin="normal"
|
|
||||||
variant="outlined"
|
|
||||||
required
|
|
||||||
sx={{
|
sx={{
|
||||||
// Styles for the input root
|
textAlign: "center",
|
||||||
"& .MuiOutlinedInput-root": {
|
maxWidth: 400,
|
||||||
backgroundColor: email ? "#ffe6f9" : "#ffffff", // Pinkish fill when email has value, white otherwise
|
width: "100%",
|
||||||
"& fieldset": {
|
backgroundColor: "#f9f9f9",
|
||||||
borderColor: "#ff33cc", // Pink border color
|
padding: 4,
|
||||||
},
|
borderRadius: 4,
|
||||||
"&:hover fieldset": {
|
boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.1)",
|
||||||
borderColor: "#ff33cc", // Pink border on hover
|
border: "2px solid #ff00c3",
|
||||||
},
|
display: "flex",
|
||||||
"&.Mui-focused fieldset": {
|
flexDirection: "column",
|
||||||
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
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
|
|
||||||
/>
|
|
||||||
<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 ? (
|
<Typography variant="h4" gutterBottom color="#ff00c3">
|
||||||
<>
|
Welcome Back!
|
||||||
<CircularProgress size={20} sx={{ mr: 2 }} />
|
</Typography>
|
||||||
Loading
|
<TextField
|
||||||
</>
|
fullWidth
|
||||||
) : (
|
label="Email"
|
||||||
"Login"
|
name="email"
|
||||||
)}
|
value={email}
|
||||||
</Button>
|
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">
|
<Button
|
||||||
Don’t have an account?{" "}
|
type="submit"
|
||||||
<Link to="/register" style={{ textDecoration: "none" }}>
|
fullWidth
|
||||||
Register
|
variant="contained"
|
||||||
</Link>
|
color="primary"
|
||||||
</Typography>
|
sx={{ mt: 2, mb: 2 }}
|
||||||
</Box>
|
disabled={loading || !email || !password}
|
||||||
</Box>
|
>
|
||||||
|
{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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
import { useState, useContext, useEffect } from "react";
|
|
||||||
import { useNavigate, Link } from "react-router-dom";
|
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
import { useState, useContext, useEffect, FormEvent } from "react";
|
||||||
|
import { useNavigate, Link } from "react-router-dom";
|
||||||
import { AuthContext } from "../context/auth";
|
import { AuthContext } from "../context/auth";
|
||||||
import {
|
import {
|
||||||
|
Box,
|
||||||
|
Typography,
|
||||||
TextField,
|
TextField,
|
||||||
Button,
|
Button,
|
||||||
CircularProgress,
|
CircularProgress,
|
||||||
Typography,
|
Grid,
|
||||||
Box,
|
|
||||||
Container,
|
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { useGlobalInfoStore } from "../context/globalInfo";
|
import { useGlobalInfoStore } from "../context/globalInfo";
|
||||||
import { apiUrl } from "../apiConfig";
|
import { apiUrl } from "../apiConfig";
|
||||||
@@ -17,17 +17,21 @@ const Register = () => {
|
|||||||
const [form, setForm] = useState({
|
const [form, setForm] = useState({
|
||||||
email: "",
|
email: "",
|
||||||
password: "",
|
password: "",
|
||||||
|
confirmPassword: "",
|
||||||
});
|
});
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const { notify } = useGlobalInfoStore();
|
const { notify } = useGlobalInfoStore();
|
||||||
const { email, password } = form;
|
const { email, password, confirmPassword } = form;
|
||||||
|
|
||||||
const { state, dispatch } = useContext(AuthContext);
|
const { state, dispatch } = useContext(AuthContext);
|
||||||
const { user } = state;
|
const { user } = state;
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (user !== null) navigate("/");
|
if (user) {
|
||||||
|
navigate("/");
|
||||||
|
}
|
||||||
}, [user, navigate]);
|
}, [user, navigate]);
|
||||||
|
|
||||||
const handleChange = (e: any) => {
|
const handleChange = (e: any) => {
|
||||||
@@ -37,165 +41,224 @@ const Register = () => {
|
|||||||
|
|
||||||
const submitForm = async (e: any) => {
|
const submitForm = async (e: any) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
if (password !== confirmPassword) {
|
||||||
|
notify("error", "Passwords do not match.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const { data } = await axios.post(`${apiUrl}/auth/register`, {
|
const { data } = await axios.post(`${apiUrl}/auth/register`, {
|
||||||
email,
|
email,
|
||||||
password,
|
password,
|
||||||
});
|
});
|
||||||
dispatch({
|
dispatch({ type: "LOGIN", payload: data });
|
||||||
type: "LOGIN",
|
|
||||||
payload: data,
|
|
||||||
});
|
|
||||||
notify("success", "Welcome to Maxun!");
|
notify("success", "Welcome to Maxun!");
|
||||||
window.localStorage.setItem("user", JSON.stringify(data));
|
window.localStorage.setItem("user", JSON.stringify(data));
|
||||||
navigate("/");
|
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);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Grid container sx={{ height: "calc(100vh - 60px)" }}>
|
||||||
sx={{
|
{/* Left Side: Register Form */}
|
||||||
display: "flex",
|
<Grid
|
||||||
flexDirection: "column",
|
item
|
||||||
alignItems: "center",
|
xs={12}
|
||||||
justifyContent: "center",
|
md={6}
|
||||||
|
|
||||||
height: "calc(100vh - 64px)",
|
|
||||||
backgroundColor: "#f5f5f5",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
component="form"
|
|
||||||
onSubmit={submitForm}
|
|
||||||
sx={{
|
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",
|
display: "flex",
|
||||||
flexDirection: "column",
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
backgroundColor: "#ffffff", // Light background color
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography variant="h4" gutterBottom color={"#ff00c3"}>
|
<Box
|
||||||
Create an account
|
component="form"
|
||||||
</Typography>
|
onSubmit={submitForm}
|
||||||
<TextField
|
|
||||||
margin="normal"
|
|
||||||
required
|
|
||||||
fullWidth
|
|
||||||
id="email"
|
|
||||||
label="Email Address"
|
|
||||||
name="email"
|
|
||||||
value={email}
|
|
||||||
onChange={handleChange}
|
|
||||||
autoComplete="email"
|
|
||||||
sx={{
|
sx={{
|
||||||
// Styles for the input root
|
textAlign: "center",
|
||||||
"& .MuiOutlinedInput-root": {
|
maxWidth: 400,
|
||||||
backgroundColor: email ? "#ffe6f9" : "#ffffff", // Pinkish fill when email has value, white otherwise
|
width: "100%",
|
||||||
"& fieldset": {
|
backgroundColor: "#f9f9f9",
|
||||||
borderColor: "#ff33cc", // Pink border color
|
padding: 4,
|
||||||
},
|
borderRadius: 4,
|
||||||
"&:hover fieldset": {
|
boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.1)",
|
||||||
borderColor: "#ff33cc", // Pink border on hover
|
border: "2px solid #ff00c3",
|
||||||
},
|
display: "flex",
|
||||||
"&.Mui-focused fieldset": {
|
flexDirection: "column",
|
||||||
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
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
|
|
||||||
/>
|
|
||||||
<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 ? (
|
<Typography variant="h4" gutterBottom color="#ff00c3">
|
||||||
<>
|
Create an Account
|
||||||
<CircularProgress size={20} sx={{ mr: 2 }} />
|
</Typography>
|
||||||
Loading
|
<TextField
|
||||||
</>
|
fullWidth
|
||||||
) : (
|
label="Email"
|
||||||
"Register"
|
name="email"
|
||||||
)}
|
value={email}
|
||||||
</Button>
|
onChange={handleChange}
|
||||||
<Typography variant="body2" align="center">
|
margin="normal"
|
||||||
Already have an account?{" "}
|
variant="outlined"
|
||||||
<Link to="/login" style={{ textDecoration: "none" }}>
|
required
|
||||||
Login
|
sx={{
|
||||||
</Link>
|
"& .MuiOutlinedInput-root": {
|
||||||
</Typography>
|
backgroundColor: email ? "#ffe6f9" : "#ffffff",
|
||||||
</Box>
|
"& fieldset": {
|
||||||
</Box>
|
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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user