Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 15:05:44 +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

12
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,7 +40,8 @@ class PasswordConfirmation extends React.Component<Props, State> {
render() { render() {
const { t } = this.props; const { t } = this.props;
return ( return (
<> <div className="columns is-multiline">
<div className="column is-half">
<InputField <InputField
label={t("password.newPassword")} label={t("password.newPassword")}
type="password" type="password"
@@ -50,6 +51,8 @@ class PasswordConfirmation extends React.Component<Props, State> {
errorMessage={t("password.passwordInvalid")} errorMessage={t("password.passwordInvalid")}
helpText={t("password.passwordHelpText")} helpText={t("password.passwordHelpText")}
/> />
</div>
<div className="column is-half">
<InputField <InputField
label={t("password.confirmPassword")} label={t("password.confirmPassword")}
type="password" type="password"
@@ -59,7 +62,8 @@ class PasswordConfirmation extends React.Component<Props, State> {
errorMessage={t("password.passwordConfirmFailed")} errorMessage={t("password.passwordConfirmFailed")}
helpText={t("password.passwordConfirmHelpText")} 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 = () => {

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

@@ -110,6 +110,8 @@ class ChangeUserPassword extends React.Component<Props, State> {
return ( return (
<form onSubmit={this.submit}> <form onSubmit={this.submit}>
{message} {message}
<div className="columns">
<div className="column">
<InputField <InputField
label={t("password.currentPassword")} label={t("password.currentPassword")}
type="password" type="password"
@@ -119,21 +121,31 @@ class ChangeUserPassword extends React.Component<Props, State> {
value={this.state.oldPassword ? this.state.oldPassword : ""} value={this.state.oldPassword ? this.state.oldPassword : ""}
helpText={t("password.currentPasswordHelpText")} 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"}
/> />
<div className="columns">
<div className="column">
<SubmitButton <SubmitButton
disabled={!this.isValid()} disabled={!this.isValid()}
loading={loading} loading={loading}
label={t("password.submit")} 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 = () => {

10
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"}
/> />
<div className="columns">
<div className="column">
<SubmitButton <SubmitButton
disabled={!this.state.passwordValid} disabled={!this.state.passwordValid}
loading={loading} loading={loading}
label={t("singleUserPassword.button")} 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}