Wip - Almost finished!

client/coral-admin/src/AppRouter.js

@@ -10,6 +10,7 @@ import Configure from 'routes/Configure';
 import StreamSettings from './routes/Configure/containers/StreamSettings';
 import ModerationSettings from './routes/Configure/containers/ModerationSettings';
 import TechSettings from './routes/Configure/containers/TechSettings';
+import OrganizationSettings from './routes/Configure/containers/OrganizationSettings';
 
 import { ModerationLayout, Moderation } from 'routes/Moderation';
 
@@ -25,6 +26,7 @@ const routes = (
         <Route path="stream" component={StreamSettings} />
         <Route path="moderation" component={ModerationSettings} />
         <Route path="tech" component={TechSettings} />
+        <Route path="organization" component={OrganizationSettings} />
         <IndexRedirect to="stream" />
       </Route>
 

client/coral-admin/src/routes/Configure/components/Configure.js

@@ -42,7 +42,7 @@ class Configure extends React.Component {
               {t('configure.tech_settings')}
             </Item>
             <Item itemId="organization" icon="people">
-              {t('configure.organization_settings')}
+              {t('configure.organization_information')}
             </Item>
           </List>
           <div className={styles.saveBox}>

client/coral-admin/src/routes/Configure/components/OrganizationSettings.css

@@ -1,3 +1,51 @@
 .label {
   display: block;
+}
+
+.detailList {
+  padding: 0;
+  margin: 0;
+}
+
+.detailLabel {
+  color: #000;
+  font-size: 1.1em;
+  font-weight: bold;
+  display: block;
+  margin-bottom: 8px; 
+}
+
+.detailValue {
+  padding: 6px 10px;
+  border: solid 1px transparent;
+  display: block;
+  font-size: 1em;
+  border-radius: 2px;
+}
+
+.editable {
+  border-color: grey;
+}
+
+.detailItem {
+  margin-bottom: 16px;
+  list-style: none;
+}
+
+.editButton {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
+.actionBox {
+  position: absolute;
+  right: 10px;
+  top: 10px; 
+  text-align: center;
+}
+
+.cancelButton {
+  padding: 10px;
+  display: block;
 }

client/coral-admin/src/routes/Configure/components/OrganizationSettings.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import cn from 'classnames';
+import { Button } from 'coral-ui';
 import PropTypes from 'prop-types';
-import { Textfield } from 'react-mdl';
 import styles from './OrganizationSettings.css';
 import Slot from 'coral-framework/components/Slot';
 import t from 'coral-framework/services/i18n';
@@ -8,6 +9,19 @@ import ConfigurePage from './ConfigurePage';
 import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
 class OrganizationSettings extends React.Component {
+  state = { editing: false };
+
+  toggleEditing = () => {
+    this.setState(({ editing }) => ({
+      editing: !editing,
+    }));
+  };
+
+  updateName = event => {
+    const updater = { organizationName: { $set: event.target.value } };
+    this.props.updatePending({ updater });
+  };
+
   updateEmail = event => {
     const updater = { organizationContactEmail: { $set: event.target.value } };
     this.props.updatePending({ updater });
@@ -15,37 +29,65 @@ class OrganizationSettings extends React.Component {
 
   render() {
     const { settings, slotPassthrough } = this.props;
-
     return (
       <ConfigurePage title={t('configure.organization_information')}>
         <p>{t('configure.organization_info_copy')}</p>
-        <p>{t('configure.organization_info_copy2')}</p>
-        <ConfigureCard title={t('configure.organization_details')}>
-          <ul>
-            <li>
-              {t('configure.organization_name')}: {settings.organizationName}
-            </li>
-            <li>
-              {t('configure.organization_contact_email')}:{' '}
+        <p>{t('configure.organization_info_copy_2')}</p>
+        <ConfigureCard>
+          {!this.state.editing ? (
+            <Button
+              className={styles.editButton}
+              icon="settings"
+              onClick={this.toggleEditing}
+            >
+              Edit Info
+            </Button>
+          ) : (
+            <div className={styles.actionBox}>
+              <Button icon="done" onClick={this.toggleEditing}>
+                Save
+              </Button>
+              <a className={styles.cancelButton}>Cancel</a>
+            </div>
+          )}
+
+          {console.log(this.props.slotPassthrough)}
+
+          <ul className={styles.detailList}>
+            <li className={styles.detailItem}>
+              <label
+                className={styles.detailLabel}
+                id={t('configure.organization_name')}
+              >
+                {t('configure.organization_name')}
+              </label>
               <input
-                defaultValue={settings.organizationContactEmail}
-                readOnly
+                type="text"
+                className={cn(styles.detailValue, {
+                  [styles.editable]: this.state.editing,
+                })}
+                onChange={this.updateName}
+                value={settings.organizationName}
+                id={t('configure.organization_name')}
+                readOnly={!this.state.editing}
               />
             </li>
-          </ul>
-        </ConfigureCard>
-        <ConfigureCard title={'Edit Organization Settings'}>
-          <ul>
-            <li>
-              <label className={styles.label}>
+            <li className={styles.detailItem}>
+              <label
+                className={styles.detailLabel}
+                id={t('configure.organization_contact_email')}
+              >
                 {t('configure.organization_contact_email')}
               </label>
-
-              <Textfield
+              <input
                 type="text"
+                className={cn(styles.detailValue, {
+                  [styles.editable]: this.state.editing,
+                })}
                 onChange={this.updateEmail}
                 value={settings.organizationContactEmail}
-                label={t('configure.organizationContactEmail')}
+                id={t('configure.organization_contact_email')}
+                readOnly={!this.state.editing}
               />
             </li>
           </ul>

client/coral-framework/components/ConfigureCard.js

@@ -43,7 +43,7 @@ const ConfigureCard = ({
 );
 
 ConfigureCard.propTypes = {
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   className: PropTypes.string,
   onCheckbox: PropTypes.func,
   checked: PropTypes.bool,