From 7e8d2da41b9644ea3670f2d3af4518026ab1a054 Mon Sep 17 00:00:00 2001
From: Ashhhleyyy <ash@ashhhleyyy.dev>
Date: Wed, 27 Jul 2022 15:42:04 +0100
Subject: [PATCH] feat: improve login UI and restrict transcribe page

---
 components/Banner.tsx                     | 12 ++++++++++++
 pages/api/auth/[...nextauth].ts           |  3 +++
 pages/comic/[comic]/transcribe/[page].tsx |  2 ++
 pages/login.tsx                           | 18 +++++++++++++++++-
 4 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 components/Banner.tsx

diff --git a/components/Banner.tsx b/components/Banner.tsx
new file mode 100644
index 0000000..8200978
--- /dev/null
+++ b/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>
+}
diff --git a/pages/api/auth/[...nextauth].ts b/pages/api/auth/[...nextauth].ts
index 3ccdf32..f6799f1 100644
--- a/pages/api/auth/[...nextauth].ts
+++ b/pages/api/auth/[...nextauth].ts
@@ -37,6 +37,9 @@ export const authOptions: NextAuthOptions = {
             return params.session;
         },
     },
+    pages: {
+        signIn: '/login',
+    },
 };
 
 export default NextAuth(authOptions);
diff --git a/pages/comic/[comic]/transcribe/[page].tsx b/pages/comic/[comic]/transcribe/[page].tsx
index 641c96c..0984bb9 100644
--- a/pages/comic/[comic]/transcribe/[page].tsx
+++ b/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) {
diff --git a/pages/login.tsx b/pages/login.tsx
index 3be7ef3..3a13e73 100644
--- a/pages/login.tsx
+++ b/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'>