Extended GroupForm

scm-ui/src/groups/containers/AddGroup.js

@@ -4,6 +4,7 @@ import React from 'react';
 import Page from "../../components/layout/Page"
 import { translate } from "react-i18next";
 import GroupForm from './GroupForm';
+import type { Group } from "../types/Group"
 
 export interface Props {
   t: string => string
@@ -16,7 +17,7 @@ class AddGroup extends React.Component<Props, State> {
 
   render() {
     const { t } = this.props;
-    return <Page title={t("add-group.title")} subtitle={t("add-group.subtitle")}><div><GroupForm /></div></Page>
+    return <Page title={t("add-group.title")} subtitle={t("add-group.subtitle")}><div><GroupForm submitForm={(group: Group)=>{}}/></div></Page>
   }
 
 }

scm-ui/src/groups/containers/GroupForm.js

@@ -2,18 +2,40 @@
 import React from 'react';
 
 import InputField from "../../components/forms/InputField"
+import SubmitButton from "../../components/buttons/SubmitButton"
+import type { Group } from "../types/Group"
 export interface Props {
+  loading?: boolean,
+  submitForm: Group => void
 }
 
 export interface State {
+  group: Group
 }
 
 class GroupForm extends React.Component<Props, State> {
 
+  isValid = () => {
+    return true;
+  }
+
+  submit = (event: Event) => {
+    event.preventDefault();
+    this.props.submitForm(this.state.group)
+  }
+
   render() {
+    const { loading } = this.props;
     return (
-      <form>
-      <InputField label="Name" errorMessage="" onChange={()=>{}} validationError={false}/>
+      // TODO: i18n
+      <form onSubmit={this.submit}>
+      <InputField label="Name" errorMessage="Invalid group name" onChange={()=>{}} validationError={false}/>
+      <InputField label="Description" errorMessage="Invalid group description" onChange={()=>{}} validationError={false} />
+      <SubmitButton
+          disabled={!this.isValid()}
+          loading={loading}
+          label="Submit"
+        />
       </form>
     )
   }