Create settings for slack/email

src/routes/admin/Admin.css

@@ -11,3 +11,18 @@
   max-width: var(--max-content-width);
 }
 
+.formGroup {
+  position: relative;
+  margin-bottom: 15px;
+}
+
+.label {
+  display: inline-block;
+  margin-bottom: 5px;
+  max-width: 100%;
+  font-weight: 700;
+}
+
+.input {
+  margin-left: 10px;
+}

src/routes/admin/Admin.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Admin.css';
 import Link from '../../components/Link';
+import Button from '../../components/Button';
 
 class Admin extends React.Component {
   static propTypes = {
@@ -26,6 +27,10 @@ class Admin extends React.Component {
       hash: PropTypes.string,
       time: PropTypes.string,
     }),
+    settings: PropTypes.shape({
+      slack: PropTypes.boolean,
+      email: PropTypes.boolean,
+    }),
   };
 
   render() {
@@ -54,6 +59,38 @@ class Admin extends React.Component {
               ))}
             </ul>
           </div>
+          <div>
+            <h3>Settings</h3>
+            <form method="post" action="/admin/settings">
+              <div className={s.formGroup}>
+                <label className={s.label} htmlFor="slack">
+                  Send slack messages on RSVP:
+                </label>
+                <input
+                  className={s.input}
+                  type="checkbox"
+                  name="slack"
+                  defaultChecked={this.props.settings.slack}
+                />
+              </div>
+              <div className={s.formGroup}>
+                <label className={s.label} htmlFor="email">
+                  Send confirmation emails on RSVP:
+                </label>
+                <input
+                  className={s.input}
+                  type="checkbox"
+                  name="email"
+                  defaultChecked={this.props.settings.email}
+                />
+              </div>
+              <div className={s.formGroup}>
+                <Button type="submit">
+                  Save
+                </Button>
+              </div>
+            </form>
+          </div>
           <div>
             Build hash: <a href={`https://bitbucket.org/dan_head/wedding/commits/${this.props.build.hash}`}>{this.props.build.hash}</a>
           </div>

src/routes/admin/index.js

@@ -19,8 +19,11 @@ export default {
       },
       credentials: 'include',
     });
+
+    const settingsResp = await fetchQL('{settings{slack,email}}');
     const { data } = await resp.json();
     const config = await configResp.json();
+    const settings = await settingsResp.json();
     const people = data.getAllPersons || [];
 
     const food = {
@@ -47,6 +50,7 @@ export default {
         starters={food.starters}
         mains={food.mains}
         build={config.build}
+        settings={settings.data.settings[0]}
       /></Layout>,
     };
   },