wires up RenderFields, modifies enum to be named select

src/client/components/Routes.js

@@ -37,12 +37,12 @@ const Routes = () => {
               <Route path={`${match.url}/create-first-user`}>
                 <CreateFirstUser />
               </Route>
-              <Route>
-                <Redirect to="/admin/create-first-user" />
-              </Route>
+              <Redirect to="/admin/create-first-user" />
             </Switch>
           );
-        } if (initialized === true) {
+        }
+
+        if (initialized === true) {
           return (
             <Switch>
               <Route path={`${match.url}/login`}>

src/client/components/forms/RenderFields/index.js

@@ -2,11 +2,41 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import fieldTypes from '../field-types';
 
+import './index.scss';
+
+const baseClass = 'render-fields';
+
 const RenderFields = ({ fields }) => {
   if (fields) {
-    return fields.map((field, i) => {
-      return field.name + i;
-    });
+    return (
+      <div className={baseClass}>
+        {fields.map((field, i) => {
+          const FieldComponent = field.component || fieldTypes[field.type];
+
+          if (FieldComponent) {
+            return (
+              <FieldComponent
+                key={i}
+                {...field}
+              />
+            );
+          }
+
+          return (
+            <div
+              className={`${baseClass}__no-field-found`}
+              key={i}
+            >
+              No matched field found for
+              {' '}
+              &quot;
+              {field.label}
+              &quot;
+            </div>
+          );
+        })}
+      </div>
+    );
   }
 
   return null;

src/client/components/forms/RenderFields/index.scss

@@ -0,0 +1,7 @@
+@import '../../../scss/styles';
+
+.render-fields {
+  &__no-field-found {
+    @include gutter;
+  }
+}

src/client/components/forms/field-types/Input/index.js

@@ -7,22 +7,36 @@ const error = 'Please fill in the field';
 
 const validate = value => value.length > 0;
 
-const Input = props => {
+const Input = (props) => {
+  const {
+    className,
+    style,
+    width,
+    error,
+    label,
+    value,
+    onChange,
+    disabled,
+    placeholder,
+    id,
+    name,
+  } = props;
+
   return (
-    <div className={props.className} style={{
-      ...props.style,
-      width: props.width ? `${props.width}%` : null
+    <div className={className} style={{
+      ...style,
+      width: width ? `${width}%` : null
     }}>
-      {props.error}
-      {props.label}
+      {error}
+      {label}
       <input
-        value={props.value || ''}
-        onChange={props.onChange}
-        disabled={props.disabled}
-        placeholder={props.placeholder}
+        value={value || ''}
+        onChange={onChange}
+        disabled={disabled}
+        placeholder={placeholder}
         type="text"
-        id={props.id ? props.id : props.name}
-        name={props.name} />
+        id={id ? id : name}
+        name={name} />
     </div>
   );
 }

src/client/components/forms/field-types/Select/index.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import fieldType from '../fieldType';
+
+import './index.scss';
+
+const errorMessage = 'Please fill in the textarea';
+
+const validate = value => value.length > 0;
+
+const Select = (props) => {
+  const {
+    className,
+    style,
+    error,
+    label,
+    value,
+    onChange,
+    disabled,
+    placeholder,
+    id,
+    name,
+    options,
+  } = props;
+
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      {error}
+      {label}
+      <select
+        value={value || ''}
+        onChange={onChange}
+        disabled={disabled}
+        placeholder={placeholder}
+        id={id || name}
+        name={name}
+      >
+        {options && options.map((option, i) => {
+          if (typeof option === 'object') {
+            return (
+              <option
+                key={i}
+                value={option.value}
+              >
+                {option.label}
+              </option>
+            );
+          }
+          return (
+            <option
+              value={option}
+              key={i}
+            >
+              {option}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+};
+
+Select.defaultProps = {
+  className: null,
+  style: {},
+  error: null,
+  label: null,
+  value: '',
+  onChange: null,
+  disabled: null,
+  placeholder: null,
+  id: null,
+  name: 'select',
+};
+
+Select.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.shape({}),
+  error: PropTypes.node,
+  label: PropTypes.node,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.string,
+  placeholder: PropTypes.string,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  options: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.string,
+    ),
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        value: PropTypes.string,
+        label: PropTypes.string,
+      }),
+    ),
+  ]).isRequired,
+};
+
+export default fieldType(Select, 'select', validate, errorMessage);

src/client/components/forms/field-types/Select/index.scss

@@ -0,0 +1,16 @@
+@import '../../../../scss//styles';
+
+.field-type.select {
+  margin-bottom: base(.5);
+  position: relative;
+
+  select {
+    @include formInput();
+  }
+
+  &.error {
+    select {
+      background-color: lighten($error, 20%);
+    }
+  }
+}

src/client/components/forms/field-types/index.js

@@ -1,8 +1,21 @@
-export { default as Email } from './Email';
-export { default as Group } from './Group';
-export { default as HiddenInput } from './HiddenInput';
-export { default as Input } from './Input';
-export { default as Media } from './Media';
-export { default as Password } from './Password';
-export { default as Repeater } from './Repeater';
-export { default as Textarea } from './Textarea';
+import email from './Email';
+import group from './Group';
+import hidden from './HiddenInput';
+import input from './Input';
+import media from './Media';
+import password from './Password';
+import repeater from './Repeater';
+import textarea from './Textarea';
+import select from './Select';
+
+export default {
+  email,
+  group,
+  hidden,
+  input,
+  media,
+  password,
+  repeater,
+  textarea,
+  select,
+};