Add publish debug log option

2 files changed, 205 insertions, 0 deletions

diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
new file mode 100644
index 000000000..9e59fa205
--- /dev/null
+++ b/src/features/publishDebugInfo/Component.js
@@ -0,0 +1,181 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, inject } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { H1 } from '@meetfranz/ui';
+import injectSheet from 'react-jss';
+
+import Input from '../../components/ui/Input';
+import Button from '../../components/ui/Button';
+import Modal from '../../components/ui/Modal';
+import { state as ModalState } from '.';
+import AppStore from '../../stores/AppStore';
+import { DEBUG_API } from '../../config';
+import { sendAuthRequest } from '../../api/utils/auth';
+
+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',
+  },
+  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 => ({
+  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,
+
+    '& > div': {
+      fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
+    },
+  },
+});
+
+export default @injectSheet(styles) @inject('stores') @observer class PublishDebugLogModal extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    log: null,
+    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();
+    console.log(response);
+    if (response.id) {
+      this.setState({
+        log: response.id,
+      })
+    } else {
+      // TODO: Show error message
+      this.close();
+    }
+  }
+
+  render() {
+    const { isModalVisible } = ModalState;
+
+    const {
+      classes,
+    } = this.props;
+
+    const {
+      log
+    } = this.state;
+
+    const { intl } = this.context;
+
+    return (
+      <Modal
+        isOpen={isModalVisible}
+        shouldCloseOnOverlayClick
+        close={this.close.bind(this)}
+      >
+        <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
+              />
+          </>
+        ) : (
+          <>
+            <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.bind(this)}
+              disabled={this.state.isSendingLog}
+            />
+          </>
+        ) }
+      </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,
+};
diff --git a/src/features/publishDebugInfo/index.js b/src/features/publishDebugInfo/index.js
new file mode 100644
index 000000000..7d0d310c2
--- /dev/null
+++ b/src/features/publishDebugInfo/index.js
@@ -0,0 +1,24 @@
+import { observable } from 'mobx';
+
+export { default as Component } from './Component';
+
+const debug = require('debug')('Ferdi:feature:publishDebugInfo');
+
+const defaultState = {
+  isModalVisible: false,
+};
+
+export const state = observable(defaultState);
+
+export default function initialize() {
+  debug('Initialize publishDebugInfo feature');
+
+  function showModal() {
+    state.isModalVisible = true;
+  }
+
+  window.ferdi.features.publishDebugInfo = {
+    state,
+    showModal,
+  };
+}