[Vue] migrate DelegateMobileMessagingSettingsController to vue (#18970)

* migrate DelegateMobileMessagintSettingsController to vue

* fix UI tests

* rebuild

* update screenshots

* fix UI tests

Co-authored-by: sgiehl <stefan@matomo.org>

7 files changed, 177 insertions, 52 deletions

diff --git a/plugins/MobileMessaging/MobileMessaging.php b/plugins/MobileMessaging/MobileMessaging.php
index 9be6bf8a45..74c9b15bd6 100644
--- a/plugins/MobileMessaging/MobileMessaging.php
+++ b/plugins/MobileMessaging/MobileMessaging.php
@@ -91,7 +91,6 @@ class MobileMessaging extends \Piwik\Plugin
      */
     public function getJsFiles(&$jsFiles)
     {
-        $jsFiles[] = "plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings.controller.js";
         $jsFiles[] = "plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers.controller.js";
     }
 
@@ -113,6 +112,7 @@ class MobileMessaging extends \Piwik\Plugin
         $translationKeys[] = 'MobileMessaging_UserKey';
         $translationKeys[] = 'General_Password';
         $translationKeys[] = 'MobileMessaging_Settings_APIKey';
+        $translationKeys[] = 'MobileMessaging_Settings_LetUsersManageAPICredential';
     }
     
     public function validateReportParameters(&$parameters, $reportType)
diff --git a/plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings.controller.js b/plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings.controller.js
deleted file mode 100644
index 642802ac31..0000000000
--- a/plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings.controller.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-(function () {
-    angular.module('piwikApp').controller('DelegateMobileMessagingSettingsController', DelegateMobileMessagingSettingsController);
-
-    DelegateMobileMessagingSettingsController.$inject = ['piwikApi', 'piwik'];
-
-    function DelegateMobileMessagingSettingsController(piwikApi, piwik) {
-
-        var self = this;
-        this.isLoading = false;
-
-        this.save = function () {
-            this.isLoading = true;
-
-            piwikApi.post(
-                {method: 'MobileMessaging.setDelegatedManagement'},
-                {delegatedManagement: (this.enabled == '1') ? 'true' : 'false'}
-            ).then(function () {
-
-                var UI = require('piwik/UI');
-                var notification = new UI.Notification();
-                notification.show(_pk_translate('CoreAdminHome_SettingsSaveSuccess'), {
-                    id: 'mobileMessagingSettings', context: 'success'
-                });
-                notification.scrollToNotification();
-                
-                piwik.helper.redirect();
-                self.isLoading = false;
-            }, function () {
-                self.isLoading = false;
-            });
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/MobileMessaging/templates/index.twig b/plugins/MobileMessaging/templates/index.twig
index 32549e9a55..fc25f4af6d 100644
--- a/plugins/MobileMessaging/templates/index.twig
+++ b/plugins/MobileMessaging/templates/index.twig
@@ -8,16 +8,11 @@
 <div class="manageMobileMessagingSettings">
     {% if isSuperUser %}
     <div piwik-content-block content-title="{{ title|e('html_attr') }}">
-        <div ng-controller="DelegateMobileMessagingSettingsController as delegateManagement">
-            <div piwik-field uicontrol="radio" name="delegatedManagement"
-                 options="{{ delegateManagementOptions|json_encode }}"
-                 full-width="true"
-                 ng-model="delegateManagement.enabled"
-                 data-title="{{ 'MobileMessaging_Settings_LetUsersManageAPICredential'|translate|e('html_attr') }}"
-                 value="{% if delegatedManagement %}1{% else %}0{% endif %}">
-            </div>
-            <div piwik-save-button onconfirm="delegateManagement.save()" saving="delegateManagement.isLoading"></div>
-        </div>
+        <div
+          vue-entry="MobileMessaging.DelegateMobileMessagingSettings"
+          delegate-management-options="{{ delegateManagementOptions|default(null)|json_encode|e('html_attr') }}"
+          delegated-management="{{ delegatedManagement|default(null)|json_encode|e('html_attr') }}"
+        ></div>
     </div>
     {% endif %}
 
diff --git a/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.js b/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.js
index 259a4a972c..53777796a6 100644
--- a/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.js
+++ b/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.js
@@ -127,6 +127,7 @@ __webpack_require__.r(__webpack_exports__);
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, "ManageSmsProvider", function() { return /* reexport */ ManageSmsProvider; });
 __webpack_require__.d(__webpack_exports__, "SmsProviderCredentials", function() { return /* reexport */ SmsProviderCredentials; });
+__webpack_require__.d(__webpack_exports__, "DelegateMobileMessagingSettings", function() { return /* reexport */ DelegateMobileMessagingSettings; });
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 // This file is imported into lib/wc client bundles.
@@ -524,6 +525,87 @@ function ManageSmsProvidervue_type_template_id_e42e6e40_render(_ctx, _cache, $pr
 ManageSmsProvidervue_type_script_lang_ts.render = ManageSmsProvidervue_type_template_id_e42e6e40_render
 
 /* harmony default export */ var ManageSmsProvider = (ManageSmsProvidervue_type_script_lang_ts);
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/MobileMessaging/vue/src/DelegateMobileMessagingSettings/DelegateMobileMessagingSettings.vue?vue&type=template&id=8e4eafcc
+
+function DelegateMobileMessagingSettingsvue_type_template_id_8e4eafcc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Field = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("Field");
+
+  var _component_SaveButton = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("SaveButton");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "radio",
+    name: "delegatedManagement",
+    title: _ctx.translate('MobileMessaging_Settings_LetUsersManageAPICredential'),
+    modelValue: _ctx.enabled,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.enabled = $event;
+    }),
+    "full-width": true,
+    options: _ctx.delegateManagementOptions
+  }, null, 8, ["title", "modelValue", "options"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_SaveButton, {
+    onConfirm: _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.save();
+    }),
+    saving: _ctx.isLoading
+  }, null, 8, ["saving"])]);
+}
+// CONCATENATED MODULE: ./plugins/MobileMessaging/vue/src/DelegateMobileMessagingSettings/DelegateMobileMessagingSettings.vue?vue&type=template&id=8e4eafcc
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/MobileMessaging/vue/src/DelegateMobileMessagingSettings/DelegateMobileMessagingSettings.vue?vue&type=script&lang=ts
+
+
+
+/* harmony default export */ var DelegateMobileMessagingSettingsvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    delegateManagementOptions: {
+      type: Array,
+      required: true
+    },
+    delegatedManagement: [Number, Boolean]
+  },
+  components: {
+    Field: external_CorePluginsAdmin_["Field"],
+    SaveButton: external_CorePluginsAdmin_["SaveButton"]
+  },
+  data: function data() {
+    return {
+      isLoading: false,
+      enabled: this.delegatedManagement ? 1 : 0
+    };
+  },
+  methods: {
+    save: function save() {
+      var _this = this;
+
+      this.isLoading = true;
+      external_CoreHome_["AjaxHelper"].post({
+        method: 'MobileMessaging.setDelegatedManagement'
+      }, {
+        delegatedManagement: this.enabled && this.enabled !== '0' ? 'true' : 'false'
+      }).then(function () {
+        var notificationInstanceId = external_CoreHome_["NotificationsStore"].show({
+          message: Object(external_CoreHome_["translate"])('CoreAdminHome_SettingsSaveSuccess'),
+          id: 'mobileMessagingSettings',
+          type: 'transient',
+          context: 'success'
+        });
+        external_CoreHome_["NotificationsStore"].scrollToNotification(notificationInstanceId);
+        external_CoreHome_["Matomo"].helper.redirect();
+      }).finally(function () {
+        _this.isLoading = false;
+      });
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/MobileMessaging/vue/src/DelegateMobileMessagingSettings/DelegateMobileMessagingSettings.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/MobileMessaging/vue/src/DelegateMobileMessagingSettings/DelegateMobileMessagingSettings.vue
+
+
+
+DelegateMobileMessagingSettingsvue_type_script_lang_ts.render = DelegateMobileMessagingSettingsvue_type_template_id_8e4eafcc_render
+
+/* harmony default export */ var DelegateMobileMessagingSettings = (DelegateMobileMessagingSettingsvue_type_script_lang_ts);
 // CONCATENATED MODULE: ./plugins/MobileMessaging/vue/src/index.ts
 /*!
  * Matomo - free/libre analytics platform
@@ -534,6 +616,7 @@ ManageSmsProvidervue_type_script_lang_ts.render = ManageSmsProvidervue_type_temp
 
 
 
+
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
 
 
diff --git a/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.min.js b/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.min.js
index a9ba483777..4292d808b8 100644
--- a/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.min.js
+++ b/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.min.js
@@ -1,10 +1,10 @@
-(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["MobileMessaging"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["MobileMessaging"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,n){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="plugins/MobileMessaging/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},a5a2:function(e,t){e.exports=n},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"ManageSmsProvider",(function(){return V})),n.d(t,"SmsProviderCredentials",(function(){return m})),"undefined"!==typeof window){var r=window.document.currentScript,i=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var o=n("8bbf"),c=n("19dc");function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var a={key:0};function d(e,t,n,r,i,c){var d=Object(o["resolveComponent"])("Field");return e.fields?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",a,[(Object(o["openBlock"])(!0),Object(o["createElementBlock"])(o["Fragment"],null,Object(o["renderList"])(e.fields,(function(t){var n;return Object(o["openBlock"])(),Object(o["createBlock"])(d,{key:t.name,uicontrol:t.type,name:t.name,"model-value":null===(n=e.modelValue)||void 0===n?void 0:n[t.name],"onUpdate:modelValue":function(n){return e.$emit("update:modelValue",Object.assign(Object.assign({},e.modelValue),{},l({},t.name,n)))},title:e.translate(t.title)},null,8,["uicontrol","name","model-value","onUpdate:modelValue","title"])})),128))])):Object(o["createCommentVNode"])("",!0)}var s=n("a5a2"),u=Object(o["reactive"])({}),p=Object(o["defineComponent"])({props:{provider:{type:String,required:!0},modelValue:{type:Object,required:!0}},emits:["update:modelValue"],components:{Field:s["Field"]},watch:{provider:function(){this.$emit("update:modelValue",{}),this.getCredentialFields()}},created:function(){this.getCredentialFields()},methods:{getCredentialFields:function(){var e=this;u[this.provider]||c["AjaxHelper"].fetch({module:"MobileMessaging",action:"getCredentialFields",provider:this.provider}).then((function(t){u[e.provider]=t}))}},computed:{fields:function(){return u[this.provider]}}});p.render=d;var m=p,v=(Object(c["createAngularJsAdapter"])({component:m,scope:{provider:{angularJsBind:"="},credentials:{angularJsBind:"=value"}},directiveName:"smsProviderCredentials",transclude:!0,events:{"update:modelValue":function(e,t,n,r,i,o,c){var l=o?o.$viewValue:n.value;e!==l&&c((function(){o?(o.$setViewValue(e),o.$render()):n.value=e}))}},postCreate:function(e,t,n,r,i){var l=i;l?(l.$render=function(){Object(o["nextTick"])((function(){e.modelValue=Object(c["removeAngularJsSpecificProperties"])(l.$viewValue)}))},"undefined"!==typeof t.value?l.$setViewValue(t.value):l.$setViewValue(e.modelValue)):t.$watch("value",(function(t){t!==e.modelValue&&Object(o["nextTick"])((function(){e.modelValue=t}))}))}}),Object(o["createElementVNode"])("div",{id:"ajaxErrorManageSmsProviderSettings"},null,-1)),f={key:0},b={key:0},g=Object(o["createElementVNode"])("br",null,null,-1),j={key:1},O=Object(o["createElementVNode"])("br",null,null,-1),h=["innerHTML"],A={key:1},S={id:"accountForm"},y=["innerHTML"];
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["MobileMessaging"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["MobileMessaging"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,n){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="plugins/MobileMessaging/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},a5a2:function(e,t){e.exports=n},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"ManageSmsProvider",(function(){return P})),n.d(t,"SmsProviderCredentials",(function(){return m})),n.d(t,"DelegateMobileMessagingSettings",(function(){return x})),"undefined"!==typeof window){var i=window.document.currentScript,r=i&&i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(n.p=r[1])}var o=n("8bbf"),l=n("19dc");function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var c={key:0};function d(e,t,n,i,r,l){var d=Object(o["resolveComponent"])("Field");return e.fields?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",c,[(Object(o["openBlock"])(!0),Object(o["createElementBlock"])(o["Fragment"],null,Object(o["renderList"])(e.fields,(function(t){var n;return Object(o["openBlock"])(),Object(o["createBlock"])(d,{key:t.name,uicontrol:t.type,name:t.name,"model-value":null===(n=e.modelValue)||void 0===n?void 0:n[t.name],"onUpdate:modelValue":function(n){return e.$emit("update:modelValue",Object.assign(Object.assign({},e.modelValue),{},a({},t.name,n)))},title:e.translate(t.title)},null,8,["uicontrol","name","model-value","onUpdate:modelValue","title"])})),128))])):Object(o["createCommentVNode"])("",!0)}var s=n("a5a2"),u=Object(o["reactive"])({}),p=Object(o["defineComponent"])({props:{provider:{type:String,required:!0},modelValue:{type:Object,required:!0}},emits:["update:modelValue"],components:{Field:s["Field"]},watch:{provider:function(){this.$emit("update:modelValue",{}),this.getCredentialFields()}},created:function(){this.getCredentialFields()},methods:{getCredentialFields:function(){var e=this;u[this.provider]||l["AjaxHelper"].fetch({module:"MobileMessaging",action:"getCredentialFields",provider:this.provider}).then((function(t){u[e.provider]=t}))}},computed:{fields:function(){return u[this.provider]}}});p.render=d;var m=p,v=(Object(l["createAngularJsAdapter"])({component:m,scope:{provider:{angularJsBind:"="},credentials:{angularJsBind:"=value"}},directiveName:"smsProviderCredentials",transclude:!0,events:{"update:modelValue":function(e,t,n,i,r,o,l){var a=o?o.$viewValue:n.value;e!==a&&l((function(){o?(o.$setViewValue(e),o.$render()):n.value=e}))}},postCreate:function(e,t,n,i,r){var a=r;a?(a.$render=function(){Object(o["nextTick"])((function(){e.modelValue=Object(l["removeAngularJsSpecificProperties"])(a.$viewValue)}))},"undefined"!==typeof t.value?a.$setViewValue(t.value):a.$setViewValue(e.modelValue)):t.$watch("value",(function(t){t!==e.modelValue&&Object(o["nextTick"])((function(){e.modelValue=t}))}))}}),Object(o["createElementVNode"])("div",{id:"ajaxErrorManageSmsProviderSettings"},null,-1)),f={key:0},g={key:0},b=Object(o["createElementVNode"])("br",null,null,-1),j={key:1},O=Object(o["createElementVNode"])("br",null,null,-1),h=["innerHTML"],M={key:1},S={id:"accountForm"},A=["innerHTML"];
 /*!
  * Matomo - free/libre analytics platform
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */function M(e,t,n,r,i,c){var l=Object(o["resolveComponent"])("ActivityIndicator"),a=Object(o["resolveComponent"])("Field"),d=Object(o["resolveComponent"])("SmsProviderCredentials"),s=Object(o["resolveComponent"])("SaveButton"),u=Object(o["resolveDirective"])("form");return Object(o["openBlock"])(),Object(o["createElementBlock"])("div",null,[Object(o["createVNode"])(l,{loading:e.isDeletingAccount},null,8,["loading"]),v,e.credentialSupplied?(Object(o["openBlock"])(),Object(o["createElementBlock"])("p",f,[e.credentialError?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",b,[Object(o["createTextVNode"])(Object(o["toDisplayString"])(e.translate("MobileMessaging_Settings_CredentialInvalid",e.provider)),1),g,Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.credentialError),1)])):(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",j,Object(o["toDisplayString"])(e.translate("MobileMessaging_Settings_CredentialProvided",e.provider))+" "+Object(o["toDisplayString"])(e.creditLeft),1)),O,Object(o["createElementVNode"])("span",{innerHTML:e.updateOrDeleteAccountText,onClick:t[0]||(t[0]=function(t){return e.onUpdateOrDeleteClick(t)})},null,8,h)])):(Object(o["openBlock"])(),Object(o["createElementBlock"])("p",A,Object(o["toDisplayString"])(e.translate("MobileMessaging_Settings_PleaseSignUp")),1)),Object(o["withDirectives"])(Object(o["createElementVNode"])("div",S,[Object(o["createElementVNode"])("div",null,[Object(o["createVNode"])(a,{uicontrol:"select",name:"smsProviders",modelValue:e.smsProvider,"onUpdate:modelValue":t[1]||(t[1]=function(t){return e.smsProvider=t}),title:e.translate("MobileMessaging_Settings_SMSProvider"),options:e.smsProviderOptions,value:e.provider},null,8,["modelValue","title","options","value"])]),Object(o["createVNode"])(d,{provider:e.smsProvider,modelValue:e.credentials,"onUpdate:modelValue":[t[2]||(t[2]=function(t){return e.credentials=t}),t[3]||(t[3]=function(t){e.credentials=t})],"model-value":e.credentials},null,8,["provider","modelValue","model-value"]),Object(o["createVNode"])(s,{id:"apiAccountSubmit",disabled:!e.isUpdateAccountPossible,saving:e.isUpdatingAccount,onConfirm:t[4]||(t[4]=function(t){return e.updateAccount()})},null,8,["disabled","saving"]),Object(o["createElementVNode"])("div",{class:"providerDescription",innerHTML:e.$sanitize(e.currentProviderDescription)},null,8,y)],512),[[o["vShow"],!e.credentialSupplied||e.showAccountForm],[u]])])}var P=Object(o["defineComponent"])({props:{credentialSupplied:Boolean,credentialError:String,provider:String,creditLeft:[Number,String],smsProviderOptions:{type:Object,required:!0},smsProviders:{type:Object,required:!0}},components:{ActivityIndicator:c["ActivityIndicator"],Field:s["Field"],SaveButton:s["SaveButton"],SmsProviderCredentials:m},directives:{Form:s["Form"]},data:function(){return{isDeletingAccount:!1,isUpdatingAccount:!1,showAccountForm:!1,credentials:{},smsProvider:this.provider}},methods:{deleteApiAccount:function(){var e=this;this.isDeletingAccount=!0,c["AjaxHelper"].fetch({method:"MobileMessaging.deleteSMSAPICredential"},{errorElement:"#ajaxErrorManageSmsProviderSettings"}).then((function(){c["Matomo"].helper.redirect()})).finally((function(){e.isDeletingAccount=!1}))},showUpdateAccount:function(){this.showAccountForm=!0},updateAccount:function(){var e=this;this.isUpdateAccountPossible&&(this.isUpdatingAccount=!0,c["AjaxHelper"].post({method:"MobileMessaging.setSMSAPICredential"},{provider:this.smsProvider,credentials:this.credentials},{errorElement:"#ajaxErrorManageSmsProviderSettings"}).then((function(){c["Matomo"].helper.redirect()})).finally((function(){e.isUpdatingAccount=!1})))},deleteAccount:function(){var e=this;c["Matomo"].helper.modalConfirm("#confirmDeleteAccount",{yes:function(){e.isDeletingAccount=!0,c["AjaxHelper"].fetch({method:"MobileMessaging.deleteSMSAPICredential"},{errorElement:"#ajaxErrorManageSmsProviderSettings"}).then((function(){e.isDeletingAccount=!1,c["Matomo"].helper.redirect()})).finally((function(){e.isDeletingAccount=!1}))}})},onUpdateOrDeleteClick:function(e){var t=e.target;"displayAccountForm"===t.id?this.showUpdateAccount():"deleteAccount"===t.id&&this.deleteAccount()}},computed:{isUpdateAccountPossible:function(){return!!this.smsProvider&&Object.keys(this.credentials).length>0&&Object.values(this.credentials).every((function(e){return!!e}))},updateOrDeleteAccountText:function(){return Object(c["translate"])("MobileMessaging_Settings_UpdateOrDeleteAccount",'<a id="displayAccountForm">',"</a>",'<a id="deleteAccount">',"</a>")},currentProviderDescription:function(){return this.smsProvider&&this.smsProviders?this.smsProviders[this.smsProvider]:""}}});P.render=M;var V=P;
+ */function y(e,t,n,i,r,l){var a=Object(o["resolveComponent"])("ActivityIndicator"),c=Object(o["resolveComponent"])("Field"),d=Object(o["resolveComponent"])("SmsProviderCredentials"),s=Object(o["resolveComponent"])("SaveButton"),u=Object(o["resolveDirective"])("form");return Object(o["openBlock"])(),Object(o["createElementBlock"])("div",null,[Object(o["createVNode"])(a,{loading:e.isDeletingAccount},null,8,["loading"]),v,e.credentialSupplied?(Object(o["openBlock"])(),Object(o["createElementBlock"])("p",f,[e.credentialError?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",g,[Object(o["createTextVNode"])(Object(o["toDisplayString"])(e.translate("MobileMessaging_Settings_CredentialInvalid",e.provider)),1),b,Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.credentialError),1)])):(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",j,Object(o["toDisplayString"])(e.translate("MobileMessaging_Settings_CredentialProvided",e.provider))+" "+Object(o["toDisplayString"])(e.creditLeft),1)),O,Object(o["createElementVNode"])("span",{innerHTML:e.updateOrDeleteAccountText,onClick:t[0]||(t[0]=function(t){return e.onUpdateOrDeleteClick(t)})},null,8,h)])):(Object(o["openBlock"])(),Object(o["createElementBlock"])("p",M,Object(o["toDisplayString"])(e.translate("MobileMessaging_Settings_PleaseSignUp")),1)),Object(o["withDirectives"])(Object(o["createElementVNode"])("div",S,[Object(o["createElementVNode"])("div",null,[Object(o["createVNode"])(c,{uicontrol:"select",name:"smsProviders",modelValue:e.smsProvider,"onUpdate:modelValue":t[1]||(t[1]=function(t){return e.smsProvider=t}),title:e.translate("MobileMessaging_Settings_SMSProvider"),options:e.smsProviderOptions,value:e.provider},null,8,["modelValue","title","options","value"])]),Object(o["createVNode"])(d,{provider:e.smsProvider,modelValue:e.credentials,"onUpdate:modelValue":[t[2]||(t[2]=function(t){return e.credentials=t}),t[3]||(t[3]=function(t){e.credentials=t})],"model-value":e.credentials},null,8,["provider","modelValue","model-value"]),Object(o["createVNode"])(s,{id:"apiAccountSubmit",disabled:!e.isUpdateAccountPossible,saving:e.isUpdatingAccount,onConfirm:t[4]||(t[4]=function(t){return e.updateAccount()})},null,8,["disabled","saving"]),Object(o["createElementVNode"])("div",{class:"providerDescription",innerHTML:e.$sanitize(e.currentProviderDescription)},null,8,A)],512),[[o["vShow"],!e.credentialSupplied||e.showAccountForm],[u]])])}var V=Object(o["defineComponent"])({props:{credentialSupplied:Boolean,credentialError:String,provider:String,creditLeft:[Number,String],smsProviderOptions:{type:Object,required:!0},smsProviders:{type:Object,required:!0}},components:{ActivityIndicator:l["ActivityIndicator"],Field:s["Field"],SaveButton:s["SaveButton"],SmsProviderCredentials:m},directives:{Form:s["Form"]},data:function(){return{isDeletingAccount:!1,isUpdatingAccount:!1,showAccountForm:!1,credentials:{},smsProvider:this.provider}},methods:{deleteApiAccount:function(){var e=this;this.isDeletingAccount=!0,l["AjaxHelper"].fetch({method:"MobileMessaging.deleteSMSAPICredential"},{errorElement:"#ajaxErrorManageSmsProviderSettings"}).then((function(){l["Matomo"].helper.redirect()})).finally((function(){e.isDeletingAccount=!1}))},showUpdateAccount:function(){this.showAccountForm=!0},updateAccount:function(){var e=this;this.isUpdateAccountPossible&&(this.isUpdatingAccount=!0,l["AjaxHelper"].post({method:"MobileMessaging.setSMSAPICredential"},{provider:this.smsProvider,credentials:this.credentials},{errorElement:"#ajaxErrorManageSmsProviderSettings"}).then((function(){l["Matomo"].helper.redirect()})).finally((function(){e.isUpdatingAccount=!1})))},deleteAccount:function(){var e=this;l["Matomo"].helper.modalConfirm("#confirmDeleteAccount",{yes:function(){e.isDeletingAccount=!0,l["AjaxHelper"].fetch({method:"MobileMessaging.deleteSMSAPICredential"},{errorElement:"#ajaxErrorManageSmsProviderSettings"}).then((function(){e.isDeletingAccount=!1,l["Matomo"].helper.redirect()})).finally((function(){e.isDeletingAccount=!1}))}})},onUpdateOrDeleteClick:function(e){var t=e.target;"displayAccountForm"===t.id?this.showUpdateAccount():"deleteAccount"===t.id&&this.deleteAccount()}},computed:{isUpdateAccountPossible:function(){return!!this.smsProvider&&Object.keys(this.credentials).length>0&&Object.values(this.credentials).every((function(e){return!!e}))},updateOrDeleteAccountText:function(){return Object(l["translate"])("MobileMessaging_Settings_UpdateOrDeleteAccount",'<a id="displayAccountForm">',"</a>",'<a id="deleteAccount">',"</a>")},currentProviderDescription:function(){return this.smsProvider&&this.smsProviders?this.smsProviders[this.smsProvider]:""}}});V.render=y;var P=V;function C(e,t,n,i,r,l){var a=Object(o["resolveComponent"])("Field"),c=Object(o["resolveComponent"])("SaveButton");return Object(o["openBlock"])(),Object(o["createElementBlock"])("div",null,[Object(o["createElementVNode"])("div",null,[Object(o["createVNode"])(a,{uicontrol:"radio",name:"delegatedManagement",title:e.translate("MobileMessaging_Settings_LetUsersManageAPICredential"),modelValue:e.enabled,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.enabled=t}),"full-width":!0,options:e.delegateManagementOptions},null,8,["title","modelValue","options"])]),Object(o["createVNode"])(c,{onConfirm:t[1]||(t[1]=function(t){return e.save()}),saving:e.isLoading},null,8,["saving"])])}var k=Object(o["defineComponent"])({props:{delegateManagementOptions:{type:Array,required:!0},delegatedManagement:[Number,Boolean]},components:{Field:s["Field"],SaveButton:s["SaveButton"]},data:function(){return{isLoading:!1,enabled:this.delegatedManagement?1:0}},methods:{save:function(){var e=this;this.isLoading=!0,l["AjaxHelper"].post({method:"MobileMessaging.setDelegatedManagement"},{delegatedManagement:this.enabled&&"0"!==this.enabled?"true":"false"}).then((function(){var e=l["NotificationsStore"].show({message:Object(l["translate"])("CoreAdminHome_SettingsSaveSuccess"),id:"mobileMessagingSettings",type:"transient",context:"success"});l["NotificationsStore"].scrollToNotification(e),l["Matomo"].helper.redirect()})).finally((function(){e.isLoading=!1}))}}});k.render=C;var x=k;
 /*!
  * Matomo - free/libre analytics platform
  *
diff --git a/plugins/MobileMessaging/vue/src/DelegateMobileMessagingSettings/DelegateMobileMessagingSettings.vue b/plugins/MobileMessaging/vue/src/DelegateMobileMessagingSettings/DelegateMobileMessagingSettings.vue
new file mode 100644
index 0000000000..96cec67d6d
--- /dev/null
+++ b/plugins/MobileMessaging/vue/src/DelegateMobileMessagingSettings/DelegateMobileMessagingSettings.vue
@@ -0,0 +1,85 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <div>
+    <div>
+      <Field
+        uicontrol="radio"
+        name="delegatedManagement"
+        :title="translate('MobileMessaging_Settings_LetUsersManageAPICredential')"
+        v-model="enabled"
+        :full-width="true"
+        :options="delegateManagementOptions"
+      >
+      </Field>
+    </div>
+    <SaveButton
+      @confirm="save()"
+      :saving="isLoading"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  AjaxHelper,
+  translate,
+  Matomo,
+  NotificationsStore,
+} from 'CoreHome';
+import { Field, SaveButton } from 'CorePluginsAdmin';
+
+interface DelegateMobileMessagingSettingsState {
+  isLoading: boolean;
+  enabled: boolean|string|number;
+}
+
+export default defineComponent({
+  props: {
+    delegateManagementOptions: {
+      type: Array,
+      required: true,
+    },
+    delegatedManagement: [Number, Boolean],
+  },
+  components: {
+    Field,
+    SaveButton,
+  },
+  data(): DelegateMobileMessagingSettingsState {
+    return {
+      isLoading: false,
+      enabled: this.delegatedManagement ? 1 : 0,
+    };
+  },
+  methods: {
+    save() {
+      this.isLoading = true;
+      AjaxHelper.post(
+        {
+          method: 'MobileMessaging.setDelegatedManagement',
+        },
+        {
+          delegatedManagement: this.enabled && this.enabled !== '0' ? 'true' : 'false',
+        },
+      ).then(() => {
+        const notificationInstanceId = NotificationsStore.show({
+          message: translate('CoreAdminHome_SettingsSaveSuccess'),
+          id: 'mobileMessagingSettings',
+          type: 'transient',
+          context: 'success',
+        });
+        NotificationsStore.scrollToNotification(notificationInstanceId);
+        Matomo.helper.redirect();
+      }).finally(() => {
+        this.isLoading = false;
+      });
+    },
+  },
+});
+</script>
diff --git a/plugins/MobileMessaging/vue/src/index.ts b/plugins/MobileMessaging/vue/src/index.ts
index 2bddb6f845..c610cdbf39 100644
--- a/plugins/MobileMessaging/vue/src/index.ts
+++ b/plugins/MobileMessaging/vue/src/index.ts
@@ -9,3 +9,4 @@ import './SmsProviderCredentials/SmsProviderCredentials.adapter';
 
 export { default as ManageSmsProvider } from './ManageSmsProvider/ManageSmsProvider.vue';
 export { default as SmsProviderCredentials } from './SmsProviderCredentials/SmsProviderCredentials.vue';
+export { default as DelegateMobileMessagingSettings } from './DelegateMobileMessagingSettings/DelegateMobileMessagingSettings.vue';