Login improvements (#717)

Polishes UI of login screen and makes logout button appear everywhere
(not just home page)

ui/app/api/login/route.ts

@@ -3,7 +3,12 @@ import { cookies } from 'next/headers';
 export async function POST(request: Request) {
   const { password } = await request.json();
   if (process.env.PEERDB_PASSWORD !== password) {
-    return new Response(JSON.stringify({ error: 'wrong password' }));
+    return new Response(
+      JSON.stringify({
+        error:
+          'Your password is incorrect. Please check your password and try again.',
+      })
+    );
   }
   cookies().set('auth', password, {
     expires: Date.now() + 24 * 60 * 60 * 1000,

ui/app/login/page.tsx

@@ -4,13 +4,15 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 
 import { Button } from '@/lib/Button';
-import { Layout, LayoutMain } from '@/lib/Layout';
+import { Icon } from '@/lib/Icon';
+import { Layout } from '@/lib/Layout';
 import { TextField } from '@/lib/TextField';
 
 export default function Login() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [pass, setPass] = useState('');
+  const [show, setShow] = useState(false);
   const [error, setError] = useState(() =>
     searchParams.has('reject') ? 'Authentication failed, please login' : ''
   );
@@ -21,41 +23,86 @@ export default function Login() {
     })
       .then((res) => res.json())
       .then((res) => {
-        if (res.error) setError(res.error);
-        else router.push('/');
+        if (res.error) {
+          setError(res.error);
+        } else router.push('/');
       });
   };
   return (
     <Layout>
-      <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
-        <Image src='/images/peerdb-combinedMark.svg' alt='PeerDB' width={512} />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 'full',
+        }}
+      >
+        <Image
+          style={{ marginBottom: '4rem' }}
+          src='/images/peerdb-combinedMark.svg'
+          alt='PeerDB'
+          width={400}
+          height={300}
+        />
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            width: '20%',
+            height: '4%',
+          }}
+        >
+          <TextField
+            variant='simple'
+            placeholder='Password'
+            type={show ? 'text' : 'password'}
+            style={{
+              width: '100%',
+              height: '100%',
+              borderRadius: '0.5rem',
+              marginRight: '1rem',
+            }}
+            value={pass}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setPass(e.target.value)
+            }
+            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+              if (e.key === 'Enter') {
+                login();
+              }
+            }}
+          />
+          <Button onClick={() => setShow((curr) => !curr)}>
+            <Icon name={show ? 'visibility_off' : 'visibility'} />
+          </Button>
+        </div>
+        <Button
+          style={{
+            marginTop: '2rem',
+            width: '6em',
+            height: '2em',
+            boxShadow: '0px 4px 4px rgba(0,0,0,0.15)',
+          }}
+          variant='normalSolid'
+          onClick={login}
+        >
+          Log in
+        </Button>
         {error && (
           <div
             style={{
-              borderRadius: '8px',
-              fontWeight: 'bold',
-              color: '#600',
-              backgroundColor: '#c66',
+              borderRadius: '0.2rem',
+              padding: '0.5rem',
+              color: '#d46363',
+              marginTop: '1rem',
             }}
           >
             {error}
           </div>
         )}
-        <TextField
-          variant='simple'
-          placeholder='Password'
-          value={pass}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setPass(e.target.value)
-          }
-          onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => {
-            if (e.key === 'Enter') {
-              login();
-            }
-          }}
-        />
-        <Button onClick={login}>Login</Button>
-      </LayoutMain>
+      </div>
     </Layout>
   );
 }

ui/app/mirrors/layout.tsx

@@ -1,7 +1,12 @@
 import SidebarComponent from '@/components/SidebarComponent';
 import { Layout } from '@/lib/Layout';
+import { cookies } from 'next/headers';
 import { PropsWithChildren } from 'react';
 
 export default function PageLayout({ children }: PropsWithChildren) {
-  return <Layout sidebar={<SidebarComponent />}>{children}</Layout>;
+  return (
+    <Layout sidebar={<SidebarComponent logout={!!cookies().get('auth')} />}>
+      {children}
+    </Layout>
+  );
 }

ui/app/peers/layout.tsx

@@ -1,7 +1,12 @@
 import SidebarComponent from '@/components/SidebarComponent';
 import { Layout } from '@/lib/Layout';
+import { cookies } from 'next/headers';
 import { PropsWithChildren } from 'react';
 
 export default function PageLayout({ children }: PropsWithChildren) {
-  return <Layout sidebar={<SidebarComponent />}>{children}</Layout>;
+  return (
+    <Layout sidebar={<SidebarComponent logout={!!cookies().get('auth')} />}>
+      {children}
+    </Layout>
+  );
 }

ui/components/Logout.tsx

@@ -4,13 +4,14 @@ import { Button } from '@/lib/Button';
 export default function Logout() {
   return (
     <Button
+      style={{ backgroundColor: 'white', border: '1px solid rgba(0,0,0,0.15)' }}
       onClick={() =>
         fetch('/api/logout', { method: 'POST' }).then((res) =>
           location.assign('/login')
         )
       }
     >
-      Logout
+      Log out
     </Button>
   );
 }