[DDW-173] - Button should be disabled when there is nothing to submit

CHANGELOG.md

@@ -5,6 +5,7 @@ Changelog
 
 ### Fixes
 
+- Disabled button on forms when there is nothing to submit ([PR 1998](https://github.com/input-output-hk/daedalus/pull/1998))
 - Fixed system locale detection ([PR 2009](https://github.com/input-output-hk/daedalus/pull/2009))
 
 ## 1.1.0-FC1

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

@@ -142,9 +142,11 @@ export default class WalletCreateDialog extends Component<Props, State> {
           validators: [
             ({ field, form }) => {
               const repeatPasswordField = form.$('repeatPassword');
-              if (repeatPasswordField.value.length > 0) {
-                repeatPasswordField.validate({ showErrors: true });
-              }
+              const isRepeatPasswordFieldSet =
+                repeatPasswordField.value.length > 0;
+              repeatPasswordField.validate({
+                showErrors: isRepeatPasswordFieldSet,
+              });
               return [
                 isValidSpendingPassword(field.value),
                 this.context.intl.formatMessage(
@@ -164,7 +166,6 @@ export default class WalletCreateDialog extends Component<Props, State> {
           validators: [
             ({ field, form }) => {
               const spendingPassword = form.$('spendingPassword').value;
-              if (spendingPassword.length === 0) return [true];
               return [
                 isValidRepeatPassword(spendingPassword, field.value),
                 this.context.intl.formatMessage(
@@ -211,9 +212,16 @@ export default class WalletCreateDialog extends Component<Props, State> {
     const { isSubmitting } = this.state;
     const dialogClasses = classnames([styles.component, 'WalletCreateDialog']);
 
+    const walletNameField = form.$('walletName');
+    const spendingPasswordField = form.$('spendingPassword');
+    const repeatedPasswordField = form.$('repeatPassword');
+
+    const canSubmit = !isSubmitting && form.isValid;
+
     const actions = [
       {
         className: isSubmitting ? styles.isSubmitting : null,
+        disabled: !canSubmit,
         label: this.context.intl.formatMessage(
           isIncentivizedTestnet
             ? messages.createPersonalWalletItn
@@ -224,10 +232,6 @@ export default class WalletCreateDialog extends Component<Props, State> {
       },
     ];
 
-    const walletNameField = form.$('walletName');
-    const spendingPasswordField = form.$('spendingPassword');
-    const repeatedPasswordField = form.$('repeatPassword');
-
     return (
       <Dialog
         className={dialogClasses}

source/renderer/app/components/wallet/receive/WalletReceiveRandom.js

@@ -200,6 +200,9 @@ export default class WalletReceiveRandom extends Component<Props, State> {
     ]);
 
     const passwordField = form.$('spendingPassword');
+
+    const canSubmit = !isSubmitting && passwordField.value;
+
     const generateAddressForm = (
       <div className={generateAddressWrapperClasses}>
         {walletHasPassword && (
@@ -217,6 +220,7 @@ export default class WalletReceiveRandom extends Component<Props, State> {
 
         <Button
           className={generateAddressButtonClasses}
+          disabled={!canSubmit}
           label={intl.formatMessage(messages.generateNewAddressButtonLabel)}
           skin={ButtonSkin}
           onClick={this.submit}

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

@@ -110,6 +110,20 @@ export default class ChangeSpendingPasswordDialog extends Component<Props> {
             messages.currentPasswordFieldPlaceholder
           ),
           value: '',
+          validators: [
+            ({ form }) => {
+              if (this.props.isSpendingPasswordSet) {
+                const currentPasswordField = form.$('currentPassword');
+                return [
+                  currentPasswordField.value.length > 0,
+                  this.context.intl.formatMessage(
+                    globalMessages.invalidSpendingPassword
+                  ),
+                ];
+              }
+              return [true];
+            },
+          ],
         },
         spendingPassword: {
           type: 'password',
@@ -127,9 +141,11 @@ export default class ChangeSpendingPasswordDialog extends Component<Props> {
           validators: [
             ({ field, form }) => {
               const repeatPasswordField = form.$('repeatPassword');
-              if (repeatPasswordField.value.length > 0) {
-                repeatPasswordField.validate({ showErrors: true });
-              }
+              const isRepeatPasswordFieldSet =
+                repeatPasswordField.value.length > 0;
+              repeatPasswordField.validate({
+                showErrors: isRepeatPasswordFieldSet,
+              });
               return [
                 isValidSpendingPassword(field.value),
                 this.context.intl.formatMessage(
@@ -149,7 +165,6 @@ export default class ChangeSpendingPasswordDialog extends Component<Props> {
           validators: [
             ({ field, form }) => {
               const spendingPassword = form.$('spendingPassword').value;
-              if (spendingPassword.length === 0) return [true];
               return [
                 isValidRepeatPassword(spendingPassword, field.value),
                 this.context.intl.formatMessage(
@@ -165,6 +180,7 @@ export default class ChangeSpendingPasswordDialog extends Component<Props> {
       options: {
         validateOnChange: true,
         validationDebounceWait: FORM_VALIDATION_DEBOUNCE_WAIT,
+        showErrorsOnClear: true,
       },
     }
   );
@@ -214,19 +230,25 @@ export default class ChangeSpendingPasswordDialog extends Component<Props> {
 
     const newPasswordClasses = classnames(['newPassword', styles.newPassword]);
 
+    const currentPasswordField = form.$('currentPassword');
+    const newPasswordField = form.$('spendingPassword');
+    const repeatedPasswordField = form.$('repeatPassword');
+
+    const canSubmit = !isSubmitting && form.isValid;
+
+    const currentPasswordError =
+      canSubmit && error && error.code === 'wrong_encryption_passphrase';
+
     const actions = [
       {
+        className: confirmButtonClasses,
+        disabled: !canSubmit,
         label: intl.formatMessage(globalMessages.save),
         onClick: this.submit,
         primary: true,
-        className: confirmButtonClasses,
       },
     ];
 
-    const currentPasswordField = form.$('currentPassword');
-    const newPasswordField = form.$('spendingPassword');
-    const repeatedPasswordField = form.$('repeatPassword');
-
     return (
       <Dialog
         title={intl.formatMessage(
@@ -255,7 +277,7 @@ export default class ChangeSpendingPasswordDialog extends Component<Props> {
                 this.handleDataChange('currentPasswordValue', value)
               }
               {...currentPasswordField.bind()}
-              error={currentPasswordField.error}
+              error={currentPasswordField.error || currentPasswordError}
               skin={InputSkin}
             />
           )}

source/renderer/app/components/wallet/wallet-restore/ConfigurationDialog.js

@@ -128,9 +128,11 @@ export default class ConfigurationDialog extends Component<Props> {
           validators: [
             ({ field, form }) => {
               const repeatPasswordField = form.$('repeatPassword');
-              if (repeatPasswordField.value.length > 0) {
-                repeatPasswordField.validate({ showErrors: true });
-              }
+              const isRepeatPasswordFieldSet =
+                repeatPasswordField.value.length > 0;
+              repeatPasswordField.validate({
+                showErrors: isRepeatPasswordFieldSet,
+              });
               return [
                 isValidSpendingPassword(field.value),
                 this.context.intl.formatMessage(
@@ -153,7 +155,6 @@ export default class ConfigurationDialog extends Component<Props> {
           validators: [
             ({ field, form }) => {
               const spendingPassword = form.$('spendingPassword').value;
-              if (spendingPassword.length === 0) return [true];
               return [
                 isValidRepeatPassword(spendingPassword, field.value),
                 this.context.intl.formatMessage(
@@ -221,12 +222,15 @@ export default class ConfigurationDialog extends Component<Props> {
       'repeatPassword',
     ]);
 
+    const canSubmit = !isSubmitting && form.isValid;
+
     return (
       <WalletRestoreDialog
         stepNumber={2}
         actions={[
           {
             className: isSubmitting ? styles.isSubmitting : null,
+            disabled: !canSubmit,
             primary: true,
             label: intl.formatMessage(messages.continueButtonLabel),
             onClick: this.submit,

source/renderer/app/components/wallet/wallet-restore/MnemonicsDialog.js

@@ -134,12 +134,19 @@ export default class MnemonicsDialog extends Component<Props> {
       expectedWordCount,
     } = this.props;
     const recoveryPhraseField = this.form.$('recoveryPhrase');
+
+    const wordCount = mnemonics.length;
+    const isPhraseComplete = Array.isArray(expectedWordCount)
+      ? expectedWordCount.includes(wordCount)
+      : wordCount === expectedWordCount;
+
     return (
       <WalletRestoreDialog
         stepNumber={1}
         actions={[
           {
             primary: true,
+            disabled: !isPhraseComplete,
             label: intl.formatMessage(messages.continueButtonLabel),
             onClick: this.submit,
           },