Updated assessor page

src/pages/AssessorPage/Assessor.tsx

@@ -32,7 +32,7 @@ import {
   _type,
   _units,
 } from '../../stores/pdfinfo.ts';
-import { checkConnection, createPdfElectrical, createPdfOccupancy, getApi, getApiMulti, postApi, statusPopsApi, voidPopsApi, saveNewName, saveNewPassword } from '../../utils/functions/index.ts';
+import { checkConnection, createPdfElectrical, createPdfOccupancy, getApi, getApiMulti, postApi, statusPopsApi, voidPopsApi, saveNewName, saveNewPassword, securePassword } from '../../utils/functions/index.ts';
 import './Assessor.sass';
 import { FaSolidUserGear } from 'solid-icons/fa'
 
@@ -517,8 +517,50 @@ export default () => {
     setConfigNotification(true)
   }
 
+  const checkCurrentPassword = async () => {
+    const encCurrentPasswordV1 = await securePassword(configPassword(), 'v1')
+    const encCurrentPasswordV2 = await securePassword(configPassword(), 'v2')
+
+    if (encCurrentPasswordV1 === configEncPassword() || encCurrentPasswordV2 === configEncPassword()) {
+      if (configNewPassword() === '') {
+        setConfigError('New Password not provided')
+        setConfigNewEncPassword('')
+      } else {
+        setConfigError('')
+        encryptNewPassword()
+      }
+
+    } else {
+      setConfigError('Invalid Password')
+      setConfigNewEncPassword('')
+    }
+  }
+
+  const encryptNewPassword = async () => {
+    const encNewPassword = await securePassword(configNewPassword(), 'v2')
+    setConfigNewEncPassword(encNewPassword)
+  }
+
+  const getPassword = async () => {
+    const response = await getApi('get-password', employeeId())
+    setConfigEncPassword(response)
+  }
+
+  const closeConfig = () => {
+    setConfigNotification(false)
+    setOpenConfig(false)
+
+    setConfigEncPassword('')
+    setConfigNewName('')
+    setConfigPassword('')
+    setConfigNewPassword('')
+    setConfigNewEncPassword('')
+    setConfigError('')
+  }
+
   onMount(async () => {
     const logged = await checkLogged()
+    await getPassword()
 
     if (logged) {
       setSelectedType('Print')
@@ -542,6 +584,17 @@ export default () => {
     }
   })
 
+  createEffect(() => {
+    if (configPassword() !== '') {
+      checkCurrentPassword();
+    } else checkCurrentPassword();
+
+    if (configNewPassword() !== '') {
+      encryptNewPassword()
+    } else encryptNewPassword()
+
+  })
+
   return (
     <>
       <Page alignment="column">
@@ -554,21 +607,21 @@ export default () => {
               </Row>
             </Link>
 
-            <Row content="left" gap={1}>
+            <Row content="left" gap={1.75}>
               <Box curved thickness={0} padding="1.25rem 2.25rem" background="#0f131d56">
                 <span class="profile">
                   {employeeName()}
                 </span>
               </Box>
               <Clickable onClick={() => setOpenConfig(true)}>
-                <Row gap={0.5}>
+                <Row gap={0.25}>
-                  <FaSolidUserGear size={25} />
+                  <FaSolidUserGear size={20} />
                   <span>Config</span>
                 </Row>
               </Clickable>
               <Clickable onClick={logout}>
-                <Row gap={0.5}>
+                <Row gap={0.25}>
-                  <FiLogOut size={25} />
+                  <FiLogOut size={20} />
                   <span>Logout</span>
                 </Row>
               </Clickable>
@@ -963,7 +1016,8 @@ export default () => {
         </Modal>
       </div>
 
-      <Modal trigger={openConfig()} background="#16212c" color="#ffffffed" opacity={0.8}>
+
+      <Modal trigger={openConfig()} background="#16212c" color="#ffffffed" opacity={0.8} width='30rem'>
         <Padding top={1} bottom={1} left={4} right={4}>
           <section class='config'>
             <div class='config__row'>
@@ -971,11 +1025,6 @@ export default () => {
               <span>{employeeName()}</span>
             </div>
 
-            <div class='config__row'>
-              Encrypted Password:
-              <span>{configEncPassword()}</span>
-            </div>
-
             <div class='config__edit'>
               <span class='config__edit__title'>Change Displayed Name</span>
               <Input value={configNewName()} onChange={setConfigNewName} placeholder='Enter new name' />
@@ -984,11 +1033,14 @@ export default () => {
 
             <div class='config__edit'>
               <span class='config__edit__title'>Change Password</span>
-              <Input value={configPassword()} onChange={setConfigPassword} placeholder='Enter current password' />
+              <Input isPassword value={configPassword()} onChange={setConfigPassword} placeholder='Enter current password' />
-              <Input value={configNewPassword()} onChange={setConfigNewPassword} placeholder='Enter new password' />
+              <Input isPassword value={configNewPassword()} onChange={setConfigNewPassword} placeholder='Enter new password' />
 
               <Show when={configNewPassword().length !== 0}>
-                <span style="padding: 1rem 0 0 0">New Encrypted Password:</span>
+                <span style="padding: 1.75rem 0 0 0">Current Encrypted Password:</span>
+                <span>{configEncPassword()}</span>
+
+                <span style="padding: 0.75rem 0 0 0">New Encrypted Password:</span>
                 <span>{configNewEncPassword()}</span>
               </Show>
             </div>
@@ -1007,6 +1059,28 @@ export default () => {
           </section>
         </Padding>
       </Modal >
+
+      {/* <div onClick={closeConfig}>
+        <Modal trigger={configNotification() === true} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row gap={4}>
+                <FaSolidThumbsUp size={75} />
+                <Box curved thickness={3} color="#cdfbe1f0" padding="1rem">
+                  <span class="approval">Approved</span>
+                </Box>
+              </Row>
+              <Row padding="2rem 0 0 0">
+                <h2>{approvedApplication()}</h2>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to proceed</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal >
+      </div> */}
     </>
   )
 }