diff --git a/web/modals/keyserver-selection/keyserver-selection-modal.css b/web/modals/keyserver-selection/keyserver-selection-modal.css index 6ffb2f52e..f66c146e4 100644 --- a/web/modals/keyserver-selection/keyserver-selection-modal.css +++ b/web/modals/keyserver-selection/keyserver-selection-modal.css @@ -1,41 +1,49 @@ .container { padding: 0 32px; } .keyserverDetailsContainer { background-color: var(--modal-background-secondary-default); display: flex; flex-direction: column; align-items: center; row-gap: 8px; padding: 16px 0; border-radius: 8px; margin-top: 16px; } .keyserverDetailsHeaderContainer { display: flex; align-items: center; column-gap: 8px; } .keyserverURL { color: var(--text-background-primary-default); } .keyserverRemoveTextContainer { color: var(--text-background-primary-default); margin: 16px 0 24px; display: flex; flex-direction: column; row-gap: 24px; } .buttonContainer { background-color: var(--modal-background-secondary-default); padding: 16px 32px; } .button { width: 100%; } + +.keyserverRemoveConfirmationContainer { + display: flex; + flex-direction: column; + row-gap: 24px; + padding: 24px 32px; + color: var(--text-background-primary-default); +} diff --git a/web/modals/keyserver-selection/keyserver-selection-modal.react.js b/web/modals/keyserver-selection/keyserver-selection-modal.react.js index fae3f3dc0..8d5726d23 100644 --- a/web/modals/keyserver-selection/keyserver-selection-modal.react.js +++ b/web/modals/keyserver-selection/keyserver-selection-modal.react.js @@ -1,122 +1,164 @@ // @flow import * as React from 'react'; +import { removeKeyserverActionType } from 'lib/actions/keyserver-actions.js'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import type { KeyserverInfo } from 'lib/types/keyserver-types.js'; import type { GlobalAccountUserInfo } from 'lib/types/user-types.js'; +import { useDispatch } from 'lib/utils/redux-utils.js'; import css from './keyserver-selection-modal.css'; import Button, { buttonThemes } from '../../components/button.react.js'; import KeyserverPill from '../../components/keyserver-pill.react.js'; import StatusIndicator from '../../components/status-indicator.react.js'; import Alert from '../alert.react.js'; +import ConfirmationAlert from '../confirmation-alert.react.js'; import Modal from '../modal.react.js'; type Props = { +keyserverAdminUserInfo: GlobalAccountUserInfo, +keyserverInfo: KeyserverInfo, }; function KeyserverSelectionModal(props: Props): React.Node { const { keyserverAdminUserInfo, keyserverInfo } = props; - const { popModal, pushModal } = useModalContext(); + const { popModal, pushModal, clearModals } = useModalContext(); const onClickDisconnectKeyserver = React.useCallback( () => // TODO: update this function when we have a way to // disconnect from a keyserver pushModal( Disconnecting from a keyserver is still not ready. Please come back later. , ), [pushModal], ); + const dispatch = useDispatch(); + + const onDeleteKeyserver = React.useCallback(() => { + dispatch({ + type: removeKeyserverActionType, + payload: { + keyserverAdminUserID: keyserverAdminUserInfo.id, + }, + }); + + clearModals(); + }, [clearModals, dispatch, keyserverAdminUserInfo.id]); + + const onClickRemoveKeyserver = React.useCallback( + () => + pushModal( + +
+
+ Are you sure you want to delete this keyserver from your keyserver + list? +
+
You will still remain in the associated communities.
+
+
, + ), + [onDeleteKeyserver, pushModal], + ); + const { keyerverRemoveInfoText, keyserverRemoveButton } = React.useMemo(() => { if (keyserverInfo.connection.status !== 'connected') { const removeInfoText = ( <>
You may delete an offline keyserver from your keyserver list. When you delete a keyserver, you will still remain in the associated communities.
Any messages or content you have previously sent will remain on the keyserver’s communities after disconnecting or deleting.
); const removeButton = ( ); return { keyerverRemoveInfoText: removeInfoText, keyserverRemoveButton: removeButton, }; } const removeInfoText = ( <>
Disconnecting from this keyserver will remove you from its associated communities.
Any messages or content you have previously sent will remain on the keyserver.
); const removeButton = ( ); return { keyerverRemoveInfoText: removeInfoText, keyserverRemoveButton: removeButton, }; - }, [keyserverInfo.connection.status, onClickDisconnectKeyserver]); + }, [ + keyserverInfo.connection.status, + onClickDisconnectKeyserver, + onClickRemoveKeyserver, + ]); return (
{keyserverInfo.urlPrefix}
{keyerverRemoveInfoText}
{keyserverRemoveButton}
); } export default KeyserverSelectionModal;