@campxdev/shared 0.3.15 → 0.3.16

package/src/components/ChangePassword.tsx

@@ -0,0 +1,146 @@
+import {
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogTitle,
+  IconButton,
+  InputAdornment,
+  Stack,
+  styled,
+  Typography,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useModal } from "./DrawerWrapper/DrawerWrapper";
+import { FormTextField } from ".";
+import axios, { axiosErrorToast } from "../config/axios";
+import { toast } from "react-toastify";
+
+export interface DialogProps {
+  open: boolean;
+  onClose: any;
+}
+
+function ChangePassword(props: DialogProps) {
+  const { onClose, open } = props;
+  const handleClose = () => {
+    onClose();
+  };
+  const modal = useModal();
+
+  const [showPassword, setShowPassword] = useState({
+    oldPassword: false,
+    newPassword: false,
+    confirmPassword: false,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const { handleSubmit, control } = useForm();
+  const onSubmit = async (formData) => {
+    setIsLoading(true);
+    try {
+      await axios.post("/auth/change-password", formData);
+      toast.success("Password Changed Successfully");
+      setIsLoading(false);
+      handleClose();
+    } catch (error) {
+      axiosErrorToast(error);
+      handleClose();
+    }
+  };
+
+  const fields = [
+    { label: "Old Password", name: "oldPassword" },
+    { label: "New Password", name: "newPassword" },
+    { label: "Confirm Password", name: "confirmPassword" },
+  ];
+
+  return (
+    <Dialog
+      open={open}
+      PaperProps={{
+        sx: {
+          borderRadius: "20px",
+          width: "500px",
+          padding: "20px",
+        },
+      }}
+    >
+      <StyledDialogTitle>
+        <Typography variant="h3">Change Password</Typography>
+        <IconButton onClick={handleClose}>
+          <CloseIcon />
+        </IconButton>
+      </StyledDialogTitle>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Stack gap={2} direction="column">
+          {fields.map((item) => {
+            return (
+              <>
+                <FormTextField
+                  label={item.label}
+                  control={control}
+                  name={item.name}
+                  type={showPassword[item.name] ? "text" : "password"}
+                  required
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          size="small"
+                          onClick={() =>
+                            setShowPassword((prev) => ({
+                              ...prev,
+                              [item.name]: !prev[item.name],
+                            }))
+                          }
+                          edge="end"
+                        >
+                          {showPassword[item.name] ? (
+                            <VisibilityOff />
+                          ) : (
+                            <Visibility />
+                          )}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              </>
+            );
+          })}
+
+          <Stack direction={"row"} gap={2} sx={{ marginTop: "20px" }}>
+            <Button variant="outlined" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              endIcon={
+                isLoading && (
+                  <CircularProgress
+                    style={{ color: "white" }}
+                    size="30px"
+                    thickness={1.7}
+                  />
+                )
+              }
+            >
+              Submit
+            </Button>
+          </Stack>
+        </Stack>
+      </form>
+    </Dialog>
+  );
+}
+
+const StyledDialogTitle = styled(DialogTitle)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px",
+  marginBottom: "20px",
+});
+export default ChangePassword;

package/src/components/ErrorBoundary/ErrorFallback.tsx

@@ -1,180 +1,229 @@
-import {Alert, Box, Button, styled, Typography} from '@mui/material'
+import { Alert, Box, Button, styled, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
 import {
-	internalserver,
-	nointernet,
-	pagenotfound,
-	permissiondenied,
-	unauth,
-} from '../../assets/images'
-
-const StyledAlert = styled(Alert)(({theme}) => ({
-	border: `1px solid ${theme.palette.error.main}`,
-	display: 'flex',
-	alignItems: 'center',
-	'& .MuiAlert-message': {
-		padding: 0,
-	},
-	'& .MuiTypography-root': {
-		margin: 0,
-	},
-	position: 'relative',
-	'& .retryBtn': {
-		color: '#661b2a',
-		position: 'absolute',
-		right: 8,
-		top: 8,
-	},
-}))
-
-const StyledBox = styled(Box)(({theme}) => ({
-	width: '100%',
-	display: 'flex',
-	flexDirection: 'column',
-	alignItems: 'center',
-	justifyContent: 'center',
-}))
-
-export default function ErrorFallback({error, resetErrorBoundary}) {
-	if (error?.response?.status) {
-		switch (error?.response?.status) {
-			case 401:
-				return <UnAuth resetBoundary={resetErrorBoundary} />
-
-			case 500:
-				return <InternalServer resetBoundary={resetErrorBoundary} />
-
-			case 403:
-				return <PemissionDenied resetBoundary={resetErrorBoundary} />
-
-			default:
-				return <InternalServer resetBoundary={resetErrorBoundary} />
-		}
-	}
-
-	if (error?.message === 'Network Error') {
-		return <NoInternet resetBoundary={resetErrorBoundary} />
-	}
-
-	return (
-		<Box sx={{marginTop: '16px', padding: '16px'}}>
-			<StyledAlert severity='error'>
-				{error?.response?.data?.message ?? error?.message}
-				<Button
-					className='retryBtn'
-					onClick={() => resetErrorBoundary()}
-					size='small'
-					color='error'
-					variant='outlined'
-				>
-					Try Again
-				</Button>
-			</StyledAlert>
-		</Box>
-	)
+  nointernet,
+  pagenotfound,
+  permissiondenied,
+  unauth,
+  internalserver,
+} from "../../assets/images";
+import Cookies from "js-cookie";
+import LoginForm from "../LoginForm";
+import { useModal } from "../DrawerWrapper/DrawerWrapper";
+import { PermissionsStore } from "../../permissions";
+import axios from "../../config/axios";
+
+const StyledAlert = styled(Alert)(({ theme }) => ({
+  border: `1px solid ${theme.palette.error.main}`,
+  display: "flex",
+  alignItems: "center",
+  "& .MuiAlert-message": {
+    padding: 0,
+  },
+  "& .MuiTypography-root": {
+    margin: 0,
+  },
+  position: "relative",
+  "& .retryBtn": {
+    color: "#661b2a",
+    position: "absolute",
+    right: 8,
+    top: 8,
+  },
+}));
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+}));
+
+export default function ErrorFallback({ error, resetErrorBoundary }) {
+  if (error?.response?.status) {
+    switch (error?.response?.status) {
+      case 401:
+        return <UnAuth resetBoundary={resetErrorBoundary} />;
+
+      case 500:
+        return <InternalServer resetBoundary={resetErrorBoundary} />;
+
+      case 403:
+        return <PemissionDenied resetBoundary={resetErrorBoundary} />;
+
+      default:
+        return <InternalServer resetBoundary={resetErrorBoundary} />;
+    }
+  }
+
+  if (error?.message === "Network Error") {
+    return <NoInternet resetBoundary={resetErrorBoundary} />;
+  }
+
+  return (
+    <Box sx={{ marginTop: "16px", padding: "16px" }}>
+      <StyledAlert severity="error">
+        {error?.response?.data?.message ?? error?.message}
+        <Button
+          className="retryBtn"
+          onClick={() => resetErrorBoundary()}
+          size="small"
+          color="error"
+          variant="outlined"
+        >
+          Try Again
+        </Button>
+      </StyledAlert>
+    </Box>
+  );
 }
 
-export function PageNotFound({resetBoundary}) {
-	return (
-		<>
-			<StyledBox>
-				<img
-					src={pagenotfound}
-					alt='page not found'
-					width={470}
-					style={{marginTop: '20px'}}
-				/>
-				<Typography variant='h1'>Page Not Found.</Typography>
-				<Button sx={{marginTop: '20px'}} onClick={() => resetBoundary()}>
-					Try Again
-				</Button>
-			</StyledBox>
-		</>
-	)
+export function PageNotFound({ resetBoundary }) {
+  return (
+    <>
+      <StyledBox>
+        <img
+          src={pagenotfound}
+          alt="page not found"
+          width={470}
+          style={{ marginTop: "20px" }}
+        />
+        <Typography variant="h1">Page Not Found.</Typography>
+        <Button sx={{ marginTop: "20px" }} onClick={() => resetBoundary()}>
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  );
 }
 
-export function NoInternet({resetBoundary}) {
-	return (
-		<>
-			<StyledBox>
-				<img src={nointernet} alt='No Internet Found' width={470} />
-				<Typography variant='h1'>No Internet Found.</Typography>
-				<Button sx={{marginTop: '20px'}} onClick={() => resetBoundary()}>
-					Try Again
-				</Button>
-			</StyledBox>
-		</>
-	)
+export function NoInternet({ resetBoundary }) {
+  return (
+    <>
+      <StyledBox>
+        <img src={nointernet} alt="No Internet Found" width={470} />
+        <Typography variant="h1">No Internet Found.</Typography>
+        <Button sx={{ marginTop: "20px" }} onClick={() => resetBoundary()}>
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  );
 }
 
-export function PemissionDenied({resetBoundary}) {
-	return (
-		<>
-			<StyledBox>
-				<img src={permissiondenied} alt='permission denied' width={470} />
-				<Typography variant='h1'>Permission Denied.</Typography>
-				<Button sx={{marginTop: '20px'}} onClick={() => resetBoundary()}>
-					Try Again
-				</Button>
-			</StyledBox>
-		</>
-	)
+export function PemissionDenied({ resetBoundary }) {
+  return (
+    <>
+      <StyledBox>
+        <img src={permissiondenied} alt="permission denied" width={470} />
+        <Typography variant="h1">Permission Denied.</Typography>
+        <Button sx={{ marginTop: "20px" }} onClick={() => resetBoundary()}>
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  );
 }
 
-export function InternalServer({resetBoundary}) {
-	return (
-		<>
-			<StyledBox>
-				<img src={internalserver} alt='internal server error' width={470} />
-				<Typography variant='h1' marginTop={'20px'}>
-					Internal Server Error.
-				</Typography>
-				<Button
-					size='small'
-					variant='outlined'
-					sx={{marginTop: '20px'}}
-					onClick={() => resetBoundary()}
-				>
-					Try Again
-				</Button>
-			</StyledBox>
-		</>
-	)
+export function InternalServer({ resetBoundary }) {
+  return (
+    <>
+      <StyledBox>
+        <img src={internalserver} alt="internal server error" width={470} />
+        <Typography variant="h1" marginTop={"20px"}>
+          Internal Server Error.
+        </Typography>
+        <Button
+          size="small"
+          variant="outlined"
+          sx={{ marginTop: "20px" }}
+          onClick={() => resetBoundary()}
+        >
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  );
 }
 
-export function UnAuth({resetBoundary}) {
-	const url = window.location.origin
-	return (
-		<>
-			<StyledBox>
-				<img src={unauth} alt='unauthorized' width={470} />
-				<Typography variant='h1' marginTop={'20px'}>
-					UnAuthorized.
-				</Typography>
-				<Box
-					sx={{
-						display: 'flex',
-						marginTop: '20px',
-					}}
-				>
-					<Button
-						variant='outlined'
-						sx={{marginRight: '10px'}}
-						onClick={() => resetBoundary()}
-					>
-						Try Again
-					</Button>
-
-					<Button
-						onClick={() =>
-							window.location.replace(
-								`https://www.id.campx.in/?redirect_to=${url}`
-							)
-						}
-					>
-						Click here to Login
-					</Button>
-				</Box>
-			</StyledBox>
-		</>
-	)
+export function UnAuth({ resetBoundary }) {
+  const modal = useModal();
+  const [username, setUsername] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const url = window.location.origin;
+  const origin = window?.location?.origin?.split(".");
+  const isLocalHost =
+    process.env.NODE_ENV === "development" ||
+    origin?.slice(-2).join(".") === "campx.dev";
+  const sessionCookie = Cookies.get("campx_session_key");
+  const appinit = async () => {
+    setLoading(true);
+    await axios
+      .get("/auth/my-permissions")
+      .then((res) => {
+        setUsername(res.data.user.fullName);
+        PermissionsStore.update((s) => {
+          s.permissions = {
+            ...res.data?.permissions,
+            can_settings_view: 1,
+            can_dashboard_view: 1,
+            can_individual_pages_view: 1,
+          } as any;
+        });
+        setLoading(false);
+      })
+      .catch((e) => {
+        modal({
+          title: "Login",
+          content: () => <LoginForm />,
+        });
+      });
+  };
+  function LoginPage() {
+    if (isLocalHost) {
+      if (!sessionCookie) {
+        modal({
+          title: "Login",
+          content: () => <LoginForm />,
+        });
+      } else {
+        appinit();
+      }
+    } else {
+      if (!sessionCookie) {
+        window.location.replace(`https://www.id.campx.in/?redirect_to=${url}`);
+      } else {
+        appinit();
+      }
+    }
+  }
+
+  return (
+    <>
+      <StyledBox>
+        <img src={unauth} alt="unauthorized" width={470} />
+        <Typography variant="h1" marginTop={"20px"}>
+          UnAuthorized.
+        </Typography>
+        <Box
+          sx={{
+            display: "flex",
+            marginTop: "20px",
+          }}
+        >
+          <Button
+            variant="outlined"
+            sx={{ marginRight: "10px" }}
+            onClick={() => resetBoundary()}
+          >
+            Try Again
+          </Button>
+
+          <Button onClick={() => LoginPage()}>Click here to Login</Button>
+        </Box>
+      </StyledBox>
+    </>
+  );
 }