Add user creation

src/components/field-validation-message/FieldValidationMessage.js

@@ -1,31 +1,48 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { Form, Label } from "semantic-ui-react";
+import { Form, Label, Icon } from "semantic-ui-react";
 
 import { Component as Responsive } from "src/components/responsive";
 
 import "./fieldValidationMessage.css";
 
-export const FieldValidationMessage = ({ message }) => (
-  <React.Fragment>
-    <Responsive device="desktop">
-      <Form.Field className="form__field-validation__container">
-        <Label basic color="red" pointing="left">
-          {message}
-        </Label>
-      </Form.Field>
-    </Responsive>
-    <Responsive device="mobile">
-      <Form.Field className="form__field-validation__container--mobile">
-        <Label basic color="red" pointing>
-          {message}
-        </Label>
-      </Form.Field>
-    </Responsive>
-  </React.Fragment>
-);
+const ErrorLabel = ({ message, pointing }) => {
+  return (
+    <Label basic color="red" pointing={pointing}>
+      {message}
+    </Label>
+  );
+};
+
+ErrorLabel.propTypes = {
+  message: PropTypes.string,
+  pointing: PropTypes.any
+};
+
+const ValidLabel = () => {
+  return <Icon name="thumbs up" color="green" />;
+};
+
+export const FieldValidationMessage = ({ message, valid }) => {
+  const Message = !valid ? ErrorLabel : ValidLabel;
+  return (
+    <React.Fragment>
+      <Responsive device="desktop">
+        <Form.Field className="form__field-validation__container">
+          <Message pointing="left" message={message} />
+        </Form.Field>
+      </Responsive>
+      <Responsive device="mobile">
+        <Form.Field className="form__field-validation__container--mobile">
+          {!valid ? <Message pointing message={message} /> : null}
+        </Form.Field>
+      </Responsive>
+    </React.Fragment>
+  );
+};
 
 FieldValidationMessage.propTypes = {
-  message: PropTypes.string
+  message: PropTypes.string,
+  valid: PropTypes.bool
 };

src/components/searchable-list/SearchableList.js

@@ -78,7 +78,7 @@ export class SearchableList extends Component {
 SearchableList.propTypes = {
   children: PropTypes.node,
   error: PropTypes.instanceOf(Error),
-  header: PropTypes.string,
+  header: PropTypes.node,
   loading: PropTypes.bool.isRequired,
   menu: PropTypes.node,
   sortBy: PropTypes.string,