diff --git a/packages/desktop-client/src/components/modals/CreateAccountModal.tsx b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
index 4a81c360bfb7538dcd19d1f6dbf031bd309b6894..492a03f8427e8b0bbe13a24a35a1ffb5b1de9af9 100644
--- a/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
+++ b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
@@ -9,14 +9,17 @@ import { useFeatureFlag } from '../../hooks/useFeatureFlag';
import { useGoCardlessStatus } from '../../hooks/useGoCardlessStatus';
import { useSimpleFinStatus } from '../../hooks/useSimpleFinStatus';
import { type SyncServerStatus } from '../../hooks/useSyncServerStatus';
+import { SvgDotsHorizontalTriple } from '../../icons/v1';
import { theme } from '../../style';
import { Button, ButtonWithLoading } from '../common/Button';
import { Link } from '../common/Link';
+import { Menu } from '../common/Menu';
import { Modal } from '../common/Modal';
import { Paragraph } from '../common/Paragraph';
import { Text } from '../common/Text';
import { View } from '../common/View';
import { type CommonModalProps } from '../Modals';
+import { Tooltip } from '../tooltips';
type CreateAccountProps = {
modalProps: CommonModalProps;
@@ -34,6 +37,8 @@ export function CreateAccountModal({
useState(null);
const [isSimpleFinSetupComplete, setIsSimpleFinSetupComplete] =
useState(null);
+ const [menuGoCardlessOpen, setGoCardlessMenuOpen] = useState<boolean>(false);
+ const [menuSimplefinOpen, setSimplefinMenuOpen] = useState<boolean>(false);
const onConnectGoCardless = () => {
if (!isGoCardlessSetupComplete) {
@@ -108,6 +113,36 @@ export function CreateAccountModal({
});
};
+ const onGoCardlessReset = () => {
+ send('secret-set', {
+ name: 'gocardless_secretId',
+ value: null,
+ }).then(() => {
+ send('secret-set', {
+ name: 'gocardless_secretKey',
+ value: null,
+ }).then(() => {
+ setIsGoCardlessSetupComplete(false);
+ setGoCardlessMenuOpen(false);
+ });
+ });
+ };
+
+ const onSimpleFinReset = () => {
+ send('secret-set', {
+ name: 'simplefin_token',
+ value: null,
+ }).then(() => {
+ send('secret-set', {
+ name: 'simplefin_accessKey',
+ value: null,
+ }).then(() => {
+ setIsSimpleFinSetupComplete(false);
+ setSimplefinMenuOpen(false);
+ });
+ });
+ };
+
const onCreateLocalAccount = () => {
actions.pushModal('add-local-account');
};
@@ -168,20 +203,63 @@ export function CreateAccountModal({
<View style={{ gap: 10 }}>
{syncServerStatus === 'online' ? (
<>
- <ButtonWithLoading
- disabled={syncServerStatus !== 'online'}
+ <View
style={{
- padding: '10px 0',
- fontSize: 15,
- fontWeight: 600,
- flex: 1,
+ flexDirection: 'row',
+ gap: 10,
+ alignItems: 'center',
}}
- onClick={onConnectGoCardless}
>
- {isGoCardlessSetupComplete
- ? 'Link bank account with GoCardless'
- : 'Set up GoCardless for bank sync'}
- </ButtonWithLoading>
+ <ButtonWithLoading
+ disabled={syncServerStatus !== 'online'}
+ style={{
+ padding: '10px 0',
+ fontSize: 15,
+ fontWeight: 600,
+ flex: 1,
+ }}
+ onClick={onConnectGoCardless}
+ >
+ {isGoCardlessSetupComplete
+ ? 'Link bank account with GoCardless'
+ : 'Set up GoCardless for bank sync'}
+ </ButtonWithLoading>
+ {isGoCardlessSetupComplete && (
+ <Button
+ type="bare"
+ onClick={() => setGoCardlessMenuOpen(true)}
+ aria-label="Menu"
+ >
+ <SvgDotsHorizontalTriple
+ width={15}
+ height={15}
+ style={{ transform: 'rotateZ(90deg)' }}
+ />
+ {menuGoCardlessOpen && (
+ <Tooltip
+ position="bottom-right"
+ width={200}
+ style={{ padding: 0 }}
+ onClose={() => setGoCardlessMenuOpen(false)}
+ >
+ <Menu
+ onMenuSelect={item => {
+ if (item === 'reconfigure') {
+ onGoCardlessReset();
+ }
+ }}
+ items={[
+ {
+ name: 'reconfigure',
+ text: 'Reset GoCardless credentials',
+ },
+ ]}
+ />
+ </Tooltip>
+ )}
+ </Button>
+ )}
+ </View>
<Text style={{ lineHeight: '1.4em', fontSize: 15 }}>
<strong>
Link a <em>European</em> bank account
@@ -191,22 +269,65 @@ export function CreateAccountModal({
</Text>
{simpleFinSyncFeatureFlag === true && (
<>
- <ButtonWithLoading
- disabled={syncServerStatus !== 'online'}
- loading={loadingSimpleFinAccounts}
+ <View
style={{
+ flexDirection: 'row',
+ gap: 10,
marginTop: '18px',
- padding: '10px 0',
- fontSize: 15,
- fontWeight: 600,
- flex: 1,
+ alignItems: 'center',
}}
- onClick={onConnectSimpleFin}
>
- {isSimpleFinSetupComplete
- ? 'Link bank account with SimpleFIN'
- : 'Set up SimpleFIN for bank sync'}
- </ButtonWithLoading>
+ <ButtonWithLoading
+ disabled={syncServerStatus !== 'online'}
+ loading={loadingSimpleFinAccounts}
+ style={{
+ padding: '10px 0',
+ fontSize: 15,
+ fontWeight: 600,
+ flex: 1,
+ }}
+ onClick={onConnectSimpleFin}
+ >
+ {isSimpleFinSetupComplete
+ ? 'Link bank account with SimpleFIN'
+ : 'Set up SimpleFIN for bank sync'}
+ </ButtonWithLoading>
+ {isSimpleFinSetupComplete && (
+ <Button
+ type="bare"
+ onClick={() => setSimplefinMenuOpen(true)}
+ aria-label="Menu"
+ >
+ <SvgDotsHorizontalTriple
+ width={15}
+ height={15}
+ style={{ transform: 'rotateZ(90deg)' }}
+ />
+ {menuSimplefinOpen && (
+ <Tooltip
+ position="bottom-right"
+ width={200}
+ style={{ padding: 0 }}
+ onClose={() => setSimplefinMenuOpen(false)}
+ >
+ <Menu
+ onMenuSelect={item => {
+ if (item === 'reconfigure') {
+ onSimpleFinReset();
+ }
+ }}
+ items={[
+ {
+ name: 'reconfigure',
+ text: 'Reset SimpleFIN credentials',
+ },
+ ]}
+ />
+ </Tooltip>
+ )}
+ </Button>
+ )}
+ </View>
<Text style={{ lineHeight: '1.4em', fontSize: 15 }}>
<strong>
Link a <em>North American</em> bank account
@@ -236,7 +357,7 @@ export function CreateAccountModal({
to="https://actualbudget.org/docs/advanced/bank-sync"
linkColor="muted"
>
- automatic syncing.
+ automatic syncing
</Link>
.
</Paragraph>
diff --git a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx
index a7381d4418dd1c9544bda7a5126eed8989fd9692..1a0ff3d5717c5ff923cdf58030742e2062c07ca9 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx
+++ b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx
@@ -11,16 +11,13 @@ import {
import { useGoCardlessStatus } from '../../hooks/useGoCardlessStatus';
import { AnimatedLoading } from '../../icons/AnimatedLoading';
-import { SvgDotsHorizontalTriple } from '../../icons/v1';
import { theme } from '../../style';
import { Error, Warning } from '../alerts';
import { Autocomplete } from '../autocomplete/Autocomplete';
import { Button } from '../common/Button';
import { Link } from '../common/Link';
-import { Menu } from '../common/Menu';
import { Modal } from '../common/Modal';
import { Paragraph } from '../common/Paragraph';
-import { Popover } from '../common/Popover';
import { View } from '../common/View';
import { FormField, FormLabel } from '../forms';
import { type CommonModalProps } from '../Modals';
@@ -101,9 +98,7 @@ export function GoCardlessExternalMsg({
const [isGoCardlessSetupComplete, setIsGoCardlessSetupComplete] = useState<
boolean | null
>(null);
- const [menuOpen, setMenuOpen] = useState<boolean>(false);
const data = useRef<GoCardlessToken | null>(null);
- const triggerRef = useRef(null);
const {
data: bankOptions,
@@ -230,39 +225,6 @@ export function GoCardlessExternalMsg({
>
Link bank in browser →
</Button>
- <Button
- ref={triggerRef}
- type="bare"
- onClick={() => setMenuOpen(true)}
- aria-label="Menu"
- >
- <SvgDotsHorizontalTriple
- width={15}
- height={15}
- style={{ transform: 'rotateZ(90deg)' }}
- />
-
- <Popover
- triggerRef={triggerRef}
- isOpen={menuOpen}
- style={{ width: 200 }}
- onOpenChange={() => setMenuOpen(false)}
- >
- <Menu
- onMenuSelect={item => {
- if (item === 'reconfigure') {
- onGoCardlessInit();
- }
- }}
- items={[
- {
- name: 'reconfigure',
- text: 'Set new API secrets',
- },
- ]}
- />
- </Popover>
- </Button>
</View>
</View>
);
diff --git a/upcoming-release-notes/2870.md b/upcoming-release-notes/2870.md
new file mode 100644
index 0000000000000000000000000000000000000000..e4a8f7945ee33a31db4663984b7936093b4e2b4e
--- /dev/null
+++ b/upcoming-release-notes/2870.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Allow resetting SimpleFIN secrets and unify how bank sync secrets are reset.