do things the angular way

matomo-org · Jul 29, 2019 · 8d83f66 · 8d83f66
1 parent b0b5bfb
commit 8d83f66
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 43 deletions.
diff --git a/plugins/UsersManager/UsersManager.php b/plugins/UsersManager/UsersManager.php
@@ -298,6 +298,7 @@ public function getClientSideTranslationKeys(&$translationKeys)
         $translationKeys[] = 'General_Warning';
         $translationKeys[] = 'General_Add';
         $translationKeys[] = 'General_Note';
+        $translationKeys[] = 'General_Yes';
         $translationKeys[] = 'UsersManager_FilterByWebsite';
         $translationKeys[] = 'UsersManager_GiveAccessToAll';
         $translationKeys[] = 'UsersManager_OrManageIndividually';
@@ -308,5 +309,7 @@ public function getClientSideTranslationKeys(&$translationKeys)
         $translationKeys[] = 'UsersManager_AreYouSureAddCapability';
         $translationKeys[] = 'UsersManager_AreYouSureRemoveCapability';
         $translationKeys[] = 'UsersManager_IncludedInUsersRole';
+        $translationKeys[] = 'UsersManager_NewsletterSignupFailureMessage';
+        $translationKeys[] = 'UsersManager_NewsletterSignupSuccessMessage';
     }
 }
diff --git a/plugins/UsersManager/angularjs/personal-settings/personal-settings.controller.js b/plugins/UsersManager/angularjs/personal-settings/personal-settings.controller.js
@@ -16,7 +16,9 @@
 
         var self = this;
 
+        this.newsletterSignupButtonTitle = translate('General_Yes');
         this.doesRequirePasswordConfirmation = false;
+        this.showNewsletterSignup = true;
 
         function updateSettings(postParams)
         {
@@ -46,41 +48,30 @@
         };
 
         this.signupForNewsletter = function () {
-            var checkbox = $('#newsletterSignupCheckbox');
-            if (! checkbox.is(':checked')) {
-                return false;
-            }
-
             var signupBtn = $('#newsletterSignupBtn');
             signupBtn.html(translate('General_Loading'));
+            this.isProcessingNewsletterSignup = true;
 
-            var ajaxHandler = new ajaxHelper();
-            ajaxHandler.withTokenInUrl();
-            ajaxHandler.addParams(
-                {module: 'UsersManager', action: 'newsletterSignup'}, '' +
-                'GET'
-            );
-
-            var errorCallback = function() {
-                $('#newsletterSignupMsg').hide();
-                $('#newsletterSignupFailure').show();
-                signupBtn.html(translate('General_PleaseTryAgain'));
-            };
+            piwikApi.withTokenInUrl();
+            piwikApi.fetch({module: 'UsersManager', action: 'newsletterSignup'}).then(function () {
+                self.isProcessingNewsletterSignup = false;
+                self.showNewsletterSignup = false;
 
-            ajaxHandler.setCallback(function (response) {
-                if (response['success'] == true) {
-                    $('#newsletterSignupMsg').hide();
-                    $('#newsletterSignupFailure').hide();
-                    $('#newsletterSignupSuccess').show();
-                    signupBtn.hide();
-                } else {
-                    errorCallback();
-                }
-            });
-            ajaxHandler.setErrorCallback(errorCallback);
+                var UI = require('piwik/UI');
+                var notification = new UI.Notification();
+                notification.show(translate('UsersManager_NewsletterSignupSuccessMessage'), { id: 'newslettersignup', context: 'success'});
+                notification.scrollToNotification();
+
+            }, function () {
+                self.isProcessingNewsletterSignup = false;
 
-            ajaxHandler.send();
-            return false;
+                var UI = require('piwik/UI');
+                var notification = new UI.Notification();
+                notification.show(translate('UsersManager_NewsletterSignupFailureMessage'), { id: 'newslettersignup', context: 'error' });
+                notification.scrollToNotification();
+
+                self.newsletterSignupButtonTitle = translate('General_PleaseTryAgain');
+            });
         };
 
         this.regenerateTokenAuth = function () {

diff --git a/plugins/UsersManager/templates/userSettings.twig b/plugins/UsersManager/templates/userSettings.twig
@@ -121,22 +121,25 @@
 </div>
 
 {% if showNewsletterSignup %}
-<div piwik-content-block id="newsletterSignup" content-title="{{ 'UsersManager_NewsletterSignupTitle'|translate|e('html_attr') }}">
+<div ng-controller="PersonalSettingsController as personalSettings">
+    <div piwik-content-block id="newsletterSignup"
+         ng-show="personalSettings.showNewsletterSignup"
+         content-title="{{ 'UsersManager_NewsletterSignupTitle'|translate|e('html_attr') }}">
+
+        <div piwik-field uicontrol="checkbox" name="newsletterSignupCheckbox"
+             ng-model="personalSettings.newsletterSignupCheckbox"
+             full-width="true"
+             data-title="{{ 'UsersManager_NewsletterSignupMessage'|translate('<a href="https://matomo.org/privacy-policy/" target="_blank">', '</a>')|e('html_attr') }}"
+             >
+        </div>
 
-    <div id="newsletterSignupMsg">
-        <div>
-            <input type="checkbox" id="newsletterSignupCheckbox"/>
-            <label for="newsletterSignupCheckbox">{{ 'UsersManager_NewsletterSignupMessage'|translate('<a href="https://matomo.org/privacy-policy/" target="_blank">', '</a>')|raw }}</label>
+        <div piwik-save-button
+             onconfirm="personalSettings.signupForNewsletter()"
+             data-disabled="!personalSettings.newsletterSignupCheckbox"
+             value="{{ '{{ personalSettings.newsletterSignupButtonTitle }}'|raw }}"
+             saving="myController.isLoading">
         </div>
-        <br/><br/>
     </div>
-    <div id="newsletterSignupFailure" style="display:none">{{ 'UsersManager_NewsletterSignupFailureMessage'|translate|raw }}<br/><br/></div>
-    <div id="newsletterSignupSuccess" style="display:none">{{ 'UsersManager_NewsletterSignupSuccessMessage'|translate|raw }}<br/><br/></div>
-
-    <button class="btn btn-link" id="newsletterSignupBtn"
-            ng-controller="PersonalSettingsController as personalSettings"
-            ng-click="personalSettings.signupForNewsletter()"
-    >{{ 'General_Yes'|translate }}</button>
 </div>
 {% endif %}