fix: show new note button only dependent on guest access

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/locales/en.json

@@ -555,7 +555,8 @@
     "signOut": "Sign Out",
     "logoutFailed": "There was an error logging you out.\nClose your browser window to ensure session data is removed.",
     "guest": {
-      "title": "Continue as guest"
+      "title": "Continue as guest",
+      "noteCreationDisabled": "Guest note creation is disabled on this instance. Please log in to create a note."
     },
     "auth": {
       "email": "Email",

frontend/src/components/common/new-note-button/new-note-button.tsx

@@ -11,6 +11,9 @@ import { useRouter } from 'next/navigation'
 import React, { useCallback } from 'react'
 import { FileEarmarkPlus as IconPlus } from 'react-bootstrap-icons'
 import { Trans } from 'react-i18next'
+import { useFrontendConfig } from '../frontend-config-context/use-frontend-config'
+import { GuestAccessLevel } from '../../../api/config/types'
+import { useIsLoggedIn } from '../../../hooks/common/use-is-logged-in'
 
 /**
  * Links to the "new note" endpoint
@@ -18,6 +21,9 @@ import { Trans } from 'react-i18next'
 export const NewNoteButton: React.FC = () => {
   const { showErrorNotification } = useUiNotifications()
   const router = useRouter()
+  const guestAccessLevel = useFrontendConfig().guestAccess
+  const isLoggedIn = useIsLoggedIn()
+
   const createNewNoteAndRedirect = useCallback((): void => {
     createNote('')
       .then((note) => {
@@ -28,6 +34,10 @@ export const NewNoteButton: React.FC = () => {
       })
   }, [router, showErrorNotification])
 
+  if (!isLoggedIn && guestAccessLevel !== GuestAccessLevel.CREATE) {
+    return null
+  }
+
   return (
     <IconButton
       {...cypressId('new-note-button')}

frontend/src/components/login-page/guest/guest-card.tsx

@@ -11,6 +11,7 @@ import { HistoryButton } from '../../layout/app-bar/app-bar-elements/help-dropdo
 import { useFrontendConfig } from '../../common/frontend-config-context/use-frontend-config'
 import { Trans, useTranslation } from 'react-i18next'
 import { GuestAccessLevel } from '../../../api/config/types'
+import { ShowIf } from '../../common/show-if/show-if'
 
 /**
  * Renders the card with the options for not logged-in users.
@@ -20,10 +21,6 @@ export const GuestCard: React.FC = () => {
 
   useTranslation()
 
-  if (guestAccessLevel === GuestAccessLevel.DENY) {
-    return null
-  }
-
   return (
     <Card>
       <Card.Body>
@@ -34,6 +31,11 @@ export const GuestCard: React.FC = () => {
           <NewNoteButton />
           <HistoryButton />
         </div>
+        <ShowIf condition={guestAccessLevel !== GuestAccessLevel.CREATE}>
+          <div className={'text-muted mt-2 small'}>
+            <Trans i18nKey={'login.guest.noteCreationDisabled'} />
+          </div>
+        </ShowIf>
       </Card.Body>
     </Card>
   )

frontend/src/hooks/common/use-is-logged-in.ts

@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useApplicationState } from './use-application-state'
+
+/**
+ * Hook to check if currently a user is logged in.
+ * @return True, if a user is logged in. False otherwise.
+ */
+export const useIsLoggedIn = () => {
+  return useApplicationState((state) => !!state.user)
+}