[Vue] migrate smtp controller in coreadminhome (#18549)

* fix another set of issues

* fix another issue

* rebuild vue

* better ng-change/ng-model fix

* update some screenshots

* rebuild vue

* remove some TODOs

* initiate initial ng-change ONLY for site selectors where this behavior applies

* emit/broadcast on correct scope in wrapper

* rebuild vue

* fix some issues

* couple more fixes

* fix another title issue

* rebuild vue

* do not report on ajax errors in notifications if not logged in

* migrate reporting page and model

* rebuild vue

* create sites selector model adapter

* fix siteselector vue bug, initial site is only set if there is just one site available

* rebuild vue

* migrate plugin settings directive

* remove TODO

* migrate plugin filter directive

* migrate two more plugins directives

* migrate save button

* fix a bunch of bugs

* fix another widget bug

* allow change event name between angularjs and vue

* rebuild vue

* migrate plugin form directive

* get to work

* migrate select-on-focus directive and start migrating report-export directive

* finish migrating report export directive & popover component + create reusable function to create vue app and add globals to it

* rebuild vue

* remove angularjs files and move less contents to vue dir

* migrate sparkline component

* migrate progressbar component

* migrate content intro & content table directives

* rebuild vue

* migrate piwik-ajax-form component to vue

* migrate popover handler directive to service class

* migrate dropdownbutton directive though it does not seem to be in use

* migrate show sensitive data directive

* build vue

* built vue files

* fix function signature

* fix vue warning

* fix ajax request race condition

* rebuild vue

* add new notification type "help" so the help notification is not cleared when clearing transient notifications

* fix some bugs and tests

* update screenshot

* update screenshot & fix a test

* allow using unminified jquery ui + fix bug in last fix

* fix error when enrichedheadline is used in modal

* add polyfill min.js

* remove two todos

* fix widget url logic

* update some screenshots and fix sanitization/escape issue

* update screenshots

* rebuild vue

* fix url location updating regression in MatomoUrl.updateLocation use

* submodule

* update screenshots and fix possible error in json parse

* built vue files

* Merge branch 'vue-period-selector-regression' into vue-reporting-menu

* rebuild vue

* use correct variable

* rebuild vue

* fix widget url logic

* segment parameter can be undefined now for some reason

* fix ngmodel binding in siteselector adapter (for last time hopefully)

* the original site selector only set the first site to the first site in the initial sites query if there was only one site in the entire matomo instance

* fix sitesmanager ui test failure

* fix usersettings test failure

* rebuild vue

* more siteselector tweaks.

* build CoreHome

* more siteselector tweaks.

* another siteselector issue

* update screenshots

* update screenshot and try to fix random failure

* fix some issues in widget.vue when containerid is specified

* fix couple tests

* fix several test failures

* fix string concat

* fix test failure

* extra change

* fix last change and random failure

* styling fix

* fix last fix

* real fix this time

* fix stray request

* proper fix

* update build files

* try to fix random failure

* do not submit form

* check for api errors in promise chain in ajaxhelper.ts

* force a digest after a location change

* use proper abortcontroller method instead of promise hack, have to add new polyfill + try to fix random test failure

* some UI test fixes

* fix some report export issues

* several save button fixes + make replace approximation in createAngularJsAdapter better

* fix sparkline

* apply after manual click triggering in savebutton

* css fixes and piwik-content-table was never applied by angularjs in installtion

* rebuild vue

* add names to divs so they can still be queried as they were in angularjs

* rebuild vue

* rebuild vue

* now that format_metrics checkbox works, need to check it

* small delay before processing first popover

* fix dropdown class/directive name

* fix overlay test

* remove unintended changes

* remove unintended changes

* migrate archiving controller

* do not do a passthrough transpile of vue typescript, and fix many typescript errors in existing code

* more typescript fixes

* even more fixes

* workarounds to fix recursive typing issues

* get corehome to build w/ full typescript build and output type definitions to local dir

* get outputted typings to be used when compiling other plugins and fix typescript issues in CorePluginsAdmin

* readd corehome umd

* fix typescript errors in ExampleVue plugin

* fix feedback typescript errors

* rebuild

* migrate branding controller and get to build

* fix issues and get to work

* rebuild

* fix notification scroll

* migrate smtp settings controller in coreadminhome

* get to work

* update screenshots

* Show a summary of new features (#18065)

* Added "What is new" notification display, populated by a new event

* Removed test example event hook

* Added support for applying a link attribute to menu items, fixes layout issue for mobile with html menu items

* Updated UI test screenshots

* Revert accidental edit

* Hide the "What's new" icon if there are no new features to show

* Changed to use changes.json, track user last viewed, added ui test

* Fix UserManager unit tests broken by new ts_changes_viewed user field

* Moved getChanges to separate helper class, added unit test, added user view access check

* Updated to add new changes table and populate only on plugin update/install

* Added missing fixture class, updated UI screenshots

* Updated matomo font to add ringing bell and new releases icons

* Fix for integration test

* Reworked class structure, removed unnecessary angular directive, merged templates, other tidy ups

* built vue files

* built vue files

* Added null user check, missing table exception handling, show plugin name in change title, better handling of missing change fields

* Added sample changes file, moved UserChanges db code to changes model, added return type hints, better db error code handling, various other improvements

* Revert accidental UI screenshot commit

* Fix for incorrect link name parameter in sample changes, switched back to using $db->query for INSERT IGNORE

* Integration test fix, UI screenshot updates

* Test fix

* Added link styling, show CoreHome changes without plugin prefix in title

* Update UI test screenshot

* Added styles to the popover, added event for filtering changes

* Test fix

* UI test screenshot updates

Co-authored-by: sgiehl <stefan@matomo.org>
Co-authored-by: bx80 <bx80@users.noreply.github.com>

* Update test translation (#18531)

update a test failed XML

* updates all submodules (#18541)

Co-authored-by: diosmosis <diosmosis@users.noreply.github.com>

* Translations update from Hosted Weblate (#18529)

* Translated using Weblate (Greek)

Currently translated at 100.0% (162 of 162 strings)

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/el/

[ci skip]

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: Vasilis Lourdas <dev@lourdas.eu>

* Translated using Weblate (Chinese (Simplified))

Currently translated at 83.9% (136 of 162 strings)

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/zh_Hans/

[ci skip]

Translated using Weblate (Chinese (Simplified))

Currently translated at 99.6% (620 of 622 strings)

Translation: Matomo/Matomo Base
Translate-URL: https://hosted.weblate.org/projects/matomo/matomo-base/zh_Hans/

[ci skip]

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: 刘韬 <lyuutau@outlook.com>

* Update translation files

Updated by "Squash Git commits" hook in Weblate.

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/

[ci skip]

Co-authored-by: Vasilis Lourdas <dev@lourdas.eu>
Co-authored-by: 刘韬 <lyuutau@outlook.com>

* [Vue] migrate report export directive and popover (#18440)

* update files

* sidenav start

* make getRef a utility method

* tweak

* add return type

* finish converting side-nav directive

* starting on reporting menu conversion

* remove unused properties

* convert reporting pages service

* migrate report metadata store

* remove angularjs files

* migrating reporting pages store

* make store adapters more immutable

* get service adapters to work

* fix a UI test

* another html fix

* migrate most of reporting menu directive and model

* Use themed font family for input forms to override materialize.css styling

* rebuild vue

* add a missing div

* ui test fixes

* update styling

* get to build

* get to load in the UI w/o error

* clone result of functions

* fix compile issue

* migrate widget loader and get to load in UI

* rebuild vue

* migrate widgetcontainer

* migrate widget bydimension container

* migrate widget + add tooltips directive

* quick fix

* Updating version to 4.6.0

* loading in page

* update expected screenshot

* add wait just in case travis is slow

* fix ordering bug

* add another wait

* rebuild vue

* css tweak

* fix some bugs and tests

* undo screenshot changes

* Menus test passing locally

* [Vue] date picker viewDate property is not kept up to date (#18385)

* viewDate ref is not kept up to date

* rebuild corehome

* reporting menu subcategory items are meant to be normal links

* update some screenshots

* use innerText instead of text() since angularjs maintains newlines in HTML that vue does not add

* trigger angularjs digest after ajaxhelper request

* rebuild vue

* update screenshots, fix bug in link generation in reporting menu and allow syncing multiple screenshot regexes at a time

* undo box-shadow change for UI tests

* fix more issues & update more tests

* update some screenshots

* fix some tests

* rebuild CoreHome

* quick fix

* built vue files

* fix angularjs issue

* add comment

* update umd files

* 4.6.1-rc1

* 4.6.1

* fix field array title

* apply some pr feedback

* apply more pr feedback

* another fix

* tweak

* fix ng-change not executed before ng-model

* fix another set of issues

* fix another issue

* rebuild vue

* better ng-change/ng-model fix

* update some screenshots

* rebuild vue

* remove some TODOs

* initiate initial ng-change ONLY for site selectors where this behavior applies

* emit/broadcast on correct scope in wrapper

* rebuild vue

* fix some issues

* couple more fixes

* fix another title issue

* rebuild vue

* do not report on ajax errors in notifications if not logged in

* migrate reporting page and model

* rebuild vue

* create sites selector model adapter

* fix siteselector vue bug, initial site is only set if there is just one site available

* rebuild vue

* migrate plugin settings directive

* remove TODO

* migrate plugin filter directive

* migrate two more plugins directives

* migrate save button

* fix a bunch of bugs

* fix another widget bug

* allow change event name between angularjs and vue

* rebuild vue

* migrate plugin form directive

* get to work

* migrate select-on-focus directive and start migrating report-export directive

* finish migrating report export directive & popover component + create reusable function to create vue app and add globals to it

* rebuild vue

* remove angularjs files and move less contents to vue dir

* built vue files

* fix function signature

* fix vue warning

* fix ajax request race condition

* rebuild vue

* add new notification type "help" so the help notification is not cleared when clearing transient notifications

* fix some bugs and tests

* update screenshot

* update screenshot & fix a test

* allow using unminified jquery ui + fix bug in last fix

* fix error when enrichedheadline is used in modal

* add polyfill min.js

* remove two todos

* fix widget url logic

* update some screenshots and fix sanitization/escape issue

* update screenshots

* rebuild vue

* fix url location updating regression in MatomoUrl.updateLocation use

* submodule

* update screenshots and fix possible error in json parse

* built vue files

* Merge branch 'vue-period-selector-regression' into vue-reporting-menu

* rebuild vue

* use correct variable

* rebuild vue

* fix widget url logic

* segment parameter can be undefined now for some reason

* fix ngmodel binding in siteselector adapter (for last time hopefully)

* the original site selector only set the first site to the first site in the initial sites query if there was only one site in the entire matomo instance

* fix sitesmanager ui test failure

* fix usersettings test failure

* rebuild vue

* more siteselector tweaks.

* build CoreHome

* more siteselector tweaks.

* another siteselector issue

* update screenshots

* update screenshot and try to fix random failure

* fix some issues in widget.vue when containerid is specified

* fix couple tests

* fix several test failures

* fix string concat

* fix test failure

* extra change

* fix last change and random failure

* styling fix

* fix last fix

* real fix this time

* fix stray request

* proper fix

* update build files

* try to fix random failure

* do not submit form

* check for api errors in promise chain in ajaxhelper.ts

* force a digest after a location change

* use proper abortcontroller method instead of promise hack, have to add new polyfill + try to fix random test failure

* some UI test fixes

* fix some report export issues

* several save button fixes + make replace approximation in createAngularJsAdapter better

* apply after manual click triggering in savebutton

* add names to divs so they can still be queried as they were in angularjs

* rebuild vue

* now that format_metrics checkbox works, need to check it

* fix unintended changes

* updated expected screenshots

* update two more

* go back to previous format_metrics behavior in popover

Co-authored-by: Justin Velluppillai <justin@innocraft.com>
Co-authored-by: justinvelluppillai <justinvelluppillai@users.noreply.github.com>
Co-authored-by: Matthieu Aubry <mattab@users.noreply.github.com>

* [Vue] remove support in vue for FormField.allSettings (#18542)

* deprecate support in vue for FormField.allSettings since deep watching the property doesnt quite work

* built vue files

* update screenshots

* update screenshot

* Show a summary of new features (#18065)

* Added "What is new" notification display, populated by a new event

* Removed test example event hook

* Added support for applying a link attribute to menu items, fixes layout issue for mobile with html menu items

* Updated UI test screenshots

* Revert accidental edit

* Hide the "What's new" icon if there are no new features to show

* Changed to use changes.json, track user last viewed, added ui test

* Fix UserManager unit tests broken by new ts_changes_viewed user field

* Moved getChanges to separate helper class, added unit test, added user view access check

* Updated to add new changes table and populate only on plugin update/install

* Added missing fixture class, updated UI screenshots

* Updated matomo font to add ringing bell and new releases icons

* Fix for integration test

* Reworked class structure, removed unnecessary angular directive, merged templates, other tidy ups

* built vue files

* built vue files

* Added null user check, missing table exception handling, show plugin name in change title, better handling of missing change fields

* Added sample changes file, moved UserChanges db code to changes model, added return type hints, better db error code handling, various other improvements

* Revert accidental UI screenshot commit

* Fix for incorrect link name parameter in sample changes, switched back to using $db->query for INSERT IGNORE

* Integration test fix, UI screenshot updates

* Test fix

* Added link styling, show CoreHome changes without plugin prefix in title

* Update UI test screenshot

* Added styles to the popover, added event for filtering changes

* Test fix

* UI test screenshot updates

Co-authored-by: sgiehl <stefan@matomo.org>
Co-authored-by: bx80 <bx80@users.noreply.github.com>

* Update test translation (#18531)

update a test failed XML

* updates all submodules (#18541)

Co-authored-by: diosmosis <diosmosis@users.noreply.github.com>

* Translations update from Hosted Weblate (#18529)

* Translated using Weblate (Greek)

Currently translated at 100.0% (162 of 162 strings)

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/el/

[ci skip]

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: Vasilis Lourdas <dev@lourdas.eu>

* Translated using Weblate (Chinese (Simplified))

Currently translated at 83.9% (136 of 162 strings)

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/zh_Hans/

[ci skip]

Translated using Weblate (Chinese (Simplified))

Currently translated at 99.6% (620 of 622 strings)

Translation: Matomo/Matomo Base
Translate-URL: https://hosted.weblate.org/projects/matomo/matomo-base/zh_Hans/

[ci skip]

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: 刘韬 <lyuutau@outlook.com>

* Update translation files

Updated by "Squash Git commits" hook in Weblate.

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/

[ci skip]

Co-authored-by: Vasilis Lourdas <dev@lourdas.eu>
Co-authored-by: 刘韬 <lyuutau@outlook.com>

* [Vue] migrate report export directive and popover (#18440)

* update files

* sidenav start

* make getRef a utility method

* tweak

* add return type

* finish converting side-nav directive

* starting on reporting menu conversion

* remove unused properties

* convert reporting pages service

* migrate report metadata store

* remove angularjs files

* migrating reporting pages store

* make store adapters more immutable

* get service adapters to work

* fix a UI test

* another html fix

* migrate most of reporting menu directive and model

* Use themed font family for input forms to override materialize.css styling

* rebuild vue

* add a missing div

* ui test fixes

* update styling

* get to build

* get to load in the UI w/o error

* clone result of functions

* fix compile issue

* migrate widget loader and get to load in UI

* rebuild vue

* migrate widgetcontainer

* migrate widget bydimension container

* migrate widget + add tooltips directive

* quick fix

* Updating version to 4.6.0

* loading in page

* update expected screenshot

* add wait just in case travis is slow

* fix ordering bug

* add another wait

* rebuild vue

* css tweak

* fix some bugs and tests

* undo screenshot changes

* Menus test passing locally

* [Vue] date picker viewDate property is not kept up to date (#18385)

* viewDate ref is not kept up to date

* rebuild corehome

* reporting menu subcategory items are meant to be normal links

* update some screenshots

* use innerText instead of text() since angularjs maintains newlines in HTML that vue does not add

* trigger angularjs digest after ajaxhelper request

* rebuild vue

* update screenshots, fix bug in link generation in reporting menu and allow syncing multiple screenshot regexes at a time

* undo box-shadow change for UI tests

* fix more issues & update more tests

* update some screenshots

* fix some tests

* rebuild CoreHome

* quick fix

* built vue files

* fix angularjs issue

* add comment

* update umd files

* 4.6.1-rc1

* 4.6.1

* fix field array title

* apply some pr feedback

* apply more pr feedback

* another fix

* tweak

* fix ng-change not executed before ng-model

* fix another set of issues

* fix another issue

* rebuild vue

* better ng-change/ng-model fix

* update some screenshots

* rebuild vue

* remove some TODOs

* initiate initial ng-change ONLY for site selectors where this behavior applies

* emit/broadcast on correct scope in wrapper

* rebuild vue

* fix some issues

* couple more fixes

* fix another title issue

* rebuild vue

* do not report on ajax errors in notifications if not logged in

* migrate reporting page and model

* rebuild vue

* create sites selector model adapter

* fix siteselector vue bug, initial site is only set if there is just one site available

* rebuild vue

* migrate plugin settings directive

* remove TODO

* migrate plugin filter directive

* migrate two more plugins directives

* migrate save button

* fix a bunch of bugs

* fix another widget bug

* allow change event name between angularjs and vue

* rebuild vue

* migrate plugin form directive

* get to work

* migrate select-on-focus directive and start migrating report-export directive

* finish migrating report export directive & popover component + create reusable function to create vue app and add globals to it

* rebuild vue

* remove angularjs files and move less contents to vue dir

* built vue files

* fix function signature

* fix vue warning

* fix ajax request race condition

* rebuild vue

* add new notification type "help" so the help notification is not cleared when clearing transient notifications

* fix some bugs and tests

* update screenshot

* update screenshot & fix a test

* allow using unminified jquery ui + fix bug in last fix

* fix error when enrichedheadline is used in modal

* add polyfill min.js

* remove two todos

* fix widget url logic

* update some screenshots and fix sanitization/escape issue

* update screenshots

* rebuild vue

* fix url location updating regression in MatomoUrl.updateLocation use

* submodule

* update screenshots and fix possible error in json parse

* built vue files

* Merge branch 'vue-period-selector-regression' into vue-reporting-menu

* rebuild vue

* use correct variable

* rebuild vue

* fix widget url logic

* segment parameter can be undefined now for some reason

* fix ngmodel binding in siteselector adapter (for last time hopefully)

* the original site selector only set the first site to the first site in the initial sites query if there was only one site in the entire matomo instance

* fix sitesmanager ui test failure

* fix usersettings test failure

* rebuild vue

* more siteselector tweaks.

* build CoreHome

* more siteselector tweaks.

* another siteselector issue

* update screenshots

* update screenshot and try to fix random failure

* fix some issues in widget.vue when containerid is specified

* fix couple tests

* fix several test failures

* fix string concat

* fix test failure

* extra change

* fix last change and random failure

* styling fix

* fix last fix

* real fix this time

* fix stray request

* proper fix

* update build files

* try to fix random failure

* do not submit form

* check for api errors in promise chain in ajaxhelper.ts

* force a digest after a location change

* use proper abortcontroller method instead of promise hack, have to add new polyfill + try to fix random test failure

* some UI test fixes

* fix some report export issues

* several save button fixes + make replace approximation in createAngularJsAdapter better

* apply after manual click triggering in savebutton

* add names to divs so they can still be queried as they were in angularjs

* rebuild vue

* now that format_metrics checkbox works, need to check it

* fix unintended changes

* updated expected screenshots

* update two more

* go back to previous format_metrics behavior in popover

Co-authored-by: Justin Velluppillai <justin@innocraft.com>
Co-authored-by: justinvelluppillai <justinvelluppillai@users.noreply.github.com>
Co-authored-by: Matthieu Aubry <mattab@users.noreply.github.com>

* [Vue] remove support in vue for FormField.allSettings (#18542)

* deprecate support in vue for FormField.allSettings since deep watching the property doesnt quite work

* built vue files

* update screenshots

* update screenshot

* fix tests

* rebuild

* rebuild

* order plugins by dependencies in vue:build and fix warning in corehome build

* built vue files

* fix bug and rebuild

* fix bug and rebuild

* fix issue

Co-authored-by: Ben Burgess <88810029+bx80@users.noreply.github.com>
Co-authored-by: sgiehl <stefan@matomo.org>
Co-authored-by: bx80 <bx80@users.noreply.github.com>
Co-authored-by: Peter Zhang <peter@innocraft.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Weblate (bot) <hosted@weblate.org>
Co-authored-by: Vasilis Lourdas <dev@lourdas.eu>
Co-authored-by: 刘韬 <lyuutau@outlook.com>
Co-authored-by: Justin Velluppillai <justin@innocraft.com>
Co-authored-by: justinvelluppillai <justinvelluppillai@users.noreply.github.com>
Co-authored-by: Matthieu Aubry <mattab@users.noreply.github.com>

9 files changed, 561 insertions, 143 deletions

diff --git a/plugins/CoreAdminHome/CoreAdminHome.php b/plugins/CoreAdminHome/CoreAdminHome.php
index eeaff8dc59..5c06f5bccb 100644
--- a/plugins/CoreAdminHome/CoreAdminHome.php
+++ b/plugins/CoreAdminHome/CoreAdminHome.php
@@ -142,5 +142,24 @@ class CoreAdminHome extends \Piwik\Plugin
         $translationKeys[] = 'CoreAdminHome_LogoNotWriteableInstruction';
         $translationKeys[] = 'General_GiveUsYourFeedback';
         $translationKeys[] = 'CoreAdminHome_CustomLogoFeedbackInfo';
+        $translationKeys[] = 'CoreAdminHome_EmailServerSettings';
+        $translationKeys[] = 'General_UseSMTPServerForEmail';
+        $translationKeys[] = 'General_SelectYesIfYouWantToSendEmailsViaServer';
+        $translationKeys[] = 'General_SmtpServerAddress';
+        $translationKeys[] = 'General_SmtpPort';
+        $translationKeys[] = 'General_OptionalSmtpPort';
+        $translationKeys[] = 'General_AuthenticationMethodSmtp';
+        $translationKeys[] = 'General_OnlyUsedIfUserPwdIsSet';
+        $translationKeys[] = 'General_SmtpUsername';
+        $translationKeys[] = 'General_OnlyEnterIfRequired';
+        $translationKeys[] = 'General_SmtpPassword';
+        $translationKeys[] = 'General_SmtpFromAddress';
+        $translationKeys[] = 'General_SmtpFromEmailHelp';
+        $translationKeys[] = 'General_SmtpFromName';
+        $translationKeys[] = 'General_NameShownInTheSenderColumn';
+        $translationKeys[] = 'General_SmtpEncryption';
+        $translationKeys[] = 'General_EncryptedSmtpTransport';
+        $translationKeys[] = 'General_OnlyEnterIfRequiredPassword';
+        $translationKeys[] = 'General_WarningPasswordStored';
     }
 }
diff --git a/plugins/CoreAdminHome/angularjs/smtp/mail-smtp.controller.js b/plugins/CoreAdminHome/angularjs/smtp/mail-smtp.controller.js
deleted file mode 100644
index 2554464719..0000000000
--- a/plugins/CoreAdminHome/angularjs/smtp/mail-smtp.controller.js
+++ /dev/null
@@ -1,59 +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
- */
-
-/**
- * Controller to save mail smtp settings
- */
-(function () {
-    angular.module('piwikApp').controller('MailSmtpController', MailSmtpController);
-
-    MailSmtpController.$inject = ['$scope', 'piwikApi'];
-
-    function MailSmtpController($scope, piwikApi) {
-
-        var self = this;
-        this.isLoading = false;
-        this.passwordChanged = false;
-
-        this.save = function () {
-
-            this.isLoading = true;
-
-            var mailSettings = {
-                mailUseSmtp: this.enabled ? '1' : '0',
-                mailPort: this.mailPort,
-                mailHost: this.mailHost,
-                mailType: this.mailType,
-                mailUsername: this.mailUsername,
-                mailFromAddress: this.mailFromAddress,
-                mailFromName: this.mailFromName,
-                mailEncryption: this.mailEncryption
-            };
-
-            if (this.passwordChanged) {
-                mailSettings.mailPassword = this.mailPassword;
-            }
-
-            piwikApi.withTokenInUrl();
-            piwikApi.post({module: 'CoreAdminHome', action: 'setMailSettings'}, mailSettings)
-                .then(function (success) {
-
-                self.isLoading = false;
-
-                var UI = require('piwik/UI');
-                var notification = new UI.Notification();
-                notification.show(_pk_translate('CoreAdminHome_SettingsSaveSuccess'), {
-                    id: 'generalSettings', context: 'success'
-                });
-                notification.scrollToNotification();
-
-            }, function () {
-                self.isLoading = false;
-            });
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/CoreAdminHome/templates/generalSettings.twig b/plugins/CoreAdminHome/templates/generalSettings.twig
index 16ea9f847b..7758572734 100644
--- a/plugins/CoreAdminHome/templates/generalSettings.twig
+++ b/plugins/CoreAdminHome/templates/generalSettings.twig
@@ -41,86 +41,12 @@
     ></div>
 
     {% if not isMultiServerEnvironment %}
-        <div piwik-content-block content-title="{{ 'CoreAdminHome_EmailServerSettings'|translate|e('html_attr') }}"
-        anchor="mailSettings">
-
-        <div piwik-form ng-controller="MailSmtpController as mailSettings">
-            <div piwik-field uicontrol="checkbox" name="mailUseSmtp"
-                 ng-model="mailSettings.enabled"
-                 data-title="{{ 'General_UseSMTPServerForEmail'|translate|e('html_attr') }}"
-                 value="{% if mail.transport == 'smtp' %}1{% endif %}"
-                 inline-help="{{ 'General_SelectYesIfYouWantToSendEmailsViaServer'|translate|e('html_attr') }}">
-            </div>
-
-            <div id="smtpSettings"
-                 ng-show="mailSettings.enabled">
-
-                <div piwik-field uicontrol="text" name="mailHost"
-                     ng-model="mailSettings.mailHost"
-                     ng-change="mailSettings.passwordChanged || ((mailSettings.mailPassword = '') || (mailSettings.passwordChanged = true))"
-                     data-title="{{ 'General_SmtpServerAddress'|translate|e('html_attr') }}"
-                     value="{{ mail.host|e('html_attr') }}">
-                </div>
-
-                <div piwik-field uicontrol="text" name="mailPort"
-                     ng-model="mailSettings.mailPort"
-                     data-title="{{ 'General_SmtpPort'|translate|e('html_attr') }}"
-                     value="{{ mail.port|e('html_attr') }}" inline-help="{{ 'General_OptionalSmtpPort'|translate|e('html_attr') }}">
-                </div>
-
-                <div piwik-field uicontrol="select" name="mailType"
-                     ng-model="mailSettings.mailType"
-                     data-title="{{ 'General_AuthenticationMethodSmtp'|translate|e('html_attr') }}"
-                     options="{{ mailTypes|json_encode }}"
-                     value="{{ mail.type|e('html_attr') }}" inline-help="{{ 'General_OnlyUsedIfUserPwdIsSet'|translate|e('html_attr') }}">
-                </div>
-
-                <div piwik-field uicontrol="text" name="mailUsername"
-                     ng-model="mailSettings.mailUsername"
-                     data-title="{{ 'General_SmtpUsername'|translate|e('html_attr') }}"
-                     value="{{ mail.username|e('html_attr') }}" inline-help="{{ 'General_OnlyEnterIfRequired'|translate|e('html_attr') }}"
-                     autocomplete="off">
-                </div>
-
-                {% set help -%}
-                    {{ 'General_OnlyEnterIfRequiredPassword'|translate }}<br/>
-                    {{ 'General_WarningPasswordStored'|translate("<strong>","</strong>")|raw }}
-                {%- endset %}
-
-                <div piwik-field uicontrol="password" name="mailPassword"
-                     ng-model="mailSettings.mailPassword"
-                     ng-change="mailSettings.passwordChanged = true"
-                     ng-click="!mailSettings.passwordChanged && $event.target.select();"
-                     data-title="{{ 'General_SmtpPassword'|translate|e('html_attr') }}"
-                     value="{{ mail.password ? '******' }}" inline-help="{{ help|e('html_attr') }}"
-                     autocomplete="off">
-                </div>
-
-                <div piwik-field uicontrol="text" name="mailFromAddress"
-                     ng-model="mailSettings.mailFromAddress"
-                     title="{{ 'General_SmtpFromAddress'|translate|e('html_attr') }}"
-                     value="{{ mail.noreply_email_address|e('html_attr') }}" inline-help="{{ 'General_SmtpFromEmailHelp'|translate(mailHost)|e('html_attr') }}"
-                     autocomplete="off">
-                </div>
-
-                <div piwik-field uicontrol="text" name="mailFromName"
-                     ng-model="mailSettings.mailFromName"
-                     title="{{ 'General_SmtpFromName'|translate|e('html_attr') }}"
-                     value="{{ mail.noreply_email_name|e('html_attr') }}" inline-help="{{ 'General_NameShownInTheSenderColumn'|translate|e('html_attr') }}"
-                     autocomplete="off">
-                </div>
-
-                <div piwik-field uicontrol="select" name="mailEncryption"
-                     ng-model="mailSettings.mailEncryption"
-                     data-title="{{ 'General_SmtpEncryption'|translate|e('html_attr') }}"
-                     options="{{ mailEncryptions|json_encode }}"
-                     value="{{ mail.encryption|e('html_attr') }}" inline-help="{{ 'General_EncryptedSmtpTransport'|translate|e('html_attr') }}">
-                </div>
-            </div>
-
-            <div onconfirm="mailSettings.save()" saving="mailSettings.isLoading" piwik-save-button></div>
-        </div>
-    </div>
+        <div
+            matomo-smtp-settings
+            mail="{{ mail|json_encode|e('html_attr') }}"
+            mail-types="{{ mailTypes|json_encode|e('html_attr') }}"
+            mail-encryptions="{{ mailEncryptions|json_encode|e('html_attr') }}"
+        ></div>
     {% endif %}
 {% endif %}
 
diff --git a/plugins/CoreAdminHome/vue/dist/CoreAdminHome.umd.js b/plugins/CoreAdminHome/vue/dist/CoreAdminHome.umd.js
index 5ae4ea3ced..465ab4c6ab 100644
--- a/plugins/CoreAdminHome/vue/dist/CoreAdminHome.umd.js
+++ b/plugins/CoreAdminHome/vue/dist/CoreAdminHome.umd.js
@@ -127,6 +127,7 @@ __webpack_require__.r(__webpack_exports__);
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, "ArchivingSettings", function() { return /* reexport */ ArchivingSettings; });
 __webpack_require__.d(__webpack_exports__, "BrandingSettings", function() { return /* reexport */ BrandingSettings; });
+__webpack_require__.d(__webpack_exports__, "SmtpSettings", function() { return /* reexport */ SmtpSettings; });
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 // This file is imported into lib/wc client bundles.
@@ -758,6 +759,262 @@ BrandingSettingsvue_type_script_lang_ts.render = BrandingSettingsvue_type_templa
   },
   directiveName: 'matomoBrandingSettings'
 }));
+// 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/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.vue?vue&type=template&id=a947f986
+
+var SmtpSettingsvue_type_template_id_a947f986_hoisted_1 = {
+  id: "smtpSettings"
+};
+function SmtpSettingsvue_type_template_id_a947f986_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_ContentBlock = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ContentBlock");
+
+  var _directive_form = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("form");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(_component_ContentBlock, {
+    "content-title": _ctx.translate('CoreAdminHome_EmailServerSettings'),
+    anchor: "mailSettings"
+  }, {
+    default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+        uicontrol: "checkbox",
+        name: "mailUseSmtp",
+        modelValue: _ctx.enabled,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+          return _ctx.enabled = $event;
+        }),
+        title: _ctx.translate('General_UseSMTPServerForEmail'),
+        "inline-help": _ctx.translate('General_SelectYesIfYouWantToSendEmailsViaServer')
+      }, null, 8, ["modelValue", "title", "inline-help"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", SmtpSettingsvue_type_template_id_a947f986_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+        uicontrol: "text",
+        name: "mailHost",
+        "model-value": _ctx.mailHost,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+          return _ctx.onUpdateMailHost($event);
+        }),
+        title: _ctx.translate('General_SmtpServerAddress')
+      }, null, 8, ["model-value", "title"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+        uicontrol: "text",
+        name: "mailPort",
+        modelValue: _ctx.mailPort,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
+          return _ctx.mailPort = $event;
+        }),
+        title: _ctx.translate('General_SmtpPort'),
+        "inline-help": _ctx.translate('General_OptionalSmtpPort')
+      }, null, 8, ["modelValue", "title", "inline-help"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+        uicontrol: "select",
+        name: "mailType",
+        modelValue: _ctx.mailType,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
+          return _ctx.mailType = $event;
+        }),
+        title: _ctx.translate('General_AuthenticationMethodSmtp'),
+        options: _ctx.mailTypes,
+        "inline-help": _ctx.translate('General_OnlyUsedIfUserPwdIsSet')
+      }, null, 8, ["modelValue", "title", "options", "inline-help"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+        uicontrol: "text",
+        name: "mailUsername",
+        modelValue: _ctx.mailUsername,
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
+          return _ctx.mailUsername = $event;
+        }),
+        title: _ctx.translate('General_SmtpUsername'),
+        "inline-help": _ctx.translate('General_OnlyEnterIfRequired'),
+        autocomplete: false
+      }, null, 8, ["modelValue", "title", "inline-help"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+        uicontrol: "password",
+        name: "mailPassword",
+        "model-value": _ctx.mailPassword,
+        "onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
+          return _ctx.onMailPasswordChange($event);
+        }),
+        onClick: _cache[6] || (_cache[6] = function ($event) {
+          !_ctx.passwordChanged && $event.target.select();
+        }),
+        title: _ctx.translate('General_SmtpPassword'),
+        "inline-help": _ctx.passwordHelp,
+        autocomplete: false
+      }, null, 8, ["model-value", "title", "inline-help"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+        uicontrol: "text",
+        name: "mailFromAddress",
+        modelValue: _ctx.mailFromAddress,
+        "onUpdate:modelValue": _cache[7] || (_cache[7] = function ($event) {
+          return _ctx.mailFromAddress = $event;
+        }),
+        title: _ctx.translate('General_SmtpFromAddress'),
+        "inline-help": _ctx.translate('General_SmtpFromEmailHelp', _ctx.mailHost),
+        autocomplete: false
+      }, null, 8, ["modelValue", "title", "inline-help"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+        uicontrol: "text",
+        name: "mailFromName",
+        modelValue: _ctx.mailFromName,
+        "onUpdate:modelValue": _cache[8] || (_cache[8] = function ($event) {
+          return _ctx.mailFromName = $event;
+        }),
+        title: _ctx.translate('General_SmtpFromName'),
+        "inline-help": _ctx.translate('General_NameShownInTheSenderColumn'),
+        autocomplete: false
+      }, null, 8, ["modelValue", "title", "inline-help"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+        uicontrol: "select",
+        name: "mailEncryption",
+        modelValue: _ctx.mailEncryption,
+        "onUpdate:modelValue": _cache[9] || (_cache[9] = function ($event) {
+          return _ctx.mailEncryption = $event;
+        }),
+        title: _ctx.translate('General_SmtpEncryption'),
+        options: _ctx.mailEncryptions,
+        "inline-help": _ctx.translate('General_EncryptedSmtpTransport')
+      }, null, 8, ["modelValue", "title", "options", "inline-help"])], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.enabled]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_SaveButton, {
+        onConfirm: _cache[10] || (_cache[10] = function ($event) {
+          return _ctx.save();
+        }),
+        saving: _ctx.isLoading
+      }, null, 8, ["saving"])], 512), [[_directive_form]])];
+    }),
+    _: 1
+  }, 8, ["content-title"]);
+}
+// CONCATENATED MODULE: ./plugins/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.vue?vue&type=template&id=a947f986
+
+// 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/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.vue?vue&type=script&lang=ts
+
+
+
+/* harmony default export */ var SmtpSettingsvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    mail: {
+      type: Object,
+      required: true
+    },
+    mailTypes: {
+      type: Object,
+      required: true
+    },
+    mailEncryptions: {
+      type: Object,
+      required: true
+    }
+  },
+  data: function data() {
+    var mail = this.mail;
+    return {
+      isLoading: false,
+      enabled: mail.transport === 'smtp',
+      mailHost: mail.host,
+      passwordChanged: false,
+      mailPort: mail.port,
+      mailType: mail.type,
+      mailUsername: mail.username,
+      mailPassword: mail.password ? '******' : '',
+      mailFromAddress: mail.noreply_email_address,
+      mailFromName: mail.noreply_email_name,
+      mailEncryption: mail.encryption
+    };
+  },
+  components: {
+    ContentBlock: external_CoreHome_["ContentBlock"],
+    Field: external_CorePluginsAdmin_["Field"],
+    SaveButton: external_CorePluginsAdmin_["SaveButton"]
+  },
+  directives: {
+    Form: external_CorePluginsAdmin_["Form"]
+  },
+  computed: {
+    passwordHelp: function passwordHelp() {
+      var part1 = "".concat(Object(external_CoreHome_["translate"])('General_OnlyEnterIfRequiredPassword'), "<br/>");
+      var part2 = "".concat(Object(external_CoreHome_["translate"])('General_WarningPasswordStored', '<strong>', '</strong>'), "<br/>");
+      return "".concat(part1, "\n").concat(part2);
+    }
+  },
+  methods: {
+    onUpdateMailHost: function onUpdateMailHost(newValue) {
+      this.mailHost = newValue;
+
+      if (this.passwordChanged) {
+        return;
+      }
+
+      this.mailPassword = '';
+      this.passwordChanged = true;
+    },
+    onMailPasswordChange: function onMailPasswordChange(newValue) {
+      this.mailPassword = newValue;
+      this.passwordChanged = true;
+    },
+    save: function save() {
+      var _this = this;
+
+      this.isLoading = true;
+      var mailSettings = {
+        mailUseSmtp: this.enabled ? '1' : '0',
+        mailPort: this.mailPort,
+        mailHost: this.mailHost,
+        mailType: this.mailType,
+        mailUsername: this.mailUsername,
+        mailFromAddress: this.mailFromAddress,
+        mailFromName: this.mailFromName,
+        mailEncryption: this.mailEncryption
+      };
+
+      if (this.passwordChanged) {
+        mailSettings.mailPassword = this.mailPassword;
+      }
+
+      external_CoreHome_["AjaxHelper"].post({
+        module: 'CoreAdminHome',
+        action: 'setMailSettings'
+      }, mailSettings, {
+        withTokenInUrl: true
+      }).then(function () {
+        var notificationInstanceId = external_CoreHome_["NotificationsStore"].show({
+          message: Object(external_CoreHome_["translate"])('CoreAdminHome_SettingsSaveSuccess'),
+          type: 'transient',
+          id: 'generalSettings',
+          context: 'success'
+        });
+        external_CoreHome_["NotificationsStore"].scrollToNotification(notificationInstanceId);
+      }).finally(function () {
+        _this.isLoading = false;
+      });
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.vue
+
+
+
+SmtpSettingsvue_type_script_lang_ts.render = SmtpSettingsvue_type_template_id_a947f986_render
+
+/* harmony default export */ var SmtpSettings = (SmtpSettingsvue_type_script_lang_ts);
+// CONCATENATED MODULE: ./plugins/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.adapter.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+/* harmony default export */ var SmtpSettings_adapter = (Object(external_CoreHome_["createAngularJsAdapter"])({
+  component: SmtpSettings,
+  scope: {
+    mail: {
+      angularJsBind: '<'
+    },
+    mailTypes: {
+      angularJsBind: '<'
+    },
+    mailEncryptions: {
+      angularJsBind: '<'
+    }
+  },
+  directiveName: 'matomoSmtpSettings'
+}));
 // CONCATENATED MODULE: ./plugins/CoreAdminHome/vue/src/index.ts
 /*!
  * Matomo - free/libre analytics platform
@@ -769,6 +1026,8 @@ BrandingSettingsvue_type_script_lang_ts.render = BrandingSettingsvue_type_templa
 
 
 
+
+
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
 
 
diff --git a/plugins/CoreAdminHome/vue/dist/CoreAdminHome.umd.min.js b/plugins/CoreAdminHome/vue/dist/CoreAdminHome.umd.min.js
index 2914e1a0b3..e0e3d6a966 100644
--- a/plugins/CoreAdminHome/vue/dist/CoreAdminHome.umd.min.js
+++ b/plugins/CoreAdminHome/vue/dist/CoreAdminHome.umd.min.js
@@ -1,14 +1,20 @@
-(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["CoreAdminHome"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["CoreAdminHome"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,o){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="plugins/CoreAdminHome/vue/dist/",o(o.s="fae3")}({"19dc":function(t,o){t.exports=e},"8bbf":function(e,o){e.exports=t},a5a2:function(e,t){e.exports=o},fae3:function(e,t,o){"use strict";if(o.r(t),o.d(t,"ArchivingSettings",(function(){return N})),o.d(t,"BrandingSettings",(function(){return Q})),"undefined"!==typeof window){var n=window.document.currentScript,r=n&&n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(o.p=r[1])}var i=o("19dc"),a=o("8bbf"),c={class:"form-group row"},l={class:"col s12"},s={class:"col s12 m6"},d={class:"form-description",style:{"margin-left":"4px"}},u={for:"enableBrowserTriggerArchiving2"},g=["innerHTML"],m={class:"col s12 m6"},p=["innerHTML"],h={class:"form-group row"},v={class:"col s12"},b={class:"input-field col s12 m6"},f=["disabled"],j={class:"form-description"},O={class:"col s12 m6"},B={key:0,class:"form-help"},y={key:0},A=Object(a["createElementVNode"])("br",null,null,-1),C=Object(a["createElementVNode"])("br",null,null,-1),L=Object(a["createElementVNode"])("br",null,null,-1);function T(e,t,o,n,r,i){var T=Object(a["resolveComponent"])("SaveButton"),S=Object(a["resolveComponent"])("ContentBlock");return Object(a["openBlock"])(),Object(a["createBlock"])(S,{"content-title":e.translate("CoreAdminHome_ArchivingSettings"),anchor:"archivingSettings",class:"matomo-archiving-settings"},{default:Object(a["withCtx"])((function(){return[Object(a["createElementVNode"])("div",null,[Object(a["createElementVNode"])("div",c,[Object(a["createElementVNode"])("h3",l,Object(a["toDisplayString"])(e.translate("General_AllowPiwikArchivingToTriggerBrowser")),1),Object(a["createElementVNode"])("div",s,[Object(a["createElementVNode"])("p",null,[Object(a["createElementVNode"])("label",null,[Object(a["withDirectives"])(Object(a["createElementVNode"])("input",{type:"radio",id:"enableBrowserTriggerArchiving1",name:"enableBrowserTriggerArchiving",value:"1","onUpdate:modelValue":t[0]||(t[0]=function(t){return e.enableBrowserTriggerArchivingValue=t})},null,512),[[a["vModelRadio"],e.enableBrowserTriggerArchivingValue]]),Object(a["createElementVNode"])("span",null,Object(a["toDisplayString"])(e.translate("General_Yes")),1),Object(a["createElementVNode"])("span",d,Object(a["toDisplayString"])(e.translate("General_Default")),1)])]),Object(a["createElementVNode"])("p",null,[Object(a["createElementVNode"])("label",u,[Object(a["withDirectives"])(Object(a["createElementVNode"])("input",{type:"radio",id:"enableBrowserTriggerArchiving2",name:"enableBrowserTriggerArchiving",value:"0","onUpdate:modelValue":t[1]||(t[1]=function(t){return e.enableBrowserTriggerArchivingValue=t})},null,512),[[a["vModelRadio"],e.enableBrowserTriggerArchivingValue]]),Object(a["createElementVNode"])("span",null,Object(a["toDisplayString"])(e.translate("General_No")),1),Object(a["createElementVNode"])("span",{class:"form-description",innerHTML:e.archivingTriggerDesc,style:{"margin-left":"4px"}},null,8,g)])])]),Object(a["createElementVNode"])("div",m,[Object(a["createElementVNode"])("div",{class:"form-help",innerHTML:e.archivingInlineHelp},null,8,p)])]),Object(a["createElementVNode"])("div",h,[Object(a["createElementVNode"])("h3",v,Object(a["toDisplayString"])(e.translate("General_ReportsContainingTodayWillBeProcessedAtMostEvery")),1),Object(a["createElementVNode"])("div",b,[Object(a["withDirectives"])(Object(a["createElementVNode"])("input",{type:"text","onUpdate:modelValue":t[2]||(t[2]=function(t){return e.todayArchiveTimeToLiveValue=t}),id:"todayArchiveTimeToLive",disabled:!e.isGeneralSettingsAdminEnabled},null,8,f),[[a["vModelText"],e.todayArchiveTimeToLiveValue]]),Object(a["createElementVNode"])("span",j,Object(a["toDisplayString"])(e.translate("General_RearchiveTimeIntervalOnlyForTodayReports")),1)]),Object(a["createElementVNode"])("div",O,[e.isGeneralSettingsAdminEnabled?(Object(a["openBlock"])(),Object(a["createElementBlock"])("div",B,[e.showWarningCron?(Object(a["openBlock"])(),Object(a["createElementBlock"])("strong",y,[Object(a["createTextVNode"])(Object(a["toDisplayString"])(e.translate("General_NewReportsWillBeProcessedByCron")),1),A,Object(a["createTextVNode"])(" "+Object(a["toDisplayString"])(e.translate("General_ReportsWillBeProcessedAtMostEveryHour"))+" "+Object(a["toDisplayString"])(e.translate("General_IfArchivingIsFastYouCanSetupCronRunMoreOften")),1),C])):Object(a["createCommentVNode"])("",!0),Object(a["createTextVNode"])(" "+Object(a["toDisplayString"])(e.translate("General_SmallTrafficYouCanLeaveDefault",e.todayArchiveTimeToLiveDefault))+" ",1),L,Object(a["createTextVNode"])(" "+Object(a["toDisplayString"])(e.translate("General_MediumToHighTrafficItIsRecommendedTo",1800,3600)),1)])):Object(a["createCommentVNode"])("",!0)])]),Object(a["createElementVNode"])("div",null,[Object(a["createVNode"])(T,{saving:e.isLoading,onConfirm:t[3]||(t[3]=function(t){return e.save()})},null,8,["saving"])])])]})),_:1},8,["content-title"])}var S=o("a5a2"),V=Object(a["defineComponent"])({props:{enableBrowserTriggerArchiving:Boolean,showSegmentArchiveTriggerInfo:Boolean,isGeneralSettingsAdminEnabled:Boolean,showWarningCron:Boolean,todayArchiveTimeToLive:Number,todayArchiveTimeToLiveDefault:Number},components:{ContentBlock:i["ContentBlock"],SaveButton:S["SaveButton"]},data:function(){return{isLoading:!1,enableBrowserTriggerArchivingValue:this.enableBrowserTriggerArchiving?1:0,todayArchiveTimeToLiveValue:this.todayArchiveTimeToLive}},watch:{enableBrowserTriggerArchiving:function(e){this.enableBrowserTriggerArchivingValue=e?1:0},todayArchiveTimeToLive:function(e){this.todayArchiveTimeToLiveValue=e}},computed:{archivingTriggerDesc:function(){var e="";return e+=Object(i["translate"])("General_ArchivingTriggerDescription",'<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/docs/setup-auto-archiving/">',"</a>"),this.showSegmentArchiveTriggerInfo&&(e+=Object(i["translate"])("General_ArchivingTriggerSegment")),e},archivingInlineHelp:function(){var e=Object(i["translate"])("General_ArchivingInlineHelp");return e+="<br/>",e+=Object(i["translate"])("General_SeeTheOfficialDocumentationForMoreInformation",'<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/docs/setup-auto-archiving/">',"</a>"),e}},methods:{save:function(){var e=this;this.isLoading=!0,i["AjaxHelper"].post({module:"API",method:"CoreAdminHome.setArchiveSettings"},{enableBrowserTriggerArchiving:this.enableBrowserTriggerArchivingValue,todayArchiveTimeToLive:this.todayArchiveTimeToLiveValue}).then((function(){e.isLoading=!1;var t=i["NotificationsStore"].show({message:Object(i["translate"])("CoreAdminHome_SettingsSaveSuccess"),type:"transient",id:"generalSettings",context:"success"});i["NotificationsStore"].scrollToNotification(t)})).finally((function(){e.isLoading=!1}))}}});V.render=T;var N=V,E=(Object(i["createAngularJsAdapter"])({component:N,scope:{enableBrowserTriggerArchiving:{angularJsBind:"<"},showSegmentArchiveTriggerInfo:{angularJsBind:"<"},isGeneralSettingsAdminEnabled:{angularJsBind:"<"},showWarningCron:{angularJsBind:"<"},todayArchiveTimeToLive:{angularJsBind:"<"},todayArchiveTimeToLiveDefault:{angularJsBind:"<"}},directiveName:"matomoArchivingSettings"}),{id:"logoSettings"}),w={id:"logoUploadForm",ref:"logoUploadForm",method:"post",enctype:"multipart/form-data",action:"index.php?module=CoreAdminHome&format=json&action=uploadCustomLogo"},U={key:0},_=["value"],F=Object(a["createElementVNode"])("input",{type:"hidden",name:"force_api_session",value:"1"},null,-1),k={key:0},H={key:0,class:"alert alert-warning uploaderror"},x={class:"row"},D={class:"col s12"},G=["src"],P={class:"row"},J={class:"col s12"},M=["src"],W={key:1},I=["innerHTML"],q={key:1},R={class:"alert alert-warning"};
+(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["CoreAdminHome"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["CoreAdminHome"]=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 r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.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 r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));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/CoreAdminHome/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,"ArchivingSettings",(function(){return w})),n.d(t,"BrandingSettings",(function(){return Q})),n.d(t,"SmtpSettings",(function(){return te})),"undefined"!==typeof window){var o=window.document.currentScript,r=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(n.p=r[1])}var a=n("19dc"),i=n("8bbf"),l={class:"form-group row"},c={class:"col s12"},s={class:"col s12 m6"},d={class:"form-description",style:{"margin-left":"4px"}},m={for:"enableBrowserTriggerArchiving2"},u=["innerHTML"],p={class:"col s12 m6"},g=["innerHTML"],h={class:"form-group row"},v={class:"col s12"},b={class:"input-field col s12 m6"},f=["disabled"],j={class:"form-description"},O={class:"col s12 m6"},y={key:0,class:"form-help"},S={key:0},V=Object(i["createElementVNode"])("br",null,null,-1),C=Object(i["createElementVNode"])("br",null,null,-1),B=Object(i["createElementVNode"])("br",null,null,-1);function A(e,t,n,o,r,a){var A=Object(i["resolveComponent"])("SaveButton"),T=Object(i["resolveComponent"])("ContentBlock");return Object(i["openBlock"])(),Object(i["createBlock"])(T,{"content-title":e.translate("CoreAdminHome_ArchivingSettings"),anchor:"archivingSettings",class:"matomo-archiving-settings"},{default:Object(i["withCtx"])((function(){return[Object(i["createElementVNode"])("div",null,[Object(i["createElementVNode"])("div",l,[Object(i["createElementVNode"])("h3",c,Object(i["toDisplayString"])(e.translate("General_AllowPiwikArchivingToTriggerBrowser")),1),Object(i["createElementVNode"])("div",s,[Object(i["createElementVNode"])("p",null,[Object(i["createElementVNode"])("label",null,[Object(i["withDirectives"])(Object(i["createElementVNode"])("input",{type:"radio",id:"enableBrowserTriggerArchiving1",name:"enableBrowserTriggerArchiving",value:"1","onUpdate:modelValue":t[0]||(t[0]=function(t){return e.enableBrowserTriggerArchivingValue=t})},null,512),[[i["vModelRadio"],e.enableBrowserTriggerArchivingValue]]),Object(i["createElementVNode"])("span",null,Object(i["toDisplayString"])(e.translate("General_Yes")),1),Object(i["createElementVNode"])("span",d,Object(i["toDisplayString"])(e.translate("General_Default")),1)])]),Object(i["createElementVNode"])("p",null,[Object(i["createElementVNode"])("label",m,[Object(i["withDirectives"])(Object(i["createElementVNode"])("input",{type:"radio",id:"enableBrowserTriggerArchiving2",name:"enableBrowserTriggerArchiving",value:"0","onUpdate:modelValue":t[1]||(t[1]=function(t){return e.enableBrowserTriggerArchivingValue=t})},null,512),[[i["vModelRadio"],e.enableBrowserTriggerArchivingValue]]),Object(i["createElementVNode"])("span",null,Object(i["toDisplayString"])(e.translate("General_No")),1),Object(i["createElementVNode"])("span",{class:"form-description",innerHTML:e.archivingTriggerDesc,style:{"margin-left":"4px"}},null,8,u)])])]),Object(i["createElementVNode"])("div",p,[Object(i["createElementVNode"])("div",{class:"form-help",innerHTML:e.archivingInlineHelp},null,8,g)])]),Object(i["createElementVNode"])("div",h,[Object(i["createElementVNode"])("h3",v,Object(i["toDisplayString"])(e.translate("General_ReportsContainingTodayWillBeProcessedAtMostEvery")),1),Object(i["createElementVNode"])("div",b,[Object(i["withDirectives"])(Object(i["createElementVNode"])("input",{type:"text","onUpdate:modelValue":t[2]||(t[2]=function(t){return e.todayArchiveTimeToLiveValue=t}),id:"todayArchiveTimeToLive",disabled:!e.isGeneralSettingsAdminEnabled},null,8,f),[[i["vModelText"],e.todayArchiveTimeToLiveValue]]),Object(i["createElementVNode"])("span",j,Object(i["toDisplayString"])(e.translate("General_RearchiveTimeIntervalOnlyForTodayReports")),1)]),Object(i["createElementVNode"])("div",O,[e.isGeneralSettingsAdminEnabled?(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",y,[e.showWarningCron?(Object(i["openBlock"])(),Object(i["createElementBlock"])("strong",S,[Object(i["createTextVNode"])(Object(i["toDisplayString"])(e.translate("General_NewReportsWillBeProcessedByCron")),1),V,Object(i["createTextVNode"])(" "+Object(i["toDisplayString"])(e.translate("General_ReportsWillBeProcessedAtMostEveryHour"))+" "+Object(i["toDisplayString"])(e.translate("General_IfArchivingIsFastYouCanSetupCronRunMoreOften")),1),C])):Object(i["createCommentVNode"])("",!0),Object(i["createTextVNode"])(" "+Object(i["toDisplayString"])(e.translate("General_SmallTrafficYouCanLeaveDefault",e.todayArchiveTimeToLiveDefault))+" ",1),B,Object(i["createTextVNode"])(" "+Object(i["toDisplayString"])(e.translate("General_MediumToHighTrafficItIsRecommendedTo",1800,3600)),1)])):Object(i["createCommentVNode"])("",!0)])]),Object(i["createElementVNode"])("div",null,[Object(i["createVNode"])(A,{saving:e.isLoading,onConfirm:t[3]||(t[3]=function(t){return e.save()})},null,8,["saving"])])])]})),_:1},8,["content-title"])}var T=n("a5a2"),N=Object(i["defineComponent"])({props:{enableBrowserTriggerArchiving:Boolean,showSegmentArchiveTriggerInfo:Boolean,isGeneralSettingsAdminEnabled:Boolean,showWarningCron:Boolean,todayArchiveTimeToLive:Number,todayArchiveTimeToLiveDefault:Number},components:{ContentBlock:a["ContentBlock"],SaveButton:T["SaveButton"]},data:function(){return{isLoading:!1,enableBrowserTriggerArchivingValue:this.enableBrowserTriggerArchiving?1:0,todayArchiveTimeToLiveValue:this.todayArchiveTimeToLive}},watch:{enableBrowserTriggerArchiving:function(e){this.enableBrowserTriggerArchivingValue=e?1:0},todayArchiveTimeToLive:function(e){this.todayArchiveTimeToLiveValue=e}},computed:{archivingTriggerDesc:function(){var e="";return e+=Object(a["translate"])("General_ArchivingTriggerDescription",'<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/docs/setup-auto-archiving/">',"</a>"),this.showSegmentArchiveTriggerInfo&&(e+=Object(a["translate"])("General_ArchivingTriggerSegment")),e},archivingInlineHelp:function(){var e=Object(a["translate"])("General_ArchivingInlineHelp");return e+="<br/>",e+=Object(a["translate"])("General_SeeTheOfficialDocumentationForMoreInformation",'<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/docs/setup-auto-archiving/">',"</a>"),e}},methods:{save:function(){var e=this;this.isLoading=!0,a["AjaxHelper"].post({module:"API",method:"CoreAdminHome.setArchiveSettings"},{enableBrowserTriggerArchiving:this.enableBrowserTriggerArchivingValue,todayArchiveTimeToLive:this.todayArchiveTimeToLiveValue}).then((function(){e.isLoading=!1;var t=a["NotificationsStore"].show({message:Object(a["translate"])("CoreAdminHome_SettingsSaveSuccess"),type:"transient",id:"generalSettings",context:"success"});a["NotificationsStore"].scrollToNotification(t)})).finally((function(){e.isLoading=!1}))}}});N.render=A;var w=N,E=(Object(a["createAngularJsAdapter"])({component:w,scope:{enableBrowserTriggerArchiving:{angularJsBind:"<"},showSegmentArchiveTriggerInfo:{angularJsBind:"<"},isGeneralSettingsAdminEnabled:{angularJsBind:"<"},showWarningCron:{angularJsBind:"<"},todayArchiveTimeToLive:{angularJsBind:"<"},todayArchiveTimeToLiveDefault:{angularJsBind:"<"}},directiveName:"matomoArchivingSettings"}),{id:"logoSettings"}),L={id:"logoUploadForm",ref:"logoUploadForm",method:"post",enctype:"multipart/form-data",action:"index.php?module=CoreAdminHome&format=json&action=uploadCustomLogo"},U={key:0},_=["value"],F=Object(i["createElementVNode"])("input",{type:"hidden",name:"force_api_session",value:"1"},null,-1),H={key:0},k={key:0,class:"alert alert-warning uploaderror"},x={class:"row"},G={class:"col s12"},P=["src"],D={class:"row"},M={class:"col s12"},I=["src"],J={key:1},q=["innerHTML"],W={key:1},R={class:"alert alert-warning"};
 /*!
  * 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,o,n,r,i){var c=Object(a["resolveComponent"])("Field"),l=Object(a["resolveComponent"])("SaveButton"),s=Object(a["resolveComponent"])("ContentBlock"),d=Object(a["resolveDirective"])("form");return Object(a["openBlock"])(),Object(a["createBlock"])(s,{"content-title":e.translate("CoreAdminHome_BrandingSettings"),anchor:"brandingSettings"},{default:Object(a["withCtx"])((function(){return[Object(a["withDirectives"])(Object(a["createElementVNode"])("div",null,[Object(a["createElementVNode"])("p",null,Object(a["toDisplayString"])(e.translate("CoreAdminHome_CustomLogoHelpText")),1),Object(a["createVNode"])(c,{name:"useCustomLogo",uicontrol:"checkbox","model-value":e.enabled,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.onUseCustomLogoChange(t)}),title:e.translate("CoreAdminHome_UseCustomLogo"),"inline-help":e.help},null,8,["model-value","title","inline-help"]),Object(a["withDirectives"])(Object(a["createElementVNode"])("div",E,[Object(a["createElementVNode"])("form",w,[e.fileUploadEnabled?(Object(a["openBlock"])(),Object(a["createElementBlock"])("div",U,[Object(a["createElementVNode"])("input",{type:"hidden",name:"token_auth",value:e.tokenAuth},null,8,_),F,e.logosWriteable?(Object(a["openBlock"])(),Object(a["createElementBlock"])("div",k,[Object(a["createVNode"])(a["Transition"],{name:"fade-out"},{default:Object(a["withCtx"])((function(){return[e.showUploadError?(Object(a["openBlock"])(),Object(a["createElementBlock"])("div",H,Object(a["toDisplayString"])(e.translate("CoreAdminHome_LogoUploadFailed")),1)):Object(a["createCommentVNode"])("",!0)]})),_:1}),Object(a["createVNode"])(c,{uicontrol:"file",name:"customLogo","model-value":e.customLogo,"onUpdate:modelValue":t[1]||(t[1]=function(t){return e.onCustomLogoChange(t)}),title:e.translate("CoreAdminHome_LogoUpload"),"inline-help":e.translate("CoreAdminHome_LogoUploadHelp","JPG / PNG / GIF","110")},null,8,["model-value","title","inline-help"]),Object(a["createElementVNode"])("div",x,[Object(a["createElementVNode"])("div",D,[Object(a["createElementVNode"])("img",{src:e.pathUserLogoWithBuster,id:"currentLogo",style:{"max-height":"150px"},ref:"currentLogo"},null,8,G)])]),Object(a["createVNode"])(c,{uicontrol:"file",name:"customFavicon","model-value":e.customFavicon,"onUpdate:modelValue":t[2]||(t[2]=function(t){return e.onFaviconChange(t)}),title:e.translate("CoreAdminHome_FaviconUpload"),"inline-help":e.translate("CoreAdminHome_LogoUploadHelp","JPG / PNG / GIF","16")},null,8,["model-value","title","inline-help"]),Object(a["createElementVNode"])("div",P,[Object(a["createElementVNode"])("div",J,[Object(a["createElementVNode"])("img",{src:e.pathUserFaviconWithBuster,id:"currentFavicon",width:"16",height:"16",ref:"currentFavicon"},null,8,M)])])])):Object(a["createCommentVNode"])("",!0),e.logosWriteable?Object(a["createCommentVNode"])("",!0):(Object(a["openBlock"])(),Object(a["createElementBlock"])("div",W,[Object(a["createElementVNode"])("div",{class:"alert alert-warning",innerHTML:e.logosNotWriteableWarning},null,8,I)]))])):Object(a["createCommentVNode"])("",!0),e.fileUploadEnabled?Object(a["createCommentVNode"])("",!0):(Object(a["openBlock"])(),Object(a["createElementBlock"])("div",q,[Object(a["createElementVNode"])("div",R,Object(a["toDisplayString"])(e.translate("CoreAdminHome_FileUploadDisabled","file_uploads=1")),1)]))],512)],512),[[a["vShow"],e.enabled]]),Object(a["createVNode"])(l,{onConfirm:t[3]||(t[3]=function(t){return e.save()}),saving:e.isLoading},null,8,["saving"])],512),[[d]])]})),_:1},8,["content-title"])}var $=window,z=$.$,K=Object(a["defineComponent"])({props:{fileUploadEnabled:{type:Boolean,required:!0},logosWriteable:{type:Boolean,required:!0},useCustomLogo:{type:Boolean,required:!0},pathUserLogoDirectory:{type:String,required:!0},pathUserLogo:{type:String,required:!0},pathUserLogoSmall:{type:String,required:!0},pathUserLogoSvg:{type:String,required:!0},hasUserLogo:{type:Boolean,required:!0},pathUserFavicon:{type:String,required:!0},hasUserFavicon:{type:Boolean,required:!0},isPluginsAdminEnabled:{type:Boolean,required:!0}},components:{Field:S["Field"],ContentBlock:i["ContentBlock"],SaveButton:S["SaveButton"]},directives:{Form:S["Form"]},data:function(){return{isLoading:!1,enabled:this.useCustomLogo,customLogo:this.pathUserLogo,customFavicon:this.pathUserFavicon,showUploadError:!1,currentLogoSrcExists:this.hasUserLogo,currentFaviconSrcExists:this.hasUserFavicon,currentLogoCacheBuster:(new Date).getTime(),currentFaviconCacheBuster:(new Date).getTime()}},computed:{tokenAuth:function(){return i["Matomo"].token_auth},logosNotWriteableWarning:function(){return Object(i["translate"])("CoreAdminHome_LogoNotWriteableInstruction","<code>".concat(this.pathUserLogoDirectory,"</code><br/>"),"".concat(this.pathUserLogo,", ").concat(this.pathUserLogoSmall,", ").concat(this.pathUserLogoSvg))},help:function(){if(this.isPluginsAdminEnabled){var e='"'.concat(Object(i["translate"])("General_GiveUsYourFeedback"),'"'),t='<a href="?module=CorePluginsAdmin&action=plugins" rel="noreferrer noopener" target="_blank">';return Object(i["translate"])("CoreAdminHome_CustomLogoFeedbackInfo",e,t,"</a>")}},pathUserLogoWithBuster:function(){return this.currentLogoSrcExists&&this.pathUserLogo?"".concat(this.pathUserLogo,"?").concat(this.currentLogoCacheBuster):""},pathUserFaviconWithBuster:function(){return this.currentFaviconSrcExists&&this.pathUserFavicon?"".concat(this.pathUserFavicon,"?").concat(this.currentFaviconCacheBuster):""}},methods:{onUseCustomLogoChange:function(e){this.enabled=e},onCustomLogoChange:function(e){this.customLogo=e,this.updateLogo()},onFaviconChange:function(e){this.customFavicon=e,this.updateLogo()},save:function(){var e=this;this.isLoading=!0,i["AjaxHelper"].post({module:"API",method:"CoreAdminHome.setBrandingSettings"},{useCustomLogo:this.enabled?"1":"0"}).then((function(){var e=i["NotificationsStore"].show({message:Object(i["translate"])("CoreAdminHome_SettingsSaveSuccess"),type:"transient",id:"generalSettings",context:"success"});i["NotificationsStore"].scrollToNotification(e)})).finally((function(){e.isLoading=!1}))},updateLogo:function(){var e=this,t=!!this.customLogo,o=!!this.customFavicon;if(t||o){this.showUploadError=!1;var n="upload".concat((new Date).getTime()),r=z('<iframe name="'.concat(n,'" />'));r.css("display","none"),r.on("load",(function(){setTimeout((function(){var n=(z(r.contents()).find("body").html()||"").trim();"0"===n?e.showUploadError=!0:(t&&(e.currentLogoSrcExists=!0,e.currentLogoCacheBuster=(new Date).getTime()),o&&(e.currentFaviconSrcExists=!0,e.currentFaviconCacheBuster=(new Date).getTime())),"1"!==n&&"0"!==n||r.remove()}),1e3)})),z("body:first").append(r);var i=z(this.$refs.logoUploadForm);i.attr("target",n),i.submit(),this.customLogo="",this.customFavicon=""}}}});K.render=Y;var Q=K;
+ */function Y(e,t,n,o,r,a){var l=Object(i["resolveComponent"])("Field"),c=Object(i["resolveComponent"])("SaveButton"),s=Object(i["resolveComponent"])("ContentBlock"),d=Object(i["resolveDirective"])("form");return Object(i["openBlock"])(),Object(i["createBlock"])(s,{"content-title":e.translate("CoreAdminHome_BrandingSettings"),anchor:"brandingSettings"},{default:Object(i["withCtx"])((function(){return[Object(i["withDirectives"])(Object(i["createElementVNode"])("div",null,[Object(i["createElementVNode"])("p",null,Object(i["toDisplayString"])(e.translate("CoreAdminHome_CustomLogoHelpText")),1),Object(i["createVNode"])(l,{name:"useCustomLogo",uicontrol:"checkbox","model-value":e.enabled,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.onUseCustomLogoChange(t)}),title:e.translate("CoreAdminHome_UseCustomLogo"),"inline-help":e.help},null,8,["model-value","title","inline-help"]),Object(i["withDirectives"])(Object(i["createElementVNode"])("div",E,[Object(i["createElementVNode"])("form",L,[e.fileUploadEnabled?(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",U,[Object(i["createElementVNode"])("input",{type:"hidden",name:"token_auth",value:e.tokenAuth},null,8,_),F,e.logosWriteable?(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",H,[Object(i["createVNode"])(i["Transition"],{name:"fade-out"},{default:Object(i["withCtx"])((function(){return[e.showUploadError?(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",k,Object(i["toDisplayString"])(e.translate("CoreAdminHome_LogoUploadFailed")),1)):Object(i["createCommentVNode"])("",!0)]})),_:1}),Object(i["createVNode"])(l,{uicontrol:"file",name:"customLogo","model-value":e.customLogo,"onUpdate:modelValue":t[1]||(t[1]=function(t){return e.onCustomLogoChange(t)}),title:e.translate("CoreAdminHome_LogoUpload"),"inline-help":e.translate("CoreAdminHome_LogoUploadHelp","JPG / PNG / GIF","110")},null,8,["model-value","title","inline-help"]),Object(i["createElementVNode"])("div",x,[Object(i["createElementVNode"])("div",G,[Object(i["createElementVNode"])("img",{src:e.pathUserLogoWithBuster,id:"currentLogo",style:{"max-height":"150px"},ref:"currentLogo"},null,8,P)])]),Object(i["createVNode"])(l,{uicontrol:"file",name:"customFavicon","model-value":e.customFavicon,"onUpdate:modelValue":t[2]||(t[2]=function(t){return e.onFaviconChange(t)}),title:e.translate("CoreAdminHome_FaviconUpload"),"inline-help":e.translate("CoreAdminHome_LogoUploadHelp","JPG / PNG / GIF","16")},null,8,["model-value","title","inline-help"]),Object(i["createElementVNode"])("div",D,[Object(i["createElementVNode"])("div",M,[Object(i["createElementVNode"])("img",{src:e.pathUserFaviconWithBuster,id:"currentFavicon",width:"16",height:"16",ref:"currentFavicon"},null,8,I)])])])):Object(i["createCommentVNode"])("",!0),e.logosWriteable?Object(i["createCommentVNode"])("",!0):(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",J,[Object(i["createElementVNode"])("div",{class:"alert alert-warning",innerHTML:e.logosNotWriteableWarning},null,8,q)]))])):Object(i["createCommentVNode"])("",!0),e.fileUploadEnabled?Object(i["createCommentVNode"])("",!0):(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",W,[Object(i["createElementVNode"])("div",R,Object(i["toDisplayString"])(e.translate("CoreAdminHome_FileUploadDisabled","file_uploads=1")),1)]))],512)],512),[[i["vShow"],e.enabled]]),Object(i["createVNode"])(c,{onConfirm:t[3]||(t[3]=function(t){return e.save()}),saving:e.isLoading},null,8,["saving"])],512),[[d]])]})),_:1},8,["content-title"])}var $=window,z=$.$,K=Object(i["defineComponent"])({props:{fileUploadEnabled:{type:Boolean,required:!0},logosWriteable:{type:Boolean,required:!0},useCustomLogo:{type:Boolean,required:!0},pathUserLogoDirectory:{type:String,required:!0},pathUserLogo:{type:String,required:!0},pathUserLogoSmall:{type:String,required:!0},pathUserLogoSvg:{type:String,required:!0},hasUserLogo:{type:Boolean,required:!0},pathUserFavicon:{type:String,required:!0},hasUserFavicon:{type:Boolean,required:!0},isPluginsAdminEnabled:{type:Boolean,required:!0}},components:{Field:T["Field"],ContentBlock:a["ContentBlock"],SaveButton:T["SaveButton"]},directives:{Form:T["Form"]},data:function(){return{isLoading:!1,enabled:this.useCustomLogo,customLogo:this.pathUserLogo,customFavicon:this.pathUserFavicon,showUploadError:!1,currentLogoSrcExists:this.hasUserLogo,currentFaviconSrcExists:this.hasUserFavicon,currentLogoCacheBuster:(new Date).getTime(),currentFaviconCacheBuster:(new Date).getTime()}},computed:{tokenAuth:function(){return a["Matomo"].token_auth},logosNotWriteableWarning:function(){return Object(a["translate"])("CoreAdminHome_LogoNotWriteableInstruction","<code>".concat(this.pathUserLogoDirectory,"</code><br/>"),"".concat(this.pathUserLogo,", ").concat(this.pathUserLogoSmall,", ").concat(this.pathUserLogoSvg))},help:function(){if(this.isPluginsAdminEnabled){var e='"'.concat(Object(a["translate"])("General_GiveUsYourFeedback"),'"'),t='<a href="?module=CorePluginsAdmin&action=plugins" rel="noreferrer noopener" target="_blank">';return Object(a["translate"])("CoreAdminHome_CustomLogoFeedbackInfo",e,t,"</a>")}},pathUserLogoWithBuster:function(){return this.currentLogoSrcExists&&this.pathUserLogo?"".concat(this.pathUserLogo,"?").concat(this.currentLogoCacheBuster):""},pathUserFaviconWithBuster:function(){return this.currentFaviconSrcExists&&this.pathUserFavicon?"".concat(this.pathUserFavicon,"?").concat(this.currentFaviconCacheBuster):""}},methods:{onUseCustomLogoChange:function(e){this.enabled=e},onCustomLogoChange:function(e){this.customLogo=e,this.updateLogo()},onFaviconChange:function(e){this.customFavicon=e,this.updateLogo()},save:function(){var e=this;this.isLoading=!0,a["AjaxHelper"].post({module:"API",method:"CoreAdminHome.setBrandingSettings"},{useCustomLogo:this.enabled?"1":"0"}).then((function(){var e=a["NotificationsStore"].show({message:Object(a["translate"])("CoreAdminHome_SettingsSaveSuccess"),type:"transient",id:"generalSettings",context:"success"});a["NotificationsStore"].scrollToNotification(e)})).finally((function(){e.isLoading=!1}))},updateLogo:function(){var e=this,t=!!this.customLogo,n=!!this.customFavicon;if(t||n){this.showUploadError=!1;var o="upload".concat((new Date).getTime()),r=z('<iframe name="'.concat(o,'" />'));r.css("display","none"),r.on("load",(function(){setTimeout((function(){var o=(z(r.contents()).find("body").html()||"").trim();"0"===o?e.showUploadError=!0:(t&&(e.currentLogoSrcExists=!0,e.currentLogoCacheBuster=(new Date).getTime()),n&&(e.currentFaviconSrcExists=!0,e.currentFaviconCacheBuster=(new Date).getTime())),"1"!==o&&"0"!==o||r.remove()}),1e3)})),z("body:first").append(r);var a=z(this.$refs.logoUploadForm);a.attr("target",o),a.submit(),this.customLogo="",this.customFavicon=""}}}});K.render=Y;var Q=K,X=(Object(a["createAngularJsAdapter"])({component:Q,scope:{fileUploadEnabled:{angularJsBind:"<"},logosWriteable:{angularJsBind:"<"},useCustomLogo:{angularJsBind:"<"},pathUserLogoDirectory:{angularJsBind:"<"},pathUserLogo:{angularJsBind:"<"},pathUserLogoSmall:{angularJsBind:"<"},pathUserLogoSvg:{angularJsBind:"<"},hasUserLogo:{angularJsBind:"<"},pathUserFavicon:{angularJsBind:"<"},hasUserFavicon:{angularJsBind:"<"},isPluginsAdminEnabled:{angularJsBind:"<"}},directiveName:"matomoBrandingSettings"}),{id:"smtpSettings"});
 /*!
  * Matomo - free/libre analytics platform
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */Object(i["createAngularJsAdapter"])({component:Q,scope:{fileUploadEnabled:{angularJsBind:"<"},logosWriteable:{angularJsBind:"<"},useCustomLogo:{angularJsBind:"<"},pathUserLogoDirectory:{angularJsBind:"<"},pathUserLogo:{angularJsBind:"<"},pathUserLogoSmall:{angularJsBind:"<"},pathUserLogoSvg:{angularJsBind:"<"},hasUserLogo:{angularJsBind:"<"},pathUserFavicon:{angularJsBind:"<"},hasUserFavicon:{angularJsBind:"<"},isPluginsAdminEnabled:{angularJsBind:"<"}},directiveName:"matomoBrandingSettings"})}})}));
+ */function Z(e,t,n,o,r,a){var l=Object(i["resolveComponent"])("Field"),c=Object(i["resolveComponent"])("SaveButton"),s=Object(i["resolveComponent"])("ContentBlock"),d=Object(i["resolveDirective"])("form");return Object(i["openBlock"])(),Object(i["createBlock"])(s,{"content-title":e.translate("CoreAdminHome_EmailServerSettings"),anchor:"mailSettings"},{default:Object(i["withCtx"])((function(){return[Object(i["withDirectives"])(Object(i["createElementVNode"])("div",null,[Object(i["createVNode"])(l,{uicontrol:"checkbox",name:"mailUseSmtp",modelValue:e.enabled,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.enabled=t}),title:e.translate("General_UseSMTPServerForEmail"),"inline-help":e.translate("General_SelectYesIfYouWantToSendEmailsViaServer")},null,8,["modelValue","title","inline-help"]),Object(i["withDirectives"])(Object(i["createElementVNode"])("div",X,[Object(i["createVNode"])(l,{uicontrol:"text",name:"mailHost","model-value":e.mailHost,"onUpdate:modelValue":t[1]||(t[1]=function(t){return e.onUpdateMailHost(t)}),title:e.translate("General_SmtpServerAddress")},null,8,["model-value","title"]),Object(i["createVNode"])(l,{uicontrol:"text",name:"mailPort",modelValue:e.mailPort,"onUpdate:modelValue":t[2]||(t[2]=function(t){return e.mailPort=t}),title:e.translate("General_SmtpPort"),"inline-help":e.translate("General_OptionalSmtpPort")},null,8,["modelValue","title","inline-help"]),Object(i["createVNode"])(l,{uicontrol:"select",name:"mailType",modelValue:e.mailType,"onUpdate:modelValue":t[3]||(t[3]=function(t){return e.mailType=t}),title:e.translate("General_AuthenticationMethodSmtp"),options:e.mailTypes,"inline-help":e.translate("General_OnlyUsedIfUserPwdIsSet")},null,8,["modelValue","title","options","inline-help"]),Object(i["createVNode"])(l,{uicontrol:"text",name:"mailUsername",modelValue:e.mailUsername,"onUpdate:modelValue":t[4]||(t[4]=function(t){return e.mailUsername=t}),title:e.translate("General_SmtpUsername"),"inline-help":e.translate("General_OnlyEnterIfRequired"),autocomplete:!1},null,8,["modelValue","title","inline-help"]),Object(i["createVNode"])(l,{uicontrol:"password",name:"mailPassword","model-value":e.mailPassword,"onUpdate:modelValue":t[5]||(t[5]=function(t){return e.onMailPasswordChange(t)}),onClick:t[6]||(t[6]=function(t){!e.passwordChanged&&t.target.select()}),title:e.translate("General_SmtpPassword"),"inline-help":e.passwordHelp,autocomplete:!1},null,8,["model-value","title","inline-help"]),Object(i["createVNode"])(l,{uicontrol:"text",name:"mailFromAddress",modelValue:e.mailFromAddress,"onUpdate:modelValue":t[7]||(t[7]=function(t){return e.mailFromAddress=t}),title:e.translate("General_SmtpFromAddress"),"inline-help":e.translate("General_SmtpFromEmailHelp",e.mailHost),autocomplete:!1},null,8,["modelValue","title","inline-help"]),Object(i["createVNode"])(l,{uicontrol:"text",name:"mailFromName",modelValue:e.mailFromName,"onUpdate:modelValue":t[8]||(t[8]=function(t){return e.mailFromName=t}),title:e.translate("General_SmtpFromName"),"inline-help":e.translate("General_NameShownInTheSenderColumn"),autocomplete:!1},null,8,["modelValue","title","inline-help"]),Object(i["createVNode"])(l,{uicontrol:"select",name:"mailEncryption",modelValue:e.mailEncryption,"onUpdate:modelValue":t[9]||(t[9]=function(t){return e.mailEncryption=t}),title:e.translate("General_SmtpEncryption"),options:e.mailEncryptions,"inline-help":e.translate("General_EncryptedSmtpTransport")},null,8,["modelValue","title","options","inline-help"])],512),[[i["vShow"],e.enabled]]),Object(i["createVNode"])(c,{onConfirm:t[10]||(t[10]=function(t){return e.save()}),saving:e.isLoading},null,8,["saving"])],512),[[d]])]})),_:1},8,["content-title"])}var ee=Object(i["defineComponent"])({props:{mail:{type:Object,required:!0},mailTypes:{type:Object,required:!0},mailEncryptions:{type:Object,required:!0}},data:function(){var e=this.mail;return{isLoading:!1,enabled:"smtp"===e.transport,mailHost:e.host,passwordChanged:!1,mailPort:e.port,mailType:e.type,mailUsername:e.username,mailPassword:e.password?"******":"",mailFromAddress:e.noreply_email_address,mailFromName:e.noreply_email_name,mailEncryption:e.encryption}},components:{ContentBlock:a["ContentBlock"],Field:T["Field"],SaveButton:T["SaveButton"]},directives:{Form:T["Form"]},computed:{passwordHelp:function(){var e="".concat(Object(a["translate"])("General_OnlyEnterIfRequiredPassword"),"<br/>"),t="".concat(Object(a["translate"])("General_WarningPasswordStored","<strong>","</strong>"),"<br/>");return"".concat(e,"\n").concat(t)}},methods:{onUpdateMailHost:function(e){this.mailHost=e,this.passwordChanged||(this.mailPassword="",this.passwordChanged=!0)},onMailPasswordChange:function(e){this.mailPassword=e,this.passwordChanged=!0},save:function(){var e=this;this.isLoading=!0;var t={mailUseSmtp:this.enabled?"1":"0",mailPort:this.mailPort,mailHost:this.mailHost,mailType:this.mailType,mailUsername:this.mailUsername,mailFromAddress:this.mailFromAddress,mailFromName:this.mailFromName,mailEncryption:this.mailEncryption};this.passwordChanged&&(t.mailPassword=this.mailPassword),a["AjaxHelper"].post({module:"CoreAdminHome",action:"setMailSettings"},t,{withTokenInUrl:!0}).then((function(){var e=a["NotificationsStore"].show({message:Object(a["translate"])("CoreAdminHome_SettingsSaveSuccess"),type:"transient",id:"generalSettings",context:"success"});a["NotificationsStore"].scrollToNotification(e)})).finally((function(){e.isLoading=!1}))}}});ee.render=Z;var te=ee;
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */Object(a["createAngularJsAdapter"])({component:te,scope:{mail:{angularJsBind:"<"},mailTypes:{angularJsBind:"<"},mailEncryptions:{angularJsBind:"<"}},directiveName:"matomoSmtpSettings"})}})}));
 //# sourceMappingURL=CoreAdminHome.umd.min.js.map
\ No newline at end of file
diff --git a/plugins/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.adapter.ts b/plugins/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.adapter.ts
new file mode 100644
index 0000000000..21e752b3aa
--- /dev/null
+++ b/plugins/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.adapter.ts
@@ -0,0 +1,25 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { createAngularJsAdapter } from 'CoreHome';
+import SmtpSettings from './SmtpSettings.vue';
+
+export default createAngularJsAdapter({
+  component: SmtpSettings,
+  scope: {
+    mail: {
+      angularJsBind: '<',
+    },
+    mailTypes: {
+      angularJsBind: '<',
+    },
+    mailEncryptions: {
+      angularJsBind: '<',
+    },
+  },
+  directiveName: 'matomoSmtpSettings',
+});
diff --git a/plugins/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.vue b/plugins/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.vue
new file mode 100644
index 0000000000..64214e0764
--- /dev/null
+++ b/plugins/CoreAdminHome/vue/src/SmtpSettings/SmtpSettings.vue
@@ -0,0 +1,241 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <ContentBlock
+    :content-title="translate('CoreAdminHome_EmailServerSettings')"
+    anchor="mailSettings"
+  >
+    <div v-form>
+      <Field
+        uicontrol="checkbox"
+        name="mailUseSmtp"
+        v-model="enabled"
+        :title="translate('General_UseSMTPServerForEmail')"
+        :inline-help="translate('General_SelectYesIfYouWantToSendEmailsViaServer')"
+      />
+
+      <div id="smtpSettings" v-show="enabled">
+
+        <Field
+          uicontrol="text"
+          name="mailHost"
+          :model-value="mailHost"
+          @update:model-value="onUpdateMailHost($event)"
+          :title="translate('General_SmtpServerAddress')"
+        />
+
+        <Field
+          uicontrol="text"
+          name="mailPort"
+          v-model="mailPort"
+          :title="translate('General_SmtpPort')"
+          :inline-help="translate('General_OptionalSmtpPort')"
+        />
+
+        <Field
+          uicontrol="select"
+          name="mailType"
+          v-model="mailType"
+          :title="translate('General_AuthenticationMethodSmtp')"
+          :options="mailTypes"
+          :inline-help="translate('General_OnlyUsedIfUserPwdIsSet')"
+        />
+
+        <Field
+          uicontrol="text"
+          name="mailUsername"
+          v-model="mailUsername"
+          :title="translate('General_SmtpUsername')"
+          :inline-help="translate('General_OnlyEnterIfRequired')"
+          :autocomplete="false"
+        />
+
+        <Field
+          uicontrol="password"
+          name="mailPassword"
+          :model-value="mailPassword"
+          @update:model-value="onMailPasswordChange($event)"
+          @click="!passwordChanged && $event.target.select();"
+          :title="translate('General_SmtpPassword')"
+          :inline-help="passwordHelp"
+          :autocomplete="false"
+        />
+
+        <Field
+          uicontrol="text"
+          name="mailFromAddress"
+          v-model="mailFromAddress"
+          :title="translate('General_SmtpFromAddress')"
+          :inline-help="translate('General_SmtpFromEmailHelp', mailHost)"
+          :autocomplete="false"
+        />
+
+        <Field
+          uicontrol="text"
+          name="mailFromName"
+          v-model="mailFromName"
+          :title="translate('General_SmtpFromName')"
+          :inline-help="translate('General_NameShownInTheSenderColumn')"
+          :autocomplete="false"
+        />
+
+        <Field
+          uicontrol="select"
+          name="mailEncryption"
+          v-model="mailEncryption"
+          :title="translate('General_SmtpEncryption')"
+          :options="mailEncryptions"
+          :inline-help="translate('General_EncryptedSmtpTransport')"
+        />
+      </div>
+
+      <SaveButton
+        @confirm="save()"
+        :saving="isLoading"
+      />
+    </div>
+  </ContentBlock>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  ContentBlock,
+  translate,
+  NotificationsStore,
+  AjaxHelper,
+} from 'CoreHome';
+import {
+  SaveButton,
+  Form,
+  Field,
+} from 'CorePluginsAdmin';
+
+interface SmtpSettingsState {
+  isLoading: boolean;
+  enabled: boolean;
+  mailHost: string;
+  passwordChanged: boolean;
+  mailPort: number;
+  mailType: string;
+  mailUsername: string;
+  mailPassword: string;
+  mailFromAddress: string;
+  mailFromName: string;
+  mailEncryption: string;
+}
+
+interface MailProperty {
+  transport: string;
+  host: string;
+  port: number;
+  type: string;
+  username: string;
+  password: string;
+  noreply_email_address: string;
+  noreply_email_name: string;
+  encryption: string;
+}
+
+export default defineComponent({
+  props: {
+    mail: {
+      type: Object,
+      required: true,
+    },
+    mailTypes: {
+      type: Object,
+      required: true,
+    },
+    mailEncryptions: {
+      type: Object,
+      required: true,
+    },
+  },
+  data(): SmtpSettingsState {
+    const mail = this.mail as MailProperty;
+    return {
+      isLoading: false,
+      enabled: mail.transport === 'smtp',
+      mailHost: mail.host,
+      passwordChanged: false,
+      mailPort: mail.port,
+      mailType: mail.type,
+      mailUsername: mail.username,
+      mailPassword: mail.password ? '******' : '',
+      mailFromAddress: mail.noreply_email_address,
+      mailFromName: mail.noreply_email_name,
+      mailEncryption: mail.encryption,
+    };
+  },
+  components: {
+    ContentBlock,
+    Field,
+    SaveButton,
+  },
+  directives: {
+    Form,
+  },
+  computed: {
+    passwordHelp() {
+      const part1 = `${translate('General_OnlyEnterIfRequiredPassword')}<br/>`;
+      const part2 = `${translate('General_WarningPasswordStored', '<strong>', '</strong>')}<br/>`;
+      return `${part1}\n${part2}`;
+    },
+  },
+  methods: {
+    onUpdateMailHost(newValue: string) {
+      this.mailHost = newValue;
+
+      if (this.passwordChanged) {
+        return;
+      }
+
+      this.mailPassword = '';
+      this.passwordChanged = true;
+    },
+    onMailPasswordChange(newValue: string) {
+      this.mailPassword = newValue;
+      this.passwordChanged = true;
+    },
+    save() {
+      this.isLoading = true;
+
+      const mailSettings: Record<string, unknown> = {
+        mailUseSmtp: this.enabled ? '1' : '0',
+        mailPort: this.mailPort,
+        mailHost: this.mailHost,
+        mailType: this.mailType,
+        mailUsername: this.mailUsername,
+        mailFromAddress: this.mailFromAddress,
+        mailFromName: this.mailFromName,
+        mailEncryption: this.mailEncryption,
+      };
+
+      if (this.passwordChanged) {
+        mailSettings.mailPassword = this.mailPassword;
+      }
+
+      AjaxHelper.post(
+        { module: 'CoreAdminHome', action: 'setMailSettings' },
+        mailSettings,
+        { withTokenInUrl: true },
+      ).then(() => {
+        const notificationInstanceId = NotificationsStore.show({
+          message: translate('CoreAdminHome_SettingsSaveSuccess'),
+          type: 'transient',
+          id: 'generalSettings',
+          context: 'success',
+        });
+        NotificationsStore.scrollToNotification(notificationInstanceId);
+      }).finally(() => {
+        this.isLoading = false;
+      });
+    },
+  },
+});
+</script>
diff --git a/plugins/CoreAdminHome/vue/src/index.ts b/plugins/CoreAdminHome/vue/src/index.ts
index 9e65df151a..96847a6c02 100644
--- a/plugins/CoreAdminHome/vue/src/index.ts
+++ b/plugins/CoreAdminHome/vue/src/index.ts
@@ -7,6 +7,8 @@
 
 import './ArchivingSettings/ArchivingSettings.adapter';
 import './BrandingSettings/BrandingSettings.adapter';
+import './SmtpSettings/SmtpSettings.adapter';
 
 export { default as ArchivingSettings } from './ArchivingSettings/ArchivingSettings.vue';
 export { default as BrandingSettings } from './BrandingSettings/BrandingSettings.vue';
+export { default as SmtpSettings } from './SmtpSettings/SmtpSettings.vue';
diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index 762f8b4b6b..a6e536c39a 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -228,7 +228,6 @@ class CoreHome extends \Piwik\Plugin
         // we have to load these CoreAdminHome files here. If we loaded them in CoreAdminHome,
         // there would be JS errors as CoreAdminHome is loaded first. Meaning it is loaded before
         // any angular JS file is loaded etc.
-        $jsFiles[] = "plugins/CoreAdminHome/angularjs/smtp/mail-smtp.controller.js";
         $jsFiles[] = "plugins/CoreAdminHome/angularjs/trackingcode/jstrackingcode.controller.js";
         $jsFiles[] = "plugins/CoreAdminHome/angularjs/trackingcode/imagetrackingcode.controller.js";
         $jsFiles[] = "plugins/CoreAdminHome/angularjs/trackingfailures/trackingfailures.controller.js";