diff --git a/scm-ui/src/users/components/PasswordConfirmation.js b/scm-ui/src/users/components/PasswordConfirmation.js new file mode 100644 index 0000000000..f690eabd59 --- /dev/null +++ b/scm-ui/src/users/components/PasswordConfirmation.js @@ -0,0 +1,105 @@ +// @flow + +import React from "react"; +import { InputField } from "@scm-manager/ui-components"; +import { compose } from "redux"; +import { translate } from "react-i18next"; +import * as userValidator from "./userValidation"; + +type State = { + password: string, + confirmedPassword: string, + passwordValid: boolean, + passwordConfirmationFailed: boolean +}; +type Props = { + passwordChanged: string => void, + password: string, + // Context props + t: string => string +}; + +class PasswordConfirmation extends React.Component { + constructor(props: Props) { + super(props); + this.state = { + password: "", + confirmedPassword: "", + passwordValid: true, + passwordConfirmationFailed: false + }; + } + + componentDidMount() { + this.setState({ + password: "", + confirmedPassword: "", + passwordValid: true, + passwordConfirmationFailed: false + }); + } + + render() { + const { t } = this.props; + return ( + <> + + + + ); + } + + handlePasswordValidationChange = (confirmedPassword: string) => { + const passwordConfirmed = this.state.password === confirmedPassword; + + this.setState( + { + confirmedPassword, + passwordConfirmationFailed: !passwordConfirmed + }, + this.propagateChange + ); + }; + + handlePasswordChange = (password: string) => { + const passwordConfirmationFailed = + password !== this.state.confirmedPassword; + + this.setState( + { + passwordValid: userValidator.isPasswordValid(password), + passwordConfirmationFailed, + password: password + }, + this.propagateChange + ); + }; + + propagateChange = () => { + if ( + this.state.password && + this.state.passwordValid && + !this.state.passwordConfirmationFailed + ) { + this.props.passwordChanged(this.state.password); + } + }; +} + +export default compose(translate("users"))(PasswordConfirmation); diff --git a/scm-ui/src/users/components/SetUserPassword.js b/scm-ui/src/users/components/SetUserPassword.js index 76afbea5da..66b8c9d34e 100644 --- a/scm-ui/src/users/components/SetUserPassword.js +++ b/scm-ui/src/users/components/SetUserPassword.js @@ -2,14 +2,13 @@ import React from "react"; import type { User } from "@scm-manager/ui-types"; import { - InputField, SubmitButton, Notification, ErrorNotification } from "@scm-manager/ui-components"; -import * as userValidator from "./userValidation"; import { translate } from "react-i18next"; import { setPassword } from "./changePassword"; +import PasswordConfirmation from "./PasswordConfirmation"; type Props = { user: User, @@ -19,9 +18,6 @@ type Props = { type State = { password: string, loading: boolean, - passwordConfirmationError: boolean, - validatePasswordError: boolean, - validatePassword: string, error?: Error, passwordChanged: boolean }; @@ -40,12 +36,6 @@ class SetUserPassword extends React.Component { }; } - passwordIsValid = () => { - return !( - this.state.validatePasswordError || this.state.passwordConfirmationError - ); - }; - setLoadingState = () => { this.setState({ ...this.state, @@ -66,16 +56,13 @@ class SetUserPassword extends React.Component { ...this.state, loading: false, passwordChanged: true, - password: "", - validatePassword: "", - validatePasswordError: false, - passwordConfirmationError: false + password: "" }); }; submit = (event: Event) => { event.preventDefault(); - if (this.passwordIsValid()) { + if (this.state.password) { const { user } = this.props; const { password } = this.state; this.setLoadingState(); @@ -92,6 +79,7 @@ class SetUserPassword extends React.Component { }; render() { + console.log("RENDER"); const { t } = this.props; const { loading, passwordChanged, error } = this.state; @@ -112,26 +100,12 @@ class SetUserPassword extends React.Component { return (
{message} - - @@ -139,31 +113,8 @@ class SetUserPassword extends React.Component { ); } - handlePasswordChange = (password: string) => { - const validatePasswordError = !this.checkPasswords( - password, - this.state.validatePassword - ); - this.setState({ - validatePasswordError: !userValidator.isPasswordValid(password), - passwordConfirmationError: validatePasswordError, - password: password - }); - }; - - handlePasswordValidationChange = (validatePassword: string) => { - const passwordConfirmed = this.checkPasswords( - this.state.password, - validatePassword - ); - this.setState({ - validatePassword, - passwordConfirmationError: !passwordConfirmed - }); - }; - - checkPasswords = (password1: string, password2: string) => { - return password1 === password2; + passwordChanged = (password: string) => { + this.setState({ ...this.state, password }); }; onClose = () => {