Added list of registered names

Fixed login
Added close-text
2025-09-30 09:38:49 +08:00 · 2025-09-30 09:38:30 +08:00 · 2025-09-30 09:38:21 +08:00 · 2025-09-30 09:38:07 +08:00 · 2025-09-30 09:37:48 +08:00 · 2025-09-30 09:15:55 +08:00
7 changed files with 192 additions and 60 deletions
--- a/backend/main.go
+++ b/backend/main.go
@ -158,6 +158,26 @@ func connect() {
 				"result2": array2,
 			})

+		case "get-list-registered":
+			array := []string{}
+
+			results, err := db.Query("SELECT IFNULL(employeeid, 0) AS result FROM esign WHERE employeeid <> ?", 276)
+			if err != nil {
+				c.AbortWithError(http.StatusBadRequest, err)
+				c.String(http.StatusBadRequest, err.Error())
+			}
+			for results.Next() {
+				err = results.Scan(&result)
+				if err != nil {
+					c.AbortWithError(http.StatusBadRequest, err)
+					c.String(http.StatusBadRequest, err.Error())
+				}
+				array = append(array, result)
+			}
+			c.JSON(http.StatusOK, gin.H{
+				"result": array,
+			})
+
 		}
 	})

@ -466,7 +486,7 @@ func connect() {
 				"result": result,
 			})

-      case "get-password":
+		case "get-password":
 			err := db.QueryRow("SELECT IFNULL(password, '') AS result FROM esign WHERE employeeid = ?", data).Scan(&result)
 			if err != nil {
 				if err == sql.ErrNoRows {
@ -480,6 +500,17 @@ func connect() {
 			c.JSON(http.StatusOK, gin.H{
 				"result": result,
 			})
+
+    case "get-employeename":
+			err := db.QueryRow("SELECT IFNULL(employeename, '') AS result FROM employee WHERE employeeid = ?", data).Scan(&result)
+			if err != nil {
+				c.AbortWithError(http.StatusBadRequest, err)
+				c.String(http.StatusBadRequest, err.Error())
+			}
+			c.JSON(http.StatusOK, gin.H{
+				"result": result,
+			})
+
 		}
 	})

--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@ -7,24 +7,27 @@ interface Props {
  color?: string
  border?: string
  opacity?: number
+  trigger: boolean
 }

 export default (props: Props) => {
  return (
    <>
-      <div class="modal">
-        <Show when={props.border}>
-          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}; opacity: ${props.opacity || 1}`}>
-            {props.children}
-          </div>
-        </Show>
+      <Show when={props.trigger}>
+        <div class="modal">
+          <Show when={props.border}>
+            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}; opacity: ${props.opacity || 1}`}>
+              {props.children}
+            </div>
+          </Show>

-        <Show when={!props.border}>
-          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; opacity: ${props.opacity || 1}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
-            {props.children}
-          </div>
-        </Show>
-      </div>
+          <Show when={!props.border}>
+            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; opacity: ${props.opacity || 1}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
+              {props.children}
+            </div>
+          </Show>
+        </div>
+      </Show>
    </>
  )
 }
--- a/src/index.sass
+++ b/src/index.sass
@ -15,6 +15,11 @@
  z-index: -1
  opacity: 1

+.close-text
+  padding: 3rem 0 0 0
+  font-size: 0.75rem
+  font-weight: 500
+
 .inter
  @extend .body
  font-family: fonts.$Inter
--- a/src/pages/IndexPage/Index.tsx
+++ b/src/pages/IndexPage/Index.tsx
@ -1,10 +1,11 @@
 import './Index.sass'
-import { Button, Page, Padding, Display, Row, Logo, Column, Box } from '../../components'
+import { Button, Page, Padding, Display, Row, Logo } from '../../components'
 import { onMount } from 'solid-js'
 import { ofetch } from 'ofetch'

 const API = import.meta.env.VITE_BACKEND
 let assessorsNameList: string[]
+let registeredNameList: string[]

 export default () => {
  const getAssessors = async () => {
@ -17,8 +18,27 @@ export default () => {
    sessionStorage.setItem('assessors', JSON.stringify([...assessorsNameList]))
  }

+  const getRegistered = async () => {
+    let nameList: string[] = []
+
+    try {
+      const registered = await ofetch(API + 'get-list-registered', { parseResponse: JSON.parse })
+
+      for (let i = 0; i < registered.result.length; i++) {
+        const name = await ofetch(API + 'get-employeename/' + registered.result[i], { parseResponse: JSON.parse })
+        nameList.push(name.result)
+      }
+
+      registeredNameList = [...nameList]
+    } catch (error) {
+      console.error(error)
+    }
+    sessionStorage.setItem('registered', JSON.stringify([...registeredNameList]))
+  }
+
  onMount(async () => {
    await getAssessors()
+    await getRegistered()
  })

  return (
@ -38,24 +58,6 @@ export default () => {
              </Row>
            </Row>
          </Display>
-
-          <Display mobile>
-            <Column content="center">
-              <Logo size={120} />
-              <h1>OCBO e-Sign</h1>
-
-              <Button label="Register" edges="curved" to="/main" />
-            </Column>
-          </Display>
-
-          <Row content="spaced">
-            <Box thickness={1} curved>
-              <h2>Assessor</h2>
-            </Box>
-            <Box thickness={1} curved>
-              <h2>Approver</h2>
-            </Box>
-          </Row>
        </Padding>
      </Page>
    </>
--- a/src/pages/LoginPage/Login.tsx
+++ b/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>
    </>
  )
 }
--- a/src/pages/RegisterPage/Register.sass
+++ b/src/pages/RegisterPage/Register.sass
@ -29,6 +29,11 @@
  width: 100%
  text-align: center

+.sub-message
+  padding: 3rem 0 0 0 
+  font-size: 0.75rem
+  font-weight: 500
+
 .filefield
  display: flex
  flex-direction: column
--- a/src/pages/RegisterPage/Register.tsx
+++ b/src/pages/RegisterPage/Register.tsx
@ -6,6 +6,7 @@ import { ofetch } from 'ofetch'
 import { SHA3, SHA1 } from 'crypto-js'
 import dayjs from 'dayjs'
 import { FileField } from '@kobalte/core/file-field'
+import { useNavigate } from '@solidjs/router'

 export default () => {
  const API = import.meta.env.VITE_BACKEND
@ -13,6 +14,8 @@ export default () => {
  const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
  const roles = ['ASSESSOR', 'APPROVER']

+  const navigate = useNavigate()
+
  const [role, setRole] = createSignal('')
  const [name, setName] = createSignal('')
  const [password, setPassword] = createSignal('')
@ -46,6 +49,7 @@ export default () => {
    try {
      register()
      setSaved(true)
+      updateRegistered()
    } catch {
      setSaved(false)
    }
@ -99,6 +103,27 @@ export default () => {
    }
  }

+  const getAssessors = async (): Promise<string[]> => {
+    let assessorsNameList: string[] = []
+
+    try {
+      const assessors = await ofetch(API + 'get-list-assessors', { parseResponse: JSON.parse })
+      assessorsNameList = [...assessors.result]
+      return [...assessorsNameList]
+    } catch {
+      return []
+    }
+  }
+
+  const updateRegistered = async () => {
+    const registered = await getAssessors()
+    sessionStorage.setItem('assessors', JSON.stringify([...registered]))
+  }
+
+  const gotoIndex = () => {
+    navigate('/')
+  }
+
  createEffect(async () => {
    if (role() === 'APPROVER') {
      try {
@ -210,7 +235,7 @@ export default () => {

                  <Show when={allow() === 2}>
                    <h4>Upload Signature</h4>
-                    <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".jpg, .jpeg, .png, .webp, .avif">
+                    <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".png">
                      <FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
                      <FileField.HiddenInput />
                      <FileField.ItemList class="filefield__itemList">
@ -256,30 +281,38 @@ export default () => {
        </Padding>
      </Page>

-      <Modal trigger={saved()} background="#ffffffff" color="#000000e4" opacity={0.6}>
-        <Padding top={1} bottom={1} left={4} right={4}>
-          <Column>
-            <Row>
-              <h2>e-Sign Registration Completed</h2>
-            </Row>
-            <Row>
-              <h3>Your Digital Signature</h3>
-            </Row>
+      <div onClick={gotoIndex}>
+        <Modal trigger={saved()} background="#ffffffff" color="#000000e4" opacity={0.6}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row>
+                <Box curved thickness={3} color="black" padding={1}>
+                  <h2>e-Sign Registration Completed</h2>
+                </Box>
+              </Row>
+              <Row>
+                <h3>Representation of your digital signature</h3>
+              </Row>

-            <Row gap={1}>
-              <QR value={signature()} width={10} />
-              <section class="digital-sign-details">
-                <div>
-                  <img class="digital-sign-details__image" src={base64image()} alt="Image of signature" />
-                </div>
-                <span>Digitally signed by:</span>
-                <span>{name()}</span>
-                <span>Date: {getDate()}</span>
-              </section>
-            </Row>
-          </Column>
-        </Padding>
-      </Modal>
+              <Row gap={1}>
+                <QR value={signature()} width={10} />
+                <section class="digital-sign-details">
+                  <div>
+                    <img class="digital-sign-details__image" src={base64image()} alt="Image of signature" />
+                  </div>
+                  <span>Digitally signed by:</span>
+                  <span>{name()}</span>
+                  <span>Date: {getDate()}</span>
+                </section>
+              </Row>
+
+              <Row>
+                <span class="sub-message">Click anywhere to close</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
    </>
  )
 }
Author	SHA1	Message	Date
Patrick Alvin Alcala	3ed25c9cee	Added list of registered names	2025-09-30 09:38:49 +08:00
Patrick Alvin Alcala	a8d1c1fdf9	Fixed login	2025-09-30 09:38:30 +08:00
Patrick Alvin Alcala	439083a55b	Added close-text	2025-09-30 09:38:21 +08:00
Patrick Alvin Alcala	aa31a79b6d	Fixed modal	2025-09-30 09:38:07 +08:00
Patrick Alvin Alcala	b6f8546114	Updated backend	2025-09-30 09:37:48 +08:00
Patrick Alvin Alcala	69a64879b6	Fixed registration	2025-09-30 09:15:55 +08:00