From 0d4e341e0dd82aa7ddb6baf779566895afc7b5aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20B=C3=A4ck?= <jonas.c.back@gmail.com>
Date: Mon, 4 Sep 2023 14:03:23 +0300
Subject: [PATCH] Show page instead of redirecting unauthorized users

---
 components/Page.tsx            | 54 +++++++++++++++++++++-------------
 components/Unauthorized.tsx    | 18 ++++++++++++
 pages/medlem/[privatePage].tsx | 14 ++-------
 3 files changed, 55 insertions(+), 31 deletions(-)
 create mode 100644 components/Unauthorized.tsx

diff --git a/components/Page.tsx b/components/Page.tsx
index 91602fc..de548a5 100644
--- a/components/Page.tsx
+++ b/components/Page.tsx
@@ -7,6 +7,7 @@ import { NationLogo } from '@components/footer/Logos'
 import Footer from '@components/footer'
 import TableOfContents from '@components/TableOfContents'
 import PageSection from '@components/PageSection'
+import Unauthorized from '@components/Unauthorized'
 
 const renderer: marked.RendererObject = {
   image(href: string | null): string {
@@ -24,34 +25,47 @@ type PageProps = {
   logos: NationLogo[]
   navbarLinks: NavbarLink[]
   isPrivate: boolean
+  unauthorized?: boolean
 }
 
-const Page: NextPage<PageProps> = ({ page, navbarLinks, logos, isPrivate }) => {
+const Page: NextPage<PageProps> = ({
+  page,
+  navbarLinks,
+  logos,
+  isPrivate,
+  unauthorized = false,
+}) => {
   return (
     <div className="flex min-h-screen flex-col bg-white">
       <Header navbarLinks={navbarLinks} />
       <div className="flex flex-grow justify-center">
         <div className="prose prose-sm mx-4 mb-12 mt-6 flex flex-col sm:mx-8 md:mx-16 md:mt-12">
-          <h1>{page?.title}</h1>
-          {page?.content && (
-            <div
-              dangerouslySetInnerHTML={{
-                __html: marked.parse(page.content ?? ''),
-              }}
-            />
+          {unauthorized ? (
+            <Unauthorized />
+          ) : (
+            <>
+              <h1>{page?.title}</h1>
+              {page?.content && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: marked.parse(page.content ?? ''),
+                  }}
+                />
+              )}
+              {page?.showTableOfContents && (
+                <TableOfContents sections={page.sections.data} />
+              )}
+              {page?.sections?.data.map((section, i) => (
+                <PageSection
+                  key={i}
+                  title={section.attributes.title}
+                  content={section.attributes.content}
+                  file_folders={section.attributes.file_folders.data}
+                  isPrivate={isPrivate}
+                />
+              ))}
+            </>
           )}
-          {page?.showTableOfContents && (
-            <TableOfContents sections={page.sections.data} />
-          )}
-          {page?.sections?.data.map((section, i) => (
-            <PageSection
-              key={i}
-              title={section.attributes.title}
-              content={section.attributes.content}
-              file_folders={section.attributes.file_folders.data}
-              isPrivate={isPrivate}
-            />
-          ))}
         </div>
       </div>
       <Footer logos={logos} />
diff --git a/components/Unauthorized.tsx b/components/Unauthorized.tsx
new file mode 100644
index 0000000..28efcb0
--- /dev/null
+++ b/components/Unauthorized.tsx
@@ -0,0 +1,18 @@
+import { signIn } from 'next-auth/react'
+
+const Unauthorized = () => (
+  <>
+    <p>Denna sida kräver inloggning</p>
+    <button
+      onClick={(e) => {
+        e.preventDefault()
+        signIn('keycloak')
+      }}
+      className="mx-3 rounded-lg border p-2 hover:font-bold"
+    >
+      Logga in
+    </button>
+  </>
+)
+
+export default Unauthorized
diff --git a/pages/medlem/[privatePage].tsx b/pages/medlem/[privatePage].tsx
index db73dd5..a6bda28 100644
--- a/pages/medlem/[privatePage].tsx
+++ b/pages/medlem/[privatePage].tsx
@@ -1,7 +1,5 @@
 import { GetServerSideProps, NextPage } from 'next'
 import { PageType } from '@models/page'
-import { signIn } from 'next-auth/react'
-import { useEffect } from 'react'
 import { Session } from 'next-auth'
 import { getSession } from 'next-auth/react'
 import { fetchPrivatePage } from '@lib/api/privatepage'
@@ -20,15 +18,9 @@ type PrivatePageProps = {
 const PrivatePage: NextPage<PrivatePageProps> = ({
   session,
   ...props
-}: PrivatePageProps) => {
-  useEffect(() => {
-    if (!session) {
-      signIn('keycloak')
-    }
-  }, [session])
-
-  return <Page {...props} isPrivate={true} />
-}
+}: PrivatePageProps) => (
+  <Page {...props} isPrivate={true} unauthorized={!session || !props.page} />
+)
 
 export const getServerSideProps: GetServerSideProps<{
   session: Session | null