From 321cb7573434e40c8c06e99acfb2b5b26eae68b3 Mon Sep 17 00:00:00 2001
From: Demur Rumed <junkmute@hotmail.com>
Date: Thu, 23 Nov 2023 17:00:28 +0000
Subject: [PATCH] banner & fix printing login error

---
 ui/app/api/logout/route.ts |  4 +--
 ui/app/login/page.tsx      | 67 +++++++++++++++++++++++---------------
 ui/middleware.ts           | 24 +++++++-------
 3 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/ui/app/api/logout/route.ts b/ui/app/api/logout/route.ts
index 6ecd0f8971..3721a6bff8 100644
--- a/ui/app/api/logout/route.ts
+++ b/ui/app/api/logout/route.ts
@@ -1,7 +1,7 @@
-import {NextResponse} from 'next/server'
 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 NextResponse.redirect(new URL('/login', req.url));
 }
diff --git a/ui/app/login/page.tsx b/ui/app/login/page.tsx
index a2e2464591..e05b782905 100644
--- a/ui/app/login/page.tsx
+++ b/ui/app/login/page.tsx
@@ -1,38 +1,53 @@
 'use client';
-import Image from 'next/image'
+import Image from 'next/image';
 import { useState } from 'react';
 
 import { Button } from '@/lib/Button';
-import { TextField } from '@/lib/TextField';
 import { Layout, LayoutMain } from '@/lib/Layout';
+import { TextField } from '@/lib/TextField';
 
 export default function Password() {
-  const [pass, setPass] = useState("");
-  const [error, setError] = useState("");
+  const [pass, setPass] = useState('');
+  const [error, setError] = useState('');
   return (
-  <Layout>
+    <Layout>
       <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
-      <Image src="public/images/peerdb-combinedMark.svg" alt="PeerDB" width={512} />
-      {error && <div style={{
-        borderRadius:'8px',
-        fontWeight:'bold',
-        color:'#600',
-        backgroundColor:'#c66'
-        }}>{error}</div>}
-      Password: <TextField variant='simple' value={pass} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPass(e.target.value)} />
-      <Button
-        onClick={() => {
-          fetch('/api/login', {
-            method: 'POST',
-            body: JSON.stringify({password: pass}),
-          }).then((res: any) => {
-            setError(res.error);
-          });
-        }}
-      >
-        Login
-      </Button>
-    </LayoutMain>
+        <Image src='/images/peerdb-combinedMark.svg' alt='PeerDB' width={512} />
+        {error && (
+          <div
+            style={{
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              color: '#600',
+              backgroundColor: '#c66',
+            }}
+          >
+            {error}
+          </div>
+        )}
+        <TextField
+          variant='simple'
+          placeholder='Password'
+          value={pass}
+          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);
+              });
+          }}
+        >
+          Login
+        </Button>
+      </LayoutMain>
     </Layout>
   );
 }
diff --git a/ui/middleware.ts b/ui/middleware.ts
index 603addcb2f..53e88f6850 100644
--- a/ui/middleware.ts
+++ b/ui/middleware.ts
@@ -1,17 +1,19 @@
-import type {NextRequest} from 'next/server';
+import type { NextRequest } from 'next/server';
 
-import {NextResponse} from 'next/server'
+import { NextResponse } from 'next/server';
 
 export default function middleware(req: NextRequest) {
-  if (req.nextUrl.pathname !== '/favicon.ico' &&
-      req.nextUrl.pathname !== '/login' &&
-      req.nextUrl.pathname !== '/api/login' &&
-      !req.nextUrl.pathname.startsWith("/public/") &&
-      !req.nextUrl.pathname.startsWith("/_next/static/") &&
-      process.env.PEERDB_PASSWORD &&
-      req.cookies.get('auth')?.value !== process.env.PEERDB_PASSWORD) {
+  if (
+    req.nextUrl.pathname !== '/favicon.ico' &&
+    req.nextUrl.pathname !== '/login' &&
+    req.nextUrl.pathname !== '/api/login' &&
+    !req.nextUrl.pathname.startsWith('/images/') &&
+    !req.nextUrl.pathname.startsWith('/_next/static/') &&
+    process.env.PEERDB_PASSWORD &&
+    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', req.url));
   }
-  return NextResponse.next()
+  return NextResponse.next();
 }