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 +266 -225
5 changed files with 266 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d558697888 - Show all commits

1
package-lock.json generated
View file

@ -15041,6 +15041,7 @@
}, },
"node_modules/typescript": { "node_modules/typescript": {
"version": "5.7.3", "version": "5.7.3",
"dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",

9
src/App.css
View file

@ -1,3 +1,12 @@
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; /* Prevents scrolling */
}
.App { .App {
text-align: center; text-align: center;
} }

1
src/App.tsx
View file

@ -1,6 +1,7 @@
import { BrowserRouter as Router } from "react-router-dom"; import { BrowserRouter as Router } from "react-router-dom";
import AppRouter from "./router"; import AppRouter from "./router";
function App() { function App() {
return ( return (
<Router> <Router>

26
src/components/Loading/index.tsx
View file

@ -1,14 +1,24 @@
import React from 'react'; import React from 'react';
import { useSelector } from 'react-redux'; import { CircularProgress, Box, Typography } from '@mui/material';
// import styled from './Loading.style';
function LoadingComponent() { function LoadingComponent() {
// const { isdarktheme } = useSelector((state) => ({ return (
// isdarktheme: state?.authReducer?.isDarkTheme, <Box
// })); sx={{
display: 'flex',
return (<h1>Loading</h1>); justifyContent: 'center',
alignItems: 'center',
height: '100vh',
width: '100%',
flexDirection: 'column',
}}
>
<CircularProgress size={50} color="primary" />
<Typography variant="h6" sx={{ marginTop: 2 }}>
Loading...
</Typography>
</Box>
);
} }
export default LoadingComponent; export default LoadingComponent;

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

@ -11,6 +11,7 @@ import {
Grid, Grid,
IconButton, IconButton,
Link, Link,
InputAdornment
} from "@mui/material"; } from "@mui/material";
import { useForm, Controller, SubmitHandler } from "react-hook-form"; import { useForm, Controller, SubmitHandler } from "react-hook-form";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
@ -29,7 +30,9 @@ 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);
const [isClicked, setIsClicked] = React.useState(false);
const [showPassword, setShowPassword] = React.useState(false); const [showPassword, setShowPassword] = React.useState(false);
const { const {
control, control,
handleSubmit, handleSubmit,
@ -69,7 +72,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
md={7} md={7}
sx={{ sx={{
background: `url('/mainPageLogo.png') center/cover no-repeat`, background: `url('/mainPageLogo.png') center/cover no-repeat`,
height: { xs: "0%", sm: "0%", md: "100%" }, // height: { xs: "0%", sm: "50%", md: "100%" },
backgroundSize: "cover", backgroundSize: "cover",
display: { xs: "none", md: "block" }, // Hide the image on xs and sm screens display: { xs: "none", md: "block" }, // Hide the image on xs and sm screens
}} }}
@ -77,19 +80,21 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
{/* Form Section */} {/* Form Section */}
<Grid <Grid
item item
xs={12} xs={12}
md={5} md={5}
sx={{ sx={{
backgroundColor: "black", backgroundColor: "black",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
flexDirection: "column", flexDirection: "column",
padding: { xs: "2rem", md: "3rem", lg: "3rem" }, padding: { xs: "2rem", md: "3rem", lg: "3rem" },
height: "100%",
}} height: "auto", // ✅ Allows the height to adjust dynamically
> }}
>
<Typography <Typography
variant="h3" variant="h3"
sx={{ sx={{
@ -105,13 +110,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
Welcome Back! Welcome Back!
</Typography> </Typography>
<Card <Card variant="outlined" sx={{ width: { xs: "100%", sm: "300px",lg:"408px" }, padding: "24px", borderRadius: "12px", backgroundColor: "#1E1E1E", border: "1px solid #4B5255" }}>
variant="outlined"
sx={{
maxWidth: "400px",
width: { xs: "80%", sm: "80%", md: "100%" },
}}
>
<Box <Box
component="form" component="form"
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
@ -122,182 +122,178 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
gap: 2, gap: 2,
}} }}
> >
<Typography <Typography component="h1" variant="h4" sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "24px" }}>Login</Typography>
component="h1" <Typography
variant="h4" component="h6"
sx={{ variant="subtitle2"
textAlign: "center", sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "16px" }}
color: "white", >
fontSize: { xs: "1.5rem", sm: "2rem" }, Log in with your email and password
}} </Typography>
>
Login
</Typography>
<Typography
component="h6"
variant="subtitle2"
sx={{
textAlign: "center",
color: "white",
fontSize: { xs: "0.9rem", sm: "1rem" },
}}
>
Log in with your email and password
</Typography>
<FormControl sx={{ width: "100%" }}>
<FormLabel
htmlFor="email"
sx={{
fontSize: {
xs: "0.9rem",
sm: "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"
}
sx={{
input: {
fontSize: {
xs: "0.9rem",
sm: "1rem",
},
},
}}
/>
)}
/>
</FormControl>
<FormControl sx={{ width: "100%" }}> {/* -------------------------------- Email Field ----------------- */}
<FormLabel <FormControl sx={{ width: "100%" }}>
htmlFor="password" <FormLabel
sx={{ htmlFor="email"
fontSize: { sx={{
xs: "0.9rem", fontSize: { xs: "0.9rem", sm: "1rem" },
sm: "1rem", color: "white",
}, fontFamily: "Gilroy, sans-serif", // ✅ Apply Gilroy font
color: "white", }}
}} >
> Email
Password </FormLabel>
</FormLabel> <Controller
<Controller name="email"
name="password" control={control}
control={control} defaultValue=""
defaultValue="" rules={{
rules={{ required: "Email is required",
required: "Password is required", pattern: {
minLength: { value: /\S+@\S+\.\S+/,
value: 6, message: "Please enter a valid email address.",
message: },
"Password must be at least 6 characters long.", }}
}, render={({ field }) => (
pattern: { <TextField
value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/, {...field}
message: error={!!errors.email}
"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.", helperText={errors.email?.message}
}, id="email"
}} type="email"
render={({ field }) => ( placeholder="Email"
<Box sx={{ position: "relative" }}> autoComplete="email"
<TextField autoFocus
{...field} required
error={!!errors.password} fullWidth
helperText={ variant="outlined"
errors.password?.message color={errors.email ? "error" : "primary"}
} InputProps={{
name="password" sx: {
placeholder="Password" height: "50px",
type={ alignItems: "center",
showPassword backgroundColor: "#1E1F1F",
? "text" fontFamily: "Gilroy, sans-serif",
: "password" },
} }}
id="password" sx={{
autoComplete="current-password" "& .MuiOutlinedInput-root": {
autoFocus backgroundColor: "#1E1F1F",
required borderRadius: "4px",
fullWidth "& fieldset": { borderColor: "#4b5255" },
variant="outlined" "&:hover fieldset": { borderColor: "#4b5255" },
color={ "&.Mui-focused fieldset": { borderColor: "#4b5255" },
errors.password },
? "error" "& input": {
: "primary" color: "white",
} fontSize: { xs: "0.9rem", sm: "1rem" },
sx={{ fontFamily: "Gilroy, sans-serif",
paddingRight: "40px", },
height: "40px", "& .MuiInputBase-input::placeholder": {
marginBottom: "8px", color: "white",
}} opacity: 1,
/> fontFamily: "Gilroy, sans-serif",
<IconButton },
sx={{ }}
position: "absolute", />
top: "50%", )}
right: "10px", />
transform: </FormControl>
"translateY(-50%)",
background: "none",
borderColor: {/* -------------------------------- Password Field ----------------- */}
"transparent", <FormControl sx={{ width: "100%" }}>
"&:hover": { <FormLabel
backgroundColor: htmlFor="password"
"transparent", sx={{
borderColor: fontSize: { xs: "0.9rem", sm: "1rem" },
"transparent", color: "white",
}, fontFamily: "Gilroy, sans-serif",
}} }}
onClick={() => >
setShowPassword( Password
(prev) => !prev </FormLabel>
) <Controller
} name="password"
> control={control}
{showPassword ? ( defaultValue=""
<VisibilityOff /> rules={{
) : ( required: "Password is required",
<Visibility /> minLength: {
)} value: 6,
</IconButton> message: "Password must be at least 6 characters long.",
</Box> },
)} pattern: {
/> value:
</FormControl> /^(?=.*[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: "50px",
fontFamily: "Gilroy, sans-serif", // Apply Gilroy font
},
endAdornment: (
<IconButton
onClick={() => setShowPassword((prev) => !prev)}
edge="end"
sx={{
color: "white",
padding: 0,
margin: 0,
backgroundColor: "transparent",
border: "none",
boxShadow: "none",
"&:hover": { backgroundColor: "transparent" },
"&:focus": { outline: "none", border: "none" },
}}
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
),
}}
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.9rem", sm: "1rem" },
fontFamily: "Gilroy, sans-serif",
},
"& .MuiInputBase-input::placeholder": {
color: "white",
opacity: 1,
fontFamily: "Gilroy, sans-serif",
},
}}
/>
)}
/>
</FormControl>
<Box <Box
sx={{ sx={{
@ -308,27 +304,50 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox
value="remember" value="remember"
color="primary" sx={{
/> width: 20,
} height: 20,
label="Remember me" fontFamily: "Gilroy, sans-serif",
/> border: "2px solid #4b5255",
<Link borderRadius: "4px",
component="button" backgroundColor: "transparent",
type="button" "&:hover": {
onClick={handleClickOpen} backgroundColor: "transparent",
variant="body2" },
sx={{ "&.Mui-checked": {
alignSelf: "center", backgroundColor: "transparent",
color: "#01579b", borderColor: "#4b5255",
}} "&:hover": {
> backgroundColor: "transparent",
Forgot password? },
</Link> },
}}
/>
}
label="Remember me"
/>
<Link
component="button"
type="button"
onClick={handleClickOpen}
variant="body2"
sx={{
alignSelf: "center",
fontFamily: "Gilroy, sans-serif",
color: "#01579b",
textDecoration: "none", // ✅ Removes underline
}}
>
Forgot password?
</Link>
</Box> </Box>
<ForgotPassword <ForgotPassword
open={open} open={open}
@ -340,6 +359,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
disabled={!isValid} disabled={!isValid}
sx={{ sx={{
color: "white", color: "white",
fontFamily: "Gilroy, sans-serif",
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
"&:hover": { "&:hover": {
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",