Switch DeactivateAccountDialog to Field and cleanups

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2019-06-16 10:42:46 +01:00
parent 3563b83762
commit fbe8d1c89b
4 changed files with 11 additions and 13 deletions

View File

@ -60,7 +60,3 @@ limitations under the License.
.mx_InteractiveAuthEntryComponents_passwordSection { .mx_InteractiveAuthEntryComponents_passwordSection {
width: 300px; width: 300px;
} }
.mx_InteractiveAuthEntryComponents_passwordSection input {
width: 100%;
}

View File

@ -22,9 +22,6 @@ limitations under the License.
margin-top: 60px; margin-top: 60px;
} }
.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section input[type=password] { .mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field {
width: 300px; width: 300px;
border: 1px solid $accent-color;
border-radius: 5px;
padding: 10px;
} }

View File

@ -137,6 +137,7 @@ export const PasswordAuthEntry = React.createClass({
<p>{ _t("To continue, please enter your password.") }</p> <p>{ _t("To continue, please enter your password.") }</p>
<form onSubmit={this._onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection"> <form onSubmit={this._onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
<Field <Field
id="mx_InteractiveAuthEntryComponents_password"
className={passwordBoxClass} className={passwordBoxClass}
type="password" type="password"
name="passwordField" name="passwordField"

View File

@ -36,7 +36,7 @@ export default class DeactivateAccountDialog extends React.Component {
this._onEraseFieldChange = this._onEraseFieldChange.bind(this); this._onEraseFieldChange = this._onEraseFieldChange.bind(this);
this.state = { this.state = {
confirmButtonEnabled: false, password: "",
busy: false, busy: false,
shouldErase: false, shouldErase: false,
errStr: null, errStr: null,
@ -45,7 +45,7 @@ export default class DeactivateAccountDialog extends React.Component {
_onPasswordFieldChange(ev) { _onPasswordFieldChange(ev) {
this.setState({ this.setState({
confirmButtonEnabled: Boolean(ev.target.value), password: ev.target.value,
}); });
} }
@ -104,7 +104,7 @@ export default class DeactivateAccountDialog extends React.Component {
} }
const okLabel = this.state.busy ? <Loader /> : _t('Deactivate Account'); const okLabel = this.state.busy ? <Loader /> : _t('Deactivate Account');
const okEnabled = this.state.confirmButtonEnabled && !this.state.busy; const okEnabled = this.state.password && !this.state.busy;
let cancelButton = null; let cancelButton = null;
if (!this.state.busy) { if (!this.state.busy) {
@ -113,6 +113,8 @@ export default class DeactivateAccountDialog extends React.Component {
</button>; </button>;
} }
const Field = sdk.getComponent('elements.Field');
return ( return (
<BaseDialog className="mx_DeactivateAccountDialog" <BaseDialog className="mx_DeactivateAccountDialog"
onFinished={this.props.onFinished} onFinished={this.props.onFinished}
@ -167,10 +169,12 @@ export default class DeactivateAccountDialog extends React.Component {
</p> </p>
<p>{ _t("To continue, please enter your password:") }</p> <p>{ _t("To continue, please enter your password:") }</p>
<input <Field
id="mx_DeactivateAccountDialog_password"
type="password" type="password"
placeholder={_t("password")} label={_t('Password')}
onChange={this._onPasswordFieldChange} onChange={this._onPasswordFieldChange}
value={this.state.password}
ref={(e) => {this._passwordField = e;}} ref={(e) => {this._passwordField = e;}}
className={passwordBoxClass} className={passwordBoxClass}
/> />