Implements new SMS Provider ASPSMS.com (#11263)

* makes it possible to define the required credential fields in sms provider

* show error message if configured sms provider doesn't work, instead of throwing uncatched exception

* Adds new SMS provider ASPSMS.com

* Development SMS notifications didn't work when clicking 'send now'

Caused by the session already closed before, as it's done using a ajax request
calling a Session:start() reopens the session. Might be a bit hackish, but should be fine for development

* adds UI test for switching sms provider

* Makes API-Key default credential field to prevent breaking third party plugins

* fixes issue where save button was disabled falsely

17 files changed, 344 insertions, 43 deletions

diff --git a/plugins/MobileMessaging/API.php b/plugins/MobileMessaging/API.php
index 9e24700d8a..2447a907dd 100644
--- a/plugins/MobileMessaging/API.php
+++ b/plugins/MobileMessaging/API.php
@@ -41,11 +41,21 @@ class API extends \Piwik\Plugin\API
     private function getSMSAPICredential()
     {
         $settings = $this->getCredentialManagerSettings();
+
+        $credentials = isset($settings[MobileMessaging::API_KEY_OPTION]) ? $settings[MobileMessaging::API_KEY_OPTION] : null;
+
+        // fallback for older values, where api key has been stored as string value
+        if (!empty($credentials) && !is_array($credentials)) {
+            $credentials = array(
+                'apiKey' => $credentials
+            );
+        }
+
         return array(
             MobileMessaging::PROVIDER_OPTION =>
                 isset($settings[MobileMessaging::PROVIDER_OPTION]) ? $settings[MobileMessaging::PROVIDER_OPTION] : null,
             MobileMessaging::API_KEY_OPTION  =>
-                isset($settings[MobileMessaging::API_KEY_OPTION]) ? $settings[MobileMessaging::API_KEY_OPTION] : null,
+                $credentials,
         );
     }
 
@@ -65,21 +75,21 @@ class API extends \Piwik\Plugin\API
      * set the SMS API credential
      *
      * @param string $provider SMS API provider
-     * @param string $apiKey API Key
+     * @param array $credentials array with data like API Key or username
      *
      * @return bool true if SMS API credential were validated and saved, false otherwise
      */
-    public function setSMSAPICredential($provider, $apiKey)
+    public function setSMSAPICredential($provider, $credentials = array())
     {
         $this->checkCredentialManagementRights();
 
         $smsProviderInstance = SMSProvider::factory($provider);
-        $smsProviderInstance->verifyCredential($apiKey);
+        $smsProviderInstance->verifyCredential($credentials);
 
         $settings = $this->getCredentialManagerSettings();
 
         $settings[MobileMessaging::PROVIDER_OPTION] = $provider;
-        $settings[MobileMessaging::API_KEY_OPTION] = $apiKey;
+        $settings[MobileMessaging::API_KEY_OPTION] = $credentials;
 
         $this->setCredentialManagerSettings($settings);
 
diff --git a/plugins/MobileMessaging/Controller.php b/plugins/MobileMessaging/Controller.php
index 97422efe5c..cba1210c38 100644
--- a/plugins/MobileMessaging/Controller.php
+++ b/plugins/MobileMessaging/Controller.php
@@ -70,11 +70,16 @@ class Controller extends ControllerAdmin
             $this->translator->translate('General_Settings'),
             $this->translator->translate('MobileMessaging_SettingsMenu')
         ));
+        $view->credentialError = null;
         $view->creditLeft = 0;
         $currentProvider = '';
         if ($view->credentialSupplied && $view->accountManagedByCurrentUser) {
             $currentProvider = $mobileMessagingAPI->getSMSProvider();
-            $view->creditLeft = $mobileMessagingAPI->getCreditLeft();
+            try {
+                $view->creditLeft = $mobileMessagingAPI->getCreditLeft();
+            } catch (\Exception $e) {
+                $view->credentialError = $e->getMessage();
+            }
         }
 
         $view->delegateManagementOptions = array(
@@ -130,4 +135,24 @@ class Controller extends ControllerAdmin
 
         $this->setBasicVariablesView($view);
     }
+
+    public function getCredentialFields()
+    {
+        $provider = Common::getRequestVar('provider', '');
+
+        $credentialFields = array();
+
+        foreach (SMSProvider::findAvailableSmsProviders() as $availableSmsProvider) {
+            if ($availableSmsProvider->getId() == $provider) {
+                $credentialFields = $availableSmsProvider->getCredentialFields();
+                break;
+            }
+        }
+
+        $view = new View('@MobileMessaging/credentials');
+
+        $view->credentialfields = $credentialFields;
+
+        return $view->render();
+    }
 }
diff --git a/plugins/MobileMessaging/MobileMessaging.php b/plugins/MobileMessaging/MobileMessaging.php
index 9ea465dd05..04d5eef215 100644
--- a/plugins/MobileMessaging/MobileMessaging.php
+++ b/plugins/MobileMessaging/MobileMessaging.php
@@ -87,9 +87,10 @@ class MobileMessaging extends \Piwik\Plugin
      */
     public function getJsFiles(&$jsFiles)
     {
-        $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";
+        $jsFiles[] = "plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings.controller.js";
+        $jsFiles[] = "plugins/MobileMessaging/angularjs/manage-sms-provider.controller.js";
+        $jsFiles[] = "plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers.controller.js";
+        $jsFiles[] = "plugins/MobileMessaging/angularjs/sms-provider-credentials.directive.js";
     }
 
     public function getStylesheetFiles(&$stylesheets)
diff --git a/plugins/MobileMessaging/SMSProvider.php b/plugins/MobileMessaging/SMSProvider.php
index 14aec1bb24..8d6818f6e5 100644
--- a/plugins/MobileMessaging/SMSProvider.php
+++ b/plugins/MobileMessaging/SMSProvider.php
@@ -43,30 +43,55 @@ abstract class SMSProvider
     /**
      * Verify the SMS API credential.
      *
-     * @param string $apiKey API Key
-     * @return bool true if SMS API Key is valid, false otherwise
+     * @param array $credentials contains credentials (eg. like API key, user name, ...)
+     * @return bool true if credentials are valid, false otherwise
      */
-    abstract public function verifyCredential($apiKey);
+    abstract public function verifyCredential($credentials);
 
     /**
      * Get the amount of remaining credits.
      *
-     * @param string $apiKey API Key
+     * @param array $credentials contains credentials (eg. like API key, user name, ...)
      * @return string remaining credits
      */
-    abstract public function getCreditLeft($apiKey);
+    abstract public function getCreditLeft($credentials);
 
     /**
      * Actually send the given text message. This method should only send the text message, it should not trigger
      * any notifications etc.
      *
-     * @param string $apiKey
+     * @param array $credentials contains credentials (eg. like API key, user name, ...)
      * @param string $smsText
      * @param string $phoneNumber
      * @param string $from
      * @return bool true
      */
-    abstract public function sendSMS($apiKey, $smsText, $phoneNumber, $from);
+    abstract public function sendSMS($credentials, $smsText, $phoneNumber, $from);
+
+    /**
+     * Defines the fields that needs to be filled up to provide credentials
+     *
+     * Example:
+     * array (
+     *   array(
+     *     'type' => 'text',
+     *     'name' => 'apiKey',
+     *     'title' => 'Translation_Key_To_Use'
+     *   )
+     * )
+     *
+     * @return array
+     */
+    public function getCredentialFields()
+    {
+        return array(
+            array(
+                'type' => 'text',
+                'name' => 'apiKey',
+                'title' => 'MobileMessaging_Settings_APIKey'
+            )
+        );
+    }
 
     /**
      * Defines whether the SMS Provider is available. If a certain provider should be used only be a limited
diff --git a/plugins/MobileMessaging/SMSProvider/ASPSMS.php b/plugins/MobileMessaging/SMSProvider/ASPSMS.php
new file mode 100644
index 0000000000..da65057560
--- /dev/null
+++ b/plugins/MobileMessaging/SMSProvider/ASPSMS.php
@@ -0,0 +1,156 @@
+<?php
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ *
+ */
+
+namespace Piwik\Plugins\MobileMessaging\SMSProvider;
+
+use Exception;
+use Piwik\Http;
+use Piwik\Piwik;
+use Piwik\Plugins\MobileMessaging\APIException;
+use Piwik\Plugins\MobileMessaging\SMSProvider;
+
+require_once PIWIK_INCLUDE_PATH . "/plugins/MobileMessaging/APIException.php";
+
+/**
+ * @ignore
+ */
+class ASPSMS extends SMSProvider
+{
+    const SOCKET_TIMEOUT = 15;
+
+    const BASE_API_URL          = 'https://json.aspsms.com/';
+    const CHECK_CREDIT_RESOURCE = 'CheckCredits';
+    const SEND_SMS_RESOURCE     = 'SendTextSMS';
+
+    const MAXIMUM_FROM_LENGTH      = 11;
+    const MAXIMUM_CONCATENATED_SMS = 9;
+
+    public function getId()
+    {
+        return 'ASPSMS';
+    }
+
+    public function getDescription()
+    {
+        return 'You can use <a target="_blank" href="?module=Proxy&action=redirect&url=http://www.aspsms.com/en/?REF=227830"><img src="plugins/MobileMessaging/images/ASPSMS.png"/></a> to send SMS Reports from Piwik.<br/>
+			<ul>
+			<li> First, <a target="_blank" href="?module=Proxy&action=redirect&url=http://www.aspsms.com/en/registration/?REF=227830">get an Account at ASP SMS</a> (Signup is free!)
+			</li><li> Enter your ASPSMS credentials on this page. </li>
+			</ul>
+			<br/>About ASPSMS.com: <ul>
+			<li>ASPSMS provides fast and reliable high quality worldwide SMS delivery, over 600 networks in every corner of the globe.
+			</li><li>Cost per SMS message depends on the target country and starts from ~0.09USD (0.06EUR).
+			</li><li>Most countries and networks are supported but we suggest you check the latest position on their supported networks list <a target="_blank" href="?module=Proxy&action=redirect&url=http://www.aspsms.com/en/networks/?REF=227830">here</a>.
+			</li><li>For sending an SMS, you need so-called ASPSMS credits, which are purchased in advance. The ASPSMS credits do not expire. 
+			</li><li><a href="?module=Proxy&action=redirect&url=https://www.aspsms.com/instruction/payment.asp?REF=227830">Payment</a> by bank transfer, various credit cards such as Eurocard/Mastercard, Visa, American Express or Diners Club, PayPal or Swiss Postcard.
+			</li>
+			</ul>
+			';
+    }
+
+    public function getCredentialFields()
+    {
+        return array(
+            array(
+                'type'  => 'text',
+                'name'  => 'username',
+                'title' => 'General_Username'
+            ),
+            array(
+                'type'  => 'text',
+                'name'  => 'password',
+                'title' => 'General_Password'
+            ),
+        );
+    }
+
+    public function verifyCredential($credentials)
+    {
+        $this->getCreditLeft($credentials);
+
+        return true;
+    }
+
+    public function sendSMS($credentials, $smsText, $phoneNumber, $from)
+    {
+        $from = substr($from, 0, self::MAXIMUM_FROM_LENGTH);
+
+        $smsText = self::truncate($smsText, self::MAXIMUM_CONCATENATED_SMS);
+
+        $additionalParameters = array(
+            'Recipients'  => array($phoneNumber),
+            'MessageText' => $smsText,
+            'Originator'  => $from,
+            'AffiliateID' => '227830',
+        );
+
+        $this->issueApiCall(
+            $credentials,
+            self::SEND_SMS_RESOURCE,
+            $additionalParameters
+        );
+    }
+
+    private function issueApiCall($credentials, $resource, $additionalParameters = array())
+    {
+        $accountParameters = array(
+            'UserName' => $credentials['username'],
+            'Password' => $credentials['password'],
+        );
+
+        $parameters = array_merge($accountParameters, $additionalParameters);
+
+        $url = self::BASE_API_URL
+            . $resource;
+
+        $timeout = self::SOCKET_TIMEOUT;
+
+        try {
+            $result = Http::sendHttpRequestBy(
+                Http::getTransportMethod(),
+                $url,
+                $timeout,
+                $userAgent = null,
+                $destinationPath = null,
+                $file = null,
+                $followDepth = 0,
+                $acceptLanguage = false,
+                $acceptInvalidSslCertificate = true,
+                $byteRange = false,
+                $getExtendedInfo = false,
+                $httpMethod = 'POST',
+                $httpUserName = null,
+                $httpPassword = null,
+                $requestBody = json_encode($parameters)
+            );
+        } catch (Exception $e) {
+            throw new APIException($e->getMessage());
+        }
+
+        $result = @json_decode($result, true);
+
+        if (!$result || $result['StatusCode'] != 1) {
+            throw new APIException(
+                'ASPSMS API returned the following error message : ' . $result['StatusInfo']
+            );
+        }
+
+        return $result;
+    }
+
+    public function getCreditLeft($credentials)
+    {
+        $credits = $this->issueApiCall(
+            $credentials,
+            self::CHECK_CREDIT_RESOURCE
+        );
+
+        return Piwik::translate('MobileMessaging_Available_Credits', array($credits['Credits']));
+    }
+}
diff --git a/plugins/MobileMessaging/SMSProvider/Clockwork.php b/plugins/MobileMessaging/SMSProvider/Clockwork.php
index 572215d68c..798b4039a1 100644
--- a/plugins/MobileMessaging/SMSProvider/Clockwork.php
+++ b/plugins/MobileMessaging/SMSProvider/Clockwork.php
@@ -53,14 +53,14 @@ class Clockwork extends SMSProvider
 			';
     }
 
-    public function verifyCredential($apiKey)
+    public function verifyCredential($credentials)
     {
-        $this->getCreditLeft($apiKey);
+        $this->getCreditLeft($credentials);
 
         return true;
     }
 
-    public function sendSMS($apiKey, $smsText, $phoneNumber, $from)
+    public function sendSMS($credentials, $smsText, $phoneNumber, $from)
     {
         $from = substr($from, 0, self::MAXIMUM_FROM_LENGTH);
 
@@ -75,7 +75,7 @@ class Clockwork extends SMSProvider
         );
 
         $this->issueApiCall(
-            $apiKey,
+            $credentials['apiKey'],
             self::SEND_SMS_RESOURCE,
             $additionalParameters
         );
@@ -120,10 +120,10 @@ class Clockwork extends SMSProvider
         return $result;
     }
 
-    public function getCreditLeft($apiKey)
+    public function getCreditLeft($credentials)
     {
         return $this->issueApiCall(
-            $apiKey,
+            $credentials['apiKey'],
             self::CHECK_CREDIT_RESOURCE
         );
     }
diff --git a/plugins/MobileMessaging/SMSProvider/Development.php b/plugins/MobileMessaging/SMSProvider/Development.php
index 18cc57809a..b4a79e2dc1 100644
--- a/plugins/MobileMessaging/SMSProvider/Development.php
+++ b/plugins/MobileMessaging/SMSProvider/Development.php
@@ -11,6 +11,7 @@ namespace Piwik\Plugins\MobileMessaging\SMSProvider;
 use Piwik\Notification;
 use Piwik\Plugins\MobileMessaging\SMSProvider;
 use Piwik\Development as PiwikDevelopment;
+use Piwik\Session;
 
 /**
  * Used for development only
@@ -35,13 +36,19 @@ class Development extends SMSProvider
         return PiwikDevelopment::isEnabled();
     }
 
-    public function verifyCredential($apiKey)
+    public function verifyCredential($credentials)
     {
         return true;
     }
 
-    public function sendSMS($apiKey, $smsText, $phoneNumber, $from)
+    public function getCredentialFields()
     {
+        return array();
+    }
+
+    public function sendSMS($credentials, $smsText, $phoneNumber, $from)
+    {
+        Session::start(); // ensure session is writable to add a notification
         $message = sprintf('An SMS was sent:<br />From: %s<br />To: %s<br />Message: %s', $from, $phoneNumber, $smsText);
 
         $notification = new Notification($message);
@@ -50,7 +57,7 @@ class Development extends SMSProvider
         Notification\Manager::notify('StubbedSMSProvider'.preg_replace('/[^a-z0-9]/', '', $phoneNumber), $notification);
     }
 
-    public function getCreditLeft($apiKey)
+    public function getCreditLeft($credentials)
     {
         return 'Balance: 42';
     }
diff --git a/plugins/MobileMessaging/SMSProvider/StubbedProvider.php b/plugins/MobileMessaging/SMSProvider/StubbedProvider.php
index 8bda726a3e..4f1d1e2d14 100644
--- a/plugins/MobileMessaging/SMSProvider/StubbedProvider.php
+++ b/plugins/MobileMessaging/SMSProvider/StubbedProvider.php
@@ -33,17 +33,17 @@ class StubbedProvider extends SMSProvider
         return defined('PIWIK_TEST_MODE') && PIWIK_TEST_MODE;
     }
 
-    public function verifyCredential($apiKey)
+    public function verifyCredential($credentials)
     {
         return true;
     }
 
-    public function sendSMS($apiKey, $smsText, $phoneNumber, $from)
+    public function sendSMS($credentials, $smsText, $phoneNumber, $from)
     {
         // nothing to do
     }
 
-    public function getCreditLeft($apiKey)
+    public function getCreditLeft($credentials)
     {
         return 1;
     }
diff --git a/plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings/delegate-mobile-messaging-settings.controller.js b/plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings.controller.js
index d7f6a9bfab..d7f6a9bfab 100644
--- a/plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings/delegate-mobile-messaging-settings.controller.js
+++ b/plugins/MobileMessaging/angularjs/delegate-mobile-messaging-settings.controller.js
diff --git a/plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers/manage-mobile-phone-numbers.controller.js b/plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers.controller.js
index 06a9d255f7..06a9d255f7 100644
--- a/plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers/manage-mobile-phone-numbers.controller.js
+++ b/plugins/MobileMessaging/angularjs/manage-mobile-phone-numbers.controller.js
diff --git a/plugins/MobileMessaging/angularjs/manage-sms-provider/manage-sms-provider.controller.js b/plugins/MobileMessaging/angularjs/manage-sms-provider.controller.js
index 482445f1b2..fe0f36e20b 100644
--- a/plugins/MobileMessaging/angularjs/manage-sms-provider/manage-sms-provider.controller.js
+++ b/plugins/MobileMessaging/angularjs/manage-sms-provider.controller.js
@@ -16,6 +16,7 @@
         this.isUpdatingAccount = false;
         this.showAccountForm = false;
         this.isUpdateAccountPossible = false;
+        this.credentials = '{}';
 
         function deleteApiAccount() {
             self.isDeletingAccount = true;
@@ -36,9 +37,20 @@
         };
 
         this.isUpdateAccountPossible = function () {
-            this.canBeUpdated = (!!this.apiKey && this.apiKey != '' && !!this.smsProvider);
-            return this.canBeUpdated;
-        }
+
+            var self = this;
+            self.canBeUpdated = !!this.smsProvider;
+
+            var credentials = angular.fromJson(this.credentials);
+
+            angular.forEach(credentials, function(value, key) {
+                if (value == '') {
+                    self.canBeUpdated = false;
+                }
+            });
+
+            return self.canBeUpdated;
+        };
 
         this.updateAccount = function () {
             if (this.isUpdateAccountPossible()) {
@@ -46,7 +58,7 @@
 
                 piwikApi.post(
                     {method: 'MobileMessaging.setSMSAPICredential'},
-                    {provider: this.smsProvider, apiKey: this.apiKey},
+                    {provider: this.smsProvider, credentials: angular.fromJson(this.credentials)},
                     {placeat: '#ajaxErrorManageSmsProviderSettings'}
                 ).then(function () {
                     self.isUpdatingAccount = false;
@@ -55,7 +67,7 @@
                     self.isUpdatingAccount = false;
                 });
             }
-        }
+        };
 
         this.deleteAccount = function () {
             piwikHelper.modalConfirm('#confirmDeleteAccount', {yes: deleteApiAccount});
diff --git a/plugins/MobileMessaging/angularjs/sms-provider-credentials.directive.js b/plugins/MobileMessaging/angularjs/sms-provider-credentials.directive.js
new file mode 100644
index 0000000000..2316faed0b
--- /dev/null
+++ b/plugins/MobileMessaging/angularjs/sms-provider-credentials.directive.js
@@ -0,0 +1,51 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Usage:
+ * <div sms-provider-credentials provider="providername">
+ */
+(function () {
+    angular.module('piwikApp').directive('smsProviderCredentials', smsProviderCredentials);
+
+    function smsProviderCredentials() {
+
+        return {
+            restrict: 'A',
+            require:"^ngModel",
+            transclude: true,
+            scope: {
+                provider: '=',
+                credentials: '=value'
+            },
+            template: '<ng-include src="getTemplateUrl()"/>',
+            controllerAs: 'ProviderCredentials',
+            controller: function($scope) {
+                $scope.getTemplateUrl = function() {
+                    return '?module=MobileMessaging&action=getCredentialFields&provider=' + $scope.provider;
+                };
+            },
+            link: function(scope, elm, attrs, ctrl) {
+                if (!ctrl) {
+                    return;
+                }
+
+                // view -> model
+                scope.$watch('credentials', function (val, oldVal) {
+                    ctrl.$setViewValue(JSON.stringify(val));
+                }, true);
+
+                // unset credentials when new provider is shoosen
+                scope.$watch('provider', function (val, oldVal) {
+                    if(val != oldVal) {
+                        scope.credentials = {};
+                    }
+                }, true);
+            }
+        };
+    }
+})();
\ No newline at end of file
diff --git a/plugins/MobileMessaging/images/ASPSMS.png b/plugins/MobileMessaging/images/ASPSMS.png
new file mode 100644
index 0000000000..31329505dc
--- /dev/null
+++ b/plugins/MobileMessaging/images/ASPSMS.png
diff --git a/plugins/MobileMessaging/lang/en.json b/plugins/MobileMessaging/lang/en.json
index 92f5581bda..9a28524488 100644
--- a/plugins/MobileMessaging/lang/en.json
+++ b/plugins/MobileMessaging/lang/en.json
@@ -13,6 +13,7 @@
         "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_CredentialInvalid": "Your %1$s SMS API account is configured, but an error occurred while trying to receive the available credits.",
         "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.",
@@ -38,6 +39,7 @@
         "Settings_VerificationCodeJustSent": "We just sent a SMS to this number with a code: please enter this code above and click \"Validate\".",
         "SettingsMenu": "Mobile Messaging",
         "SMS_Content_Too_Long": "[too long]",
+        "Available_Credits": "Available credits: %1$s",
         "TopLinkTooltip": "Get Web Analytics Reports delivered to your email inbox or your mobile phone.",
         "TopMenu": "Email & SMS Reports",
         "VerificationText": "Code is %1$s. To validate your phone number and receive Piwik SMS reports please copy this code in the form accessible via Piwik > %2$s > %3$s."
diff --git a/plugins/MobileMessaging/templates/credentials.twig b/plugins/MobileMessaging/templates/credentials.twig
new file mode 100644
index 0000000000..bb089e46ca
--- /dev/null
+++ b/plugins/MobileMessaging/templates/credentials.twig
@@ -0,0 +1,7 @@
+{% for field in credentialfields %}
+    <div piwik-field uicontrol="{{ field.type }}" name="{{ field.name }}"
+         ng-model="credentials.{{ field.name }}"
+         title="{{ field.title|translate|e('html_attr') }}"
+         value="">
+    </div>
+{% endfor %}
\ No newline at end of file
diff --git a/plugins/MobileMessaging/templates/index.twig b/plugins/MobileMessaging/templates/index.twig
index c0692c7795..253a7148ee 100644
--- a/plugins/MobileMessaging/templates/index.twig
+++ b/plugins/MobileMessaging/templates/index.twig
@@ -28,7 +28,7 @@
                 <p>{{ 'MobileMessaging_Settings_DelegatedSmsProviderOnlyAppliesToYou'|translate }}</p>
             {% endif %}
 
-            {{ macro.manageSmsApi(credentialSupplied, creditLeft, smsProviderOptions, smsProviders, provider) }}
+            {{ macro.manageSmsApi(credentialSupplied, credentialError, creditLeft, smsProviderOptions, smsProviders, provider) }}
         </div>
     {% endif %}
 
diff --git a/plugins/MobileMessaging/templates/macros.twig b/plugins/MobileMessaging/templates/macros.twig
index 9cb4c93e6d..3ea8c8948f 100644
--- a/plugins/MobileMessaging/templates/macros.twig
+++ b/plugins/MobileMessaging/templates/macros.twig
@@ -1,4 +1,4 @@
-{% macro manageSmsApi(credentialSupplied, creditLeft, smsProviderOptions, smsProviders, provider) %}
+{% macro manageSmsApi(credentialSupplied, credentialError, creditLeft, smsProviderOptions, smsProviders, provider) %}
 <div ng-controller="ManageSmsProviderController as manageProvider">
 
     <div piwik-activity-indicator loading="manageProvider.isDeletingAccount"></div>
@@ -6,8 +6,13 @@
 
     {% if credentialSupplied %}
         <p>
-            {{ 'MobileMessaging_Settings_CredentialProvided'|translate(provider) }}
-            {{ creditLeft }}
+            {% if credentialError %}
+                {{ 'MobileMessaging_Settings_CredentialInvalid'|translate(provider) }}<br />
+                {{ credentialError }}
+            {% else %}
+                {{ 'MobileMessaging_Settings_CredentialProvided'|translate(provider) }}
+                {{ creditLeft }}
+            {% endif %}
             <br/>
             {{ 'MobileMessaging_Settings_UpdateOrDeleteAccount'|translate('<a ng-click="manageProvider.showUpdateAccount()" id="displayAccountForm">',"</a>",'<a ng-click="manageProvider.deleteAccount()" id="deleteAccount">',"</a>")|raw }}
         </p>
@@ -25,13 +30,13 @@
              value="{{ provider }}">
         </div>
 
-        <div piwik-field uicontrol="text" name="apiKey"
-             ng-model="manageProvider.apiKey"
-             required="true"
+        <div sms-provider-credentials
+             provider="manageProvider.smsProvider"
+             ng-model="manageProvider.credentials"
+             value="{}"
+             ng-init="manageProvider.isUpdateAccountPossible()"
              ng-change="manageProvider.isUpdateAccountPossible()"
-             title="{{ 'MobileMessaging_Settings_APIKey'|translate|e('html_attr') }}"
-             value="">
-        </div>
+        ></div>
 
         <div piwik-save-button id='apiAccountSubmit'
              disabled="!manageProvider.canBeUpdated"