Better UI for Piwik 3, more responsive, faster, lots of other fixes (#10397)

* improved ui and responsiveness

* improve rss widget

* commit changes for ui again, got lost after the last commit

* fix more tests

* restoring files

* fix fonts

* fix more tests

* more test fixes

* fix some system tests

* fix tests

* fix system and ui tests

* fix updater tests

* make a page as loaded once the callback is called

* enable verbose

* more verbose output

* enable phantomjs debug flag

* debug should be a phantomjs option

* trying to fix installation tests

* fixes #10173 to not compile css files as less

* trying to minimize js/css requests to hopefully prevent random ui test fails

* disable verbose mode

* fix updater and installation

* lots of bugfixes and ui tweaks

* fix reset dashboard

* various bugfixes

* fix integration tests

* fix text color

* hoping to fix installation tests this way

* cache css/js resources for an hour, should speed up tests and prevent some random issues

* we need to avoid installing plugins multiple times at the same time when requesting resources

* finally getting the colors right again

* fix most tests, more tests for theme

* use an h2 element for titles for better accessibility

* fix headline color

* use actual theme text color (piwik-black)

* fix small font size was applied on all p elements

* fix tests

* now improving all the datatables

* trying to ignore images for visitor log

* Revert "trying to ignore images for visitor log"

This reverts commit ad1ff7267aae14ad905bef130e956c8593c4fb22.

* fix tests

* fix we had always ignored a max label width

* trying to fix file permissions

* fix more file permissions

* Improved plugins update API (#10028)

* refs #7983 let plugins add or remove fields to websites and better settings api

* * Hide CorePluginsAdmin API methods
* More documentation
* Added some more tests

* improved updates API for plugins

* better error code as duplicate column cannot really happen when not actually renaming a colum

Conflicts:
	core/Updates/3.0.0-b1.php
	plugins/CoreUpdater/Commands/Update/CliUpdateObserver.php

* fix DB field piwik_log_visit.location_provider too small (#10003)

* fixes #9564 fix DB field piwik_log_visit.location_provider too small

* use new plugins updater API

* DB field piwik_log_visit.visit_total_actions too small (#10002)

* fixes #9565 DB field piwik_log_visit.visit_total_actions too small

* change type of some db columns that are too small

* fix tests (#10040)
Conflicts:
	plugins/CoreAdminHome/Menu.php
	plugins/Goals/Menu.php
	plugins/MobileMessaging/Menu.php
	plugins/SitesManager/Menu.php
	plugins/UsersManager/Menu.php
	tests/PHPUnit/System/expected/test_apiGetReportMetadata__API.getWidgetMetadata.xml

* fix more file permissions

* repair more file permissions

* repair more file permissions

* trying to make ui tests work again, the table was missing

* fix some encoding issues

* cross browser fixes and usability improvement

* move back the config icon, need to find a better solution later

* more cross browser fixes

* bugfixes

* fix ui tests

* fix encoding issue

* fix various issues with the ui tests when a test gets aborted

* also skip this visitor log test when aborted

* there were 3 css files that were loaded separately, merge them instead into one css

* forgot to add the actual manifest

* do not add manifest if custom logo is specified

* load font css files first as it was before merging them into big css

* fix link icon was not aligned anymore

* minor fixes

* setting it back to 4px

* in popovers the font variable was always ignored and a different font loaded

* forgot to update screenshots

* fix remaining tests

* this should fix an update error

* added 3 new widgets system check, system summary and plugin updates

* tweak new widgets content

* no page reload when changing date or segment

* in admin home show only enabled widgets

* refs #10295 use getMockBuilder instead of deprecated getMock

* fix some ui tests

* fix various bugs

* fix more tests

* fix ui tests

* add a space between loading image and loading message

* fix docs so they appear on developer.piwik.org

* improved documentation

* introduce new Widget::renderTemplate method for consistency with controllers

* remove no longer needed files

* testing system fonts

* fix strong was not really bold

* more useful system summary

* remove ubuntu font

* fix most tests and removed most em elements

* fix tests

* fix headline was very thin

* update submodule

* update submodules

* update submodule

* fix failing ui tests

* update submodules

16 files changed, 577 insertions, 562 deletions

diff --git a/plugins/MobileMessaging/API.php b/plugins/MobileMessaging/API.php
index 345c633b15..9e24700d8a 100644
--- a/plugins/MobileMessaging/API.php
+++ b/plugins/MobileMessaging/API.php
@@ -417,6 +417,7 @@ class API extends \Piwik\Plugin\API
     public function getDelegatedManagement()
     {
         Piwik::checkUserHasSomeViewAccess();
-        return Option::get(MobileMessaging::DELEGATED_MANAGEMENT_OPTION) == 'true';
+        $option = Option::get(MobileMessaging::DELEGATED_MANAGEMENT_OPTION);
+        return $option === 'true';
     }
 }
diff --git a/plugins/MobileMessaging/Controller.php b/plugins/MobileMessaging/Controller.php
index 7ba976c67e..97422efe5c 100644
--- a/plugins/MobileMessaging/Controller.php
+++ b/plugins/MobileMessaging/Controller.php
@@ -50,26 +50,9 @@ class Controller extends ControllerAdmin
      */
     public function index()
     {
-        Piwik::checkUserHasSuperUserAccess();
-
-        $view = new View('@MobileMessaging/index');
-        $this->setManageVariables($view);
-
-        return $view->render();
-    }
-
-    /**
-     * Mobile Messaging Settings tab :
-     *  - set delegated management
-     *  - provide & validate SMS API credential
-     *  - add & activate phone numbers
-     *  - check remaining credits
-     */
-    public function userSettings()
-    {
         Piwik::checkUserIsNotAnonymous();
 
-        $view = new View('@MobileMessaging/userSettings');
+        $view = new View('@MobileMessaging/index');
         $this->setManageVariables($view);
 
         return $view->render();
@@ -88,37 +71,61 @@ class Controller extends ControllerAdmin
             $this->translator->translate('MobileMessaging_SettingsMenu')
         ));
         $view->creditLeft = 0;
-        $view->provider = '';
+        $currentProvider = '';
         if ($view->credentialSupplied && $view->accountManagedByCurrentUser) {
-            $view->provider = $mobileMessagingAPI->getSMSProvider();
+            $currentProvider = $mobileMessagingAPI->getSMSProvider();
             $view->creditLeft = $mobileMessagingAPI->getCreditLeft();
         }
 
+        $view->delegateManagementOptions = array(
+            array('key' => '0',
+                  'value' => Piwik::translate('General_No'),
+                  'description' => Piwik::translate('General_Default') . '. ' .
+                                   Piwik::translate('MobileMessaging_Settings_LetUsersManageAPICredential_No_Help')),
+            array('key' => '1',
+                  'value' => Piwik::translate('General_Yes'),
+                  'description' => Piwik::translate('MobileMessaging_Settings_LetUsersManageAPICredential_Yes_Help'))
+        );
+
         $providers = array();
+        $providerOptions = array();
         foreach (SMSProvider::findAvailableSmsProviders() as $provider) {
+            if (empty($currentProvider)) {
+                $currentProvider = $provider->getId();
+            }
             $providers[$provider->getId()] = $provider->getDescription();
+            $providerOptions[$provider->getId()] = $provider->getId();
         }
 
+        $view->provider = $currentProvider;
         $view->smsProviders = $providers;
+        $view->smsProviderOptions = $providerOptions;
+
+        $defaultCountry = Common::getCountry(
+            LanguagesManager::getLanguageCodeForCurrentUser(),
+            true,
+            IP::getIpFromHeader()
+        );
+
+        $view->defaultCallingCode = '';
 
         // construct the list of countries from the lang files
-        $countries = array();
+        $countries = array(array('key' => '', 'value' => ''));
         foreach ($this->regionDataProvider->getCountryList() as $countryCode => $continentCode) {
             if (isset(CountryCallingCodes::$countryCallingCodes[$countryCode])) {
-                $countries[$countryCode] = array(
-                    'countryName'        => \Piwik\Plugins\UserCountry\countryTranslate($countryCode),
-                    'countryCallingCode' => CountryCallingCodes::$countryCallingCodes[$countryCode],
+
+                if ($countryCode == $defaultCountry) {
+                    $view->defaultCallingCode = CountryCallingCodes::$countryCallingCodes[$countryCode];
+                }
+
+                $countries[] = array(
+                    'key' => CountryCallingCodes::$countryCallingCodes[$countryCode],
+                    'value' => \Piwik\Plugins\UserCountry\countryTranslate($countryCode)
                 );
             }
         }
         $view->countries = $countries;
 
-        $view->defaultCountry = Common::getCountry(
-            LanguagesManager::getLanguageCodeForCurrentUser(),
-            true,
-            IP::getIpFromHeader()
-        );
-
         $view->phoneNumbers = $mobileMessagingAPI->getPhoneNumbers();
 
         $this->setBasicVariablesView($view);
diff --git a/plugins/MobileMessaging/Menu.php b/plugins/MobileMessaging/Menu.php
index 3c12293ac3..cd5e16a56e 100644
--- a/plugins/MobileMessaging/Menu.php
+++ b/plugins/MobileMessaging/Menu.php
@@ -15,12 +15,14 @@ class Menu extends \Piwik\Plugin\Menu
 {
     public function configureAdminMenu(MenuAdmin $menu)
     {
-        if (Piwik::hasUserSuperUserAccess()) {
-            $menu->addManageItem('MobileMessaging_SettingsMenu', $this->urlForAction('index'), $order = 35);
-        }
+        $title = 'MobileMessaging_SettingsMenu';
+        $url = $this->urlForAction('index');
+        $order = 35;
 
-        if (!Piwik::isUserIsAnonymous()) {
-            $menu->addPersonalItem('MobileMessaging_SettingsMenu', $this->urlForAction('userSettings'), $order = 12);
+        if (Piwik::hasUserSuperUserAccess()) {
+            $menu->addSystemItem($title, $url, $order);
+        } else if (!Piwik::isUserIsAnonymous()) {
+            $menu->addPersonalItem($title, $url, $order);
         }
     }
 }
diff --git a/plugins/MobileMessaging/MobileMessaging.php b/plugins/MobileMessaging/MobileMessaging.php
index 5db3a3a571..9ea465dd05 100644
--- a/plugins/MobileMessaging/MobileMessaging.php
+++ b/plugins/MobileMessaging/MobileMessaging.php
@@ -78,6 +78,7 @@ class MobileMessaging extends \Piwik\Plugin
             'ScheduledReports.allowMultipleReports'     => 'allowMultipleReports',
             'ScheduledReports.sendReport'               => 'sendReport',
             'Template.reportParametersScheduledReports' => 'template_reportParametersScheduledReports',
+            'Translate.getClientSideTranslationKeys' => 'getClientSideTranslationKeys'
         );
     }
 
@@ -86,7 +87,9 @@ class MobileMessaging extends \Piwik\Plugin
      */
     public function getJsFiles(&$jsFiles)
     {
-        $jsFiles[] = "plugins/MobileMessaging/javascripts/MobileMessagingSettings.js";
+        $jsFiles[] = "plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings/delegate-mobile-messaging-settings.controller.js";
+        $jsFiles[] = "plugins/MobileMessaging/angularjs/manage-sms-provider/manage-sms-provider.controller.js";
+        $jsFiles[] = "plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers/manage-mobile-phone-numbers.controller.js";
     }
 
     public function getStylesheetFiles(&$stylesheets)
@@ -94,6 +97,13 @@ class MobileMessaging extends \Piwik\Plugin
         $stylesheets[] = "plugins/MobileMessaging/stylesheets/MobileMessagingSettings.less";
     }
 
+    public function getClientSideTranslationKeys(&$translationKeys)
+    {
+        $translationKeys[] = 'CoreAdminHome_SettingsSaveSuccess';
+        $translationKeys[] = 'MobileMessaging_Settings_InvalidActivationCode';
+        $translationKeys[] = 'MobileMessaging_Settings_PhoneActivated';
+    }
+    
     public function validateReportParameters(&$parameters, $reportType)
     {
         if (self::manageEvent($reportType)) {
@@ -200,7 +210,7 @@ class MobileMessaging extends \Piwik\Plugin
         }
     }
 
-    public static function template_reportParametersScheduledReports(&$out)
+    public static function template_reportParametersScheduledReports(&$out, $context = '')
     {
         if (Piwik::isUserIsAnonymous()) {
             return;
@@ -208,7 +218,17 @@ class MobileMessaging extends \Piwik\Plugin
 
         $view = new View('@MobileMessaging/reportParametersScheduledReports');
         $view->reportType = self::MOBILE_TYPE;
-        $view->phoneNumbers = APIMobileMessaging::getInstance()->getActivatedPhoneNumbers();
+        $view->context = $context;
+        $numbers = APIMobileMessaging::getInstance()->getActivatedPhoneNumbers();
+
+        $phoneNumbers = array();
+        if (!empty($numbers)) {
+            foreach ($numbers as $number) {
+                $phoneNumbers[$number] = $number;
+            }
+        }
+
+        $view->phoneNumbers = $phoneNumbers;
         $out .= $view->render();
     }
 
diff --git a/plugins/MobileMessaging/SMSProvider/Clockwork.php b/plugins/MobileMessaging/SMSProvider/Clockwork.php
index 50a7f0e50b..afda1fed76 100644
--- a/plugins/MobileMessaging/SMSProvider/Clockwork.php
+++ b/plugins/MobileMessaging/SMSProvider/Clockwork.php
@@ -44,7 +44,7 @@ class Clockwork extends SMSProvider
 			<li> First, <a target="_blank" href="?module=Proxy&action=redirect&url=http://www.clockworksms.com/platforms/piwik/">get an API Key from Clockwork</a> (Signup is free!)
 			</li><li> Enter your Clockwork API Key on this page. </li>
 			</ul>
-			<br/><em>About Clockwork: </em><ul>
+			<br/>About Clockwork: <ul>
 			<li>Clockwork gives you fast, reliable high quality worldwide SMS delivery, over 450 networks in every corner of the globe.
 			</li><li>Cost per SMS message is around ~0.08USD (0.06EUR).
 			</li><li>Most countries and networks are supported but we suggest you check the latest position on their coverage map <a target="_blank" href="?module=Proxy&action=redirect&url=http://www.clockworksms.com/sms-coverage/">here</a>.
diff --git a/plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings/delegate-mobile-messaging-settings.controller.js b/plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings/delegate-mobile-messaging-settings.controller.js
new file mode 100644
index 0000000000..d7f6a9bfab
--- /dev/null
+++ b/plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings/delegate-mobile-messaging-settings.controller.js
@@ -0,0 +1,39 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    angular.module('piwikApp').controller('DelegateMobileMessagingSettingsController', DelegateMobileMessagingSettingsController);
+
+    DelegateMobileMessagingSettingsController.$inject = ['piwikApi', 'piwik'];
+
+    function DelegateMobileMessagingSettingsController(piwikApi, piwik) {
+
+        var self = this;
+        this.isLoading = false;
+
+        this.save = function () {
+            this.isLoading = true;
+
+            piwikApi.post(
+                {method: 'MobileMessaging.setDelegatedManagement'},
+                {delegatedManagement: (this.enabled == '1') ? 'true' : 'false'}
+            ).then(function () {
+
+                var UI = require('piwik/UI');
+                var notification = new UI.Notification();
+                notification.show(_pk_translate('CoreAdminHome_SettingsSaveSuccess'), {
+                    id: 'mobileMessagingSettings', context: 'success'
+                });
+                notification.scrollToNotification();
+                
+                piwik.helper.redirect();
+                self.isLoading = false;
+            }, function () {
+                self.isLoading = false;
+            });
+        };
+    }
+})();
\ No newline at end of file
diff --git a/plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers/manage-mobile-phone-numbers.controller.js b/plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers/manage-mobile-phone-numbers.controller.js
new file mode 100644
index 0000000000..06a9d255f7
--- /dev/null
+++ b/plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers/manage-mobile-phone-numbers.controller.js
@@ -0,0 +1,110 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    angular.module('piwikApp').controller('ManageMobilePhoneNumbersController', ManageMobilePhoneNumbersController);
+
+    ManageMobilePhoneNumbersController.$inject = ['piwikApi', 'piwik'];
+
+    function ManageMobilePhoneNumbersController(piwikApi, piwikk) {
+        // remember to keep controller very simple. Create a service/factory (model) if needed
+
+        var self = this;
+        this.isAddingPhonenumber = false;
+        this.canAddNumber = false;
+        this.isActivated = {};
+
+        this.validateActivationCode = function(phoneNumber, index) {
+            if (!this.validationCode || !this.validationCode[index] || this.validationCode[index] == '') {
+                return;
+            }
+
+            var verificationCode = this.validationCode[index];
+
+            var success = function (response) {
+
+                self.isChangingPhoneNumber = false;
+
+                var UI = require('piwik/UI');
+                var notification = new UI.Notification();
+
+                if (!response || !response.value) {
+                    var message = _pk_translate('MobileMessaging_Settings_InvalidActivationCode');
+                    notification.show(message, {
+                        context: 'error',
+                        id: 'MobileMessaging_ValidatePhoneNumber'
+                    });
+                }
+                else {
+                    var message = _pk_translate('MobileMessaging_Settings_PhoneActivated')
+                    notification.show(message, {
+                        context: 'success',
+                        id: 'MobileMessaging_ValidatePhoneNumber'
+                    });
+
+                    self.isActivated[index] = true;
+                }
+
+                notification.scrollToNotification();
+            };
+
+            this.isChangingPhoneNumber = true;
+
+            piwikApi.post(
+                {method: 'MobileMessaging.validatePhoneNumber'},
+                {phoneNumber: phoneNumber, verificationCode: verificationCode},
+                {placeat: '#invalidVerificationCodeAjaxError'}
+            ).then(success, function () {
+                self.isChangingPhoneNumber = false;
+            });
+            
+        }
+
+        this.removePhoneNumber = function (phoneNumber) {
+            if (!phoneNumber) {
+                return;
+            }
+
+            this.isChangingPhoneNumber = true;
+
+            piwikApi.post(
+                {method: 'MobileMessaging.removePhoneNumber'},
+                {phoneNumber: phoneNumber},
+                {placeat: '#invalidVerificationCodeAjaxError'}
+            ).then(function () {
+                self.isChangingPhoneNumber = false;
+                piwik.helper.redirect();
+            }, function () {
+                self.isChangingPhoneNumber = false;
+            });
+        }
+
+        this.validateNewPhoneNumberFormat = function () {
+            this.showSuspiciousPhoneNumber = $.trim(this.newPhoneNumber).lastIndexOf('0', 0) === 0;
+            this.canAddNumber = !!this.newPhoneNumber && this.newPhoneNumber != '';
+        };
+
+        this.addPhoneNumber = function() {
+            var phoneNumber = '+' + this.countryCallingCode + this.newPhoneNumber;
+
+            if (this.canAddNumber && phoneNumber.length > 1) {
+                this.isAddingPhonenumber = true;
+
+                piwikApi.post(
+                    {method: 'MobileMessaging.addPhoneNumber'},
+                    {phoneNumber: phoneNumber},
+                    {placeat: '#ajaxErrorAddPhoneNumber'}
+                ).then(function () {
+                    self.isAddingPhonenumber = false;
+                    piwik.helper.redirect();
+                }, function () {
+                    self.isAddingPhonenumber = false;
+                });
+            }
+        }
+
+    }
+})();
\ No newline at end of file
diff --git a/plugins/MobileMessaging/angularjs/manage-sms-provider/manage-sms-provider.controller.js b/plugins/MobileMessaging/angularjs/manage-sms-provider/manage-sms-provider.controller.js
new file mode 100644
index 0000000000..482445f1b2
--- /dev/null
+++ b/plugins/MobileMessaging/angularjs/manage-sms-provider/manage-sms-provider.controller.js
@@ -0,0 +1,64 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    angular.module('piwikApp').controller('ManageSmsProviderController', ManageSmsProviderController);
+
+    ManageSmsProviderController.$inject = ['piwikApi', 'piwik'];
+
+    function ManageSmsProviderController(piwikApi, piwik) {
+
+        var self = this;
+        this.isDeletingAccount = false;
+        this.isUpdatingAccount = false;
+        this.showAccountForm = false;
+        this.isUpdateAccountPossible = false;
+
+        function deleteApiAccount() {
+            self.isDeletingAccount = true;
+
+            piwikApi.fetch(
+                {method: 'MobileMessaging.deleteSMSAPICredential'},
+                {placeat: '#ajaxErrorManageSmsProviderSettings'}
+            ).then(function () {
+                self.isDeletingAccount = false;
+                piwik.helper.redirect();
+            }, function () {
+                self.isDeletingAccount = false;
+            });
+        }
+
+        this.showUpdateAccount = function () {
+            this.showAccountForm = true;
+        };
+
+        this.isUpdateAccountPossible = function () {
+            this.canBeUpdated = (!!this.apiKey && this.apiKey != '' && !!this.smsProvider);
+            return this.canBeUpdated;
+        }
+
+        this.updateAccount = function () {
+            if (this.isUpdateAccountPossible()) {
+                this.isUpdatingAccount = true;
+
+                piwikApi.post(
+                    {method: 'MobileMessaging.setSMSAPICredential'},
+                    {provider: this.smsProvider, apiKey: this.apiKey},
+                    {placeat: '#ajaxErrorManageSmsProviderSettings'}
+                ).then(function () {
+                    self.isUpdatingAccount = false;
+                    piwik.helper.redirect();
+                }, function () {
+                    self.isUpdatingAccount = false;
+                });
+            }
+        }
+
+        this.deleteAccount = function () {
+            piwikHelper.modalConfirm('#confirmDeleteAccount', {yes: deleteApiAccount});
+        };
+    }
+})();
\ No newline at end of file
diff --git a/plugins/MobileMessaging/javascripts/MobileMessagingSettings.js b/plugins/MobileMessaging/javascripts/MobileMessagingSettings.js
deleted file mode 100644
index 20e2184c89..0000000000
--- a/plugins/MobileMessaging/javascripts/MobileMessagingSettings.js
+++ /dev/null
@@ -1,266 +0,0 @@
-/**
- * Piwik - free/libre analytics platform
- *
- * @link http://piwik.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-// TODO when UI stabilized, factorize ajax boiler plate accros MobileMessagingSettings javascript functions
-var MobileMessagingSettings = MobileMessagingSettings || (function () {
-
-    /************************************************************
-     * Private data
-     ************************************************************/
-    var
-        delegatedManagementSelector = 'input[name=delegatedManagement]',
-        apiAccountSubmitSelector = '#apiAccountSubmit',
-        addPhoneNumberSubmitSelector = '#addPhoneNumberSubmit',
-        providersSelector = '#smsProviders',
-        providerDescriptionsSelector = '.providerDescription',
-        apiKeySelector = '#apiKey',
-        countriesSelector = '#countries',
-        countryCallingCodeSelector = '#countryCallingCode',
-        newPhoneNumberSelector = '#newPhoneNumber',
-        suspiciousPhoneNumberSelector = '#suspiciousPhoneNumber',
-        validatePhoneNumberSubmitSelector = '.validatePhoneNumberSubmit',
-        formDescriptionSelector = '.form-description',
-        removePhoneNumberSubmitSelector = '.removePhoneNumberSubmit',
-        verificationCodeSelector = '.verificationCode',
-        phoneNumberSelector = '.phoneNumber',
-        deleteAcountSelector = '#deleteAccount',
-        confirmDeleteAccountSelector = '#confirmDeleteAccount',
-        accountFormSelector = '#accountForm',
-        displayAccountFormSelector = '#displayAccountForm',
-        phoneNumberActivatedSelector = '#phoneNumberActivated',
-        invalidActivationCodeMsgSelector = '#invalidActivationCode',
-        ajaxErrorsSelector = '#ajaxErrorMobileMessagingSettings',
-        invalidVerificationCodeAjaxErrorSelector = '#invalidVerificationCodeAjaxError',
-        ajaxLoadingSelector = '#ajaxLoadingMobileMessagingSettings';
-
-    /************************************************************
-     * Private methods
-     ************************************************************/
-
-    function initUIEvents() {
-
-        $(delegatedManagementSelector).change(updateDelegatedManagement);
-        $(apiAccountSubmitSelector).click(updateApiAccount);
-        $(deleteAcountSelector).click(confirmDeleteApiAccount);
-        $(displayAccountFormSelector).click(displayAccountForm);
-        $(addPhoneNumberSubmitSelector).click(addPhoneNumber);
-        $(newPhoneNumberSelector).keyup(updateSuspiciousPhoneNumberMessage);
-        $(validatePhoneNumberSubmitSelector).click(validatePhoneNumber);
-        $(removePhoneNumberSubmitSelector).click(removePhoneNumber);
-        $(countryCallingCodeSelector).keyup(updateCountry);
-        $(countriesSelector).change(updateCountryCallingCode);
-        updateCountryCallingCode();
-        $(providersSelector).change(updateProviderDescription);
-        updateProviderDescription();
-    }
-
-    function updateCountry() {
-        var countryCallingCode = $(countryCallingCodeSelector).val();
-        if (countryCallingCode != null && countryCallingCode != '') {
-            var countryToSelect = $(countriesSelector + ' option[value=' + countryCallingCode + ']');
-            if (countryToSelect.size() > 0) {
-                countryToSelect.attr('selected', 'selected');
-            }
-            else {
-                $(countriesSelector + ' option:selected').removeAttr('selected');
-            }
-        }
-    }
-
-    function displayAccountForm() {
-        $(accountFormSelector).show();
-    }
-
-    function validatePhoneNumber(event) {
-        var phoneNumberContainer = $(event.target).parent();
-        var verificationCodeContainer = phoneNumberContainer.find(verificationCodeSelector);
-        var verificationCode = verificationCodeContainer.val();
-        var phoneNumber = phoneNumberContainer.find(phoneNumberSelector).html();
-
-        if (verificationCode != null && verificationCode != '') {
-            var success =
-                function (response) {
-
-                    var UI = require('piwik/UI');
-                    var notification = new UI.Notification();
-
-                    $(phoneNumberActivatedSelector).hide();
-                    if (!response.value) {
-                        var message = $(invalidActivationCodeMsgSelector).html();
-                        notification.show(message, {
-                            context: 'error',
-                            id: 'MobileMessaging_ValidatePhoneNumber',
-                            style: {marginTop: '10px'}
-                        });
-                    }
-                    else {
-                        var message = $(phoneNumberActivatedSelector).html();
-                        notification.show(message, {
-                            context: 'success',
-                            id: 'MobileMessaging_ValidatePhoneNumber',
-                            style: {marginTop: '10px'}
-                        });
-
-                        $(verificationCodeContainer).remove();
-                        $(phoneNumberContainer).find(validatePhoneNumberSubmitSelector).remove();
-                        $(phoneNumberContainer).find(formDescriptionSelector).remove();
-                    }
-
-                    notification.scrollToNotification();
-                };
-
-            var ajaxHandler = new ajaxHelper();
-            ajaxHandler.addParams({
-                module: 'API',
-                format: 'json',
-                method: 'MobileMessaging.validatePhoneNumber'
-            }, 'GET');
-            ajaxHandler.addParams({phoneNumber: phoneNumber, verificationCode: verificationCode}, 'POST');
-            ajaxHandler.setCallback(success);
-            ajaxHandler.setLoadingElement(ajaxLoadingSelector);
-            ajaxHandler.setErrorElement(invalidVerificationCodeAjaxErrorSelector);
-            ajaxHandler.send(true);
-        }
-    }
-
-    function removePhoneNumber(event) {
-        var phoneNumberContainer = $(event.target).parent();
-        var phoneNumber = phoneNumberContainer.find(phoneNumberSelector).html();
-
-        var ajaxHandler = new ajaxHelper();
-        ajaxHandler.addParams({
-            module: 'API',
-            format: 'json',
-            method: 'MobileMessaging.removePhoneNumber'
-        }, 'GET');
-        ajaxHandler.addParams({phoneNumber: phoneNumber}, 'POST');
-        ajaxHandler.redirectOnSuccess();
-        ajaxHandler.setLoadingElement(ajaxLoadingSelector);
-        ajaxHandler.setErrorElement(ajaxErrorsSelector);
-        ajaxHandler.send(true);
-    }
-
-    function updateSuspiciousPhoneNumberMessage() {
-        var newPhoneNumber = $(newPhoneNumberSelector).val();
-
-        // check if number starts with 0
-        if ($.trim(newPhoneNumber).lastIndexOf('0', 0) === 0) {
-            $(suspiciousPhoneNumberSelector).show();
-        }
-        else {
-            $(suspiciousPhoneNumberSelector).hide();
-        }
-    }
-
-    function addPhoneNumber() {
-        var newPhoneNumber = $(newPhoneNumberSelector).val();
-        var countryCallingCode = $(countryCallingCodeSelector).val();
-
-        var phoneNumber = '+' + countryCallingCode + newPhoneNumber;
-
-        if (newPhoneNumber != null && newPhoneNumber != '') {
-            var ajaxHandler = new ajaxHelper();
-            ajaxHandler.addParams({
-                module: 'API',
-                format: 'json',
-                method: 'MobileMessaging.addPhoneNumber'
-            }, 'GET');
-            ajaxHandler.addParams({phoneNumber: phoneNumber}, 'POST');
-            ajaxHandler.redirectOnSuccess();
-            ajaxHandler.setLoadingElement(ajaxLoadingSelector);
-            ajaxHandler.setErrorElement(ajaxErrorsSelector);
-            ajaxHandler.send(true);
-        }
-    }
-
-    function updateCountryCallingCode() {
-        $(countryCallingCodeSelector).val($(countriesSelector + ' option:selected').val());
-    }
-
-    function updateProviderDescription() {
-        $(providerDescriptionsSelector).hide();
-        $('#' + $(providersSelector + ' option:selected').val() + providerDescriptionsSelector).show();
-    }
-
-    function updateDelegatedManagement() {
-        setDelegatedManagement(getDelegatedManagement());
-    }
-
-    function confirmDeleteApiAccount() {
-        piwikHelper.modalConfirm(confirmDeleteAccountSelector, {yes: deleteApiAccount});
-    }
-
-    function deleteApiAccount() {
-        var ajaxHandler = new ajaxHelper();
-        ajaxHandler.addParams({
-            module: 'API',
-            format: 'json',
-            method: 'MobileMessaging.deleteSMSAPICredential'
-        }, 'GET');
-        ajaxHandler.redirectOnSuccess();
-        ajaxHandler.setLoadingElement(ajaxLoadingSelector);
-        ajaxHandler.setErrorElement(ajaxErrorsSelector);
-        ajaxHandler.send(true);
-    }
-
-    function updateApiAccount() {
-
-        var provider = $(providersSelector + ' option:selected').val();
-        var apiKey = $(apiKeySelector).val();
-
-        if (apiKey != '') {
-            var ajaxHandler = new ajaxHelper();
-            ajaxHandler.addParams({
-                module: 'API',
-                format: 'json',
-                method: 'MobileMessaging.setSMSAPICredential'
-            }, 'GET');
-            ajaxHandler.addParams({provider: provider, apiKey: apiKey}, 'POST');
-            ajaxHandler.redirectOnSuccess();
-            ajaxHandler.setLoadingElement(ajaxLoadingSelector);
-            ajaxHandler.setErrorElement(ajaxErrorsSelector);
-            ajaxHandler.send(true);
-        }
-    }
-
-    function setDelegatedManagement(delegatedManagement) {
-        var ajaxHandler = new ajaxHelper();
-        ajaxHandler.addParams({
-            module: 'API',
-            format: 'json',
-            method: 'MobileMessaging.setDelegatedManagement'
-        }, 'GET');
-        ajaxHandler.addParams({delegatedManagement: delegatedManagement}, 'POST');
-        ajaxHandler.redirectOnSuccess();
-        ajaxHandler.setLoadingElement(ajaxLoadingSelector);
-        ajaxHandler.setErrorElement(ajaxErrorsSelector);
-        ajaxHandler.send(true);
-    }
-
-    function getDelegatedManagement() {
-        return $(delegatedManagementSelector + ':checked').val();
-    }
-
-    /************************************************************
-     * Public data and methods
-     ************************************************************/
-
-    return {
-
-        /**
-         * Initialize UI events
-         */
-        initUIEvents: function () {
-            initUIEvents();
-        }
-    };
-
-}());
-
-$(document).ready(function () {
-    MobileMessagingSettings.initUIEvents();
-});
diff --git a/plugins/MobileMessaging/lang/en.json b/plugins/MobileMessaging/lang/en.json
index 3bc39147ef..8414a84ef6 100644
--- a/plugins/MobileMessaging/lang/en.json
+++ b/plugins/MobileMessaging/lang/en.json
@@ -9,10 +9,14 @@
         "PluginDescription": "Create and download custom SMS reports and have them sent to your mobile on a daily, weekly or monthly basis.",
         "Settings_APIKey": "API Key",
         "Settings_CountryCode": "Country Code",
+        "Settings_SelectCountry": "Select country",
         "Settings_CredentialNotProvided": "Before you can create and manage phone numbers, please connect Piwik to your SMS Account above.",
         "Settings_CredentialNotProvidedByAdmin": "Before you can create and manage phone numbers, please ask your administrator to connect Piwik to an SMS Account.",
         "Settings_CredentialProvided": "Your %s SMS API account is correctly configured!",
         "Settings_DeleteAccountConfirm": "Are you sure you want to delete this SMS account?",
+        "Settings_DelegatedSmsProviderOnlyAppliesToYou": "The configured SMS provider will be only used by you and not by any other users.",
+        "Settings_DelegatedPhoneNumbersOnlyUsedByYou": "The configured phone numbers can be only seen and used by you and not by any other users.",
+        "Settings_EnterActivationCode": "Enter activation code",
         "Settings_InvalidActivationCode": "Code entered was not valid, please try again.",
         "Settings_LetUsersManageAPICredential": "Allow users to manage their own SMS provider",
         "Settings_LetUsersManageAPICredential_No_Help": "All users are able to receive SMS Reports and will use your account's credits.",
@@ -21,7 +25,7 @@
         "Settings_PhoneActivated": "Phone number validated! You can now receive SMS with your stats.",
         "Settings_PhoneNumber": "Phone Number",
         "Settings_PhoneNumbers_Add": "Add a new Phone Number",
-        "Settings_PhoneNumbers_CountryCode_Help": "If you do not know the phone country code, look for your country here",
+        "Settings_PhoneNumbers_CountryCode_Help": "If you do not know the phone country code, look for your country here.",
         "Settings_PhoneNumbers_Help": "Before receiving SMS (text messages) reports on a phone, the phone number must be entered below.",
         "Settings_PhoneNumbers_HelpAdd": "When you click \"Add\", a SMS containing a code will be sent to the phone. The user receiving the code should then login to Piwik, click on Settings, then click on Mobile Messaging. After entering the code, the user will be able to receive text reports on his phone.",
         "Settings_PleaseSignUp": "To create SMS reports and receive short text messages with your websites' stats on your mobile phone, please sign up with the SMS API and enter your information below.",
diff --git a/plugins/MobileMessaging/stylesheets/MobileMessagingSettings.less b/plugins/MobileMessaging/stylesheets/MobileMessagingSettings.less
index 028c8fa804..a8788228e7 100644
--- a/plugins/MobileMessaging/stylesheets/MobileMessagingSettings.less
+++ b/plugins/MobileMessaging/stylesheets/MobileMessagingSettings.less
@@ -2,6 +2,14 @@
     list-style: circle;
     margin-left: 17px;
     line-height: 1.5em;
+
+    li {
+        list-style-type: disc;
+    }
+}
+
+#suspiciousPhoneNumber {
+    clear:left;
 }
 
 .providerDescription {
@@ -10,4 +18,35 @@
     margin-left: 24px;
     padding: 11px;
     width: 600px;
+    margin-top: 32px;
+}
+
+.manageMobileMessagingSettings {
+    .form-group.row .row {
+        margin: 0;
+    }
+}
+
+.addPhoneNumber {
+
+    .countryCode {
+        width:120px;
+        height:80px;
+        position: relative;
+
+        .countryCodeSymbol {
+            position: absolute;
+            top: 32px;
+            left: -4px;
+        }
+    }
+    .phoneNumber {
+        width:180px;
+        height:80px;
+    }
+    .addNumber {
+        width:90px;
+        height:80px;
+    }
+
 }
\ No newline at end of file
diff --git a/plugins/MobileMessaging/templates/index.twig b/plugins/MobileMessaging/templates/index.twig
index 5a405a462e..c0692c7795 100644
--- a/plugins/MobileMessaging/templates/index.twig
+++ b/plugins/MobileMessaging/templates/index.twig
@@ -5,61 +5,168 @@
 {% set title %}{{ 'MobileMessaging_SettingsMenu'|translate }}{% endset %}
 
 {% block content %}
-
+<div class="manageMobileMessagingSettings">
     {% if isSuperUser %}
-        <h2>{{ title }}</h2>
-
-        <div class="form-group">
-            <label>{{ 'MobileMessaging_Settings_LetUsersManageAPICredential'|translate }}</label>
-
-            <label class="radio">
-                <input type='radio' value='false' id="delegatedManagement" name='delegatedManagement'
-                        {% if not delegatedManagement %} checked='checked'{% endif %}/>
-                {{ 'General_No'|translate }}
-
-                <span class='form-description'>{{ 'General_Default'|translate }}.
-                    {{ 'MobileMessaging_Settings_LetUsersManageAPICredential_No_Help'|translate }}</span>
-            </label>
-
-            <label class="radio">
-                <input type='radio' value='true' id="delegatedManagement" name='delegatedManagement'
-                        {% if delegatedManagement %} checked='checked'{% endif %}/>
-                {{ 'General_Yes'|translate }}
-
-                <span class='form-description'>{{ 'MobileMessaging_Settings_LetUsersManageAPICredential_Yes_Help'|translate }}</span>
-            </label>
+    <div piwik-content-block content-title="{{ title|e('html_attr') }}">
+        <div ng-controller="DelegateMobileMessagingSettingsController as delegateManagement">
+            <div piwik-field uicontrol="radio" name="delegatedManagement"
+                 options="{{ delegateManagementOptions|json_encode }}"
+                 full-width="true"
+                 ng-model="delegateManagement.enabled"
+                 title="{{ 'MobileMessaging_Settings_LetUsersManageAPICredential'|translate|e('html_attr') }}"
+                 value="{% if delegatedManagement %}1{% else %}0{% endif %}">
+            </div>
+            <div piwik-save-button onconfirm="delegateManagement.save()" saving="delegateManagement.isLoading"></div>
         </div>
+    </div>
     {% endif %}
 
-    {% if accountManagedByCurrentUser and delegatedManagement %}
+    {% if accountManagedByCurrentUser %}
+        <div piwik-content-block content-title="{{ 'MobileMessaging_Settings_SMSProvider'|translate|e('html_attr') }}" feature="true">
 
-        <h2 piwik-enriched-headline
-                >{{ 'MobileMessaging_Settings_SMSProvider'|translate }}</h2>
-        To manage your SMS provider go to your <a href="{{ linkTo({'action':'userSettings'}) }}">personal mobile messaging settings</a>.
+            {% if isSuperUser and delegatedManagement %}
+                <p>{{ 'MobileMessaging_Settings_DelegatedSmsProviderOnlyAppliesToYou'|translate }}</p>
+            {% endif %}
 
-    {% elseif accountManagedByCurrentUser %}
-
-        <h2 piwik-enriched-headline
-                >{{ 'MobileMessaging_Settings_SMSProvider'|translate }}</h2>
-
-        {{ macro.manageSmsApi(credentialSupplied, creditLeft, smsProviders, provider) }}
+            {{ macro.manageSmsApi(credentialSupplied, creditLeft, smsProviderOptions, smsProviders, provider) }}
+        </div>
     {% endif %}
 
-    {% import 'ajaxMacros.twig' as ajax %}
-
-    <div style="margin-top:10px">
-        {{ ajax.errorDiv('ajaxErrorMobileMessagingSettings') }}
+    <div piwik-content-block content-title="{{ 'MobileMessaging_PhoneNumbers'|translate|e('html_attr') }}">
+        {% if not credentialSupplied %}
+            <p>
+                {% if accountManagedByCurrentUser %}
+                    {{ 'MobileMessaging_Settings_CredentialNotProvided'|translate }}
+                {% else %}
+                    {{ 'MobileMessaging_Settings_CredentialNotProvidedByAdmin'|translate }}
+                {% endif %}
+            </p>
+        {% else %}
+            <div ng-controller="ManageMobilePhoneNumbersController as managePhoneNumber">
+
+                <p>{{ 'MobileMessaging_Settings_PhoneNumbers_Help'|translate }}</p>
+
+                {% if isSuperUser %}
+                    <p>{{ 'MobileMessaging_Settings_DelegatedPhoneNumbersOnlyUsedByYou'|translate }}</p>
+                {% endif %}
+
+                <div class="row">
+                    <h3 class="col s12">{{ 'MobileMessaging_Settings_PhoneNumbers_Add'|translate }}</h3>
+                </div>
+
+                <div class="form-group row">
+                    <div class="col s12 m6">
+                        <div piwik-field uicontrol="select" name="countryCodeSelect"
+                             value="{{ defaultCallingCode }}"
+                             ng-model="managePhoneNumber.countryCallingCode"
+                             full-width="true"
+                             title="{{ 'MobileMessaging_Settings_SelectCountry'|translate|e('html_attr') }}"
+                             options='{{ countries|json_encode }}'>
+                        </div>
+                    </div>
+                    <div class="col s12 m6 form-help">
+                        {{ 'MobileMessaging_Settings_PhoneNumbers_CountryCode_Help'|translate }}
+                    </div>
+                </div>
+
+                <div class="form-group row addPhoneNumber">
+                    <div class="col s12 m6">
+
+                        <div class="countryCode left">
+                            <span class="countryCodeSymbol">+</span>
+                            <div piwik-field uicontrol="text" name="countryCallingCode"
+                                 full-width="true"
+                                 ng-model="managePhoneNumber.countryCallingCode"
+                                 maxlength="4"
+                                 title="{{ 'MobileMessaging_Settings_CountryCode'|translate }}">
+                            </div>
+                        </div>
+                        <div class="phoneNumber left">
+                            <div piwik-field uicontrol="text" name="newPhoneNumber"
+                                 ng-model="managePhoneNumber.newPhoneNumber"
+                                 ng-change="managePhoneNumber.validateNewPhoneNumberFormat()"
+                                 full-width="true"
+                                 maxlength="80"
+                                 title="{{ 'MobileMessaging_Settings_PhoneNumber'|translate }}">
+                            </div>
+                        </div>
+                        <div class="addNumber left valign-wrapper">
+                            <div piwik-save-button
+                                 disabled="!managePhoneNumber.canAddNumber || managePhoneNumber.isAddingPhonenumber"
+                                 onconfirm="managePhoneNumber.addPhoneNumber()"
+                                 class="valign" value='{{ 'General_Add'|translate }}'></div>
+                        </div>
+
+                        <div piwik-alert="warning"
+                             id="suspiciousPhoneNumber"
+                             ng-show="managePhoneNumber.showSuspiciousPhoneNumber">
+                        {{ 'MobileMessaging_Settings_SuspiciousPhoneNumber'|translate('54184032') }}
+                        </div>
+
+                    </div>
+                    <div class="col s12 m6 form-help">
+                        {{ strHelpAddPhone }}
+                    </div>
+                </div>
+
+                <div id="ajaxErrorAddPhoneNumber"></div>
+                <div piwik-activity-indicator loading="managePhoneNumber.isAddingPhonenumber"></div>
+
+                {% if phoneNumbers|length > 0 %}
+                    <div class="row"><h3 class="col s12">{{ 'MobileMessaging_Settings_ManagePhoneNumbers'|translate }}</h3></div>
+                {% endif %}
+
+                {% for phoneNumber, validated in phoneNumbers %}
+                    <div class="form-group row">
+                        <div class="col s12 m6">
+                            <span class='phoneNumber'>{{ phoneNumber }}</span>
+
+                            {% if not validated %}
+                                <input type="text"
+                                       ng-hide="managePhoneNumber.isActivated[{{ loop.index }}]"
+                                       ng-model="managePhoneNumber.validationCode[{{ loop.index }}]"
+                                       class='verificationCode'
+                                       placeholder="{{ 'MobileMessaging_Settings_EnterActivationCode'|translate|e('html_attr') }}"/>
+                                <div piwik-save-button
+                                     ng-hide="managePhoneNumber.isActivated[{{ loop.index }}]"
+                                     value='{{ 'MobileMessaging_Settings_ValidatePhoneNumber'|translate }}'
+                                     disabled="!managePhoneNumber.validationCode[{{ loop.index }}] || managePhoneNumber.isChangingPhoneNumber"
+                                     onconfirm='managePhoneNumber.validateActivationCode({{ phoneNumber|json_encode }}, {{ loop.index }})'
+                                     ></div>
+                            {% endif %}
+
+                            <div piwik-save-button
+                                 value='{{ 'General_Remove'|translate }}'
+                                 disabled="managePhoneNumber.isChangingPhoneNumber"
+                                 onconfirm="managePhoneNumber.removePhoneNumber({{ phoneNumber|json_encode }})"
+                                 ></div>
+                        </div>
+
+                        {% if not validated %}
+                            <div class="form-help col s12 m6">
+                                <div ng-hide="managePhoneNumber.isActivated[{{ loop.index }}]">
+                                    {{ 'MobileMessaging_Settings_VerificationCodeJustSent'|translate }}
+                                </div>
+                                &nbsp;
+                            </div>
+                        {% endif %}
+                    </div>
+                {% endfor %}
+
+                {{ ajax.errorDiv('invalidVerificationCodeAjaxError') }}
+
+                <div piwik-activity-indicator loading="managePhoneNumber.isChangingPhoneNumber"></div>
+
+            </div>
+
+        {% endif %}
     </div>
 
-    <h2>{{ 'MobileMessaging_PhoneNumbers'|translate }}</h2>
-    To manage your phone numbers go to your <a href="{{ linkTo({'action':'userSettings'}) }}">personal mobile messaging settings</a>.
-
-    {{ ajax.loadingDiv('ajaxLoadingMobileMessagingSettings') }}
 
     <div class='ui-confirm' id='confirmDeleteAccount'>
         <h2>{{ 'MobileMessaging_Settings_DeleteAccountConfirm'|translate }}</h2>
         <input role='yes' type='button' value='{{ 'General_Yes'|translate }}'/>
         <input role='no' type='button' value='{{ 'General_No'|translate }}'/>
     </div>
-
+</div>
 {% endblock %}
diff --git a/plugins/MobileMessaging/templates/macros.twig b/plugins/MobileMessaging/templates/macros.twig
index e0c1d499c6..9cb4c93e6d 100644
--- a/plugins/MobileMessaging/templates/macros.twig
+++ b/plugins/MobileMessaging/templates/macros.twig
@@ -1,33 +1,79 @@
-{% macro manageSmsApi(credentialSupplied, creditLeft, smsProviders, provider) %}
+{% macro manageSmsApi(credentialSupplied, creditLeft, smsProviderOptions, smsProviders, provider) %}
+<div ng-controller="ManageSmsProviderController as manageProvider">
+
+    <div piwik-activity-indicator loading="manageProvider.isDeletingAccount"></div>
+    <div id="ajaxErrorManageSmsProviderSettings"></div>
+
     {% if credentialSupplied %}
-        {{ 'MobileMessaging_Settings_CredentialProvided'|translate(provider) }}
-        {{ creditLeft }}
-        <br/>
-        {{ 'MobileMessaging_Settings_UpdateOrDeleteAccount'|translate("<a id='displayAccountForm'>","</a>","<a id='deleteAccount'>","</a>")|raw }}
+        <p>
+            {{ 'MobileMessaging_Settings_CredentialProvided'|translate(provider) }}
+            {{ creditLeft }}
+            <br/>
+            {{ 'MobileMessaging_Settings_UpdateOrDeleteAccount'|translate('<a ng-click="manageProvider.showUpdateAccount()" id="displayAccountForm">',"</a>",'<a ng-click="manageProvider.deleteAccount()" id="deleteAccount">',"</a>")|raw }}
+        </p>
     {% else %}
-        {{ 'MobileMessaging_Settings_PleaseSignUp'|translate }}
+        <p>{{ 'MobileMessaging_Settings_PleaseSignUp'|translate }}</p>
     {% endif %}
-    <div id='accountForm' {% if credentialSupplied %}style='display: none;'{% endif %}>
-        <br/>
-        {{ 'MobileMessaging_Settings_SMSProvider'|translate }}
-        <select id='smsProviders'>
-            {% for smsProvider, description in smsProviders %}
-                <option value='{{ smsProvider }}'>
-                    {{ smsProvider }}
-                </option>
-            {% endfor %}
-        </select>
-
-        {{ 'MobileMessaging_Settings_APIKey'|translate }}
-        <input size='25' id='apiKey'/>
-
-        <input type='submit' value='{{ 'General_Save'|translate }}' id='apiAccountSubmit' class='submit'/>
+
+    <div piwik-form id='accountForm' {% if credentialSupplied %}ng-show="manageProvider.showAccountForm"{% endif %}>
+
+        <div piwik-field uicontrol="select" name="smsProviders"
+             options="{{ smsProviderOptions|json_encode }}"
+             ng-model="manageProvider.smsProvider"
+             ng-change="manageProvider.isUpdateAccountPossible()"
+             title="{{ 'MobileMessaging_Settings_SMSProvider'|translate|e('html_attr') }}"
+             value="{{ provider }}">
+        </div>
+
+        <div piwik-field uicontrol="text" name="apiKey"
+             ng-model="manageProvider.apiKey"
+             required="true"
+             ng-change="manageProvider.isUpdateAccountPossible()"
+             title="{{ 'MobileMessaging_Settings_APIKey'|translate|e('html_attr') }}"
+             value="">
+        </div>
+
+        <div piwik-save-button id='apiAccountSubmit'
+             disabled="!manageProvider.canBeUpdated"
+             saving="manageProvider.isUpdatingAccount"
+             onconfirm="manageProvider.updateAccount()"></div>
 
         {% for smsProvider, description in smsProviders %}
-            <div class='providerDescription' id='{{ smsProvider }}'>
+            <div class='providerDescription'
+                 ng-show="manageProvider.smsProvider == '{{ smsProvider|e('js') }}'"
+                 id='{{ smsProvider }}'>
                 {{ description|raw }}
             </div>
         {% endfor %}
 
     </div>
+</div>
+{% endmacro %}
+
+{% macro selectPhoneNumbers(phoneNumbers, angularContext, value, withIntroduction) %}
+    <div id="mobilePhoneNumbersHelp" class="inline-help-node">
+        <span class="icon-info"></span>
+
+        {% if phoneNumbers|length == 0 %}
+            {{ 'MobileMessaging_MobileReport_NoPhoneNumbers'|translate }}
+        {% else %}
+            {{ 'MobileMessaging_MobileReport_AdditionalPhoneNumbers'|translate|e('html_attr') }}
+        {% endif %}
+        <a href="{{ linkTo({'module':"MobileMessaging", 'action': 'index', 'updated':null}) }}">{{ 'MobileMessaging_MobileReport_MobileMessagingSettingsLink'|translate }}</a>
+    </div>
+
+    <div class='mobile'
+         piwik-field uicontrol="checkbox"
+         var-type="array"
+         name="phoneNumbers"
+         ng-model="{{ angularContext }}.report.phoneNumbers"
+         {% if withIntroduction %}
+             introduction="{{ 'ScheduledReports_SendReportTo'|translate|e('html_attr') }}"
+         {% endif %}
+         title="{{ 'MobileMessaging_PhoneNumbers'|translate|e('html_attr') }}"
+         {% if phoneNumbers|length == 0 %}disabled="true"{% endif %}
+         options="{{ phoneNumbers|json_encode }}"
+         inline-help="#mobilePhoneNumbersHelp"
+         {% if value %}value="{{ value|json_encode }}"{% endif %}>
+    </div>
 {% endmacro %}
\ No newline at end of file
diff --git a/plugins/MobileMessaging/templates/reportParametersScheduledReports.twig b/plugins/MobileMessaging/templates/reportParametersScheduledReports.twig
index cddee36095..5ca96fa9fb 100644
--- a/plugins/MobileMessaging/templates/reportParametersScheduledReports.twig
+++ b/plugins/MobileMessaging/templates/reportParametersScheduledReports.twig
@@ -1,62 +1,30 @@
-
-<tr class='{{ reportType }}'>
-    <td class="first">
-    {{ 'MobileMessaging_PhoneNumbers'|translate }}
-    </td>
-    <td>
-    <div class="entityInlineHelp">
-    {% if phoneNumbers|length == 0 %}
-        <div><span class="icon-info"></span> {{ 'MobileMessaging_MobileReport_NoPhoneNumbers'|translate }}
-    {% else %}
-        <ul class="clearfix">
-        {% for phoneNumber in phoneNumbers %}
-            <li class="clear"><label><input name='phoneNumbers' type='checkbox' id='{{ phoneNumber }}'/>{{ phoneNumber }}</label></li>
-        {% endfor %}
-        </ul>
-        <div><span class="icon-info"></span> {{ 'MobileMessaging_MobileReport_AdditionalPhoneNumbers'|translate }}
-    {% endif %}
-        <a href="{{ linkTo({'module':"MobileMessaging", 'action': 'index', 'updated':null}) }}">{{ 'MobileMessaging_MobileReport_MobileMessagingSettingsLink'|translate }}</a></div>
-    </div>
-    <script>
-    $(function () {
-        resetReportParametersFunctions ['{{ reportType }}'] = function () {
-            var reportParameters = {
-            'phoneNumbers': []
-            };
-            updateReportParametersFunctions['{{ reportType }}'](reportParameters);
-        };
-
-        updateReportParametersFunctions['{{ reportType }}'] = function (reportParameters) {
-
-            if (reportParameters == null) return;
-
-            $('[name=phoneNumbers]').removeProp('checked');
-            $(reportParameters.phoneNumbers).each(function (index, phoneNumber) {
-            $('#\\' + phoneNumber).prop('checked', 'checked');
-            });
-
-            $(document).trigger('ScheduledReport.edit', {});
-
-        };
-
-        getReportParametersFunctions['{{ reportType }}'] = function () {
-            var parameters = Object();
-            var selectedPhoneNumbers = $.map(
-                $('[name=phoneNumbers]').filter(function() {
-                    return !this.disabled && this.checked;
-                }),
-                function (phoneNumber) {
-                    return $(phoneNumber).attr('id');
-                }
-            );
-
-            // returning [''] when no phone numbers are selected avoids the "please provide a value for 'parameters'" error message
-            parameters.phoneNumbers = selectedPhoneNumbers.length > 0 ? selectedPhoneNumbers : [''];
-
-            return parameters;
-        };
-    });
-    </script>
-
-    </td>
-</tr>
+{% import '@MobileMessaging/macros.twig' as macro %}
+
+<div ng-show="manageScheduledReport.report.type == 'mobile'">
+    {{ macro.selectPhoneNumbers(phoneNumbers, 'manageScheduledReport', '', true) }}
+</div>
+
+<script>
+$(function () {
+    resetReportParametersFunctions['mobile'] = function (report) {
+        report.phoneNumbers = [];
+        report.formatmobile = 'sms';
+    };
+
+    updateReportParametersFunctions['mobile'] = function (report) {
+        if (report.parameters && report.parameters.phoneNumbers) {
+            report.phoneNumbers = report.parameters.phoneNumbers;
+        }
+        report.formatmobile = 'sms';
+    };
+
+    getReportParametersFunctions['mobile'] = function (report) {
+        var parameters = {};
+
+        // returning [''] when no phone numbers are selected avoids the "please provide a value for 'parameters'" error message
+        parameters.phoneNumbers = report.phoneNumbers && report.phoneNumbers.length > 0 ? report.phoneNumbers : [''];
+
+        return parameters;
+    };
+});
+</script>
\ No newline at end of file
diff --git a/plugins/MobileMessaging/templates/userSettings.twig b/plugins/MobileMessaging/templates/userSettings.twig
deleted file mode 100644
index 0bb2200979..0000000000
--- a/plugins/MobileMessaging/templates/userSettings.twig
+++ /dev/null
@@ -1,129 +0,0 @@
-{% extends 'admin.twig' %}
-
-{% set title %}{{ 'MobileMessaging_Settings_SMSProvider'|translate }}{% endset %}
-
-{% block content %}
-
-    {% import 'ajaxMacros.twig' as ajax %}
-
-    <div style="margin-top:10px">
-        {{ ajax.errorDiv('ajaxErrorMobileMessagingSettings') }}
-    </div>
-
-    {% import '@MobileMessaging/macros.twig' as macro %}
-
-    {% if accountManagedByCurrentUser and delegatedManagement %}
-        <h2 piwik-enriched-headline>{{ title }}</h2>
-
-        {{ macro.manageSmsApi(credentialSupplied, creditLeft, smsProviders, provider) }}
-    {% endif %}
-
-    <h2>{{ 'MobileMessaging_PhoneNumbers'|translate }}</h2>
-    {% if not credentialSupplied %}
-        {% if accountManagedByCurrentUser and delegatedManagement %}
-            {{ 'MobileMessaging_Settings_CredentialNotProvided'|translate }}
-        {% elseif accountManagedByCurrentUser %}
-            Before you can create and manage phone numbers, please setup an SMS provider in <a href="{{ linkTo({'action': 'index'}) }}">admin mobile messaging settings</a>.
-        {% else %}
-            {{ 'MobileMessaging_Settings_CredentialNotProvidedByAdmin'|translate }}
-        {% endif %}
-    {% else %}
-        {{ 'MobileMessaging_Settings_PhoneNumbers_Help'|translate }}
-        <span class="form-group">
-            <div class="form-help">
-                {{ strHelpAddPhone }}
-            </div>
-            <span>
-                <p><strong>{{ 'MobileMessaging_Settings_PhoneNumbers_Add'|translate }}</strong></p>
-            </span>
-            <span id="suspiciousPhoneNumber" style="display:none;">
-                {{ 'MobileMessaging_Settings_SuspiciousPhoneNumber'|translate('54184032') }}
-                <br/><br/>
-            </span>
-
-        </span>
-
-        + <input id="countryCallingCode" size="4" maxlength="4"/>&nbsp;
-        <input id="newPhoneNumber"/>
-        <input type="submit" value='{{ 'General_Add'|translate }}'
-               id="addPhoneNumberSubmit"/>
-        <br/>
-
-		<span style=' font-size: 11px;'><span
-                    class="form-description">{{ 'MobileMessaging_Settings_CountryCode'|translate }}</span>
-			<span class="form-description"
-                  style="margin-left:50px;">{{ 'MobileMessaging_Settings_PhoneNumber'|translate }}</span></span>
-
-        <br/><br/>
-
-        {{ 'MobileMessaging_Settings_PhoneNumbers_CountryCode_Help'|translate }}
-
-        <select id="countries">
-            {# this is a trick to avoid selecting the first country when no default could be found #}
-            <option value="">&nbsp;</option>
-            {% for countryCode, country in countries %}
-                <option value='{{ country.countryCallingCode }}'
-                        {% if defaultCountry==countryCode %} selected="selected" {% endif %}
-                        >
-                    {{ country.countryName }}
-                </option>
-            {% endfor %}
-        </select>
-
-
-        {% if phoneNumbers|length > 0 %}
-            <br/>
-            <br/>
-            <strong>{{ 'MobileMessaging_Settings_ManagePhoneNumbers'|translate }}</strong>
-            <br/>
-            <br/>
-        {% endif %}
-
-        {{ ajax.errorDiv('invalidVerificationCodeAjaxError') }}
-
-        <div id='phoneNumberActivated' style="display:none;">
-            {{ 'MobileMessaging_Settings_PhoneActivated'|translate }}
-        </div>
-
-        <div id='invalidActivationCode' style="display:none;">
-            {{ 'MobileMessaging_Settings_InvalidActivationCode'|translate }}
-        </div>
-
-        <ul>
-            {% for phoneNumber, validated in phoneNumbers %}
-                <li>
-                    <span class='phoneNumber'>{{ phoneNumber }}</span>
-                    {% if not validated %}
-                        <input class='verificationCode'/>
-                        <input
-                                type='submit'
-                                value='{{ 'MobileMessaging_Settings_ValidatePhoneNumber'|translate }}'
-                                class='validatePhoneNumberSubmit'
-                                />
-                    {% endif %}
-                    <input
-                            type='submit'
-                            value='{{ 'General_Remove'|translate }}'
-                            class='removePhoneNumberSubmit'
-                            />
-                    {% if not validated %}
-                        <br/>
-                        <span class='form-description'>{{ 'MobileMessaging_Settings_VerificationCodeJustSent'|translate }}</span>
-                    {% endif %}
-                    <br/>
-                    <br/>
-                </li>
-            {% endfor %}
-        </ul>
-
-    {% endif %}
-
-    {{ ajax.loadingDiv('ajaxLoadingMobileMessagingSettings') }}
-
-    <div class='ui-confirm' id='confirmDeleteAccount'>
-        <h2>{{ 'MobileMessaging_Settings_DeleteAccountConfirm'|translate }}</h2>
-        <input role='yes' type='button' value='{{ 'General_Yes'|translate }}'/>
-        <input role='no' type='button' value='{{ 'General_No'|translate }}'/>
-    </div>
-
-{% endblock %}
diff --git a/plugins/MobileMessaging/tests/Integration/MobileMessagingTest.php b/plugins/MobileMessaging/tests/Integration/MobileMessagingTest.php
index 9b03f74fa3..64a5f80435 100644
--- a/plugins/MobileMessaging/tests/Integration/MobileMessagingTest.php
+++ b/plugins/MobileMessaging/tests/Integration/MobileMessagingTest.php
@@ -241,7 +241,10 @@ class MobileMessagingTest extends IntegrationTestCase
             'parameters' => array(MobileMessaging::PHONE_NUMBERS_PARAMETER => array($phoneNumber)),
         );
 
-        $stubbedAPIMobileMessaging = $this->getMock('\\Piwik\\Plugins\\MobileMessaging\\API', array('sendSMS', 'getInstance'), $arguments = array(), $mockClassName = '', $callOriginalConstructor = false);
+        $stubbedAPIMobileMessaging = $this->getMockBuilder('\\Piwik\\Plugins\\MobileMessaging\\API')
+                                          ->setMethods(array('sendSMS', 'getInstance'))
+                                          ->disableOriginalConstructor()
+                                          ->getMock();
         $stubbedAPIMobileMessaging->expects($this->once())->method('sendSMS')->with(
             $this->equalTo($expectedReportContent, 0),
             $this->equalTo($expectedPhoneNumber, 1),