@campxdev/shared 1.7.8 → 1.7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.7.8",
+  "version": "1.7.10",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/ChangePassword.tsx

@@ -30,8 +30,8 @@ function ChangePassword({ close }) {
       try {
         await axios.post(
           isDevelopment
-            ? 'https://auth-api.campx.dev/auth/change-password'
-            : 'https://auth-api.campx.in/auth/change-password',
+            ? 'https://api.campx.dev/auth-server/auth/change-password'
+            : 'https://api.campx.in/auth-server/auth/change-password',
           {
             oldPassword,
             newPassword,

package/src/components/LoginForm.tsx

@@ -1,14 +1,29 @@
 import { Visibility, VisibilityOff } from '@mui/icons-material'
-import { Alert, Box, IconButton, InputAdornment, Stack } from '@mui/material'
+import {
+  Alert,
+  Box,
+  Button,
+  IconButton,
+  InputAdornment,
+  Stack,
+  Typography,
+  styled,
+} from '@mui/material'
 import axiosBase from 'axios'
 import Cookies from 'js-cookie'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import ActionButton from './ActionButton'
 import { FormTextField } from './HookForm'
+import axios from '../config/axios'
+import ResetPassword from './ResetPassword'
+import { Link } from 'react-router-dom'
 
 export function LoginForm({ loginUrl }: { loginUrl?: string }) {
   const [showPassword, setShowPassword] = useState(false)
+  const [forgotMail, setForgotMail] = useState(null)
+  const [forgotPassword, setForgotPassword] = useState(true)
+  const [resetPassword, setResetPassword] = useState(false)
   const { handleSubmit, control } = useForm()
   const [error, setError] = useState('')
 
@@ -30,44 +45,115 @@ export function LoginForm({ loginUrl }: { loginUrl?: string }) {
     }
   }
 
+  const [mailSent, setMailSent] = useState(false)
+
+  async function handleSendMail() {
+    try {
+      await axios
+        .get(
+          `https://api.campx.dev/auth-server/auth/forgot-password?email=${forgotMail}`,
+        )
+        .then((res) => {
+          setForgotMail(null)
+          setMailSent(true)
+          setError(null)
+        })
+    } catch (err) {
+      setError(err.response.data.message ?? 'Server Error')
+      setMailSent(false)
+    }
+  }
+
+  useEffect(() => {
+    const restLink = window.location.pathname.split('/')[1]
+    if (restLink == 'reset-password') {
+      setResetPassword(true)
+    }
+  }, [])
+
   return (
     <>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Stack gap={'30px'}>
-          <Box>
+      {resetPassword ? (
+        <>
+          <ResetPassword />
+        </>
+      ) : forgotPassword ? (
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Stack gap={'30px'} sx={{ display: resetPassword ? 'none' : 'flex' }}>
+            <Box>
+              <FormTextField
+                control={control}
+                name="username"
+                label="User ID"
+                required
+              />
+            </Box>
+            <Box>
+              <FormTextField
+                control={control}
+                name="password"
+                label="Password"
+                type={showPassword ? 'text' : 'password'}
+                required
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton
+                        size="small"
+                        aria-label="toggle password visibility"
+                        onClick={() => setShowPassword((prev) => !prev)}
+                        edge="end"
+                      >
+                        {showPassword ? <VisibilityOff /> : <Visibility />}
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </Box>
+            <ActionButton type="submit">Login</ActionButton>
+            <Typography
+              variant="h6"
+              align="right"
+              onClick={() => setForgotPassword(false)}
+            >
+              <StyledLink to="/">Forgot Password</StyledLink>
+            </Typography>
+          </Stack>
+        </form>
+      ) : (
+        <>
+          <Stack gap={'30px'}>
             <FormTextField
               control={control}
-              name="username"
-              label="User ID"
+              name="email"
+              label="Email"
               required
+              onChange={(e) => setForgotMail(e.target.value)}
             />
-          </Box>
-          <Box>
-            <FormTextField
-              control={control}
-              name="password"
-              label="Password"
-              type={showPassword ? 'text' : 'password'}
-              required
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton
-                      size="small"
-                      aria-label="toggle password visibility"
-                      onClick={() => setShowPassword((prev) => !prev)}
-                      edge="end"
-                    >
-                      {showPassword ? <VisibilityOff /> : <Visibility />}
-                    </IconButton>
-                  </InputAdornment>
-                ),
+            <Button onClick={() => handleSendMail()}>Send Email</Button>
+
+            <Typography
+              variant="subtitle2"
+              onClick={() => {
+                setForgotPassword(true)
+                setError('')
+                setMailSent(false)
               }}
-            />
-          </Box>
-          <ActionButton type="submit">Login</ActionButton>
-        </Stack>
-      </form>
+              align="right"
+            >
+              <StyledLink to="/">Login here</StyledLink>
+            </Typography>
+
+            {mailSent && (
+              <Alert severity="success">
+                Reset password link has been sent to your email.
+              </Alert>
+            )}
+          </Stack>
+        </>
+      )}
+
       {error && (
         <Alert severity="error" sx={{ marginTop: '20px' }}>
           {error}
@@ -77,4 +163,9 @@ export function LoginForm({ loginUrl }: { loginUrl?: string }) {
   )
 }
 
+export const StyledLink = styled(Link)({
+  textDecoration: 'none',
+  color: 'black',
+})
+
 export default LoginForm

package/src/components/ResetPassword.tsx

@@ -0,0 +1,107 @@
+import { VisibilityOff, Visibility } from '@mui/icons-material'
+import { Stack, InputAdornment, IconButton, Button, Alert } from '@mui/material'
+import React, { useState } from 'react'
+import { FormTextField } from './HookForm'
+import axios from '../config/axios'
+import { useForm } from 'react-hook-form'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'react-toastify'
+
+function ResetPassword() {
+  const searchParams = new URLSearchParams(document.location.search)
+  const { handleSubmit, control } = useForm()
+  const navigate = useNavigate()
+  const [error, setError] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+
+  async function handleResetPassword(values) {
+    const token = searchParams.get('token')
+    values.token = token
+
+    if (values.newPassword == values.confirmNewPassword) {
+      try {
+        await axios
+          .post(`https://api.campx.dev/auth-server/auth/reset-password`, values)
+          .then((res) => {
+            navigate('/login')
+            toast.success('Password Changed Successfully')
+          })
+      } catch (err) {
+        if (
+          values.newPassword.length == 0 &&
+          values.confirmNewPassword.length == 0
+        ) {
+          setError('Please enter valid password')
+        } else if (token == null) {
+          setError('Invalid token')
+        } else {
+          setError(err.response.data.message ?? 'Server Error')
+        }
+      }
+    } else {
+      setError("New Password and Confirm New password doesn't match")
+    }
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(handleResetPassword)}>
+        <Stack gap={'30px'}>
+          <FormTextField
+            control={control}
+            name="newPassword"
+            label="New Password"
+            type={showPassword ? 'text' : 'password'}
+            required
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    size="small"
+                    aria-label="toggle password visibility"
+                    onClick={() => setShowPassword((prev) => !prev)}
+                    edge="end"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+
+          <FormTextField
+            control={control}
+            name="confirmNewPassword"
+            label="Confirm Password"
+            type={showConfirmPassword ? 'text' : 'password'}
+            required
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    size="small"
+                    aria-label="toggle password visibility"
+                    onClick={() => setShowConfirmPassword((prev) => !prev)}
+                    edge="end"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+
+          <Button type="submit">Reset Password</Button>
+        </Stack>
+      </form>
+      {error && (
+        <Alert severity="error" sx={{ marginTop: '20px' }}>
+          {error}
+        </Alert>
+      )}
+    </>
+  )
+}
+
+export default ResetPassword

package/src/components/{TableComponent → Tables/BasicTable}/Table.tsx

@@ -10,12 +10,12 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  Typography,
 } from '@mui/material'
 import _ from 'lodash'
 import { useEffect, useState } from 'react'
-import Spinner from '../Spinner'
-import { SortAscIcon, SortDescIcon, SortIcon } from './Icons'
+import Spinner from '../../Spinner'
+import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
+import NoRecordsFound from '../common/NoRecordsFound'
 import TableFooter from './TableFooter'
 
 export interface ColumnProps {
@@ -88,7 +88,7 @@ export default function Table({
   }, [sort])
 
   return (
-    <TableContainer>
+    <StyledTableContainer>
       <>
         <MuiTable>
           <TableHead>
@@ -156,13 +156,9 @@ export default function Table({
                   ))}
                 </TableBody>
               ) : (
-                <Box>
-                  {dataSource && (
-                    <Typography sx={{ padding: '10px' }}>
-                      No Records Found !..
-                    </Typography>
-                  )}
-                </Box>
+                <>
+                  <NoRecordsFound colLength={columns?.length} />
+                </>
               )}
             </>
           ) : (
@@ -181,10 +177,15 @@ export default function Table({
           />
         )}
       </>
-    </TableContainer>
+    </StyledTableContainer>
   )
 }
 
+const StyledTableContainer = styled(TableContainer)(({ theme }) => ({
+  width: '100%',
+  overflowX: 'auto',
+}))
+
 const StyledTableRow = styled(TableRow, {
   shouldForwardProp: (prop) => prop !== 'canRowClick',
 })<{ canRowClick: boolean }>(({ canRowClick }) => ({

package/src/components/{TableComponent/TableFooter → Tables/BasicTable}/TableFooter.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography } from '@mui/material'
 import DropDownButton from '../../DropDownButton/DropDownButton'
-import { StyledPagination, StyledTableFooter } from '../styles'
+import { StyledPagination, StyledTableFooter } from '../common/styles'
+import TableStats from '../common/TableStats'
 
 interface TableFooterProps {
   totalCount: number
@@ -39,25 +40,6 @@ export default function TableFooter({
   )
 }
 
-export const TableStats = ({
-  limit,
-  totalCount,
-  page,
-}: {
-  limit: number
-  page: number
-  totalCount: number
-}) => {
-  const pageStart = (page - 1) * limit + 1
-  const pageEnd = page * limit <= totalCount ? page * limit : totalCount
-
-  return (
-    <Box>
-      <Typography variant="subtitle1">{`${pageStart} - ${pageEnd} of ${totalCount}`}</Typography>
-    </Box>
-  )
-}
-
 const LimitField = ({ handlePageLimit, limit }) => {
   return (
     <Box>

package/src/components/{TableComponent → Tables/ReactTable}/BatchActionsHeader.tsx

@@ -1,10 +1,10 @@
 import { Box, Typography } from '@mui/material'
-import DropDownButton from '../DropDownButton/DropDownButton'
+import DropDownButton from '../../DropDownButton'
 import {
   StyledActionIconButton,
   StyledActionsRow,
   StyledTableActionsHeader,
-} from './styles'
+} from '../common/styles'
 
 export default function BatchActionsHeader({
   selectedRowIds,

package/src/components/{TableComponent → Tables/ReactTable}/ReactTable.tsx

@@ -14,16 +14,16 @@ import {
 import { useEffect, useMemo, useState } from 'react'
 import { usePagination, useRowSelect, useTable } from 'react-table'
 import BatchActionsHeader from './BatchActionsHeader'
-import { SortAscIcon, SortDescIcon, SortIcon } from './Icons'
+import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
 import { RenderTableBody } from './RenderTableBody'
 import {
   StyledLimitBox,
   StyledLimitMenu,
   StyledPagination,
   StyledTableFooter,
-} from './styles'
-import { TableStats } from './TableFooter/TableFooter'
-import { ColumnProps, Sort, TableProps } from './types'
+} from '../common/styles'
+import { ColumnProps, Sort, TableProps } from '../common/types'
+import TableStats from '../common/TableStats'
 
 type ReactTableCell = {
   Header: any
@@ -73,7 +73,7 @@ const getTableCol = (headerItem: ColumnProps) => {
   return col
 }
 
-export default function TableComponent({
+export default function ReactTable({
   columns,
   dataSource,
   loading,

package/src/components/{TableComponent → Tables/ReactTable}/RenderTableBody.tsx

@@ -1,7 +1,7 @@
 import { Box, TableBody, TableCell, Typography } from '@mui/material'
-import Spinner from '../Spinner'
-import noDataImage from './no-data-illu.svg'
-import { StyledTableRow } from './styles'
+import Spinner from '../../Spinner'
+import { StyledTableRow } from '../common/styles'
+import NoRecordsFound from '../common/NoRecordsFound'
 
 export const RenderTableBody = ({
   getTableBodyProps,
@@ -19,26 +19,7 @@ export const RenderTableBody = ({
     )
 
   if (!loading && rows?.length < 1)
-    return (
-      <TableCell colSpan={colLength}>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <img
-            style={{ width: '200px', height: 'auto', textAlign: 'center' }}
-            src={noDataImage}
-          />
-          <Typography variant="h6" align="center">
-            No Records Found
-          </Typography>
-        </Box>
-      </TableCell>
-    )
+    return <NoRecordsFound colLength={colLength} />
 
   return (
     <TableBody {...getTableBodyProps()}>

package/src/components/Tables/ReactTable/index.tsx

@@ -0,0 +1 @@
+export { default } from './ReactTable'

package/src/components/Tables/common/NoRecordsFound.tsx

@@ -0,0 +1,27 @@
+import { Box, TableCell, Typography } from '@mui/material'
+import noDataImage from './no-data-illu.svg'
+
+const NoRecordsFound = ({ colLength }) => {
+  return (
+    <TableCell colSpan={colLength}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <img
+          style={{ width: '200px', height: 'auto', textAlign: 'center' }}
+          src={noDataImage}
+        />
+        <Typography variant="h6" align="center">
+          No Records Found
+        </Typography>
+      </Box>
+    </TableCell>
+  )
+}
+
+export default NoRecordsFound

package/src/components/Tables/common/TableStats.tsx

@@ -0,0 +1,22 @@
+import { Box, Typography } from '@mui/material'
+
+const TableStats = ({
+  limit,
+  totalCount,
+  page,
+}: {
+  limit: number
+  page: number
+  totalCount: number
+}) => {
+  const pageStart = (page - 1) * limit + 1
+  const pageEnd = page * limit <= totalCount ? page * limit : totalCount
+
+  return (
+    <Box>
+      <Typography variant="subtitle1">{`${pageStart} - ${pageEnd} of ${totalCount}`}</Typography>
+    </Box>
+  )
+}
+
+export default TableStats

package/src/components/index.ts

@@ -14,6 +14,7 @@ import { Table as StyledTable } from './Table'
 import ErrorBoundary from './ErrorBoundary'
 import FullScreenLoader from './FullScreenLoader'
 import LoginForm from './LoginForm'
+import ResetPassword from './ResetPassword'
 import { SideMenuHeader } from './Layout/SideMenuHeader'
 import SideNav from './Layout/SideNav'
 import { ListItemButton } from './ListItemButton'
@@ -37,7 +38,7 @@ export { default as PageHeader } from './PageHeader'
 export { PageContent } from './PageContent'
 export { default as ActionButton } from './ActionButton'
 export { default as Breadcrumbs } from './Breadcrumbs'
-export { default as Table } from './TableComponent'
+export { default as Table } from './Tables/BasicTable'
 export { default as Spinner } from './Spinner'
 export { default as AutocompleteSearch } from './AutocompleteSearch'
 export { default as JsonPreview } from './JsonPreview'
@@ -51,8 +52,8 @@ export { default as ToastContainer } from './ToastContainer'
 export { default as Card } from './Card'
 export { default as CardsGrid } from './CardsGrid'
 export { default as DividerHeading } from './DividerHeading'
-export { default as ReactTable } from './TableComponent/ReactTable'
-export { default as TableFooter } from './TableComponent/TableFooter'
+export { default as ReactTable } from './Tables/ReactTable'
+export { default as TableFooter } from './Tables/BasicTable/TableFooter'
 export { default as DropDownButton } from './DropDownButton'
 export { default as useConfirm } from './PopupConfirm/useConfirm'
 
@@ -74,6 +75,7 @@ export {
   ErrorBoundary,
   FullScreenLoader,
   LoginForm,
+  ResetPassword,
   SideMenuHeader,
   ListItemButton,
   LayoutWrapper,

package/src/components/TableComponent/TableFooter/index.tsx

@@ -1 +0,0 @@
-export { default } from './TableFooter'

package/src/components/TableComponent/TableFooter/styles.tsx

@@ -1,28 +0,0 @@
-import { Box, Pagination, styled } from '@mui/material'
-
-export const StyledTableStats = styled(Box)(({}) => ({}))
-
-export const StyledTableFooter = styled(Box)(({ theme }) => ({
-  paddingTop: '1rem',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-}))
-
-export const StyledPagination = styled(Pagination)(({ theme }) => ({
-  '& .MuiPaginationItem-root': {
-    border: 'none',
-    background: theme.palette.secondary.dark,
-  },
-  '& .MuiPaginationItem-previousNext': {
-    border: theme.borders.grayLight,
-    background: theme.palette.common.white,
-  },
-  '& .Mui-selected': {
-    border: `2px solid ${theme.palette.common.yellow}`,
-  },
-  '& .MuiPaginationItem-ellipsis': {
-    background: theme.palette.common.white,
-  },
-}))