PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: PatAlcala9:52ebeebe4d57adaf2675b491355a54b9ff6c83d1
Branches Tags
PatAlcala9:main
..
compare: PatAlcala9:f91e94952d873a2e3cdd0cd8c775a0d0f06f1dc7
Branches Tags
PatAlcala9:main

No commits in common. "52ebeebe4d57adaf2675b491355a54b9ff6c83d1" and "f91e94952d873a2e3cdd0cd8c775a0d0f06f1dc7" have entirely different histories.
52ebeebe4d ... f91e94952d

7 changed files with 36 additions and 204 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/components/Radio/Radio.sass
View file

@ -1,62 +0,0 @@
.radio-group
display: flex
flex-direction: column
gap: 8px
&__label
color: hsl(240 6% 10%)
font-size: 14px
font-weight: 500
user-select: none
&__description
color: hsl(240 5% 26%)
font-size: 12px
user-select: none
&__error-message
color: hsl(0 72% 51%)
font-size: 12px
user-select: none
&__items
display: flex
.radio
display: flex
align-items: center
&__control
display: flex
align-items: center
justify-content: center
height: 20px
width: 20px
border-radius: 10px
border: 1px solid hsl(240 5% 84%)
background-color: hsl(240 6% 90%)
// margin: 2rem
&__input:focus-visible + &__control
outline: 2px solid #33475a
outline-offset: 2px
&__control[data-checked]
border-color: #33475a
background-color: #577693
&__control[data-checked][data-invalid]
border-color: #33475a
background-color: hsl(0 72% 51%)
&__indicator
height: 10px
width: 10px
border-radius: 5px
background-color: white
&__label
margin-left: 8px
color: #ffffff
font-size: 1rem
user-select: none

36
src/components/Radio/Radio.tsx
View file

@ -1,36 +0,0 @@
import './Radio.sass'
import { RadioGroup } from '@kobalte/core/radio-group'
import { type Setter, For, Show } from 'solid-js'
interface Props {
label?: string
data: string[]
value: string
onChange: Setter<string>
gap?: number
}
export default (props: Props) => {
return (
<>
<RadioGroup class="radio-group" value={props.value} onChange={props.onChange}>
<Show when={props.label}>
<RadioGroup.Label class="radio-group__label">{props.label}</RadioGroup.Label>
</Show>
<div class="radio-group__items" role="presentation" style={`gap: ${props.gap || 1}rem`}>
<For each={props.data}>
{(item) => (
<RadioGroup.Item value={item} class="radio">
<RadioGroup.ItemInput class="radio__input" />
<RadioGroup.ItemControl class="radio__control">
<RadioGroup.ItemIndicator class="radio__indicator" />
</RadioGroup.ItemControl>
<RadioGroup.ItemLabel class="radio__label">{item}</RadioGroup.ItemLabel>
</RadioGroup.Item>
)}
</For>
</div>
</RadioGroup>
</>
)
}

1
src/components/index.ts
View file

@ -19,7 +19,6 @@ export { default as Combobox } from './Combobox/Combobox'
export { default as File } from './File/File' export { default as File } from './File/File'
export { default as QR } from './QR/QR' export { default as QR } from './QR/QR'
export { default as Input } from './Input/Input' export { default as Input } from './Input/Input'
export { default as Radio } from './Radio/Radio'
// export { default as OptimizeBackground } from './Optimizers/OptimizeBackground' // export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
// export { default as OptimizeImage } from './Optimizers/OptimizeImage' // export { default as OptimizeImage } from './Optimizers/OptimizeImage'
// export { default as OptimizeLogo } from './Optimizers/OptimizeLogo' // export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'

6
src/pages/LoginPage/Login.sass
View file

@ -1,6 +0,0 @@
.box-title
font-size: 1.75rem
font-weight: 700
.approver-name
font-size: 1.25rem

113
src/pages/LoginPage/Login.tsx
View file

@ -1,101 +1,42 @@
import './Login.sass' import './Login.sass'
import { Logo, Link, Page, Row, Padding, Form, Box, Radio, Combobox, Input, Button, Modal } from '../../components' import { Logo, Link, Page, Row, Padding, Form, Box } from '../../components'
import { IoChevronBack } from 'solid-icons/io' import { IoChevronBack } from 'solid-icons/io'
import { createSignal, Show } from 'solid-js'
import { ofetch } from 'ofetch'
import { SHA1, SHA3 } from 'crypto-js'
import { useNavigate } from '@solidjs/router'
export default () => { export default () => {
const API = import.meta.env.VITE_BACKEND
const APPROVERNAME = import.meta.env.VITE_HEAD
const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
const roles = ['Assessor', 'Approver']
const [role, setRole] = createSignal('')
const [name, setName] = createSignal('')
const [password, setPassword] = createSignal('')
const [matched, setMatched] = createSignal(false)
const navigate = useNavigate()
const login = async () => {
const employeeid = await ofetch(API + 'get-employeeid/' + name(), { parseResponse: JSON.parse })
const dbpassword = await ofetch(API + 'get-password/' + employeeid.result, { parseResponse: JSON.parse })
const hashPassword = await securePassword()
console.log('dbpassword', dbpassword.result)
console.log('hashPassword', hashPassword)
console.log(dbpassword.result === hashPassword)
if (dbpassword.result === hashPassword) {
setMatched(true)
navigate('/')
}
}
const securePassword = async () => {
const firstHashing = SHA1(password())
const secondHashing = SHA3(firstHashing)
const thirdHashing = SHA1(secondHashing)
return thirdHashing.toString()
}
return ( return (
<> <>
<Page alignment="column"> <Page alignment="column">
<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} color="#2f465cd7" background="#04040642">
<Row>
<span class="box-title">Login</span>
</Row> </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 value={password()} onChange={setPassword}></Input>
<Padding top={2} left={0} right={0} bottom={0}>
<Row>
<Button edges="curved" design="bo-primary" label="Login" wide onClick={login}></Button>
</Row>
</Padding>
</Box>
</Row> </Row>
<Padding top={2} left={0} right={0} bottom={0}>
<Row>
<Box curved thickness={2} padding={2} color="#2f465cd7">
<Row>
<span class="box-title">Login</span>
</Row>
<Form>
<h4>Role</h4>
</Form>
</Box>
</Row>
</Padding>
</Padding> </Padding>
</Page> </Page>
<Modal trigger={matched()} background="#ffffffff" color="#000000e4" opacity={0.5}>
<h1>1</h1>
</Modal>
</> </>
) )
} }

2
src/pages/RegisterPage/Register.sass
View file

@ -26,8 +26,6 @@
border-radius: 8px border-radius: 8px
background-color: color.adjust(#0D64E4, $blackness: 20%) background-color: color.adjust(#0D64E4, $blackness: 20%)
opacity: 0.6 opacity: 0.6
width: 100%
text-align: center
.filefield .filefield
display: flex display: flex

20
src/pages/RegisterPage/Register.tsx
View file

@ -10,7 +10,7 @@ import bcrypt from 'bcryptjs'
export default () => { export default () => {
const API = import.meta.env.VITE_BACKEND const API = import.meta.env.VITE_BACKEND
const APPROVERNAME = import.meta.env.VITE_HEAD const APPROVERNAME = 'ARCH. KHASHAYAR L. TOGHYANI'
const assessors = JSON.parse(sessionStorage.getItem('assessors')!) const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
const roles = ['ASSESSOR', 'APPROVER'] const roles = ['ASSESSOR', 'APPROVER']
@ -71,12 +71,10 @@ export default () => {
} }
const securePassword = async () => { const securePassword = async () => {
// const salt = bcrypt.genSaltSync(9) const salt = bcrypt.genSaltSync(9)
// const hash = bcrypt.hashSync(password(), salt) const hash = bcrypt.hashSync(password(), salt)
const firstHashing = SHA1(password()) const sha = SHA1(hash)
const secondHashing = SHA3(firstHashing) setHashPassword(sha.toString())
const thirdHashing = SHA1(secondHashing)
setHashPassword(thirdHashing.toString())
} }
const convertBase64 = (blob: Blob) => { const convertBase64 = (blob: Blob) => {
@ -139,7 +137,7 @@ export default () => {
<Padding top={2} left={0} right={0} bottom={0}> <Padding top={2} left={0} right={0} bottom={0}>
<Row> <Row>
<Box curved thickness={2} padding={2} color="#2f465cd7" background="#04040642"> <Box curved thickness={2} padding={2} color="#2f465cd7">
<Row> <Row>
<span class="box-title">Registration</span> <span class="box-title">Registration</span>
</Row> </Row>
@ -173,7 +171,7 @@ export default () => {
<Padding top={2} bottom={0} left={0} right={0}> <Padding top={2} bottom={0} left={0} right={0}>
<Row> <Row>
<Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} wide /> <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} />
</Row> </Row>
</Padding> </Padding>
</Show> </Show>
@ -212,7 +210,7 @@ export default () => {
<Padding top={2} bottom={0} left={0} right={0}> <Padding top={2} bottom={0} left={0} right={0}>
<Row> <Row>
<Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} wide /> <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} />
</Row> </Row>
</Padding> </Padding>
</Show> </Show>
@ -231,7 +229,7 @@ export default () => {
</Padding> </Padding>
</Page> </Page>
<Modal trigger={saved()} background="#ffffffff" color="#000000e4" opacity={0.6}> <Modal trigger={saved()} background="#ffffffff" color="#000000e4" opacity={0.4}>
<Padding top={1} bottom={1} left={4} right={4}> <Padding top={1} bottom={1} left={4} right={4}>
<Column> <Column>
<Row> <Row>