decrease "set and repeat"-password related input fields to half-paged

This commit is contained in:
Florian Scholdei
2019-09-19 08:58:49 +02:00
parent 28621916d2
commit 80b51f9668
4 changed files with 68 additions and 44 deletions

View File

@@ -1,7 +1,7 @@
// @flow
import React from "react";
import {translate} from "react-i18next";
import { translate } from "react-i18next";
import InputField from "./InputField";
type State = {
@@ -40,26 +40,30 @@ class PasswordConfirmation extends React.Component<Props, State> {
render() {
const { t } = this.props;
return (
<>
<InputField
label={t("password.newPassword")}
type="password"
onChange={this.handlePasswordChange}
value={this.state.password ? this.state.password : ""}
validationError={!this.state.passwordValid}
errorMessage={t("password.passwordInvalid")}
helpText={t("password.passwordHelpText")}
/>
<InputField
label={t("password.confirmPassword")}
type="password"
onChange={this.handlePasswordValidationChange}
value={this.state ? this.state.confirmedPassword : ""}
validationError={this.state.passwordConfirmationFailed}
errorMessage={t("password.passwordConfirmFailed")}
helpText={t("password.passwordConfirmHelpText")}
/>
</>
<div className="columns is-multiline">
<div className="column is-half">
<InputField
label={t("password.newPassword")}
type="password"
onChange={this.handlePasswordChange}
value={this.state.password ? this.state.password : ""}
validationError={!this.state.passwordValid}
errorMessage={t("password.passwordInvalid")}
helpText={t("password.passwordHelpText")}
/>
</div>
<div className="column is-half">
<InputField
label={t("password.confirmPassword")}
type="password"
onChange={this.handlePasswordValidationChange}
value={this.state ? this.state.confirmedPassword : ""}
validationError={this.state.passwordConfirmationFailed}
errorMessage={t("password.passwordConfirmFailed")}
helpText={t("password.passwordConfirmHelpText")}
/>
</div>
</div>
);
}
@@ -99,7 +103,7 @@ class PasswordConfirmation extends React.Component<Props, State> {
};
isValid = () => {
return this.state.passwordValid && !this.state.passwordConfirmationFailed
return this.state.passwordValid && !this.state.passwordConfirmationFailed;
};
propagateChange = () => {