diff --git a/src/control/content/app.js b/src/control/content/app.js index 911ce04..a6aba78 100644 --- a/src/control/content/app.js +++ b/src/control/content/app.js @@ -1,137 +1,154 @@ -var webviewPluginApp = angular.module('webviewPlugin', []); - -webviewPluginApp.controller("webviewPluginCtrl", ["$scope", "$log", "$timeout", function ($scope, $log, $timeout) { - var dataChanged = false; - $scope.datastoreInitialized = false; - $scope.urlValid = false; - $scope.urlInValid = false; - $scope.viewType = { - NATIVE_IN_APP: 'Native In App', - IN_APP_POPUP: 'In app popup', - EXTERNAL_BROWSER: 'External browser' - }; - /* - * Go pull any previously saved data - * */ - buildfire.datastore.get(function (err, result) { - if (!err) { - $scope.datastoreInitialized = true; - } else { - console.error("Error: ", err); - return; - } - if (result && result.data && !angular.equals({}, result.data) && result.id) { - $scope.data = result.data; - $scope.id = result.id; - if (typeof result.data.content.openInApp != 'undefined' && typeof result.data.content.openInApp != 'object') { - if (result.data.content.openInApp) - $scope.data.content.view = $scope.viewType.NATIVE_IN_APP; - else - $scope.data.content.view = $scope.viewType.IN_APP_POPUP; - } - } else { - $scope.data = { - content: { - url: "", - view: $scope.viewType.NATIVE_IN_APP - } - }; - } - - /* - * watch for changes in data - * */ - $scope.$watch('data', function (newObj, oldObj) { - if (angular.equals(newObj, oldObj) || newObj == undefined) { - dataChanged = false; - } else { - dataChanged = true; - } - }, true); - - if (!$scope.$$phase && !$scope.$root.$$phase) { - $scope.$apply(); - } - }); - - $scope.saveData = function () { - if (!$scope.datastoreInitialized) { - console.error("Error with datastore didn't get called"); - return; - } - if (!dataChanged) { - console.warn("data didn't changed"); - return; - } - var data = $scope.data; - // if the form has some invalid data do not save, in our case the user eneter invalid URL - if ($scope.frmMain.$invalid) { - $log.warn('invalid data, details will not be saved'); - $scope.urlValid = false; - $scope.urlInValid = true; - $timeout(function () { - $scope.urlInValid = false; - }, 3000); - } else { - $scope.urlValid = true; - $scope.urlInValid = false; - $timeout(function () { - $scope.urlValid = false; - }, 3000); - dataChanged = false; - if (!/^https?\:\/\//.test(data.content.url)) { - data.content.url = "http://" + data.content.url; +(function(angular, buildfire) { + var webviewPluginApp = angular.module('webviewPlugin', []); + + webviewPluginApp.controller('webviewPluginCtrl', ['$scope', '$log', '$timeout', controller]); + + function controller($scope, $log, $timeout) { + var dataChanged = false; + $scope.datastoreInitialized = false; + $scope.urlValid = false; + $scope.urlInValid = false; + $scope.viewType = { + NATIVE_IN_APP: 'Native In App', + IN_APP_POPUP: 'In app popup', + EXTERNAL_BROWSER: 'External browser' + }; + + buildfire.datastore.get(function(err, result) { + if (err) return console.error('Error: ', err); + + $scope.datastoreInitialized = true; + + if (isValidResult(result)) { + $scope.data = result.data; + $scope.id = result.id; + + var type = typeof result.data.content.openInApp; + + if (type != 'undefined' && type != 'object') { + if (result.data.content.openInApp) { + $scope.data.content.view = $scope.viewType.NATIVE_IN_APP; + } else { + $scope.data.content.view = $scope.viewType.IN_APP_POPUP; + } + } + } else { + $scope.data = { + content: { + url: '', + view: $scope.viewType.NATIVE_IN_APP + } + }; + } + + $scope.$watch('data', watchFn, true); + function watchFn(newObj, oldObj) { + if (angular.equals(newObj, oldObj) || newObj == undefined) { + dataChanged = false; + } else { + dataChanged = true; + } } - if (data.content.openInApp != undefined) - data.content.openInApp = null; - buildfire.datastore.save(data, function (err, result) { - if (err || !result) { - $log.error('Error saving the widget details: ', err); - } - else { - $log.info('Widget details saved'); - } - }); - } - }; + if (!$scope.$$phase && !$scope.$root.$$phase) { + $scope.$apply(); + } + + function isValidResult(res) { + return res && res.data && !angular.equals({}, res.data) && res.id; + } + }); - $scope.validateUrl = function () { - $scope.saveData(); - }; + buildfire.messaging.onReceivedMessage = function (message) { + buildfire.messaging.sendMessageToWidget(message); + }; + + $scope.saveData = function() { + if (!$scope.datastoreInitialized) { + return console.error("Error with datastore didn't get called"); + } + + if (!dataChanged) { + return console.warn("data didn't change"); + } + + if ($scope.frmMain.$invalid) return setDataInvalid(); + + var data = $scope.data; + dataChanged = false; + + setDataValid(); + + if (!/^https?\:\/\//.test(data.content.url)) { + data.content.url = 'http://' + data.content.url; + } + + if (data.content.openInApp != undefined) { + data.content.openInApp = null; + } + + buildfire.datastore.save(data, function(err, result) { + if (err || !result) { + return $log.error('Error saving the widget details: ', err); + } + + $log.info('Widget details saved'); + }); + + function setDataInvalid() { + $log.warn('invalid data, details will not be saved'); + $scope.urlValid = false; + $scope.urlInValid = true; + $timeout(function() { + $scope.urlInValid = false; + }, 3000); + } + + function setDataValid() { + $scope.urlValid = true; + $scope.urlInValid = false; + $timeout(function() { + $scope.urlValid = false; + }, 3000); + } + }; + + $scope.validateUrl = function() { + $scope.saveData(); + }; + + $scope.changeViewType = function() { + dataChanged = true; + + if ($scope.frmMain.$invalid) return; - $scope.changeViewType = function () { - dataChanged = true; - if (!$scope.frmMain.$invalid) { var data = $scope.data; - console.log("***********save", data.content.openInApp); + if (data.content.openInApp != undefined) { data.content.openInApp = null; } - buildfire.datastore.save(data, function (err, result) { + buildfire.datastore.save(data, function(err, result) { if (err || !result) { $log.error('Error saving the widget details: ', err); - } - else { + } else { $log.info('Widget details saved'); } }); - } - }; - - $scope.openMethodChanged = function () { - dataChanged = true; - buildfire.datastore.save($scope.data, function (err, result) { - if (err || !result) { - $log.error('Error saving the widget details: ', err); - } - else { - $log.info('Widget details saved'); - } - }); - }; + }; + + $scope.openMethodChanged = function() { + dataChanged = true; + buildfire.datastore.save($scope.data, function(err, result) { + if (err || !result) { + $log.error('Error saving the widget details: ', err); + } else { + $log.info('Widget details saved'); + } + }); + }; - $scope.isUrlValid = function (url) { - return /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,6}\b(\/[-a-zA-Z0-9@:%_\+.~#?!?\/?\w\/?&//=]*)?/.test(url); - }; -}]); \ No newline at end of file + $scope.isUrlValid = function(url) { + return /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,6}\b(\/[-a-zA-Z0-9@:%_\+.~#?!?\/?\w\/?&//=]*)?/.test(url); + }; + } +})(window.angular, window.buildfire); diff --git a/src/widget/index.html b/src/widget/index.html index 88a5efa..ecadf52 100755 --- a/src/widget/index.html +++ b/src/widget/index.html @@ -3,6 +3,7 @@ + @@ -21,5 +34,8 @@

Success!

web page now click here

+
+
+
diff --git a/src/widget/widget.js b/src/widget/widget.js index 9eccd08..04c3400 100644 --- a/src/widget/widget.js +++ b/src/widget/widget.js @@ -42,8 +42,10 @@ const render = (content) => { } }; + window.document.getElementById('successMessage').style.display = 'none'; + setFlags(content); - const displayIniFrame = flags.isNotCP && flags.shouldOpenInApp; //on the device and open native + const displayIniFrame = flags.shouldOpenInApp; //on the device and open native const openWindow = flags.isNotCP && !flags.shouldOpenInApp; //on the device and open in pop up or native brow const displaySuccessMessage = content.url && flags.isWeb && !flags.isLiveMode; @@ -66,6 +68,8 @@ const renderiFrame = (props) =>{ currentIframe.remove(); } + removeLoadingText(); + let scrollable = window.document.getElementById('scrollable'); if (!scrollable && props.isIOS) { window.document.body.appendChild((() => { @@ -97,6 +101,22 @@ const renderiFrame = (props) =>{ let container = props.isIOS ? scrollable : window.document.body; container.appendChild((() => { + + if (flags.isWeb) { + let modal = (document.querySelectorAll('div[id^="confirm"]') || [])[0]; + if (modal) { + let confirm = (modal.querySelectorAll('.approve-confirmation') || [])[0]; + if (confirm && confirm.click) confirm.click(); + } + + const targetProtocol = (/[a-z]{4,5}:/g.exec(props.url) || [])[0] || false; + let url = (/(http|https):\/\/\S+\.[a-z]+/g.exec(props.url) || [])[0] || 'this site'; + + if (window.location.protocol === 'https:' && targetProtocol === 'http:') { + buildfire.messaging.sendMessageToControl({ tag: 'mixedContent', url: url }); + } + } + let iFrame = window.document.createElement('iframe'); iFrame.id = 'webviewIframe'; iFrame.src = props.url; @@ -105,8 +125,13 @@ const renderiFrame = (props) =>{ iFrame.style.width = '1px'; iFrame.style.minWidth = '100%'; iFrame.onload = () => { - window.document.getElementById('loadingText').remove(); + removeLoadingText(); + buildfire.messaging.sendMessageToControl({ tag: 'displayWarning' }); }; + setTimeout(() => { + removeLoadingText(); + }, 3000); + return iFrame; })()); }; @@ -137,3 +162,40 @@ buildfire.datastore.get((err, result) => { console.log('appearance.ready() failed. Is sdk up to date?'); } }); +buildfire.messaging.onReceivedMessage = message => { + if (message.tag === 'mixedContent' && message.url) { + return mixedContentWarning(message.url); + } + if (message.tag === 'displayWarning') { + return showPopup(); + } +}; + +function removeLoadingText() { + let loadingText = window.document.getElementById('loadingText'); + if (loadingText) loadingText.remove(); +} + +function showPopup() { + if (localStorage.getItem('webview_modal-shown')) return; + + var options = { + message: 'This view may vary based on device resolution', + target: document.getElementById('warning-message'), + buttonLabels: ['I understand'] + }; + + buildfire.notifications.confirm(options, function() { + localStorage.setItem('webview_modal-shown', '1'); + }); +} + +function mixedContentWarning(url) { + var options = { + message: `Can't render ${url}. Insecure resources (http) cannot be displayed in the control panel or PWAs, but may function on devices. Some operating systems also require https.`, + target: document.getElementById('warning-message'), + buttonLabels: ['I understand'] + }; + + buildfire.notifications.confirm(options, () => { }); +}