From cf62890fcf96136a969f5e1f006240812810bbb8 Mon Sep 17 00:00:00 2001
From: Matt Scott <matt@azorian.solutions>
Date: Mon, 10 Apr 2023 17:28:54 -0400
Subject: [PATCH] Working on implementing the jQuery Validation plugin for the
 authentication settings editor.

---
 .../js/app-authentication-settings-editor.js  | 121 +++++++++++++++++-
 .../admin_setting_authentication.html         |  24 ++--
 2 files changed, 132 insertions(+), 13 deletions(-)

diff --git a/powerdnsadmin/static/custom/js/app-authentication-settings-editor.js b/powerdnsadmin/static/custom/js/app-authentication-settings-editor.js
index 72d1542..0fa6aa2 100644
--- a/powerdnsadmin/static/custom/js/app-authentication-settings-editor.js
+++ b/powerdnsadmin/static/custom/js/app-authentication-settings-editor.js
@@ -267,6 +267,38 @@ let AuthenticationSettingsModel = function (user_data, api_url, csrf_token, sele
             return self.ldap_enabled() === 1 && self.autoprovisioning() === 1;
         }
 
+        let google_oauth_auto_configure_enabled = function (element) {
+            return self.google_oauth_enabled() && self.google_oauth_auto_configure();
+        }
+
+        let google_oauth_auto_configure_disabled = function (element) {
+            return self.google_oauth_enabled() && !self.google_oauth_auto_configure();
+        }
+
+        let github_oauth_auto_configure_enabled = function (element) {
+            return self.github_oauth_enabled() && self.github_oauth_auto_configure();
+        }
+
+        let github_oauth_auto_configure_disabled = function (element) {
+            return self.github_oauth_enabled() && !self.github_oauth_auto_configure();
+        }
+
+        let azure_oauth_auto_configure_enabled = function (element) {
+            return self.azure_oauth_enabled() && self.azure_oauth_auto_configure();
+        }
+
+        let azure_oauth_auto_configure_disabled = function (element) {
+            return self.azure_oauth_enabled() && !self.azure_oauth_auto_configure();
+        }
+
+        let oidc_oauth_auto_configure_enabled = function (element) {
+            return self.oidc_oauth_enabled() && self.oidc_oauth_auto_configure();
+        }
+
+        let oidc_oauth_auto_configure_disabled = function (element) {
+            return self.oidc_oauth_enabled() && !self.oidc_oauth_auto_configure();
+        }
+
         jQuery.validator.addMethod('auth_enabled', auth_enabled, 'At least one authentication method must be enabled.');
         jQuery.validator.addMethod('ldap_exclusive', ldap_exclusive, 'The LDAP group security and role auto-provisioning features are mutually exclusive.');
 
@@ -275,6 +307,7 @@ let AuthenticationSettingsModel = function (user_data, api_url, csrf_token, sele
         ];
 
         $(selector).validate({
+            ignore: '',
             errorPlacement: function (error, element) {
                 let useFooter = false;
                 for (let i = 0; i < footerErrorElements.length; i++) {
@@ -413,8 +446,94 @@ let AuthenticationSettingsModel = function (user_data, api_url, csrf_token, sele
                     maxlength: 100,
                 },
                 purge: ldap_enabled,
+                google_oauth_client_id: {
+                    required: google_oauth_enabled,
+                    minlength: 1,
+                    maxlength: 255,
+                },
+                google_oauth_client_secret: {
+                    required: google_oauth_enabled,
+                    minlength: 1,
+                    maxlength: 255,
+                },
+                google_oauth_scope: {
+                    required: google_oauth_enabled,
+                    minlength: 1,
+                    maxlength: 255,
+                },
+                google_base_url: {
+                    required: google_oauth_enabled,
+                    minlength: 1,
+                    maxlength: 255,
+                    url: true,
+                },
+                google_oauth_metadata_url: {
+                    required: google_oauth_auto_configure_enabled,
+                    minlength: 1,
+                    maxlength: 255,
+                    url: true,
+                },
+                google_token_url: {
+                    required: google_oauth_auto_configure_disabled,
+                    minlength: 1,
+                    maxlength: 255,
+                    url: true,
+                },
+                google_authorize_url: {
+                    required: google_oauth_auto_configure_disabled,
+                    minlength: 1,
+                    maxlength: 255,
+                    url: true,
+                },
+                github_oauth_key: {
+                    required: github_oauth_enabled,
+                    minlength: 1,
+                    maxlength: 255,
+                },
+                github_oauth_secret: {
+                    required: github_oauth_enabled,
+                    minlength: 1,
+                    maxlength: 255,
+                },
+                github_oauth_scope: {
+                    required: github_oauth_enabled,
+                    minlength: 1,
+                    maxlength: 255,
+                },
+                github_oauth_api_url: {
+                    required: github_oauth_enabled,
+                    minlength: 1,
+                    maxlength: 255,
+                    url: true,
+                },
+                github_oauth_metadata_url: {
+                    required: github_oauth_auto_configure_enabled,
+                    minlength: 1,
+                    maxlength: 255,
+                    url: true,
+                },
+                github_oauth_token_url: {
+                    required: github_oauth_auto_configure_disabled,
+                    minlength: 1,
+                    maxlength: 255,
+                    url: true,
+                },
+                github_oauth_authorize_url: {
+                    required: github_oauth_auto_configure_disabled,
+                    minlength: 1,
+                    maxlength: 255,
+                    url: true,
+                },
+
+            },
+            messages: {
+                ldap_sg_enabled: {
+                    ldap_exclusive: 'The LDAP group security feature is mutually exclusive with the LDAP role auto-provisioning feature.',
+                },
+                autoprovisioning: {
+                    ldap_exclusive: 'The LDAP role auto-provisioning feature is mutually exclusive with the LDAP group security feature.',
+                },
             },
-            messages: {},
         });
     }
 
diff --git a/powerdnsadmin/templates/admin_setting_authentication.html b/powerdnsadmin/templates/admin_setting_authentication.html
index 2729ed7..7c031db 100644
--- a/powerdnsadmin/templates/admin_setting_authentication.html
+++ b/powerdnsadmin/templates/admin_setting_authentication.html
@@ -89,7 +89,7 @@
                                     </ul>
                                     <div class="tab-content">
 
-                                        <div 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 +280,7 @@
                                         </div>
                                         <!-- /.tab-pane -->
 
-                                        <div 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 %}
@@ -744,7 +744,7 @@
                                         </div>
                                         <!-- /.tab-pane -->
 
-                                        <div
+                                        <div data-tab="google"
                                             data-bind="class: 'tab-pane' + (tab_active() == 'google' ? ' active' : '')">
                                             <div class="row">
                                                 <div class="col-12 col-sm-6 col-lg-4">
@@ -803,7 +803,7 @@
                                                                        id="google_oauth_auto_configure"
                                                                        name="google_oauth_auto_configure"
                                                                        class="checkbox"
-                                                                       data-bind="checked: google_oauth_auto_configure">
+                                                                       data-bind="enable: google_oauth_enabled, checked: google_oauth_auto_configure">
                                                                 <label for="google_oauth_auto_configure">Enable
                                                                     Google
                                                                     OAuth Auto-Configuration</label>
@@ -869,7 +869,7 @@
                                         </div>
                                         <!-- /.tab-pane -->
 
-                                        <div
+                                        <div data-tab="github"
                                             data-bind="class: 'tab-pane' + (tab_active() == 'github' ? ' active' : '')">
                                             <div class="row">
                                                 <div class="col-12 col-sm-6 col-lg-4">
@@ -927,7 +927,7 @@
                                                                        id="github_oauth_auto_configure"
                                                                        name="github_oauth_auto_configure"
                                                                        class="checkbox"
-                                                                       data-bind="checked: github_oauth_auto_configure">
+                                                                       data-bind="enable: github_oauth_enabled, checked: github_oauth_auto_configure">
                                                                 <label for="github_oauth_auto_configure">Enable
                                                                     GitHub
                                                                     OAuth Auto-Configuration</label>
@@ -991,7 +991,7 @@
                                         </div>
                                         <!-- /.tab-pane -->
 
-                                        <div 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">
@@ -1049,7 +1049,7 @@
                                                                        id="azure_oauth_auto_configure"
                                                                        name="azure_oauth_auto_configure"
                                                                        class="checkbox"
-                                                                       data-bind="checked: azure_oauth_auto_configure">
+                                                                       data-bind="enable: azure_oauth_enabled, checked: azure_oauth_auto_configure">
                                                                 <label for="azure_oauth_auto_configure">Enable Azure
                                                                     OAuth Auto-Configuration</label>
                                                             </div>
@@ -1293,7 +1293,7 @@
                                         </div>
                                         <!-- /.tab-pane -->
 
-                                        <div 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">
@@ -1349,7 +1349,7 @@
                                                                        id="oidc_oauth_auto_configure"
                                                                        name="oidc_oauth_auto_configure"
                                                                        class="checkbox"
-                                                                       data-bind="checked: oidc_oauth_auto_configure">
+                                                                       data-bind="enable: oidc_oauth_enabled, checked: oidc_oauth_auto_configure">
                                                                 <label for="oidc_oauth_auto_configure">Enable OIDC
                                                                     OAuth Auto-Configuration</label>
                                                             </div>
@@ -1509,8 +1509,8 @@
 {% endblock %}
 
 {% block head_styles %}
-    <style type="text/css">
-        .error { color: red; }
+    <style>
+        .error { color: red!important; }
     </style>
 {% endblock %}