From f860a6d2e4177ed4f4c2a58a07882bd00a1a52ad Mon Sep 17 00:00:00 2001
From: Lunny Xiao <xiaolunwen@gmail.com>
Date: Mon, 17 Oct 2022 07:29:26 +0800
Subject: Add system setting table with cache and also add cache supports for
 user setting (#18058)

---
 web_src/js/features/admin-common.js | 212 ------------------------------------
 web_src/js/features/admin-emails.js |  14 ---
 web_src/js/features/admin-users.js  |  34 ------
 web_src/js/features/admin/common.js | 212 ++++++++++++++++++++++++++++++++++++
 web_src/js/features/admin/config.js |  37 +++++++
 web_src/js/features/admin/emails.js |  14 +++
 web_src/js/features/admin/users.js  |  34 ++++++
 web_src/js/index.js                 |   8 +-
 8 files changed, 302 insertions(+), 263 deletions(-)
 delete mode 100644 web_src/js/features/admin-common.js
 delete mode 100644 web_src/js/features/admin-emails.js
 delete mode 100644 web_src/js/features/admin-users.js
 create mode 100644 web_src/js/features/admin/common.js
 create mode 100644 web_src/js/features/admin/config.js
 create mode 100644 web_src/js/features/admin/emails.js
 create mode 100644 web_src/js/features/admin/users.js

(limited to 'web_src/js')

diff --git a/web_src/js/features/admin-common.js b/web_src/js/features/admin-common.js
deleted file mode 100644
index 2438fcf62b..0000000000
--- a/web_src/js/features/admin-common.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import $ from 'jquery';
-
-const {csrfToken} = window.config;
-
-export function initAdminCommon() {
-  if ($('.admin').length === 0) {
-    return;
-  }
-
-  // New user
-  if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
-    $('#login_type').on('change', function () {
-      if ($(this).val().substring(0, 1) === '0') {
-        $('#user_name').removeAttr('disabled');
-        $('#login_name').removeAttr('required');
-        $('.non-local').hide();
-        $('.local').show();
-        $('#user_name').focus();
-
-        if ($(this).data('password') === 'required') {
-          $('#password').attr('required', 'required');
-        }
-      } else {
-        if ($('.admin.edit.user').length > 0) {
-          $('#user_name').attr('disabled', 'disabled');
-        }
-        $('#login_name').attr('required', 'required');
-        $('.non-local').show();
-        $('.local').hide();
-        $('#login_name').focus();
-
-        $('#password').removeAttr('required');
-      }
-    });
-  }
-
-  function onSecurityProtocolChange() {
-    if ($('#security_protocol').val() > 0) {
-      $('.has-tls').show();
-    } else {
-      $('.has-tls').hide();
-    }
-  }
-
-  function onUsePagedSearchChange() {
-    if ($('#use_paged_search').prop('checked')) {
-      $('.search-page-size').show()
-        .find('input').attr('required', 'required');
-    } else {
-      $('.search-page-size').hide()
-        .find('input').removeAttr('required');
-    }
-  }
-
-  function onOAuth2Change(applyDefaultValues) {
-    $('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url').hide();
-    $('.open_id_connect_auto_discovery_url input[required]').removeAttr('required');
-
-    const provider = $('#oauth2_provider').val();
-    switch (provider) {
-      case 'openidConnect':
-        $('.open_id_connect_auto_discovery_url input').attr('required', 'required');
-        $('.open_id_connect_auto_discovery_url').show();
-        break;
-      default:
-        if ($(`#${provider}_customURLSettings`).data('required')) {
-          $('#oauth2_use_custom_url').attr('checked', 'checked');
-        }
-        if ($(`#${provider}_customURLSettings`).data('available')) {
-          $('.oauth2_use_custom_url').show();
-        }
-    }
-    onOAuth2UseCustomURLChange(applyDefaultValues);
-  }
-
-  function onOAuth2UseCustomURLChange(applyDefaultValues) {
-    const provider = $('#oauth2_provider').val();
-    $('.oauth2_use_custom_url_field').hide();
-    $('.oauth2_use_custom_url_field input[required]').removeAttr('required');
-
-    if ($('#oauth2_use_custom_url').is(':checked')) {
-      for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
-        if (applyDefaultValues) {
-          $(`#oauth2_${custom}`).val($(`#${provider}_${custom}`).val());
-        }
-        if ($(`#${provider}_${custom}`).data('available')) {
-          $(`.oauth2_${custom} input`).attr('required', 'required');
-          $(`.oauth2_${custom}`).show();
-        }
-      }
-    }
-  }
-
-  function onEnableLdapGroupsChange() {
-    $('#ldap-group-options').toggle($('.js-ldap-group-toggle').is(':checked'));
-  }
-
-  // New authentication
-  if ($('.admin.new.authentication').length > 0) {
-    $('#auth_type').on('change', function () {
-      $('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi').hide();
-
-      $('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]').removeAttr('required');
-      $('.binddnrequired').removeClass('required');
-
-      const authType = $(this).val();
-      switch (authType) {
-        case '2': // LDAP
-          $('.ldap').show();
-          $('.binddnrequired input, .ldap div.required:not(.dldap) input').attr('required', 'required');
-          $('.binddnrequired').addClass('required');
-          break;
-        case '3': // SMTP
-          $('.smtp').show();
-          $('.has-tls').show();
-          $('.smtp div.required input, .has-tls').attr('required', 'required');
-          break;
-        case '4': // PAM
-          $('.pam').show();
-          $('.pam input').attr('required', 'required');
-          break;
-        case '5': // LDAP
-          $('.dldap').show();
-          $('.dldap div.required:not(.ldap) input').attr('required', 'required');
-          break;
-        case '6': // OAuth2
-          $('.oauth2').show();
-          $('.oauth2 div.required:not(.oauth2_use_custom_url,.oauth2_use_custom_url_field,.open_id_connect_auto_discovery_url) input').attr('required', 'required');
-          onOAuth2Change(true);
-          break;
-        case '7': // SSPI
-          $('.sspi').show();
-          $('.sspi div.required input').attr('required', 'required');
-          break;
-      }
-      if (authType === '2' || authType === '5') {
-        onSecurityProtocolChange();
-        onEnableLdapGroupsChange();
-      }
-      if (authType === '2') {
-        onUsePagedSearchChange();
-      }
-    });
-    $('#auth_type').trigger('change');
-    $('#security_protocol').on('change', onSecurityProtocolChange);
-    $('#use_paged_search').on('change', onUsePagedSearchChange);
-    $('#oauth2_provider').on('change', () => onOAuth2Change(true));
-    $('#oauth2_use_custom_url').on('change', () => onOAuth2UseCustomURLChange(true));
-    $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
-  }
-  // Edit authentication
-  if ($('.admin.edit.authentication').length > 0) {
-    const authType = $('#auth_type').val();
-    if (authType === '2' || authType === '5') {
-      $('#security_protocol').on('change', onSecurityProtocolChange);
-      $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
-      onEnableLdapGroupsChange();
-      if (authType === '2') {
-        $('#use_paged_search').on('change', onUsePagedSearchChange);
-      }
-    } else if (authType === '6') {
-      $('#oauth2_provider').on('change', () => onOAuth2Change(true));
-      $('#oauth2_use_custom_url').on('change', () => onOAuth2UseCustomURLChange(false));
-      onOAuth2Change(false);
-    }
-  }
-
-  // Notice
-  if ($('.admin.notice')) {
-    const $detailModal = $('#detail-modal');
-
-    // Attach view detail modals
-    $('.view-detail').on('click', function () {
-      $detailModal.find('.content pre').text($(this).parents('tr').find('.notice-description').text());
-      $detailModal.find('.sub.header').text($(this).parents('tr').find('.notice-created-time').text());
-      $detailModal.modal('show');
-      return false;
-    });
-
-    // Select actions
-    const $checkboxes = $('.select.table .ui.checkbox');
-    $('.select.action').on('click', function () {
-      switch ($(this).data('action')) {
-        case 'select-all':
-          $checkboxes.checkbox('check');
-          break;
-        case 'deselect-all':
-          $checkboxes.checkbox('uncheck');
-          break;
-        case 'inverse':
-          $checkboxes.checkbox('toggle');
-          break;
-      }
-    });
-    $('#delete-selection').on('click', function () {
-      const $this = $(this);
-      $this.addClass('loading disabled');
-      const ids = [];
-      $checkboxes.each(function () {
-        if ($(this).checkbox('is checked')) {
-          ids.push($(this).data('id'));
-        }
-      });
-      $.post($this.data('link'), {
-        _csrf: csrfToken,
-        ids
-      }).done(() => {
-        window.location.href = $this.data('redirect');
-      });
-    });
-  }
-}
diff --git a/web_src/js/features/admin-emails.js b/web_src/js/features/admin-emails.js
deleted file mode 100644
index 46fafa7eff..0000000000
--- a/web_src/js/features/admin-emails.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import $ from 'jquery';
-
-export function initAdminEmails() {
-  function linkEmailAction(e) {
-    const $this = $(this);
-    $('#form-uid').val($this.data('uid'));
-    $('#form-email').val($this.data('email'));
-    $('#form-primary').val($this.data('primary'));
-    $('#form-activate').val($this.data('activate'));
-    $('#change-email-modal').modal('show');
-    e.preventDefault();
-  }
-  $('.link-email-action').on('click', linkEmailAction);
-}
diff --git a/web_src/js/features/admin-users.js b/web_src/js/features/admin-users.js
deleted file mode 100644
index 2221fc4929..0000000000
--- a/web_src/js/features/admin-users.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import $ from 'jquery';
-
-export function initAdminUserListSearchForm() {
-  const searchForm = window.config.pageData.adminUserListSearchForm;
-  if (!searchForm) return;
-
-  const $form = $('#user-list-search-form');
-  if (!$form.length) return;
-
-  $form.find(`button[name=sort][value=${searchForm.SortType}]`).addClass('active');
-
-  if (searchForm.StatusFilterMap) {
-    for (const [k, v] of Object.entries(searchForm.StatusFilterMap)) {
-      if (!v) continue;
-      $form.find(`input[name="status_filter[${k}]"][value=${v}]`).prop('checked', true);
-    }
-  }
-
-  $form.find(`input[type=radio]`).click(() => {
-    $form.submit();
-    return false;
-  });
-
-  $form.find('.j-reset-status-filter').click(() => {
-    $form.find(`input[type=radio]`).each((_, e) => {
-      const $e = $(e);
-      if ($e.attr('name').startsWith('status_filter[')) {
-        $e.prop('checked', false);
-      }
-    });
-    $form.submit();
-    return false;
-  });
-}
diff --git a/web_src/js/features/admin/common.js b/web_src/js/features/admin/common.js
new file mode 100644
index 0000000000..2438fcf62b
--- /dev/null
+++ b/web_src/js/features/admin/common.js
@@ -0,0 +1,212 @@
+import $ from 'jquery';
+
+const {csrfToken} = window.config;
+
+export function initAdminCommon() {
+  if ($('.admin').length === 0) {
+    return;
+  }
+
+  // New user
+  if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
+    $('#login_type').on('change', function () {
+      if ($(this).val().substring(0, 1) === '0') {
+        $('#user_name').removeAttr('disabled');
+        $('#login_name').removeAttr('required');
+        $('.non-local').hide();
+        $('.local').show();
+        $('#user_name').focus();
+
+        if ($(this).data('password') === 'required') {
+          $('#password').attr('required', 'required');
+        }
+      } else {
+        if ($('.admin.edit.user').length > 0) {
+          $('#user_name').attr('disabled', 'disabled');
+        }
+        $('#login_name').attr('required', 'required');
+        $('.non-local').show();
+        $('.local').hide();
+        $('#login_name').focus();
+
+        $('#password').removeAttr('required');
+      }
+    });
+  }
+
+  function onSecurityProtocolChange() {
+    if ($('#security_protocol').val() > 0) {
+      $('.has-tls').show();
+    } else {
+      $('.has-tls').hide();
+    }
+  }
+
+  function onUsePagedSearchChange() {
+    if ($('#use_paged_search').prop('checked')) {
+      $('.search-page-size').show()
+        .find('input').attr('required', 'required');
+    } else {
+      $('.search-page-size').hide()
+        .find('input').removeAttr('required');
+    }
+  }
+
+  function onOAuth2Change(applyDefaultValues) {
+    $('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url').hide();
+    $('.open_id_connect_auto_discovery_url input[required]').removeAttr('required');
+
+    const provider = $('#oauth2_provider').val();
+    switch (provider) {
+      case 'openidConnect':
+        $('.open_id_connect_auto_discovery_url input').attr('required', 'required');
+        $('.open_id_connect_auto_discovery_url').show();
+        break;
+      default:
+        if ($(`#${provider}_customURLSettings`).data('required')) {
+          $('#oauth2_use_custom_url').attr('checked', 'checked');
+        }
+        if ($(`#${provider}_customURLSettings`).data('available')) {
+          $('.oauth2_use_custom_url').show();
+        }
+    }
+    onOAuth2UseCustomURLChange(applyDefaultValues);
+  }
+
+  function onOAuth2UseCustomURLChange(applyDefaultValues) {
+    const provider = $('#oauth2_provider').val();
+    $('.oauth2_use_custom_url_field').hide();
+    $('.oauth2_use_custom_url_field input[required]').removeAttr('required');
+
+    if ($('#oauth2_use_custom_url').is(':checked')) {
+      for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
+        if (applyDefaultValues) {
+          $(`#oauth2_${custom}`).val($(`#${provider}_${custom}`).val());
+        }
+        if ($(`#${provider}_${custom}`).data('available')) {
+          $(`.oauth2_${custom} input`).attr('required', 'required');
+          $(`.oauth2_${custom}`).show();
+        }
+      }
+    }
+  }
+
+  function onEnableLdapGroupsChange() {
+    $('#ldap-group-options').toggle($('.js-ldap-group-toggle').is(':checked'));
+  }
+
+  // New authentication
+  if ($('.admin.new.authentication').length > 0) {
+    $('#auth_type').on('change', function () {
+      $('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi').hide();
+
+      $('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]').removeAttr('required');
+      $('.binddnrequired').removeClass('required');
+
+      const authType = $(this).val();
+      switch (authType) {
+        case '2': // LDAP
+          $('.ldap').show();
+          $('.binddnrequired input, .ldap div.required:not(.dldap) input').attr('required', 'required');
+          $('.binddnrequired').addClass('required');
+          break;
+        case '3': // SMTP
+          $('.smtp').show();
+          $('.has-tls').show();
+          $('.smtp div.required input, .has-tls').attr('required', 'required');
+          break;
+        case '4': // PAM
+          $('.pam').show();
+          $('.pam input').attr('required', 'required');
+          break;
+        case '5': // LDAP
+          $('.dldap').show();
+          $('.dldap div.required:not(.ldap) input').attr('required', 'required');
+          break;
+        case '6': // OAuth2
+          $('.oauth2').show();
+          $('.oauth2 div.required:not(.oauth2_use_custom_url,.oauth2_use_custom_url_field,.open_id_connect_auto_discovery_url) input').attr('required', 'required');
+          onOAuth2Change(true);
+          break;
+        case '7': // SSPI
+          $('.sspi').show();
+          $('.sspi div.required input').attr('required', 'required');
+          break;
+      }
+      if (authType === '2' || authType === '5') {
+        onSecurityProtocolChange();
+        onEnableLdapGroupsChange();
+      }
+      if (authType === '2') {
+        onUsePagedSearchChange();
+      }
+    });
+    $('#auth_type').trigger('change');
+    $('#security_protocol').on('change', onSecurityProtocolChange);
+    $('#use_paged_search').on('change', onUsePagedSearchChange);
+    $('#oauth2_provider').on('change', () => onOAuth2Change(true));
+    $('#oauth2_use_custom_url').on('change', () => onOAuth2UseCustomURLChange(true));
+    $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
+  }
+  // Edit authentication
+  if ($('.admin.edit.authentication').length > 0) {
+    const authType = $('#auth_type').val();
+    if (authType === '2' || authType === '5') {
+      $('#security_protocol').on('change', onSecurityProtocolChange);
+      $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
+      onEnableLdapGroupsChange();
+      if (authType === '2') {
+        $('#use_paged_search').on('change', onUsePagedSearchChange);
+      }
+    } else if (authType === '6') {
+      $('#oauth2_provider').on('change', () => onOAuth2Change(true));
+      $('#oauth2_use_custom_url').on('change', () => onOAuth2UseCustomURLChange(false));
+      onOAuth2Change(false);
+    }
+  }
+
+  // Notice
+  if ($('.admin.notice')) {
+    const $detailModal = $('#detail-modal');
+
+    // Attach view detail modals
+    $('.view-detail').on('click', function () {
+      $detailModal.find('.content pre').text($(this).parents('tr').find('.notice-description').text());
+      $detailModal.find('.sub.header').text($(this).parents('tr').find('.notice-created-time').text());
+      $detailModal.modal('show');
+      return false;
+    });
+
+    // Select actions
+    const $checkboxes = $('.select.table .ui.checkbox');
+    $('.select.action').on('click', function () {
+      switch ($(this).data('action')) {
+        case 'select-all':
+          $checkboxes.checkbox('check');
+          break;
+        case 'deselect-all':
+          $checkboxes.checkbox('uncheck');
+          break;
+        case 'inverse':
+          $checkboxes.checkbox('toggle');
+          break;
+      }
+    });
+    $('#delete-selection').on('click', function () {
+      const $this = $(this);
+      $this.addClass('loading disabled');
+      const ids = [];
+      $checkboxes.each(function () {
+        if ($(this).checkbox('is checked')) {
+          ids.push($(this).data('id'));
+        }
+      });
+      $.post($this.data('link'), {
+        _csrf: csrfToken,
+        ids
+      }).done(() => {
+        window.location.href = $this.data('redirect');
+      });
+    });
+  }
+}
diff --git a/web_src/js/features/admin/config.js b/web_src/js/features/admin/config.js
new file mode 100644
index 0000000000..f5d8fae8fa
--- /dev/null
+++ b/web_src/js/features/admin/config.js
@@ -0,0 +1,37 @@
+import $ from 'jquery';
+import {showTemporaryTooltip} from '../../modules/tippy.js';
+
+const {appSubUrl, csrfToken, pageData} = window.config;
+
+export function initAdminConfigs() {
+  const isAdminConfigPage = pageData?.adminConfigPage;
+  if (!isAdminConfigPage) return;
+
+  $("input[type='checkbox']").on('change', (e) => {
+    const $this = $(e.currentTarget);
+    $.ajax({
+      url: `${appSubUrl}/admin/config`,
+      type: 'POST',
+      data: {
+        _csrf: csrfToken,
+        key: $this.attr('name'),
+        value: $this.is(':checked'),
+        version: $this.attr('version'),
+      }
+    }).done((resp) => {
+      if (resp) {
+        if (resp.redirect) {
+          window.location.href = resp.redirect;
+        } else if (resp.version) {
+          $this.attr('version', resp.version);
+        } else if (resp.err) {
+          showTemporaryTooltip(e.currentTarget, resp.err);
+          $this.prop('checked', !$this.is(':checked'));
+        }
+      }
+    });
+
+    e.preventDefault();
+    return false;
+  });
+}
diff --git a/web_src/js/features/admin/emails.js b/web_src/js/features/admin/emails.js
new file mode 100644
index 0000000000..46fafa7eff
--- /dev/null
+++ b/web_src/js/features/admin/emails.js
@@ -0,0 +1,14 @@
+import $ from 'jquery';
+
+export function initAdminEmails() {
+  function linkEmailAction(e) {
+    const $this = $(this);
+    $('#form-uid').val($this.data('uid'));
+    $('#form-email').val($this.data('email'));
+    $('#form-primary').val($this.data('primary'));
+    $('#form-activate').val($this.data('activate'));
+    $('#change-email-modal').modal('show');
+    e.preventDefault();
+  }
+  $('.link-email-action').on('click', linkEmailAction);
+}
diff --git a/web_src/js/features/admin/users.js b/web_src/js/features/admin/users.js
new file mode 100644
index 0000000000..2221fc4929
--- /dev/null
+++ b/web_src/js/features/admin/users.js
@@ -0,0 +1,34 @@
+import $ from 'jquery';
+
+export function initAdminUserListSearchForm() {
+  const searchForm = window.config.pageData.adminUserListSearchForm;
+  if (!searchForm) return;
+
+  const $form = $('#user-list-search-form');
+  if (!$form.length) return;
+
+  $form.find(`button[name=sort][value=${searchForm.SortType}]`).addClass('active');
+
+  if (searchForm.StatusFilterMap) {
+    for (const [k, v] of Object.entries(searchForm.StatusFilterMap)) {
+      if (!v) continue;
+      $form.find(`input[name="status_filter[${k}]"][value=${v}]`).prop('checked', true);
+    }
+  }
+
+  $form.find(`input[type=radio]`).click(() => {
+    $form.submit();
+    return false;
+  });
+
+  $form.find('.j-reset-status-filter').click(() => {
+    $form.find(`input[type=radio]`).each((_, e) => {
+      const $e = $(e);
+      if ($e.attr('name').startsWith('status_filter[')) {
+        $e.prop('checked', false);
+      }
+    });
+    $form.submit();
+    return false;
+  });
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index b13ad0e13a..a829deaf11 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -16,7 +16,8 @@ import initRepoMigration from './features/repo-migration.js';
 import initRepoProject from './features/repo-projects.js';
 import initServiceWorker from './features/serviceworker.js';
 import initTableSort from './features/tablesort.js';
-import {initAdminUserListSearchForm} from './features/admin-users.js';
+import {initAdminUserListSearchForm} from './features/admin/users.js';
+import {initAdminConfigs} from './features/admin/config.js';
 import {initMarkupAnchors} from './markup/anchors.js';
 import {initNotificationCount, initNotificationsTable} from './features/notification.js';
 import {initRepoIssueContentHistory} from './features/repo-issue-content.js';
@@ -60,8 +61,8 @@ import {
   initGlobalTooltips,
 } from './features/common-global.js';
 import {initRepoTopicBar} from './features/repo-home.js';
-import {initAdminEmails} from './features/admin-emails.js';
-import {initAdminCommon} from './features/admin-common.js';
+import {initAdminEmails} from './features/admin/emails.js';
+import {initAdminCommon} from './features/admin/common.js';
 import {initRepoTemplateSearch} from './features/repo-template.js';
 import {initRepoCodeView} from './features/repo-code.js';
 import {initSshKeyFormParser} from './features/sshkey-helper.js';
@@ -139,6 +140,7 @@ $(document).ready(() => {
   initAdminCommon();
   initAdminEmails();
   initAdminUserListSearchForm();
+  initAdminConfigs();
 
   initDashboardRepoList();
 
-- 
cgit v1.2.3