Add confirmation dialog when creating new account

2 files changed, 82 insertions, 8 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/login/CreateAccountDialog.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/login/CreateAccountDialog.tsx
new file mode 100644
index 0000000000..a416989e46
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/login/CreateAccountDialog.tsx
@@ -0,0 +1,47 @@
+import { messages } from '../../../../shared/gettext';
+import { Button } from '../../../lib/components';
+import { ModalAlert, ModalAlertType, ModalMessage } from '../../Modal';
+
+interface Props {
+  visible: boolean;
+  onConfirm: () => void;
+  onHide: () => void;
+}
+
+export default function ClearAccountHistoryDialog(props: Props) {
+  return (
+    <ModalAlert
+      isOpen={props.visible}
+      type={ModalAlertType.caution}
+      buttons={[
+        <Button key="confirm" onClick={props.onConfirm}>
+          <Button.Text>
+            {
+              // TRANSLATORS: Button which confirms the action to create a new account.
+              messages.pgettext('login-view', 'Create new account')
+            }
+          </Button.Text>
+        </Button>,
+        <Button key="back" onClick={props.onHide}>
+          <Button.Text>{messages.gettext('Cancel')}</Button.Text>
+        </Button>,
+      ]}
+      close={props.onHide}>
+      <ModalMessage>
+        {
+          // TRANSLATORS: Text that informs the users about consequences of creating a new account.
+          messages.pgettext(
+            'login-view',
+            'You already have a saved account number, by creating a new account the saved account number will be removed from this device. This cannot be undone.',
+          )
+        }
+      </ModalMessage>
+      <ModalMessage>
+        {
+          // TRANSLATORS: Text that asks the user if they really want to create a new account.
+          messages.pgettext('login-view', 'Do you want to create a new account?')
+        }
+      </ModalMessage>
+    </ModalAlert>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/login/Login.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/login/Login.tsx
index 395467ac14..d085ea2b54 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/login/Login.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/login/Login.tsx
@@ -28,6 +28,7 @@ import Accordion from '../../Accordion';
 import { AppMainHeader } from '../../app-main-header';
 import { Container, Layout } from '../../Layout';
 import ClearAccountHistoryDialog from './ClearAccountHistoryDialog';
+import CreateAccountDialog from './CreateAccountDialog';
 import {
   StyledAccountDropdownContainer,
   StyledAccountDropdownItem,
@@ -98,6 +99,7 @@ interface IProps {
 interface IState {
   isActive: boolean;
   clearAccountHistoryDialogVisible: boolean;
+  createAccountDialogVisible: boolean;
 }
 
 const MIN_ACCOUNT_NUMBER_LENGTH = 10;
@@ -106,6 +108,7 @@ class Login extends React.Component<IProps, IState> {
   public state: IState = {
     isActive: true,
     clearAccountHistoryDialogVisible: false,
+    createAccountDialogVisible: false,
   };
 
   private accountInput = React.createRef<HTMLInputElement>();
@@ -324,6 +327,23 @@ class Login extends React.Component<IProps, IState> {
     }
   }
 
+  private onCreateNewAccount = () => {
+    if (this.props.accountHistory !== undefined) {
+      this.setState({ createAccountDialogVisible: true });
+    } else {
+      this.onConfirmCreateNewAccount();
+    }
+  };
+
+  private onConfirmCreateNewAccount = () => {
+    this.props.createNewAccount();
+    this.hideCreateAccountDialog();
+  };
+
+  private hideCreateAccountDialog = () => {
+    this.setState({ createAccountDialogVisible: false });
+  };
+
   private createLoginForm() {
     const inputId = 'account-number-input';
     const allowInteraction = this.allowInteraction();
@@ -400,14 +420,21 @@ class Login extends React.Component<IProps, IState> {
 
   private createFooter() {
     return (
-      <Flex $flexDirection="column" $gap="small">
-        <LabelTiny color="whiteAlpha60">
-          {messages.pgettext('login-view', 'Don’t have an account number?')}
-        </LabelTiny>
-        <Button onClick={this.props.createNewAccount} disabled={!this.allowCreateAccount()}>
-          <Button.Text>{messages.pgettext('login-view', 'Create account')}</Button.Text>
-        </Button>
-      </Flex>
+      <>
+        <Flex $flexDirection="column" $gap="small">
+          <LabelTiny color="whiteAlpha60">
+            {messages.pgettext('login-view', 'Don’t have an account number?')}
+          </LabelTiny>
+          <Button onClick={this.onCreateNewAccount} disabled={!this.allowCreateAccount()}>
+            <Button.Text>{messages.pgettext('login-view', 'Create account')}</Button.Text>
+          </Button>
+        </Flex>
+        <CreateAccountDialog
+          visible={this.state.createAccountDialogVisible}
+          onConfirm={this.onConfirmCreateNewAccount}
+          onHide={this.hideCreateAccountDialog}
+        />
+      </>
     );
   }
 }