fixed password validation in ui

scm-ui-components/packages/ui-components/src/forms/PasswordConfirmation.js

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

scm-ui/src/containers/ChangeUserPassword.js

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

scm-ui/src/users/components/SetUserPassword.js

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

scm-ui/src/users/components/UserForm.js

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