diff --git a/scm-ui/src/users/components/SetUserPassword.js b/scm-ui/src/users/components/SetUserPassword.js index fea841b985..d47336bdef 100644 --- a/scm-ui/src/users/components/SetUserPassword.js +++ b/scm-ui/src/users/components/SetUserPassword.js @@ -1,17 +1,107 @@ // @flow import React from "react"; import type { User } from "@scm-manager/ui-types"; +import { InputField, SubmitButton } from "@scm-manager/ui-components"; +import * as userValidator from "./userValidation"; +import { translate } from "react-i18next"; type Props = { - user: User + user: User, + t: string => string }; -export default class SetUserPassword extends React.Component { +type State = { + password: string, + loading: boolean, + passwordValidationError: boolean, + validatePasswordError: boolean, + validatePassword: string +}; + +class SetUserPassword extends React.Component { + constructor(props: Props) { + super(props); + + this.state = { + password: "", + loading: false, + passwordValidationError: false, + validatePasswordError: false, + validatePassword: "" + }; + } + + isValid = () => { + return !( + this.state.validatePasswordError || this.state.passwordValidationError + ); + }; + + submit = (event: Event) => { + event.preventDefault(); + if (this.isValid()) { + //TODO:hier update pw! + } + }; render() { - + const { user, t } = this.props; + const { loading } = this.state; return ( - "Hey, Change Password!" +
+ + + + ); } + + handlePasswordChange = (password: string) => { + const validatePasswordError = !this.checkPasswords( + password, + this.state.validatePassword + ); + this.setState({ + validatePasswordError: !userValidator.isPasswordValid(password), + passwordValidationError: validatePasswordError, + password: password + }); + }; + + handlePasswordValidationChange = (validatePassword: string) => { + const validatePasswordError = this.checkPasswords( + this.state.password, + validatePassword + ); + this.setState({ + validatePassword, + passwordValidationError: !validatePasswordError + }); + }; + + checkPasswords = (password1: string, password2: string) => { + return password1 === password2; + }; } + +export default translate("users")(SetUserPassword);