mirror of
https://github.com/balena-io/etcher.git
synced 2025-04-24 07:17:18 +00:00
fix(GUI): reset webview after navigating away (#1422)
We reload and reset the webview to its original URL when the user navigates away from the success screen. Changelog-Entry: Reset webview after navigating away from the success screen.
This commit is contained in:
Benedict Aas
Juan Cruz Viotti
parent
a3c13e75cf
commit
31a2389d04
@ -59,7 +59,7 @@ const app = angular.module('Etcher', [
|
||||
// Components
|
||||
require('./components/svg-icon/svg-icon'),
|
||||
require('./components/warning-modal/warning-modal'),
|
||||
require('./components/safe-webview/safe-webview'),
|
||||
require('./components/safe-webview'),
|
||||
|
||||
// Pages
|
||||
require('./pages/main/main'),
|
||||
@ -300,11 +300,40 @@ app.controller('HeaderController', function(SelectionStateModel, OSOpenExternalS
|
||||
|
||||
});
|
||||
|
||||
app.controller('StateController', function($state) {
|
||||
app.controller('StateController', function($rootScope, $scope) {
|
||||
const unregisterStateChange = $rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState) => {
|
||||
this.previousName = fromState.name;
|
||||
this.currentName = toState.name;
|
||||
});
|
||||
|
||||
$scope.$on('$destroy', unregisterStateChange);
|
||||
|
||||
/**
|
||||
* @param {string} state - state page
|
||||
* @summary Get the previous state name
|
||||
* @function
|
||||
* @public
|
||||
*
|
||||
* @returns {String} previous state name
|
||||
*
|
||||
* @example
|
||||
* if (StateController.previousName === 'main') {
|
||||
* console.log('We left the main screen!');
|
||||
* }
|
||||
*/
|
||||
this.is = $state.is;
|
||||
this.previousName = null;
|
||||
|
||||
/**
|
||||
* @summary Get the current state name
|
||||
* @function
|
||||
* @public
|
||||
*
|
||||
* @returns {String} current state name
|
||||
*
|
||||
* @example
|
||||
* if (StateController.currentName === 'main') {
|
||||
* console.log('We are on the main screen!');
|
||||
* }
|
||||
*/
|
||||
this.currentName = null;
|
||||
|
||||
});
|
||||
|
||||
247
lib/gui/components/safe-webview.js
Normal file
247
lib/gui/components/safe-webview.js
Normal file
@ -0,0 +1,247 @@
|
||||
/*
|
||||
* Copyright 2017 resin.io
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const _ = require('lodash');
|
||||
const electron = require('electron');
|
||||
const angular = require('angular');
|
||||
const react = require('react');
|
||||
const propTypes = require('prop-types');
|
||||
const react2angular = require('react2angular').react2angular;
|
||||
const analytics = require('../modules/analytics');
|
||||
const packageJSON = require('../../../package.json');
|
||||
const robot = require('../../shared/robot');
|
||||
|
||||
const MODULE_NAME = 'Etcher.Components.SafeWebview';
|
||||
const angularSafeWebview = angular.module(MODULE_NAME, []);
|
||||
|
||||
/**
|
||||
* @summary GET parameter sent to the initial webview source URL
|
||||
* @constant
|
||||
* @private
|
||||
* @type {String}
|
||||
*/
|
||||
const VERSION_PARAM = 'etcher-version';
|
||||
|
||||
/**
|
||||
* @summary Electron session identifier
|
||||
* @constant
|
||||
* @private
|
||||
* @type {String}
|
||||
*/
|
||||
const ELECTRON_SESSION = 'persist:success-banner';
|
||||
|
||||
/**
|
||||
* @summary Webviews that hide/show depending on the HTTP status returned
|
||||
* @type {Object}
|
||||
* @public
|
||||
*
|
||||
* @example
|
||||
* <safe-webview src="https://etcher.io/"></safe-webview>
|
||||
*/
|
||||
class SafeWebview extends react.PureComponent {
|
||||
|
||||
/**
|
||||
* @param {Object} props - React element properties
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
shouldShow: true
|
||||
};
|
||||
|
||||
const url = new URL(props.src);
|
||||
|
||||
// We set the version GET parameter here.
|
||||
url.searchParams.set(VERSION_PARAM, packageJSON.version);
|
||||
|
||||
this.entryHref = url.href;
|
||||
|
||||
// Events steal 'this'
|
||||
this.didFailLoad = _.bind(this.didFailLoad, this);
|
||||
this.didGetResponseDetails = _.bind(this.didGetResponseDetails, this);
|
||||
|
||||
this.eventTuples = [
|
||||
[ 'did-fail-load', this.didFailLoad ],
|
||||
[ 'did-get-response-details', this.didGetResponseDetails ],
|
||||
[ 'new-window', this.constructor.newWindow ],
|
||||
[ 'console-message', this.constructor.consoleMessage ]
|
||||
];
|
||||
|
||||
// Make a persistent electron session for the webview
|
||||
electron.remote.session.fromPartition(ELECTRON_SESSION, {
|
||||
|
||||
// Disable the cache for the session such that new content shows up when refreshing
|
||||
cache: false
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {react.Element}
|
||||
*/
|
||||
render() {
|
||||
return react.createElement('webview', {
|
||||
ref: 'webview',
|
||||
style: {
|
||||
flex: this.state.shouldShow ? null : '0 1',
|
||||
width: this.state.shouldShow ? null : '0',
|
||||
height: this.state.shouldShow ? null : '0'
|
||||
}
|
||||
}, []);
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Add the Webview events
|
||||
*/
|
||||
componentDidMount() {
|
||||
|
||||
// Events React is unaware of have to be handled manually
|
||||
_.map(this.eventTuples, (tuple) => {
|
||||
this.refs.webview.addEventListener(...tuple);
|
||||
});
|
||||
|
||||
// Use the 'success-banner' session
|
||||
this.refs.webview.partition = ELECTRON_SESSION;
|
||||
|
||||
// It's important that this comes after the partition setting, otherwise it will
|
||||
// use another session and we can't change it without destroying the element again
|
||||
this.refs.webview.src = this.entryHref;
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Remove the Webview events
|
||||
*/
|
||||
componentWillUnmount() {
|
||||
|
||||
// Events that React is unaware of have to be handled manually
|
||||
_.map(this.eventTuples, (tuple) => {
|
||||
this.refs.webview.removeEventListener(...tuple);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Refresh the webview if we are navigating away from the success page
|
||||
* @param {Object} nextProps - upcoming properties
|
||||
*/
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.refreshNow && !this.props.refreshNow) {
|
||||
|
||||
// Reload the page if it hasn't changed, otherwise reset the source URL,
|
||||
// because reload interferes with 'src' setting, resetting the 'src' attribute
|
||||
// to what it was was just prior.
|
||||
if (this.refs.webview.src === this.entryHref) {
|
||||
this.refs.webview.reload();
|
||||
|
||||
} else {
|
||||
this.refs.webview.src = this.entryHref;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
shouldShow: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Set the element state to hidden
|
||||
*/
|
||||
didFailLoad() {
|
||||
this.setState({
|
||||
shouldShow: false
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Set the element state depending on the HTTP response code
|
||||
* @param {Event} event - Event object
|
||||
*/
|
||||
didGetResponseDetails(event) {
|
||||
const HTTP_OK = 200;
|
||||
const HTTP_ERR = 400;
|
||||
|
||||
this.setState({
|
||||
shouldShow: event.httpResponseCode >= HTTP_OK && event.httpResponseCode < HTTP_ERR
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Open link in browser if it's opened as a 'foreground-tab'
|
||||
* @param {Event} event - event object
|
||||
*/
|
||||
static newWindow(event) {
|
||||
const url = new URL(event.url);
|
||||
|
||||
if (_.every([
|
||||
url.protocol === 'http:' || url.protocol === 'https:',
|
||||
event.disposition === 'foreground-tab'
|
||||
])) {
|
||||
electron.shell.openExternal(url.href);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Forward specially-formatted console messages from the webview
|
||||
* @param {Event} event - event object
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* // In the webview
|
||||
* console.log(JSON.stringify({
|
||||
* command: 'error',
|
||||
* data: 'Good night!'
|
||||
* }));
|
||||
*
|
||||
* console.log(JSON.stringify({
|
||||
* command: 'log',
|
||||
* data: 'Hello, Mars!'
|
||||
* }));
|
||||
*/
|
||||
static consoleMessage(event) {
|
||||
if (!robot.isMessage(event.message)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const message = robot.parseMessage(event.message);
|
||||
|
||||
if (robot.getCommand(message) === robot.COMMAND.LOG) {
|
||||
analytics.logEvent(robot.getData(message));
|
||||
|
||||
} else if (robot.getCommand(message) === robot.COMMAND.ERROR) {
|
||||
analytics.logException(robot.getData(message));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
SafeWebview.propTypes = {
|
||||
|
||||
/**
|
||||
* @summary The website source URL
|
||||
*/
|
||||
src: propTypes.string.isRequired,
|
||||
|
||||
/**
|
||||
* @summary Refresh the webview
|
||||
*/
|
||||
refreshNow: propTypes.bool
|
||||
|
||||
};
|
||||
|
||||
angularSafeWebview.component('safeWebview', react2angular(SafeWebview));
|
||||
|
||||
module.exports = MODULE_NAME;
|
||||
@ -1,173 +0,0 @@
|
||||
/*
|
||||
* Copyright 2017 resin.io
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const _ = require('lodash');
|
||||
const electron = require('electron');
|
||||
const angular = require('angular');
|
||||
const react = require('react');
|
||||
const propTypes = require('prop-types');
|
||||
const react2angular = require('react2angular').react2angular;
|
||||
const analytics = require('../../modules/analytics');
|
||||
const packageJSON = require('../../../../package.json');
|
||||
|
||||
const MODULE_NAME = 'Etcher.Components.SafeWebview';
|
||||
const angularSafeWebview = angular.module(MODULE_NAME, []);
|
||||
|
||||
/**
|
||||
* @summary Webviews that time out
|
||||
* @type {Object}
|
||||
* @public
|
||||
*/
|
||||
class SafeWebview extends react.PureComponent {
|
||||
|
||||
/**
|
||||
* @param {Object} props - React element properties
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
shouldLoad: true
|
||||
};
|
||||
|
||||
// Events steal 'this'
|
||||
this.didFailLoad = _.bind(this.didFailLoad, this);
|
||||
this.didGetResponseDetails = _.bind(this.didGetResponseDetails, this);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {react.Element}
|
||||
*/
|
||||
render() {
|
||||
if (this.state.shouldLoad) {
|
||||
const url = new URL(this.props.src);
|
||||
|
||||
// We set the 'etcher-version' GET parameter here.
|
||||
url.searchParams.set('etcher-version', packageJSON.version);
|
||||
|
||||
return react.createElement('webview', {
|
||||
ref: 'webview',
|
||||
src: url.href
|
||||
}, []);
|
||||
}
|
||||
|
||||
// We have to return null explicitly, undefined is an error in React.
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Add the Webview events if there is an element
|
||||
*/
|
||||
componentDidMount() {
|
||||
|
||||
// There is no element to add events to if 'shouldLoad' is false.
|
||||
if (this.state.shouldLoad) {
|
||||
|
||||
// Events React is unaware of have to be handled manually
|
||||
this.refs.webview.addEventListener('did-fail-load', this.didFailLoad);
|
||||
this.refs.webview.addEventListener('did-get-response-details', this.didGetResponseDetails);
|
||||
this.refs.webview.addEventListener('new-window', this.constructor.newWindow);
|
||||
this.refs.webview.addEventListener('console-message', this.constructor.consoleMessage);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Remove the Webview events if there is an element
|
||||
*/
|
||||
componentWillUnmount() {
|
||||
|
||||
// There is no element to remove events from if 'shouldLoad' is false.
|
||||
if (this.state.shouldLoad) {
|
||||
|
||||
// Events React is unaware of have to be handled manually
|
||||
this.refs.webview.removeEventListener('did-fail-load', this.didFailLoad);
|
||||
this.refs.webview.removeEventListener('did-get-response-details', this.didGetResponseDetails);
|
||||
this.refs.webview.removeEventListener('new-window', this.constructor.newWindow);
|
||||
this.refs.webview.removeEventListener('console-message', this.constructor.consoleMessage);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Set the element state to hidden
|
||||
*/
|
||||
didFailLoad() {
|
||||
this.setState({
|
||||
shouldLoad: false
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Set the element state depending on the HTTP response code
|
||||
* @param {Event} event - Event object
|
||||
*/
|
||||
didGetResponseDetails(event) {
|
||||
const HTTP_OK = 200;
|
||||
const HTTP_ERR = 400;
|
||||
|
||||
if (event.httpResponseCode < HTTP_OK || event.httpResponseCode >= HTTP_ERR) {
|
||||
this.setState({
|
||||
shouldLoad: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Event} event - event object
|
||||
*/
|
||||
static newWindow(event) {
|
||||
const url = new URL(event.url);
|
||||
|
||||
if (_.every([
|
||||
url.protocol === 'http:' || url.protocol === 'https:',
|
||||
event.disposition === 'foreground-tab'
|
||||
])) {
|
||||
electron.shell.openExternal(url.href);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Event} event - event object
|
||||
*/
|
||||
static consoleMessage(event) {
|
||||
const ERROR_LEVEL = 2;
|
||||
|
||||
if (event.level < ERROR_LEVEL) {
|
||||
analytics.logEvent(event.message);
|
||||
|
||||
} else if (event.level === ERROR_LEVEL) {
|
||||
analytics.logException(event.message);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
SafeWebview.propTypes = {
|
||||
|
||||
/**
|
||||
* @summary The website source URL
|
||||
*/
|
||||
src: propTypes.string.isRequired
|
||||
|
||||
};
|
||||
|
||||
angularSafeWebview.component('safeWebview', react2angular(SafeWebview));
|
||||
|
||||
module.exports = MODULE_NAME;
|
||||
@ -31,7 +31,7 @@
|
||||
<main class="wrapper" ui-view></main>
|
||||
|
||||
<footer class="section-footer" ng-controller="StateController as state"
|
||||
ng-hide="state.is('success')">
|
||||
ng-hide="state.currentName === 'success'">
|
||||
<svg-icon path="../../../assets/etcher.svg"
|
||||
width="83px"
|
||||
height="13px"
|
||||
@ -54,10 +54,11 @@
|
||||
<div class="section-loader"
|
||||
ng-controller="StateController as state"
|
||||
ng-class="{
|
||||
isFinish: state.is('success')
|
||||
isFinish: state.currentName === 'success'
|
||||
}">
|
||||
<safe-webview
|
||||
src="'https://etcher.io/success-banner/'"></safe-webview>
|
||||
src="'https://etcher.io/success-banner/'"
|
||||
refresh-now="state.previousName === 'success'"></safe-webview>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user