diff --git a/lib/gui/app.js b/lib/gui/app.js
index 7efac864..57de7653 100644
--- a/lib/gui/app.js
+++ b/lib/gui/app.js
@@ -59,6 +59,7 @@ const app = angular.module('Etcher', [
require('./components/svg-icon/svg-icon'),
require('./components/update-notifier/update-notifier'),
require('./components/warning-modal/warning-modal'),
+ require('./components/safe-webview/safe-webview'),
// Pages
require('./pages/main/main'),
@@ -296,3 +297,12 @@ app.controller('HeaderController', function(SelectionStateModel, OSOpenExternalS
};
});
+
+app.controller('StateController', function($state) {
+
+ /**
+ * @param {string} state - state page
+ */
+ this.is = $state.is;
+
+});
diff --git a/lib/gui/assets/love.svg b/lib/gui/assets/love.svg
new file mode 100644
index 00000000..78291c6f
--- /dev/null
+++ b/lib/gui/assets/love.svg
@@ -0,0 +1,12 @@
+
+
diff --git a/lib/gui/components/safe-webview/safe-webview.js b/lib/gui/components/safe-webview/safe-webview.js
new file mode 100644
index 00000000..bc31812b
--- /dev/null
+++ b/lib/gui/components/safe-webview/safe-webview.js
@@ -0,0 +1,173 @@
+/*
+ * 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;
diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css
index 87fbe405..b0dc5e7f 100644
--- a/lib/gui/css/main.css
+++ b/lib/gui/css/main.css
@@ -6604,6 +6604,9 @@ body {
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+.page-finish {
+ margin-top: -25px; }
+
.page-finish .button-label {
margin: 0 auto 15px;
max-width: 165px; }
@@ -6612,7 +6615,11 @@ body {
min-width: 170px; }
.page-finish .title {
- color: #fff; }
+ color: #fff;
+ font-weight: bold; }
+
+.page-finish .huge-title {
+ font-size: 3.5em; }
.page-finish .label {
display: inline-block; }
@@ -6629,6 +6636,54 @@ body {
padding: 0px;
min-width: 2px; }
+.page-finish .center {
+ display: flex;
+ align-items: center;
+ justify-content: center; }
+
+.page-finish .box > div {
+ margin-bottom: 20px; }
+ .page-finish .box > div > button {
+ margin-right: 20px; }
+
+.page-finish webview {
+ width: 800px;
+ height: 300px;
+ position: absolute;
+ top: 80px;
+ left: 0;
+ z-index: 9001; }
+
+.page-finish .fallback-banner {
+ padding-top: 35px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ height: 300px;
+ position: absolute;
+ top: 125px;
+ left: 0;
+ background-color: #535760;
+ color: #fff;
+ font-weight: 300; }
+ .page-finish .fallback-banner .caption {
+ display: flex; }
+ .page-finish .fallback-banner .caption-big {
+ font-size: 30px; }
+ .page-finish .fallback-banner .caption-small {
+ font-size: 20px;
+ padding: 15px; }
+ .page-finish .fallback-banner .footer-right {
+ padding: 0;
+ border-bottom: 1px dashed; }
+ .page-finish .fallback-banner .svg-icon {
+ margin-left: 0.3em;
+ margin-right: 0.3em; }
+ .page-finish .fallback-banner .section-footer {
+ border-top: none;
+ height: 39px; }
+
body {
letter-spacing: 1px; }
@@ -6660,6 +6715,19 @@ body {
right: 0;
top: 50%; }
+.section-loader webview {
+ flex: 0 1;
+ height: 0;
+ width: 0; }
+
+.section-loader.isFinish webview {
+ flex: initial;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 255px; }
+
.wrapper {
height: 100%;
margin: 20px 60px; }
diff --git a/lib/gui/index.html b/lib/gui/index.html
index 4bd730a6..53aaec80 100644
--- a/lib/gui/index.html
+++ b/lib/gui/index.html
@@ -30,7 +30,8 @@
-