add a proper login page

pages/admin/booking/[uuid]/bill.tsx

@@ -1,5 +1,5 @@
-import { GetServerSideProps } from 'next'
 import React, { useEffect, useState } from 'react'
+import { GetServerSideProps } from 'next'
 import Footer from '../../../../components/footer'
 import Header from '../../../../components/header'
 import Input from '../../../../components/input'
@@ -11,31 +11,26 @@ import { getMilageMax } from '../../../../db/index'
 import { dateFormatFrontend } from '../../../../helpers/date'
 import { getBillTotal } from '../../../../helpers/bill'
 import { getBookingStatus } from '../../../../helpers/booking'
-import authenticate from '../../../../lib/authenticate'
-import withSession from '../../../../lib/session'
+import withSession, { isAdminSession } from '../../../../lib/session'
 import { getServerSideBooking } from '../../../../lib/getServerSideProps'
 
 export const getServerSideProps: GetServerSideProps = withSession(
   async (context) => {
     const { req, res } = context
 
-    const authenticatedUser = authenticate(req, res)
-    if (!authenticatedUser) {
-      // TODO: not sure if needed
-      req?.session.destroy()
+    const adminUser = isAdminSession(req, res)
+
+    if (!adminUser) {
       return { props: {} }
     }
 
-    req.session.set('user', authenticatedUser)
-    await req.session.save()
-
     const milageMax = await getMilageMax()
     const result = await getServerSideBooking(context)
     return {
       ...result,
       // TODO: have a closer look at this type issue. Seems like a bug
       // @ts-ignore
-      props: { ...result.props, milageMax },
+      props: { ...result.props, milageMax, user: adminUser },
     }
   }
 )
@@ -107,7 +102,7 @@ async function saveBill(
   return response.json()
 }
 
-export default function BillPage({
+export default function BookingBillPage({
   booking: bookingProp,
   milageMax,
 }: {

pages/admin/booking/[uuid]/index.tsx

@@ -1,14 +1,35 @@
 import React, { useEffect, useState } from 'react'
+import { GetServerSideProps } from 'next'
 import Footer from '../../../../components/footer'
 import Header from '../../../../components/header'
 import Calendar from '../../../../components/calendar'
+import withSession, { isAdminSession } from '../../../../lib/session'
 import { getServerSideBooking } from '../../../../lib/getServerSideProps'
 import { BookingDocument } from '../../../../db/booking'
 import { getBookingStatus } from '../../../../helpers/booking'
 import { dateFormatFrontend } from '../../../../helpers/date'
 import { BOOKING_STATUS } from '../../../../db/enums'
 
-export const getServerSideProps = getServerSideBooking
+export const getServerSideProps: GetServerSideProps = withSession(
+  async (context) => {
+    const { req, res } = context
+
+    console.error('here')
+    const adminUser = isAdminSession(req, res)
+
+    if (!adminUser) {
+      return { props: {} }
+    }
+
+    const result = await getServerSideBooking(context)
+    return {
+      ...result,
+      // TODO: have a closer look at this type issue. Seems like a bug
+      // @ts-ignore
+      props: { ...result.props, user: adminUser },
+    }
+  }
+)
 
 async function patchBooking(uuid: string, bookingData: any) {
   const response = await fetch(`/api/admin/booking/${uuid}`, {

pages/admin/login.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import { useRouter } from 'next/router'
+import Head from 'next/head'
+import Footer from '../../components/footer'
+import Header from '../../components/header'
+import Input from '../../components/input'
+import { getBaseURL } from '../../helpers/url'
+
+export default function Home() {
+  const router = useRouter()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+
+  const isValid = !!username.length && !!password.length
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    try {
+      await fetch('/api/admin/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          username,
+          password,
+        }),
+      }).then((response) => {
+        if (!response.ok) {
+          console.error('Unable to login', response.status, response.statusText)
+          return
+        }
+        const redirect = Array.isArray(router.query?.redirect)
+          ? router.query.redirect[0]
+          : router.query?.redirect
+
+        router.push(redirect || getBaseURL())
+      })
+    } catch (error) {
+      console.error('Unable to login', error)
+    }
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Pfadi Bussle Admin</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <Header label="Pfadi Bussle Admin Login" />
+      <main className="main w-64">
+        <form className="form" onSubmit={onSubmit}>
+          <Input
+            label="Username"
+            name="username"
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              setUsername(event.target.value)
+            }
+          />
+          <Input
+            label="Password"
+            name="password"
+            type="password"
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              setPassword(event.target.value)
+            }
+          />
+          <button
+            type="submit"
+            className="btn btn-blue ml-0"
+            disabled={!isValid}
+          >
+            Login
+          </button>
+        </form>
+      </main>
+      <Footer />
+    </>
+  )
+}