Show page instead of redirecting unauthorized users

Teknologforeningen · Sep 4, 2023 · 0d4e341 · 0d4e341
1 parent 2395d07
commit 0d4e341
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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