mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 17:56:01 +03:00
Code Issues Projects Releases Packages Wiki Activity

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}