Updated main page

src/pages/MainPage/Main.tsx

@@ -1,7 +1,6 @@
 import { Tabs } from '@kobalte/core/tabs'
 import { useNavigate } from '@solidjs/router'
 import dayjs from 'dayjs'
-import { BiRegularErrorAlt } from 'solid-icons/bi'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
 import { FiLogOut } from 'solid-icons/fi'
 import { VsRefresh } from 'solid-icons/vs'
@@ -13,7 +12,7 @@ import { Show } from 'solid-js/web'
 import './Main.sass'
 
 const PESO = import.meta.env.VITE_PESO
-const ID = sessionStorage.get('headid')
+const ID = sessionStorage.getItem('id')!
 const PUBLICIP = import.meta.env.VITE_PUBLICIP
 
 export default () => {
@@ -25,6 +24,7 @@ export default () => {
   const [location, setLocation] = createSignal('')
   const [type, setType] = createSignal('')
   const [applicationId, setApplicationId] = createSignal(0)
+
   // const [assessorId, setAssessorId] = createSignal(0)
 
   // const [gflgu, setGflgu] = createSignal<number[]>([])
@@ -48,7 +48,7 @@ export default () => {
   const [employeeId, setEmployeeId] = createSignal(0)
   const [employeeName, setEmployeeName] = createSignal('')
 
-  const [apology, setApology] = createSignal(false)
+  // const [apology, setApology] = createSignal(false)
   const [openConfig, setOpenConfig] = createSignal(false)
   const [configEncPassword, setConfigEncPassword] = createSignal('')
   const [configNewName, setConfigNewName] = createSignal('')
@@ -279,6 +279,11 @@ export default () => {
     return true
   }
 
+  const deleteHeadName = async () => {
+    sessionStorage.removeItem('head')
+    sessionStorage.removeItem('headid')
+  }
+
   const geteSignId = async () => {
     try {
       const response = await getApi('get-esignid', ID)
@@ -321,8 +326,10 @@ export default () => {
   }
 
   const checkCurrentPassword = async () => {
-    const encCurrentPassword = await securePassword(configPassword(), 'v2')
+    const encCurrentPasswordV1 = await securePassword(configPassword(), 'v1')
-    if (encCurrentPassword === configEncPassword()) {
+    const encCurrentPasswordV2 = await securePassword(configPassword(), 'v2')
+
+    if (encCurrentPasswordV1 === configEncPassword() || encCurrentPasswordV2 === configEncPassword()) {
       if (configNewPassword() === '') {
         setConfigError('New Password not provided')
         setConfigNewEncPassword('')
@@ -372,7 +379,20 @@ export default () => {
   //   navigate('/profile')
   // }
 
+  const closeConfig = () => {
+    setConfigNotification(false)
+    setOpenConfig(false)
+
+    setConfigEncPassword('')
+    setConfigNewName('')
+    setConfigPassword('')
+    setConfigNewPassword('')
+    setConfigNewEncPassword('')
+    setConfigError('')
+  }
+
   onMount(async () => {
+    await deleteHeadName()
     const logged = await checkLogged()
 
     if (logged) {
@@ -381,7 +401,9 @@ export default () => {
   })
 
   createEffect(() => {
-    if (configPassword !== '') {
+    if (configPassword() !== '') {
+      checkCurrentPassword()
+    } else {
       checkCurrentPassword()
     }
 
@@ -404,19 +426,19 @@ export default () => {
               </Row>
             </Link>
 
-            <Row content="left" gap={1.5}>
+            <Row content="left" gap={1.75}>
               <Box curved thickness={0} padding="1.25rem 2.25rem" background="#0f131d56">
                 <span class="name">{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>
@@ -496,8 +518,6 @@ export default () => {
                               background="#121e2acc"
                               color="#ffffffec"
                               function={async () => {
-                                // setApology(true)
-                                // setErrorMessage('Modification of Occupancy Printing has not yet finished')
                                 await getopdetails('occupancy', item)
                               }}
                             >
@@ -709,7 +729,7 @@ export default () => {
         </Modal>
       </div>
 
-      <div onClick={() => setApology(false)}>
+      {/* <div onClick={() => setApology(false)}>
         <Modal trigger={apology()} background="#562020ff" color="#ffebebe6" opacity={0.8}>
           <Padding top={1} bottom={1} left={4} right={4}>
             <Column>
@@ -736,9 +756,9 @@ export default () => {
             </Column>
           </Padding>
         </Modal>
-      </div>
+      </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'>
@@ -746,10 +766,7 @@ 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>
@@ -759,11 +776,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>
@@ -783,7 +803,7 @@ export default () => {
         </Padding>
       </Modal >
 
-      <div onClick={setConfigNotification(false)}>
+      <div onClick={closeConfig}>
         <Modal trigger={configNotification() === true} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
           <Padding top={1} bottom={1} left={4} right={4}>
             <Column>