feat(GUI): reset webview after navigating away

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 success
screen.

lib/gui/app.js

@@ -298,11 +298,18 @@ app.controller('HeaderController', function(SelectionStateModel, OSOpenExternalS
 
 });
 
-app.controller('StateController', function($state) {
+app.controller('StateController', function($rootScope, $state) {
 
  /**
  * @param {string} state - state page
  */
  this.is = $state.is;
 
+ /**
+ * @param {function} func - function to pass $rootScope to
+ */
+ this.onStateChange = (func) => {
+ $rootScope.$on('$stateChangeSuccess', func);
+ };
+
 });

lib/gui/components/safe-webview/safe-webview.js

@@ -84,6 +84,14 @@ class SafeWebview extends react.PureComponent {
  this.refs.webview.addEventListener('new-window', this.constructor.newWindow);
  this.refs.webview.addEventListener('console-message', this.constructor.consoleMessage);
 
+ if (this.props.onStateChange) {
+ this.props.onStateChange((event, toState, toParams, fromState) => {
+ if (fromState.name === 'success' && this.state.shouldLoad) {
+ this.refs.webview.src = this.props.src;
+ this.refs.webview.reload();
+ }
+ });
+ }
  }
  }
 
@@ -164,7 +172,12 @@ SafeWebview.propTypes = {
  /**
  * @summary The website source URL
  */
- src: propTypes.string.isRequired
+ src: propTypes.string.isRequired,
+
+ /**
+ * @summary Inject Angular functionality
+ */
+ onStateChange: propTypes.func
 
 };
 

lib/gui/index.html

@@ -57,7 +57,8 @@
  isFinish: state.is('success')
  }">
  <safe-webview
- src="'https://etcher.io/success-banner/'"></safe-webview>
+ src="'https://etcher.io/success-banner/'"
+ on-state-change="state.onStateChange"></safe-webview>
  </div>
  </body>
 </html>