Logout and Signup functionality

2025-02-13 15:31:25 +05:30 · 2025-02-13 15:31:25 +05:30 · 8d49e4eb15
parent 6740831762
commit 8d49e4eb15
5 changed files with 11606 additions and 6157 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,41 +6,41 @@
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.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-data-grid": "^7.23.5",
    "@mui/x-date-pickers": "^7.23.3",
    "@mui/x-tree-view": "^7.23.2",
    "@react-spring/web": "^9.7.5",
    "@reduxjs/toolkit": "^2.5.0",
-    "AdapterDayjs": "link:@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",
+    "AdapterDayjs": "file:@mui/x-date-pickers/AdapterDayjs",
    "add": "^2.0.6",
+    "AppBar": "file:@mui/material/AppBar",
    "axios": "^1.7.9",
+    "Box": "file:@mui/material/Box",
    "clsx": "^2.1.1",
    "cra-template-typescript": "1.2.0",
    "dayjs": "^1.11.13",
-    "hooks": "link:@mui/x-charts/hooks",
+    "hooks": "file:@mui/x-charts/hooks",
    "mui-phone-number": "^3.0.3",
    "mui-tel-input": "^7.0.0",
+    "PieChart": "file:@mui/x-charts/PieChart",
    "prop-types": "^15.8.1",
-    "react": "^19.0.0",
+    "react": "^18.0.0",
    "react-cookie": "^7.2.2",
-    "react-dom": "^19.0.0",
+    "react-dom": "^18.0.0",
    "react-dropzone": "^14.3.5",
    "react-hook-form": "^7.54.2",
    "react-redux": "^9.2.0",
    "react-router-dom": "^7.1.1",
    "react-scripts": "5.0.1",
    "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"
  },
  "scripts": {
--- a/src/components/OptionsMenu/index.tsx
+++ b/src/components/OptionsMenu/index.tsx
@ -33,6 +33,14 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 	const handleProfile = () => {
 		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 (
 		<React.Fragment>
 			<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>
 						<LogoutRoundedIcon fontSize="small" />
 					</ListItemIcon>
--- a/src/pages/Auth/SignUp/index.tsx
+++ b/src/pages/Auth/SignUp/index.tsx
@ -1,215 +1,287 @@
-import * as React from 'react';
-import { useForm, Controller, SubmitHandler } from 'react-hook-form';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Checkbox from '@mui/material/Checkbox';
-import CssBaseline from '@mui/material/CssBaseline';
-import Divider from '@mui/material/Divider';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormLabel from '@mui/material/FormLabel';
-import FormControl from '@mui/material/FormControl';
-import Link from '@mui/material/Link';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
-import MuiCard from '@mui/material/Card';
-import { styled } from '@mui/material/styles';
-import AppTheme from '../../../shared-theme/AppTheme.tsx';
-import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons.tsx';
-import ColorModeSelect from '../../../shared-theme/ColorModeSelect.tsx';
-import MuiPhoneNumber from 'mui-phone-number';
-import { useDispatch } from 'react-redux';
-import { registerUser } from '../../../redux/slices/authSlice.ts';
+import * as React from "react";
+import { useForm, Controller, SubmitHandler } from "react-hook-form";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+// import Checkbox from '@mui/material/Checkbox';
+// import CssBaseline from '@mui/material/CssBaseline';
+import Divider from "@mui/material/Divider";
+// import FormControlLabel from '@mui/material/FormControlLabel';
+import FormLabel from "@mui/material/FormLabel";
+import FormControl from "@mui/material/FormControl";
+import Link from "@mui/material/Link";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import MuiCard from "@mui/material/Card";
+import { styled } from "@mui/material/styles";
+import AppTheme from "../../../shared-theme/AppTheme.tsx";
+// import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons.tsx';
+import ColorModeSelect from "../../../shared-theme/ColorModeSelect.tsx";
+import MuiPhoneNumber from "mui-phone-number";
+import { useDispatch } from "react-redux";
+import { registerUser } from "../../../redux/slices/authSlice.ts";
 import { toast } from "react-toastify";
+import { InputLabel, MenuItem, Select } from "@mui/material";
+import { useNavigate } from "react-router-dom";

 const Card = styled(MuiCard)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  alignSelf: 'center',
-  width: '100%',
-  padding: theme.spacing(4),
-  gap: theme.spacing(2),
-  margin: 'auto',
-  boxShadow:
-    'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px',
-  [theme.breakpoints.up('sm')]: {
-    width: '450px',
-  },
-  ...theme.applyStyles('dark', {
-    boxShadow:
-      'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px',
-  }),
+	display: "flex",
+	flexDirection: "column",
+	alignSelf: "center",
+	width: "100%",
+	padding: theme.spacing(4),
+	gap: theme.spacing(2),
+	margin: "auto",
+	boxShadow:
+		"hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
+	[theme.breakpoints.up("sm")]: {
+		width: "450px",
+	},
+	...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 SignUpContainer = 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%))',
-    }),
-  },
+	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 IRegisterForm {
-  name:string;
-  email: string;
-  password: string;
-  phoneCountryCode:string;
-  phoneNumber:number | null;
+	name: string;
+	email: string;
+	password: string;
+	phone: string; // Changed to string to handle formatted phone numbers
+	role: string;
 }
+
+//Eknoor singh and jaanvi
+//date:- 13-Feb-2025
+//Implemented SignUp functionality which was static initially
 export default function SignUp(props: { disableCustomTheme?: boolean }) {
-const dispatch = useDispatch();
-  const { control, handleSubmit, formState: { errors }, setValue } = useForm<IRegisterForm>({
-    defaultValues: {
-      name: '',
-      email: '',
-      password: '',
-      phoneCountryCode: '',
-      phoneNumber: null,
-    }
-  });
-  const [countryCode, setCountryCode] = React.useState('');
-  const [phoneNumber, setPhoneNumber] = React.useState('');
+	const dispatch = useDispatch();
+	const {
+		control,
+		handleSubmit,
+		formState: { errors },
+		setValue,
+	} = useForm<IRegisterForm>({
+		defaultValues: {
+			name: "",
+			email: "",
+			password: "",
+			role: "",
+			phone: "",
+		},
+	});

-  const extractCountryCodeAndNumber = (phone: string) => {
-    // Match the country code (e.g., +91) and the rest of the number
-    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 navigate = useNavigate();
+	const [phone, setPhone] = React.useState("");

-  const onSubmit : SubmitHandler<IRegisterForm>= async (data: any) => {
-   const payload = {
-      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)
-    } 
-  };
+	// Enhanced email validation regex
+	const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

-  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>
+	const handlePhoneChange = (value: string) => {
+		// Remove all non-numeric characters except + for country code
+		const cleanedNumber = value.replace(/[^\d+]/g, "");
+		setValue("phone", cleanedNumber);
+	};

-            <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>
+	const onSubmit: SubmitHandler<IRegisterForm> = async (data) => {
+		try {
+			// Validate email
+			if (!emailRegex.test(data.email)) {
+				toast.error("Please enter a valid email address");
+				return;
+			}

-            <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>
-            <MuiPhoneNumber
-              defaultCountry='in'
-              onChange={handleOnChange}
-              value={phoneNumber}
-            />
+			// Validate phone number
+			if (!data.phone || data.phone.length < 10) {
+				toast.error("Please enter a valid phone number");
+				return;
+			}

-            {/* <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={
                <Controller
                  name="allowExtraEmails"
@ -222,14 +294,14 @@ const dispatch = useDispatch();
              label="I want to receive updates via email."
            /> */}

-            <Button type="submit" fullWidth variant="contained">
-              Sign up
-            </Button>
-          </Box>
-          {/* <Divider>
+						<Button type="submit" fullWidth variant="contained">
+							Sign up
+						</Button>
+					</Box>
+					{/* <Divider>
            <Typography sx={{ color: 'text.secondary' }}>or</Typography>
          </Divider> */}
-          {/* <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+					{/* <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <Button
              fullWidth
              variant="outlined"
@ -257,21 +329,27 @@ const dispatch = useDispatch();
              </Link>
            </Typography>
          </Box> */}
-          <Divider>or</Divider>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <Typography sx={{ textAlign: 'center' }}>
-              Already have an account? &nbsp; 
-              <Link
-                href="/auth/login"
-                variant="body2"
-                sx={{ alignSelf: 'center' }}
-              >
-                Sign in
-              </Link>
-            </Typography>
-          </Box>
-        </Card>
-      </SignUpContainer>
-    </AppTheme>
-  );
+					<Divider>or</Divider>
+					<Box
+						sx={{
+							display: "flex",
+							flexDirection: "column",
+							gap: 2,
+						}}
+					>
+						<Typography sx={{ textAlign: "center" }}>
+							Already have an account? &nbsp;
+							<Link
+								href="/auth/login"
+								variant="body2"
+								sx={{ alignSelf: "center" }}
+							>
+								Sign in
+							</Link>
+						</Typography>
+					</Box>
+				</Card>
+			</SignUpContainer>
+		</AppTheme>
+	);
 }
--- a/src/redux/slices/authSlice.ts
+++ b/src/redux/slices/authSlice.ts
@ -27,6 +27,7 @@ interface Admin {
 	name: string;
 	role: string;
 	email: string;
+	phone: string;
 }

 interface AuthState {