Desktop: SeedVault Export/Import adjustments

src/desktop/src/ui/components/input/Seed.js

@@ -296,9 +296,7 @@ class SeedInput extends React.PureComponent {
         const checkSum =
             seed.length < MAX_SEED_LENGTH
                 ? '< 81'
-                : seed.length > MAX_SEED_LENGTH
-                ? '> 81'
-                : Electron.getChecksum(seed);
+                : seed.length > MAX_SEED_LENGTH ? '> 81' : Electron.getChecksum(seed);
 
         return (
             <div className={classNames(css.input, css.seed)}>
@@ -352,10 +350,10 @@ class SeedInput extends React.PureComponent {
                 {importBuffer && (
                     <Password
                         content={{
-                            title: t('enterPassword'),
-                            message: t('seedVault:enterKeyExplanation'),
+                            title: t('seedVault:enterKeyExplanation'),
                             confirm: t('seedVault:importSeedVault'),
                         }}
+                        isSeedVaultField
                         isOpen
                         onClose={() => this.setState({ importBuffer: null })}
                         onSubmit={(password) => this.decryptFile(password)}
@@ -399,7 +397,4 @@ const mapDispatchToProps = {
     setAccountInfoDuringSetup,
 };
 
-export default connect(
-    null,
-    mapDispatchToProps,
-)(withI18n()(SeedInput));
+export default connect(null, mapDispatchToProps)(withI18n()(SeedInput));

src/desktop/src/ui/components/modal/Password.js

@@ -50,6 +50,12 @@ class ModalPassword extends PureComponent {
          * @ignore
          */
         t: PropTypes.func.isRequired,
+        /** Determines whether user is entering SeedVault key */
+        isSeedVaultField: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        isSeedVaultField: false,
     };
 
     state = {
@@ -97,7 +103,7 @@ class ModalPassword extends PureComponent {
     };
 
     passwordContent = () => {
-        const { content, category, isOpen, isForced, onClose, t } = this.props;
+        const { content, category, isOpen, isForced, onClose, t, isSeedVaultField } = this.props;
         const { password } = this.state;
         return (
             <React.Fragment>
@@ -107,7 +113,7 @@ class ModalPassword extends PureComponent {
                     <Password
                         value={password}
                         focus={isOpen}
-                        label={t('password')}
+                        label={isSeedVaultField ? t('seedVault:key') : t('password')}
                         onChange={(value) => this.setState({ password: value })}
                     />
                     <footer>

src/desktop/src/ui/global/SeedExport.js

@@ -40,19 +40,20 @@ class SeedExport extends PureComponent {
 
     onClose = (e) => {
         e.preventDefault();
-
-        this.setState({
-            step: 1,
-            password: '',
-            passwordConfirm: '',
-        });
-
         this.props.onClose();
     };
 
+    onBackStep = (e) => {
+        e.preventDefault();
+        if (this.state.step !== 1) {
+            return this.setState({ step: this.state.step - 1 });
+        }
+        this.onClose(e);
+    };
+
     onStep = (e) => {
         e.preventDefault();
-        this.setState({ step: 2 });
+        this.setState({ step: this.state.step + 1 });
     };
 
     /**
@@ -117,22 +118,22 @@ class SeedExport extends PureComponent {
 
     render() {
         const { t } = this.props;
+        const { step } = this.state;
 
-        if (this.state.step === 1) {
+        if (step < 4) {
             return (
                 <form className={css.seedExport} onSubmit={this.onStep}>
                     <section>
                         <h1>
                             <Icon icon="seedVault" size={120} />
                             {t('seedVault:exportSeedVault')}
                         </h1>
-                        <p>{t('seedVault:seedVaultExplanation')}</p>
-                        <p>
-                            <strong>{t('seedVault:seedVaultWarning')}</strong>
-                        </p>
+                        {step === 1 && <p>{t('seedVault:seedVaultExplanation')}</p>}
+                        {step === 2 && <p>{t('seedVault:seedVaultWarning')}</p>}
+                        {step === 3 && <p>{t('seedVault:seedVaultKeyExplanation')}</p>}
                     </section>
                     <footer>
-                        <Button onClick={this.onClose} className="square" variant="dark">
+                        <Button onClick={this.onBackStep} className="square" variant="dark">
                             {t('goBack')}
                         </Button>
                         <Button type="submit" variant="primary" className="square">
@@ -147,30 +148,30 @@ class SeedExport extends PureComponent {
 
         return (
             <form className={css.seedExport} onSubmit={this.exportSeed}>
-                <section>
+                <section className={css.fieldSection}>
                     <h1>
                         <Icon icon="seedVault" size={120} />
                         {t('seedVault:exportSeedVault')}
                     </h1>
                     <PasswordInput
                         focus
                         value={this.state.password}
-                        label={t('password')}
+                        label={t('seedVault:key')}
                         showScore
                         showValid
                         onChange={(value) => this.setState({ password: value })}
                     />
                     <PasswordInput
                         value={this.state.passwordConfirm}
-                        label={t('setPassword:retypePassword')}
+                        label={t('seedVault:retypeKey')}
                         showValid
                         disabled={score.score < 4}
                         match={this.state.password}
                         onChange={(value) => this.setState({ passwordConfirm: value })}
                     />
                 </section>
                 <footer>
-                    <Button onClick={this.onClose} className="square" variant="dark">
+                    <Button onClick={this.onBackStep} className="square" variant="dark">
                         {t('goBack')}
                     </Button>
                     <Button type="submit" variant="primary" className="square">

src/desktop/src/ui/global/seedExport.scss

@@ -12,12 +12,13 @@
         }
     }
     section {
-        padding-top: 220px;
+        padding-top: 275px;
         position: relative;
         height: 540px;
-
-        p {
-            margin: 20px;
-        }
+    }
+    .fieldSection {
+        position: relative;
+        height: 540px;
+        padding-top: 250px;
     }
 }