Finish new team GUI

app/javascript/packs/src/settings/components/teams/new/components/NameFormControl.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import { FormControl } from "react-bootstrap";
+
+const messages = defineMessages({
+    placeholder: { id: "settings_page.new_team.name_placeholder" }
+});
+
+const NameFormControl = ({intl}) =>
+  <FormControl
+    type="text"
+    placeholder={intl.formatMessage(messages.placeholder)}
+    autoFocus={true}
+  />;
+
+NameFormControl.PropTypes = {
+    intl: intlShape.isRequired
+};
+
+export default injectIntl(NameFormControl);

app/javascript/src/config/locales/messages.js

@@ -22,7 +22,6 @@ export default {
     },
     settings_page: {
       all_teams: "All teams",
-      new_team: "New team",
       in_team: "You are member of {num} team",
       in_teams: "You are member of {num} team",
       leave_team: "Leave team",
@@ -102,6 +101,15 @@ export default {
           administrator: "Administrator",
           remove_user: "Remove"
         }
+      },
+      new_team: {
+        title: "New team",
+        name_label: "Team name",
+        name_placeholder: "My team",
+        name_sublabel: "Pick a name that would best describe your team (e.g. 'University of ..., Department of ...').",
+        description_label: "Description",
+        description_sublabel: "Describe your team.",
+        create: "Create team"
       }
     },
     activities: {

app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx

@@ -1,12 +1,14 @@
-import React, { Component } from "react";
+import React from "react";
 import styled from "styled-components";
-import { Breadcrumb } from "react-bootstrap";
+import { Breadcrumb, FormGroup, FormControl, ControlLabel, HelpBlock, Button } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
 import { FormattedMessage } from "react-intl";
 import { SETTINGS_TEAMS_ROUTE } from "../../../../../config/routes";
 
 import { BORDER_LIGHT_COLOR } from "../../../../../config/constants/colors";
 
+import NameFormControl from "./components/NameFormControl";
+
 const Wrapper = styled.div`
   background: white;
   box-sizing: border-box;
@@ -25,10 +27,43 @@ const SettingsNewTeam = () =>
         </Breadcrumb.Item>
       </LinkContainer>
       <Breadcrumb.Item active={true}>
-        <FormattedMessage id="settings_page.new_team" />
+        <FormattedMessage id="settings_page.new_team.title" />
       </Breadcrumb.Item>
     </Breadcrumb>
-    <span>TODO</span>
+
+    <form style={{ maxWidth: "500px" }}>
+
+      <FormGroup controlId="formBasicText">
+        <ControlLabel>
+          <FormattedMessage id="settings_page.new_team.name_label" />
+        </ControlLabel>
+        <NameFormControl />
+        <FormControl.Feedback />
+        <HelpBlock>
+          <FormattedMessage id="settings_page.new_team.name_sublabel" />
+        </HelpBlock>
+      </FormGroup>
+
+      <FormGroup>
+        <ControlLabel>
+          <FormattedMessage id="settings_page.new_team.description_label" />
+        </ControlLabel>
+        <FormControl componentClass="textarea" />
+        <FormControl.Feedback />
+        <HelpBlock>
+          <FormattedMessage id="settings_page.new_team.description_sublabel" />
+        </HelpBlock>
+      </FormGroup>
+
+      <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
+        <Button>
+          <FormattedMessage id="general.cancel" />
+        </Button>
+      </LinkContainer>
+      <Button type="submit" className="btn-primary">
+        <FormattedMessage id="settings_page.new_team.create" />
+      </Button>
+    </form>
   </Wrapper>;
 
 export default SettingsNewTeam;