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

Merge pull request 'uiBugs' (#20) from dgev-bugs into develop

Browse source 
Reviewed-on: DigiMantra/digiev_frontend#20
This commit is contained in:
Mohit kalshan 2025-03-07 07:43:51 +00:00
parent ac145d5d23 300a97a3c8
commit d558697888
5 changed files with 266 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package-lock.json generated
View file

@ -15041,6 +15041,7 @@
},
"node_modules/typescript": {
"version": "5.7.3",
"dev": true,
"license": "Apache-2.0",
"bin": {
"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 {
text-align: center;
}

1
src/App.tsx
View file

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

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

@ -1,14 +1,24 @@
import React from 'react';
import { useSelector } from 'react-redux';
// import styled from './Loading.style';
import { CircularProgress, Box, Typography } from '@mui/material';
function LoadingComponent() {
// const { isdarktheme } = useSelector((state) => ({
// isdarktheme: state?.authReducer?.isDarkTheme,
// }));
return (<h1>Loading</h1>);
return (
<Box
sx={{
display: 'flex',
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,
IconButton,
Link,
InputAdornment
} from "@mui/material";
import { useForm, Controller, SubmitHandler } from "react-hook-form";
import { useDispatch } from "react-redux";
@ -29,7 +30,9 @@ interface ILoginForm {
export default function Login(props: { disableCustomTheme?: boolean }) {
const [open, setOpen] = React.useState(false);
const [isClicked, setIsClicked] = React.useState(false);
const [showPassword, setShowPassword] = React.useState(false);
const {
control,
handleSubmit,
@ -69,7 +72,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
md={7}
sx={{
background: `url('/mainPageLogo.png') center/cover no-repeat`,
height: { xs: "0%", sm: "0%", md: "100%" },
// height: { xs: "0%", sm: "50%", md: "100%" },
backgroundSize: "cover",
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 */}
<Grid
item
xs={12}
md={5}
sx={{
backgroundColor: "black",
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
padding: { xs: "2rem", md: "3rem", lg: "3rem" },
height: "100%",
}}
>
item
xs={12}
md={5}
sx={{
backgroundColor: "black",
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
padding: { xs: "2rem", md: "3rem", lg: "3rem" },
height: "auto", // ✅ Allows the height to adjust dynamically
}}
>
<Typography
variant="h3"
sx={{
@ -105,13 +110,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
Welcome Back!
</Typography>
<Card
variant="outlined"
sx={{
maxWidth: "400px",
width: { xs: "80%", sm: "80%", md: "100%" },
}}
>
<Card variant="outlined" sx={{ width: { xs: "100%", sm: "300px",lg:"408px" }, padding: "24px", borderRadius: "12px", backgroundColor: "#1E1E1E", border: "1px solid #4B5255" }}>
<Box
component="form"
onSubmit={handleSubmit(onSubmit)}
@ -122,182 +122,178 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
gap: 2,
}}
>
<Typography
component="h1"
variant="h4"
sx={{
textAlign: "center",
color: "white",
fontSize: { xs: "1.5rem", sm: "2rem" },
}}
>
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>
<Typography component="h1" variant="h4" sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "24px" }}>Login</Typography>
<Typography
component="h6"
variant="subtitle2"
sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "16px" }}
>
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%" }}>
<FormLabel
htmlFor="password"
sx={{
fontSize: {
xs: "0.9rem",
sm: "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.",
},
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 }) => (
<Box sx={{ position: "relative" }}>
<TextField
{...field}
error={!!errors.password}
helperText={
errors.password?.message
}
name="password"
placeholder="Password"
type={
showPassword
? "text"
: "password"
}
id="password"
autoComplete="current-password"
autoFocus
required
fullWidth
variant="outlined"
color={
errors.password
? "error"
: "primary"
}
sx={{
paddingRight: "40px",
height: "40px",
marginBottom: "8px",
}}
/>
<IconButton
sx={{
position: "absolute",
top: "50%",
right: "10px",
transform:
"translateY(-50%)",
background: "none",
borderColor:
"transparent",
"&:hover": {
backgroundColor:
"transparent",
borderColor:
"transparent",
},
}}
onClick={() =>
setShowPassword(
(prev) => !prev
)
}
>
{showPassword ? (
<VisibilityOff />
) : (
<Visibility />
)}
</IconButton>
</Box>
)}
/>
</FormControl>
{/* -------------------------------- Email Field ----------------- */}
<FormControl sx={{ width: "100%" }}>
<FormLabel
htmlFor="email"
sx={{
fontSize: { xs: "0.9rem", sm: "1rem" },
color: "white",
fontFamily: "Gilroy, sans-serif", // ✅ Apply Gilroy font
}}
>
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: "50px",
alignItems: "center",
backgroundColor: "#1E1F1F",
fontFamily: "Gilroy, sans-serif",
},
}}
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>
{/* -------------------------------- Password Field ----------------- */}
<FormControl sx={{ width: "100%" }}>
<FormLabel
htmlFor="password"
sx={{
fontSize: { xs: "0.9rem", sm: "1rem" },
color: "white",
fontFamily: "Gilroy, sans-serif",
}}
>
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: "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
sx={{
@ -308,27 +304,50 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
flexWrap: "wrap",
}}
>
<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>
<FormControlLabel
control={
<Checkbox
value="remember"
sx={{
width: 20,
height: 20,
fontFamily: "Gilroy, sans-serif",
border: "2px solid #4b5255",
borderRadius: "4px",
backgroundColor: "transparent",
"&:hover": {
backgroundColor: "transparent",
},
"&.Mui-checked": {
backgroundColor: "transparent",
borderColor: "#4b5255",
"&:hover": {
backgroundColor: "transparent",
},
},
}}
/>
}
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>
<ForgotPassword
open={open}
@ -340,6 +359,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
disabled={!isValid}
sx={{
color: "white",
fontFamily: "Gilroy, sans-serif",
backgroundColor: "#52ACDF",
"&:hover": {
backgroundColor: "#52ACDF",