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

Updated login page

Browse source
This commit is contained in:
Patrick Alvin Alcala 2026-03-27 19:42:42 +08:00
parent cbe517ad42
commit 9ff7f33c71
1 changed files with 63 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,10 +2,10 @@ import { useNavigate } from '@solidjs/router'
import { IoChevronBack } from 'solid-icons/io' import { IoChevronBack } from 'solid-icons/io'
import { createEffect, createSignal } from 'solid-js' import { createEffect, createSignal } from 'solid-js'
import { Show } from 'solid-js/web' import { Show } from 'solid-js/web'
import { Box, Button, Clickable, Column, Combobox, Display, Input, Link, Logo, Modal, Padding, Page, Radio, Row, Switch } from '../../components' import { Box, Button, Column, Combobox, Display, Input, Link, Logo, Modal, Padding, Page, Radio, Row, Clickable } from '../../components'
import { _employeeId, _employeeName } from '../../stores/employee' import { _employeeId, _employeeName } from '../../stores/employee'
import { checkConnection, getApi, securePassword } from '../../utils/functions' import { checkConnection, getApi, securePassword } from '../../utils/functions'
import { VsQuestion } from 'solid-icons/vs' // import { VsQuestion } from 'solid-icons/vs'
import './Login.sass' import './Login.sass'
export default () => { export default () => {
@ -20,8 +20,9 @@ export default () => {
const [loggedin, setLoggedin] = createSignal(0) const [loggedin, setLoggedin] = createSignal(0)
const [errorMessage, setErrorMessage] = createSignal('') const [errorMessage, setErrorMessage] = createSignal('')
const [connected, setConnected] = createSignal(true) const [connected, setConnected] = createSignal(true)
const [encryptionVersion, setEncryptionVersion] = createSignal('v1') // const [encryptionVersion, setEncryptionVersion] = createSignal('v2')
const [openTooltip, setOpenTooltip] = createSignal(false) const [openTooltip, setOpenTooltip] = createSignal(false)
const [openChanges, setOpenChanges] = createSignal(false)
const login = async () => { const login = async () => {
setConnected(await checkConnection()) setConnected(await checkConnection())
@ -32,7 +33,7 @@ export default () => {
const employeeid = await getApi('get-employeeid', name()) const employeeid = await getApi('get-employeeid', name())
const dbpassword = await getApi('get-password', employeeid) const dbpassword = await getApi('get-password', employeeid)
const hashPassword = await securePassword(password(), encryptionVersion()) const hashPassword = await securePassword(password(), 'v2')
if (dbpassword === '0') { if (dbpassword === '0') {
setErrorMessage('Not yet registered. Please proceed to Registration.') setErrorMessage('Not yet registered. Please proceed to Registration.')
@ -108,12 +109,12 @@ export default () => {
<Row> <Row>
<span class="box-title">Login</span> <span class="box-title">Login</span>
</Row> </Row>
<Row content='right' gap={0.5}> {/*<Row content='right' gap={0.5}>
<Switch label={`Enc ${encryptionVersion()}`} checked={encryptionVersion() === 'v1' ? false : true} onChange={() => encryptionVersion() === 'v1' ? setEncryptionVersion('v2') : setEncryptionVersion('v1')} /> <Switch label={`Enc ${encryptionVersion()}`} checked={encryptionVersion() === 'v1' ? false : true} onChange={() => encryptionVersion() === 'v1' ? setEncryptionVersion('v2') : setEncryptionVersion('v1')} />
<Clickable onClick={() => setOpenTooltip(true)}> <Clickable onClick={() => setOpenTooltip(true)}>
<VsQuestion size={28} style="cursor: pointer" /> <VsQuestion size={28} style="cursor: pointer" />
</Clickable> </Clickable>
</Row> </Row>*/}
<Padding top={2} left={2} right={2} bottom={0}> <Padding top={2} left={2} right={2} bottom={0}>
<Row> <Row>
@ -166,6 +167,13 @@ export default () => {
</Row> </Row>
</Padding> </Padding>
</Padding> </Padding>
<Padding top={2} bottom={0} right={0} left={0}>
<Row>
<Clickable onClick={() => setOpenChanges(true)}>
<small>Click here to see changes</small>
</Clickable>
</Row>
</Padding>
</Display> </Display>
</Page> </Page>
@ -232,35 +240,67 @@ export default () => {
</div> </div>
<div onClick={() => setOpenTooltip(false)}> <div onClick={() => setOpenTooltip(false)}>
<Modal trigger={openTooltip()} background="#252525ff" color="#dfe7fbf0" opacity={0.8} width='52rem'> <Modal trigger={openTooltip()} background="#252525ff" color="#dfe7fbf0" opacity={0.8} width="52rem">
<Padding top={1} bottom={1} left={1.5} right={1.5}> <Padding top={1} bottom={1} left={1.5} right={1.5}>
<section class='modal-tooltip'> <section class="modal-tooltip">
<div class='modal-tooltip__group'> <div class="modal-tooltip__group">
<span class='modal-tooltip__title'>Enc v1 (Encryption Version 1)</span> <span class="modal-tooltip__title">Enc v1 (Encryption Version 1)</span>
<span class='modal-tooltip__info'>Use this mode if your password has not been changed.</span> <span class="modal-tooltip__info">Use this mode if your password has not been changed.</span>
<span class='modal-tooltip__info'>It is recommended that you update your password after logging in. Open the 'Config' menu in the upper right.</span> <span class="modal-tooltip__info">It is recommended that you update your password after logging in. Open the 'Config' menu in the upper right.</span>
</div> </div>
<div class='modal-tooltip__group'> <div class="modal-tooltip__group">
<span class='modal-tooltip__title'>Enc v2 (Encryption Version 2)</span> <span class="modal-tooltip__title">Enc v2 (Encryption Version 2)</span>
<span class='modal-tooltip__info'>The new default password encryption.</span> <span class="modal-tooltip__info">The new default password encryption.</span>
<span class='modal-tooltip__info'>Use this mode if you've recently registered or changed your password.</span> <span class="modal-tooltip__info">Use this mode if you've recently registered or changed your password.</span>
</div> </div>
<div class='modal-tooltip__group'> <div class="modal-tooltip__group">
<span class='modal-tooltip__note'>Note:</span> <span class="modal-tooltip__note">Note:</span>
<span class='modal-tooltip__note-info'>To ensure security and privacy, avoid sharing your password.</span> <span class="modal-tooltip__note-info">To ensure security and privacy, avoid sharing your password.</span>
<span class='modal-tooltip__note-info'>Your password's encryption is irreversible, which means it cannot be decrypted.</span> <span class="modal-tooltip__note-info">Your password's encryption is irreversible, which means it cannot be decrypted.</span>
<span class='modal-tooltip__note-info'>Only encrypted passwords are saved in the database.</span> <span class="modal-tooltip__note-info">Only encrypted passwords are saved in the database.</span>
<span class='modal-tooltip__note-info'>Only you know your password. If forgotten, the account will be locked.</span> <span class="modal-tooltip__note-info">Only you know your password. If forgotten, the account will be locked.</span>
<span class='modal-tooltip__note-info'>If this happens, contact the IT department and request that your account be reset. You will be required to register again.</span> <span class="modal-tooltip__note-info">If this happens, contact the IT department and request that your account be reset. You will be required to register again.</span>
</div> </div>
<Row> <Row>
<span class="close-text">Click anywhere to close</span> <span class="close-text">Click anywhere to close</span>
</Row> </Row>
</section> </section>
</Padding>
</Modal>
</div>
<div onClick={() => setOpenChanges(false)}>
<Modal trigger={openChanges()} background="#252525ff" color="#dfe7fbf0" opacity={0.8} width="52rem">
<Padding top={1} bottom={1} left={1.5} right={1.5}>
<section class="modal-tooltip">
<div class="modal-tooltip__group">
<span class="modal-tooltip__title">Login</span>
<span class="modal-tooltip__info">Removed version change.</span>
<span class="modal-tooltip__info">It is recommended that you update your password after logging in. Open the 'Config' menu in the upper right.</span>
</div>
<div class="modal-tooltip__group">
<span class="modal-tooltip__title">Enc v2 (Encryption Version 2)</span>
<span class="modal-tooltip__info">The new default password encryption.</span>
<span class="modal-tooltip__info">Use this mode if you've recently registered or changed your password.</span>
</div>
<div class="modal-tooltip__group">
<span class="modal-tooltip__note">Note:</span>
<span class="modal-tooltip__note-info">To ensure security and privacy, avoid sharing your password.</span>
<span class="modal-tooltip__note-info">Your password's encryption is irreversible, which means it cannot be decrypted.</span>
<span class="modal-tooltip__note-info">Only encrypted passwords are saved in the database.</span>
<span class="modal-tooltip__note-info">Only you know your password. If forgotten, the account will be locked.</span>
<span class="modal-tooltip__note-info">If this happens, contact the IT department and request that your account be reset. You will be required to register again.</span>
</div>
<Row>
<span class="close-text">Click anywhere to close</span>
</Row>
</section>
</Padding> </Padding>
</Modal> </Modal>
</div> </div>