Updated login

src/pages/LoginPage/Login.sass

@@ -1,6 +1,16 @@
+@use 'sass:color'
+
 .box-title
   font-size: 1.75rem
   font-weight: 700
 
 .approver-name
   font-size: 1.25rem
+
+.required
+  padding: 1rem
+  border-radius: 8px
+  background-color: color.adjust(#0D64E4, $blackness: 20%)
+  opacity: 0.6
+  width: 100%
+  text-align: center

src/pages/LoginPage/Login.tsx

@@ -1,7 +1,7 @@
 import './Login.sass'
-import { Logo, Link, Page, Row, Padding, Form, Box, Radio, Combobox, Input, Button, Modal } from '../../components'
+import { Logo, Link, Page, Row, Padding, Box, Radio, Combobox, Input, Button } from '../../components'
 import { IoChevronBack } from 'solid-icons/io'
-import { createSignal, Show } from 'solid-js'
+import { createSignal, Show, createEffect } from 'solid-js'
 import { ofetch } from 'ofetch'
 import { SHA1, SHA3 } from 'crypto-js'
 import { useNavigate } from '@solidjs/router'
@@ -9,13 +9,12 @@ import { useNavigate } from '@solidjs/router'
 export default () => {
   const API = import.meta.env.VITE_BACKEND
   const APPROVERNAME = import.meta.env.VITE_HEAD
-  const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
+  const assessors = JSON.parse(sessionStorage.getItem('registered')!)
   const roles = ['Assessor', 'Approver']
 
   const [role, setRole] = createSignal('Assessor')
   const [name, setName] = createSignal('')
   const [password, setPassword] = createSignal('')
-  const [matched, setMatched] = createSignal(false)
 
   const navigate = useNavigate()
 
@@ -24,13 +23,8 @@ export default () => {
     const dbpassword = await ofetch(API + 'get-password/' + employeeid.result, { parseResponse: JSON.parse })
     const hashPassword = await securePassword()
 
-    console.log('dbpassword', dbpassword.result)
-    console.log('hashPassword', hashPassword)
-    console.log(dbpassword.result === hashPassword)
-
     if (dbpassword.result === hashPassword) {
-      setMatched(true)
+      navigate('/notification')
-      navigate('/')
     }
   }
 
@@ -42,6 +36,11 @@ export default () => {
     return thirdHashing.toString()
   }
 
+  createEffect(() => {
+    if (role() === 'Approver') setName(APPROVERNAME)
+    else if (role() !== 'Approver' && name() === APPROVERNAME) setName('')
+  })
+
   return (
     <>
       <Page alignment="column">
@@ -65,7 +64,14 @@ export default () => {
           <Row>
             <Box curved thickness={2} padding={2} color="#2f465cd7" background="#04040642">
               <Row>
-                <span class="box-title">Login</span>
+                <span
+                  class="box-title"
+                  onClick={() => {
+                    console.log(name())
+                  }}
+                >
+                  Login
+                </span>
               </Row>
 
               <Padding top={2} left={2} right={2} bottom={0}>
@@ -84,18 +90,28 @@ export default () => {
               <Input value={password()} onChange={setPassword}></Input>
 
               <Padding top={2} left={0} right={0} bottom={0}>
-                <Row>
+                <Show when={password() && name()}>
-                  <Button edges="curved" design="bo-primary" label="Login" wide onClick={login}></Button>
+                  <Row>
-                </Row>
+                    <Button edges="curved" design="bo-primary" label="Login" wide onClick={login}></Button>
+                  </Row>
+                </Show>
+
+                <Show when={!password() && name()}>
+                  <Row>
+                    <span class="required">Required password</span>
+                  </Row>
+                </Show>
+
+                <Show when={!password() && !name()}>
+                  <Row>
+                    <span class="required">Required name and password</span>
+                  </Row>
+                </Show>
               </Padding>
             </Box>
           </Row>
         </Padding>
       </Page>
-
-      <Modal trigger={matched()} background="#ffffffff" color="#000000e4" opacity={0.5}>
-        <h1>1</h1>
-      </Modal>
     </>
   )
 }