fixed password validation in ui

This commit is contained in:
Sebastian Sdorra
2018-12-06 12:00:30 +01:00
parent 226dc75ddc
commit 2c0d40c184
4 changed files with 32 additions and 24 deletions

View File

@@ -11,7 +11,7 @@ type State = {
passwordConfirmationFailed: boolean passwordConfirmationFailed: boolean
}; };
type Props = { type Props = {
passwordChanged: string => void, passwordChanged: (string, boolean) => void,
passwordValidator?: string => boolean, passwordValidator?: string => boolean,
// Context props // Context props
t: string => string t: string => string
@@ -98,14 +98,12 @@ class PasswordConfirmation extends React.Component<Props, State> {
); );
}; };
isValid = () => {
return this.state.passwordValid && !this.state.passwordConfirmationFailed
};
propagateChange = () => { propagateChange = () => {
if ( this.props.passwordChanged(this.state.password, this.isValid());
this.state.password &&
this.state.passwordValid &&
!this.state.passwordConfirmationFailed
) {
this.props.passwordChanged(this.state.password);
}
}; };
} }

View File

@@ -21,7 +21,8 @@ type State = {
password: string, password: string,
loading: boolean, loading: boolean,
error?: Error, error?: Error,
passwordChanged: boolean passwordChanged: boolean,
passwordValid: boolean
}; };
class ChangeUserPassword extends React.Component<Props, State> { class ChangeUserPassword extends React.Component<Props, State> {
@@ -35,7 +36,8 @@ class ChangeUserPassword extends React.Component<Props, State> {
passwordConfirmationError: false, passwordConfirmationError: false,
validatePasswordError: false, validatePasswordError: false,
validatePassword: "", validatePassword: "",
passwordChanged: false passwordChanged: false,
passwordValid: false
}; };
} }
@@ -83,6 +85,10 @@ class ChangeUserPassword extends React.Component<Props, State> {
} }
}; };
isValid = () => {
return this.state.oldPassword && this.state.passwordValid;
};
render() { render() {
const { t } = this.props; const { t } = this.props;
const { loading, passwordChanged, error } = this.state; const { loading, passwordChanged, error } = this.state;
@@ -118,7 +124,7 @@ class ChangeUserPassword extends React.Component<Props, State> {
key={this.state.passwordChanged ? "changed" : "unchanged"} key={this.state.passwordChanged ? "changed" : "unchanged"}
/> />
<SubmitButton <SubmitButton
disabled={!this.state.password} disabled={!this.isValid()}
loading={loading} loading={loading}
label={t("password.submit")} label={t("password.submit")}
/> />
@@ -126,8 +132,8 @@ class ChangeUserPassword extends React.Component<Props, State> {
); );
} }
passwordChanged = (password: string) => { passwordChanged = (password: string, passwordValid: boolean) => {
this.setState({ ...this.state, password }); this.setState({ ...this.state, password, passwordValid: (!!password && passwordValid) });
}; };
onClose = () => { onClose = () => {

View File

@@ -19,7 +19,8 @@ type State = {
password: string, password: string,
loading: boolean, loading: boolean,
error?: Error, error?: Error,
passwordChanged: boolean passwordChanged: boolean,
passwordValid: boolean
}; };
class SetUserPassword extends React.Component<Props, State> { class SetUserPassword extends React.Component<Props, State> {
@@ -32,7 +33,8 @@ class SetUserPassword extends React.Component<Props, State> {
passwordConfirmationError: false, passwordConfirmationError: false,
validatePasswordError: false, validatePasswordError: false,
validatePassword: "", validatePassword: "",
passwordChanged: false passwordChanged: false,
passwordValid: false
}; };
} }
@@ -104,7 +106,7 @@ class SetUserPassword extends React.Component<Props, State> {
key={this.state.passwordChanged ? "changed" : "unchanged"} key={this.state.passwordChanged ? "changed" : "unchanged"}
/> />
<SubmitButton <SubmitButton
disabled={!this.state.password} disabled={!this.state.passwordValid}
loading={loading} loading={loading}
label={t("user-form.submit")} label={t("user-form.submit")}
/> />
@@ -112,8 +114,8 @@ class SetUserPassword extends React.Component<Props, State> {
); );
} }
passwordChanged = (password: string) => { passwordChanged = (password: string, passwordValid: boolean) => {
this.setState({ ...this.state, password }); this.setState({ ...this.state, password, passwordValid: (!!password && passwordValid) });
}; };
onClose = () => { onClose = () => {

View File

@@ -22,7 +22,8 @@ type State = {
user: User, user: User,
mailValidationError: boolean, mailValidationError: boolean,
nameValidationError: boolean, nameValidationError: boolean,
displayNameValidationError: boolean displayNameValidationError: boolean,
passwordValid: boolean
}; };
class UserForm extends React.Component<Props, State> { class UserForm extends React.Component<Props, State> {
@@ -41,7 +42,8 @@ class UserForm extends React.Component<Props, State> {
}, },
mailValidationError: false, mailValidationError: false,
displayNameValidationError: false, displayNameValidationError: false,
nameValidationError: false nameValidationError: false,
passwordValid: false
}; };
} }
@@ -61,7 +63,6 @@ class UserForm extends React.Component<Props, State> {
isValid = () => { isValid = () => {
const user = this.state.user; const user = this.state.user;
const passwordValid = this.props.user ? !this.isFalsy(user.password) : true;
return !( return !(
this.state.nameValidationError || this.state.nameValidationError ||
this.state.mailValidationError || this.state.mailValidationError ||
@@ -69,7 +70,7 @@ class UserForm extends React.Component<Props, State> {
this.isFalsy(user.name) || this.isFalsy(user.name) ||
this.isFalsy(user.displayName) || this.isFalsy(user.displayName) ||
this.isFalsy(user.mail) || this.isFalsy(user.mail) ||
passwordValid !this.state.passwordValid
); );
}; };
@@ -166,9 +167,10 @@ class UserForm extends React.Component<Props, State> {
}); });
}; };
handlePasswordChange = (password: string) => { handlePasswordChange = (password: string, passwordValid: boolean) => {
this.setState({ this.setState({
user: { ...this.state.user, password } user: { ...this.state.user, password },
passwordValid: !this.isFalsy(password) && passwordValid
}); });
}; };