mirror of https://github.com/vector-im/riot-web
Append the scalar_token to the widget URL if the widget URL is a scalar URL (#1182)
parent
0bf1124f1b
commit
e0e321783b
|
@ -75,6 +75,7 @@
|
|||
"react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
|
||||
"sanitize-html": "^1.11.1",
|
||||
"text-encoding-utf-8": "^1.0.1",
|
||||
"url": "^0.11.0",
|
||||
"velocity-vector": "vector-im/velocity#059e3b2",
|
||||
"whatwg-fetch": "^1.0.0"
|
||||
},
|
||||
|
|
|
@ -18,8 +18,12 @@ limitations under the License.
|
|||
|
||||
import React from 'react';
|
||||
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||
import ScalarAuthClient from '../../../ScalarAuthClient';
|
||||
import SdkConfig from '../../../SdkConfig';
|
||||
import { _t } from '../../../languageHandler';
|
||||
|
||||
import url from 'url';
|
||||
|
||||
export default React.createClass({
|
||||
displayName: 'AppTile',
|
||||
|
||||
|
@ -36,6 +40,52 @@ export default React.createClass({
|
|||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
loading: false,
|
||||
widgetUrl: this.props.url,
|
||||
error: null,
|
||||
};
|
||||
},
|
||||
|
||||
// Returns true if props.url is a scalar URL, typically https://scalar.vector.im/api
|
||||
isScalarUrl: function() {
|
||||
const scalarUrl = SdkConfig.get().integrations_rest_url;
|
||||
return scalarUrl && this.props.url.startsWith(scalarUrl);
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
if (!this.isScalarUrl()) {
|
||||
return;
|
||||
}
|
||||
// Fetch the token before loading the iframe as we need to mangle the URL
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
this._scalarClient = new ScalarAuthClient();
|
||||
this._scalarClient.getScalarToken().done((token) => {
|
||||
// Append scalar_token as a query param
|
||||
let u = url.parse(this.props.url);
|
||||
if (!u.search) {
|
||||
u.search = "?scalar_token=" + encodeURIComponent(token);
|
||||
}
|
||||
else {
|
||||
u.search += "&scalar_token=" + encodeURIComponent(token);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
error: null,
|
||||
widgetUrl: u.format(),
|
||||
loading: false,
|
||||
});
|
||||
}, (err) => {
|
||||
this.setState({
|
||||
error: err.message,
|
||||
loading: false,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
_onEditClick: function() {
|
||||
console.log("Edit widget %s", this.props.id);
|
||||
},
|
||||
|
@ -72,6 +122,19 @@ export default React.createClass({
|
|||
},
|
||||
|
||||
render: function() {
|
||||
let appTileBody;
|
||||
if (this.state.loading) {
|
||||
appTileBody = (
|
||||
<div> Loading... </div>
|
||||
);
|
||||
}
|
||||
else {
|
||||
appTileBody = (
|
||||
<div className="mx_AppTileBody">
|
||||
<iframe ref="appFrame" src={this.state.widgetUrl} allowFullScreen="true"></iframe>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
|
||||
<div className="mx_AppTileMenuBar">
|
||||
|
@ -93,9 +156,7 @@ export default React.createClass({
|
|||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="mx_AppTileBody">
|
||||
<iframe ref="appFrame" src={this.props.url} allowFullScreen="true"></iframe>
|
||||
</div>
|
||||
{appTileBody}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue