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-28 15:52:33 +08:00
parent 581275ebfa
commit caeba8e9f7
2 changed files with 79 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -26,11 +26,40 @@
&__title &__title
font-weight: bold font-weight: bold
padding: 0 0 0.25rem 0 font-size: 1.25rem
padding: 0 0 0.5rem 0
&__info &__info
padding: 0 0 0.15rem 0 padding: 0 0 0.15rem 0
&__subinfo
padding: 0 0 0.15rem 4.45rem
font-size: 0.75rem
&__last
@extend .modal-tooltip__subinfo
padding: 0 0 .55rem 4.45rem
&__category
padding: 0.15rem 0.55rem
border-radius: 0.5rem
background-color: #000000
font-size: 0.65rem
width: 3.25rem
text-align: center
&__red
@extend .modal-tooltip__category
background-color: #731313
&__green
@extend .modal-tooltip__category
background-color: #13731b
&__yellow
@extend .modal-tooltip__category
background-color: #6b7313
&__note &__note
font-weight: bold font-weight: bold
font-size: 0.75rem font-size: 0.75rem

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

@ -239,7 +239,7 @@ export default () => {
</Modal> </Modal>
</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">
@ -270,31 +270,66 @@ export default () => {
</section> </section>
</Padding> </Padding>
</Modal> </Modal>
</div> </div>*/}
<div onClick={() => setOpenChanges(false)}> <div onClick={() => setOpenChanges(false)}>
<Modal trigger={openChanges()} background="#252525ff" color="#dfe7fbf0" opacity={0.8} width="52rem"> <Modal trigger={openChanges()} background="#252525ff" color="#dfe7fbf0" opacity={0.8} width="35rem">
<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">Login</span> <span class="modal-tooltip__title">Login</span>
<span class="modal-tooltip__info">Removed version change.</span> <Row content="left" gap={0.5}>
<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__category__red">Removed</span>
<span class="modal-tooltip__info">Removed version selection of encryption.</span>
</Row>
<span class="modal-tooltip__subinfo">* All active users are using version 2.</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">Both Printing and Approval</span>
<span class="modal-tooltip__info">The new default password encryption.</span> <Row content="left" gap={0.5}>
<span class="modal-tooltip__info">Use this mode if you've recently registered or changed your password.</span> <span class="modal-tooltip__category__yellow">Info</span>
<span class="modal-tooltip__info">Loading</span>
</Row>
<span class="modal-tooltip__subinfo">* Clicking too fast lead to .</span>
<span class="modal-tooltip__subinfo__last">* Use this if the original order of payment is lost.</span>
</div> </div>
<div class="modal-tooltip__group"> <div class="modal-tooltip__group">
<span class="modal-tooltip__note">Note:</span> <span class="modal-tooltip__title">Printing</span>
<span class="modal-tooltip__note-info">To ensure security and privacy, avoid sharing your password.</span> <Row content="left" gap={0.5}>
<span class="modal-tooltip__note-info">Your password's encryption is irreversible, which means it cannot be decrypted.</span> <span class="modal-tooltip__category__yellow">Info</span>
<span class="modal-tooltip__note-info">Only encrypted passwords are saved in the database.</span> <span class="modal-tooltip__info">Reprint (No Change)</span>
<span class="modal-tooltip__note-info">Only you know your password. If forgotten, the account will be locked.</span> </Row>
<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__subinfo">* Reprints a duplicate of the order of payment without any changes to its data.</span>
<span class="modal-tooltip__subinfo__last">* Use this if the original order of payment is lost.</span>
<Row content="left" gap={0.5}>
<span class="modal-tooltip__category__green">New</span>
<span class="modal-tooltip__info">Void (Back to Approval)</span>
</Row>
<span class="modal-tooltip__subinfo">* Returns the application back to approval.</span>
<span class="modal-tooltip__subinfo">* Deletes the existing order of payment to make room for the newly generated one.</span>
<span class="modal-tooltip__subinfo">* All applications listed are unpaid and safe to remove.</span>
<span class="modal-tooltip__subinfo">* Use this if duplicate values occur or there is any mistake in its data.</span>
</div>
<div class="modal-tooltip__group">
<span class="modal-tooltip__title">Approval</span>
<Row content="left" gap={0.5}>
<span class="modal-tooltip__category__yellow">Info</span>
<span class="modal-tooltip__info">Data Lock</span>
</Row>
<span class="modal-tooltip__subinfo">* To avoid .</span>
<span class="modal-tooltip__subinfo">* Use this if the original order of payment is lost.</span>
<Row content="left" gap={0.5}>
<span class="modal-tooltip__category__green">New</span>
<span class="modal-tooltip__info">Data Lock</span>
</Row>
<span class="modal-tooltip__subinfo">* To avoid .</span>
<span class="modal-tooltip__subinfo">* Use this if the original order of payment is lost.</span>
</div> </div>
<Row> <Row>