jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

Create loginPage

Browse source
This commit is contained in:
jaanvi 2025-02-21 12:53:19 +05:30
parent 709d9e17fc
commit e61b6460a1
2 changed files with 255 additions and 263 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

487
src/pages/Auth/Login/index.tsx
View file

@ -3,14 +3,11 @@ import {
Box, Box,
Button, Button,
Checkbox, Checkbox,
CssBaseline,
FormControlLabel, FormControlLabel,
FormLabel, FormLabel,
FormControl, FormControl,
TextField, TextField,
Typography, Typography,
Stack,
Card as MuiCard,
Grid, Grid,
IconButton, IconButton,
Link, Link,
@ -25,56 +22,10 @@ import ForgotPassword from "./ForgotPassword.tsx";
import { toast } from "sonner"; import { toast } from "sonner";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Visibility, VisibilityOff } from "@mui/icons-material"; import { Visibility, VisibilityOff } from "@mui/icons-material";
import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined"; import { Card, SignInContainer } from "./styled.css.tsx";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { lime, purple } from "@mui/material/colors";
const Card = styled(MuiCard)(({ theme }) => ({
display: "flex",
flexDirection: "column",
alignSelf: "center",
width: "100%",
padding: theme.spacing(4),
gap: theme.spacing(2),
margin: "16px",
backgroundColor: "#1E1F1F",
[theme.breakpoints.up("sm")]: {
maxWidth: "450px",
},
// boxShadow:
// "hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
// ...theme.applyStyles("dark", {
// boxShadow:
// "hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px",
// }),
}));
const theme = createTheme({
palette: {
primary: lime,
secondary: purple,
},
});
const SignInContainer = styled(Stack)(({ theme }) => ({
height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
minHeight: "100%",
// padding: theme.spacing(2),
// [theme.breakpoints.up("sm")]: {
// padding: theme.spacing(4),
// },
"&::before": {
content: '""',
display: "block",
position: "absolute",
zIndex: -1,
inset: 0,
backgroundImage:
"radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))",
backgroundRepeat: "no-repeat",
...theme.applyStyles("dark", {
backgroundImage:
"radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))",
}),
},
}));
interface ILoginForm { interface ILoginForm {
email: string; email: string;
password: string; password: string;
@ -82,7 +33,6 @@ interface ILoginForm {
export default function Login(props: { disableCustomTheme?: boolean }) { export default function Login(props: { disableCustomTheme?: boolean }) {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
console.log("theme", theme.palette.background);
const [showPassword, setShowPassword] = React.useState(false); const [showPassword, setShowPassword] = React.useState(false);
const { const {
control, control,
@ -113,249 +63,261 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
}; };
return ( return (
<ThemeProvider theme={theme}> <AppTheme {...props}>
<AppTheme {...props}> {/* <CssBaseline enableColorScheme /> */}
<CssBaseline enableColorScheme /> <SignInContainer direction="column" justifyContent="space-between">
<SignInContainer {/* <ColorModeSelect
direction="column"
justifyContent="space-between"
>
{/* <ColorModeSelect
sx={{ position: "fixed", top: "1rem", right: "1rem" }} sx={{ position: "fixed", top: "1rem", right: "1rem" }}
/> */} /> */}
<Grid container sx={{ height: "100vh" }}> <Grid container sx={{ height: "100vh" }}>
<Grid <Grid
item item
xs={7} xs={7}
sx={{ sx={{
background: `url('/mainPageLogo.png') center/cover no-repeat`, background: `url('/mainPageLogo.png') center/cover no-repeat`,
}} }}
/> />
<Grid <Grid
item item
xs={5} xs={5}
sx={{
backgroundColor: "black",
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
}}
>
<Typography
variant="h3"
sx={{ sx={{
backgroundColor: "black", color: "white",
display: "flex",
justifyContent: "center", textAlign: "center",
alignItems: "center",
flexDirection: "column",
}} }}
> >
<Typography Welcome Back!
variant="h3" </Typography>
sx={{ <Card variant="outlined">
color: "white", {/* <SitemarkIcon /> */}
textAlign: "center", <Box
component="form"
onSubmit={handleSubmit(onSubmit)}
noValidate
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
gap: 2,
}} }}
> >
Welcome Back! <Typography
</Typography> component="h1"
<Card variant="outlined"> variant="h4"
{/* <SitemarkIcon /> */}
<Box
component="form"
onSubmit={handleSubmit(onSubmit)}
noValidate
sx={{ sx={{
display: "flex",
flexDirection: "column",
width: "100%", width: "100%",
gap: 2, textAlign: "center",
color: "white",
}} }}
> >
<Typography Login
component="h1" </Typography>
variant="h4" <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={{ sx={{
width: "100%", fontSize: "1rem",
textAlign: "center", color: "white",
}} }}
> >
Login Email
</Typography> </FormLabel>
<Typography <Controller
component="h6" name="email"
variant="subtitle2" 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={{ sx={{
width: "100%", fontSize: "1rem",
textAlign: "center", color: "white",
}} }}
> >
Log in with your email and password Password
</Typography> </FormLabel>
<FormControl> <Controller
<FormLabel name="password"
htmlFor="email" control={control}
sx={{ fontSize: "1rem" }} defaultValue=""
> rules={{
Email required: "Password is required",
</FormLabel> minLength: {
<Controller value: 6,
name="email" message:
control={control} "Password must be at least 6 characters long.",
defaultValue="" },
rules={{ }}
required: "Email is required", render={({ field }) => (
pattern: { <Box
value: /\S+@\S+\.\S+/, sx={{
message: position: "relative",
"Please enter a valid email address.", }}
}, >
}}
render={({ field }) => (
<TextField <TextField
{...field} {...field}
error={!!errors.email} error={!!errors.password}
helperText={ helperText={
errors.email?.message errors.password?.message
} }
id="email" name="password"
type="email" placeholder="Password"
placeholder="Email" type="password"
autoComplete="email" id="password"
autoComplete="current-password"
autoFocus autoFocus
required required
fullWidth fullWidth
variant="outlined" variant="outlined"
color={ color={
errors.email errors.password
? "error" ? "error"
: "primary" : "primary"
} }
/> />
)} <IconButton
/>
</FormControl>
<FormControl>
<FormLabel
htmlFor="password"
sx={{ fontSize: "1rem" }}
>
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={{ sx={{
position: "relative", position: "absolute",
}} top: "50%",
> right: "10px",
<TextField background: "none",
{...field} borderColor:
error={ "transparent",
!!errors.password transform:
} "translateY(-50%)",
helperText={ "&:hover": {
errors.password backgroundColor:
?.message "transparent",
}
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: borderColor:
"transparent", "transparent",
transform: },
"translateY(-50%)", }}
"&:hover": { onClick={() =>
backgroundColor: setShowPassword(
"transparent", // Darker shade on hover (prev) => !prev
borderColor: )
"transparent", }
}, >
}} {showPassword ? (
onClick={() => <VisibilityOff />
setShowPassword( ) : (
(prev) => !prev <Visibility />
) )}
} </IconButton>
> </Box>
{showPassword ? ( )}
<VisibilityOff /> />
) : ( </FormControl>
<Visibility /> <Box
)} sx={{
</IconButton> display: "flex",
</Box> justifyContent: "space-between",
)} color: "white",
/> }}
</FormControl> >
<Box <FormControlLabel
control={
<Checkbox
value="remember"
color="primary"
/>
}
label="Remember me"
/>
<Link
component="button"
type="button"
onClick={handleClickOpen}
variant="body2"
sx={{ sx={{
display: "flex", alignSelf: "center",
justifyContent: "space-between", color: "#01579b",
}} }}
> >
<FormControlLabel Forgot password?
control={ </Link>
<Checkbox </Box>
value="remember" <ForgotPassword
color="primary" open={open}
/> handleClose={handleClose}
} />
label="Remember me" <Button
/> type="submit"
fullWidth
// variant="contained"
// color="primary"
sx={{
color: "white",
backgroundColor: "#52ACDF",
"&:hover": {
backgroundColor: "#52ACDF",
opacity: 0.9,
},
}}
>
Login
</Button>
<Link {/* <Divider>or</Divider>
component="button"
type="button"
onClick={handleClickOpen}
variant="body2"
sx={{ alignSelf: "center" }}
>
Forgot your password?
</Link>
</Box>
<ForgotPassword
open={open}
handleClose={handleClose}
/>
<Button
type="submit"
fullWidth
variant="contained"
color="secondary"
>
Sign in
</Button>
{/* <Divider>or</Divider>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@ -374,12 +336,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
</Link> </Link>
</Typography> </Typography>
</Box> */} </Box> */}
</Box> </Box>
</Card> </Card>
</Grid>
</Grid> </Grid>
</SignInContainer> </Grid>
</AppTheme> </SignInContainer>
</ThemeProvider> </AppTheme>
); );
} }

31
src/pages/Auth/Login/styled.css.tsx Normal file
View file

@ -0,0 +1,31 @@
import { styled} from "@mui/material/styles";
import {
Stack,
Card as MuiCard
} from "@mui/material";
// eslint-disable-next-line @typescript-eslint/no-redeclare, @typescript-eslint/no-unused-vars
export const Card = styled(MuiCard)(({ theme }) => ({
display: "flex",
flexDirection: "column",
alignSelf: "center",
width: "100%",
padding: theme.spacing(4),
gap: theme.spacing(2),
margin: "16px",
backgroundColor: "#1E1F1F",
[theme.breakpoints.up("sm")]: {
maxWidth: "450px",
},
}));
export const SignInContainer = styled(Stack)(() => ({
height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
minHeight: "100%",
"&::before": {
content: '""',
display: "block",
position: "absolute",
zIndex: -1,
inset: 0,
},
}));