vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fill color changed to pink and removed blue color

Browse Source
This commit is contained in:
AmitChauhan63390
2024-11-16 16:43:38 +05:30
parent 0b933c3fee
commit 2a0c03d503
2 changed files with 369 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/pages/Login.tsx
View File

@@ -1,21 +1,21 @@
import axios from 'axios'; import axios from "axios";
import { useState, useContext, useEffect } from 'react'; import { useState, useContext, useEffect } 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 {
Box, Box,
Typography, Typography,
TextField, TextField,
Button, Button,
CircularProgress, CircularProgress,
} from '@mui/material'; } from "@mui/material";
import { useGlobalInfoStore } from "../context/globalInfo"; import { useGlobalInfoStore } from "../context/globalInfo";
import { apiUrl } from "../apiConfig"; import { apiUrl } from "../apiConfig";
const Login = () => { const Login = () => {
const [form, setForm] = useState({ const [form, setForm] = useState({
email: '', email: "",
password: '', password: "",
}); });
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const { notify } = useGlobalInfoStore(); const { notify } = useGlobalInfoStore();
@@ -28,7 +28,7 @@ const Login = () => {
useEffect(() => { useEffect(() => {
if (user) { if (user) {
navigate('/'); navigate("/");
} }
}, [user, navigate]); }, [user, navigate]);
@@ -41,13 +41,16 @@ const Login = () => {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
try { try {
const { data } = await axios.post(`${apiUrl}/auth/login`, { email, password }); const { data } = await axios.post(`${apiUrl}/auth/login`, {
dispatch({ type: 'LOGIN', payload: data }); email,
notify('success', 'Welcome to Maxun!'); password,
window.localStorage.setItem('user', JSON.stringify(data)); });
navigate('/'); dispatch({ type: "LOGIN", payload: data });
notify("success", "Welcome to Maxun!");
window.localStorage.setItem("user", JSON.stringify(data));
navigate("/");
} catch (err: any) { } catch (err: any) {
notify('error', err.response.data || 'Login Failed. Please try again.'); notify("error", err.response.data || "Login Failed. Please try again.");
setLoading(false); setLoading(false);
} }
}; };
@@ -55,18 +58,30 @@ const Login = () => {
return ( return (
<Box <Box
sx={{ sx={{
display: 'flex', display: "flex",
flexDirection: 'column', flexDirection: "column",
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
backgroundColor: '#f5f5f5', backgroundColor: "#f5f5f5",
height: "calc(100vh - 64px)", height: "calc(100vh - 64px)",
}} }}
> >
<Box component="form" onSubmit={submitForm} 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' }}> <Box
component="form"
onSubmit={submitForm}
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",
}}
>
<Typography variant="h4" gutterBottom color={"#ff00c3"}> <Typography variant="h4" gutterBottom color={"#ff00c3"}>
Welcome Back! Welcome Back!
</Typography> </Typography>
@@ -80,20 +95,34 @@ const Login = () => {
variant="outlined" variant="outlined"
required required
sx={{ sx={{
'& .MuiOutlinedInput-root': { // Styles for the input root
backgroundColor: email ? '#ffe6f9' : '#ffffff', "& .MuiOutlinedInput-root": {
// backgroundColor: ' #ffe6f9', // Change fill color here backgroundColor: email ? "#ffe6f9" : "#ffffff", // Pinkish fill when email has value, white otherwise
'& fieldset': { "& fieldset": {
borderColor: '#ff33cc', // Border color (optional) borderColor: "#ff33cc", // Pink border color
}, },
'&:hover fieldset': { "&:hover fieldset": {
borderColor: '#ff33cc', // Hover border color (optional) borderColor: "#ff33cc", // Pink border on hover
}, },
'&.Mui-focused fieldset': { "&.Mui-focused fieldset": {
borderColor: '#ff33cc', // Focus border color (optional) 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 <TextField
fullWidth fullWidth
@@ -106,20 +135,34 @@ const Login = () => {
variant="outlined" variant="outlined"
required required
sx={{ sx={{
'& .MuiOutlinedInput-root': { // Styles for the input root
backgroundColor: password ? '#ffe6f9' : '#ffffff', "& .MuiOutlinedInput-root": {
// backgroundColor: ' #ffe6f9', // Change fill color here backgroundColor: password ? "#ffe6f9" : "#ffffff", // Pinkish fill when email has value, white otherwise
'& fieldset': { "& fieldset": {
borderColor: '#ff33cc', // Border color (optional) borderColor: "#ff33cc", // Pink border color
}, },
'&:hover fieldset': { "&:hover fieldset": {
borderColor: '#ff33cc', // Hover border color (optional) borderColor: "#ff33cc", // Pink border on hover
}, },
'&.Mui-focused fieldset': { "&.Mui-focused fieldset": {
borderColor: '#ff33cc', // Focus border color (optional) 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 <Button
@@ -136,18 +179,17 @@ const Login = () => {
Loading Loading
</> </>
) : ( ) : (
'Login' "Login"
)} )}
</Button> </Button>
<Typography variant="body2" align="center"> <Typography variant="body2" align="center">
Don’t have an account?{' '} Don’t have an account?{" "}
<Link to="/register" style={{ textDecoration: 'none'}}> <Link to="/register" style={{ textDecoration: "none" }}>
Register Register
</Link> </Link>
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
); );
}; };

132
src/pages/Register.tsx
View File

@@ -1,15 +1,22 @@
import { useState, useContext, useEffect } from 'react'; import { useState, useContext, useEffect } from "react";
import { useNavigate, Link } from 'react-router-dom'; import { useNavigate, Link } from "react-router-dom";
import axios from 'axios'; import axios from "axios";
import { AuthContext } from '../context/auth'; import { AuthContext } from "../context/auth";
import { TextField, Button, CircularProgress, Typography, Box, Container } from '@mui/material'; import {
TextField,
Button,
CircularProgress,
Typography,
Box,
Container,
} from "@mui/material";
import { useGlobalInfoStore } from "../context/globalInfo"; import { useGlobalInfoStore } from "../context/globalInfo";
import { apiUrl } from "../apiConfig"; import { apiUrl } from "../apiConfig";
const Register = () => { const Register = () => {
const [form, setForm] = useState({ const [form, setForm] = useState({
email: '', email: "",
password: '', password: "",
}); });
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const { notify } = useGlobalInfoStore(); const { notify } = useGlobalInfoStore();
@@ -20,7 +27,7 @@ const Register = () => {
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
if (user !== null) navigate('/'); if (user !== null) navigate("/");
}, [user, navigate]); }, [user, navigate]);
const handleChange = (e: any) => { const handleChange = (e: any) => {
@@ -37,14 +44,17 @@ const Register = () => {
password, password,
}); });
dispatch({ dispatch({
type: 'LOGIN', type: "LOGIN",
payload: data, 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: any) {
notify('error', err.response.data || 'Registration Failed. Please try again.'); notify(
"error",
err.response.data || "Registration Failed. Please try again."
);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -53,20 +63,31 @@ const Register = () => {
return ( return (
<Box <Box
sx={{ sx={{
display: 'flex', display: "flex",
flexDirection: 'column', flexDirection: "column",
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
height: "calc(100vh - 64px)", height: "calc(100vh - 64px)",
backgroundColor: '#f5f5f5', backgroundColor: "#f5f5f5",
}} }}
> >
<Box
<Box component="form" onSubmit={submitForm} 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' }}> component="form"
<Typography variant="h4" gutterBottom color={'#ff00c3'}> onSubmit={submitForm}
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",
}}
>
<Typography variant="h4" gutterBottom color={"#ff00c3"}>
Create an account Create an account
</Typography> </Typography>
<TextField <TextField
@@ -79,6 +100,35 @@ const Register = () => {
value={email} value={email}
onChange={handleChange} onChange={handleChange}
autoComplete="email" autoComplete="email"
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
},
}}
/> />
<TextField <TextField
margin="normal" margin="normal"
@@ -91,6 +141,35 @@ const Register = () => {
value={password} value={password}
onChange={handleChange} onChange={handleChange}
autoComplete="current-password" 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 <Button
type="submit" type="submit"
@@ -106,18 +185,17 @@ const Register = () => {
Loading Loading
</> </>
) : ( ) : (
'Register' "Register"
)} )}
</Button> </Button>
<Typography variant="body2" align="center"> <Typography variant="body2" align="center">
Already have an account?{' '} Already have an account?{" "}
<Link to="/login" style={{ textDecoration: 'none' }}> <Link to="/login" style={{ textDecoration: "none" }}>
Login Login
</Link> </Link>
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
); );
}; };