PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Set field validity (ie. border colour) correctly

Browse source 
Changes flagInvalid to forceValidity which can force valid as well
as invalid.
This commit is contained in:
David Baker 2020-06-26 18:50:05 +01:00
parent b74674ced8
commit 24baf19d65
4 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
View file

@ -491,7 +491,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
label={_t("Password")} label={_t("Password")}
value={this.state.accountPassword} value={this.state.accountPassword}
onChange={this._onAccountPasswordChange} onChange={this._onAccountPasswordChange}
flagInvalid={this.state.accountPasswordCorrect === false} forceValidity={this.state.accountPasswordCorrect === false ? false : null}
autoFocus={true} autoFocus={true}
/></div> /></div>
</div>; </div>;

1
src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
View file

@ -298,6 +298,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
label={_t('Security Key')} label={_t('Security Key')}
value={this.state.recoveryKey} value={this.state.recoveryKey}
onChange={this._onRecoveryKeyChange} onChange={this._onRecoveryKeyChange}
forceValidity={this.state.recoveryKeyCorrect}
/> />
</div> </div>
<span className="mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText"> <span className="mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText">

10
src/components/views/elements/Field.tsx
View file

@ -50,7 +50,7 @@ interface IProps {
// to the user. // to the user.
onValidate?: (input: IFieldState) => Promise<IValidationResult>; onValidate?: (input: IFieldState) => Promise<IValidationResult>;
// If specified, overrides the value returned by onValidate. // If specified, overrides the value returned by onValidate.
flagInvalid?: boolean; forceValidity?: boolean;
// If specified, contents will appear as a tooltip on the element and // If specified, contents will appear as a tooltip on the element and
// validation feedback tooltips will be suppressed. // validation feedback tooltips will be suppressed.
tooltipContent?: React.ReactNode; tooltipContent?: React.ReactNode;
@ -203,7 +203,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
public render() { public render() {
const { const {
element, prefixComponent, postfixComponent, className, onValidate, children, 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 // Set some defaults for the <input> element
const ref = input => this.input = input; 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>; 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, { 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 // 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 // don't animate it, as it looks a bit clunky and would add complexity to do
// properly. // properly.
mx_Field_labelAlwaysTopLeft: prefixComponent, 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 mx_Field_invalid: hasValidationFlag
? flagInvalid ? !forceValidity
: onValidate && this.state.valid === false, : onValidate && this.state.valid === false,
}); });

2
src/components/views/settings/SetIdServer.js
View file

@ -413,7 +413,7 @@ export default class SetIdServer extends React.Component {
tooltipContent={this._getTooltip()} tooltipContent={this._getTooltip()}
tooltipClassName="mx_SetIdServer_tooltip" tooltipClassName="mx_SetIdServer_tooltip"
disabled={this.state.busy} disabled={this.state.busy}
flagInvalid={!!this.state.error} forceValidity={this.state.error ? false : null}
/> />
<AccessibleButton type="submit" kind="primary_sm" <AccessibleButton type="submit" kind="primary_sm"
onClick={this._checkIdServer} onClick={this._checkIdServer}