Updated pages

src/pages/MainPage/Main.tsx

@@ -58,6 +58,8 @@ export default () => {
   const [configNewEncPassword, setConfigNewEncPassword] = createSignal('')
   const [configError, setConfigError] = createSignal('')
 
+  const [configNotification, setConfigNotification] = createSignal(false)
+
   let bldgadditional = false
 
   const getListForApproval = async () => {
@@ -322,8 +324,14 @@ export default () => {
   const checkCurrentPassword = async () => {
     const encCurrentPassword = await securePassword(configPassword())
     if (encCurrentPassword === configEncPassword()) {
+      if (configNewPassword() === '') {
+        setConfigError('New Password not provided')
+        setConfigNewEncPassword('')
+      } else {
         setConfigError('')
         encryptNewPassword()
+      }
+
     } else {
       setConfigError('Invalid Password')
       setConfigNewEncPassword('')
@@ -335,7 +343,26 @@ export default () => {
     setConfigNewEncPassword(encNewPassword)
   }
 
-  const saveConfig = () => {}
+  const saveConfig = async () => {
+    if (configNewName() !== '') await saveNewName(configNewName())
+    if (configNewPassword() !== '') await saveNewPassword(configNewEncPassword())
+
+    setConfigNotification(true)
+  }
+
+  const saveNewName = async (name: string) => {
+    await postApi('update-name', {
+      data: parseInt(ID),
+      data2: name
+    })
+  }
+
+  const saveNewPassword = async (password: string) => {
+    await postApi('update-password', {
+      data: parseInt(ID),
+      data2: password
+    })
+  }
 
   const logout = async () => {
     removeEmployee()
@@ -359,7 +386,9 @@ export default () => {
       checkCurrentPassword()
     }
 
-    if (configNewEncPassword() !== '') {
+    if (configNewPassword() !== '') {
+      encryptNewPassword()
+    } else {
       encryptNewPassword()
     }
   })
@@ -742,17 +771,40 @@ export default () => {
 
             <Show when={configError() !== ''}>
               <span class="required">{configError()}</span>
+              <Button label='Cancel' edges='curved' design='bo-danger' onClick={() => setOpenConfig(false)} wide />
             </Show>
 
-            <Show when={configError() === '' && configNewPassword() !== ''}>
             <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 />
-              </div>
               </Show>
+            </div>
           </section>
         </Padding>
-      </Modal>
+      </Modal >
+
+      <div onClick={setConfigNotification(false)}>
+        <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>
     </>
   )
 }

src/pages/ProfilePage/Profile.sass

@@ -1,5 +1,5 @@
-.name
+.profile-name
-  padding: 1rem 2rem
+  padding: 1rem 2.25rem
   border-radius: 8px
   font-size: 1.75rem
   font-weight: 800

src/pages/ProfilePage/Profile.tsx

@@ -1,10 +1,9 @@
 import './Profile.sass'
-import { Logo, Link, Page, Row, Padding, Combobox, Box, Button, Modal, Column, QR, Input, Display } from '../../components'
+import { Logo, Link, Page, Row, Padding, Column, Box } from '../../components'
 import { IoChevronBack } from 'solid-icons/io'
 import { _employeeName, _employeeId } from '../../stores/employee'
 
-export default () => {
+export default () => (
-  return (
   <>
     <Page>
       <Padding left={4.75} right={4.75} top={0} bottom={0}>
@@ -24,14 +23,21 @@ export default () => {
           </Link>
         </Row>
         <Column>
-            <h1 class="name">{sessionStorage.getItem('name')}</h1>
+          <h1 class="profile-name">{sessionStorage.getItem('name')}</h1>
 
-            <Row content="left">
+          <Padding top={2} left={0} right={0} bottom={0}>
-              <span>Role:</span>
+            <Row content='left'>
+              <Box curved thickness={2} padding="2.25rem" color="#253849be" background="#04040660" width='500px'>
+                <Column> Username:
+               <span>Username:</span>
+               </Column>
+              
+
+              </Box>
             </Row>
+          </Padding>
         </Column>
       </Padding>
     </Page>
   </>
-  )
+)
-}