diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index 28255aeb5..360ceaa93 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/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 = (
+
diff --git a/client/coral-admin/src/routes/Configure/components/Configure.js b/client/coral-admin/src/routes/Configure/components/Configure.js
index fe3df3e81..69ab4f06c 100644
--- a/client/coral-admin/src/routes/Configure/components/Configure.js
+++ b/client/coral-admin/src/routes/Configure/components/Configure.js
@@ -42,7 +42,7 @@ class Configure extends React.Component {
{t('configure.tech_settings')}
-
- {t('configure.organization_settings')}
+ {t('configure.organization_information')}
diff --git a/client/coral-admin/src/routes/Configure/components/OrganizationSettings.css b/client/coral-admin/src/routes/Configure/components/OrganizationSettings.css
index 4902e37a3..06ada55c4 100644
--- a/client/coral-admin/src/routes/Configure/components/OrganizationSettings.css
+++ b/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;
}
\ No newline at end of file
diff --git a/client/coral-admin/src/routes/Configure/components/OrganizationSettings.js b/client/coral-admin/src/routes/Configure/components/OrganizationSettings.js
index 684b61751..18fe653e1 100644
--- a/client/coral-admin/src/routes/Configure/components/OrganizationSettings.js
+++ b/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 (
{t('configure.organization_info_copy')}
- {t('configure.organization_info_copy2')}
-
-