1 files changed, 208 insertions, 0 deletions

diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
new file mode 100644
index 000000000..1f1b0ed45
--- /dev/null
+++ b/src/features/publishDebugInfo/Component.js
@@ -0,0 +1,208 @@
+import { H1 } from '@meetfranz/ui';
+import { inject, observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+import { state as ModalState } from '.';
+import { sendAuthRequest } from '../../api/utils/auth';
+import Button from '../../components/ui/Button';
+import Input from '../../components/ui/Input';
+import Modal from '../../components/ui/Modal';
+import { DEBUG_API } from '../../config';
+import AppStore from '../../stores/AppStore';
+
+
+const messages = defineMessages({
+  title: {
+    id: 'feature.publishDebugInfo.title',
+    defaultMessage: '!!!Publish debug information',
+  },
+  info: {
+    id: 'feature.publishDebugInfo.info',
+    defaultMessage: '!!!Publishing your debug information helps us find issues and errors in Ferdi. By publishing your debug information you accept Ferdi Debugger\'s privacy policy and terms of service',
+  },
+  error: {
+    id: 'feature.publishDebugInfo.error',
+    defaultMessage: '!!!There was an error while trying to publish the debug information. Please try again later or view the console for more information.',
+  },
+  privacy: {
+    id: 'feature.publishDebugInfo.privacy',
+    defaultMessage: '!!!Privacy policy',
+  },
+  terms: {
+    id: 'feature.publishDebugInfo.terms',
+    defaultMessage: '!!!Terms of service',
+  },
+  publish: {
+    id: 'feature.publishDebugInfo.publish',
+    defaultMessage: '!!!Accept and publish',
+  },
+  published: {
+    id: 'feature.publishDebugInfo.published',
+    defaultMessage: '!!!Your debug log was published and is now availible at',
+  },
+});
+
+const styles = theme => ({
+  container: {
+    minWidth: '70vw',
+  },
+  info: {
+    paddingTop: 20,
+    paddingBottom: 20,
+  },
+  link: {
+    color: `${theme.styleTypes.primary.accent} !important`,
+    padding: 10,
+    cursor: 'pointer',
+  },
+  button: {
+    width: '100%',
+    marginTop: 10,
+    cursor: 'pointer',
+  },
+  url: {
+    marginTop: 20,
+    width: '100%',
+
+    '& div': {
+      fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
+    },
+
+    '& input': {
+      width: '100%',
+      padding: 15,
+      borderRadius: 6,
+      border: `solid 1px ${theme.styleTypes.primary.accent}`,
+    },
+  },
+});
+
+export default @injectSheet(styles) @inject('stores', 'actions') @observer class PublishDebugLogModal extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    log: null,
+    error: false,
+    isSendingLog: false,
+  }
+
+  // Close this modal
+  close() {
+    ModalState.isModalVisible = false;
+  }
+
+  async publishDebugInfo() {
+    this.setState({
+      isSendingLog: true,
+    });
+
+    const debugInfo = JSON.stringify(this.props.stores.app.debugInfo);
+
+    const request = await sendAuthRequest(`${DEBUG_API}/create`, {
+      method: 'POST',
+      body: JSON.stringify({
+        log: debugInfo,
+      }),
+    }, false);
+    const response = await request.json();
+
+    if (response.id) {
+      this.setState({
+        log: response.id,
+      });
+    } else {
+      this.setState({
+        error: true,
+      });
+    }
+  }
+
+  render() {
+    const { isModalVisible } = ModalState;
+
+    const {
+      classes,
+    } = this.props;
+
+    const {
+      log,
+      error,
+      isSendingLog,
+    } = this.state;
+
+    const { intl } = this.context;
+
+    return (
+      <Modal
+        isOpen={isModalVisible}
+        shouldCloseOnOverlayClick
+        close={() => this.close()}
+      >
+        <div className={classes.container}>
+          <H1>
+            {intl.formatMessage(messages.title)}
+          </H1>
+          { log && (
+            <>
+              <p className={classes.info}>{intl.formatMessage(messages.published)}</p>
+              <Input
+                className={classes.url}
+                showLabel={false}
+                field={{
+                  type: 'url',
+                  value: `${DEBUG_API}/${log}`,
+                  disabled: true,
+                }}
+                readonly
+              />
+            </>
+          )}
+
+          {error && (
+            <p className={classes.info}>{intl.formatMessage(messages.error)}</p>
+          )}
+
+          {!log && !error && (
+            <>
+              <p className={classes.info}>{intl.formatMessage(messages.info)}</p>
+
+              <a href={`${DEBUG_API}/privacy.html`} target="_blank" className={classes.link}>
+                {intl.formatMessage(messages.privacy)}
+              </a>
+              <a href={`${DEBUG_API}/terms.html`} target="_blank" className={classes.link}>
+                {intl.formatMessage(messages.terms)}
+              </a>
+
+              <Button
+                type="button"
+                label={intl.formatMessage(messages.publish)}
+                className={classes.button}
+                onClick={() => this.publishDebugInfo()}
+                disabled={isSendingLog}
+              />
+            </>
+          )}
+        </div>
+      </Modal>
+    );
+  }
+}
+
+PublishDebugLogModal.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    app: PropTypes.instanceOf(AppStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    service: PropTypes.shape({
+      setActive: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};