Fixed login

src/pages/LoginPage/Login.tsx

@@ -1,5 +1,5 @@
 import './Login.sass'
-import { Logo, Link, Page, Row, Padding, Box, Radio, Combobox, Input, Button } from '../../components'
+import { Logo, Link, Page, Row, Padding, Box, Radio, Combobox, Input, Button, Modal, Column } from '../../components'
 import { IoChevronBack } from 'solid-icons/io'
 import { createSignal, Show, createEffect } from 'solid-js'
 import { ofetch } from 'ofetch'
@@ -9,22 +9,31 @@ import { useNavigate } from '@solidjs/router'
 export default () => {
   const API = import.meta.env.VITE_BACKEND
   const APPROVERNAME = import.meta.env.VITE_HEAD
+  const navigate = useNavigate()
   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 navigate = useNavigate()
+  const [loggedin, setLoggedin] = createSignal(0)
+  const [errorMessage, setErrorMessage] = createSignal('')
 
   const login = async () => {
     const employeeid = await ofetch(API + 'get-employeeid/' + name(), { parseResponse: JSON.parse })
     const dbpassword = await ofetch(API + 'get-password/' + employeeid.result, { parseResponse: JSON.parse })
     const hashPassword = await securePassword()
 
+    if (dbpassword.result === '0') {
+      setErrorMessage('Not yet registered. Please proceed to Registration.')
+    } else {
+      setErrorMessage('Invalid Password, Try again.')
+    }
+
     if (dbpassword.result === hashPassword) {
-      navigate('/notification')
+      setLoggedin(2)
+    } else {
+      setLoggedin(1)
     }
   }
 
@@ -36,6 +45,10 @@ export default () => {
     return thirdHashing.toString()
   }
 
+  const gotoMain = () => {
+    navigate('/main')
+  }
+
   createEffect(() => {
     if (role() === 'Approver') setName(APPROVERNAME)
     else if (role() !== 'Approver' && name() === APPROVERNAME) setName('')
@@ -112,6 +125,46 @@ export default () => {
           </Row>
         </Padding>
       </Page>
+
+      <div onClick={gotoMain}>
+        <Modal trigger={loggedin() === 2} background="#18412aff" color="#ffffffe4" opacity={0.6}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row>
+                <Box curved thickness={3} color="white" padding={1}>
+                  <h2>Login Successful</h2>
+                </Box>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to close</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
+
+      <div onClick={() => setLoggedin(0)}>
+        <Modal trigger={loggedin() === 1} background="#562020ff" color="#ffffffe4" opacity={0.6}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row>
+                <Box curved thickness={3} color="white" padding={1}>
+                  <h2>Login Failed</h2>
+                </Box>
+              </Row>
+
+              <Row>
+                <h3>{errorMessage()}</h3>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to close</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
     </>
   )
 }