add validation

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

@@ -11,33 +11,54 @@ type Props = {
   t: string => string
 };
 
-class UserForm extends React.Component<Props, User> {
+type State = {
+  user: User,
+  mailValidationError: boolean,
+  nameValidationError: boolean,
+  displayNameValidationError: boolean,
+  passwordValidationError: boolean,
+  validatePasswordError: boolean,
+  validatePassword: string
+};
+
+
+class UserForm extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
+    
     this.state = {
-      name: "",
-      displayName: "",
-      mail: "",
-      password: "",
-      admin: false,
-      active: false,
-      _links: {}
+      user: {
+        name: "",
+        displayName: "",
+        mail: "",
+        password: "",
+        admin: false,
+        active: false,
+        _links: {}
+      },
+      mailValidationError: false,
+      displayNameValidationError: false,
+      nameValidationError: false,
+      passwordValidationError: false,
+      validatePasswordError: false,
+      validatePassword: ""
     };
   }
 
   componentDidMount() {
-    this.setState({ ...this.props.user });
+    this.setState({ user: {...this.props.user} });
   }
 
   submit = (event: Event) => {
     event.preventDefault();
-    this.props.submitForm(this.state);
+    this.props.submitForm(this.state.user);
   };
 
   render() {
     const { t } = this.props;
-    const user = this.state;
-
+    const user = this.state.user;
+    const ButtonClickable = (this.state.validatePasswordError || this.state.nameValidationError || this.state.mailValidationError || this.state.validatePasswordError
+    || this.state.displayNameValidationError || user.name === undefined|| user.displayName === undefined);
     let nameField = null;
     if (!this.props.user) {
       nameField = (
@@ -45,6 +66,8 @@ class UserForm extends React.Component<Props, User> {
           label={t("user.name")}
           onChange={this.handleUsernameChange}
           value={user ? user.name : ""}
+          validationError= {this.state.nameValidationError}
+          errorMessage= {t("validation.name-invalid")}
         />
       );
     }
@@ -55,17 +78,31 @@ class UserForm extends React.Component<Props, User> {
           label={t("user.displayName")}
           onChange={this.handleDisplayNameChange}
           value={user ? user.displayName : ""}
+          validationError={this.state.displayNameValidationError}
+          errorMessage={t("validation.displayname-invalid")}
         />
         <InputField
           label={t("user.mail")}
           onChange={this.handleEmailChange}
           value={user ? user.mail : ""}
+          validationError= {this.state.mailValidationError}
+          errorMessage={t("validation.mail-invalid")}
         />
         <InputField
           label={t("user.password")}
           type="password"
           onChange={this.handlePasswordChange}
           value={user ? user.password : ""}
+          validationError={this.state.validatePasswordError}
+          errorMessage={t("validation.password-invalid")}
+        />
+        <InputField
+          label={t("validation.validatePassword")}
+          type="password"
+          onChange={this.handlePasswordValidationChange}
+          value={this.state ? this.state.validatePassword : ""}
+          validationError={this.state.passwordValidationError}
+          errorMessage={t("validation.passwordValidation-invalid")}
         />
         <Checkbox
           label={t("user.admin")}
@@ -77,33 +114,47 @@ class UserForm extends React.Component<Props, User> {
           onChange={this.handleActiveChange}
           checked={user ? user.active : false}
         />
-        <SubmitButton label={t("user-form.submit")} />
+        <SubmitButton disabled={ButtonClickable} label={t("user-form.submit")} />
       </form>
     );
   }
 
+  
   handleUsernameChange = (name: string) => {
-    this.setState({ name });
+    const REGEX_NAME = /^[^ ][A-z0-9\\.\-_@ ]*[^ ]$/;
+    this.setState(  {nameValidationError: !REGEX_NAME.test(name),  user : {...this.state.user, name} } );
   };
 
-  handleDisplayNameChange = (displayName: string) => {
-    this.setState({ displayName });
+  handleDisplayNameChange = (displayName: string) => {    
+    const REGEX_NAME = /^[^ ][A-z0-9\\.\-_@ ]*[^ ]$/;
+    this.setState({displayNameValidationError: !REGEX_NAME.test(displayName),  user : {...this.state.user, displayName} } );
   };
 
   handleEmailChange = (mail: string) => {
-    this.setState({ mail });
+    const REGEX_MAIL = /^[A-z0-9][\w.-]*@[A-z0-9][\w\-\\.]*\.[A-z0-9][A-z0-9-]+$/;
+    this.setState(  {mailValidationError: !REGEX_MAIL.test(mail),  user : {...this.state.user, mail} } );
   };
 
   handlePasswordChange = (password: string) => {
-    this.setState({ password });
+    const validatePasswordError = !this.checkPasswords(password, this.state.validatePassword);
+    this.setState(  {validatePasswordError: (password.length < 6) || (password.length > 32),  passwordValidationError: validatePasswordError, user : {...this.state.user, password} } );
   };
 
+  handlePasswordValidationChange = (validatePassword: string) => {
+    const validatePasswordError = this.checkPasswords(this.state.user.password, validatePassword)
+    this.setState({ validatePassword, passwordValidationError: !validatePasswordError });
+  };
+
+  checkPasswords = (password1: string, password2: string) => {
+    return (password1 === password2);
+  }
+
   handleAdminChange = (admin: boolean) => {
-    this.setState({ admin });
+    this.setState({ user : {...this.state.user, admin} });
   };
 
   handleActiveChange = (active: boolean) => {
-    this.setState({ active });
+    this.setState({ user : {...this.state.user, active} });
   };
 }