form-craft-package 1.7.3 → 1.7.5

package/.env.development

@@ -0,0 +1,4 @@
+VITE_API_BASE_URL=https://bark-backend-form.azurewebsites.net
+VITE_LOG_LEVEL=debug
+VITE_COOKIE_DOMAIN=localhost
+VITE_ENV=development

package/.env.production

@@ -0,0 +1,5 @@
+# .env
+VITE_API_BASE_URL=https://bark-backend-form.azurewebsites.net
+VITE_LOG_LEVEL=error
+VITE_COOKIE_DOMAIN=localhost
+VITE_ENV=production

package/.env.staging

@@ -0,0 +1,4 @@
+VITE_API_BASE_URL=https://bark-backend-form.azurewebsites.net
+VITE_LOG_LEVEL=debug
+VITE_COOKIE_DOMAIN=localhost
+VITE_ENV=staging

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -15,6 +15,7 @@
     "@types/react-signature-canvas": "^1.0.6",
     "ajv": "^8.17.1",
     "pdfmake": "^0.2.18",
+    "qs": "^6.14.0",
     "react-google-recaptcha": "^3.1.0",
     "react-signature-canvas": "^1.0.7"
   },
@@ -31,8 +32,10 @@
     "react-router-dom": ">=6.27.0"
   },
   "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
     "@types/js-cookie": "^3.0.6",
     "@types/pdfmake": "^0.2.11",
+    "@types/qs": "^6.9.18",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "react": "^18.3.1",

package/src/{functions/axios-handler.ts → api/client.ts}

@@ -1,15 +1,20 @@
 import Cookies from 'js-cookie'
-import axios from 'axios'
-
+import axios, { AxiosRequestConfig, AxiosResponse, CancelTokenSource } from 'axios'
+import qs from 'qs'
 import { notification } from 'antd'
-import { SHARED_COOKIE_KEYS } from '../enums'
+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'
 
-let baseURL = 'https://bark-backend-form.azurewebsites.net'
+export const baseURL = 'https://formcraftmaster-backend-dev-f8egf2fcfhhahuhr.centralus-01.azurewebsites.net/'
 
 const getCookieDeadline = (expiresIn: number): Date => {
   const now = new Date()
   return new Date(now.getTime() + expiresIn * 1000)
 }
+const stringify = (obj: any) => qs.stringify(obj)
 
 const authResHandler = (resData: any) => {
   const expires = getCookieDeadline(resData.expires_in)
@@ -21,6 +26,9 @@ const authResHandler = (resData: any) => {
   Cookies.set(SHARED_COOKIE_KEYS.AccessToken, resData.access_token, cookieSettings)
   Cookies.set(SHARED_COOKIE_KEYS.RefreshToken, resData.refresh_token)
 }
+/** --------------- Cancel token source --------------- */
+
+const clientCancelToken = axios.CancelToken
 
 /** --------------- Access Token Interceptor --------------- */
 
@@ -35,6 +43,48 @@ client.interceptors.request.use((req) => {
   if (req.headers) req.headers.Authorization = `Bearer ${accessToken}`
   return req
 })
+/** --------------- Login --------------- */
+
+const auth = async (
+  email: string,
+  password: string,
+  domain: string,
+  type: string
+): Promise<{ authRes: any; initialPath: string }> => {
+
+  const reqData = stringify({
+    username: email,
+    password,
+    grant_type: type,
+    refresh_token: type === 'refresh_token' ? Cookies.get(SHARED_COOKIE_KEYS.RefreshToken) : undefined,
+    client_id: CLIENT_ID,
+    client_secret: CLIENT_SECRET,
+    scope: 'offline_access',
+    domain,
+  })
+  try {
+
+    const loginAuthRes = await client.post(`/connect/token`, reqData)
+
+    let forms: IDynamicForm[] = []
+    if (loginAuthRes.status === 200) {
+      authResHandler(loginAuthRes.data)
+      if (!loginAuthRes.data.required2FA || type === 'refresh_token') {
+        Cookies.set(SHARED_COOKIE_KEYS.Authorized, 'true')
+        forms = await fetchDynamicForms()
+        localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms, JSON.stringify(forms))
+        localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.Domain, domain)
+      }
+    }
+    return {
+      authRes: loginAuthRes,
+      initialPath: forms.length > 0 ? constructDynamicFormHref(forms[0].name) : '/accounts',
+    }
+  } catch (error) {
+    return { authRes: error, initialPath: '' }
+  }
+}
+
 
 /** --------------- Refresh Token --------------- */
 
@@ -53,8 +103,8 @@ const handleTokenRefresh = () => {
     window.location.href = '/login'
   }
   return new Promise((resolve, reject) => {
-    axios
-      .post(`${baseURL}/connect/token/refresh`, { refreshToken })
+    client
+      .post(`$/connect/token/refresh`, { refreshToken })
       .then(({ data }) => {
         resolve({
           accessToken: data.accessToken,
@@ -154,5 +204,23 @@ const displayNotification = (error: any) => {
   }
 }
 
+const sendCancelableRequest = (
+  config: AxiosRequestConfig,
+): { request: Promise<AxiosResponse<any>>; cancel: (message?: string) => void } => {
+  const source: CancelTokenSource = axios.CancelToken.source()
+  config.cancelToken = source.token
+  const request: Promise<AxiosResponse<any>> = client.request(config)
+  return { request, cancel: source.cancel }
+}
+
+export const cancelableClient = {
+  get: (url: string, config?: AxiosRequestConfig) => sendCancelableRequest({ method: 'get', url, ...config }),
+  post: (url: string, data?: any, config?: AxiosRequestConfig) =>
+    sendCancelableRequest({ method: 'post', url, data, ...config }),
+  put: (url: string, data?: any, config?: AxiosRequestConfig) =>
+    sendCancelableRequest({ method: 'put', url, data, ...config }),
+  delete: (url: string, config?: AxiosRequestConfig) => sendCancelableRequest({ method: 'delete', url, ...config }),
+}
+
 export default client
-export { authResHandler }
+export { authResHandler, auth, clientCancelToken }

package/src/api/user.ts

@@ -0,0 +1,50 @@
+import { SHARED_COOKIE_KEYS } from "../enums"
+import { CLIENT_SECRET } from "../global-helpers/constants"
+import { cookieHandler } from "../global-helpers/cookie-handler"
+import crypto from 'crypto-js'
+import { CookieKeysEnum } from "../global-helpers/enums"
+
+const endSession = () => {
+  cookieHandler.empty()
+  localStorage.clear()
+  return
+}
+const decrypt = (toDecrypt: CookieKeysEnum) => {
+  const cookieValue = cookieHandler.get(toDecrypt)
+  if (!cookieValue) return ''
+  const bytes = crypto.AES.decrypt(cookieValue, CLIENT_SECRET)
+  return JSON.parse(bytes.toString(crypto.enc.Utf8))
+}
+
+const UserAuth = {
+  hasRefreshToken: () => {
+    return !!cookieHandler.get(SHARED_COOKIE_KEYS.RefreshToken)
+  },
+  isAuthorized: () => {
+    return cookieHandler.get(SHARED_COOKIE_KEYS.Authorized)
+  },
+  getRefreshToken: () => {
+    return cookieHandler.get(SHARED_COOKIE_KEYS.RefreshToken)
+  },
+  getCompanyKey: () => {
+    return cookieHandler.get(SHARED_COOKIE_KEYS.CompanyKey)
+  },
+  getUserEmail: () => {
+    try {
+      return decrypt(CookieKeysEnum.UserEmail) ? decrypt(CookieKeysEnum.UserEmail) : ''
+    } catch {
+      endSession()
+    }
+  },
+  getUserFullName: () => {
+    try {
+      return decrypt(CookieKeysEnum.FullName) ? decrypt(CookieKeysEnum.FullName) : ''
+    } catch {
+      endSession()
+    }
+  },
+  getUserId: () => {
+    return cookieHandler.get(CookieKeysEnum.UserId)
+  },
+}
+export default UserAuth

package/src/components/common/currency-field.tsx

@@ -6,6 +6,8 @@ import { INTERNATIONALIZATION_DATA } from '../../constants'
 export default function CurrencyField({
   country = CountryEnum.US,
   decimalPoint = 0,
+  value,
+  onChange,
   ...restProps
 }: ICurrencyField) {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -44,6 +46,10 @@ export default function CurrencyField({
       ref={inputRef}
       onFocus={handleFocus}
       precision={decimalPoint}
+      value={value}
+      onChange={(val) => {
+        if (typeof val === 'number' && onChange) onChange(val)
+      }}
       formatter={(value) => {
         if (!value) return `${currencySymbol}${parseInt('0').toFixed(decimalPoint)}`
 
@@ -65,4 +71,6 @@ interface ICurrencyField {
   decimalPoint?: number
   placeholder?: string
   disabled?: boolean
+  value?: number
+  onChange?: (val: number) => void
 }

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

@@ -0,0 +1,110 @@
+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 { message } from 'antd'
+export function useLoginHandler() {
+    const navigate = useNavigate()
+    const domain = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Domain) || ''
+    const [loading, updateLoading] = useReducer(
+        (currState: any, updated: any) => ({ ...currState, ...updated }),
+        { login: false }
+    )
+
+    const [googleAuthSetup, setGoogleAuthSetup] = useState<null | {
+        qrCodeImageUrl: string
+        manualEntryCode: string
+        key: string
+    }>(null)
+
+    const [showVerificationModal, setShowVerificationModal] = useState(false)
+    const [latestLoginValues, setLatestLoginValues] = useState<any>(null)
+
+    const handleLogin = async (values: any) => {
+        updateLoading({ login: true })
+        setLatestLoginValues(values)
+
+        const { authRes, initialPath } = await auth(values.email, values.password, domain, values.type || 'password')
+        if (authRes.status === 200) {
+            const data = authRes.data
+            if (!data.required2FA) {
+                navigate(initialPath)
+            } else if (data.required2FA && !data.configuredGoogleAuth) {
+                const googleSetup = await client.get(`api/authorization/authkey`)
+                if (googleSetup.status === 200) {
+                    setGoogleAuthSetup({
+                        qrCodeImageUrl: googleSetup.data.qrCodeImageUrl,
+                        manualEntryCode: googleSetup.data.manualEntrySetupCode,
+                        key: googleSetup.data.key,
+                    })
+                }
+            } else if (data.required2FA && data.configuredGoogleAuth) {
+                setShowVerificationModal(true)
+            }
+        }
+
+        updateLoading({ login: false })
+    }
+
+    const handleSetupDone = async () => {
+        if (!googleAuthSetup) return
+        await client.put(`api/authorization/authkey?key=${googleAuthSetup.key}`)
+        setGoogleAuthSetup(null)
+        handleLogin(latestLoginValues)
+    }
+    const handleSetupCancel = async () => {
+        await cookieHandler.empty()
+        setGoogleAuthSetup(null)
+    }
+
+    const handleVerifyCode = async (code: any) => {
+        await handleLogin({ email: latestLoginValues.email, password: code, type: 'refresh_token' })
+    }
+    const handleUnlinkAuthenticator = async () => {
+        const res = await client.get('api/authorization/authkey')
+        if (res.status === 200) {
+            setGoogleAuthSetup({
+                qrCodeImageUrl: res.data.qrCodeImageUrl,
+                manualEntryCode: res.data.manualEntrySetupCode,
+                key: res.data.key,
+            })
+            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.',
+            from: 'no-reply@icodice.com',
+            to: email,
+            cc: '',
+            bcc: '',
+            notificationId: 0,
+            attachments: [],
+        }
+
+        try {
+            await client.post(`/api/user/${domain}/forgotpassword/${email}`, payload)
+            message.success('Reset link sent. Please check your email.')
+        } catch (error) {
+            console.error('Forgot Password Error:', error)
+            message.error('Failed to send reset email.')
+        }
+    }
+    return {
+        handleLogin,
+        loading,
+        googleAuthSetup,
+        showVerificationModal,
+        handleSetupDone,
+        setShowVerificationModal,
+        handleSetupCancel,
+        handleVerifyCode,
+        handleUnlinkAuthenticator,
+        handleForgotPassword
+    }
+}

package/src/components/common/custom-hooks/use-site-meta-data.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { ISiteIdentity } from '../../../types';
+
+
+const useSiteMetadata = (siteIdentity?: ISiteIdentity) => {
+
+    useEffect(() => {
+        if (siteIdentity?.title) {
+            document.title = siteIdentity.title;
+        }
+        if (siteIdentity?.iconUrl) {
+            const iconUrl = siteIdentity.iconUrl;
+            let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement | null;
+            if (!link) {
+                link = document.createElement('link');
+                link.rel = 'icon';
+                document.head.appendChild(link);
+            }
+            link.href = iconUrl;
+        }
+    }, [siteIdentity]);
+};
+
+export default useSiteMetadata;

package/src/components/common/custom-hooks/use-theme-config.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function loadGoogleFont(fontName: any) {
+    const id = `google-font-${fontName}`
+    if (document.getElementById(id)) return
+
+    const link = document.createElement('link')
+    link.id = id
+    link.rel = 'stylesheet'
+    link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/ /g, '+')}&display=swap`
+    document.head.appendChild(link)
+}
+
+const transformThemeData = (data: Record<string, any>) => {
+    if (!data || typeof data !== 'object') return { token: {}, components: {} }
+
+    const { colors, fontFamily, ...rest } = data
+
+    const token: Record<string, string> = {}
+
+    if (colors && typeof colors === 'object') {
+        const root = document.documentElement.style
+        Object.entries(colors).forEach(([key, value]) => {
+            if (typeof value === 'string') {
+                token[`color${key.charAt(0).toUpperCase() + key.slice(1)}`] = value
+                root.setProperty(`--color-${key}`, value)
+            }
+        })
+    }
+
+    if (fontFamily && typeof fontFamily === 'string') {
+        token.fontFamily = fontFamily
+        loadGoogleFont(fontFamily)
+        document.documentElement.style.setProperty('--font-family', fontFamily)
+    }
+
+    const components: Record<string, any> = {}
+    Object.entries(rest).forEach(([key, value]) => {
+        if (value && typeof value === 'object') {
+            const { colors: componentColors, ...otherProps } = value
+            components[key] = {
+                ...otherProps,
+                ...(componentColors && typeof componentColors === 'object' ? componentColors : {}),
+            }
+        }
+    })
+
+    return { token, components }
+}
+export default transformThemeData;
+
+

package/src/components/companies/1-authenticated/index.tsx

@@ -0,0 +1,22 @@
+import { Outlet } from 'react-router-dom'
+import { Col, Row, Spin } from 'antd'
+import { useConfigContext } from '../context'
+import { layoutTemplates } from '../../../types'
+import { DEFAULT_CONFIG } from '../../../constants'
+
+export default function AuthenticatedLayout() {
+  const { config } = useConfigContext()
+  const template = layoutTemplates.find((t: any) => t.name === config?.siteLayout?.template)
+  if (!template) {
+    return (
+      <Row className="h-screen flex justify-center items-center">
+        <Col>
+          <Spin spinning size="default" />
+        </Col>
+      </Row>
+    )
+  }
+  const LayoutComponent = template.value
+
+  return <LayoutComponent children={<Outlet />} config={config || DEFAULT_CONFIG} isPreview={false} />
+}

package/src/components/companies/2-unauthenticated/forgot-password.tsx

@@ -0,0 +1,46 @@
+import { Row, Col, Form, Button, Space, Input } from 'antd'
+import { useNavigate } from 'react-router-dom'
+import { useLoginHandler } from '../../common/custom-hooks/use-login-handler'
+
+const ForgotPassword = () => {
+  const navigate = useNavigate()
+  const { handleForgotPassword } = useLoginHandler()
+  return (
+    <Row gutter={[60, 0]} justify="center" className="w-full">
+      <Col xs={24} md={24} lg={10} xl={12} xxl={10} className="flex self-center">
+        <Space size={15} direction="vertical" className="bg-white shadow py-10 px-8 w-full rounded">
+          <div className="text-36 text-primary text-center">Forgot Password?</div>
+          <div className="text-info text-18 text-center mx-auto" style={{ maxWidth: 300 }}>
+            Please enter your account username to reset your password!
+          </div>
+          <Form
+            name="forgot_password"
+            id="forgot_password"
+            initialValues={{ remember: false }}
+            layout="vertical"
+            onFinish={({ email }) => handleForgotPassword(email)}
+          >
+            <Row gutter={[0, 10]}>
+              <Form.Item
+                label={'Email'}
+                name={'email'}
+                rules={[{ required: true, message: `Please enter your email` }]}
+              >
+                <Input />
+              </Form.Item>
+            </Row>
+          </Form>
+          <Button className="btn-success w-full" htmlType="submit" form="forgot_password">
+            Submit Request
+          </Button>
+          <Button className="btn-primary2 w-full" onClick={() => navigate('/login')}>
+            Back to Login
+          </Button>
+        </Space>
+      </Col>
+      <Col xxl={1}></Col>
+    </Row>
+  )
+}
+
+export default ForgotPassword