Applied new api fetching

This commit is contained in:
Patrick Alvin Alcala 2025-11-05 12:23:12 +08:00
parent b8ec4dc246
commit 40f2ad04f4
3 changed files with 353 additions and 290 deletions

View file

@ -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 dbpassword = await ofetch(API + 'get-password/' + employeeid.result, { parseResponse: JSON.parse })
const employeeid = await getApi('get-employeeid', name())
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) {
_employeeId.set(employeeid.result)
if (dbpassword === hashPassword) {
_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}>
<Row content="split">
<Link to="/">
<Row content="left" gap={2}>
<Logo size={200} />
<h1>OCBO e-Sign</h1>
</Row>
</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>
<Display desktop tablet>
<Padding left={4.75} right={4.75} top={0} bottom={0}>
<Row content="split">
<Link to="/">
<Row content="left" gap={2}>
<Logo size={200} />
<h1>OCBO e-Sign</h1>
</Row>
</Link>
<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>
{/* </section> */}
</Box>
<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">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}>