form-craft-package 1.7.9-dev.0 → 1.7.9-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.7.9-dev.0",
+  "version": "1.7.9-dev.2",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -12,8 +12,9 @@
   "description": "",
   "dependencies": {
     "@types/react-google-recaptcha": "^2.1.9",
-    "@types/react-signature-canvas": "^1.0.6",
+    "@types/react-signature-canvas": "^1.0.7",
     "ajv": "^8.17.1",
+    "bson": "^4.7.2",
     "pdfmake": "^0.2.18",
     "qs": "^6.14.0",
     "react-google-recaptcha": "^3.1.0",

package/src/api/client.ts

@@ -6,7 +6,7 @@ import { LOCAL_STORAGE_KEYS_ENUM, SHARED_COOKIE_KEYS } from '../enums'
 
 import { IDynamicForm } from '../types'
 import { constructDynamicFormHref, fetchDynamicForms } from '../functions'
-import { CLIENT_ID, CLIENT_SECRET } from '../global-helpers/constants'
+import { CLIENT_ID, CLIENT_SECRET } from '../constants'
 
 const baseURL = import.meta.env.VITE_API_BASE_URL
 

package/src/api/user.ts

@@ -1,15 +1,14 @@
-import { SHARED_COOKIE_KEYS } from "../enums"
-import { CLIENT_SECRET } from "../global-helpers/constants"
-import { cookieHandler } from "../global-helpers/cookie-handler"
+import { SHARED_COOKIE_KEYS } from '../enums'
+import { cookieHandler } from '../functions/cookie-handler'
 import crypto from 'crypto-js'
-import { CookieKeysEnum } from "../global-helpers/enums"
+import { CLIENT_SECRET } from '../constants'
 
 const endSession = () => {
   cookieHandler.empty()
   localStorage.clear()
   return
 }
-const decrypt = (toDecrypt: CookieKeysEnum) => {
+const decrypt = (toDecrypt: SHARED_COOKIE_KEYS) => {
   const cookieValue = cookieHandler.get(toDecrypt)
   if (!cookieValue) return ''
   const bytes = crypto.AES.decrypt(cookieValue, CLIENT_SECRET)
@@ -31,19 +30,19 @@ export const UserAuth = {
   },
   getUserEmail: () => {
     try {
-      return decrypt(CookieKeysEnum.UserEmail) ? decrypt(CookieKeysEnum.UserEmail) : ''
+      return decrypt(SHARED_COOKIE_KEYS.UserEmail) ? decrypt(SHARED_COOKIE_KEYS.UserEmail) : ''
     } catch {
       endSession()
     }
   },
   getUserFullName: () => {
     try {
-      return decrypt(CookieKeysEnum.FullName) ? decrypt(CookieKeysEnum.FullName) : ''
+      return decrypt(SHARED_COOKIE_KEYS.FullName) ? decrypt(SHARED_COOKIE_KEYS.FullName) : ''
     } catch {
       endSession()
     }
   },
   getUserId: () => {
-    return cookieHandler.get(CookieKeysEnum.UserId)
+    return cookieHandler.get(SHARED_COOKIE_KEYS.UserId)
   },
 }

package/src/components/common/custom-hooks/use-breadcrumb.hook.ts

@@ -0,0 +1,90 @@
+import { useSyncExternalStore } from 'react'
+import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
+import { NEW_FORM_DATA_IDENTIFIER } from '../../../constants'
+
+export type IBreadcrumb = { label: string; href: string; [key: string]: any }
+
+let crumbs: IBreadcrumb[] = loadFromStorage()
+const listeners = new Set<() => void>()
+
+function loadFromStorage(): IBreadcrumb[] {
+  try {
+    const raw = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Breadcrumb)
+    return raw ? JSON.parse(raw) : []
+  } catch {
+    return []
+  }
+}
+
+function saveToStorage() {
+  try {
+    localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.Breadcrumb, JSON.stringify(crumbs))
+  } catch {}
+}
+
+function notify() {
+  for (const fn of listeners) fn()
+}
+
+function handlePopState() {
+  const href = window.location.pathname
+  const idx = crumbs.findIndex((c) => c.href === href)
+  breadcrumbStore.sliceAt(idx >= 0 ? idx : 0)
+}
+
+if (typeof window !== 'undefined') {
+  window.addEventListener('popstate', handlePopState)
+}
+
+export const breadcrumbStore = {
+  getCrumbs: () => crumbs,
+  reset: () => {
+    crumbs = []
+    saveToStorage()
+    notify()
+  },
+  push: (c: IBreadcrumb) => {
+    const last = crumbs[crumbs.length - 1]
+    if (last?.href === c.href) return
+
+    if (last?.href.endsWith(NEW_FORM_DATA_IDENTIFIER)) crumbs = [...crumbs.slice(0, -1), c]
+    else crumbs = [...crumbs, c]
+
+    saveToStorage()
+    notify()
+  },
+  updateCrumb: (href: string, props: Partial<IBreadcrumb>): void => {
+    let changed = false
+    crumbs = crumbs.map((c) => {
+      if (c.href === href) {
+        changed = true
+        return { ...c, ...props }
+      }
+      return c
+    })
+
+    if (changed) {
+      saveToStorage()
+      notify()
+    }
+  },
+  sliceAt: (i: number) => {
+    crumbs = crumbs.slice(0, i + 1)
+    saveToStorage()
+    notify()
+  },
+  subscribe: (fn: () => void) => {
+    listeners.add(fn)
+    return () => void listeners.delete(fn)
+  },
+}
+
+export function useBreadcrumb() {
+  return {
+    breadcrumbs: useSyncExternalStore(breadcrumbStore.subscribe, breadcrumbStore.getCrumbs),
+    reset: breadcrumbStore.reset,
+    push: breadcrumbStore.push,
+    sliceAt: breadcrumbStore.sliceAt,
+    updateCrumb: breadcrumbStore.updateCrumb,
+  }
+}

package/src/components/common/custom-hooks/use-check-element-conditions.hook.ts

@@ -23,7 +23,7 @@ export const useCheckElementConditions = ({
   const currentBreakpoint = useGetCurrentBreakpoint()
 
   const formValues = Form.useWatch([], { form: formRef, preserve: true })
-  
+
   useEffect(() => {
     if (!!formValues) {
       setIsDisabled(
@@ -39,7 +39,7 @@ export const useCheckElementConditions = ({
         }),
       )
     }
-  }, [formValues, conditions])
+  }, [formValues, conditions, formContext, currentBreakpoint])
 
   return { isElementDisabled: isDisabled, isElementHidden: isHidden }
 }
@@ -71,7 +71,7 @@ const isValidationsMet = (
   // Dependent on data id
   const isDataIdConditionsMet = hasDataIdValidation
     ? hasDataIdValidation.state === FormStateEnum.New
-      ? contextValues.formDataId === NEW_FORM_DATA_IDENTIFIER
+      ? !contextValues.formDataId || contextValues.formDataId === NEW_FORM_DATA_IDENTIFIER
       : contextValues.formDataId !== NEW_FORM_DATA_IDENTIFIER
     : true
 

package/src/components/common/custom-hooks/use-find-dynamic-form.hook.ts

@@ -1,27 +1,46 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useParams } from 'react-router-dom'
 import { IDynamicForm } from '../../../types'
 import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 
 export const useFindDynamiForm = () => {
   const { formName } = useParams<{ formName: string }>()
-  const [foundItem, setFoundItem] = useState<IDynamicForm | undefined | null>(undefined)
+  const [foundItem, setFoundItem] = useState<IDynamicForm | null | undefined>(undefined)
 
   useEffect(() => {
     if (!formName) return
 
     try {
-      const storedData = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms)
-      if (storedData) {
-        const parsedData: IDynamicForm[] = JSON.parse(storedData)
-        const item = parsedData.find((entry) => entry.name.split(' ').join('-').toLocaleLowerCase() === formName)
-
-        setFoundItem(item ?? null)
+      const stored = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms)
+      if (stored) {
+        const list: IDynamicForm[] = JSON.parse(stored)
+        const match = list.find((entry) => entry.name.split(' ').join('-').toLowerCase() === formName)
+        setFoundItem(match ?? null)
+      } else {
+        setFoundItem(null)
       }
-    } catch (error) {
-      console.error('Error reading or parsing localStorage data', error)
+    } catch (err) {
+      console.error('Error reading or parsing DynamicForms:', err)
+      setFoundItem(null)
     }
   }, [formName])
 
-  return foundItem?.name?.split(' ').join('-').toLowerCase() === formName ? foundItem : undefined
+  const getFormById = useCallback((id: number): IDynamicForm | undefined => {
+    if (!id) return
+
+    try {
+      const stored = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms)
+      if (!stored) return undefined
+
+      const list: IDynamicForm[] = JSON.parse(stored)
+      return list.find((entry) => entry.id === id)
+    } catch (err) {
+      console.error('Error in getFormById reading DynamicForms:', err)
+      return
+    }
+  }, [])
+
+  const formInfo = foundItem && foundItem.name.split(' ').join('-').toLowerCase() === formName ? foundItem : undefined
+
+  return { formInfo, getFormById }
 }

package/src/components/common/custom-hooks/use-login-handler.ts

@@ -2,7 +2,7 @@ import { useReducer, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import client, { auth } from '../../../api/client'
 import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
-import { cookieHandler } from '../../../global-helpers/cookie-handler'
+import { cookieHandler } from '../../../functions/cookie-handler'
 import { message } from 'antd'
 export function useLoginHandler() {
     const navigate = useNavigate()
@@ -72,20 +72,39 @@ export function useLoginHandler() {
             setShowVerificationModal(false)
         }
     }
+
     const handleForgotPassword = async (email?: string) => {
         if (!email) {
             return message.error('Please enter your email or username first.')
         }
         const payload = {
             subject: 'Reset your password',
-            body: 'Please click the link to reset your password.',
+            body: `
+    <div style="font-family: Arial, sans-serif; max-width: 600px; margin: auto; padding: 20px; border: 1px solid #ddd; border-radius: 10px;">
+      <h2 style="color: #333;">Reset Your Password</h2>
+      <p style="font-size: 16px; color: #555;">
+        We received a request to reset your password. Click the button below to verify and continue:
+      </p>
+      <div style="text-align: center; margin: 30px 0;">
+<a href="${window.location.href.replace('forgot-password', 'reset-password')}?token=[token]&domain=${domain}&email=${email}" 
+   style="background-color: #4CAF50; color: white; padding: 12px 24px; text-decoration: none; font-size: 16px; border-radius: 6px;">
+  Click here to reset password
+</a>
+
+      </div>
+      <p style="font-size: 14px; color: #888;">
+        If you didn’t request this, you can safely ignore this email.
+      </p>
+    </div>
+  `,
             from: 'no-reply@icodice.com',
             to: email,
             cc: '',
             bcc: '',
             notificationId: 0,
             attachments: [],
-        }
+        };
+
 
         try {
             await client.post(`/api/user/${domain}/forgotpassword/${email}`, payload)
@@ -95,6 +114,62 @@ export function useLoginHandler() {
             message.error('Failed to send reset email.')
         }
     }
+
+    const handleVerifyToken = async (domain: string, email: string, token: string) => {
+        const encodedEmail = encodeURIComponent(email);
+        try {
+            const response = await client.post(
+                `/api/user/${domain}/verifypasswordtoken/${encodedEmail}`,
+                `"${token}"`,
+                {
+                    headers: {
+                        'accept': 'text/plain',
+                        'Content-Type': 'application/json',
+                    }
+                }
+            );
+            return response.data;
+        } catch (error) {
+            message.error('Invalid or expired reset token.');
+            return null;
+        }
+    };
+
+
+    const handleResetPassword = async (
+        domain: string,
+        email: string,
+        token: string,
+        password: string
+    ) => {
+        try {
+            const payload = {
+                token,
+                password,
+                notification: {
+                    subject: 'Password Reset Confirmation',
+                    body: 'Your password has been successfully reset.',
+                    from: 'no-reply@icodice.com',
+                    to: email,
+                    cc: '',
+                    bcc: '',
+                    notificationId: 0,
+                    attachments: [],
+                },
+            }
+            const encodedEmail = encodeURIComponent(email);
+            const response = await client.post(`/api/user/${domain}/resetpassword/${encodedEmail}`, payload)
+            if (response.status === 200) {
+                message.success('Password successfully reset.')
+                navigate('/login')
+            }
+            return response
+        } catch (error) {
+            message.error('Failed to reset password.')
+            return null
+        }
+    }
+
     return {
         handleLogin,
         loading,
@@ -105,6 +180,8 @@ export function useLoginHandler() {
         handleSetupCancel,
         handleVerifyCode,
         handleUnlinkAuthenticator,
-        handleForgotPassword
+        handleForgotPassword,
+        handleVerifyToken,
+        handleResetPassword
     }
 }

package/src/components/common/custom-hooks/use-many-to-many-connector.hook.ts

@@ -0,0 +1,30 @@
+import { useEffect, useMemo } from 'react'
+import { useBreadcrumb } from './use-breadcrumb.hook'
+import { FormInstance } from 'antd'
+import { getForeignKeysFromBreadcrumb } from '../../../functions/forms/breadcrumb-handlers'
+
+export const useManyToManyConnector = (formRef: FormInstance) => {
+  const { breadcrumbs } = useBreadcrumb()
+
+  const prevPageBreadcrumb = useMemo(() => {
+    if (breadcrumbs.length > 2) {
+      const prevPageBreadcrumb = breadcrumbs[breadcrumbs.length - 2]
+      const { formDataId, formJoins, manyToManyRelInfo } = prevPageBreadcrumb
+      if (!formDataId || !formJoins || !Array.isArray(formJoins) || !manyToManyRelInfo) return
+
+      return prevPageBreadcrumb
+    }
+
+    return
+  }, [breadcrumbs])
+
+  useEffect(() => {
+    if (!prevPageBreadcrumb) return
+
+    const { foreignKey, foreignKey2 } = getForeignKeysFromBreadcrumb(prevPageBreadcrumb)
+
+    if (foreignKey && foreignKey2) formRef.setFieldValue(foreignKey, prevPageBreadcrumb.formDataId)
+  }, [prevPageBreadcrumb, formRef])
+
+  return
+}

package/src/components/common/not-found.tsx

@@ -0,0 +1,21 @@
+import { Result } from 'antd'
+import { Button_FillerPortal } from './button'
+import { useNavigate } from 'react-router-dom'
+
+export default function NotFound() {
+  const navigate = useNavigate()
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle="Sorry, the page you visited does not exist."
+      extra={
+        <div className="grid justify-center grid-cols-[200px]">
+          <Button_FillerPortal primary onClick={() => navigate('/d')}>
+            Go Back
+          </Button_FillerPortal>
+        </div>
+      }
+    />
+  )
+}

package/src/components/common/section-panel.tsx

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react'
+
+export default function SectionPanel({
+  header,
+  className = '',
+  scrollHeight,
+  children,
+}: {
+  children: ReactNode
+  className?: string
+  scrollHeight?: string
+  header?: {
+    title?: any
+    description?: any
+    action?: any
+  }
+}) {
+  return (
+    <div
+      className={`bg-white p-2 rounded-md space-y-2 ${className} ${scrollHeight ? 'fc-scroll' : ''}`}
+      style={scrollHeight ? { maxHeight: scrollHeight } : {}}
+    >
+      {header && (
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex flex-col leading-5 flex-grow">
+            {header.title && <SectionTitle title={header.title} />}
+            {header.description && <span className="text-neutral italic text-14">{header.description}</span>}
+          </div>
+          {header.action && header.action}
+        </div>
+      )}
+
+      {children}
+    </div>
+  )
+}
+
+export const SectionTitle = ({ title, size: fontSize = 16 }: { title: any; size?: number }) => (
+  <div className="font-bold text-primary" style={{ fontSize }}>
+    {title}
+  </div>
+)

package/src/components/companies/1-authenticated/change-password.tsx

@@ -0,0 +1,110 @@
+import { Col, Row, Spin, Input, Button, Form, notification } from 'antd'
+import { useState } from 'react'
+import { useConfigContext } from '../context'
+import SectionPanel from '../../common/section-panel'
+import client from '../../../api/client'
+import { UserAuth } from '../../../api/user'
+
+export const ChangePassword = () => {
+  const { config } = useConfigContext()
+  const [loading, setLoading] = useState(false)
+  const [form] = Form.useForm()
+  const onFinish = async (values: any) => {
+    setLoading(true)
+    try {
+      const response = await client.put('/api/user/changepassword', {
+        currentPassword: values.currentPassword,
+        newPassword: values.newPassword,
+        notification: {
+          subject: 'Password Change Notification',
+          body: 'Your password has been successfully changed.',
+          from: 'no-reply@icodice.com',
+          to: UserAuth.getUserEmail(),
+          cc: '',
+          bcc: '',
+          notificationId: 1,
+          attachments: [],
+        },
+      })
+      if (response.status === 200) {
+        notification.success({
+          message: 'Password Changed Successfully',
+          description: 'Your password has been updated.',
+        })
+      }
+    } catch (error) {
+      notification.error({
+        message: 'Password Change Failed',
+        description: 'There was an error changing your password.',
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Validate that the confirm password matches the new password
+  const validateConfirmPassword = (_: any, value: string) => {
+    if (!value || value === '') {
+      return Promise.resolve()
+    }
+    if (value !== form.getFieldValue('newPassword')) {
+      return Promise.reject(new Error('Confirm password do not match!'))
+    }
+    return Promise.resolve()
+  }
+
+  return (
+    <Spin spinning={!config || loading}>
+      <SectionPanel className="mt-2" header={{ title: 'Change Password' }}>
+        <Row>
+          <Col span={24}>
+            <Form
+              form={form}
+              layout="vertical"
+              onFinish={onFinish}
+              initialValues={{
+                currentPassword: '',
+                newPassword: '',
+                confirmPassword: '',
+              }}
+            >
+              <Form.Item
+                label="Current Password"
+                name="currentPassword"
+                rules={[{ required: true, message: 'Please enter your current password' }]}
+              >
+                <Input.Password placeholder="Enter current password" />
+              </Form.Item>
+
+              <Form.Item
+                label="New Password"
+                name="newPassword"
+                rules={[{ required: true, message: 'Please enter your new password' }]}
+              >
+                <Input.Password placeholder="Enter new password" />
+              </Form.Item>
+
+              <Form.Item
+                label="Confirm New Password"
+                name="confirmPassword"
+                rules={[
+                  { required: true, message: 'Please confirm your new password' },
+                  { validator: validateConfirmPassword },
+                ]}
+              >
+                <Input.Password placeholder="Confirm new password" />
+              </Form.Item>
+
+              {/* Add margin to space between fields and button */}
+              <Form.Item style={{ marginTop: '16px' }}>
+                <Button type="primary" htmlType="submit" loading={loading}>
+                  Change Password
+                </Button>
+              </Form.Item>
+            </Form>
+          </Col>
+        </Row>
+      </SectionPanel>
+    </Spin>
+  )
+}