Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 06:55:47 +01:00
Code Issues Packages Projects Releases Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

48
scm-ui-components/packages/ui-components/src/forms/PasswordConfirmation.js
View File

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

42
scm-ui/src/containers/ChangeUserPassword.js
View File

@@ -110,30 +110,42 @@ class ChangeUserPassword extends React.Component<Props, State> {
return ( return (
<form onSubmit={this.submit}> <form onSubmit={this.submit}>
{message} {message}
<InputField <div className="columns">
label={t("password.currentPassword")} <div className="column">
type="password" <InputField
onChange={oldPassword => label={t("password.currentPassword")}
this.setState({ ...this.state, oldPassword }) type="password"
} onChange={oldPassword =>
value={this.state.oldPassword ? this.state.oldPassword : ""} this.setState({ ...this.state, oldPassword })
helpText={t("password.currentPasswordHelpText")} }
/> value={this.state.oldPassword ? this.state.oldPassword : ""}
helpText={t("password.currentPasswordHelpText")}
/>
</div>
</div>
<PasswordConfirmation <PasswordConfirmation
passwordChanged={this.passwordChanged} passwordChanged={this.passwordChanged}
key={this.state.passwordChanged ? "changed" : "unchanged"} key={this.state.passwordChanged ? "changed" : "unchanged"}
/> />
<SubmitButton <div className="columns">
disabled={!this.isValid()} <div className="column">
loading={loading} <SubmitButton
label={t("password.submit")} disabled={!this.isValid()}
/> loading={loading}
label={t("password.submit")}
/>
</div>
</div>
</form> </form>
); );
} }
passwordChanged = (password: string, passwordValid: boolean) => { passwordChanged = (password: string, passwordValid: boolean) => {
this.setState({ ...this.state, password, passwordValid: (!!password && passwordValid) }); this.setState({
...this.state,
password,
passwordValid: !!password && passwordValid
});
}; };
onClose = () => { onClose = () => {

20
scm-ui/src/users/components/SetUserPassword.js
View File

@@ -105,17 +105,25 @@ class SetUserPassword extends React.Component<Props, State> {
passwordChanged={this.passwordChanged} passwordChanged={this.passwordChanged}
key={this.state.passwordChanged ? "changed" : "unchanged"} key={this.state.passwordChanged ? "changed" : "unchanged"}
/> />
<SubmitButton <div className="columns">
disabled={!this.state.passwordValid} <div className="column">
loading={loading} <SubmitButton
label={t("singleUserPassword.button")} disabled={!this.state.passwordValid}
/> loading={loading}
label={t("singleUserPassword.button")}
/>
</div>
</div>
</form> </form>
); );
} }
passwordChanged = (password: string, passwordValid: boolean) => { passwordChanged = (password: string, passwordValid: boolean) => {
this.setState({ ...this.state, password, passwordValid: (!!password && passwordValid) }); this.setState({
...this.state,
password,
passwordValid: !!password && passwordValid
});
}; };
onClose = () => { onClose = () => {

2
scm-ui/src/users/components/UserForm.js
View File

@@ -162,9 +162,9 @@ class UserForm extends React.Component<Props, State> {
/> />
</div> </div>
</div> </div>
{passwordChangeField}
<div className="columns"> <div className="columns">
<div className="column"> <div className="column">
{passwordChangeField}
<Checkbox <Checkbox
label={t("user.active")} label={t("user.active")}
onChange={this.handleActiveChange} onChange={this.handleActiveChange}