Make CORS domains configurable in UI (#13174)

* Make CORS domain configureable in UI

* Move trusted host settings to SystemSettings class

* Use unique id for pluginSettings

* Improve styling

* Improve help text

* improve code & naming

* Implements new UI field array type

* review adjustments

* reorganize form demo

* update UI files

* update system test files

* Improve handling of Config Settings

6 files changed, 78 insertions, 151 deletions

diff --git a/plugins/CoreAdminHome/SystemSettings.php b/plugins/CoreAdminHome/SystemSettings.php
new file mode 100644
index 0000000000..0adc00ada6
--- /dev/null
+++ b/plugins/CoreAdminHome/SystemSettings.php
@@ -0,0 +1,63 @@
+<?php
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+namespace Piwik\Plugins\CoreAdminHome;
+
+use Piwik\Piwik;
+use Piwik\Plugins\CoreAdminHome\Controller as CoreAdminController;
+use Piwik\Settings\Setting;
+use Piwik\Settings\FieldConfig;
+
+class SystemSettings extends \Piwik\Settings\Plugin\SystemSettings
+{
+    /** @var Setting */
+    public $corsDomains;
+
+    /** @var Setting */
+    public $trustedHostnames;
+
+    protected function init()
+    {
+        $this->title = ' '; // intentionally left blank as it's hidden with css
+
+        $isWritable = Piwik::hasUserSuperUserAccess() && CoreAdminController::isGeneralSettingsAdminEnabled();
+        $this->trustedHostnames = $this->createTrustedHostnames();
+        $this->trustedHostnames->setIsWritableByCurrentUser($isWritable);
+        $this->corsDomains = $this->createCorsDomains();
+        $this->corsDomains->setIsWritableByCurrentUser($isWritable);
+    }
+
+
+    private function createCorsDomains()
+    {
+        return $this->makeSettingManagedInConfigOnly('General', 'cors_domains', $default = [], FieldConfig::TYPE_ARRAY, function (FieldConfig $field) {
+            $field->introduction = Piwik::translate('CoreAdminHome_CorsDomains');
+            $field->uiControl = FieldConfig::UI_CONTROL_FIELD_ARRAY;
+            $arrayField = new FieldConfig\ArrayField(Piwik::translate('Overlay_Domain'), FieldConfig::UI_CONTROL_TEXT);
+            $field->uiControlAttributes['field'] = $arrayField->toArray();
+            $field->inlineHelp = Piwik::translate('CoreAdminHome_CorsDomainsHelp');
+            $field->transform = function($values) {
+                return array_filter($values);
+            };
+        });
+    }
+
+    private function createTrustedHostnames()
+    {
+        return $this->makeSettingManagedInConfigOnly('General', 'trusted_hosts', $default = [], FieldConfig::TYPE_ARRAY, function (FieldConfig $field) {
+            $field->introduction = Piwik::translate('CoreAdminHome_TrustedHostSettings');
+            $field->uiControl = FieldConfig::UI_CONTROL_FIELD_ARRAY;
+            $arrayField = new FieldConfig\ArrayField(Piwik::translate('CoreAdminHome_ValidPiwikHostname'), FieldConfig::UI_CONTROL_TEXT);
+            $field->uiControlAttributes['field'] = $arrayField->toArray();
+            $field->transform = function($values) {
+                return array_filter($values);
+            };
+        });
+    }
+
+}
diff --git a/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.controller.js b/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.controller.js
deleted file mode 100644
index adcaf69e29..0000000000
--- a/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.controller.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*!
- * Piwik - free/libre analytics platform
- *
- * @link http://piwik.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * Controller to save archiving settings
- */
-(function () {
-    angular.module('piwikApp').controller('TrustedHostsController', TrustedHostsController);
-
-    TrustedHostsController.$inject = ['$scope', 'piwikApi', '$timeout'];
-
-    function TrustedHostsController($scope, piwikApi, $timeout) {
-
-        var self = this;
-        this.isLoading = false;
-
-        this.addTrustedHost = function () {
-            this.hosts.push({host: ''});
-
-            $timeout(function () {
-                $('#trustedHostSettings').find('li:last input').val('').focus();
-            });
-        };
-
-        this.removeTrustedHost = function (index) {
-            this.hosts.splice(index,1);
-        };
-
-        this.save = function () {
-            var hosts = [];
-            angular.forEach(self.hosts, function (host) {
-                hosts.push(host.host);
-            });
-
-            var doSubmit = function () {
-                self.isLoading = true;
-
-                piwikApi.post({module: 'API', method: 'CoreAdminHome.setTrustedHosts'}, {
-                    trustedHosts: hosts
-                }).then(function (success) {
-                    self.isLoading = false;
-
-                    var UI = require('piwik/UI');
-                    var notification = new UI.Notification();
-                    notification.show(_pk_translate('CoreAdminHome_SettingsSaveSuccess'), {
-                        id: 'generalSettings', context: 'success'
-                    });
-                    notification.scrollToNotification();
-                }, function () {
-                    self.isLoading = false;
-                });
-            };
-
-            piwikHelper.modalConfirm('#confirmTrustedHostChange', {yes: doSubmit});
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.directive.js b/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.directive.js
deleted file mode 100644
index 10485b8a1d..0000000000
--- a/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.directive.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*!
- * Piwik - free/libre analytics platform
- *
- * @link http://piwik.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * Usage:
- * <div piwik-trusted-hosts-setting>
- */
-(function () {
-    angular.module('piwikApp').directive('piwikTrustedHostsSetting', piwikTrustedHostsSetting);
-
-    piwikTrustedHostsSetting.$inject = ['piwik'];
-
-    function piwikTrustedHostsSetting(piwik){
-
-        return {
-            restrict: 'A',
-            transclude: true,
-            template: '<div ng-transclude></div>',
-            controller: 'TrustedHostsController',
-            controllerAs: 'trustedHosts',
-            compile: function (element, attrs) {
-
-                return function (scope, element, attrs, controller) {
-                    controller.hosts = [];
-                    angular.forEach(JSON.parse(attrs.piwikTrustedHostsSetting), function (host) {
-                        controller.hosts.push({host: host});
-                    });
-                };
-            }
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/CoreAdminHome/lang/en.json b/plugins/CoreAdminHome/lang/en.json
index 2f5a0f26b0..349a838f3d 100644
--- a/plugins/CoreAdminHome/lang/en.json
+++ b/plugins/CoreAdminHome/lang/en.json
@@ -7,6 +7,8 @@
         "ReleaseChannel": "Release channel",
         "ClickHereToOptIn": "Click here to opt in.",
         "ClickHereToOptOut": "Click here to opt out.",
+        "CorsDomains": "Cross-Origin Resource Sharing (CORS) domains",
+        "CorsDomainsHelp": "You can define domains or subdomains like http://example.com or http://stats.example.com. Or to allow cross domain requests for all domains simply add a *",
         "CustomLogoFeedbackInfo": "If you customize the Matomo logo, you might also be interested to hide the %1$s link in the top menu. To do so, you can disable the Feedback plugin in the %2$sManage Plugins%3$s page.",
         "CustomLogoHelpText": "You can customize the Matomo logo which will be displayed in the user interface and email reports.",
         "DevelopmentProcess": "While our %1$sdevelopment process%2$s includes thousands of automated tests, Beta Testers play a key role in achieving the \"No bug policy\" in Matomo.",
diff --git a/plugins/CoreAdminHome/stylesheets/generalSettings.less b/plugins/CoreAdminHome/stylesheets/generalSettings.less
index 9a45fa2b16..bedda0f80c 100644
--- a/plugins/CoreAdminHome/stylesheets/generalSettings.less
+++ b/plugins/CoreAdminHome/stylesheets/generalSettings.less
@@ -39,16 +39,17 @@
     padding-bottom: 10px;
 }
 
-/* trusted host styles */
-#trustedHostSettings input:not(.btn) {
-    width: 238px;
-}
-
-#trustedHostSettings li {
-    padding-bottom: 6px;
-}
+#CoreAdminHomePluginSettings {
+    h2 {
+        display: none;
+    }
+    h3 {
+        margin: 0;
+        font-size: 24px;
+        padding: 0;
+    }
 
-#trustedHostSettings .add-trusted-host-container,
-#corsSettings .add-cors-host-container {
-    padding: 12px 24px;
-}
+    .fieldArray {
+        margin-top: 0!important;
+    }
+}
\ No newline at end of file
diff --git a/plugins/CoreAdminHome/templates/generalSettings.twig b/plugins/CoreAdminHome/templates/generalSettings.twig
index f23a80678c..45dfaca9f1 100644
--- a/plugins/CoreAdminHome/templates/generalSettings.twig
+++ b/plugins/CoreAdminHome/templates/generalSettings.twig
@@ -215,48 +215,6 @@
     </div>
 </div>
 
-<div piwik-content-block content-title="{{ 'CoreAdminHome_TrustedHostSettings'|translate|e('html_attr') }}">
-    <a name="trustedHostsSection"></a>
-    <div class="ui-confirm" id="confirmTrustedHostChange">
-        <h2>{{ 'CoreAdminHome_TrustedHostConfirm'|translate }}</h2>
-        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
-    </div>
-    <div id='trustedHostSettings' piwik-trusted-hosts-setting='{{ trustedHosts|json_encode }}'>
-
-        {% include "@CoreHome/_warningInvalidHost.twig" %}
-
-        {% if not isGeneralSettingsAdminEnabled %}
-            {{ 'CoreAdminHome_PiwikIsInstalledAt'|translate }}: {{ trustedHosts|join(", ") }}
-        {% else %}
-            <div class="form-group row">
-                <label>{{ 'CoreAdminHome_ValidPiwikHostname'|translate }}</label>
-            </div>
-            <ul>
-                <li ng-repeat="trustedHost in trustedHosts.hosts">
-                    <input ng-model="trustedHost.host" type="text"/>
-                    <a href="javascript:;" ng-click="trustedHosts.removeTrustedHost($index);"
-                       class="remove-trusted-host btn-flat btn-large" title="{{ 'General_Delete'|translate }}">
-                        <span class="icon-minus"></span>
-                    </a>
-                </li>
-            </ul>
-
-            <div class="add-trusted-host">
-                <input type="text" ng-click="trustedHosts.addTrustedHost();"
-                       placeholder="{{ 'CoreAdminHome_AddNewTrustedHost'|translate|e('html_attr') }}" readonly/>
-
-                <a href="#" ng-click="trustedHosts.addTrustedHost();"
-                   class="btn-flat btn-large" title="{{ 'General_Add'|translate }}">
-                    <span class="icon-add"></span>
-                </a>
-            </div>
-
-            <div onconfirm="trustedHosts.save()" saving="trustedHosts.isLoading" piwik-save-button></div>
-        {% endif %}
-    </div>
-
-</div>
 {% if isDataPurgeSettingsEnabled %}
     <div piwik-content-block content-title="{{ 'PrivacyManager_DeleteDataSettings'|translate|e('html_attr') }}">
         <p>{{ 'PrivacyManager_DeleteDataDescription'|translate }} {{ 'PrivacyManager_DeleteDataDescription2'|translate }}</p>