From 0108d9ea1993509c2cbed74824d5bfb09fee6a9b Mon Sep 17 00:00:00 2001
From: Luka Murn <luka.murn@biosistemika.com>
Date: Fri, 15 Sep 2017 10:34:36 +0200
Subject: [PATCH] Finish new team GUI

---
 .../teams/new/components/NameFormControl.jsx  | 21 +++++++++
 app/javascript/src/config/locales/messages.js | 10 ++++-
 .../SettingsPage/scenes/teams/new/index.jsx   | 43 +++++++++++++++++--
 3 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 app/javascript/packs/src/settings/components/teams/new/components/NameFormControl.jsx

diff --git a/app/javascript/packs/src/settings/components/teams/new/components/NameFormControl.jsx b/app/javascript/packs/src/settings/components/teams/new/components/NameFormControl.jsx
new file mode 100644
index 000000000..37c0541ad
--- /dev/null
+++ b/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);
diff --git a/app/javascript/src/config/locales/messages.js b/app/javascript/src/config/locales/messages.js
index 93ea60a3f..c17319fb7 100644
--- a/app/javascript/src/config/locales/messages.js
+++ b/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: {
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
index 23579be73..5b5e84f40 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
+++ b/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;
\ No newline at end of file