move login and add logout

components/navigation.tsx

@@ -6,7 +6,7 @@ import UserContext from '../context/user'
 import { USER_ROLE } from '../lib/session'
 
 const pathNameLabelMap = {
-  '/admin/login': 'Login',
+  '/login': 'Login',
   '/admin': 'Buchungsübersicht',
   '/admin/booking/[uuid]': 'Buchung Bearbeiten',
   '/admin/booking/[uuid]/bill': 'Buchung Rechnungsstellung',

components/user.tsx

@@ -1,17 +1,30 @@
+import { useRouter } from 'next/router'
 import { useContext } from 'react'
 
 import UserContext from '../context/user'
+import fetch from '../helpers/fetch'
 
 export default function User() {
+  const router = useRouter()
   const { username, role } = useContext(UserContext)
 
   if (!username || !role) {
     return <div />
   }
 
+  const onClickLogout = async () => {
+    await fetch('/api/logout', { method: 'POST' })
+    router.reload()
+  }
+
   return (
-    <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
-      {username}
-    </div>
+    <>
+      <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
+        {username}
+      </div>
+      <button onClick={onClickLogout} className="btn btn-blue">
+        Logout
+      </button>
+    </>
   )
 }

lib/session.ts

@@ -35,7 +35,7 @@ export function isAdminSession(req: any) {
 }
 
 export function redirectToLogin(req: any, res: any) {
-  const redirectTargetUrl = `${getBaseURL()}/admin/login?redirect=${encodeURIComponent(
+  const redirectTargetUrl = `${getBaseURL()}/login?redirect=${encodeURIComponent(
     req.url
   )}`
 

pages/api/booking/[uuid]/bill.ts

@@ -1,6 +1,6 @@
-import { Bill } from '../../../../../db/bill'
-import { createBill, patchBill } from '../../../../../db/index'
-import withSession, { isAdminSession } from '../../../../../lib/session'
+import { Bill } from '../../../../db/bill'
+import { createBill, patchBill } from '../../../../db/index'
+import withSession, { isAdminSession } from '../../../../lib/session'
 
 export default withSession(async function billHandler(req, res): Promise<void> {
   if (!isAdminSession(req)) {

pages/api/login.ts

@@ -1,5 +1,5 @@
-import { authenticateAdmin } from '../../../lib/authenticate'
-import withSession from '../../../lib/session'
+import { authenticateAdmin } from '../../lib/authenticate'
+import withSession from '../../lib/session'
 
 async function loginHandler(req: any, res: any): Promise<void> {
   const { method } = req

pages/api/logout.ts

@@ -0,0 +1,16 @@
+import withSession from '../../lib/session'
+
+async function loginHandler(req: any, res: any): Promise<void> {
+  const { method } = req
+
+  switch (method) {
+    case 'POST':
+      req.session.destroy()
+      res.json({ message: 'Logged out' })
+      break
+    default:
+      res.setHeader('Allow', ['POST'])
+      res.status(405).end(`Method ${method} Not Allowed`)
+  }
+}
+export default withSession(loginHandler)

pages/login.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
 import { useRouter } from 'next/router'
-import Footer from '../../components/footer'
-import Header from '../../components/header'
-import Input from '../../components/input'
-import { getBaseURL } from '../../helpers/url'
+import Footer from '../components/footer'
+import Header from '../components/header'
+import Input from '../components/input'
+import { getBaseURL } from '../helpers/url'
 
 export default function Login() {
   const router = useRouter()
@@ -16,7 +16,7 @@ export default function Login() {
     event.preventDefault()
 
     try {
-      await fetch('/api/admin/login', {
+      await fetch('/api/login', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',