533 lines
13 KiB
TypeScript
533 lines
13 KiB
TypeScript
import * as React from "react";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Checkbox,
|
|
FormControlLabel,
|
|
FormLabel,
|
|
FormControl,
|
|
TextField,
|
|
Typography,
|
|
Grid,
|
|
Link,
|
|
InputAdornment,
|
|
} from "@mui/material";
|
|
import { useForm, Controller, SubmitHandler } from "react-hook-form";
|
|
import { useDispatch } from "react-redux";
|
|
import { loginUser } from "../../../redux/slices/authSlice.ts";
|
|
import AppTheme from "../../../shared-theme/AppTheme.tsx";
|
|
import ForgotPassword from "./ForgotPassword.tsx";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { Visibility, VisibilityOff } from "@mui/icons-material";
|
|
import { Card, SignInContainer } from "./styled.css.tsx";
|
|
import { CustomIconButton } from "../../../components/AddUserModal/styled.css.tsx";
|
|
import { AppDispatch } from "../../../redux/store/store.ts";
|
|
|
|
interface ILoginForm {
|
|
email: string;
|
|
password: string;
|
|
}
|
|
|
|
export default function Login(props: { disableCustomTheme?: boolean }) {
|
|
const [open, setOpen] = React.useState(false);
|
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors, isValid },
|
|
trigger,
|
|
} = useForm<ILoginForm>({ mode: "onChange" });
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
const router = useNavigate();
|
|
|
|
const handleClickOpen = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
const togglePasswordVisibility = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
setShowPassword((prev) => !prev);
|
|
};
|
|
|
|
const onSubmit: SubmitHandler<ILoginForm> = async (data: ILoginForm) => {
|
|
const isValid = await trigger();
|
|
if (!isValid) {
|
|
return;
|
|
}
|
|
try {
|
|
const response = await dispatch(loginUser(data)).unwrap();
|
|
if (response?.data?.token) {
|
|
router("/panel/dashboard");
|
|
}
|
|
} catch (error: any) {
|
|
console.log("Login failed:", error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AppTheme {...props}>
|
|
<SignInContainer direction="column" justifyContent="space-between">
|
|
<Grid container sx={{ minHeight: "100vh" }}>
|
|
|
|
<Grid
|
|
item
|
|
xs={0}
|
|
sm={0}
|
|
md={7}
|
|
sx={{
|
|
background: `url('/Login.svg') center/cover no-repeat`,
|
|
backgroundSize: "cover",
|
|
display: { xs: "none", md: "block" },
|
|
position: "relative",
|
|
}}
|
|
>
|
|
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
display: { xs: "none", md: "block" },
|
|
}}
|
|
>
|
|
<img
|
|
src="/evLogo.png"
|
|
alt="Logo"
|
|
style={{
|
|
width: "250px",
|
|
height: "auto",
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Grid>
|
|
|
|
{/* Form Section */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
md={5}
|
|
sx={{
|
|
backgroundColor: "black",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
flexDirection: "column",
|
|
padding: { xs: "1.5rem", sm: "2rem", md: "3rem" },
|
|
position: "relative",
|
|
}}
|
|
>
|
|
|
|
<Box
|
|
sx={{
|
|
display: { xs: "flex", md: "none" },
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
mb: 4,
|
|
}}
|
|
>
|
|
<img
|
|
src="/evLogo.png"
|
|
alt="Logo"
|
|
style={{
|
|
width: "200px",
|
|
maxWidth: "100%",
|
|
height: "auto",
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
<Typography
|
|
variant="h3"
|
|
sx={{
|
|
color: "white",
|
|
textAlign: "center",
|
|
fontSize: {
|
|
xs: "1.8rem",
|
|
sm: "2.2rem",
|
|
md: "2.5rem",
|
|
},
|
|
width: "100%",
|
|
mb: { xs: 2, md: 3 },
|
|
mt: { xs: 0, md: 0 },
|
|
}}
|
|
>
|
|
Welcome Back!
|
|
</Typography>
|
|
|
|
<Card
|
|
variant="outlined"
|
|
sx={{
|
|
width: { xs: "100%", sm: "90%", md: "90%", lg: "408px" },
|
|
maxWidth: "408px",
|
|
minHeight: { xs: "auto", md: "428px" },
|
|
padding: { xs: "16px", sm: "20px", md: "24px" },
|
|
borderRadius: "9px",
|
|
border: "none",
|
|
"*:where([data-mui-color-scheme='dark']) &": {
|
|
backgroundColor: "#1E1E1E",
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
component="form"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
noValidate
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: { xs: 1.5, md: 2 },
|
|
}}
|
|
>
|
|
<Typography
|
|
component="h1"
|
|
variant="h4"
|
|
sx={{
|
|
textAlign: "center",
|
|
color: "white",
|
|
fontSize: { xs: "20px", md: "24px" },
|
|
}}
|
|
>
|
|
Login
|
|
</Typography>
|
|
<Typography
|
|
component="h6"
|
|
variant="subtitle2"
|
|
sx={{
|
|
textAlign: "center",
|
|
color: "white",
|
|
fontSize: { xs: "14px", md: "16px" },
|
|
mb: 1,
|
|
}}
|
|
>
|
|
Log in with your email and password
|
|
</Typography>
|
|
|
|
{/* Email Field */}
|
|
<FormControl sx={{ width: "100%" }}>
|
|
<FormLabel
|
|
htmlFor="email"
|
|
sx={{
|
|
fontSize: {
|
|
xs: "0.875rem",
|
|
sm: "1rem",
|
|
},
|
|
color: "white",
|
|
mb: 0.5,
|
|
}}
|
|
>
|
|
Email
|
|
</FormLabel>
|
|
<Controller
|
|
name="email"
|
|
control={control}
|
|
defaultValue=""
|
|
rules={{
|
|
required: "Email is required",
|
|
pattern: {
|
|
value: /\S+@\S+\.\S+/,
|
|
message:
|
|
"Please enter a valid email address.",
|
|
},
|
|
}}
|
|
render={({ field }) => (
|
|
<TextField
|
|
{...field}
|
|
error={!!errors.email}
|
|
helperText={
|
|
errors.email?.message
|
|
}
|
|
id="email"
|
|
type="email"
|
|
placeholder="Email"
|
|
autoComplete="email"
|
|
autoFocus
|
|
required
|
|
fullWidth
|
|
variant="outlined"
|
|
color={
|
|
errors.email
|
|
? "error"
|
|
: "primary"
|
|
}
|
|
InputProps={{
|
|
sx: {
|
|
height: { xs: "45px", md: "50px" },
|
|
alignItems: "center",
|
|
backgroundColor:
|
|
"#1E1F1F",
|
|
},
|
|
}}
|
|
sx={{
|
|
"& .MuiOutlinedInput-root":
|
|
{
|
|
backgroundColor:
|
|
"#1E1F1F",
|
|
borderRadius: "4px",
|
|
"& fieldset": {
|
|
borderColor:
|
|
"#4b5255",
|
|
},
|
|
"&:hover fieldset":
|
|
{
|
|
borderColor:
|
|
"#4b5255",
|
|
},
|
|
"&.Mui-focused fieldset":
|
|
{
|
|
borderColor:
|
|
"#4b5255",
|
|
},
|
|
},
|
|
|
|
"& input": {
|
|
color: "white",
|
|
fontSize: {
|
|
xs: "0.875rem",
|
|
sm: "1rem",
|
|
},
|
|
fontFamily:
|
|
"Gilroy, sans-serif",
|
|
},
|
|
"& .MuiInputBase-input::placeholder":
|
|
{
|
|
color: "white",
|
|
opacity: 1,
|
|
fontFamily:
|
|
"Gilroy, sans-serif",
|
|
},
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
</FormControl>
|
|
|
|
{/* Password Field */}
|
|
<FormControl sx={{ width: "100%" }}>
|
|
<FormLabel
|
|
htmlFor="password"
|
|
sx={{
|
|
fontSize: {
|
|
xs: "0.875rem",
|
|
sm: "1rem",
|
|
},
|
|
color: "white",
|
|
fontFamily: "Gilroy, sans-serif",
|
|
mb: 0.5,
|
|
}}
|
|
>
|
|
Password
|
|
</FormLabel>
|
|
<Controller
|
|
name="password"
|
|
control={control}
|
|
defaultValue=""
|
|
rules={{
|
|
required: "Password is required",
|
|
minLength: {
|
|
value: 6,
|
|
message:
|
|
"Password must be at least 6 characters long.",
|
|
},
|
|
pattern: {
|
|
value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,
|
|
message:
|
|
"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
|
|
},
|
|
}}
|
|
render={({ field }) => (
|
|
<TextField
|
|
{...field}
|
|
error={!!errors.password}
|
|
helperText={
|
|
errors.password?.message
|
|
}
|
|
name="password"
|
|
placeholder="Password"
|
|
type={
|
|
showPassword
|
|
? "text"
|
|
: "password"
|
|
}
|
|
id="password"
|
|
autoComplete="current-password"
|
|
required
|
|
fullWidth
|
|
variant="outlined"
|
|
color={
|
|
errors.password
|
|
? "error"
|
|
: "primary"
|
|
}
|
|
InputProps={{
|
|
sx: {
|
|
height: { xs: "45px", md: "50px" },
|
|
},
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<CustomIconButton
|
|
aria-label="toggle password visibility"
|
|
onClick={
|
|
togglePasswordVisibility
|
|
} // Only the button triggers visibility toggle
|
|
edge="end"
|
|
>
|
|
{showPassword ? (
|
|
<VisibilityOff />
|
|
) : (
|
|
<Visibility />
|
|
)}
|
|
</CustomIconButton>
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
sx={{
|
|
"& .MuiOutlinedInput-root":
|
|
{
|
|
backgroundColor:
|
|
"#1E1F1F",
|
|
borderRadius: "4px",
|
|
"& fieldset": {
|
|
borderColor:
|
|
"#4b5255",
|
|
},
|
|
"&:hover fieldset":
|
|
{
|
|
borderColor:
|
|
"#4b5255",
|
|
},
|
|
"&.Mui-focused fieldset":
|
|
{
|
|
borderColor:
|
|
"#4b5255",
|
|
},
|
|
},
|
|
"& input": {
|
|
color: "white",
|
|
fontSize: {
|
|
xs: "0.875rem",
|
|
sm: "1rem",
|
|
},
|
|
},
|
|
"& .MuiInputBase-input::placeholder":
|
|
{
|
|
color: "white",
|
|
opacity: 1,
|
|
},
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
</FormControl>
|
|
|
|
{/* Remember me and Forgot Password */}
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
color: "white",
|
|
alignItems: "center",
|
|
flexWrap: { xs: "wrap", sm: "nowrap" },
|
|
gap: 1,
|
|
mt: 1,
|
|
}}
|
|
>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
value="remember"
|
|
sx={{
|
|
width: { xs: 16, md: 20 },
|
|
height: { xs: 16, md: 20 },
|
|
border: "2px solid #4b5255",
|
|
borderRadius: "4px",
|
|
backgroundColor:
|
|
"transparent",
|
|
"&:hover": {
|
|
backgroundColor:
|
|
"transparent",
|
|
},
|
|
"&.Mui-checked": {
|
|
backgroundColor:
|
|
"transparent",
|
|
borderColor: "#4b5255",
|
|
"&:hover": {
|
|
backgroundColor:
|
|
"transparent",
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
}
|
|
label={
|
|
<Typography
|
|
sx={{
|
|
fontSize: {
|
|
xs: "0.75rem",
|
|
sm: "0.875rem",
|
|
md: "1rem"
|
|
}
|
|
}}
|
|
>
|
|
Remember me
|
|
</Typography>
|
|
}
|
|
/>
|
|
|
|
<Link
|
|
component="button"
|
|
type="button"
|
|
onClick={handleClickOpen}
|
|
variant="body2"
|
|
sx={{
|
|
alignSelf: "center",
|
|
color: "#01579b",
|
|
textDecoration: "none",
|
|
fontSize: {
|
|
xs: "0.75rem",
|
|
sm: "0.875rem",
|
|
md: "1rem"
|
|
},
|
|
}}
|
|
>
|
|
Forgot password?
|
|
</Link>
|
|
</Box>
|
|
<ForgotPassword
|
|
open={open}
|
|
handleClose={handleClose}
|
|
/>
|
|
|
|
{/* Login Button */}
|
|
<Button
|
|
type="submit"
|
|
fullWidth
|
|
disabled={!isValid}
|
|
sx={{
|
|
color: "#ffffff !important",
|
|
fontWeight: 500,
|
|
backgroundColor: "#52ACDF",
|
|
"&:hover": {
|
|
backgroundColor: "#52ACDF",
|
|
},
|
|
padding: { xs: "8px 0", md: "10px 0" },
|
|
mt: { xs: 2, md: 3 },
|
|
fontSize: { xs: "0.875rem", md: "1rem" },
|
|
}}
|
|
>
|
|
Login
|
|
</Button>
|
|
</Box>
|
|
</Card>
|
|
</Grid>
|
|
</Grid>
|
|
</SignInContainer>
|
|
</AppTheme>
|
|
);
|
|
}
|