feat: improve login UI and restrict transcribe page

components/Banner.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+interface Props {
+    children: ReactNode;
+    style: 'error' | 'info';
+}
+
+export default function Banner(props: Props) {
+    return <div className={'border-2 rounded-lg p-3 ' + (props.style === 'info' ? 'bg-blue-400 border-blue-600' : 'bg-red-900 border-red-700')}>
+        {props.children}
+    </div>
+}

pages/api/auth/[...nextauth].ts

@@ -37,6 +37,9 @@ export const authOptions: NextAuthOptions = {
             return params.session;
         },
     },
+    pages: {
+        signIn: '/login',
+    },
 };
 
 export default NextAuth(authOptions);

pages/comic/[comic]/transcribe/[page].tsx

@@ -4,6 +4,7 @@ import {
     IAreaRendererProps,
 } from '@bmunozg/react-image-area';
 import { GetServerSideProps } from 'next';
+import { useSession } from 'next-auth/react';
 import Head from 'next/head';
 import Image from 'next/image';
 import { ParsedUrlQuery } from 'querystring';
@@ -66,6 +67,7 @@ export default function TranscribePage(props: Props) {
     const [lockAreas, setLockAreas] = useState(false);
     const [selectedBubble, setSelectedBubble] = useState(-1);
     const [saving, setSaving] = useState(false);
+    useSession({ required: true });
 
     const extractText = useCallback(() => {
         if (image && regions.length > 0) {

pages/login.tsx

@@ -4,13 +4,20 @@ import { signIn } from 'next-auth/react';
 import Button from '../components/Button';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import Banner from '../components/Banner';
 
 export default function Login() {
     const router = useRouter();
     const ret =
         (Array.isArray(router.query.return)
             ? router.query.return[0]
-            : router.query.return) || '/';
+            : router.query.return) ||
+        (Array.isArray(router.query.callbackUrl)
+            ? router.query.callbackUrl[0]
+            : router.query.callbackUrl) ||
+        '/';
+    
+    const error = Array.isArray(router.query.error) ? router.query.error[0] : router.query.error;
 
     return (
         <div className='p-4 flex flex-col items-center justify-center'>
@@ -23,6 +30,15 @@ export default function Login() {
                     <h1 className='text-4xl'>Login</h1>
                 </header>
 
+                {error && <>
+                    <hr className='border-slate-600 my-4' />
+
+                    <Banner style='error'>
+                        {error === 'SessionRequired' && <>You must login to view this page.</>}
+                        {error === 'Default' && <>An error occurred {':('} Please try again.</>}
+                    </Banner>
+                </>}
+
                 <hr className='border-slate-600 my-4' />
 
                 <section className='flex flex-col gap-2'>