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

Logout and Signup functionality

Browse source
This commit is contained in:
Eknoor Singh 2025-02-13 15:31:25 +05:30
parent 6740831762
commit 8d49e4eb15
5 changed files with 11606 additions and 6157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17205
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

28
package.json
View file

@ -6,41 +6,41 @@
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.3.0", "@mui/icons-material": "^6.3.0",
"@mui/material": "^6.3.0", "@mui/material": "^6.4.4",
"@mui/x-charts": "^7.23.2", "@mui/x-charts": "^7.23.2",
"@mui/x-data-grid": "^7.23.5", "@mui/x-data-grid": "^7.23.5",
"@mui/x-date-pickers": "^7.23.3", "@mui/x-date-pickers": "^7.23.3",
"@mui/x-tree-view": "^7.23.2", "@mui/x-tree-view": "^7.23.2",
"@react-spring/web": "^9.7.5", "@react-spring/web": "^9.7.5",
"@reduxjs/toolkit": "^2.5.0", "@reduxjs/toolkit": "^2.5.0",
"AdapterDayjs": "link:@mui/x-date-pickers/AdapterDayjs", "AdapterDayjs": "file:@mui/x-date-pickers/AdapterDayjs",
"AppBar": "link:@mui/material/AppBar",
"Box": "link:@mui/material/Box",
"PieChart": "link:@mui/x-charts/PieChart",
"RichTreeView": "link:@mui/x-tree-view/RichTreeView",
"Stack": "link:@mui/material/Stack",
"Tabs": "link:@mui/material/Tabs",
"Toolbar": "link:@mui/material/Toolbar",
"Typography": "link:@mui/material/Typography",
"add": "^2.0.6", "add": "^2.0.6",
"AppBar": "file:@mui/material/AppBar",
"axios": "^1.7.9", "axios": "^1.7.9",
"Box": "file:@mui/material/Box",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"cra-template-typescript": "1.2.0", "cra-template-typescript": "1.2.0",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"hooks": "link:@mui/x-charts/hooks", "hooks": "file:@mui/x-charts/hooks",
"mui-phone-number": "^3.0.3", "mui-phone-number": "^3.0.3",
"mui-tel-input": "^7.0.0", "mui-tel-input": "^7.0.0",
"PieChart": "file:@mui/x-charts/PieChart",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^19.0.0", "react": "^18.0.0",
"react-cookie": "^7.2.2", "react-cookie": "^7.2.2",
"react-dom": "^19.0.0", "react-dom": "^18.0.0",
"react-dropzone": "^14.3.5", "react-dropzone": "^14.3.5",
"react-hook-form": "^7.54.2", "react-hook-form": "^7.54.2",
"react-redux": "^9.2.0", "react-redux": "^9.2.0",
"react-router-dom": "^7.1.1", "react-router-dom": "^7.1.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"react-toastify": "^11.0.2", "react-toastify": "^11.0.2",
"styles": "link:@mui/material/styles", "RichTreeView": "file:@mui/x-tree-view/RichTreeView",
"Stack": "file:@mui/material/Stack",
"styles": "file:@mui/material/styles",
"Tabs": "file:@mui/material/Tabs",
"Toolbar": "file:@mui/material/Toolbar",
"Typography": "file:@mui/material/Typography",
"web-vitals": "^4.2.4" "web-vitals": "^4.2.4"
}, },
"scripts": { "scripts": {

13
src/components/OptionsMenu/index.tsx
View file

@ -33,6 +33,14 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const handleProfile = () => { const handleProfile = () => {
navigate("/auth/profile"); navigate("/auth/profile");
}; };
//Eknoor singh and jaanvi
//date:- 13-Feb-2025
//Implemented logout functionality which was static previously
const handlelogout = () => {
localStorage.clear();
navigate("/auth/login");
};
return ( return (
<React.Fragment> <React.Fragment>
<MenuButton <MenuButton
@ -86,7 +94,10 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
}, },
}} }}
> >
<ListItemText>Logout</ListItemText> {/* //Eknoor singh and jaanvi
//date:- 13-Feb-2025
//Implemented logout functionality which was static previously */}
<ListItemText onClick={handlelogout}>Logout</ListItemText>
<ListItemIcon> <ListItemIcon>
<LogoutRoundedIcon fontSize="small" /> <LogoutRoundedIcon fontSize="small" />
</ListItemIcon> </ListItemIcon>

516
src/pages/Auth/SignUp/index.tsx
View file

@ -1,215 +1,287 @@
import * as React from 'react'; import * as React from "react";
import { useForm, Controller, SubmitHandler } from 'react-hook-form'; import { useForm, Controller, SubmitHandler } from "react-hook-form";
import Box from '@mui/material/Box'; import Box from "@mui/material/Box";
import Button from '@mui/material/Button'; import Button from "@mui/material/Button";
import Checkbox from '@mui/material/Checkbox'; // import Checkbox from '@mui/material/Checkbox';
import CssBaseline from '@mui/material/CssBaseline'; // import CssBaseline from '@mui/material/CssBaseline';
import Divider from '@mui/material/Divider'; import Divider from "@mui/material/Divider";
import FormControlLabel from '@mui/material/FormControlLabel'; // import FormControlLabel from '@mui/material/FormControlLabel';
import FormLabel from '@mui/material/FormLabel'; import FormLabel from "@mui/material/FormLabel";
import FormControl from '@mui/material/FormControl'; import FormControl from "@mui/material/FormControl";
import Link from '@mui/material/Link'; import Link from "@mui/material/Link";
import TextField from '@mui/material/TextField'; import TextField from "@mui/material/TextField";
import Typography from '@mui/material/Typography'; import Typography from "@mui/material/Typography";
import Stack from '@mui/material/Stack'; import Stack from "@mui/material/Stack";
import MuiCard from '@mui/material/Card'; import MuiCard from "@mui/material/Card";
import { styled } from '@mui/material/styles'; import { styled } from "@mui/material/styles";
import AppTheme from '../../../shared-theme/AppTheme.tsx'; import AppTheme from "../../../shared-theme/AppTheme.tsx";
import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons.tsx'; // import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons.tsx';
import ColorModeSelect from '../../../shared-theme/ColorModeSelect.tsx'; import ColorModeSelect from "../../../shared-theme/ColorModeSelect.tsx";
import MuiPhoneNumber from 'mui-phone-number'; import MuiPhoneNumber from "mui-phone-number";
import { useDispatch } from 'react-redux'; import { useDispatch } from "react-redux";
import { registerUser } from '../../../redux/slices/authSlice.ts'; import { registerUser } from "../../../redux/slices/authSlice.ts";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { InputLabel, MenuItem, Select } from "@mui/material";
import { useNavigate } from "react-router-dom";
const Card = styled(MuiCard)(({ theme }) => ({ const Card = styled(MuiCard)(({ theme }) => ({
display: 'flex', display: "flex",
flexDirection: 'column', flexDirection: "column",
alignSelf: 'center', alignSelf: "center",
width: '100%', width: "100%",
padding: theme.spacing(4), padding: theme.spacing(4),
gap: theme.spacing(2), gap: theme.spacing(2),
margin: 'auto', margin: "auto",
boxShadow: boxShadow:
'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px', "hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up("sm")]: {
width: '450px', width: "450px",
}, },
...theme.applyStyles('dark', { ...theme.applyStyles("dark", {
boxShadow: boxShadow:
'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px', "hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px",
}), }),
})); }));
const SignUpContainer = styled(Stack)(({ theme }) => ({ const SignUpContainer = styled(Stack)(({ theme }) => ({
height: 'calc((1 - var(--template-frame-height, 0)) * 100dvh)', height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
minHeight: '100%', minHeight: "100%",
padding: theme.spacing(2), padding: theme.spacing(2),
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up("sm")]: {
padding: theme.spacing(4), padding: theme.spacing(4),
}, },
'&::before': { "&::before": {
content: '""', content: '""',
display: 'block', display: "block",
position: 'absolute', position: "absolute",
zIndex: -1, zIndex: -1,
inset: 0, inset: 0,
backgroundImage: backgroundImage:
'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', "radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))",
backgroundRepeat: 'no-repeat', backgroundRepeat: "no-repeat",
...theme.applyStyles('dark', { ...theme.applyStyles("dark", {
backgroundImage: backgroundImage:
'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', "radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))",
}), }),
}, },
})); }));
interface IRegisterForm { interface IRegisterForm {
name:string; name: string;
email: string; email: string;
password: string; password: string;
phoneCountryCode:string; phone: string; // Changed to string to handle formatted phone numbers
phoneNumber:number | null; role: string;
} }
//Eknoor singh and jaanvi
//date:- 13-Feb-2025
//Implemented SignUp functionality which was static initially
export default function SignUp(props: { disableCustomTheme?: boolean }) { export default function SignUp(props: { disableCustomTheme?: boolean }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { control, handleSubmit, formState: { errors }, setValue } = useForm<IRegisterForm>({ const {
defaultValues: { control,
name: '', handleSubmit,
email: '', formState: { errors },
password: '', setValue,
phoneCountryCode: '', } = useForm<IRegisterForm>({
phoneNumber: null, defaultValues: {
} name: "",
}); email: "",
const [countryCode, setCountryCode] = React.useState(''); password: "",
const [phoneNumber, setPhoneNumber] = React.useState(''); role: "",
phone: "",
},
});
const extractCountryCodeAndNumber = (phone: string) => { const navigate = useNavigate();
// Match the country code (e.g., +91) and the rest of the number const [phone, setPhone] = React.useState("");
const match = phone.match(/^(\+\d{1,3})\s*(\d+.*)/);
if (match) {
return { countryCode: match[1], numberWithoutCountryCode: match[2] };
}
return { countryCode: '', numberWithoutCountryCode: phone };
};
const handleOnChange = (newPhone: string) => {
const { countryCode, numberWithoutCountryCode } = extractCountryCodeAndNumber(newPhone);
console.log("numberWithoutCountryCode",numberWithoutCountryCode);
setPhoneNumber(numberWithoutCountryCode)
setCountryCode(countryCode);
};
const onSubmit : SubmitHandler<IRegisterForm>= async (data: any) => { // Enhanced email validation regex
const payload = { const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
name: data.name,
email: data.email,
password: data.password,
phoneCountryCode: countryCode,
phoneNumber: phoneNumber,
};
try {
await dispatch(registerUser(payload)).unwrap();
} catch (error) {
toast(error)
console.log("error",error)
}
};
return ( const handlePhoneChange = (value: string) => {
<AppTheme {...props}> // Remove all non-numeric characters except + for country code
{/* <CssBaseline enableColorScheme /> */} const cleanedNumber = value.replace(/[^\d+]/g, "");
<ColorModeSelect sx={{ position: 'fixed', top: '1rem', right: '1rem' }} />/ setValue("phone", cleanedNumber);
<SignUpContainer direction="column" justifyContent="space-between"> };
<Card variant="outlined">
Digi-EV
<Typography
component="h1"
variant="h4"
sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
>
Sign up
</Typography>
<Box
component="form"
onSubmit={handleSubmit(onSubmit)}
sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
>
<FormControl>
<FormLabel htmlFor="name">Full name</FormLabel>
<Controller
name="name"
control={control}
rules={{ required: 'Name is required' }}
render={({ field }) => (
<TextField
{...field}
id="name"
fullWidth
placeholder="Jon Snow"
error={!!errors.name}
helperText={errors.name?.message}
/>
)}
/>
</FormControl>
<FormControl> const onSubmit: SubmitHandler<IRegisterForm> = async (data) => {
<FormLabel htmlFor="email">Email</FormLabel> try {
<Controller // Validate email
name="email" if (!emailRegex.test(data.email)) {
control={control} toast.error("Please enter a valid email address");
rules={{ return;
required: 'Email is required', }
pattern: {
value: /\S+@\S+\.\S+/,
message: 'Please enter a valid email address.'
}
}}
render={({ field }) => (
<TextField
{...field}
id="email"
fullWidth
placeholder="your@email.com"
error={!!errors.email}
helperText={errors.email?.message}
/>
)}
/>
</FormControl>
<FormControl> // Validate phone number
<FormLabel htmlFor="password">Password</FormLabel> if (!data.phone || data.phone.length < 10) {
<Controller toast.error("Please enter a valid phone number");
name="password" return;
control={control} }
rules={{
required: 'Password is required',
minLength: {
value: 6,
message: 'Password must be at least 6 characters long'
}
}}
render={({ field }) => (
<TextField
{...field}
id="password"
fullWidth
type="password"
placeholder="••••••"
error={!!errors.password}
helperText={errors.password?.message}
/>
)}
/>
</FormControl>
<MuiPhoneNumber
defaultCountry='in'
onChange={handleOnChange}
value={phoneNumber}
/>
{/* <FormControlLabel // Validate phone number
const payload = {
name: data.name.trim(),
email: data.email.toLowerCase().trim(),
password: data.password,
phone: data.phone,
role: data.role,
};
await dispatch(registerUser(payload)).unwrap();
toast.success("Registration successful!");
navigate("/auth/login");
} catch (error: any) {
toast.error(error?.message || "Registration failed");
console.error("Registration error:", error);
}
};
return (
<AppTheme {...props}>
{/* <CssBaseline enableColorScheme /> */}
<ColorModeSelect
sx={{ position: "fixed", top: "1rem", right: "1rem" }}
/>
<SignUpContainer direction="column" justifyContent="space-between">
<Card variant="outlined">
Digi-EV
<Typography
component="h1"
variant="h4"
sx={{
width: "100%",
fontSize: "clamp(2rem, 10vw, 2.15rem)",
}}
>
Sign up
</Typography>
<Box
component="form"
onSubmit={handleSubmit(onSubmit)}
sx={{
display: "flex",
flexDirection: "column",
gap: 2,
}}
>
<FormControl>
<FormLabel htmlFor="name">Full name</FormLabel>
<Controller
name="name"
control={control}
rules={{ required: "Name is required" }}
render={({ field }) => (
<TextField
{...field}
id="name"
fullWidth
placeholder="Jon Snow"
error={!!errors.name}
helperText={errors.name?.message}
/>
)}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor="email">Email</FormLabel>
<Controller
name="email"
control={control}
rules={{
required: "Email is required",
pattern: {
value: /\S+@\S+\.\S+/,
message:
"Please enter a valid email address.",
},
}}
render={({ field }) => (
<TextField
{...field}
id="email"
fullWidth
placeholder="your@email.com"
error={!!errors.email}
helperText={errors.email?.message}
/>
)}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor="password">Password</FormLabel>
<Controller
name="password"
control={control}
rules={{
required: "Password is required",
minLength: {
value: 6,
message:
"Password must be at least 6 characters long",
},
}}
render={({ field }) => (
<TextField
{...field}
id="password"
fullWidth
type="password"
placeholder="••••••"
error={!!errors.password}
helperText={errors.password?.message}
/>
)}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor="phone">Phone Number</FormLabel>
<MuiPhoneNumber
defaultCountry="in"
onChange={handlePhoneChange}
value={control._formValues.phone}
required
error={!!errors.phone}
helperText={errors.phone?.message}
/>
</FormControl>
<FormControl fullWidth>
<InputLabel id="role-select-label">Role</InputLabel>
<Controller
name="role"
control={control}
rules={{ required: "Role is required" }}
render={({ field }) => (
<Select
{...field}
labelId="role-select-label"
id="role-select"
value={field.value}
onChange={(e) =>
setValue("role", e.target.value)
}
error={!!errors.role}
>
<MenuItem value="superadmin">
SuperAdmin
</MenuItem>
<MenuItem value="admin">Admin</MenuItem>
<MenuItem value="user">User</MenuItem>
</Select>
)}
/>
{errors.role && (
<Typography color="error" variant="caption">
{errors.role.message}
</Typography>
)}
</FormControl>
{/* <FormControlLabel
control={ control={
<Controller <Controller
name="allowExtraEmails" name="allowExtraEmails"
@ -222,14 +294,14 @@ const dispatch = useDispatch();
label="I want to receive updates via email." label="I want to receive updates via email."
/> */} /> */}
<Button type="submit" fullWidth variant="contained"> <Button type="submit" fullWidth variant="contained">
Sign up Sign up
</Button> </Button>
</Box> </Box>
{/* <Divider> {/* <Divider>
<Typography sx={{ color: 'text.secondary' }}>or</Typography> <Typography sx={{ color: 'text.secondary' }}>or</Typography>
</Divider> */} </Divider> */}
{/* <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}> {/* <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<Button <Button
fullWidth fullWidth
variant="outlined" variant="outlined"
@ -257,21 +329,27 @@ const dispatch = useDispatch();
</Link> </Link>
</Typography> </Typography>
</Box> */} </Box> */}
<Divider>or</Divider> <Divider>or</Divider>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}> <Box
<Typography sx={{ textAlign: 'center' }}> sx={{
Already have an account? &nbsp; display: "flex",
<Link flexDirection: "column",
href="/auth/login" gap: 2,
variant="body2" }}
sx={{ alignSelf: 'center' }} >
> <Typography sx={{ textAlign: "center" }}>
Sign in Already have an account? &nbsp;
</Link> <Link
</Typography> href="/auth/login"
</Box> variant="body2"
</Card> sx={{ alignSelf: "center" }}
</SignUpContainer> >
</AppTheme> Sign in
); </Link>
</Typography>
</Box>
</Card>
</SignUpContainer>
</AppTheme>
);
} }

1
src/redux/slices/authSlice.ts
View file

@ -27,6 +27,7 @@ interface Admin {
name: string; name: string;
role: string; role: string;
email: string; email: string;
phone: string;
} }
interface AuthState { interface AuthState {