From 69ce3cb88a57e39d488c149ee6c7272f688227bc Mon Sep 17 00:00:00 2001
From: Matt Scott <matt@azorian.solutions>
Date: Mon, 10 Apr 2023 19:52:18 -0400
Subject: [PATCH] Added additional UI alerts / messaging to handle success /
 failure scenarios.

---
 .../js/app-authentication-settings-editor.js  | 58 ++++-------
 .../admin_setting_authentication.html         | 98 +++++++------------
 2 files changed, 58 insertions(+), 98 deletions(-)

diff --git a/powerdnsadmin/static/custom/js/app-authentication-settings-editor.js b/powerdnsadmin/static/custom/js/app-authentication-settings-editor.js
index fccea97..fe3a942 100644
--- a/powerdnsadmin/static/custom/js/app-authentication-settings-editor.js
+++ b/powerdnsadmin/static/custom/js/app-authentication-settings-editor.js
@@ -6,6 +6,10 @@ let AuthenticationSettingsModel = function (user_data, api_url, csrf_token, sele
     self.selector = selector;
     self.loading = false;
     self.saving = false;
+    self.saved = false;
+    self.save_failed = false;
+    self.messages = [];
+    self.messages_class = 'info';
     self.tab_active = '';
     self.tab_default = 'local';
 
@@ -107,6 +111,10 @@ let AuthenticationSettingsModel = function (user_data, api_url, csrf_token, sele
     self.init = function (autoload) {
         self.loading = ko.observable(self.loading);
         self.saving = ko.observable(self.saving);
+        self.saved = ko.observable(self.saved);
+        self.save_failed = ko.observable(self.save_failed);
+        self.messages = ko.observableArray(self.messages);
+        self.messages_class = ko.observable(self.messages_class);
         self.tab_active = ko.observable(self.tab_active);
         self.tab_default = ko.observable(self.tab_default);
         self.update(user_data);
@@ -742,59 +750,33 @@ let AuthenticationSettingsModel = function (user_data, api_url, csrf_token, sele
 
     self.onDataLoaded = function (result) {
         if (result.status == 0) {
-            console.log('Error loading settings.');
-
-            if (result.messages.length) {
-                for (let i = 0; i < result.messages.length; i++) {
-                    let message = result.messages[i];
-                    console.log(message);
-                }
-            }
-
+            self.messages_class('danger');
+            self.messages(result.messages);
             self.loading(false);
             return false;
         }
 
         self.update(result.data);
-
-        console.log('Settings loaded.');
-
-        if (result.messages.length) {
-            for (let i = 0; i < result.messages.length; i++) {
-                let message = result.messages[i];
-                console.log(message);
-            }
-        }
-
+        self.messages_class('info');
+        self.messages(result.messages);
         self.loading(false);
     }
 
     self.onDataSaved = function (result) {
         if (result.status == 0) {
-            console.log('Error saving settings.');
-
-            if (result.messages.length) {
-                for (let i = 0; i < result.messages.length; i++) {
-                    let message = result.messages[i];
-                    console.log(message);
-                }
-            }
-
+            self.saved(false);
+            self.save_failed(true);
+            self.messages_class('danger');
+            self.messages(result.messages);
             self.saving(false);
             return false;
         }
 
         self.update(result.data);
-
-        console.log('Settings saved.');
-
-        if (result.messages.length) {
-            for (let i = 0; i < result.messages.length; i++) {
-                let message = result.messages[i];
-                console.log(message);
-            }
-        }
-
+        self.saved(true);
+        self.save_failed(false);
+        self.messages_class('info');
+        self.messages(result.messages);
         self.saving(false);
     }
 
diff --git a/powerdnsadmin/templates/admin_setting_authentication.html b/powerdnsadmin/templates/admin_setting_authentication.html
index 7c031db..e7984bc 100644
--- a/powerdnsadmin/templates/admin_setting_authentication.html
+++ b/powerdnsadmin/templates/admin_setting_authentication.html
@@ -40,16 +40,33 @@
                                              data-bind="text: (loading() ? 'Loading' : 'Saving') + ' settings...'"></div>
                                     </div>
                                 </div>
-                                {% if result %}
-                                    <div
-                                        class="alert {% if result['status'] %}alert-success{% else %}alert-danger{% endif %} alert-dismissible">
-                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
-                                            &times;
-                                        </button>
-                                        {{ result['msg'] }}
-                                    </div>
-                                {% endif %}
-
+                                <!-- /.overlay-wrapper -->
+                                <div class="alert alert-dismissible alert-success" style="display: none;"
+                                     data-bind="visible: saved">
+                                    <button type="button" class="close" aria-hidden="true"
+                                            data-bind="click: saved(false)">×
+                                    </button>
+                                    <h5><i class="icon fas fa-check"></i> Saved!</h5>
+                                    These settings have been saved to the database.
+                                </div>
+                                <div class="alert alert-dismissible alert-danger" style="display: none;"
+                                     data-bind="visible: save_failed">
+                                    <button type="button" class="close" aria-hidden="true"
+                                            data-bind="click: save_failed(false)">×
+                                    </button>
+                                    <h5><i class="icon fas fa-ban"></i> Error!</h5>
+                                    These settings could <strong>not</strong> be saved to the database!
+                                </div>
+                                <div class="alert alert-dismissible" style="display: none;"
+                                     data-bind="visible: messages().length, class: 'alert alert-dismissible alert-' + messages_class()">
+                                    <button type="button" class="close" aria-hidden="true"
+                                            data-bind="click: messages([])">×
+                                    </button>
+                                    <h5><i class="icon fas fa-info"></i> Additional Information</h5>
+                                    <ul data-bind="foreach: messages">
+                                        <li data-bind="text: $data"></li>
+                                    </ul>
+                                </div>
                                 <div class="nav-tabs-custom">
                                     <ul class="nav nav-tabs" role="tablist">
                                         <li class="nav-item">
@@ -89,7 +106,8 @@
                                     </ul>
                                     <div class="tab-content">
 
-                                        <div data-tab="local" data-bind="class: 'tab-pane' + (tab_active() == 'local' ? ' active' : '')">
+                                        <div data-tab="local"
+                                             data-bind="class: 'tab-pane' + (tab_active() == 'local' ? ' active' : '')">
                                             <div class="row">
                                                 <div class="col-12 col-sm-6 col-lg-4">
                                                     <div class="card">
@@ -280,7 +298,8 @@
                                         </div>
                                         <!-- /.tab-pane -->
 
-                                        <div data-tab="ldap" data-bind="class: 'tab-pane' + (tab_active() == 'ldap' ? ' active' : '')">
+                                        <div data-tab="ldap"
+                                             data-bind="class: 'tab-pane' + (tab_active() == 'ldap' ? ' active' : '')">
                                             <div class="row">
                                                 <div class="col-12 col-sm-6 col-lg-4">
                                                     {% if error %}
@@ -745,7 +764,7 @@
                                         <!-- /.tab-pane -->
 
                                         <div data-tab="google"
-                                            data-bind="class: 'tab-pane' + (tab_active() == 'google' ? ' active' : '')">
+                                             data-bind="class: 'tab-pane' + (tab_active() == 'google' ? ' active' : '')">
                                             <div class="row">
                                                 <div class="col-12 col-sm-6 col-lg-4">
                                                     <div class="card">
@@ -870,7 +889,7 @@
                                         <!-- /.tab-pane -->
 
                                         <div data-tab="github"
-                                            data-bind="class: 'tab-pane' + (tab_active() == 'github' ? ' active' : '')">
+                                             data-bind="class: 'tab-pane' + (tab_active() == 'github' ? ' active' : '')">
                                             <div class="row">
                                                 <div class="col-12 col-sm-6 col-lg-4">
                                                     <div class="card">
@@ -991,7 +1010,8 @@
                                         </div>
                                         <!-- /.tab-pane -->
 
-                                        <div data-tab="azure" data-bind="class: 'tab-pane' + (tab_active() == 'azure' ? ' active' : '')">
+                                        <div data-tab="azure"
+                                             data-bind="class: 'tab-pane' + (tab_active() == 'azure' ? ' active' : '')">
                                             <div class="row">
                                                 <div class="col-12 col-sm-6 col-lg-4">
                                                     <div class="card">
@@ -1293,7 +1313,8 @@
                                         </div>
                                         <!-- /.tab-pane -->
 
-                                        <div data-tab="oidc" data-bind="class: 'tab-pane' + (tab_active() == 'oidc' ? ' active' : '')">
+                                        <div data-tab="oidc"
+                                             data-bind="class: 'tab-pane' + (tab_active() == 'oidc' ? ' active' : '')">
                                             <div class="row">
                                                 <div class="col-12 col-sm-6 col-lg-4">
                                                     <div class="card">
@@ -1510,7 +1531,7 @@
 
 {% block head_styles %}
     <style>
-        .error { color: red!important; }
+        .error { color: red !important; }
     </style>
 {% endblock %}
 
@@ -1531,46 +1552,3 @@
         })
     </script>
 {% endblock %}
-
-{% block modals %}
-    <div class="modal fade modal-warning" id="modal_confirm" data-keyboard="false" data-backdrop="static">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="X">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                    <h4 class="modal-title">Confirmation</h4>
-                </div>
-                <div class="modal-body">
-                    <p></p>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default pull-left" id="button_cancel" name="purge" value="OFF"
-                            data-dismiss="modal">Cancel
-                    </button>
-                    <button type="button" class="btn btn-success" id="button_confirm">Confirm</button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="modal fade modal-warning" id="modal_warning" data-keyboard="false" data-backdrop="static">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="warning_X">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                    <h4 class="modal-title">Warning</h4>
-                </div>
-                <div class="modal-body">
-                    <p></p>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-success" id="button_warning_confirm">Yes I understand</button>
-                </div>
-            </div>
-        </div>
-    </div>
-{% endblock %}