Updated assessor page

src/pages/AssessorPage/Assessor.sass

@@ -1,4 +1,6 @@
+@use '/src/styles/variables.sass' as vars
 @use '/src/styles/classes.sass'
+@use 'sass:color'
 
 .modal
   font-weight: 500
@@ -52,5 +54,29 @@
   font-weight: 700
   padding: 0.5rem 1rem
 
-.profile
+.config
-  cursor: pointer
+  display: flex
+  flex-direction: column
+  gap: 1rem
+
+  &__row
+    display: flex
+    flex-direction: column
+    gap: 0.5rem
+
+  &__edit
+    padding: 1rem 0 0 0
+    display: flex
+    flex-direction: column
+    gap: 0.5rem
+
+    &__title
+      font-weight: bold
+      font-size: 1.15rem
+
+    &__info
+      font-size: 0.75rem
+      opacity: 0.6
+
+  &__button
+    padding: 1rem 0 0 0

src/pages/AssessorPage/Assessor.tsx

@@ -32,9 +32,9 @@ import {
   _type,
   _units,
 } from '../../stores/pdfinfo.ts';
-import { checkConnection, createPdfElectrical, createPdfOccupancy, getApi, getApiMulti, postApi, statusPopsApi, voidPopsApi } from '../../utils/functions/index.ts';
+import { checkConnection, createPdfElectrical, createPdfOccupancy, getApi, getApiMulti, postApi, statusPopsApi, voidPopsApi, saveNewName, saveNewPassword } from '../../utils/functions/index.ts';
 import './Assessor.sass';
-// import { AiOutlineQuestionCircle } from 'solid-icons/ai'
+import { FaSolidUserGear } from 'solid-icons/fa'
 
 const PESO = import.meta.env.VITE_PESO
 
@@ -60,6 +60,16 @@ export default () => {
   const [printed, setPrinted] = createSignal(false)
   const [printedApplication, setPrintedApplication] = createSignal('')
 
+  const [openConfig, setOpenConfig] = createSignal(false)
+  const [configEncPassword, setConfigEncPassword] = createSignal('')
+  const [configNewName, setConfigNewName] = createSignal('')
+  const [configPassword, setConfigPassword] = createSignal('')
+  const [configNewPassword, setConfigNewPassword] = createSignal('')
+  const [configNewEncPassword, setConfigNewEncPassword] = createSignal('')
+  const [configError, setConfigError] = createSignal('')
+
+  const [configNotification, setConfigNotification] = createSignal(false)
+
   const [isBuilding, setIsBuilding] = createSignal(false)
   const [isOccupancy, setIsOccupancy] = createSignal(false)
   const [isElectrical, setIsElectrical] = createSignal(false)
@@ -484,10 +494,10 @@ export default () => {
     navigate('/')
   }
 
-  const gotoProfile = () => {
+  // const gotoProfile = () => {
-    sessionStorage.setItem('name', employeeName())
+  //   sessionStorage.setItem('name', employeeName())
-    navigate('/profile')
+  //   navigate('/profile')
-  }
+  // }
 
   const voidPopsOp = async (application: string) => {
     const response = await voidPopsApi(application)
@@ -500,6 +510,13 @@ export default () => {
     return response
   }
 
+  const saveConfig = async () => {
+    if (configNewName() !== '') await saveNewName(parseInt(employeeId()), configNewName())
+    if (configNewPassword() !== '') await saveNewPassword(parseInt(employeeId()), configNewEncPassword())
+
+    setConfigNotification(true)
+  }
+
   onMount(async () => {
     const logged = await checkLogged()
 
@@ -539,10 +556,16 @@ export default () => {
 
             <Row content="left" gap={1}>
               <Box curved thickness={0} padding="1.25rem 2.25rem" background="#0f131d56">
-                <span class="profile" onClick={gotoProfile}>
+                <span class="profile">
                   {employeeName()}
                 </span>
               </Box>
+              <Clickable onClick={() => setOpenConfig(true)}>
+                <Row gap={0.5}>
+                  <FaSolidUserGear size={25} />
+                  <span>Config</span>
+                </Row>
+              </Clickable>
               <Clickable onClick={logout}>
                 <Row gap={0.5}>
                   <FiLogOut size={25} />
@@ -939,6 +962,51 @@ export default () => {
           </Padding>
         </Modal>
       </div>
+
+      <Modal trigger={openConfig()} background="#16212c" color="#ffffffed" opacity={0.8}>
+        <Padding top={1} bottom={1} left={4} right={4}>
+          <section class='config'>
+            <div class='config__row'>
+              Name:
+              <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' />
+              <span class='config__edit__info'>Leave blank to remain unchanged.</span>
+            </div>
+
+            <div class='config__edit'>
+              <span class='config__edit__title'>Change Password</span>
+              <Input value={configPassword()} onChange={setConfigPassword} placeholder='Enter current password' />
+              <Input 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>{configNewEncPassword()}</span>
+              </Show>
+            </div>
+
+            <Show when={configError() !== ''}>
+              <span class="required-config">{configError()}</span>
+              <Button label='Cancel' edges='curved' design='bo-danger' onClick={() => setOpenConfig(false)} wide />
+            </Show>
+
+            <div class='config__button'>
+              <Show when={configError() === ''}>
+                <Button label='Confirm' edges='curved' design='bo-primary' onClick={saveConfig} wide />
+                <Button label='Cancel' edges='curved' design='bo-danger' onClick={() => setOpenConfig(false)} wide />
+              </Show>
+            </div>
+          </section>
+        </Padding>
+      </Modal >
     </>
   )
 }