Add user status filter to admin user management page (#16770)

It makes Admin's life easier to filter users by various status.

* introduce window.config.PageData to pass template data to javascript module and small refactor

move legacy window.ActivityTopAuthors to window.config.PageData.ActivityTopAuthors
make HTML structure more IDE-friendly in footer.tmpl and head.tmpl
remove incorrect <style class="list-search-style"></style> in head.tmpl
use log.Error instead of log.Critical in admin user search

* use LEFT JOIN instead of SubQuery when admin filters users by 2fa. revert non-en locale.

* use OptionalBool instead of status map

* refactor SearchUserOptions.toConds to SearchUserOptions.toSearchQueryBase

* add unit test for user search

* only allow admin to use filters to search users

2 files changed, 34 insertions, 0 deletions

diff --git a/web_src/js/features/admin-users.js b/web_src/js/features/admin-users.js
new file mode 100644
index 0000000000..b01c66afe2
--- /dev/null
+++ b/web_src/js/features/admin-users.js
@@ -0,0 +1,32 @@
+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 b607015800..71e5691179 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -17,6 +17,7 @@ import initMigration from './features/migration.js';
 import initProject from './features/projects.js';
 import initServiceWorker from './features/serviceworker.js';
 import initTableSort from './features/tablesort.js';
+import {initAdminUserListSearchForm} from './features/admin-users.js';
 import {createCodeEditor, createMonaco} from './features/codeeditor.js';
 import {initMarkupAnchors} from './markup/anchors.js';
 import {initNotificationsTable, initNotificationCount} from './features/notification.js';
@@ -2875,6 +2876,7 @@ $(document).ready(async () => {
   initReleaseEditor();
   initRelease();
   initIssueContentHistory();
+  initAdminUserListSearchForm();
 
   const routes = {
     'div.user.settings': initUserSettings,