[Vue] migrate ManageMobilePhoneNumbersController to vue (#18971)

* migrate ManageMobilePhoneNumbersController to vue

* remove some TODO

* get to work in UI

* remove angluarjs files

* smaller ui improvements

* updates expected UI files

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

9 files changed, 614 insertions, 366 deletions

diff --git a/plugins/MobileMessaging/MobileMessaging.php b/plugins/MobileMessaging/MobileMessaging.php
index 74c9b15bd6..7bce744459 100644
--- a/plugins/MobileMessaging/MobileMessaging.php
+++ b/plugins/MobileMessaging/MobileMessaging.php
@@ -65,7 +65,6 @@ class MobileMessaging extends \Piwik\Plugin
     public function registerEvents()
     {
         return array(
-            'AssetManager.getJavaScriptFiles'           => 'getJsFiles',
             'AssetManager.getStylesheetFiles'           => 'getStylesheetFiles',
             'ScheduledReports.getReportParameters'      => 'getReportParameters',
             'ScheduledReports.validateReportParameters' => 'validateReportParameters',
@@ -86,14 +85,6 @@ class MobileMessaging extends \Piwik\Plugin
         return true;
     }
 
-    /**
-     * Get JavaScript files
-     */
-    public function getJsFiles(&$jsFiles)
-    {
-        $jsFiles[] = "plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers.controller.js";
-    }
-
     public function getStylesheetFiles(&$stylesheets)
     {
         $stylesheets[] = "plugins/MobileMessaging/stylesheets/MobileMessagingSettings.less";
@@ -113,6 +104,17 @@ class MobileMessaging extends \Piwik\Plugin
         $translationKeys[] = 'General_Password';
         $translationKeys[] = 'MobileMessaging_Settings_APIKey';
         $translationKeys[] = 'MobileMessaging_Settings_LetUsersManageAPICredential';
+        $translationKeys[] = 'MobileMessaging_Settings_SelectCountry';
+        $translationKeys[] = 'MobileMessaging_Settings_CountryCode';
+        $translationKeys[] = 'MobileMessaging_Settings_PhoneNumber';
+        $translationKeys[] = 'MobileMessaging_Settings_EnterActivationCode';
+        $translationKeys[] = 'MobileMessaging_Settings_PhoneNumbers_Add';
+        $translationKeys[] = 'MobileMessaging_Settings_DelegatedPhoneNumbersOnlyUsedByYou';
+        $translationKeys[] = 'MobileMessaging_Settings_PhoneNumbers_Help';
+        $translationKeys[] = 'MobileMessaging_Settings_PhoneNumbers_CountryCode_Help';
+        $translationKeys[] = 'MobileMessaging_Settings_ManagePhoneNumbers';
+        $translationKeys[] = 'MobileMessaging_Settings_VerificationCodeJustSent';
+        $translationKeys[] = 'MobileMessaging_Settings_ValidatePhoneNumber';
     }
     
     public function validateReportParameters(&$parameters, $reportType)
diff --git a/plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers.controller.js b/plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers.controller.js
deleted file mode 100644
index 587beb81f5..0000000000
--- a/plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers.controller.js
+++ /dev/null
@@ -1,110 +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('ManageMobilePhoneNumbersController', ManageMobilePhoneNumbersController);
-
-    ManageMobilePhoneNumbersController.$inject = ['piwikApi', 'piwik'];
-
-    function ManageMobilePhoneNumbersController(piwikApi, piwikk) {
-        // remember to keep controller very simple. Create a service/factory (model) if needed
-
-        var self = this;
-        this.isAddingPhonenumber = false;
-        this.canAddNumber = false;
-        this.isActivated = {};
-
-        this.validateActivationCode = function(phoneNumber, index) {
-            if (!this.validationCode || !this.validationCode[index] || this.validationCode[index] == '') {
-                return;
-            }
-
-            var verificationCode = this.validationCode[index];
-
-            var success = function (response) {
-
-                self.isChangingPhoneNumber = false;
-
-                var UI = require('piwik/UI');
-                var notification = new UI.Notification();
-
-                if (!response || !response.value) {
-                    var message = _pk_translate('MobileMessaging_Settings_InvalidActivationCode');
-                    notification.show(message, {
-                        context: 'error',
-                        id: 'MobileMessaging_ValidatePhoneNumber'
-                    });
-                }
-                else {
-                    var message = _pk_translate('MobileMessaging_Settings_PhoneActivated')
-                    notification.show(message, {
-                        context: 'success',
-                        id: 'MobileMessaging_ValidatePhoneNumber'
-                    });
-
-                    self.isActivated[index] = true;
-                }
-
-                notification.scrollToNotification();
-            };
-
-            this.isChangingPhoneNumber = true;
-
-            piwikApi.post(
-                {method: 'MobileMessaging.validatePhoneNumber'},
-                {phoneNumber: phoneNumber, verificationCode: verificationCode},
-                {placeat: '#invalidVerificationCodeAjaxError'}
-            ).then(success, function () {
-                self.isChangingPhoneNumber = false;
-            });
-            
-        }
-
-        this.removePhoneNumber = function (phoneNumber) {
-            if (!phoneNumber) {
-                return;
-            }
-
-            this.isChangingPhoneNumber = true;
-
-            piwikApi.post(
-                {method: 'MobileMessaging.removePhoneNumber'},
-                {phoneNumber: phoneNumber},
-                {placeat: '#invalidVerificationCodeAjaxError'}
-            ).then(function () {
-                self.isChangingPhoneNumber = false;
-                piwik.helper.redirect();
-            }, function () {
-                self.isChangingPhoneNumber = false;
-            });
-        }
-
-        this.validateNewPhoneNumberFormat = function () {
-            this.showSuspiciousPhoneNumber = $.trim(this.newPhoneNumber).lastIndexOf('0', 0) === 0;
-            this.canAddNumber = !!this.newPhoneNumber && this.newPhoneNumber != '';
-        };
-
-        this.addPhoneNumber = function() {
-            var phoneNumber = '+' + this.countryCallingCode + this.newPhoneNumber;
-
-            if (this.canAddNumber && phoneNumber.length > 1) {
-                this.isAddingPhonenumber = true;
-
-                piwikApi.post(
-                    {method: 'MobileMessaging.addPhoneNumber'},
-                    {phoneNumber: phoneNumber},
-                    {placeat: '#ajaxErrorAddPhoneNumber'}
-                ).then(function () {
-                    self.isAddingPhonenumber = false;
-                    piwik.helper.redirect();
-                }, function () {
-                    self.isAddingPhonenumber = false;
-                });
-            }
-        }
-
-    }
-})();
\ No newline at end of file
diff --git a/plugins/MobileMessaging/angularjs/manage-sms-provider.controller.js b/plugins/MobileMessaging/angularjs/manage-sms-provider.controller.js
deleted file mode 100644
index 9fa5948cb0..0000000000
--- a/plugins/MobileMessaging/angularjs/manage-sms-provider.controller.js
+++ /dev/null
@@ -1,76 +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('ManageSmsProviderController', ManageSmsProviderController);
-
-    ManageSmsProviderController.$inject = ['piwikApi', 'piwik'];
-
-    function ManageSmsProviderController(piwikApi, piwik) {
-
-        var self = this;
-        this.isDeletingAccount = false;
-        this.isUpdatingAccount = false;
-        this.showAccountForm = false;
-        this.isUpdateAccountPossible = false;
-        this.credentials = '{}';
-
-        function deleteApiAccount() {
-            self.isDeletingAccount = true;
-
-            piwikApi.fetch(
-                {method: 'MobileMessaging.deleteSMSAPICredential'},
-                {placeat: '#ajaxErrorManageSmsProviderSettings'}
-            ).then(function () {
-                self.isDeletingAccount = false;
-                piwik.helper.redirect();
-            }, function () {
-                self.isDeletingAccount = false;
-            });
-        }
-
-        this.showUpdateAccount = function () {
-            this.showAccountForm = true;
-        };
-
-        this.isUpdateAccountPossible = function () {
-
-            var self = this;
-            self.canBeUpdated = !!this.smsProvider;
-
-            var credentials = angular.fromJson(this.credentials);
-
-            angular.forEach(credentials, function(value, key) {
-                if (value == '') {
-                    self.canBeUpdated = false;
-                }
-            });
-
-            return self.canBeUpdated;
-        };
-
-        this.updateAccount = function () {
-            if (this.isUpdateAccountPossible()) {
-                this.isUpdatingAccount = true;
-
-                piwikApi.post(
-                    {method: 'MobileMessaging.setSMSAPICredential'},
-                    {provider: this.smsProvider, credentials: angular.fromJson(this.credentials)},
-                    {placeat: '#ajaxErrorManageSmsProviderSettings'}
-                ).then(function () {
-                    self.isUpdatingAccount = false;
-                    piwik.helper.redirect();
-                }, function () {
-                    self.isUpdatingAccount = false;
-                });
-            }
-        };
-
-        this.deleteAccount = function () {
-            piwikHelper.modalConfirm('#confirmDeleteAccount', {yes: deleteApiAccount});
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/MobileMessaging/angularjs/sms-provider-credentials.directive.js b/plugins/MobileMessaging/angularjs/sms-provider-credentials.directive.js
deleted file mode 100644
index 58fde7ddd8..0000000000
--- a/plugins/MobileMessaging/angularjs/sms-provider-credentials.directive.js
+++ /dev/null
@@ -1,51 +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
- */
-
-/**
- * Usage:
- * <div sms-provider-credentials provider="providername">
- */
-(function () {
-    angular.module('piwikApp').directive('smsProviderCredentials', smsProviderCredentials);
-
-    function smsProviderCredentials() {
-
-        return {
-            restrict: 'A',
-            require:"^ngModel",
-            transclude: true,
-            scope: {
-                provider: '=',
-                credentials: '=value'
-            },
-            template: '<ng-include src="getTemplateUrl()"/>',
-            controllerAs: 'ProviderCredentials',
-            controller: function($scope) {
-                $scope.getTemplateUrl = function() {
-                    return '?module=MobileMessaging&action=getCredentialFields&provider=' + $scope.provider;
-                };
-            },
-            link: function(scope, elm, attrs, ctrl) {
-                if (!ctrl) {
-                    return;
-                }
-
-                // view -> model
-                scope.$watch('credentials', function (val, oldVal) {
-                    ctrl.$setViewValue(JSON.stringify(val));
-                }, true);
-
-                // unset credentials when new provider is shoosen
-                scope.$watch('provider', function (val, oldVal) {
-                    if(val != oldVal) {
-                        scope.credentials = {};
-                    }
-                }, true);
-            }
-        };
-    }
-})();
diff --git a/plugins/MobileMessaging/templates/index.twig b/plugins/MobileMessaging/templates/index.twig
index fc25f4af6d..e322654288 100644
--- a/plugins/MobileMessaging/templates/index.twig
+++ b/plugins/MobileMessaging/templates/index.twig
@@ -37,124 +37,14 @@
                 {% endif %}
             </p>
         {% else %}
-            <div ng-controller="ManageMobilePhoneNumbersController as managePhoneNumber">
-
-                <p>{{ 'MobileMessaging_Settings_PhoneNumbers_Help'|translate }}</p>
-
-                {% if isSuperUser %}
-                    <p>{{ 'MobileMessaging_Settings_DelegatedPhoneNumbersOnlyUsedByYou'|translate }}</p>
-                {% endif %}
-
-                <div class="row">
-                    <h3 class="col s12">{{ 'MobileMessaging_Settings_PhoneNumbers_Add'|translate }}</h3>
-                </div>
-
-                <div class="form-group row">
-                    <div class="col s12 m6">
-                        <div piwik-field uicontrol="select" name="countryCodeSelect"
-                             value="{{ defaultCallingCode }}"
-                             ng-model="managePhoneNumber.countryCallingCode"
-                             full-width="true"
-                             data-title="{{ 'MobileMessaging_Settings_SelectCountry'|translate|e('html_attr') }}"
-                             options='{{ countries|json_encode }}'>
-                        </div>
-                    </div>
-                    <div class="col s12 m6 form-help">
-                        {{ 'MobileMessaging_Settings_PhoneNumbers_CountryCode_Help'|translate }}
-                    </div>
-                </div>
-
-                <div class="form-group row addPhoneNumber">
-                    <div class="col s12 m6">
-
-                        <div class="countryCode left">
-                            <span class="countryCodeSymbol">+</span>
-                            <div piwik-field uicontrol="text" name="countryCallingCode"
-                                 full-width="true"
-                                 ng-model="managePhoneNumber.countryCallingCode"
-                                 maxlength="4"
-                                 data-title="{{ 'MobileMessaging_Settings_CountryCode'|translate }}">
-                            </div>
-                        </div>
-                        <div class="phoneNumber left">
-                            <div piwik-field uicontrol="text" name="newPhoneNumber"
-                                 ng-model="managePhoneNumber.newPhoneNumber"
-                                 ng-change="managePhoneNumber.validateNewPhoneNumberFormat()"
-                                 full-width="true"
-                                 maxlength="80"
-                                 data-title="{{ 'MobileMessaging_Settings_PhoneNumber'|translate }}">
-                            </div>
-                        </div>
-                        <div class="addNumber left valign-wrapper">
-                            <div piwik-save-button
-                                 data-disabled="!managePhoneNumber.canAddNumber || managePhoneNumber.isAddingPhonenumber"
-                                 onconfirm="managePhoneNumber.addPhoneNumber()"
-                                 class="valign" value='{{ 'General_Add'|translate }}'></div>
-                        </div>
-
-                        <div piwik-alert="warning"
-                             id="suspiciousPhoneNumber"
-                             ng-show="managePhoneNumber.showSuspiciousPhoneNumber">
-                        {{ 'MobileMessaging_Settings_SuspiciousPhoneNumber'|translate('54184032') }}
-                        </div>
-
-                    </div>
-                    <div class="col s12 m6 form-help">
-                        {{ strHelpAddPhone }}
-                    </div>
-                </div>
-
-                <div id="ajaxErrorAddPhoneNumber"></div>
-                <div piwik-activity-indicator loading="managePhoneNumber.isAddingPhonenumber"></div>
-
-                {% if phoneNumbers|length > 0 %}
-                    <div class="row"><h3 class="col s12">{{ 'MobileMessaging_Settings_ManagePhoneNumbers'|translate }}</h3></div>
-                {% endif %}
-
-                {% for phoneNumber, validated in phoneNumbers %}
-                    <div class="form-group row">
-                        <div class="col s12 m6">
-                            <span class='phoneNumber'>{{ phoneNumber }}</span>
-
-                            {% if not validated %}
-                                <input type="text"
-                                       ng-hide="managePhoneNumber.isActivated[{{ loop.index }}]"
-                                       ng-model="managePhoneNumber.validationCode[{{ loop.index }}]"
-                                       class='verificationCode'
-                                       placeholder="{{ 'MobileMessaging_Settings_EnterActivationCode'|translate|e('html_attr') }}"/>
-                                <div piwik-save-button
-                                     ng-hide="managePhoneNumber.isActivated[{{ loop.index }}]"
-                                     value='{{ 'MobileMessaging_Settings_ValidatePhoneNumber'|translate }}'
-                                     data-disabled="!managePhoneNumber.validationCode[{{ loop.index }}] || managePhoneNumber.isChangingPhoneNumber"
-                                     onconfirm='managePhoneNumber.validateActivationCode({{ phoneNumber|json_encode }}, {{ loop.index }})'
-                                     ></div>
-                            {% endif %}
-
-                            <div piwik-save-button
-                                 value='{{ 'General_Remove'|translate }}'
-                                 data-disabled="managePhoneNumber.isChangingPhoneNumber"
-                                 onconfirm="managePhoneNumber.removePhoneNumber({{ phoneNumber|json_encode }})"
-                                 ></div>
-                        </div>
-
-                        {% if not validated %}
-                            <div class="form-help col s12 m6">
-                                <div ng-hide="managePhoneNumber.isActivated[{{ loop.index }}]">
-                                    {{ 'MobileMessaging_Settings_VerificationCodeJustSent'|translate }}
-                                </div>
-                                &nbsp;
-                            </div>
-                        {% endif %}
-                    </div>
-                {% endfor %}
-
-                {% import 'ajaxMacros.twig' as ajax %}
-                {{ ajax.errorDiv('invalidVerificationCodeAjaxError') }}
-
-                <div piwik-activity-indicator loading="managePhoneNumber.isChangingPhoneNumber"></div>
-
-            </div>
-
+            <div
+                    vue-entry="MobileMessaging.ManageMobilePhoneNumbers"
+                    is-super-user="{{ isSuperUser|default(null)|json_encode|e('html_attr') }}"
+                    default-calling-code="{{ defaultCallingCode|default(null)|json_encode|e('html_attr') }}"
+                    countries="{{ countries|default(null)|json_encode|e('html_attr') }}"
+                    str-help-add-phone="{{ strHelpAddPhone|default(null)|json_encode|e('html_attr') }}"
+                    phone-numbers="{{ phoneNumbers|default(null)|json_encode|e('html_attr') }}"
+            ></div>
         {% endif %}
     </div>
 
diff --git a/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.js b/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.js
index 53777796a6..5570fd207c 100644
--- a/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.js
+++ b/plugins/MobileMessaging/vue/dist/MobileMessaging.umd.js
@@ -128,6 +128,7 @@ __webpack_require__.r(__webpack_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; });
+__webpack_require__.d(__webpack_exports__, "ManageMobilePhoneNumbers", function() { return /* reexport */ ManageMobilePhoneNumbers; });
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 // This file is imported into lib/wc client bundles.
@@ -606,6 +607,317 @@ function DelegateMobileMessagingSettingsvue_type_template_id_8e4eafcc_render(_ct
 DelegateMobileMessagingSettingsvue_type_script_lang_ts.render = DelegateMobileMessagingSettingsvue_type_template_id_8e4eafcc_render
 
 /* harmony default export */ var DelegateMobileMessagingSettings = (DelegateMobileMessagingSettingsvue_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/ManageMobilePhoneNumbers/ManageMobilePhoneNumbers.vue?vue&type=template&id=373eda9d
+
+var ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_1 = {
+  key: 0
+};
+var ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_2 = {
+  class: "row"
+};
+var ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_3 = {
+  class: "col s12"
+};
+var ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_4 = {
+  class: "form-group row"
+};
+var ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_5 = {
+  class: "col s12 m6"
+};
+var ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_6 = {
+  class: "col s12 m6 form-help"
+};
+var ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_7 = {
+  class: "form-group row addPhoneNumber"
+};
+var ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_8 = {
+  class: "col s12 m6"
+};
+var ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_9 = {
+  class: "countryCode left"
+};
+
+var ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_10 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+  class: "countryCodeSymbol"
+}, "+", -1);
+
+var _hoisted_11 = {
+  class: "phoneNumber left"
+};
+var _hoisted_12 = {
+  class: "addNumber left valign-wrapper"
+};
+var _hoisted_13 = {
+  class: "col s12 m6 form-help"
+};
+
+var _hoisted_14 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", {
+  id: "ajaxErrorAddPhoneNumber"
+}, null, -1);
+
+var _hoisted_15 = {
+  key: 1,
+  class: "row"
+};
+var _hoisted_16 = {
+  class: "col s12"
+};
+var _hoisted_17 = {
+  class: "col s12 m6"
+};
+var _hoisted_18 = {
+  class: "phoneNumber"
+};
+var _hoisted_19 = ["onUpdate:modelValue", "placeholder"];
+var _hoisted_20 = {
+  key: 0,
+  class: "form-help col s12 m6"
+};
+
+var _hoisted_21 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])("   ");
+
+var _hoisted_22 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", {
+  id: "invalidVerificationCodeAjaxError",
+  style: {
+    "display": "none"
+  }
+}, null, -1);
+
+function ManageMobilePhoneNumbersvue_type_template_id_373eda9d_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");
+
+  var _component_Alert = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("Alert");
+
+  var _component_ActivityIndicator = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ActivityIndicator");
+
+  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"])("p", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('MobileMessaging_Settings_PhoneNumbers_Help')), 1), _ctx.isSuperUser ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("p", ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_1, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('MobileMessaging_Settings_DelegatedPhoneNumbersOnlyUsedByYou')), 1)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h3", ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_3, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('MobileMessaging_Settings_PhoneNumbers_Add')), 1)]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_4, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_5, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "select",
+    name: "countryCodeSelect",
+    title: _ctx.translate('MobileMessaging_Settings_SelectCountry'),
+    modelValue: _ctx.countryCallingCode,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.countryCallingCode = $event;
+    }),
+    "full-width": true,
+    options: _ctx.countries
+  }, null, 8, ["title", "modelValue", "options"])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_6, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('MobileMessaging_Settings_PhoneNumbers_CountryCode_Help')), 1)]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_7, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_8, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_9, [ManageMobilePhoneNumbersvue_type_template_id_373eda9d_hoisted_10, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "text",
+    name: "countryCallingCode",
+    title: _ctx.translate('MobileMessaging_Settings_CountryCode'),
+    modelValue: _ctx.countryCallingCode,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.countryCallingCode = $event;
+    }),
+    "full-width": true,
+    maxlength: 4
+  }, null, 8, ["title", "modelValue"])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_11, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "text",
+    name: "newPhoneNumber",
+    modelValue: _ctx.newPhoneNumber,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.newPhoneNumber = $event;
+    }),
+    title: _ctx.translate('MobileMessaging_Settings_PhoneNumber'),
+    "full-width": true,
+    maxlength: 80
+  }, null, 8, ["modelValue", "title"])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_12, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_SaveButton, {
+    class: "valign",
+    disabled: !_ctx.canAddNumber || _ctx.isAddingPhonenumber,
+    onConfirm: _cache[3] || (_cache[3] = function ($event) {
+      return _ctx.addPhoneNumber();
+    }),
+    value: _ctx.translate('General_Add')
+  }, null, 8, ["disabled", "value"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Alert, {
+    severity: "warning",
+    id: "suspiciousPhoneNumber"
+  }, {
+    default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('MobileMessaging_Settings_SuspiciousPhoneNumber', '54184032')), 1)];
+    }),
+    _: 1
+  }, 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.showSuspiciousPhoneNumber]])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_13, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.strHelpAddPhone), 1)]), _hoisted_14, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ActivityIndicator, {
+    loading: _ctx.isAddingPhonenumber
+  }, null, 8, ["loading"]), Object.keys(_ctx.phoneNumbers || {}).length > 0 ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_15, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h3", _hoisted_16, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('MobileMessaging_Settings_ManagePhoneNumbers')), 1)])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(_ctx.phoneNumbers || [], function (validated, phoneNumber, index) {
+    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", {
+      class: "form-group row",
+      key: index
+    }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_17, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", _hoisted_18, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(phoneNumber), 1), !validated && !_ctx.isActivated[index] ? Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])((Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("input", {
+      key: 0,
+      type: "text",
+      class: "verificationCode",
+      "onUpdate:modelValue": function onUpdateModelValue($event) {
+        return _ctx.validationCode[index] = $event;
+      },
+      placeholder: _ctx.translate('MobileMessaging_Settings_EnterActivationCode'),
+      style: {
+        "margin-right": "3.5px"
+      }
+    }, null, 8, _hoisted_19)), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vModelText"], _ctx.validationCode[index]]]) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), !validated && !_ctx.isActivated[index] ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(_component_SaveButton, {
+      key: 1,
+      disabled: !_ctx.validationCode[index] || _ctx.isChangingPhoneNumber,
+      onConfirm: function onConfirm($event) {
+        return _ctx.validateActivationCode(phoneNumber, index);
+      },
+      value: _ctx.translate('MobileMessaging_Settings_ValidatePhoneNumber')
+    }, null, 8, ["disabled", "onConfirm", "value"])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_SaveButton, {
+      disabled: _ctx.isChangingPhoneNumber,
+      onConfirm: function onConfirm($event) {
+        return _ctx.removePhoneNumber(phoneNumber);
+      },
+      value: _ctx.translate('General_Remove'),
+      style: {
+        "margin-left": "3.5px"
+      }
+    }, null, 8, ["disabled", "onConfirm", "value"])]), !validated && !_ctx.isActivated[index] ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_20, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('MobileMessaging_Settings_VerificationCodeJustSent')), 1), _hoisted_21])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)]);
+  }), 128)), _hoisted_22, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ActivityIndicator, {
+    loading: _ctx.isChangingPhoneNumber
+  }, null, 8, ["loading"])]);
+}
+// CONCATENATED MODULE: ./plugins/MobileMessaging/vue/src/ManageMobilePhoneNumbers/ManageMobilePhoneNumbers.vue?vue&type=template&id=373eda9d
+
+// 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/ManageMobilePhoneNumbers/ManageMobilePhoneNumbers.vue?vue&type=script&lang=ts
+
+
+
+/* harmony default export */ var ManageMobilePhoneNumbersvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    isSuperUser: Boolean,
+    defaultCallingCode: String,
+    countries: {
+      type: Array,
+      required: true
+    },
+    strHelpAddPhone: {
+      type: String,
+      required: true
+    },
+    phoneNumbers: Object
+  },
+  components: {
+    Field: external_CorePluginsAdmin_["Field"],
+    SaveButton: external_CorePluginsAdmin_["SaveButton"],
+    Alert: external_CoreHome_["Alert"],
+    ActivityIndicator: external_CoreHome_["ActivityIndicator"]
+  },
+  data: function data() {
+    return {
+      isAddingPhonenumber: false,
+      isChangingPhoneNumber: false,
+      isActivated: {},
+      countryCallingCode: this.defaultCallingCode || '',
+      newPhoneNumber: '',
+      validationCode: {}
+    };
+  },
+  methods: {
+    validateActivationCode: function validateActivationCode(phoneNumber, index) {
+      var _this = this;
+
+      if (!this.validationCode[index]) {
+        return;
+      }
+
+      var verificationCode = this.validationCode[index];
+      this.isChangingPhoneNumber = true;
+      external_CoreHome_["AjaxHelper"].post({
+        method: 'MobileMessaging.validatePhoneNumber'
+      }, {
+        phoneNumber: phoneNumber,
+        verificationCode: verificationCode
+      }, {
+        errorElement: '#invalidVerificationCodeAjaxError'
+      }).then(function (response) {
+        _this.isChangingPhoneNumber = false;
+        var notificationInstanceId;
+
+        if (!response || !response.value) {
+          var message = Object(external_CoreHome_["translate"])('MobileMessaging_Settings_InvalidActivationCode');
+          notificationInstanceId = external_CoreHome_["NotificationsStore"].show({
+            message: message,
+            context: 'error',
+            id: 'MobileMessaging_ValidatePhoneNumber',
+            type: 'transient'
+          });
+        } else {
+          var _message = Object(external_CoreHome_["translate"])('MobileMessaging_Settings_PhoneActivated');
+
+          notificationInstanceId = external_CoreHome_["NotificationsStore"].show({
+            message: _message,
+            context: 'success',
+            id: 'MobileMessaging_ValidatePhoneNumber',
+            type: 'transient'
+          });
+          _this.isActivated[index] = true;
+        }
+
+        external_CoreHome_["NotificationsStore"].scrollToNotification(notificationInstanceId);
+      }).finally(function () {
+        _this.isChangingPhoneNumber = false;
+      });
+    },
+    removePhoneNumber: function removePhoneNumber(phoneNumber) {
+      var _this2 = this;
+
+      if (!phoneNumber) {
+        return;
+      }
+
+      this.isChangingPhoneNumber = true;
+      external_CoreHome_["AjaxHelper"].post({
+        method: 'MobileMessaging.removePhoneNumber'
+      }, {
+        phoneNumber: phoneNumber
+      }, {
+        errorElement: '#invalidVerificationCodeAjaxError'
+      }).then(function () {
+        _this2.isChangingPhoneNumber = false;
+        external_CoreHome_["Matomo"].helper.redirect();
+      }).finally(function () {
+        _this2.isChangingPhoneNumber = false;
+      });
+    },
+    addPhoneNumber: function addPhoneNumber() {
+      var _this3 = this;
+
+      var phoneNumber = "+".concat(this.countryCallingCode).concat(this.newPhoneNumber);
+
+      if (this.canAddNumber && phoneNumber.length > 1) {
+        this.isAddingPhonenumber = true;
+        external_CoreHome_["AjaxHelper"].post({
+          method: 'MobileMessaging.addPhoneNumber'
+        }, {
+          phoneNumber: phoneNumber
+        }, {
+          errorElement: '#ajaxErrorAddPhoneNumber'
+        }).then(function () {
+          _this3.isAddingPhonenumber = false;
+          external_CoreHome_["Matomo"].helper.redirect();
+        }).finally(function () {
+          _this3.isAddingPhonenumber = false;
+        });
+      }
+    }
+  },
+  computed: {
+    showSuspiciousPhoneNumber: function showSuspiciousPhoneNumber() {
+      return this.newPhoneNumber.trim().lastIndexOf('0', 0) === 0;
+    },
+    canAddNumber: function canAddNumber() {
+      return !!this.newPhoneNumber && this.newPhoneNumber !== '';
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/MobileMessaging/vue/src/ManageMobilePhoneNumbers/ManageMobilePhoneNumbers.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/MobileMessaging/vue/src/ManageMobilePhoneNumbers/ManageMobilePhoneNumbers.vue
+
+
+
+ManageMobilePhoneNumbersvue_type_script_lang_ts.render = ManageMobilePhoneNumbersvue_type_template_id_373eda9d_render
+
+/* harmony default export */ var ManageMobilePhoneNumbers = (ManageMobilePhoneNumbersvue_type_script_lang_ts);
 // CONCATENATED MODULE: ./plugins/MobileMessaging/vue/src/index.ts
 /*!
  * Matomo - free/libre analytics platform
@@ -617,6 +929,7 @@ DelegateMobileMessagingSettingsvue_type_script_lang_ts.render = DelegateMobileMe
 
 
 
+
 // 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 4292d808b8..d5ecfab87f 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(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"];
+(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(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},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 o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},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 y})),n.d(t,"SmsProviderCredentials",(function(){return b})),n.d(t,"DelegateMobileMessagingSettings",(function(){return E})),n.d(t,"ManageMobilePhoneNumbers",(function(){return ee})),"undefined"!==typeof window){var o=window.document.currentScript,i=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var r=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 s(e,t,n,o,i,l){var s=Object(r["resolveComponent"])("Field");return e.fields?(Object(r["openBlock"])(),Object(r["createElementBlock"])("div",c,[(Object(r["openBlock"])(!0),Object(r["createElementBlock"])(r["Fragment"],null,Object(r["renderList"])(e.fields,(function(t){var n;return Object(r["openBlock"])(),Object(r["createBlock"])(s,{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(r["createCommentVNode"])("",!0)}var d=n("a5a2"),u=Object(r["reactive"])({}),m=Object(r["defineComponent"])({props:{provider:{type:String,required:!0},modelValue:{type:Object,required:!0}},emits:["update:modelValue"],components:{Field:d["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]}}});m.render=s;var b=m,p=(Object(l["createAngularJsAdapter"])({component:b,scope:{provider:{angularJsBind:"="},credentials:{angularJsBind:"=value"}},directiveName:"smsProviderCredentials",transclude:!0,events:{"update:modelValue":function(e,t,n,o,i,r,l){var a=r?r.$viewValue:n.value;e!==a&&l((function(){r?(r.$setViewValue(e),r.$render()):n.value=e}))}},postCreate:function(e,t,n,o,i){var a=i;a?(a.$render=function(){Object(r["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(r["nextTick"])((function(){e.modelValue=t}))}))}}),Object(r["createElementVNode"])("div",{id:"ajaxErrorManageSmsProviderSettings"},null,-1)),g={key:0},v={key:0},f=Object(r["createElementVNode"])("br",null,null,-1),h={key:1},j=Object(r["createElementVNode"])("br",null,null,-1),O=["innerHTML"],N={key:1},C={id:"accountForm"},M=["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 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;
+ */function V(e,t,n,o,i,l){var a=Object(r["resolveComponent"])("ActivityIndicator"),c=Object(r["resolveComponent"])("Field"),s=Object(r["resolveComponent"])("SmsProviderCredentials"),d=Object(r["resolveComponent"])("SaveButton"),u=Object(r["resolveDirective"])("form");return Object(r["openBlock"])(),Object(r["createElementBlock"])("div",null,[Object(r["createVNode"])(a,{loading:e.isDeletingAccount},null,8,["loading"]),p,e.credentialSupplied?(Object(r["openBlock"])(),Object(r["createElementBlock"])("p",g,[e.credentialError?(Object(r["openBlock"])(),Object(r["createElementBlock"])("span",v,[Object(r["createTextVNode"])(Object(r["toDisplayString"])(e.translate("MobileMessaging_Settings_CredentialInvalid",e.provider)),1),f,Object(r["createTextVNode"])(" "+Object(r["toDisplayString"])(e.credentialError),1)])):(Object(r["openBlock"])(),Object(r["createElementBlock"])("span",h,Object(r["toDisplayString"])(e.translate("MobileMessaging_Settings_CredentialProvided",e.provider))+" "+Object(r["toDisplayString"])(e.creditLeft),1)),j,Object(r["createElementVNode"])("span",{innerHTML:e.updateOrDeleteAccountText,onClick:t[0]||(t[0]=function(t){return e.onUpdateOrDeleteClick(t)})},null,8,O)])):(Object(r["openBlock"])(),Object(r["createElementBlock"])("p",N,Object(r["toDisplayString"])(e.translate("MobileMessaging_Settings_PleaseSignUp")),1)),Object(r["withDirectives"])(Object(r["createElementVNode"])("div",C,[Object(r["createElementVNode"])("div",null,[Object(r["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(r["createVNode"])(s,{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(r["createVNode"])(d,{id:"apiAccountSubmit",disabled:!e.isUpdateAccountPossible,saving:e.isUpdatingAccount,onConfirm:t[4]||(t[4]=function(t){return e.updateAccount()})},null,8,["disabled","saving"]),Object(r["createElementVNode"])("div",{class:"providerDescription",innerHTML:e.$sanitize(e.currentProviderDescription)},null,8,M)],512),[[r["vShow"],!e.credentialSupplied||e.showAccountForm],[u]])])}var S=Object(r["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:d["Field"],SaveButton:d["SaveButton"],SmsProviderCredentials:b},directives:{Form:d["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]:""}}});S.render=V;var y=S;function P(e,t,n,o,i,l){var a=Object(r["resolveComponent"])("Field"),c=Object(r["resolveComponent"])("SaveButton");return Object(r["openBlock"])(),Object(r["createElementBlock"])("div",null,[Object(r["createElementVNode"])("div",null,[Object(r["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(r["createVNode"])(c,{onConfirm:t[1]||(t[1]=function(t){return e.save()}),saving:e.isLoading},null,8,["saving"])])}var A=Object(r["defineComponent"])({props:{delegateManagementOptions:{type:Array,required:!0},delegatedManagement:[Number,Boolean]},components:{Field:d["Field"],SaveButton:d["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}))}}});A.render=P;var E=A,_={key:0},k={class:"row"},x={class:"col s12"},B={class:"form-group row"},w={class:"col s12 m6"},D={class:"col s12 m6 form-help"},U={class:"form-group row addPhoneNumber"},F={class:"col s12 m6"},H={class:"countryCode left"},T=Object(r["createElementVNode"])("span",{class:"countryCodeSymbol"},"+",-1),q={class:"phoneNumber left"},I={class:"addNumber left valign-wrapper"},L={class:"col s12 m6 form-help"},$=Object(r["createElementVNode"])("div",{id:"ajaxErrorAddPhoneNumber"},null,-1),J={key:1,class:"row"},G={class:"col s12"},z={class:"col s12 m6"},R={class:"phoneNumber"},Y=["onUpdate:modelValue","placeholder"],K={key:0,class:"form-help col s12 m6"},Q=Object(r["createTextVNode"])("   "),W=Object(r["createElementVNode"])("div",{id:"invalidVerificationCodeAjaxError",style:{display:"none"}},null,-1);function X(e,t,n,o,i,l){var a=Object(r["resolveComponent"])("Field"),c=Object(r["resolveComponent"])("SaveButton"),s=Object(r["resolveComponent"])("Alert"),d=Object(r["resolveComponent"])("ActivityIndicator");return Object(r["openBlock"])(),Object(r["createElementBlock"])("div",null,[Object(r["createElementVNode"])("p",null,Object(r["toDisplayString"])(e.translate("MobileMessaging_Settings_PhoneNumbers_Help")),1),e.isSuperUser?(Object(r["openBlock"])(),Object(r["createElementBlock"])("p",_,Object(r["toDisplayString"])(e.translate("MobileMessaging_Settings_DelegatedPhoneNumbersOnlyUsedByYou")),1)):Object(r["createCommentVNode"])("",!0),Object(r["createElementVNode"])("div",k,[Object(r["createElementVNode"])("h3",x,Object(r["toDisplayString"])(e.translate("MobileMessaging_Settings_PhoneNumbers_Add")),1)]),Object(r["createElementVNode"])("div",B,[Object(r["createElementVNode"])("div",w,[Object(r["createElementVNode"])("div",null,[Object(r["createVNode"])(a,{uicontrol:"select",name:"countryCodeSelect",title:e.translate("MobileMessaging_Settings_SelectCountry"),modelValue:e.countryCallingCode,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.countryCallingCode=t}),"full-width":!0,options:e.countries},null,8,["title","modelValue","options"])])]),Object(r["createElementVNode"])("div",D,Object(r["toDisplayString"])(e.translate("MobileMessaging_Settings_PhoneNumbers_CountryCode_Help")),1)]),Object(r["createElementVNode"])("div",U,[Object(r["createElementVNode"])("div",F,[Object(r["createElementVNode"])("div",H,[T,Object(r["createElementVNode"])("div",null,[Object(r["createVNode"])(a,{uicontrol:"text",name:"countryCallingCode",title:e.translate("MobileMessaging_Settings_CountryCode"),modelValue:e.countryCallingCode,"onUpdate:modelValue":t[1]||(t[1]=function(t){return e.countryCallingCode=t}),"full-width":!0,maxlength:4},null,8,["title","modelValue"])])]),Object(r["createElementVNode"])("div",q,[Object(r["createElementVNode"])("div",null,[Object(r["createVNode"])(a,{uicontrol:"text",name:"newPhoneNumber",modelValue:e.newPhoneNumber,"onUpdate:modelValue":t[2]||(t[2]=function(t){return e.newPhoneNumber=t}),title:e.translate("MobileMessaging_Settings_PhoneNumber"),"full-width":!0,maxlength:80},null,8,["modelValue","title"])])]),Object(r["createElementVNode"])("div",I,[Object(r["createVNode"])(c,{class:"valign",disabled:!e.canAddNumber||e.isAddingPhonenumber,onConfirm:t[3]||(t[3]=function(t){return e.addPhoneNumber()}),value:e.translate("General_Add")},null,8,["disabled","value"])]),Object(r["withDirectives"])(Object(r["createVNode"])(s,{severity:"warning",id:"suspiciousPhoneNumber"},{default:Object(r["withCtx"])((function(){return[Object(r["createTextVNode"])(Object(r["toDisplayString"])(e.translate("MobileMessaging_Settings_SuspiciousPhoneNumber","54184032")),1)]})),_:1},512),[[r["vShow"],e.showSuspiciousPhoneNumber]])]),Object(r["createElementVNode"])("div",L,Object(r["toDisplayString"])(e.strHelpAddPhone),1)]),$,Object(r["createVNode"])(d,{loading:e.isAddingPhonenumber},null,8,["loading"]),Object.keys(e.phoneNumbers||{}).length>0?(Object(r["openBlock"])(),Object(r["createElementBlock"])("div",J,[Object(r["createElementVNode"])("h3",G,Object(r["toDisplayString"])(e.translate("MobileMessaging_Settings_ManagePhoneNumbers")),1)])):Object(r["createCommentVNode"])("",!0),(Object(r["openBlock"])(!0),Object(r["createElementBlock"])(r["Fragment"],null,Object(r["renderList"])(e.phoneNumbers||[],(function(t,n,o){return Object(r["openBlock"])(),Object(r["createElementBlock"])("div",{class:"form-group row",key:o},[Object(r["createElementVNode"])("div",z,[Object(r["createElementVNode"])("span",R,Object(r["toDisplayString"])(n),1),t||e.isActivated[o]?Object(r["createCommentVNode"])("",!0):Object(r["withDirectives"])((Object(r["openBlock"])(),Object(r["createElementBlock"])("input",{key:0,type:"text",class:"verificationCode","onUpdate:modelValue":function(t){return e.validationCode[o]=t},placeholder:e.translate("MobileMessaging_Settings_EnterActivationCode"),style:{"margin-right":"3.5px"}},null,8,Y)),[[r["vModelText"],e.validationCode[o]]]),t||e.isActivated[o]?Object(r["createCommentVNode"])("",!0):(Object(r["openBlock"])(),Object(r["createBlock"])(c,{key:1,disabled:!e.validationCode[o]||e.isChangingPhoneNumber,onConfirm:function(t){return e.validateActivationCode(n,o)},value:e.translate("MobileMessaging_Settings_ValidatePhoneNumber")},null,8,["disabled","onConfirm","value"])),Object(r["createVNode"])(c,{disabled:e.isChangingPhoneNumber,onConfirm:function(t){return e.removePhoneNumber(n)},value:e.translate("General_Remove"),style:{"margin-left":"3.5px"}},null,8,["disabled","onConfirm","value"])]),t||e.isActivated[o]?Object(r["createCommentVNode"])("",!0):(Object(r["openBlock"])(),Object(r["createElementBlock"])("div",K,[Object(r["createElementVNode"])("div",null,Object(r["toDisplayString"])(e.translate("MobileMessaging_Settings_VerificationCodeJustSent")),1),Q]))])})),128)),W,Object(r["createVNode"])(d,{loading:e.isChangingPhoneNumber},null,8,["loading"])])}var Z=Object(r["defineComponent"])({props:{isSuperUser:Boolean,defaultCallingCode:String,countries:{type:Array,required:!0},strHelpAddPhone:{type:String,required:!0},phoneNumbers:Object},components:{Field:d["Field"],SaveButton:d["SaveButton"],Alert:l["Alert"],ActivityIndicator:l["ActivityIndicator"]},data:function(){return{isAddingPhonenumber:!1,isChangingPhoneNumber:!1,isActivated:{},countryCallingCode:this.defaultCallingCode||"",newPhoneNumber:"",validationCode:{}}},methods:{validateActivationCode:function(e,t){var n=this;if(this.validationCode[t]){var o=this.validationCode[t];this.isChangingPhoneNumber=!0,l["AjaxHelper"].post({method:"MobileMessaging.validatePhoneNumber"},{phoneNumber:e,verificationCode:o},{errorElement:"#invalidVerificationCodeAjaxError"}).then((function(e){var o;if(n.isChangingPhoneNumber=!1,e&&e.value){var i=Object(l["translate"])("MobileMessaging_Settings_PhoneActivated");o=l["NotificationsStore"].show({message:i,context:"success",id:"MobileMessaging_ValidatePhoneNumber",type:"transient"}),n.isActivated[t]=!0}else{var r=Object(l["translate"])("MobileMessaging_Settings_InvalidActivationCode");o=l["NotificationsStore"].show({message:r,context:"error",id:"MobileMessaging_ValidatePhoneNumber",type:"transient"})}l["NotificationsStore"].scrollToNotification(o)})).finally((function(){n.isChangingPhoneNumber=!1}))}},removePhoneNumber:function(e){var t=this;e&&(this.isChangingPhoneNumber=!0,l["AjaxHelper"].post({method:"MobileMessaging.removePhoneNumber"},{phoneNumber:e},{errorElement:"#invalidVerificationCodeAjaxError"}).then((function(){t.isChangingPhoneNumber=!1,l["Matomo"].helper.redirect()})).finally((function(){t.isChangingPhoneNumber=!1})))},addPhoneNumber:function(){var e=this,t="+".concat(this.countryCallingCode).concat(this.newPhoneNumber);this.canAddNumber&&t.length>1&&(this.isAddingPhonenumber=!0,l["AjaxHelper"].post({method:"MobileMessaging.addPhoneNumber"},{phoneNumber:t},{errorElement:"#ajaxErrorAddPhoneNumber"}).then((function(){e.isAddingPhonenumber=!1,l["Matomo"].helper.redirect()})).finally((function(){e.isAddingPhonenumber=!1})))}},computed:{showSuspiciousPhoneNumber:function(){return 0===this.newPhoneNumber.trim().lastIndexOf("0",0)},canAddNumber:function(){return!!this.newPhoneNumber&&""!==this.newPhoneNumber}}});Z.render=X;var ee=Z;
 /*!
  * Matomo - free/libre analytics platform
  *
diff --git a/plugins/MobileMessaging/vue/src/ManageMobilePhoneNumbers/ManageMobilePhoneNumbers.vue b/plugins/MobileMessaging/vue/src/ManageMobilePhoneNumbers/ManageMobilePhoneNumbers.vue
new file mode 100644
index 0000000000..8cbdfaf035
--- /dev/null
+++ b/plugins/MobileMessaging/vue/src/ManageMobilePhoneNumbers/ManageMobilePhoneNumbers.vue
@@ -0,0 +1,279 @@
+<!--
+  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>
+    <p>{{ translate('MobileMessaging_Settings_PhoneNumbers_Help') }}</p>
+    <p v-if="isSuperUser">
+      {{ translate('MobileMessaging_Settings_DelegatedPhoneNumbersOnlyUsedByYou') }}
+    </p>
+    <div class="row">
+      <h3 class="col s12">{{ translate('MobileMessaging_Settings_PhoneNumbers_Add') }}</h3>
+    </div>
+    <div class="form-group row">
+      <div class="col s12 m6">
+        <div>
+          <Field
+            uicontrol="select"
+            name="countryCodeSelect"
+            :title="translate('MobileMessaging_Settings_SelectCountry')"
+            v-model="countryCallingCode"
+            :full-width="true"
+            :options="countries"
+          >
+          </Field>
+        </div>
+      </div>
+      <div class="col s12 m6 form-help">
+        {{ translate('MobileMessaging_Settings_PhoneNumbers_CountryCode_Help') }}
+      </div>
+    </div>
+    <div class="form-group row addPhoneNumber">
+      <div class="col s12 m6">
+        <div class="countryCode left">
+          <span class="countryCodeSymbol">+</span>
+          <div>
+            <Field
+              uicontrol="text"
+              name="countryCallingCode"
+              :title="translate('MobileMessaging_Settings_CountryCode')"
+              v-model="countryCallingCode"
+              :full-width="true"
+              :maxlength="4"
+            >
+            </Field>
+          </div>
+        </div>
+        <div class="phoneNumber left">
+          <div>
+            <Field
+              uicontrol="text"
+              name="newPhoneNumber"
+              v-model="newPhoneNumber"
+              :title="translate('MobileMessaging_Settings_PhoneNumber')"
+              :full-width="true"
+              :maxlength="80"
+            >
+            </Field>
+          </div>
+        </div>
+        <div class="addNumber left valign-wrapper">
+          <SaveButton
+            class="valign"
+            :disabled="!canAddNumber || isAddingPhonenumber"
+            @confirm="addPhoneNumber()"
+            :value="translate('General_Add')"
+          />
+        </div>
+        <Alert severity="warning" id="suspiciousPhoneNumber" v-show="showSuspiciousPhoneNumber">
+          {{ translate('MobileMessaging_Settings_SuspiciousPhoneNumber', '54184032') }}
+        </Alert>
+      </div>
+      <div class="col s12 m6 form-help">
+        {{ strHelpAddPhone }}
+      </div>
+    </div>
+    <div id="ajaxErrorAddPhoneNumber" />
+    <ActivityIndicator :loading="isAddingPhonenumber" />
+    <div class="row" v-if="Object.keys(phoneNumbers || {}).length > 0">
+      <h3 class="col s12">{{ translate('MobileMessaging_Settings_ManagePhoneNumbers') }}</h3>
+    </div>
+    <div
+      class="form-group row"
+      v-for="(validated, phoneNumber, index) in phoneNumbers || []"
+      :key="index"
+    >
+      <div class="col s12 m6">
+        <span class="phoneNumber">{{ phoneNumber }}</span>
+        <input
+          v-if="!validated && !isActivated[index]"
+          type="text"
+          class="verificationCode"
+          v-model="validationCode[index]"
+          :placeholder="translate('MobileMessaging_Settings_EnterActivationCode')"
+          style="margin-right:3.5px"
+        />
+        <SaveButton
+          v-if="!validated && !(isActivated[index])"
+          :disabled="!validationCode[index] || isChangingPhoneNumber"
+          @confirm="validateActivationCode(phoneNumber, index)"
+          :value="translate('MobileMessaging_Settings_ValidatePhoneNumber')"
+        />
+        <SaveButton
+          :disabled="isChangingPhoneNumber"
+          @confirm="removePhoneNumber(phoneNumber)"
+          :value="translate('General_Remove')"
+          style="margin-left:3.5px"
+        />
+      </div>
+      <div class="form-help col s12 m6" v-if="!validated && !(isActivated[index])">
+        <div>
+            {{ translate('MobileMessaging_Settings_VerificationCodeJustSent') }}
+        </div>
+        &nbsp;
+      </div>
+    </div>
+    <div id="invalidVerificationCodeAjaxError" style="display:none"></div>
+    <ActivityIndicator :loading="isChangingPhoneNumber"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  translate,
+  NotificationsStore,
+  AjaxHelper,
+  Matomo,
+  Alert,
+  ActivityIndicator,
+} from 'CoreHome';
+import { Field, SaveButton } from 'CorePluginsAdmin';
+
+interface ManageMobilePhoneNumbersState {
+  isAddingPhonenumber: boolean;
+  isChangingPhoneNumber: boolean;
+  isActivated: Record<string, boolean>;
+  countryCallingCode: string;
+  newPhoneNumber: string;
+  validationCode: Record<string, string>;
+}
+
+export default defineComponent({
+  props: {
+    isSuperUser: Boolean,
+    defaultCallingCode: String,
+    countries: {
+      type: Array,
+      required: true,
+    },
+    strHelpAddPhone: {
+      type: String,
+      required: true,
+    },
+    phoneNumbers: Object,
+  },
+  components: {
+    Field,
+    SaveButton,
+    Alert,
+    ActivityIndicator,
+  },
+  data(): ManageMobilePhoneNumbersState {
+    return {
+      isAddingPhonenumber: false,
+      isChangingPhoneNumber: false,
+      isActivated: {},
+      countryCallingCode: this.defaultCallingCode || '',
+      newPhoneNumber: '',
+      validationCode: {},
+    };
+  },
+  methods: {
+    validateActivationCode(phoneNumber: string, index: number) {
+      if (!this.validationCode[index]) {
+        return;
+      }
+
+      const verificationCode = this.validationCode[index];
+
+      this.isChangingPhoneNumber = true;
+      AjaxHelper.post(
+        {
+          method: 'MobileMessaging.validatePhoneNumber',
+        },
+        {
+          phoneNumber,
+          verificationCode,
+        },
+        {
+          errorElement: '#invalidVerificationCodeAjaxError',
+        },
+      ).then((response) => {
+        this.isChangingPhoneNumber = false;
+
+        let notificationInstanceId;
+        if (!response || !response.value) {
+          const message = translate('MobileMessaging_Settings_InvalidActivationCode');
+          notificationInstanceId = NotificationsStore.show({
+            message,
+            context: 'error',
+            id: 'MobileMessaging_ValidatePhoneNumber',
+            type: 'transient',
+          });
+        } else {
+          const message = translate('MobileMessaging_Settings_PhoneActivated');
+          notificationInstanceId = NotificationsStore.show({
+            message,
+            context: 'success',
+            id: 'MobileMessaging_ValidatePhoneNumber',
+            type: 'transient',
+          });
+          this.isActivated[index] = true;
+        }
+
+        NotificationsStore.scrollToNotification(notificationInstanceId);
+      }).finally(() => {
+        this.isChangingPhoneNumber = false;
+      });
+    },
+    removePhoneNumber(phoneNumber: string) {
+      if (!phoneNumber) {
+        return;
+      }
+
+      this.isChangingPhoneNumber = true;
+      AjaxHelper.post(
+        {
+          method: 'MobileMessaging.removePhoneNumber',
+        },
+        {
+          phoneNumber,
+        },
+        {
+          errorElement: '#invalidVerificationCodeAjaxError',
+        },
+      ).then(() => {
+        this.isChangingPhoneNumber = false;
+        Matomo.helper.redirect();
+      }).finally(() => {
+        this.isChangingPhoneNumber = false;
+      });
+    },
+    addPhoneNumber() {
+      const phoneNumber = `+${this.countryCallingCode}${this.newPhoneNumber}`;
+
+      if (this.canAddNumber && phoneNumber.length > 1) {
+        this.isAddingPhonenumber = true;
+        AjaxHelper.post(
+          {
+            method: 'MobileMessaging.addPhoneNumber',
+          },
+          {
+            phoneNumber,
+          },
+          {
+            errorElement: '#ajaxErrorAddPhoneNumber',
+          },
+        ).then(() => {
+          this.isAddingPhonenumber = false;
+          Matomo.helper.redirect();
+        }).finally(() => {
+          this.isAddingPhonenumber = false;
+        });
+      }
+    },
+  },
+  computed: {
+    showSuspiciousPhoneNumber() {
+      return this.newPhoneNumber.trim().lastIndexOf('0', 0) === 0;
+    },
+    canAddNumber() {
+      return !!this.newPhoneNumber && this.newPhoneNumber !== '';
+    },
+  },
+});
+</script>
diff --git a/plugins/MobileMessaging/vue/src/index.ts b/plugins/MobileMessaging/vue/src/index.ts
index c610cdbf39..a26a2b9526 100644
--- a/plugins/MobileMessaging/vue/src/index.ts
+++ b/plugins/MobileMessaging/vue/src/index.ts
@@ -10,3 +10,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';
+export { default as ManageMobilePhoneNumbers } from './ManageMobilePhoneNumbers/ManageMobilePhoneNumbers.vue';