Merge pull request #4326 from LiskHQ/4294-implement-setup-password-su…

…ccess

Implement setup password success - Closes #4294

src/locales/en/common.json

@@ -87,6 +87,7 @@
   "Connected peers": "Connected peers",
   "Connected to:": "Connected to:",
   "Continue": "Continue",
+  "Continue to Dashboard": "Continue to Dashboard",
   "Continue to sign in": "Continue to sign in",
   "Copied": "Copied",
   "Copied!": "Copied!",
@@ -283,9 +284,9 @@
   "Please check the highlighted word and make sure it’s correct.": "Please check the highlighted word and make sure it’s correct.",
   "Please confirm the message on your {{deviceModel}}": "Please confirm the message on your {{deviceModel}}",
   "Please confirm the transaction on your {{deviceModel}}": "Please confirm the transaction on your {{deviceModel}}",
-  "Please drag and drop the JSON file from your device.": "Please drag and drop the JSON file from your device.",
   "Please enter a valid public key for each member.": "Please enter a valid public key for each member.",
   "Please enter vote amounts for the delegates you wish to vote for": "Please enter vote amounts for the delegates you wish to vote for",
+  "Please paste the JSON here.": "Please paste the JSON here.",
   "Please provide your device password to backup the recovery phrase.": "Please provide your device password to backup the recovery phrase.",
   "Please sign in": "Please sign in",
   "Please use ": "Please use ",
@@ -471,6 +472,7 @@
   "You can also download, print and store safely your passphrase.": "You can also download, print and store safely your passphrase.",
   "You can download or copy the transaction and share it with other members.": "You can download or copy the transaction and share it with other members.",
   "You can learn more": "You can learn more",
+  "You can now download your encrypted secret recovery phrase and use it to add your account on other devices.": "You can now download your encrypted secret recovery phrase and use it to add your account on other devices.",
   "You can now start sending and receiving LSK tokens": "You can now start sending and receiving LSK tokens",
   "You can only vote in multiplies of 10 LSK.": "You can only vote in multiplies of 10 LSK.",
   "You cannot vote for this delegate": "You cannot vote for this delegate",

src/modules/auth/components/setPasswordSuccess/index.js

@@ -0,0 +1 @@
+export { default } from './setPasswordSuccess';

src/modules/auth/components/setPasswordSuccess/setPasswordSuccess.css

@@ -0,0 +1,52 @@
+@import '../../../../../setup/react/app/mixins.css';
+
+.container {
+  flex-grow: 1;
+  justify-content: center;
+  text-align: center;
+}
+
+.content {
+  padding: 64px 64px 50px !important;
+
+  & h1 {
+    margin: 0 0 16px 0;
+  }
+
+  & > .subheader {
+    @mixin contentLargest;
+
+    color: var(--color-blue-gray);
+    margin: 0;
+    font-size: var(--subtitle-font-size-s);
+  }
+
+  & > .jsonFile {
+    @mixin contentNormal;
+
+    margin: 8px 0 32px 0;
+    color: var(--color-blue-gray);
+  }
+
+  & > .downloadLisk {
+    display: flex;
+    width: 100%;
+    padding: 16px 0;
+    justify-content: center;
+
+    & > p {
+      @mixin contentLarge bold;
+
+      color: var(--color-blue-gray);
+      margin: 20px;
+      text-align: left;
+      word-spacing: 8px;
+    }
+  }
+
+  & > .continueButton {
+    @mixin contentNormal;
+
+    width: 100%;
+  }
+}

src/modules/auth/components/setPasswordSuccess/setPasswordSuccess.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { PrimaryButton, TertiaryButton } from 'src/theme/buttons';
+import { downloadJSON, transactionToJSON } from '@transaction/utils';
+import Box from 'src/theme/box';
+import BoxContent from 'src/theme/box/content';
+import Icon from 'src/theme/Icon';
+import styles from './setPasswordSuccess.css';
+
+function SetPasswordSuccess({ onClose, encryptedPhrase }) {
+  const { t } = useTranslation();
+
+  const onDownload = () => {
+    const encryptedJSON = JSON.parse(transactionToJSON(encryptedPhrase));
+    downloadJSON(encryptedJSON, 'encrypted_secret_recovery_phrase');
+  };
+
+  const onContinue = () => onClose();
+
+  return (
+    <Box className={styles.container}>
+      <BoxContent className={styles.content}>
+        <h1>{t("Perfect! You're all set")}</h1>
+        <p className={styles.subheader}>
+          {t(
+            'You can now download your encrypted secret recovery phrase and use it to add your account on other devices.',
+          )}
+        </p>
+        <div className={styles.downloadLisk}>
+          <Icon name="fileOutline" />
+          <p className="option-value">encrypted_secret_recovery_phrase.json</p>
+          <TertiaryButton
+            className={styles.downloadBtn}
+            size="xs"
+            onClick={onDownload}
+          >
+            {t('Download')}
+          </TertiaryButton>
+        </div>
+        <PrimaryButton className={styles.continueButton} onClick={onContinue}>
+          {t('Continue to Dashboard')}
+        </PrimaryButton>
+      </BoxContent>
+    </Box>
+  );
+}
+
+SetPasswordSuccess.defaultProps = {
+  encryptedPhrase: {
+    error: 'no encrypted backup found',
+  },
+};
+
+export default SetPasswordSuccess;

src/modules/auth/components/setPasswordSuccess/setPasswordSuccess.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import * as txUtils from '@transaction/utils/transaction';
+import SetPasswordSuccess from './index';
+
+describe('Setup password success and JSON download component', () => {
+  const props = {
+    onClose: jest.fn(),
+    encryptedPhrase: {
+      name: 'encrypted recovery phrase',
+      phrase: 'encrypted_phrase',
+    },
+  };
+
+  it('should render properly', () => {
+    const wrapper = mount(<SetPasswordSuccess {...props} />);
+    expect(wrapper).toContainMatchingElement('.container');
+    expect(wrapper).toContainMatchingElement('.content');
+    expect(wrapper).toContainMatchingElement('.subheader');
+    expect(wrapper).toContainMatchingElement('.downloadLisk');
+    expect(wrapper).toContainMatchingElement('.downloadBtn');
+    expect(wrapper).toContainMatchingElement('.continueButton');
+  });
+
+  it('should download JSON when download button is clicked', () => {
+    const spyOnJSONDownload = jest.spyOn(txUtils, 'downloadJSON');
+    const wrapper = mount(<SetPasswordSuccess {...props} />);
+    wrapper.find('.downloadBtn').at(0).simulate('click');
+    expect(spyOnJSONDownload).toHaveBeenCalledWith(
+      props.encryptedPhrase,
+      'encrypted_secret_recovery_phrase',
+    );
+  });
+
+  it('should close modal when continue button is clicked', () => {
+    const wrapper = mount(<SetPasswordSuccess {...props} />);
+    wrapper.find('.continueButton').at(0).simulate('click');
+  });
+});