Added config option on main page

src/pages/MainPage/Main.sass

@@ -16,8 +16,6 @@ h1
 .name
   font-size: 1.25rem
 
-
-
 .modal
   font-weight: 500
 
@@ -69,3 +67,38 @@ h1
   font-size: 1.75rem
   font-weight: 700
   padding: 0.5rem 1rem
+
+.config
+  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
+
+.required
+  padding: 0.75rem 1rem
+  border-radius: 8px
+  background-color: color.adjust(#0D64E4, $blackness: 20%)
+  opacity: 0.6
+  text-align: center
+  margin: 1rem 0 0 0

src/pages/MainPage/Main.tsx

@@ -5,9 +5,11 @@ import { BiRegularErrorAlt } from 'solid-icons/bi'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
 import { FiLogOut } from 'solid-icons/fi'
 import { VsRefresh } from 'solid-icons/vs'
-import { createSignal, onMount } from 'solid-js'
-import { Box, Button, Clickable, Column, Link, Logo, Modal, ModalButton, Padding, Page, Row } from '../../components/'
-import { checkConnection, getApi, getApiMulti, postApi } from '../../utils/functions'
+import { createSignal, onMount, createEffect } from 'solid-js'
+import { Box, Button, Clickable, Column, Link, Logo, Modal, ModalButton, Padding, Page, Row, Input } from '../../components/'
+import { checkConnection, getApi, getApiMulti, postApi, securePassword } from '../../utils/functions'
+import { FaSolidUserGear } from 'solid-icons/fa'
+import { Show } from 'solid-js/web'
 import './Main.sass'
 
 const PESO = import.meta.env.VITE_PESO
@@ -48,6 +50,13 @@ export default () => {
   const [employeeName, setEmployeeName] = createSignal('')
 
   const [apology, setApology] = createSignal(false)
+  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('')
 
   let bldgadditional = false
 
@@ -76,10 +85,12 @@ export default () => {
   const load = async (division: string) => {
     setConnected(await checkConnection())
     if (connected() === false) {
-      setErrorMessage('Could not gather list of applicaitons')
+      setErrorMessage('Could not gather list of applications')
       return
     }
 
+    await getPassword()
+
     if (division === 'electrical') {
       await getListForApprovalElectrical()
     }
@@ -303,11 +314,38 @@ export default () => {
     return response
   }
 
+  const getPassword = async () => {
+    const response = await getApi('get-password', ID)
+    setConfigEncPassword(response)
+  }
+
+  const checkCurrentPassword = async () => {
+    const encCurrentPassword = await securePassword(configPassword())
+    if (encCurrentPassword === configEncPassword()) {
+      setConfigError('')
+      encryptNewPassword()
+    } else {
+      setConfigError('Invalid Password')
+      setConfigNewEncPassword('')
+    }
+  }
+
+  const encryptNewPassword = async () => {
+    const encNewPassword = await securePassword(configNewPassword())
+    setConfigNewEncPassword(encNewPassword)
+  }
+
+  const saveConfig = () => {}
+
   const logout = async () => {
     removeEmployee()
     navigate('/')
   }
 
+  const gotoProfile = () => {
+    navigate('/profile')
+  }
+
   onMount(async () => {
     const logged = await checkLogged()
 
@@ -316,6 +354,16 @@ export default () => {
     }
   })
 
+  createEffect(() => {
+    if (configPassword !== '') {
+      checkCurrentPassword()
+    }
+
+    if (configNewEncPassword() !== '') {
+      encryptNewPassword()
+    }
+  })
+
   return (
     <>
       <Page alignment="column">
@@ -328,10 +376,16 @@ export default () => {
               </Row>
             </Link>
 
-            <Row content="left" gap={1}>
+            <Row content="left" gap={1.5}>
               <Box curved thickness={0} padding="1.25rem 2.25rem" background="#0f131d56">
-                <span class="name">{employeeName()}</span>
+                <span onClick={gotoProfile} class="name">{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} />
@@ -655,6 +709,50 @@ 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">{configError()}</span>
+            </Show>
+
+            <Show when={configError() === '' && configNewPassword() !== ''}>
+              <div class='config__button'>
+                <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>
+          </section>
+        </Padding>
+      </Modal>
     </>
   )
 }