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

dev-jaanvi #1

Open
jaanvi wants to merge 155 commits from dev-jaanvi into main
pull from: dev-jaanvi
merge into: jaanvi:main
Conversation 1 Commits 155 Files changed 39 +255 -263
2 changed files with 255 additions and 263 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit e61b6460a1 - Show all commits

117
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,13 +63,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
}; };
return ( return (
<ThemeProvider theme={theme}>
<AppTheme {...props}> <AppTheme {...props}>
<CssBaseline enableColorScheme /> {/* <CssBaseline enableColorScheme /> */}
<SignInContainer <SignInContainer direction="column" justifyContent="space-between">
direction="column"
justifyContent="space-between"
>
{/* <ColorModeSelect {/* <ColorModeSelect
sx={{ position: "fixed", top: "1rem", right: "1rem" }} sx={{ position: "fixed", top: "1rem", right: "1rem" }}
/> */} /> */}
@ -174,6 +120,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
sx={{ sx={{
width: "100%", width: "100%",
textAlign: "center", textAlign: "center",
color: "white",
}} }}
> >
Login Login
@ -184,6 +131,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
sx={{ sx={{
width: "100%", width: "100%",
textAlign: "center", textAlign: "center",
color: "white",
}} }}
> >
Log in with your email and password Log in with your email and password
@ -191,7 +139,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<FormControl> <FormControl>
<FormLabel <FormLabel
htmlFor="email" htmlFor="email"
sx={{ fontSize: "1rem" }} sx={{
fontSize: "1rem",
color: "white",
}}
> >
Email Email
</FormLabel> </FormLabel>
@ -222,6 +173,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
required required
fullWidth fullWidth
variant="outlined" variant="outlined"
color={ color={
errors.email errors.email
? "error" ? "error"
@ -235,7 +187,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<FormControl> <FormControl>
<FormLabel <FormLabel
htmlFor="password" htmlFor="password"
sx={{ fontSize: "1rem" }} sx={{
fontSize: "1rem",
color: "white",
}}
> >
Password Password
</FormLabel> </FormLabel>
@ -244,8 +199,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
control={control} control={control}
defaultValue="" defaultValue=""
rules={{ rules={{
required: required: "Password is required",
"Password is required",
minLength: { minLength: {
value: 6, value: 6,
message: message:
@ -260,12 +214,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
> >
<TextField <TextField
{...field} {...field}
error={ error={!!errors.password}
!!errors.password
}
helperText={ helperText={
errors.password errors.password?.message
?.message
} }
name="password" name="password"
placeholder="Password" placeholder="Password"
@ -284,8 +235,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
/> />
<IconButton <IconButton
sx={{ sx={{
position: position: "absolute",
"absolute",
top: "50%", top: "50%",
right: "10px", right: "10px",
background: "none", background: "none",
@ -295,7 +245,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
"translateY(-50%)", "translateY(-50%)",
"&:hover": { "&:hover": {
backgroundColor: backgroundColor:
"transparent", // Darker shade on hover "transparent",
borderColor: borderColor:
"transparent", "transparent",
}, },
@ -320,6 +270,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
color: "white",
}} }}
> >
<FormControlLabel <FormControlLabel
@ -337,9 +288,12 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
type="button" type="button"
onClick={handleClickOpen} onClick={handleClickOpen}
variant="body2" variant="body2"
sx={{ alignSelf: "center" }} sx={{
alignSelf: "center",
color: "#01579b",
}}
> >
Forgot your password? Forgot password?
</Link> </Link>
</Box> </Box>
<ForgotPassword <ForgotPassword
@ -349,10 +303,18 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<Button <Button
type="submit" type="submit"
fullWidth fullWidth
variant="contained" // variant="contained"
color="secondary" // color="primary"
sx={{
color: "white",
backgroundColor: "#52ACDF",
"&:hover": {
backgroundColor: "#52ACDF",
opacity: 0.9,
},
}}
> >
Sign in Login
</Button> </Button>
{/* <Divider>or</Divider> {/* <Divider>or</Divider>
@ -380,6 +342,5 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
</Grid> </Grid>
</SignInContainer> </SignInContainer>
</AppTheme> </AppTheme>
</ThemeProvider>
); );
} }

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,
},
}));