Updated login page

src/pages/LoginPage/Login.sass

@@ -14,3 +14,19 @@
   opacity: 0.6
   width: 100%
   text-align: center
+
+.modal-tooltip
+  display: flex
+  flex-direction: column
+
+  &__group
+    display: flex
+    flex-direction: column
+    padding: 0 0 1rem 0
+
+  &__title
+    font-weight: bold
+    padding: 0 0 0.25rem 0
+
+  &__info
+    padding: 0 0 0.15rem 0

src/pages/LoginPage/Login.tsx

@@ -2,13 +2,14 @@ import { useNavigate } from '@solidjs/router'
 import { IoChevronBack } from 'solid-icons/io'
 import { createEffect, createSignal } from 'solid-js'
 import { Show } from 'solid-js/web'
-import { Box, Button, Column, Combobox, Display, Input, Link, Logo, Modal, Padding, Page, Radio, Row, Switch } from '../../components'
+import { Box, Button, Clickable, Column, Combobox, Display, Input, Link, Logo, Modal, Padding, Page, Radio, Row, Switch } from '../../components'
 import { _employeeId, _employeeName } from '../../stores/employee'
 import { checkConnection, getApi, securePassword } from '../../utils/functions'
+import { VsQuestion } from 'solid-icons/vs'
 import './Login.sass'
 
 export default () => {
-  const APPROVERNAME = sessionStorage.getItem('head')
+  const APPROVERNAME = sessionStorage.getItem('head')!
   const navigate = useNavigate()
   const assessors = JSON.parse(sessionStorage.getItem('registered')!)
   const roles = ['Assessor', 'Approver']
@@ -20,6 +21,7 @@ export default () => {
   const [errorMessage, setErrorMessage] = createSignal('')
   const [connected, setConnected] = createSignal(true)
   const [encryptionVersion, setEncryptionVersion] = createSignal('v1')
+  const [openTooltip, setOpenTooltip] = createSignal(false)
 
   const login = async () => {
     setConnected(await checkConnection())
@@ -106,8 +108,11 @@ export default () => {
                   <Row>
                     <span class="box-title">Login</span>
                   </Row>
-                  <Row content='right'>
+                  <Row content='right' gap={0.5}>
                     <Switch label={`Enc ${encryptionVersion()}`} checked={encryptionVersion() === 'v1' ? false : true} onChange={() => encryptionVersion() === 'v1' ? setEncryptionVersion('v2') : setEncryptionVersion('v1')} />
+                    <Clickable onClick={() => setOpenTooltip(true)}>
+                      <VsQuestion size={28} style="cursor: pointer" />
+                    </Clickable>
                   </Row>
 
                   <Padding top={2} left={2} right={2} bottom={0}>
@@ -225,6 +230,40 @@ export default () => {
           </Padding>
         </Modal>
       </div>
+
+      <div onClick={() => setOpenTooltip(false)}>
+        <Modal trigger={openTooltip()} 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'>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'>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__title'>Note:</span>
+                <span class='modal-tooltip__info'>To ensure security and privacy, avoid sharing your password.</span>
+                <span class='modal-tooltip__info'>Your password's encryption is irreversible, which means it cannot be decrypted.</span>
+                <span class='modal-tooltip__info'>Only encrypted passwords are saved in the database.</span>
+                <span class='modal-tooltip__info'>Only you know your password. If forgotten, the account will be locked.</span>
+                <span class='modal-tooltip__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>
+        </Modal>
+      </div>
     </>
   )
 }