PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #3240 from matrix-org/jryans/defer-im-token

Browse source 
Defer IM token until widget is shown and permission granted
This commit is contained in:
J. Ryan Stinnett 2019-07-22 12:56:11 +01:00 committed by GitHub
commit e3ffdf1dff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/components/views/elements/AppTile.js
View file

@ -139,7 +139,10 @@ export default class AppTile extends React.Component {
} }
componentWillMount() { componentWillMount() {
this.setScalarToken(); // Only fetch IM token on mount if we're showing and have permission to load
if (this.props.show && this.state.hasPermissionToLoad) {
this.setScalarToken();
}
} }
componentDidMount() { componentDidMount() {
@ -164,8 +167,6 @@ export default class AppTile extends React.Component {
* Component initialisation is only complete when this function has resolved * Component initialisation is only complete when this function has resolved
*/ */
setScalarToken() { setScalarToken() {
this.setState({initialising: true});
if (!WidgetUtils.isScalarUrl(this.props.url)) { if (!WidgetUtils.isScalarUrl(this.props.url)) {
console.warn('Non-scalar widget, not setting scalar token!', url); console.warn('Non-scalar widget, not setting scalar token!', url);
this.setState({ this.setState({
@ -214,11 +215,20 @@ export default class AppTile extends React.Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.url !== this.props.url) { if (nextProps.url !== this.props.url) {
this._getNewState(nextProps); this._getNewState(nextProps);
this.setScalarToken(); // Fetch IM token for new URL if we're showing and have permission to load
} else if (nextProps.show && !this.props.show && this.props.waitForIframeLoad) { if (this.props.show && this.state.hasPermissionToLoad) {
this.setState({ this.setScalarToken();
loading: true, }
}); } else if (nextProps.show && !this.props.show) {
if (this.props.waitForIframeLoad) {
this.setState({
loading: true,
});
}
// Fetch IM token now that we're showing if we already have permission to load
if (this.state.hasPermissionToLoad) {
this.setScalarToken();
}
} else if (nextProps.widgetPageTitle !== this.props.widgetPageTitle) { } else if (nextProps.widgetPageTitle !== this.props.widgetPageTitle) {
this.setState({ this.setState({
widgetPageTitle: nextProps.widgetPageTitle, widgetPageTitle: nextProps.widgetPageTitle,
@ -410,6 +420,8 @@ export default class AppTile extends React.Component {
console.warn('Granting permission to load widget - ', this.state.widgetUrl); console.warn('Granting permission to load widget - ', this.state.widgetUrl);
localStorage.setItem(this.state.widgetPermissionId, true); localStorage.setItem(this.state.widgetPermissionId, true);
this.setState({hasPermissionToLoad: true}); this.setState({hasPermissionToLoad: true});
// Now that we have permission, fetch the IM token
this.setScalarToken();
} }
_revokeWidgetPermission() { _revokeWidgetPermission() {
@ -525,13 +537,24 @@ export default class AppTile extends React.Component {
<MessageSpinner msg='Loading...' /> <MessageSpinner msg='Loading...' />
</div> </div>
); );
if (this.state.initialising) { if (!this.state.hasPermissionToLoad) {
const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
appTileBody = (
<div className={appTileBodyClass}>
<AppPermission
isRoomEncrypted={isRoomEncrypted}
url={this.state.widgetUrl}
onPermissionGranted={this._grantWidgetPermission}
/>
</div>
);
} else if (this.state.initialising) {
appTileBody = ( appTileBody = (
<div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}> <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}>
{ loadingElement } { loadingElement }
</div> </div>
); );
} else if (this.state.hasPermissionToLoad == true) { } else {
if (this.isMixedContent()) { if (this.isMixedContent()) {
appTileBody = ( appTileBody = (
<div className={appTileBodyClass}> <div className={appTileBodyClass}>
@ -571,17 +594,6 @@ export default class AppTile extends React.Component {
</div>; </div>;
} }
} }
} else {
const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
appTileBody = (
<div className={appTileBodyClass}>
<AppPermission
isRoomEncrypted={isRoomEncrypted}
url={this.state.widgetUrl}
onPermissionGranted={this._grantWidgetPermission}
/>
</div>
);
} }
} }