diff --git a/web/components/button.react.js b/web/components/button.react.js --- a/web/components/button.react.js +++ b/web/components/button.react.js @@ -7,8 +7,9 @@ export type ButtonVariant = 'plain' | 'filled' | 'outline' | 'text'; export type ButtonColor = { - +backgroundColor?: string, - +color?: string, + +'backgroundColor'?: string, + +'color'?: string, + +'border-color'?: string, }; export const buttonThemes: { [string]: ButtonColor } = { diff --git a/web/invite-links/manage-invite-links-modal.react.js b/web/invite-links/manage-invite-links-modal.react.js --- a/web/invite-links/manage-invite-links-modal.react.js +++ b/web/invite-links/manage-invite-links-modal.react.js @@ -8,6 +8,7 @@ import type { InviteLink } from 'lib/types/link-types.js'; import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; +import DisableLinkModal from './manage/disable-link-modal.react.js'; import EditLinkModal from './manage/edit-link-modal.react.js'; import EmptyLinkContent from './manage/empty-link-content.react.js'; import ExistingLinkContent from './manage/existing-link-content.react.js'; @@ -33,17 +34,32 @@ const [modalStage, setModalStage] = React.useState('view'); const enterEditMode = React.useCallback(() => setModalStage('edit'), []); const enterViewMode = React.useCallback(() => setModalStage('view'), []); + const enterDisableMode = React.useCallback( + () => setModalStage('disable'), + [], + ); if (modalStage === 'edit') { return ( ); } + if (modalStage === 'disable' && inviteLink) { + return ( + + ); + } + let content; if (inviteLink) { content = ( diff --git a/web/invite-links/manage/disable-link-modal.react.js b/web/invite-links/manage/disable-link-modal.react.js new file mode 100644 --- /dev/null +++ b/web/invite-links/manage/disable-link-modal.react.js @@ -0,0 +1,61 @@ +// @flow + +import classnames from 'classnames'; +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; +import { useInviteLinksActions } from 'lib/hooks/invite-links.js'; +import type { InviteLink } from 'lib/types/link-types.js'; + +import css from './manage-invite-links-modal.css'; +import Button, { buttonThemes } from '../../components/button.react.js'; +import Modal from '../../modals/modal.react.js'; + +type Props = { + +inviteLink: InviteLink, + +enterEditMode: () => mixed, + +enterViewMode: () => mixed, +}; + +function DisableLinkModal(props: Props): React.Node { + const { inviteLink, enterEditMode, enterViewMode } = props; + const { popModal } = useModalContext(); + const { isLoading, disableInviteLink } = useInviteLinksActions( + inviteLink.communityID, + inviteLink, + ); + const disableLink = React.useCallback(async () => { + await disableInviteLink(); + enterViewMode(); + }, [disableInviteLink, enterViewMode]); + + return ( + +
+
+ Are you sure you want to disable your public link? Members who have + your community’s public link but have not joined will not able to with + the disabled link. +
+
+ Other communities may also claim your previous public link url. +
+
+ + +
+
+
+ ); +} + +export default DisableLinkModal; diff --git a/web/invite-links/manage/edit-link-modal.react.js b/web/invite-links/manage/edit-link-modal.react.js --- a/web/invite-links/manage/edit-link-modal.react.js +++ b/web/invite-links/manage/edit-link-modal.react.js @@ -17,11 +17,16 @@ type Props = { +inviteLink: ?InviteLink, +enterViewMode: () => mixed, + +enterDisableMode: () => mixed, +community: ThreadInfo, }; +const disableButtonColor = { + color: 'var(--error-primary)', + ['border-color']: 'var(--error-primary)', +}; function EditLinkModal(props: Props): React.Node { - const { inviteLink, enterViewMode, community } = props; + const { inviteLink, enterViewMode, enterDisableMode, community } = props; const { popModal } = useModalContext(); const { error, isLoading, name, setName, createOrUpdateInviteLink } = @@ -38,6 +43,25 @@ errorComponent =
{error}
; } + let disableLinkComponent = null; + if (inviteLink) { + disableLinkComponent = ( + <> +
+
+
You may also disable the community public link
+ +
+ + ); + } + return (
@@ -75,6 +99,7 @@
+ {disableLinkComponent}
); diff --git a/web/invite-links/manage/manage-invite-links-modal.css b/web/invite-links/manage/manage-invite-links-modal.css --- a/web/invite-links/manage/manage-invite-links-modal.css +++ b/web/invite-links/manage/manage-invite-links-modal.css @@ -74,3 +74,17 @@ font-size: var(--s-font-14); color: var(--error-primary); } + +.disableLinkRow { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-size: var(--s-font-14); +} + +.disableLinkButtons { + display: flex; + flex-direction: column; + gap: 16px; +}