Merge pull request #981 from input-output-hk/feature/ddw-173-submit-f…

…orms-on-enter-key

[DDW-173] Submit forms on Enter key

CHANGELOG.md

@@ -6,6 +6,7 @@ Changelog
 ### Features
 
 - Implemented a switch instead of a link for “hide used” addresses on the Receive screen ([PR 935](https://github.com/input-output-hk/daedalus/pull/935))
+- Enabled submitting forms on Enter key press ([PR 981](https://github.com/input-output-hk/daedalus/pull/981))
 
 ### Fixes
 

source/renderer/app/components/profile/bug-report/BugReportDialog.js

@@ -19,6 +19,7 @@ import LocalizableError from '../../../i18n/LocalizableError';
 import styles from './BugReportDialog.scss';
 import type { LogFiles } from '../../../types/LogTypes';
 import { FORM_VALIDATION_DEBOUNCE_WAIT } from '../../../config/timingConfig';
+import { submitOnEnter } from '../../../utils/form';
 
 const messages = defineMessages({
   title: {
@@ -321,6 +322,7 @@ export default class BugReportDialog extends Component<Props, State> {
                 {...emailField.bind()}
                 error={emailField.error}
                 skin={<SimpleInputSkin />}
+                onKeyPress={submitOnEnter.bind(this, this.submit)}
               />
             </div>
 
@@ -330,6 +332,7 @@ export default class BugReportDialog extends Component<Props, State> {
                 {...subjectField.bind()}
                 error={subjectField.error}
                 skin={<SimpleInputSkin />}
+                onKeyPress={submitOnEnter.bind(this, this.submit)}
               />
             </div>
 

source/renderer/app/components/profile/language-selection/LanguageSelectionForm.js

@@ -92,7 +92,7 @@ export default class LanguageSelectionForm extends Component<Props> {
           <Button
             className={buttonClasses}
             label={intl.formatMessage(messages.submitLabel)}
-            onMouseUp={this.submit}
+            onClick={this.submit}
             skin={<SimpleButtonSkin />}
           />
 

source/renderer/app/components/profile/terms-of-use/TermsOfUseForm.js

@@ -91,7 +91,7 @@ export default class TermsOfUseForm extends Component<Props, State> {
           <Button
             className={buttonClasses}
             label={intl.formatMessage(messages.submitLabel)}
-            onMouseUp={this.submit}
+            onClick={this.submit}
             disabled={!areTermsOfUseAccepted}
             skin={<SimpleButtonSkin />}
           />

source/renderer/app/components/wallet/WalletCreateDialog.js

@@ -14,6 +14,7 @@ import { isValidWalletName, isValidWalletPassword, isValidRepeatPassword } from
 import globalMessages from '../../i18n/global-messages';
 import styles from './WalletCreateDialog.scss';
 import { FORM_VALIDATION_DEBOUNCE_WAIT } from '../../config/timingConfig';
+import { submitOnEnter } from '../../utils/form';
 
 const messages = defineMessages({
   dialogTitle: {
@@ -162,12 +163,6 @@ export default class WalletCreateDialog extends Component<Props, State> {
     });
   };
 
-  checkForEnterKey(event: KeyboardEvent) {
-    if (event.key === 'Enter') {
-      this.submit();
-    }
-  }
-
   handlePasswordSwitchToggle = (value: boolean) => {
     this.setState({ createPassword: value });
   };
@@ -211,7 +206,7 @@ export default class WalletCreateDialog extends Component<Props, State> {
 
         <Input
           className="walletName"
-          onKeyPress={this.checkForEnterKey.bind(this)}
+          onKeyPress={submitOnEnter.bind(this, this.submit)}
           ref={(input) => { this.walletNameInput = input; }}
           {...walletNameField.bind()}
           error={walletNameField.error}
@@ -234,12 +229,14 @@ export default class WalletCreateDialog extends Component<Props, State> {
           <div className={walletPasswordFieldsClasses}>
             <Input
               className="walletPassword"
+              onKeyPress={submitOnEnter.bind(this, this.submit)}
               {...walletPasswordField.bind()}
               error={walletPasswordField.error}
               skin={<SimpleInputSkin />}
             />
             <Input
               className="repeatedPassword"
+              onKeyPress={submitOnEnter.bind(this, this.submit)}
               {...repeatedPasswordField.bind()}
               error={repeatedPasswordField.error}
               skin={<SimpleInputSkin />}

source/renderer/app/components/wallet/WalletReceive.js

@@ -169,7 +169,7 @@ export default class WalletReceive extends Component<Props, State> {
         <Button
           className={generateAddressButtonClasses}
           label={intl.formatMessage(messages.generateNewAddressButtonLabel)}
-          onMouseUp={this.submit.bind(this)}
+          onClick={this.submit.bind(this)}
           skin={<SimpleButtonSkin />}
         />
       </div>

source/renderer/app/components/wallet/WalletRestoreDialog.js

@@ -19,6 +19,7 @@ import LocalizableError from '../../i18n/LocalizableError';
 import { PAPER_WALLET_RECOVERY_PHRASE_WORD_COUNT, WALLET_RECOVERY_PHRASE_WORD_COUNT } from '../../config/cryptoConfig';
 import { FORM_VALIDATION_DEBOUNCE_WAIT } from '../../config/timingConfig';
 import styles from './WalletRestoreDialog.scss';
+import { submitOnEnter } from '../../utils/form';
 
 const RESTORE_TYPES = {
   REGULAR: 'regular',
@@ -347,6 +348,7 @@ export default class WalletRestoreDialog extends Component<Props, State> {
 
         <Input
           className={walletNameFieldClasses}
+          onKeyPress={submitOnEnter.bind(this, this.submit)}
           {...walletNameField.bind()}
           error={walletNameField.error}
           skin={<SimpleInputSkin />}
@@ -389,12 +391,14 @@ export default class WalletRestoreDialog extends Component<Props, State> {
           <div className={walletPasswordFieldsClasses}>
             <Input
               className="walletPassword"
+              onKeyPress={submitOnEnter.bind(this, this.submit)}
               {...walletPasswordField.bind()}
               error={walletPasswordField.error}
               skin={<SimpleInputSkin />}
             />
             <Input
               className="repeatedPassword"
+              onKeyPress={submitOnEnter.bind(this, this.submit)}
               {...repeatedPasswordField.bind()}
               error={repeatedPasswordField.error}
               skin={<SimpleInputSkin />}

source/renderer/app/components/wallet/WalletSendConfirmationDialog.js

@@ -12,6 +12,7 @@ import globalMessages from '../../i18n/global-messages';
 import LocalizableError from '../../i18n/LocalizableError';
 import styles from './WalletSendConfirmationDialog.scss';
 import { FORM_VALIDATION_DEBOUNCE_WAIT } from '../../config/timingConfig';
+import { submitOnEnter } from '../../utils/form';
 
 export const messages = defineMessages({
   dialogTitle: {
@@ -106,7 +107,7 @@ export default class WalletSendConfirmationDialog extends Component<Props> {
     },
   });
 
-  submit() {
+  submit = () => {
     this.form.submit({
       onSuccess: (form) => {
         const { isWalletPasswordSet, receiver, amount, amountToNaturalUnits } = this.props;
@@ -122,6 +123,8 @@ export default class WalletSendConfirmationDialog extends Component<Props> {
     });
   }
 
+  submitOnEnter = (event: {}) => submitOnEnter(this.submit, event);
+
   render() {
     const { form } = this;
     const { intl } = this.context;
@@ -150,7 +153,7 @@ export default class WalletSendConfirmationDialog extends Component<Props> {
       },
       {
         label: intl.formatMessage(messages.sendButtonLabel),
-        onClick: this.submit.bind(this),
+        onClick: this.submit,
         primary: true,
         className: confirmButtonClasses,
         disabled: !walletPasswordField.isValid,
@@ -162,6 +165,7 @@ export default class WalletSendConfirmationDialog extends Component<Props> {
         title={intl.formatMessage(messages.dialogTitle)}
         actions={actions}
         closeOnOverlayClick
+        primaryButtonAutoFocus
         onClose={!isSubmitting ? onCancel : null}
         className={styles.dialog}
         closeButton={<DialogCloseButton />}
@@ -204,6 +208,7 @@ export default class WalletSendConfirmationDialog extends Component<Props> {
               {...walletPasswordField.bind()}
               error={walletPasswordField.error}
               skin={<SimpleInputSkin />}
+              onKeyPress={this.submitOnEnter}
             />
           ) : null}
         </div>

source/renderer/app/components/wallet/WalletSendForm.js

@@ -10,6 +10,7 @@ import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import BigNumber from 'bignumber.js';
 import ReactToolboxMobxForm from '../../utils/ReactToolboxMobxForm';
+import { submitOnEnter } from '../../utils/form';
 import AmountInputSkin from './skins/AmountInputSkin';
 import BorderedBox from '../widgets/BorderedBox';
 import LoadingSpinner from '../widgets/LoadingSpinner';
@@ -146,6 +147,12 @@ export default class WalletSendForm extends Component<Props, State> {
     this._isMounted = false;
   }
 
+  handleOnSubmit = () => {
+    this.props.openDialogAction({
+      dialog: WalletSendConfirmationDialog,
+    });
+  }
+
   // FORM VALIDATION
   form = new ReactToolboxMobxForm({
     fields: {
@@ -209,7 +216,7 @@ export default class WalletSendForm extends Component<Props, State> {
     const { intl } = this.context;
     const {
       currencyUnit, currencyMaxIntegerDigits, currencyMaxFractionalDigits,
-      openDialogAction, isDialogOpen, isRestoreActive,
+      isDialogOpen, isRestoreActive,
     } = this.props;
     const { isTransactionFeeCalculated, transactionFee, transactionFeeError } = this.state;
     const amountField = form.$('amount');
@@ -253,6 +260,7 @@ export default class WalletSendForm extends Component<Props, State> {
                     receiverField.onChange(value || '');
                   }}
                   skin={<SimpleInputSkin />}
+                  onKeyPress={submitOnEnter.bind(this, this.handleOnSubmit)}
                 />
               </div>
 
@@ -273,15 +281,14 @@ export default class WalletSendForm extends Component<Props, State> {
                   fees={fees}
                   total={total}
                   skin={<AmountInputSkin />}
+                  onKeyPress={submitOnEnter.bind(this, this.handleOnSubmit)}
                 />
               </div>
 
               <Button
                 className={buttonClasses}
                 label={intl.formatMessage(messages.nextButtonLabel)}
-                onMouseUp={() => openDialogAction({
-                  dialog: WalletSendConfirmationDialog,
-                })}
+                onClick={this.handleOnSubmit}
                 disabled={this._isCalculatingFee || !isTransactionFeeCalculated}
                 skin={<SimpleButtonSkin />}
               />

source/renderer/app/components/wallet/ada-redemption/AdaRedemptionForm.js

@@ -26,6 +26,7 @@ import { FORM_VALIDATION_DEBOUNCE_WAIT } from '../../../config/timingConfig';
 import { ADA_REDEMPTION_PASSPHRASE_LENGHT } from '../../../config/cryptoConfig';
 import { ADA_REDEMPTION_TYPES } from '../../../types/redemptionTypes';
 import type { RedemptionTypeChoices } from '../../../types/redemptionTypes';
+import { submitOnEnter } from '../../../utils/form';
 
 const messages = defineMessages({
   headline: {
@@ -522,6 +523,7 @@ export default class AdaRedemptionForm extends Component<Props> {
               <div className={styles.inputs}>
                 {redemptionType !== ADA_REDEMPTION_TYPES.PAPER_VENDED ? (
                   <Input
+                    onKeyPress={submitOnEnter.bind(this, submit)}
                     className="redemption-key"
                     {...redemptionKeyField.bind()}
                     placeholder={
@@ -540,6 +542,7 @@ export default class AdaRedemptionForm extends Component<Props> {
                   />
                 ) : (
                   <Input
+                    onKeyPress={submitOnEnter.bind(this, submit)}
                     className="shielded-redemption-key"
                     {...shieldedRedemptionKeyField.bind()}
                     disabled={isCertificateSelected}
@@ -583,6 +586,7 @@ export default class AdaRedemptionForm extends Component<Props> {
             {walletHasPassword ? (
               <div className={styles.passwordInput}>
                 <Input
+                  onKeyPress={submitOnEnter.bind(this, submit)}
                   className="walletPassword"
                   {...walletPasswordField.bind()}
                   error={walletPasswordField.error}
@@ -610,6 +614,7 @@ export default class AdaRedemptionForm extends Component<Props> {
             {showInputForDecryptionKey ? (
               <div className={styles.decryptionKey}>
                 <Input
+                  onKeyPress={submitOnEnter.bind(this, submit)}
                   className="decryption-key"
                   {...decryptionKeyField.bind()}
                   error={decryptionKeyField.error}
@@ -621,6 +626,7 @@ export default class AdaRedemptionForm extends Component<Props> {
             {showInputsForDecryptingForceVendedCertificate ? (
               <div className={styles.email}>
                 <Input
+                  onKeyPress={submitOnEnter.bind(this, submit)}
                   className="email"
                   {...emailField.bind()}
                   error={emailField.error}
@@ -632,6 +638,7 @@ export default class AdaRedemptionForm extends Component<Props> {
             {showInputsForDecryptingForceVendedCertificate ? (
               <div className={styles.adaPasscode}>
                 <Input
+                  onKeyPress={submitOnEnter.bind(this, submit)}
                   className="ada-passcode"
                   {...adaPasscodeField.bind()}
                   error={adaPasscodeField.error}
@@ -643,6 +650,7 @@ export default class AdaRedemptionForm extends Component<Props> {
             {showInputsForDecryptingForceVendedCertificate ? (
               <div className={styles.adaAmount}>
                 <Input
+                  onKeyPress={submitOnEnter.bind(this, submit)}
                   className="ada-amount"
                   {...adaAmountField.bind()}
                   error={adaAmountField.error}
@@ -656,7 +664,7 @@ export default class AdaRedemptionForm extends Component<Props> {
             <Button
               className={submitButtonClasses}
               label={intl.formatMessage(messages.submitLabel)}
-              onMouseUp={submit}
+              onClick={submit}
               disabled={!canSubmit}
               skin={<SimpleButtonSkin />}
             />

source/renderer/app/components/wallet/etc/WalletSendForm.js

@@ -194,7 +194,7 @@ export default class WalletSendForm extends Component<Props, State> {
           <Button
             className={buttonClasses}
             label={intl.formatMessage(messages.nextButtonLabel)}
-            onMouseUp={() => openDialogAction({
+            onClick={() => openDialogAction({
               dialog: WalletSendConfirmationDialog,
             })}
             // Form can't be submitted in case transaction fees are not calculated

source/renderer/app/components/wallet/settings/ChangeWalletPasswordDialog.js

@@ -15,6 +15,7 @@ import globalMessages from '../../../i18n/global-messages';
 import LocalizableError from '../../../i18n/LocalizableError';
 import styles from './ChangeWalletPasswordDialog.scss';
 import { FORM_VALIDATION_DEBOUNCE_WAIT } from '../../../config/timingConfig';
+import { submitOnEnter } from '../../../utils/form';
 
 const messages = defineMessages({
   dialogTitleSetPassword: {
@@ -267,6 +268,7 @@ export default class ChangeWalletPasswordDialog extends Component<Props, State>
               type="password"
               className="currentPassword"
               value={currentPasswordValue}
+              onKeyPress={submitOnEnter.bind(this, this.submit)}
               onChange={(value) => this.handleDataChange('currentPasswordValue', value)}
               {...currentPasswordField.bind()}
               error={currentPasswordField.error}
@@ -280,6 +282,7 @@ export default class ChangeWalletPasswordDialog extends Component<Props, State>
             type="password"
             className={newPasswordClasses}
             value={newPasswordValue}
+            onKeyPress={submitOnEnter.bind(this, this.submit)}
             onChange={(value) => this.handleDataChange('newPasswordValue', value)}
             {...newPasswordField.bind()}
             error={newPasswordField.error}
@@ -290,6 +293,7 @@ export default class ChangeWalletPasswordDialog extends Component<Props, State>
             type="password"
             className="repeatedPassword"
             value={repeatedPasswordValue}
+            onKeyPress={submitOnEnter.bind(this, this.submit)}
             onChange={(value) => this.handleDataChange('repeatedPasswordValue', value)}
             {...repeatedPasswordField.bind()}
             error={repeatedPasswordField.error}

source/renderer/app/components/wallet/settings/DeleteWalletConfirmationDialog.js

@@ -13,6 +13,7 @@ import styles from './DeleteWalletConfirmationDialog.scss';
 import globalMessages from '../../../i18n/global-messages';
 import environment from '../../../../../common/environment';
 import { DELETE_WALLET_COUNTDOWN } from '../../../config/timingConfig';
+import { submitOnEnter } from '../../../utils/form';
 
 const messages = defineMessages({
   dialogTitle: {
@@ -84,6 +85,10 @@ export default class DeleteWalletConfirmationDialog extends Component<Props> {
     const countdownDisplay = countdownRemaining > 0 ? ` (${countdownRemaining})` : '';
     const isCountdownFinished = countdownRemaining <= 0;
     const isWalletNameConfirmationCorrect = confirmationValue === walletName;
+    const isDisabled = (
+      !isCountdownFinished || !isBackupNoticeAccepted || !isWalletNameConfirmationCorrect
+    );
+    const handleSubmit = () => !isDisabled && onContinue();
 
     const buttonClasses = classnames([
       'deleteButton',
@@ -100,9 +105,7 @@ export default class DeleteWalletConfirmationDialog extends Component<Props> {
         className: buttonClasses,
         label: intl.formatMessage(messages.confirmButtonLabel) + countdownDisplay,
         onClick: onContinue,
-        disabled: (
-          !isCountdownFinished || !isBackupNoticeAccepted || !isWalletNameConfirmationCorrect
-        ),
+        disabled: isDisabled,
         primary: true,
       },
     ];
@@ -131,6 +134,7 @@ export default class DeleteWalletConfirmationDialog extends Component<Props> {
             className={styles.confirmationInput}
             label={intl.formatMessage(messages.enterRecoveryWordLabel)}
             value={confirmationValue}
+            onKeyPress={submitOnEnter.bind(this, handleSubmit)}
             onChange={onConfirmationValueChange}
             skin={<SimpleInputSkin />}
           />