Added store

src/components/Input/Input.tsx

@@ -6,12 +6,13 @@ interface Props {
   label?: string
   value: string
   onChange: Setter<string>
+  onKeyDown?: (event: KeyboardEvent) => void
 }
 
 export default (props: Props) => {
   return (
     <>
-      <TextField class="text-field" value={props.value} onChange={props.onChange}>
+      <TextField class="text-field" value={props.value} onChange={props.onChange} onKeyDown={props.onKeyDown}>
         <Show when={props.label}>
           <TextField.Label class="text-field__label">{props.label}</TextField.Label>
         </Show>

src/pages/IndexPage/Index.sass

@@ -19,14 +19,37 @@ h1
   align-content: flex-start
   gap: 0.5rem
 
+  @media only screen and (max-width: views.$tablet)
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    justify-content: center
+    align-items: center
+    align-content: flex-start
+    text-align: center
+    gap: 0.5rem
+
   &__main
     font-size: 3.25rem
     margin: 0 1rem 0 0
 
+    @media only screen and (max-width: views.$tablet)
+      padding: 2rem 0 0 0
+      font-size: 2.25rem
+      margin: 0 1rem 0 0
+
   &__sub
     font-weight: 700
     font-size: 2.75rem
 
+    @media only screen and (max-width: views.$tablet)
+      font-weight: 700
+      font-size: 1.75rem
+
   &__paragraph
     padding: 4rem 0 0 0
     font-size: 1.25rem
+
+    @media only screen and (max-width: views.$tablet)
+      padding: 3.25rem 0 0 0
+      font-size: 1rem

src/pages/IndexPage/Index.tsx

@@ -75,25 +75,61 @@ export default () => {
               </Column>
             </Row>
           </Display>
+
+          <Display mobile>
+            <Row>
+              <Logo size={200} />
+              <h1>OCBO e-Sign</h1>
+
+              <section class="title">
+                <h1 class="title__main">Secure e-Signature</h1>
+                <span class="title__sub">for Office of the City Building Official</span>
+                <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
+              </section>
+
+              <Column gap={0.5}>
+                <Button wide label="Login" edges="curved" design="bo-primary" to="/login" />
+                <Button wide label="Register" edges="curved" design="bo-primary" to="/register" />
+              </Column>
+            </Row>
+          </Display>
         </Padding>
 
-        <Footer>
-          <Row content="split">
-            <Row gap={0.5}>
-              <Image avif={ocboAvif} webp={ocboWebp} size={30}></Image>
+        <Display desktop tablet>
+          <Footer>
+            <Row content="split">
+              <Row gap={0.5}>
+                <Image avif={ocboAvif} webp={ocboWebp} size={30}></Image>
+                <Row gap={0.25}>
+                  <Copyright year="2025" name="Office of the City Building Official" />
+                  <span>Davao City, Philippines</span>
+                </Row>
+              </Row>
+
               <Row gap={0.25}>
-                <Copyright year="2025" name="Office of the City Building Official" />
-                <span>Davao City, Philippines</span>
+                <span>Developed by:</span>
+                <Image avif={patAvif} webp={patWebp} size={90}></Image>
+                <span>Pat Alcala</span>
               </Row>
             </Row>
+          </Footer>
+        </Display>
 
-            <Row gap={0.25}>
-              <span>Developed by:</span>
-              <Image avif={patAvif} webp={patWebp} size={90}></Image>
-              <span>Pat Alcala</span>
-            </Row>
-          </Row>
-        </Footer>
+        <Display mobile>
+          <Footer>
+            <Column>
+              <Column gap={0.25}>
+                <Copyright year="2025" name="Office of the City Building Official" />
+                <span>Davao City, Philippines</span>
+
+                <Row gap={0.25}>
+                  <span>Developed by:</span> <Image avif={patAvif} webp={patWebp} size={60}></Image>
+                  <span>Pat Alcala</span>
+                </Row>
+              </Column>
+            </Column>
+          </Footer>
+        </Display>
       </Page>
     </>
   )

src/pages/LoginPage/Login.tsx

@@ -6,6 +6,7 @@ import { ofetch } from 'ofetch'
 import { SHA1, SHA3 } from 'crypto-js'
 import { useNavigate } from '@solidjs/router'
 import { checkConnection } from '../../utils/functions'
+import { _employeeId, _employeeName } from '../../stores/employee'
 
 export default () => {
   const API = import.meta.env.VITE_BACKEND
@@ -39,6 +40,8 @@ export default () => {
     }
 
     if (dbpassword.result === hashPassword) {
+      _employeeId.set(employeeid)
+      _employeeName.set(name())
       setLoggedin(2)
     } else {
       setLoggedin(1)
@@ -84,7 +87,8 @@ export default () => {
 
           <Padding top={2} left={0} right={0} bottom={0}>
             <Row>
-              <Box curved thickness={2} padding="2rem" color="#2f465cd7" background="#04040654">
+              <Box curved thickness={2} padding="2.25rem" color="#2f465cd7" background="#04040660">
+                {/* <section class="box"> */}
                 <Row>
                   <span class="box-title">Login</span>
                 </Row>
@@ -102,7 +106,13 @@ export default () => {
                   <span class="approver-name">{APPROVERNAME}</span>
                 </Show>
                 <h4>Password</h4>
-                <Input value={password()} onChange={setPassword}></Input>
+                <Input
+                  value={password()}
+                  onChange={setPassword}
+                  onKeyDown={(event: KeyboardEvent) => {
+                    if (event.key === 'Enter') login()
+                  }}
+                />
 
                 <Padding top={2} left={0} right={0} bottom={0}>
                   <Show when={password() && name()}>
@@ -129,6 +139,7 @@ export default () => {
                     </Row>
                   </Show>
                 </Padding>
+                {/* </section> */}
               </Box>
             </Row>
           </Padding>

src/stores/employee.ts

@@ -0,0 +1,4 @@
+import { atom } from 'nanostores'
+
+export const _employeeId = atom(0)
+export const _employeeName = atom('')