validate memeber name, before adding to group

scm-ui/src/groups/components/AddMemberField.js

@@ -4,7 +4,7 @@ import React from "react";
 import { translate } from "react-i18next";
 import AddButton from "../../components/buttons/AddButton";
 import InputField from "../../components/forms/InputField";
-import { isMemberNameValid } from "./groupValidation"
+import { isMemberNameValid } from "./groupValidation";
 
 type Props = {
   t: string => string,
@@ -33,32 +33,38 @@ class AddMemberField extends React.Component<Props, State> {
           label={t("add-member-textfield.label")}
           errorMessage={t("add-member-textfield.error")}
           onChange={this.handleAddMemberChange}
-          validationError={this.state.validationError} //TODO: validate member name
+          validationError={this.state.validationError}
           value={this.state.memberToAdd}
           onReturnPressed={this.appendMember}
         />
         <AddButton
           label={t("add-member-button.label")}
           action={this.addButtonClicked}
+          disabled={!isMemberNameValid(this.state.memberToAdd)}
         />
       </div>
     );
   }
 
-
   addButtonClicked = (event: Event) => {
     event.preventDefault();
     this.appendMember();
   };
 
   appendMember = () => {
-    this.props.addMember(this.state.memberToAdd);
-    this.setState({ ...this.state, memberToAdd: "" });
+    const { memberToAdd } = this.state;
+    if (isMemberNameValid(memberToAdd)) {
+      this.props.addMember(memberToAdd);
+      this.setState({ ...this.state, memberToAdd: "" });
+    }
   };
 
-
   handleAddMemberChange = (membername: string) => {
-    this.setState({ ...this.state, memberToAdd: membername, validationError: !isMemberNameValid(membername) });
+    this.setState({
+      ...this.state,
+      memberToAdd: membername,
+      validationError: membername.length > 0 && !isMemberNameValid(membername)
+    });
   };
 }