mirror of
https://github.com/Doodle3D/Doodle3D-Core.git
synced 2025-01-07 02:03:49 +01:00
add AuthImage
This commit is contained in:
parent
c062af4bd9
commit
401f847dfc
18
package-lock.json
generated
18
package-lock.json
generated
@ -4162,6 +4162,19 @@
|
|||||||
"prop-types": "15.6.0"
|
"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": {
|
"readable-stream": {
|
||||||
"version": "2.3.3",
|
"version": "2.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
|
||||||
@ -4750,6 +4763,11 @@
|
|||||||
"user-home": "1.1.1"
|
"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": {
|
"validate.io-undefined": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/validate.io-undefined/-/validate.io-undefined-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/validate.io-undefined/-/validate.io-undefined-1.0.3.tgz",
|
||||||
|
@ -25,12 +25,14 @@
|
|||||||
"proptypes": "^1.1.0",
|
"proptypes": "^1.1.0",
|
||||||
"raw-loader": "^0.5.1",
|
"raw-loader": "^0.5.1",
|
||||||
"react": "^16.0.0",
|
"react": "^16.0.0",
|
||||||
|
"react-redux": "^5.0.6",
|
||||||
"redux-form": "^7.1.2",
|
"redux-form": "^7.1.2",
|
||||||
"regenerator-runtime": "^0.11.0",
|
"regenerator-runtime": "^0.11.0",
|
||||||
"semver": "^5.4.1",
|
"semver": "^5.4.1",
|
||||||
"shortid": "^2.2.8",
|
"shortid": "^2.2.8",
|
||||||
"three": "^0.83.0",
|
"three": "^0.83.0",
|
||||||
"three-js-csg": "^72.0.0"
|
"three-js-csg": "^72.0.0",
|
||||||
|
"valid-url": "^1.0.9"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||||
|
64
src/components/AuthImage.js
Normal file
64
src/components/AuthImage.js
Normal file
@ -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);
|
@ -1,3 +1,4 @@
|
|||||||
import DoodlePreview from './DoodlePreview.js';
|
import DoodlePreview from './DoodlePreview.js';
|
||||||
|
import AuthImage from './AuthImage.js';
|
||||||
|
|
||||||
export { DoodlePreview };
|
export { DoodlePreview, AuthImage };
|
||||||
|
Loading…
Reference in New Issue
Block a user