bulk-email/src/pages/Auth/Login/index.tsx

import * as React from "react";
import {
	Box,
	Button,
	Checkbox,
	FormControlLabel,
	FormLabel,
	FormControl,
	TextField,
	Typography,
	Grid,
	IconButton,
	Link,
} from "@mui/material";
import { styled, useTheme } from "@mui/material/styles";
import { useForm, Controller, SubmitHandler } from "react-hook-form";
import { useDispatch } from "react-redux";
import { loginUser } from "../../../redux/slices/authSlice.ts";
import ColorModeSelect from "../../../shared-theme/ColorModeSelect.tsx";
import AppTheme from "../../../shared-theme/AppTheme.tsx";
import ForgotPassword from "./ForgotPassword.tsx";
import { toast } from "sonner";
import { useNavigate } from "react-router-dom";
import { Visibility, VisibilityOff } from "@mui/icons-material";
import { Card, SignInContainer } from "./styled.css.tsx";



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 },
		setError,
	} = useForm<ILoginForm>();
	const dispatch = useDispatch();
	const router = useNavigate();
	const handleClickOpen = () => {
		setOpen(true);
	};

	const handleClose = () => {
		setOpen(false);
	};

	const onSubmit: SubmitHandler<ILoginForm> = async (data: ILoginForm) => {
		try {
			const response = await dispatch(loginUser(data)).unwrap();
			if (response?.data?.token) {
				router("/panel/dashboard");
			}
		} catch (error: any) {
			console.log("Login failed:", error);
			toast.error("Login failed: " + error);
		}
	};

	return (
		<AppTheme {...props}>
			{/* <CssBaseline enableColorScheme /> */}
			<SignInContainer direction="column" justifyContent="space-between">
				{/* <ColorModeSelect
					sx={{ position: "fixed", top: "1rem", right: "1rem" }}
				/> */}

				<Grid container sx={{ height: "100vh" }}>
					<Grid
						item
						xs={7}
						sx={{
							background: `url('/mainPageLogo.png') center/cover no-repeat`,
						}}
					/>

					<Grid
						item
						xs={5}
						sx={{
							backgroundColor: "black",
							display: "flex",
							justifyContent: "center",
							alignItems: "center",
							flexDirection: "column",
						}}
					>
						<Typography
							variant="h3"
							sx={{
								color: "white",

								textAlign: "center",
							}}
						>
							Welcome Back!
						</Typography>
						<Card variant="outlined">
							{/* <SitemarkIcon /> */}

							<Box
								component="form"
								onSubmit={handleSubmit(onSubmit)}
								noValidate
								sx={{
									display: "flex",
									flexDirection: "column",
									width: "100%",
									gap: 2,
								}}
							>
								<Typography
									component="h1"
									variant="h4"
									sx={{
										width: "100%",
										textAlign: "center",
										color: "white",
									}}
								>
									Login
								</Typography>
								<Typography
									component="h6"
									variant="subtitle2"
									sx={{
										width: "100%",
										textAlign: "center",
										color: "white",
									}}
								>
									Log in with your email and password
								</Typography>
								<FormControl>
									<FormLabel
										htmlFor="email"
										sx={{
											fontSize: "1rem",
											color: "white",
										}}
									>
										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"
												}
											/>
										)}
									/>
								</FormControl>

								<FormControl>
									<FormLabel
										htmlFor="password"
										sx={{
											fontSize: "1rem",
											color: "white",
										}}
									>
										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.",
											},
										}}
										render={({ field }) => (
											<Box
												sx={{
													position: "relative",
												}}
											>
												<TextField
													{...field}
													error={!!errors.password}
													helperText={
														errors.password?.message
													}
													name="password"
													placeholder="Password"
													type="password"
													id="password"
													autoComplete="current-password"
													autoFocus
													required
													fullWidth
													variant="outlined"
													color={
														errors.password
															? "error"
															: "primary"
													}
												/>
												<IconButton
													sx={{
														position: "absolute",
														top: "50%",
														right: "10px",
														background: "none",
														borderColor:
															"transparent",
														transform:
															"translateY(-50%)",
														"&:hover": {
															backgroundColor:
																"transparent",
															borderColor:
																"transparent",
														},
													}}
													onClick={() =>
														setShowPassword(
															(prev) => !prev
														)
													}
												>
													{showPassword ? (
														<VisibilityOff />
													) : (
														<Visibility />
													)}
												</IconButton>
											</Box>
										)}
									/>
								</FormControl>
								<Box
									sx={{
										display: "flex",
										justifyContent: "space-between",
										color: "white",
									}}
								>
									<FormControlLabel
										control={
											<Checkbox
												value="remember"
												color="primary"
											/>
										}
										label="Remember me"
									/>

									<Link
										component="button"
										type="button"
										onClick={handleClickOpen}
										variant="body2"
										sx={{
											alignSelf: "center",
											color: "#01579b",
										}}
									>
										Forgot password?
									</Link>
								</Box>
								<ForgotPassword
									open={open}
									handleClose={handleClose}
								/>
								<Button
									type="submit"
									fullWidth
									// variant="contained"
									// color="primary"
									sx={{
										color: "white",
										backgroundColor: "#52ACDF",
										"&:hover": {
											backgroundColor: "#52ACDF",
											opacity: 0.9,
										},
									}}
								>
									Login
								</Button>

								{/* <Divider>or</Divider>
					<Box
						sx={{
							display: "flex",
							flexDirection: "column",
							gap: 2,
						}}
					>
						<Typography sx={{ textAlign: "center" }}>
							Don&apos;t have an account?{" "}
							<Link
								href="/auth/signup"
								variant="body2"
								sx={{ alignSelf: "center" }}
							>
								Sign up
							</Link>
						</Typography>
					</Box> */}
							</Box>
						</Card>
					</Grid>
				</Grid>
			</SignInContainer>
		</AppTheme>
	);
}