diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx index 53802af8c..f4e71e666 100644 --- a/frontend/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx +++ b/frontend/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx @@ -1,10 +1,11 @@ /* - * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ import { useOnInputChange } from '../../../../hooks/common/use-on-input-change' import { UiIcon } from '../../../common/icons/ui-icon' +import type { PermissionDisabledProps } from './permission-disabled.prop' import React, { useCallback, useState } from 'react' import { Button, FormControl, InputGroup } from 'react-bootstrap' import { Plus as IconPlus } from 'react-bootstrap-icons' @@ -20,8 +21,13 @@ export interface PermissionAddEntryFieldProps { * * @param onAddEntry Callback that is fired with the entered username as identifier of the entry to add. * @param i18nKey The localization key for the submit button. + * @param disabled If the user is not the owner, functionality is disabled. */ -export const PermissionAddEntryField: React.FC = ({ onAddEntry, i18nKey }) => { +export const PermissionAddEntryField: React.FC = ({ + onAddEntry, + i18nKey, + disabled +}) => { const { t } = useTranslation() const [newEntryIdentifier, setNewEntryIdentifier] = useState('') @@ -34,8 +40,18 @@ export const PermissionAddEntryField: React.FC = ( return (
  • - - diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-disabled.prop.ts b/frontend/src/components/editor-page/document-bar/permissions/permission-disabled.prop.ts new file mode 100644 index 000000000..b7f6724f4 --- /dev/null +++ b/frontend/src/components/editor-page/document-bar/permissions/permission-disabled.prop.ts @@ -0,0 +1,9 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +export interface PermissionDisabledProps { + disabled: boolean +} diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx index a899f0087..a45df0a95 100644 --- a/frontend/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx +++ b/frontend/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx @@ -1,9 +1,10 @@ /* - * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ import { UiIcon } from '../../../common/icons/ui-icon' +import type { PermissionDisabledProps } from './permission-disabled.prop' import { AccessLevel } from './types' import React, { useMemo } from 'react' import { Button, ToggleButtonGroup } from 'react-bootstrap' @@ -41,14 +42,16 @@ export interface PermissionEntryButtonsProps { * @param onSetReadOnly Callback that is fired when the entry is changed to read-only permission. * @param onSetWriteable Callback that is fired when the entry is changed to writeable permission. * @param onRemove Callback that is fired when the entry is removed. + * @param disabled If the user is not the owner, functionality is disabled. */ -export const PermissionEntryButtons: React.FC = ({ +export const PermissionEntryButtons: React.FC = ({ name, type, currentSetting, onSetReadOnly, onSetWriteable, - onRemove + onRemove, + disabled }) => { const { t } = useTranslation() @@ -74,18 +77,21 @@ export const PermissionEntryButtons: React.FC = ({
  • diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx index d4898fc58..5cf8e015c 100644 --- a/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx +++ b/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx @@ -3,6 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ +import { useIsOwner } from '../../../../hooks/common/use-is-owner' import type { ModalVisibilityProps } from '../../../common/modals/common-modal' import { CommonModal } from '../../../common/modals/common-modal' import { PermissionSectionOwner } from './permission-section-owner' @@ -18,12 +19,13 @@ import { Modal } from 'react-bootstrap' * @param onHide Callback that is fired when the modal is about to be closed. */ export const PermissionModal: React.FC = ({ show, onHide }) => { + const isOwner = useIsOwner() return ( - - - + + + ) diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx index 4ffacc033..0d4047520 100644 --- a/frontend/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx +++ b/frontend/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx @@ -1,11 +1,12 @@ /* - * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ import { useApplicationState } from '../../../../hooks/common/use-application-state' import { UiIcon } from '../../../common/icons/ui-icon' import { UserAvatarForUsername } from '../../../common/user-avatar/user-avatar-for-username' +import type { PermissionDisabledProps } from './permission-disabled.prop' import React, { Fragment } from 'react' import { Button } from 'react-bootstrap' import { Pencil as IconPencil } from 'react-bootstrap-icons' @@ -19,8 +20,12 @@ export interface PermissionOwnerInfoProps { * Content for the owner section of the permission modal that shows the current note owner. * * @param onEditOwner Callback that is fired when the user chooses to change the note owner. + * @param disabled If the user is not the owner, functionality is disabled. */ -export const PermissionOwnerInfo: React.FC = ({ onEditOwner }) => { +export const PermissionOwnerInfo: React.FC = ({ + onEditOwner, + disabled +}) => { const { t } = useTranslation() const noteOwner = useApplicationState((state) => state.noteDetails.permissions.owner) @@ -29,6 +34,7 @@ export const PermissionOwnerInfo: React.FC = ({ onEdit