Merge pull request #39 from hanshs/styling

Authentication: Don't show delete and create buttons to unauthorized users (#28) and styling

pages/index.tsx

@@ -3,10 +3,12 @@ import Head from 'next/head'
 import Link from 'next/link'
 import React from 'react'
 import { useTheorems } from '../lib/data'
+import { useSession } from 'next-auth/react'
 
 
 export default function IndexPage() {
   const theorems = useTheorems()
+  const session = useSession({ required: false })
 
   return (
     <>
@@ -21,7 +23,8 @@ export default function IndexPage() {
           <h1 className="font-semibold text-2xl">Theorems</h1>
           <p className="mb-4">Here you can find the list of all theorems currently in the system.</p>
         </div>
-        <Link href={'/create'}><a className="btn">Create Theorem</a></Link>
+        {session.status === 'authenticated' &&
+        <Link href={'/create'}><a className="btn">Create Theorem</a></Link>}
       </div>
       <div className="flex">
         <ol className="w-full">

pages/theorem/[id].tsx

@@ -1,6 +1,7 @@
 
 import React from 'react'
 import { useRouter } from 'next/router'
+import { useSession } from 'next-auth/react'
 
 import { deleteTheorem, useTheorem } from '../../lib/data'
 import Head from 'next/head'
@@ -9,6 +10,7 @@ import Theorem from '../../components/Theorem'
 export default function ProofPage() {
   const router = useRouter()
   const theorem = useTheorem(router.query.id)
+  const session = useSession({ required: false })
 
   if (!theorem) return null
 
@@ -32,7 +34,8 @@ export default function ProofPage() {
 
       <Theorem theorem={theorem} />
 
-      <button className="btn btn-secondary block ml-auto" onClick={onClickDelete}>Delete Theorem</button>
+      {session.status === 'authenticated' &&
+      <button className="btn btn-secondary block ml-auto" onClick={onClickDelete}>Delete Theorem</button>}
     </>
   )
 }