diff --git a/client/coral-admin/src/routes/Configure/components/OrganizationSettings.css b/client/coral-admin/src/routes/Configure/components/OrganizationSettings.css index 942307a3f..2468496b7 100644 --- a/client/coral-admin/src/routes/Configure/components/OrganizationSettings.css +++ b/client/coral-admin/src/routes/Configure/components/OrganizationSettings.css @@ -43,11 +43,7 @@ } .actionBox { - position: absolute; - right: 20px; - top: 20px; - text-align: center; - width: 100px; + flex-grow: 0; } .cancelButton { @@ -64,4 +60,28 @@ .changedSave { background-color: #00796B; color: white; +} + +.errorList { + list-style: none; + padding: 0; + margin: 0; +} + +.errorItem { + padding: 5px 10px; + margin-bottom: 20px; + color: #b71c1c; + border-radius: 2px; + display: inline-block; + background: #F9D3CE; +} + +.container { + display: flex; +} + +.content { + flex-grow: 1; + padding-right: 40px; } \ 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 06c91926c..38f211781 100644 --- a/client/coral-admin/src/routes/Configure/components/OrganizationSettings.js +++ b/client/coral-admin/src/routes/Configure/components/OrganizationSettings.js @@ -7,9 +7,25 @@ import Slot from 'coral-framework/components/Slot'; import t from 'coral-framework/services/i18n'; import ConfigurePage from './ConfigurePage'; import ConfigureCard from 'coral-framework/components/ConfigureCard'; +import validate from 'coral-framework/helpers/validate'; +import errorMsj from 'coral-framework/helpers/error'; class OrganizationSettings extends React.Component { - state = { editing: false }; + state = { editing: false, errors: [] }; + + addError = err => { + if (this.state.errors.indexOf(err) === -1) { + this.setState(({ errors }) => ({ + errors: errors.concat(err), + })); + } + }; + + removeError = err => { + this.setState(({ errors }) => ({ + errors: errors.filter(i => i !== err), + })); + }; toggleEditing = () => { this.setState(({ editing }) => ({ @@ -29,8 +45,21 @@ class OrganizationSettings extends React.Component { }; updateEmail = event => { - const updater = { organizationContactEmail: { $set: event.target.value } }; - this.props.updatePending({ updater }); + let error = null; + const email = event.target.value; + + // Add a blocker error + if (!validate.email(email)) { + error = true; + this.addError('email'); + } else { + this.removeError('email'); + } + + const updater = { organizationContactEmail: { $set: email } }; + const errorUpdater = { organizationEmail: { $set: error } }; + + this.props.updatePending({ updater, errorUpdater }); }; cancelEditing = () => { @@ -43,84 +72,101 @@ class OrganizationSettings extends React.Component { this.disableEditing(); }; + displayErrors = (errors = []) => ( +
{t('configure.organization_info_copy')}
{t('configure.organization_info_copy_2')}