add validation

scm-ui/public/locales/en/users.json

@@ -38,5 +38,13 @@
     "actions-label": "Actions",
     "information-label": "Information",
     "back-label": "Back"
+  },
+  "validation": {
+    "mail-invalid": "This email is invalid",
+    "name-invalid": "This name is invalid",
+    "displayname-invalid": "This displayname is invalid",
+    "password-invalid": "Password has to be at least six characters",
+    "passwordValidation-invalid": "Passwords have to be the same",
+    "validatePassword": "Please validate password here"
   }
 }

scm-ui/src/components/forms/InputField.js

@@ -1,5 +1,6 @@
 //@flow
 import React from "react";
+import classNames from "classnames";
 
 type Props = {
   label?: string,
@@ -7,7 +8,9 @@ type Props = {
   value?: string,
   type?: string,
   autofocus?: boolean,
-  onChange: string => void
+  onChange: string => void,
+  validationError: boolean,
+  errorMessage: string
 };
 
 class InputField extends React.Component<Props> {
@@ -37,8 +40,9 @@ class InputField extends React.Component<Props> {
   };
 
   render() {
-    const { type, placeholder, value } = this.props;
-
+    const { type, placeholder, value, validationError, errorMessage } = this.props;
+    const errorView = validationError ? "is-danger" : "";
+    const helper = validationError ? <p className="help is-danger">{errorMessage}</p> : "";
     return (
       <div className="field">
         {this.renderLabel()}
@@ -47,13 +51,17 @@ class InputField extends React.Component<Props> {
             ref={input => {
               this.field = input;
             }}
-            className="input"
+            className={ classNames(
+              "input",
+              errorView
+            )}
             type={type}
             placeholder={placeholder}
             value={value}
             onChange={this.handleInput}
           />
         </div>
+        {helper}
       </div>
     );
   }

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

@@ -11,10 +11,23 @@ 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 = {
+      user: {
         name: "",
         displayName: "",
         mail: "",
@@ -22,22 +35,30 @@ class UserForm extends React.Component<Props, User> {
         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 });
+    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} });
   };
 }