From 24baf19d6528cae719cedde35d3588b178f15421 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 26 Jun 2020 18:50:05 +0100
Subject: [PATCH] Set field validity (ie. border colour) correctly

Changes flagInvalid to forceValidity which can force valid as well
as invalid.
---
 .../dialogs/secretstorage/CreateSecretStorageDialog.js |  2 +-
 .../dialogs/secretstorage/AccessSecretStorageDialog.js |  1 +
 src/components/views/elements/Field.tsx                | 10 +++++-----
 src/components/views/settings/SetIdServer.js           |  2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
index 58b5b57354..984158c7a2 100644
--- a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
+++ b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
@@ -491,7 +491,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                     label={_t("Password")}
                     value={this.state.accountPassword}
                     onChange={this._onAccountPasswordChange}
-                    flagInvalid={this.state.accountPasswordCorrect === false}
+                    forceValidity={this.state.accountPasswordCorrect === false ? false : null}
                     autoFocus={true}
                 /></div>
             </div>;
diff --git a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
index 3141cfb33b..5029856f26 100644
--- a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
+++ b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
@@ -298,6 +298,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                                 label={_t('Security Key')}
                                 value={this.state.recoveryKey}
                                 onChange={this._onRecoveryKeyChange}
+                                forceValidity={this.state.recoveryKeyCorrect}
                             />
                         </div>
                         <span className="mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText">
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 834edff7df..9a889a0351 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -50,7 +50,7 @@ interface IProps {
     // to the user.
     onValidate?: (input: IFieldState) => Promise<IValidationResult>;
     // If specified, overrides the value returned by onValidate.
-    flagInvalid?: boolean;
+    forceValidity?: boolean;
     // If specified, contents will appear as a tooltip on the element and
     // validation feedback tooltips will be suppressed.
     tooltipContent?: React.ReactNode;
@@ -203,7 +203,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
     public render() {
         const {
             element, prefixComponent, postfixComponent, className, onValidate, children,
-            tooltipContent, flagInvalid, tooltipClassName, list, ...inputProps} = this.props;
+            tooltipContent, forceValidity, tooltipClassName, list, ...inputProps} = this.props;
 
         // Set some defaults for the <input> element
         const ref = input => this.input = input;
@@ -228,15 +228,15 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
             postfixContainer = <span className="mx_Field_postfix">{postfixComponent}</span>;
         }
 
-        const hasValidationFlag = flagInvalid !== null && flagInvalid !== undefined;
+        const hasValidationFlag = forceValidity !== null && forceValidity !== undefined;
         const fieldClasses = classNames("mx_Field", `mx_Field_${this.props.element}`, className, {
             // If we have a prefix element, leave the label always at the top left and
             // don't animate it, as it looks a bit clunky and would add complexity to do
             // properly.
             mx_Field_labelAlwaysTopLeft: prefixComponent,
-            mx_Field_valid: onValidate && this.state.valid === true,
+            mx_Field_valid: hasValidationFlag ? forceValidity : onValidate && this.state.valid === true,
             mx_Field_invalid: hasValidationFlag
-                ? flagInvalid
+                ? !forceValidity
                 : onValidate && this.state.valid === false,
         });
 
diff --git a/src/components/views/settings/SetIdServer.js b/src/components/views/settings/SetIdServer.js
index 23e72e2352..e05fe4f1c3 100644
--- a/src/components/views/settings/SetIdServer.js
+++ b/src/components/views/settings/SetIdServer.js
@@ -413,7 +413,7 @@ export default class SetIdServer extends React.Component {
                     tooltipContent={this._getTooltip()}
                     tooltipClassName="mx_SetIdServer_tooltip"
                     disabled={this.state.busy}
-                    flagInvalid={!!this.state.error}
+                    forceValidity={this.state.error ? false : null}
                 />
                 <AccessibleButton type="submit" kind="primary_sm"
                     onClick={this._checkIdServer}