Fixed registration

src/pages/RegisterPage/Register.sass

@@ -29,6 +29,11 @@
   width: 100%
   text-align: center
 
+.sub-message
+  padding: 3rem 0 0 0 
+  font-size: 0.75rem
+  font-weight: 500
+
 .filefield
   display: flex
   flex-direction: column

src/pages/RegisterPage/Register.tsx

@@ -6,6 +6,7 @@ import { ofetch } from 'ofetch'
 import { SHA3, SHA1 } from 'crypto-js'
 import dayjs from 'dayjs'
 import { FileField } from '@kobalte/core/file-field'
+import { useNavigate } from '@solidjs/router'
 
 export default () => {
   const API = import.meta.env.VITE_BACKEND
@@ -13,6 +14,8 @@ export default () => {
   const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
   const roles = ['ASSESSOR', 'APPROVER']
 
+  const navigate = useNavigate()
+
   const [role, setRole] = createSignal('')
   const [name, setName] = createSignal('')
   const [password, setPassword] = createSignal('')
@@ -46,6 +49,7 @@ export default () => {
     try {
       register()
       setSaved(true)
+      updateRegistered()
     } catch {
       setSaved(false)
     }
@@ -99,6 +103,27 @@ export default () => {
     }
   }
 
+  const getAssessors = async (): Promise<string[]> => {
+    let assessorsNameList: string[] = []
+
+    try {
+      const assessors = await ofetch(API + 'get-list-assessors', { parseResponse: JSON.parse })
+      assessorsNameList = [...assessors.result]
+      return [...assessorsNameList]
+    } catch {
+      return []
+    }
+  }
+
+  const updateRegistered = async () => {
+    const registered = await getAssessors()
+    sessionStorage.setItem('assessors', JSON.stringify([...registered]))
+  }
+
+  const gotoIndex = () => {
+    navigate('/')
+  }
+
   createEffect(async () => {
     if (role() === 'APPROVER') {
       try {
@@ -210,7 +235,7 @@ export default () => {
 
                   <Show when={allow() === 2}>
                     <h4>Upload Signature</h4>
-                    <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".jpg, .jpeg, .png, .webp, .avif">
+                    <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">
@@ -256,30 +281,38 @@ export default () => {
         </Padding>
       </Page>
 
-      <Modal trigger={saved()} background="#ffffffff" color="#000000e4" opacity={0.6}>
+      <div onClick={gotoIndex}>
-        <Padding top={1} bottom={1} left={4} right={4}>
+        <Modal trigger={saved()} background="#ffffffff" color="#000000e4" opacity={0.6}>
-          <Column>
+          <Padding top={1} bottom={1} left={4} right={4}>
-            <Row>
+            <Column>
-              <h2>e-Sign Registration Completed</h2>
+              <Row>
-            </Row>
+                <Box curved thickness={3} color="black" padding={1}>
-            <Row>
+                  <h2>e-Sign Registration Completed</h2>
-              <h3>Your Digital Signature</h3>
+                </Box>
-            </Row>
+              </Row>
+              <Row>
+                <h3>Representation of your digital signature</h3>
+              </Row>
 
-            <Row gap={1}>
+              <Row gap={1}>
-              <QR value={signature()} width={10} />
+                <QR value={signature()} width={10} />
-              <section class="digital-sign-details">
+                <section class="digital-sign-details">
-                <div>
+                  <div>
-                  <img class="digital-sign-details__image" src={base64image()} alt="Image of signature" />
+                    <img class="digital-sign-details__image" src={base64image()} alt="Image of signature" />
-                </div>
+                  </div>
-                <span>Digitally signed by:</span>
+                  <span>Digitally signed by:</span>
-                <span>{name()}</span>
+                  <span>{name()}</span>
-                <span>Date: {getDate()}</span>
+                  <span>Date: {getDate()}</span>
-              </section>
+                </section>
-            </Row>
+              </Row>
-          </Column>
+
-        </Padding>
+              <Row>
-      </Modal>
+                <span class="sub-message">Click anywhere to close</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
     </>
   )
 }