Applied new api fetching

src/pages/LoginPage/Login.tsx

@@ -1,15 +1,13 @@
 import './Login.sass'
-import { Logo, Link, Page, Row, Padding, Box, Radio, Combobox, Input, Button, Modal, Column } from '../../components'
+import { Logo, Link, Page, Row, Padding, Box, Radio, Combobox, Input, Button, Modal, Column, Display } from '../../components'
 import { IoChevronBack } from 'solid-icons/io'
 import { createSignal, Show, createEffect } from 'solid-js'
-import { ofetch } from 'ofetch'
 import { SHA1, SHA3 } from 'crypto-js'
 import { useNavigate } from '@solidjs/router'
-import { checkConnection } from '../../utils/functions'
+import { checkConnection, getApi } from '../../utils/functions'
 import { _employeeId, _employeeName } from '../../stores/employee'
 
 export default () => {
-  const API = import.meta.env.VITE_BACKEND
   const APPROVERNAME = import.meta.env.VITE_HEAD
   const navigate = useNavigate()
   const assessors = JSON.parse(sessionStorage.getItem('registered')!)
@@ -29,18 +27,18 @@ export default () => {
       return
     }
 
-    const employeeid = await ofetch(API + 'get-employeeid/' + name(), { parseResponse: JSON.parse })
+    const employeeid = await getApi('get-employeeid', name())
-    const dbpassword = await ofetch(API + 'get-password/' + employeeid.result, { parseResponse: JSON.parse })
+    const dbpassword = await getApi('get-password', employeeid)
     const hashPassword = await securePassword()
 
-    if (dbpassword.result === '0') {
+    if (dbpassword === '0') {
       setErrorMessage('Not yet registered. Please proceed to Registration.')
     } else {
       setErrorMessage('Invalid Password, Try again.')
     }
 
-    if (dbpassword.result === hashPassword) {
+    if (dbpassword === hashPassword) {
-      _employeeId.set(employeeid.result)
+      _employeeId.set(employeeid)
       _employeeName.set(name())
       saveEmployee()
       setLoggedin(2)
@@ -83,83 +81,83 @@ export default () => {
   return (
     <>
       <Page alignment="column">
-        <Padding left={4.75} right={4.75} top={0} bottom={0}>
+        <Display desktop tablet>
-          <Row content="split">
+          <Padding left={4.75} right={4.75} top={0} bottom={0}>
-            <Link to="/">
+            <Row content="split">
-              <Row content="left" gap={2}>
+              <Link to="/">
-                <Logo size={200} />
+                <Row content="left" gap={2}>
-                <h1>OCBO e-Sign</h1>
+                  <Logo size={200} />
-              </Row>
+                  <h1>OCBO e-Sign</h1>
-            </Link>
-
-            <Link to="/">
-              <Row content="right">
-                <IoChevronBack size={45} />
-                <span class="back-button-text">Back</span>
-              </Row>
-            </Link>
-          </Row>
-
-          <Padding top={2} left={0} right={0} bottom={0}>
-            <Row>
-              <Box curved thickness={2} padding="2.25rem" color="#253849be" background="#04040660">
-                {/* <section class="box"> */}
-                <Row>
-                  <span class="box-title">Login</span>
                 </Row>
+              </Link>
 
-                <Padding top={2} left={2} right={2} bottom={0}>
+              <Link to="/">
-                  <Row>
+                <Row content="right">
-                    <Radio data={roles} value={role()} onChange={setRole} gap={10} />
+                  <IoChevronBack size={45} />
-                  </Row>
+                  <span class="back-button-text">Back</span>
-                </Padding>
+                </Row>
-                <h4>Name</h4>
+              </Link>
-                <Show when={role() !== 'Approver'}>
-                  <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={setName} />
-                </Show>
-                <Show when={role() === 'Approver'}>
-                  <span class="approver-name">{APPROVERNAME}</span>
-                </Show>
-                <h4>Password</h4>
-                <Input
-                  isPassword
-                  value={password()}
-                  onChange={setPassword}
-                  onKeyDown={(event: KeyboardEvent) => {
-                    if (event.key === 'Enter') login()
-                  }}
-                />
-
-                <Padding top={2} left={0} right={0} bottom={0}>
-                  <Show when={password() && name()}>
-                    <Row>
-                      <Button edges="curved" design="bo-primary" label="Login" wide onClick={login}></Button>
-                    </Row>
-                  </Show>
-
-                  <Show when={!password() && name()}>
-                    <Row>
-                      <span class="required">Required password</span>
-                    </Row>
-                  </Show>
-
-                  <Show when={!password() && !name()}>
-                    <Row>
-                      <span class="required">Required name and password</span>
-                    </Row>
-                  </Show>
-
-                  <Show when={password() && !name()}>
-                    <Row>
-                      <span class="required">Required name</span>
-                    </Row>
-                  </Show>
-                </Padding>
-                {/* </section> */}
-              </Box>
             </Row>
+
+            <Padding top={2} left={0} right={0} bottom={0}>
+              <Row>
+                <Box curved thickness={2} padding="2.25rem" color="#253849be" background="#04040660">
+                  <Row>
+                    <span class="box-title">Login</span>
+                  </Row>
+
+                  <Padding top={2} left={2} right={2} bottom={0}>
+                    <Row>
+                      <Radio data={roles} value={role()} onChange={setRole} gap={10} />
+                    </Row>
+                  </Padding>
+                  <h4>Name</h4>
+                  <Show when={role() !== 'Approver'}>
+                    <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={setName} />
+                  </Show>
+                  <Show when={role() === 'Approver'}>
+                    <span class="approver-name">{APPROVERNAME}</span>
+                  </Show>
+                  <h4>Password</h4>
+                  <Input
+                    isPassword
+                    value={password()}
+                    onChange={setPassword}
+                    onKeyDown={(event: KeyboardEvent) => {
+                      if (event.key === 'Enter') login()
+                    }}
+                  />
+
+                  <Padding top={2} left={0} right={0} bottom={0}>
+                    <Show when={password() && name()}>
+                      <Row>
+                        <Button edges="curved" design="bo-primary" label="Login" wide onClick={login}></Button>
+                      </Row>
+                    </Show>
+
+                    <Show when={!password() && name()}>
+                      <Row>
+                        <span class="required">Required password</span>
+                      </Row>
+                    </Show>
+
+                    <Show when={!password() && !name()}>
+                      <Row>
+                        <span class="required">Required name and password</span>
+                      </Row>
+                    </Show>
+
+                    <Show when={password() && !name()}>
+                      <Row>
+                        <span class="required">Required name</span>
+                      </Row>
+                    </Show>
+                  </Padding>
+                </Box>
+              </Row>
+            </Padding>
           </Padding>
-        </Padding>
+        </Display>
       </Page>
 
       <div onClick={navigateToRolePage}>

src/pages/MainPage/Main.tsx

@@ -5,7 +5,7 @@ import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
 import { onMount, createSignal } from 'solid-js'
 import dayjs from 'dayjs'
-import { checkConnection, createPdf } from '../../utils/functions'
+import { checkConnection, getApi, getApiMulti } from '../../utils/functions'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
 import { _employeeName } from '../../stores/employee'
 import { useNavigate } from '@solidjs/router'
@@ -51,22 +51,18 @@ export default () => {
   const [employeeName, setEmployeeName] = createSignal('')
 
   const getListForApproval = async () => {
-    try {
+    const responseE = await getApiMulti('get-listopapproval-electrical')
-      const responseE = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
+    setApplicationListElectrical(responseE.result)
-      setApplicationListElectrical(responseE.result)
+    setNameListElectrical(responseE.result2)
-      setNameListElectrical(responseE.result2)
 
-      const responseO = await ofetch(API + 'get-listopapproval-occupancy', { parseResponse: JSON.parse })
+    const responseO = await getApiMulti('get-listopapproval-occupancy')
-      setApplicationListOccupancy(responseO.result)
+    setApplicationListOccupancy(responseO.result)
-      setNameListOccupancy(responseO.result2)
+    setNameListOccupancy(responseO.result2)
-    } catch (error) {
-      console.error(error)
-    }
   }
 
   const getListForApprovalElectrical = async () => {
     try {
-      const responseE = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
+      const responseE = await getApiMulti('get-listopapproval-electrical')
       setApplicationListElectrical(responseE.result)
       setNameListElectrical(responseE.result2)
     } catch (error) {
@@ -76,7 +72,7 @@ export default () => {
 
   const getListForApprovalOccupancy = async () => {
     try {
-      const responseO = await ofetch(API + 'get-listopapproval-occupancy', { parseResponse: JSON.parse })
+      const responseO = await getApiMulti('get-listopapproval-occupancy')
       setApplicationListOccupancy(responseO.result)
       setNameListOccupancy(responseO.result2)
     } catch (error) {
@@ -103,7 +99,7 @@ export default () => {
 
   const getopdetails = async (division: string, applicationNo: string) => {
     if (division === 'electrical') {
-      const op = await ofetch(API + 'get-opdetails-electrical/' + applicationNo, { parseResponse: JSON.parse })
+      const op = await getApiMulti('get-opdetails-electrical', applicationNo)
       setAssessor(op.result7[0])
       setLocation(op.result5[0])
       setType(op.result6[0])
@@ -111,7 +107,7 @@ export default () => {
       setApplicationId(op.result11[0])
       setTotalOp(calculateTotal(op.result9))
     } else if (division === 'occupancy') {
-      const op = await ofetch(API + 'get-opdetails-occupancy/' + applicationNo, { parseResponse: JSON.parse })
+      const op = await getApiMulti('get-opdetails-occupancy', applicationNo)
       setAssessor(op.result7[0])
       setLocation(op.result5[0])
       setType(op.result6[0])
@@ -126,7 +122,36 @@ export default () => {
     return total
   }
 
-  const approveHandler = async (application: string) => {
+  // const approveHandler = async (application: string) => {
+  //   let signed: boolean = false
+  //   let forprinting: boolean = false
+  //   let updateOrderofpayment: boolean = false
+
+  //   setConnected(await checkConnection())
+  //   if (connected() === false) {
+  //     setErrorMessage('No Connection on Server')
+  //     return
+  //   }
+
+  //   signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
+  //   const approvedid = await getIdByApplication(application)
+  //   updateDocflow(approvedid, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
+  //   if (!signed) return
+
+  //   forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT', 0)
+  //   if (!forprinting) return
+
+  //   updateOrderofpayment = await updateOp()
+
+  //   if (updateOrderofpayment) {
+  //     postTransaction()
+  //     postPops(application)
+  //     setApprovedApplication(application)
+  //     setApproved(true)
+  //   }
+  // }
+
+  const approveHandler = async (division: string, application: string) => {
     let signed: boolean = false
     let forprinting: boolean = false
     let updateOrderofpayment: boolean = false
@@ -137,21 +162,33 @@ export default () => {
       return
     }
 
-    signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
+    if (division === 'electrical') {
-    const approvedid = await getIdByApplication(application)
+      signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
-    updateDocflow(approvedid, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
+      const approvedid = await getIdByApplication(application)
-    if (!signed) return
+      updateDocflow(approvedid, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
+      if (!signed) return
 
-    forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT', 0)
+      forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT', 0)
-    if (!forprinting) return
+      if (!forprinting) return
 
-    updateOrderofpayment = await updateOp()
+      updateOrderofpayment = await updateOp()
 
-    if (updateOrderofpayment) {
+      if (updateOrderofpayment) {
-      postTransaction()
+        postTransaction()
-      postPops(application)
+        postPops(division, application)
-      setApprovedApplication(application)
+        setApprovedApplication(application)
-      setApproved(true)
+        setApproved(true)
+      }
+    } else if (division === 'occupancy') {
+      signed = await setNewStatus('OCCUPANCY ORDER OF PAYMENT APPROVED AND SIGNED', '172', 'OCCOPAPPROVEDSIGNED', 1)
+      const approvedid = await getIdByApplication(application)
+      updateDocflow(approvedid, 'FOR OCCUPANCY RECOMMENDING APPROVAL')
+      if (!signed) return
+
+      forprinting = await setNewStatus('APPROVED FOR PRINTING OF BUREAU OF FIRE AND ORDER OF PAYMENT', '23', 'OCORDEROFPAYMENT', 0)
+      if (!forprinting) return
+
+      updateOrderofpayment = await updateOp()
     }
   }
 
@@ -202,10 +239,15 @@ export default () => {
   //   _assessorid.set(employeeId())
   // }
 
-  const postPops = async (application: string) => {
+  const postPops = async (division: string, application: string) => {
-    const applicationId = await ofetch(API + 'get-idbyapplication-electrical/' + application, { parseResponse: JSON.parse })
+    let response
-    const response = await ofetch(API + 'get-popsdetails-electrical/' + applicationId.result, { parseResponse: JSON.parse })
+
-    // const applicationNo = response.result[0]
+    if (division === 'electrical') {
+      response = await getApiMulti('get-popsdetails-electrical', application)
+    } else if (division === 'occupancy') {
+      response = await getApiMulti('get-popsdetails-occupancy', application)
+    }
+
     const customerid = response.result2[0]
     const customerName = response.result3[0]
     const location = response.result4[0]
@@ -278,9 +320,8 @@ export default () => {
 
   const geteSignId = async () => {
     try {
-      const response = await ofetch(API + 'get-esignid/' + ID, { parseResponse: JSON.parse })
+      const response = await getApi('get-esignid', ID)
-      const result = response.result
+      return response
-      return result
     } catch {
       return 0
     }
@@ -290,6 +331,7 @@ export default () => {
     const id = await geteSignId()
     const today = new Date()
     const formatedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
+
     await ofetch(API + 'post-esigntransaction', {
       method: 'POST',
       body: { data: parseInt(id), data2: approvedApplication(), data3: formatedDate },
@@ -305,9 +347,8 @@ export default () => {
 
   const getIdByApplication = async (applicationNo: string) => {
     try {
-      const response = await ofetch(API + 'get-idbyapplication-electrical/' + applicationNo, { parseResponse: JSON.parse })
+      const response = await getApi('get-idbyapplication-electrical', applicationNo)
-      const result = response.result
+      return parseInt(response)
-      return parseInt(result)
     } catch {
       return 0
     }
@@ -473,7 +514,7 @@ export default () => {
                                 </Padding>
 
                                 <Row padding="2rem 0 0 0">
-                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler(item)}></Button>
+                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler('occupancy', item)}></Button>
                                   <span class="modal__cancel">Click anywhere to cancel</span>
                                 </Row>
                               </Padding>
@@ -560,7 +601,7 @@ export default () => {
                                 </Padding>
 
                                 <Row padding="2rem 0 0 0">
-                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler(item)}></Button>
+                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler('electrical', item)}></Button>
                                   <span class="modal__cancel">Click anywhere to cancel</span>
                                 </Row>
                               </Padding>

src/pages/RegisterPage/Register.tsx

@@ -1,5 +1,5 @@
 import './Register.sass'
-import { Logo, Link, Page, Row, Padding, Combobox, Box, Button, Modal, Column, QR, Input } from '../../components'
+import { Logo, Link, Page, Row, Padding, Combobox, Box, Button, Modal, Column, QR, Input, Display } from '../../components'
 import { IoChevronBack } from 'solid-icons/io'
 import { Show, createSignal, createEffect } from 'solid-js'
 import { ofetch } from 'ofetch'
@@ -7,6 +7,7 @@ import { SHA3, SHA1 } from 'crypto-js'
 import dayjs from 'dayjs'
 import { FileField } from '@kobalte/core/file-field'
 import { useNavigate } from '@solidjs/router'
+import { checkConnection, getApi } from '../../utils/functions'
 
 export default () => {
   const API = import.meta.env.VITE_BACKEND
@@ -19,31 +20,30 @@ export default () => {
   const [role, setRole] = createSignal('')
   const [name, setName] = createSignal('')
   const [password, setPassword] = createSignal('')
-  const [hashPassword, setHashPassword] = createSignal('')
-  const [id, setId] = createSignal<number>(0)
   const [signature, setSignature] = createSignal('')
   const [saved, setSaved] = createSignal(false)
   const [file, setFile] = createSignal<File[]>()
   const [base64image, setBase64image] = createSignal('')
   const [allow, setAllow] = createSignal(0)
+  const [connected, setConnected] = createSignal(true)
+  const [errorMessage, setErrorMessage] = createSignal('')
+
+  let globalId = 0
+  let globalHashPassword = ''
 
   const getEmployeeId = async (val: string) => {
-    try {
+    setName(val)
-      setName(val)
+    const id = await getApi('get-employeeid', val)
-      const id = await ofetch(API + 'get-employeeid/' + val, { parseResponse: JSON.parse })
+    globalId = parseInt(id)
-      setId(parseInt(id.result))
+    await checkRegistered(val)
-      await checkRegistered()
-    } catch {
-      setId(0)
-    }
   }
 
   const generateSignature = () => {
     if (role() === 'APPROVER') {
-      setId(276)
+      globalId = 276
       setName(APPROVERNAME)
     }
-    const hash = SHA3(id().toString())
+    const hash = SHA3(globalId.toString())
     setSignature(`Use OCBO e-Sign Validator - scanid=${hash.toString()}`)
 
     try {
@@ -56,6 +56,12 @@ export default () => {
   }
 
   const register = async () => {
+    setConnected(await checkConnection())
+    if (connected() === false) {
+      setErrorMessage('No Connection on Server')
+      return
+    }
+
     await securePassword()
     const blob = new Blob(file())
     const base64 = await convertBase64(blob)
@@ -63,7 +69,7 @@ export default () => {
 
     await ofetch(API + 'post-registration', {
       method: 'POST',
-      body: { data: id(), data2: hashPassword(), data3: signature(), data4: base64 },
+      body: { data: globalId, data2: globalHashPassword, data3: signature(), data4: base64 },
     })
   }
 
@@ -77,7 +83,7 @@ export default () => {
     const firstHashing = SHA1(password())
     const secondHashing = SHA3(firstHashing)
     const thirdHashing = SHA1(secondHashing)
-    setHashPassword(thirdHashing.toString())
+    globalHashPassword = thirdHashing.toString()
   }
 
   const convertBase64 = (blob: Blob) => {
@@ -88,12 +94,10 @@ export default () => {
     })
   }
 
-  const checkRegistered = async () => {
+  const checkRegistered = async (name: string) => {
-    const employeeid = id()
-
     try {
-      const registered = await ofetch(API + 'check-registered/' + employeeid, { parseResponse: JSON.parse })
+      const registered = await getApi('check-registered', name)
-      if (registered.result > 0) {
+      if (registered > 0) {
         setAllow(1)
       } else {
         setAllow(2)
@@ -106,13 +110,9 @@ export default () => {
   const getAssessors = async (): Promise<string[]> => {
     let assessorsNameList: string[] = []
 
-    try {
+    const assessors = await getApi('get-list-assessors')
-      const assessors = await ofetch(API + 'get-list-assessors', { parseResponse: JSON.parse })
+    assessorsNameList = [...assessors]
-      assessorsNameList = [...assessors.result]
+    return [...assessorsNameList]
-      return [...assessorsNameList]
-    } catch {
-      return []
-    }
   }
 
   const updateRegistered = async () => {
@@ -127,8 +127,8 @@ export default () => {
   createEffect(async () => {
     if (role() === 'APPROVER') {
       try {
-        const registered = await ofetch(API + 'check-registered/' + 276, { parseResponse: JSON.parse })
+        const registered = await getApi('check-registered', APPROVERNAME)
-        if (registered.result > 0) {
+        if (registered > 0) {
           setAllow(1)
         } else {
           setAllow(2)
@@ -142,166 +142,168 @@ export default () => {
   return (
     <>
       <Page alignment="column">
-        <Padding left={4.75} right={4.75} top={0} bottom={0}>
+        <Display desktop tablet>
-          <Row content="split">
+          <Padding left={4.75} right={4.75} top={0} bottom={0}>
-            <Link to="/">
+            <Row content="split">
-              <Row content="left" gap={2}>
+              <Link to="/">
-                <Logo size={200} />
+                <Row content="left" gap={2}>
-                <h1>OCBO e-Sign</h1>
+                  <Logo size={200} />
-              </Row>
+                  <h1>OCBO e-Sign</h1>
-            </Link>
-
-            <Link to="/">
-              <Row content="right">
-                <IoChevronBack size={45} />
-                <span class="back-button-text">Back</span>
-              </Row>
-            </Link>
-          </Row>
-
-          <Padding top={2} left={0} right={0} bottom={0}>
-            <Row>
-              <Box curved thickness={2} padding="2.25rem" color="#253849be" background="#04040660">
-                <Row>
-                  <span class="box-title">Registration</span>
                 </Row>
-                <h4>Role</h4>
+              </Link>
-                <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
 
-                <Show when={role() === 'ASSESSOR'}>
+              <Link to="/">
-                  <h4>List of Assessors</h4>
+                <Row content="right">
-                  <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={(val) => getEmployeeId(val!)} />
+                  <IoChevronBack size={45} />
+                  <span class="back-button-text">Back</span>
+                </Row>
+              </Link>
+            </Row>
+
+            <Padding top={2} left={0} right={0} bottom={0}>
+              <Row>
+                <Box curved thickness={2} padding="2.25rem" color="#253849be" background="#04040660">
+                  <Row>
+                    <span class="box-title">Registration</span>
+                  </Row>
+                  <h4>Role</h4>
+                  <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
+
+                  <Show when={role() === 'ASSESSOR'}>
+                    <h4>List of Assessors</h4>
+                    <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={(val) => getEmployeeId(val!)} />
+
+                    <Show when={allow() === 2}>
+                      <h4>Password</h4>
+                      <Input isPassword value={password()} onChange={setPassword}></Input>
+                      <h4>Upload Signature</h4>
+                      <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".jpg, .jpeg, .png, .webp, .avif">
+                        <FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
+                        <FileField.HiddenInput />
+                        <FileField.ItemList class="filefield__itemList">
+                          {() => (
+                            <FileField.Item class="filefield__item">
+                              <FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
+                              <FileField.ItemName class="filefield__itemName" />
+                              <FileField.ItemSize class="filefield__itemSize" />
+                              <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger" onClick={() => setFile()}>
+                                Delete
+                              </FileField.ItemDeleteTrigger>
+                            </FileField.Item>
+                          )}
+                        </FileField.ItemList>
+                      </FileField>
+
+                      <Padding top={2} bottom={0} left={0} right={0}>
+                        <Show when={file() && password()}>
+                          <Show when={file() && password() && password().length >= 4}>
+                            <Row>
+                              <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} wide />
+                            </Row>
+                          </Show>
+
+                          <Show when={file() && password() && password().length < 4}>
+                            <Row>
+                              <span class="already-registered">Password too short</span>
+                            </Row>
+                          </Show>
+                        </Show>
+
+                        <Show when={!file() && !password()}>
+                          <Row>
+                            <span class="already-registered">Required password and signature</span>
+                          </Row>
+                        </Show>
+
+                        <Show when={file() && !password()}>
+                          <Row>
+                            <span class="already-registered">Required password</span>
+                          </Row>
+                        </Show>
+
+                        <Show when={!file() && password()}>
+                          <Row>
+                            <span class="already-registered">Required signature</span>
+                          </Row>
+                        </Show>
+                      </Padding>
+                    </Show>
+
+                    <Show when={allow() === 1}>
+                      <Padding top={2} bottom={0} left={0} right={0}>
+                        <Row>
+                          <span class="already-registered">Already Registered</span>
+                        </Row>
+                      </Padding>
+                    </Show>
+                  </Show>
+
+                  <Show when={role() === 'APPROVER'}>
+                    <h4>Name of Approver</h4>
+                    <span class="approver-name">{APPROVERNAME}</span>
 
-                  <Show when={allow() === 2}>
                     <h4>Password</h4>
                     <Input isPassword value={password()} onChange={setPassword}></Input>
-                    <h4>Upload Signature</h4>
-                    <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".jpg, .jpeg, .png, .webp, .avif">
-                      <FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
-                      <FileField.HiddenInput />
-                      <FileField.ItemList class="filefield__itemList">
-                        {() => (
-                          <FileField.Item class="filefield__item">
-                            <FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
-                            <FileField.ItemName class="filefield__itemName" />
-                            <FileField.ItemSize class="filefield__itemSize" />
-                            <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger" onClick={() => setFile()}>
-                              Delete
-                            </FileField.ItemDeleteTrigger>
-                          </FileField.Item>
-                        )}
-                      </FileField.ItemList>
-                    </FileField>
 
-                    <Padding top={2} bottom={0} left={0} right={0}>
+                    <Show when={allow() === 2}>
-                      <Show when={file() && password()}>
+                      <h4>Upload Signature</h4>
-                        <Show when={file() && password() && password().length >= 4}>
+                      <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".png">
+                        <FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
+                        <FileField.HiddenInput />
+                        <FileField.ItemList class="filefield__itemList">
+                          {() => (
+                            <FileField.Item class="filefield__item">
+                              <FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
+                              <FileField.ItemName class="filefield__itemName" />
+                              <FileField.ItemSize class="filefield__itemSize" />
+                              <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger" onClick={() => setFile()}>
+                                Delete
+                              </FileField.ItemDeleteTrigger>
+                            </FileField.Item>
+                          )}
+                        </FileField.ItemList>
+                      </FileField>
+
+                      <Padding top={2} bottom={0} left={0} right={0}>
+                        <Show when={file() && password()}>
                           <Row>
                             <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} wide />
                           </Row>
                         </Show>
 
-                        <Show when={file() && password() && password().length < 4}>
+                        <Show when={file() && !password()}>
                           <Row>
-                            <span class="already-registered">Password too short</span>
+                            <span class="already-registered">Required password</span>
                           </Row>
                         </Show>
-                      </Show>
 
-                      <Show when={!file() && !password()}>
+                        <Show when={!file() && password()}>
-                        <Row>
+                          <Row>
-                          <span class="already-registered">Required password and signature</span>
+                            <span class="already-registered">Required signature</span>
-                        </Row>
+                          </Row>
-                      </Show>
+                        </Show>
 
-                      <Show when={file() && !password()}>
+                        <Show when={!file() && !password()}>
-                        <Row>
+                          <Row>
-                          <span class="already-registered">Required password</span>
+                            <span class="already-registered">Required password and signature</span>
-                        </Row>
+                          </Row>
-                      </Show>
+                        </Show>
+                      </Padding>
+                    </Show>
 
-                      <Show when={!file() && password()}>
+                    <Show when={allow() === 1}>
+                      <Padding top={2} bottom={0} left={0} right={0}>
                         <Row>
-                          <span class="already-registered">Required signature</span>
+                          <span class="already-registered">Already Registered</span>
                         </Row>
-                      </Show>
+                      </Padding>
-                    </Padding>
+                    </Show>
                   </Show>
-
+                </Box>
-                  <Show when={allow() === 1}>
+              </Row>
-                    <Padding top={2} bottom={0} left={0} right={0}>
+            </Padding>
-                      <Row>
-                        <span class="already-registered">Already Registered</span>
-                      </Row>
-                    </Padding>
-                  </Show>
-                </Show>
-
-                <Show when={role() === 'APPROVER'}>
-                  <h4>Name of Approver</h4>
-                  <span class="approver-name">{APPROVERNAME}</span>
-
-                  <h4>Password</h4>
-                  <Input isPassword value={password()} onChange={setPassword}></Input>
-
-                  <Show when={allow() === 2}>
-                    <h4>Upload Signature</h4>
-                    <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".png">
-                      <FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
-                      <FileField.HiddenInput />
-                      <FileField.ItemList class="filefield__itemList">
-                        {() => (
-                          <FileField.Item class="filefield__item">
-                            <FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
-                            <FileField.ItemName class="filefield__itemName" />
-                            <FileField.ItemSize class="filefield__itemSize" />
-                            <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger" onClick={() => setFile()}>
-                              Delete
-                            </FileField.ItemDeleteTrigger>
-                          </FileField.Item>
-                        )}
-                      </FileField.ItemList>
-                    </FileField>
-
-                    <Padding top={2} bottom={0} left={0} right={0}>
-                      <Show when={file() && password()}>
-                        <Row>
-                          <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} wide />
-                        </Row>
-                      </Show>
-
-                      <Show when={file() && !password()}>
-                        <Row>
-                          <span class="already-registered">Required password</span>
-                        </Row>
-                      </Show>
-
-                      <Show when={!file() && password()}>
-                        <Row>
-                          <span class="already-registered">Required signature</span>
-                        </Row>
-                      </Show>
-
-                      <Show when={!file() && !password()}>
-                        <Row>
-                          <span class="already-registered">Required password and signature</span>
-                        </Row>
-                      </Show>
-                    </Padding>
-                  </Show>
-
-                  <Show when={allow() === 1}>
-                    <Padding top={2} bottom={0} left={0} right={0}>
-                      <Row>
-                        <span class="already-registered">Already Registered</span>
-                      </Row>
-                    </Padding>
-                  </Show>
-                </Show>
-              </Box>
-            </Row>
           </Padding>
-        </Padding>
+        </Display>
       </Page>
 
       <div onClick={gotoIndex}>
@@ -336,6 +338,28 @@ export default () => {
           </Padding>
         </Modal>
       </div>
+
+      <div onClick={() => setConnected(true)}>
+        <Modal trigger={connected() === false} background="#562020ff" color="#ffebebe6" opacity={0.8}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row>
+                <Box curved thickness={3} color="#ffebebe6" padding="1rem">
+                  <h2>Connection Error</h2>
+                </Box>
+              </Row>
+
+              <Row>
+                <h3>{errorMessage()}</h3>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to close</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
     </>
   )
 }