Updated register page

src/pages/RegisterPage/Register.tsx

@@ -1,14 +1,49 @@
 import './Register.sass'
-import { Logo, Link, Page, Row, Padding, Form, Combobox, Box, File } from '../../components'
+import { Logo, Link, Page, Row, Padding, Combobox, Box, File, Button, Modal, Column } from '../../components'
 import { IoChevronBack } from 'solid-icons/io'
 import { Show, createSignal } from 'solid-js'
+import { ofetch } from 'ofetch'
+import { SHA3 } from 'crypto-js'
 
 export default () => {
+  const API = import.meta.env.VITE_BACKEND
   const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
   const roles = ['ASSESSOR', 'APPROVER']
 
   const [role, setRole] = createSignal('')
   const [name, setName] = createSignal('')
+  const [id, setId] = createSignal(0)
+  const [signature, setSignature] = createSignal('')
+  const [saved, setSaved] = createSignal(false)
+
+  const getEmployeeId = async (val: string) => {
+    try {
+      setName(val)
+      const id = await ofetch(API + 'get-employeeid/' + val, { parseResponse: JSON.parse })
+      setId(id.result)
+    } catch {
+      setId(0)
+    }
+  }
+
+  const generateSignature = () => {
+    const hash = SHA3(id().toString())
+    setSignature(hash.toString())
+
+    try {
+      register()
+      setSaved(true)
+    } catch {
+      setSaved(false)
+    }
+  }
+
+  const register = async () => {
+    await ofetch(API + 'post-registration', {
+      method: 'POST',
+      body: { data: id(), data2: signature() },
+    })
+  }
 
   return (
     <>
@@ -36,27 +71,49 @@ export default () => {
                 <Row>
                   <span class="box-title">Registration</span>
                 </Row>
-                <Form>
+                <h4>Role</h4>
-                  <h4>Role</h4>
+                <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
-                  <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
+                <Show when={role() === 'ASSESSOR'}>
-                  <Show when={role() === 'ASSESSOR'}>
+                  <h4>List of Assessors</h4>
-                    <h4>List of Assessors</h4>
+                  <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={(val) => getEmployeeId(val!)} />
-                    <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={setName} />
+                  <h4>Upload Signature</h4>
-                    <h4>Upload Signature</h4>
+                  <File />
-                    <File />
+
-                  </Show>
+                  <Padding top={2} bottom={0} left={0} right={0}>
-                  <Show when={role() === 'APPROVER'}>
+                    <Row>
-                    <h4>Name of Approver</h4>
+                      <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} />
-                    <span class="approver-name">ARCH. KHASHAYAR L. TOGHYANI</span>
+                    </Row>
-                    <h4>Upload Signature</h4>
+                  </Padding>
-                    <File />
+                </Show>
-                  </Show>
+                <Show when={role() === 'APPROVER'}>
-                </Form>
+                  <h4>Name of Approver</h4>
+                  <span class="approver-name">ARCH. KHASHAYAR L. TOGHYANI</span>
+                  <h4>Upload Signature</h4>
+                  <File />
+
+                  <Padding top={2} bottom={0} left={0} right={0}>
+                    <Row>
+                      <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} />
+                    </Row>
+                  </Padding>
+                </Show>
               </Box>
             </Row>
           </Padding>
         </Padding>
       </Page>
+
+      <Modal trigger={!saved()} background="#0f1720f3" color="#ffffffe4">
+        <Padding top={1} bottom={1} left={4} right={4}>
+          <Column>
+            <Row>
+              <span>e-Sign Registration Complete</span>
+            </Row>
+
+            <span>e-Sign Registration Complete</span>
+          </Column>
+        </Padding>
+      </Modal>
     </>
   )
 }