add AuthImage

package-lock.json

@@ -4162,6 +4162,19 @@
         "prop-types": "15.6.0"
       }
     },
+    "react-redux": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.6.tgz",
+      "integrity": "sha512-8taaaGu+J7PMJQDJrk/xiWEYQmdo3mkXw6wPr3K3LxvXis3Fymiq7c13S+Tpls/AyNUAsoONkU81AP0RA6y6Vw==",
+      "requires": {
+        "hoist-non-react-statics": "2.3.1",
+        "invariant": "2.2.2",
+        "lodash": "4.17.4",
+        "lodash-es": "4.17.4",
+        "loose-envify": "1.3.1",
+        "prop-types": "15.6.0"
+      }
+    },
     "readable-stream": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
@@ -4750,6 +4763,11 @@
         "user-home": "1.1.1"
       }
     },
+    "valid-url": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz",
+      "integrity": "sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA="
+    },
     "validate.io-undefined": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/validate.io-undefined/-/validate.io-undefined-1.0.3.tgz",

package.json

@@ -25,12 +25,14 @@
     "proptypes": "^1.1.0",
     "raw-loader": "^0.5.1",
     "react": "^16.0.0",
+    "react-redux": "^5.0.6",
     "redux-form": "^7.1.2",
     "regenerator-runtime": "^0.11.0",
     "semver": "^5.4.1",
     "shortid": "^2.2.8",
     "three": "^0.83.0",
-    "three-js-csg": "^72.0.0"
+    "three-js-csg": "^72.0.0",
+    "valid-url": "^1.0.9"
   },
   "devDependencies": {
     "babel-plugin-syntax-dynamic-import": "^6.18.0",

src/components/AuthImage.js

@@ -0,0 +1,64 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { isWebUri } from 'valid-url';
+import PouchDB from 'pouchdb';
+// import createDebug from 'debug';
+// const debug = createDebug('d3d:FileThumb');
+
+class AuthImage extends React.Component {
+  static propTypes = {
+    dispatch: PropTypes.func,
+    src: PropTypes.string.isRequired,
+    token: PropTypes.string,
+    password: PropTypes.string
+  };
+
+  state = {
+    src: null
+  }
+
+  componentWillMount() {
+    const { src, token, password } = this.props;
+
+    if (src.startsWith('/') || src.startsWith('./')) {
+      this.setState({ src });
+    } else if (isWebUri(src)) {
+      if (token && password) {
+        const filteredSrc = src.replace(/:\/\/.+?@/, '://');
+        const headers = {
+          Authorization: `Basic ${btoa(`${token}:${password}`)}`
+        };
+        fetch(filteredSrc, { headers })
+          .then(response => response.blob())
+          .then(blob => this.setState({ src: URL.createObjectURL(blob) }));
+      } else {
+        this.setState({ src });
+      }
+    } else {
+      const [dbName, docName, attachmentName] = src.split('/');
+      const db = new PouchDB(dbName);
+      db.getAttachment(docName, attachmentName).then((blob) => {
+        this.setState({ src: URL.createObjectURL(blob) });
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    URL.revokeObjectURL(this.state.src);
+  }
+
+  render() {
+    // filter props before passing them to img element
+    const props = { ...this.props };
+    delete props.dispatch;
+    delete props.token;
+    delete props.password;
+    delete props.src;
+    return (<img { ...props } src={this.state.src} />);
+  }
+}
+
+export default connect(state => ({
+  token: state.user.session.token,
+  password: state.user.session.password
+}))(AuthImage);

src/components/index.js

@@ -1,3 +1,4 @@
 import DoodlePreview from './DoodlePreview.js';
+import AuthImage from './AuthImage.js';
 
-export { DoodlePreview };
+export { DoodlePreview, AuthImage };