rest

ui/app/api/logout/route.ts

@@ -1,7 +1,6 @@
 import { cookies } from 'next/headers';
-import { NextResponse } from 'next/server';
 
 export async function POST(req: Request) {
   cookies().delete('auth');
-  return NextResponse.redirect(new URL('/login', req.url));
+  return new Response('');
 }

ui/app/login/page.tsx

@@ -1,14 +1,30 @@
 'use client';
 import Image from 'next/image';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 
 import { Button } from '@/lib/Button';
 import { Layout, LayoutMain } from '@/lib/Layout';
 import { TextField } from '@/lib/TextField';
 
-export default function Password() {
+export default function Login() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
   const [pass, setPass] = useState('');
-  const [error, setError] = useState('');
+  const [error, setError] = useState(() =>
+    searchParams.has('reject') ? 'Authentication failed, please login' : ''
+  );
+  const login = () => {
+    fetch('/api/login', {
+      method: 'POST',
+      body: JSON.stringify({ password: pass }),
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.error) setError(res.error);
+        else router.push('/');
+      });
+  };
   return (
     <Layout>
       <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
@@ -32,21 +48,13 @@ export default function Password() {
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
             setPass(e.target.value)
           }
-        />
-        <Button
-          onClick={() => {
-            fetch('/api/login', {
-              method: 'POST',
-              body: JSON.stringify({ password: pass }),
-            })
-              .then((res) => res.json())
-              .then((res) => {
-                setError(res.error);
-              });
+          onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === 'Enter') {
+              login();
+            }
           }}
-        >
-          Login
-        </Button>
+        />
+        <Button onClick={login}>Login</Button>
       </LayoutMain>
     </Layout>
   );

ui/app/page.tsx

@@ -1,15 +1,13 @@
-import Logout from '@/components/Logout';
 import SidebarComponent from '@/components/SidebarComponent';
 import { Header } from '@/lib/Header';
 import { Layout, LayoutMain } from '@/lib/Layout';
 import { cookies } from 'next/headers';
 
 export default function Home() {
   return (
-    <Layout sidebar={<SidebarComponent />}>
+    <Layout sidebar={<SidebarComponent logout={!!cookies().get('auth')} />}>
       <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
         <Header variant='largeTitle'>PeerDB Home Page</Header>
-        {cookies().get('auth') && <Logout />}
       </LayoutMain>
     </Layout>
   );

ui/components/Logout.tsx

@@ -3,7 +3,13 @@ import { Button } from '@/lib/Button';
 
 export default function Logout() {
   return (
-    <Button onClick={() => fetch('/api/logout', { method: 'POST' })}>
+    <Button
+      onClick={() =>
+        fetch('/api/logout', { method: 'POST' }).then((res) =>
+          location.assign('/login')
+        )
+      }
+    >
       Logout
     </Button>
   );

ui/components/SidebarComponent.tsx

@@ -1,15 +1,15 @@
 'use client';
 
 import useTZStore from '@/app/globalstate/time';
+import Logout from '@/components/Logout';
 import { BrandLogo } from '@/lib/BrandLogo';
-import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { RowWithSelect } from '@/lib/Layout';
 import { Sidebar, SidebarItem } from '@/lib/Sidebar';
 import Link from 'next/link';
 
-export default function SidebarComponent() {
+export default function SidebarComponent(props: { logout?: boolean }) {
   const timezones = ['UTC', 'Local', 'Relative'];
   const setZone = useTZStore((state) => state.setZone);
   const zone = useTZStore((state) => state.timezone);
@@ -60,7 +60,7 @@ export default function SidebarComponent() {
               />
             </div>
           </div>
-          <Button className='w-full'>Help and Support</Button>
+          {props.logout && <Logout />}
         </>
       }
       bottomLabel={<Label variant='footnote'>App. v0.7.0</Label>}

ui/middleware.ts

@@ -13,7 +13,7 @@ export default function middleware(req: NextRequest) {
     req.cookies.get('auth')?.value !== process.env.PEERDB_PASSWORD
   ) {
     req.cookies.delete('auth');
-    return NextResponse.redirect(new URL('/login', req.url));
+    return NextResponse.redirect(new URL('/login?reject', req.url));
   }
   return NextResponse.next();
 }