@campxdev/campx-web-utils 0.1.10 → 0.1.11

package/exports.ts

@@ -1,2 +1,3 @@
 export * from "./src/config/axios";
+export * from "./src/context/SnackbarProvider";
 export * from "./src/ErrorBoundary/export";

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "main": "./exports.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/react-blueprint": "^1.0.16",
+    "@campxdev/react-blueprint": "^1.1.2",
+    "@hookform/resolvers": "^3.9.0",
     "@mui/x-date-pickers": "^7.11.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
@@ -15,14 +16,17 @@
     "@types/react-dom": "^18.0.0",
     "axios": "^1.7.2",
     "cookie-js": "^0.0.1",
+    "device-detector-js": "^3.0.3",
     "pullstate": "^1.25.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.1",
     "react-query": "^3.39.3",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.1",
     "typescript": "^4.4.2",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

package/src/ErrorBoundary/ErrorBoundary.tsx

@@ -1,16 +1,19 @@
 import {
   Button,
+  CustomDialog,
   InternalServerError,
   NoInterneConnection,
+  PageNotFound,
   UnAuthorized,
 } from "@campxdev/react-blueprint";
 import { Alert, Box, styled } from "@mui/material";
 import Cookies from "js-cookie";
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
 import { QueryErrorResetBoundary } from "react-query";
 import { useLocation, useNavigate } from "react-router-dom";
 import { axios } from "../config/axios";
+import { Login } from "./Login";
 
 export type ErrorBoundaryProps = {
   children: ReactNode;
@@ -55,14 +58,15 @@ export const ErrorBoundary = (props: ErrorBoundaryProps) => {
 };
 
 export const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
-  console.log(error, "llll");
   if (error?.response?.status) {
     switch (error?.response?.status) {
       case 401:
-        return <UnAuth resetErrorBoundary={resetErrorBoundary} />;
+        return <UnAuth />;
 
       case 500:
         return <InternalServerError resetBoundary={resetErrorBoundary} />;
+      case 404:
+        return <PageNotFound />;
     }
   }
 
@@ -88,8 +92,9 @@ export const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
   );
 };
 
-const UnAuth = ({ resetBoundary }: any) => {
+const UnAuth = () => {
   const navigate = useNavigate();
+  const [isModalOpen, setModalOpen] = useState(false);
 
   const sessionCookie = Cookies.get("campx_session_key");
 
@@ -100,10 +105,14 @@ const UnAuth = ({ resetBoundary }: any) => {
   };
 
   const handleLoginClick = () => {
-    if (!sessionCookie) {
-      navigate("/auth/login");
+    if (window.location.hostname == "localhost") {
+      setModalOpen(true);
     } else {
-      appinit();
+      if (!sessionCookie) {
+        navigate("/auth/login");
+      } else {
+        appinit();
+      }
     }
   };
 
@@ -120,6 +129,11 @@ const UnAuth = ({ resetBoundary }: any) => {
           >
             Click Here To Login
           </Button>
+          <CustomDialog
+            open={isModalOpen}
+            onClose={() => setModalOpen(false)}
+            content={({ close }) => <Login close={close} />}
+          />
         </>
       }
     />

package/src/ErrorBoundary/Login.tsx

@@ -0,0 +1,194 @@
+import { axios } from "@campxdev/campx-web-utils";
+import { Button, Icons, TextField } from "@campxdev/react-blueprint";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Box, Stack } from "@mui/material";
+import DeviceDetector from "device-detector-js";
+import Cookies from "js-cookie";
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useMutation } from "react-query";
+
+import * as Yup from "yup";
+
+type DeviceInformation = {
+  deviceType: string;
+  clientName: string;
+  os: string;
+  osVersion: string;
+  latitude: number | null;
+  longitude: number | null;
+  tokenType: string;
+};
+
+export type DeviceState = {
+  deviceInformation: DeviceInformation;
+  isLocationAllowed: boolean;
+};
+
+const performLogin = async (body: any) => {
+  if (!body.latitude || !body.longitude) {
+    const response = await fetch(
+      "https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyB2YCpo1yi107RYj1LdZu2DCcpcO93reFY",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          considerIp: "true",
+        }),
+      }
+    );
+    const data = await response.json();
+    body.latitude = data.location.lat;
+    body.longitude = data.location.lng;
+  }
+  return axios.post(`/auth-server/auth/login`, body).then((res) => res.data);
+};
+
+const validationSchema = Yup.object().shape({
+  username: Yup.string().required("Username is required"),
+  password: Yup.string().required("Password is required"),
+});
+
+export const Login = ({ close }: { close: () => void }) => {
+  const [deviceState, setDeviceState] = useState<DeviceState>({
+    deviceInformation: {
+      deviceType: "browser",
+      clientName: "unknown",
+      os: "unknown",
+      osVersion: "unknown",
+      latitude: null,
+      longitude: null,
+      tokenType: "WEB",
+    },
+    isLocationAllowed: true,
+  });
+
+  useEffect(() => {
+    navigator.geolocation.getCurrentPosition((position) => {
+      setDeviceState((s) => ({
+        ...s,
+        deviceInformation: {
+          ...s.deviceInformation,
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        },
+      }));
+    });
+    navigator.permissions
+      .query({ name: "geolocation" })
+      .then((permissionStatus) => {
+        if (permissionStatus.state === "denied") {
+          setDeviceState((s) => ({
+            ...s,
+            isLocationAllowed: false,
+          }));
+        }
+      });
+
+    const detector = new DeviceDetector();
+    const deviceInfo = detector.parse(navigator.userAgent);
+    setDeviceState((s) => ({
+      ...s,
+      deviceInformation: {
+        ...s.deviceInformation,
+        clientName: deviceInfo.client?.name || s.deviceInformation.clientName,
+        os: deviceInfo.os?.name || s.deviceInformation.os,
+        osVersion: deviceInfo.os?.version || s.deviceInformation.osVersion,
+      },
+    }));
+  }, []);
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm({ resolver: yupResolver(validationSchema) });
+
+  const { mutate, isLoading } = useMutation(performLogin, {
+    onSuccess(data) {
+      if (data.loginSuccessful) {
+        Cookies.remove("campx_session_key");
+        Cookies.remove("campx_tenant");
+        Cookies.remove("campx_institution");
+        Cookies.set("campx_session_key", data?.token);
+        Cookies.set("campx_tenant", data?.subDomain);
+        Cookies.set("campx_institution", data?.institutionCode);
+        close();
+        window.location.reload();
+      }
+    },
+  });
+  const onSubmit = async (body: any) => {
+    mutate({ ...body, ...deviceState.deviceInformation });
+  };
+
+  return (
+    <>
+      <Stack gap="16px" justifyContent="space-between" alignItems="center">
+        <Box height="36px" width="194.8px">
+          <Icons.CampxFullLogoIcon />
+        </Box>
+        <Stack gap="10px" justifyContent="center" alignItems="center">
+          <Controller
+            control={control}
+            render={({ field }: { field: any }) => {
+              return (
+                <TextField
+                  size="medium"
+                  name="username"
+                  sx={{
+                    width: "400px",
+                  }}
+                  placeholder="Enter Username or Email"
+                  containerProps={{ my: "0" }}
+                  onChange={field.onChange}
+                  label="Username or Email"
+                  error={!!errors.username}
+                  required
+                />
+              );
+            }}
+            name="username"
+          />
+          <Controller
+            control={control}
+            render={({ field }: { field: any }) => {
+              return (
+                <TextField
+                  size="medium"
+                  name="password"
+                  sx={{
+                    width: "400px",
+                  }}
+                  placeholder="Enter password"
+                  onChange={field.onChange}
+                  containerProps={{ my: "0" }}
+                  label="Password"
+                  type="password"
+                  error={!!errors.password}
+                  required
+                />
+              );
+            }}
+            name="password"
+          />
+          <Button
+            type="submit"
+            color="primary"
+            variant="contained"
+            sx={{
+              width: "400px",
+            }}
+            onClick={handleSubmit(onSubmit)}
+            disabled={isLoading}
+            loading={isLoading}
+          >
+            Login
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  );
+};