github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-21 09:16:30 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(editor): show notification if user is not allowed to edit note

Browse source 
Co-authored-by: Erik Michelson <github@erik.michelson.eu>
Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Philip Molares 2023-10-07 16:56:26 +02:00
parent 104bc070ed
commit 2693ebbb82
2 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/locales/en.json
View file

@ -234,6 +234,10 @@
"you": "(You)"
},
"error": {
"noPermission": {
"title": "No edit permission",
"description": "You don't have permission to edit this note. Please login and try again"
},
"locked": {
"title": "This note is locked",
"description": "Sorry, only the owner can edit this note."

15
frontend/src/components/editor-page/editor-pane/editor-pane.tsx
View file

@ -42,7 +42,9 @@ import { languages } from '@codemirror/language-data'
import { lintGutter } from '@codemirror/lint'
import { oneDark } from '@codemirror/theme-one-dark'
import ReactCodeMirror from '@uiw/react-codemirror'
import React, { useEffect, useMemo } from 'react'
import React, { useCallback, useEffect, useMemo } from 'react'
import { useUiNotifications } from '../../notifications/ui-notification-boundary'
import { Lock as IconLock } from 'react-bootstrap-icons'
export type EditorPaneProps = ScrollProps
@ -56,6 +58,7 @@ export type EditorPaneProps = ScrollProps
* @external {ReactCodeMirror} https://npmjs.com/@uiw/react-codemirror
*/
export const EditorPane: React.FC<EditorPaneProps> = ({ scrollState, onScroll, onMakeScrollSource }) => {
const { dispatchUiNotification } = useUiNotifications()
useApplyScrollState(scrollState)
const messageTransporter = useRealtimeConnection()
@ -144,11 +147,21 @@ export const EditorPane: React.FC<EditorPaneProps> = ({ scrollState, onScroll, o
const translateOptions = useMemo(() => ({ host: editorOrigin }), [editorOrigin])
const placeholderText = useTranslatedText('editor.placeholder', translateOptions)
const userMayEdit = useMayEdit()
const verifyUserIsAllowedToType = useCallback(() => {
if (!userMayEdit) {
dispatchUiNotification('editor.error.noPermission.title', 'editor.error.noPermission.description', {
icon: IconLock
})
}
}, [dispatchUiNotification, userMayEdit])
return (
<div
className={`d-flex flex-column h-100 position-relative`}
onTouchStart={onMakeScrollSource}
onMouseEnter={onMakeScrollSource}
onKeyDown={verifyUserIsAllowedToType}
{...cypressId('editor-pane')}
{...cypressAttribute('editor-ready', String(updateViewContextExtension !== null && isSynced && mayEdit))}>
<MaxLengthWarning />