diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx index 56b599861d5110b833c45198fff611e8534ef2e6..bcc1ade800f82e123f7f5037c1d642aacafcb33b 100644 --- a/packages/desktop-client/src/components/Modals.tsx +++ b/packages/desktop-client/src/components/Modals.tsx @@ -15,6 +15,7 @@ import { CategoryMenu } from './modals/CategoryMenu'; import { CloseAccount } from './modals/CloseAccount'; import { ConfirmCategoryDelete } from './modals/ConfirmCategoryDelete'; import { ConfirmTransactionEdit } from './modals/ConfirmTransactionEdit'; +import { ConfirmUnlinkAccount } from './modals/ConfirmUnlinkAccount'; import { CreateAccount } from './modals/CreateAccount'; import { CreateEncryptionKey } from './modals/CreateEncryptionKey'; import { CreateLocalAccount } from './modals/CreateLocalAccount'; @@ -126,6 +127,15 @@ export function Modals() { /> ); + case 'confirm-unlink-account': + return ( + <ConfirmUnlinkAccount + modalProps={modalProps} + accountName={options.accountName} + onUnlink={options.onUnlink} + /> + ); + case 'confirm-transaction-edit': return ( <ConfirmTransactionEdit diff --git a/packages/desktop-client/src/components/accounts/Account.jsx b/packages/desktop-client/src/components/accounts/Account.jsx index 6656be65b777168fc82e24d30067a8bb6d1b390a..a0290d431ab3b154338e73b6651e873b8737d144 100644 --- a/packages/desktop-client/src/components/accounts/Account.jsx +++ b/packages/desktop-client/src/components/accounts/Account.jsx @@ -590,7 +590,12 @@ class AccountInternal extends PureComponent { }); break; case 'unlink': - this.props.unlinkAccount(accountId); + this.props.pushModal('confirm-unlink-account', { + accountName: account.name, + onUnlink: () => { + this.props.unlinkAccount(accountId); + }, + }); break; case 'close': this.props.openAccountCloseModal(accountId); diff --git a/packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx b/packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx new file mode 100644 index 0000000000000000000000000000000000000000..68174829a6dc4872f808529615520efb7c8039cc --- /dev/null +++ b/packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx @@ -0,0 +1,56 @@ +import React from 'react'; + +import { Button } from '../common/Button'; +import { Modal } from '../common/Modal'; +import { Paragraph } from '../common/Paragraph'; +import { View } from '../common/View'; +import { type CommonModalProps } from '../Modals'; + +type ConfirmUnlinkAccountProps = { + modalProps: CommonModalProps; + accountName: string; + onUnlink: () => void; +}; + +export function ConfirmUnlinkAccount({ + modalProps, + accountName, + onUnlink, +}: ConfirmUnlinkAccountProps) { + return ( + <Modal title="Confirm Unlink" {...modalProps} style={{ flex: 0 }}> + {() => ( + <View style={{ lineHeight: 1.5 }}> + <Paragraph> + Are you sure you want to unlink <strong>{accountName}</strong>? + </Paragraph> + + <Paragraph> + Transactions will no longer be synchronized with this account and + must be manually entered. + </Paragraph> + + <View + style={{ + flexDirection: 'row', + justifyContent: 'flex-end', + }} + > + <Button style={{ marginRight: 10 }} onClick={modalProps.onClose}> + Cancel + </Button> + <Button + type="primary" + onClick={() => { + onUnlink(); + modalProps.onClose(); + }} + > + Unlink + </Button> + </View> + </View> + )} + </Modal> + ); +} diff --git a/upcoming-release-notes/2441.md b/upcoming-release-notes/2441.md new file mode 100644 index 0000000000000000000000000000000000000000..6b2cb29adb63e80fab5a7340b42a337454b61aab --- /dev/null +++ b/upcoming-release-notes/2441.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [psybers] +--- + +Show a modal to confirm unlinking accounts.