Updated register page
This commit is contained in:
parent
eaa73c3dee
commit
8f8735ccce
2 changed files with 296 additions and 26 deletions
|
|
@ -1,34 +1,48 @@
|
|||
import './Register.sass'
|
||||
import { Logo, Link, Page, Row, Padding, Combobox, Box, File, Button, Modal, Column } from '../../components'
|
||||
import { Logo, Link, Page, Row, Padding, Combobox, Box, Button, Modal, Column, QR, Input } from '../../components'
|
||||
import { IoChevronBack } from 'solid-icons/io'
|
||||
import { Show, createSignal } from 'solid-js'
|
||||
import { Show, createSignal, createEffect } from 'solid-js'
|
||||
import { ofetch } from 'ofetch'
|
||||
import { SHA3 } from 'crypto-js'
|
||||
import { SHA3, SHA1 } from 'crypto-js'
|
||||
import dayjs from 'dayjs'
|
||||
import { FileField } from '@kobalte/core/file-field'
|
||||
import bcrypt from 'bcryptjs'
|
||||
|
||||
export default () => {
|
||||
const API = import.meta.env.VITE_BACKEND
|
||||
const APPROVERNAME = 'ARCH. KHASHAYAR L. TOGHYANI'
|
||||
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 [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 getEmployeeId = async (val: string) => {
|
||||
try {
|
||||
setName(val)
|
||||
const id = await ofetch(API + 'get-employeeid/' + val, { parseResponse: JSON.parse })
|
||||
setId(id.result)
|
||||
setId(parseInt(id.result))
|
||||
await checkRegistered()
|
||||
} catch {
|
||||
setId(0)
|
||||
}
|
||||
}
|
||||
|
||||
const generateSignature = () => {
|
||||
if (role() === 'APPROVER') {
|
||||
setId(276)
|
||||
setName(APPROVERNAME)
|
||||
}
|
||||
const hash = SHA3(id().toString())
|
||||
setSignature(hash.toString())
|
||||
setSignature(`Scan this using OCBO e-Sign Validator - scanid=${hash.toString()}`)
|
||||
|
||||
try {
|
||||
register()
|
||||
|
|
@ -39,12 +53,68 @@ export default () => {
|
|||
}
|
||||
|
||||
const register = async () => {
|
||||
await securePassword()
|
||||
const blob = new Blob(file())
|
||||
const base64 = await convertBase64(blob)
|
||||
setBase64image(base64 as string)
|
||||
|
||||
await ofetch(API + 'post-registration', {
|
||||
method: 'POST',
|
||||
body: { data: id(), data2: signature() },
|
||||
body: { data: id(), data2: hashPassword(), data3: signature(), data4: base64 },
|
||||
})
|
||||
}
|
||||
|
||||
const getDate = () => {
|
||||
const today = new Date()
|
||||
const formattedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss Z')
|
||||
return formattedDate
|
||||
}
|
||||
|
||||
const securePassword = async () => {
|
||||
const salt = bcrypt.genSaltSync(9)
|
||||
const hash = bcrypt.hashSync(password(), salt)
|
||||
const sha = SHA1(hash)
|
||||
setHashPassword(sha.toString())
|
||||
}
|
||||
|
||||
const convertBase64 = (blob: Blob) => {
|
||||
return new Promise((resolve, _) => {
|
||||
const reader = new FileReader()
|
||||
reader.onloadend = () => resolve(reader.result)
|
||||
reader.readAsDataURL(blob)
|
||||
})
|
||||
}
|
||||
|
||||
const checkRegistered = async () => {
|
||||
const employeeid = id()
|
||||
|
||||
try {
|
||||
const registered = await ofetch(API + 'check-registered/' + employeeid, { parseResponse: JSON.parse })
|
||||
if (registered.result > 0) {
|
||||
setAllow(1)
|
||||
} else {
|
||||
setAllow(2)
|
||||
}
|
||||
} catch {
|
||||
setAllow(2)
|
||||
}
|
||||
}
|
||||
|
||||
createEffect(async () => {
|
||||
if (role() === 'APPROVER') {
|
||||
try {
|
||||
const registered = await ofetch(API + 'check-registered/' + 276, { parseResponse: JSON.parse })
|
||||
if (registered.result > 0) {
|
||||
setAllow(1)
|
||||
} else {
|
||||
setAllow(2)
|
||||
}
|
||||
} catch {
|
||||
setAllow(2)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<Page alignment="column">
|
||||
|
|
@ -73,29 +143,85 @@ export default () => {
|
|||
</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!)} />
|
||||
<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 when={allow() === 2}>
|
||||
<h4>Password</h4>
|
||||
<Input 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}>
|
||||
<Row>
|
||||
<Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} />
|
||||
</Row>
|
||||
</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">ARCH. KHASHAYAR L. TOGHYANI</span>
|
||||
<h4>Upload Signature</h4>
|
||||
<File />
|
||||
<span class="approver-name">{APPROVERNAME}</span>
|
||||
|
||||
<Padding top={2} bottom={0} left={0} right={0}>
|
||||
<Row>
|
||||
<Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} />
|
||||
</Row>
|
||||
</Padding>
|
||||
<Show when={allow() === 2}>
|
||||
<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}>
|
||||
<Row>
|
||||
<Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} />
|
||||
</Row>
|
||||
</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>
|
||||
|
|
@ -103,14 +229,27 @@ export default () => {
|
|||
</Padding>
|
||||
</Page>
|
||||
|
||||
<Modal trigger={!saved()} background="#0f1720f3" color="#ffffffe4">
|
||||
<Modal trigger={saved()} background="#d5e3f2f3" color="#181818e4">
|
||||
<Padding top={1} bottom={1} left={4} right={4}>
|
||||
<Column>
|
||||
<Row>
|
||||
<span>e-Sign Registration Complete</span>
|
||||
<h2>e-Sign Registration Completed</h2>
|
||||
</Row>
|
||||
<Row>
|
||||
<h3>Your Digital Signature</h3>
|
||||
</Row>
|
||||
|
||||
<span>e-Sign Registration Complete</span>
|
||||
<Row gap={1}>
|
||||
<QR value={signature()} width={10} />
|
||||
<section class="digital-sign-details">
|
||||
<div>
|
||||
<img class="digital-sign-details__image" src={base64image()} alt="Image of signature" />
|
||||
</div>
|
||||
<span>Digitally signed by:</span>
|
||||
<span>{name()}</span>
|
||||
<span>Date: {getDate()}</span>
|
||||
</section>
|
||||
</Row>
|
||||
</Column>
|
||||
</Padding>
|
||||
</Modal>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue