1 files changed, 68 insertions, 0 deletions

diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
new file mode 100644
index 000000000..923053296
--- /dev/null
+++ b/src/components/settings/services/ServiceError.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { Link } from 'react-router';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Infobox from '../../ui/Infobox';
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.service.error.headline',
+    defaultMessage: '!!!Error',
+  },
+  goBack: {
+    id: 'settings.service.error.goBack',
+    defaultMessage: '!!!Back to services',
+  },
+  availableServices: {
+    id: 'settings.service.form.availableServices',
+    defaultMessage: '!!!Available services',
+  },
+  errorMessage: {
+    id: 'settings.service.error.message',
+    defaultMessage: '!!!Could not load service recipe.',
+  },
+});
+
+@observer
+export default class EditServiceForm extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            <Link to="/settings/recipes">
+              {intl.formatMessage(messages.availableServices)}
+            </Link>
+          </span>
+          <span className="separator" />
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          <Infobox
+            type="danger"
+            icon="alert"
+          >
+            {intl.formatMessage(messages.errorMessage)}
+          </Infobox>
+        </div>
+        <div className="settings__controls">
+          <Button
+            label={intl.formatMessage(messages.goBack)}
+            htmlForm="form"
+            onClick={() => window.history.back()}
+          />
+        </div>
+      </div>
+    );
+  }
+}