fix

Author: wxiaoguang

templates/admin/self_check.tmpl

@@ -1,21 +1,23 @@
-{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin config")}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin")}}
 
 <div class="admin-setting-content">
 	<h4 class="ui top attached header">
 		{{ctx.Locale.Tr "admin.self_check"}}
 	</h4>
 
 	{{if .StartupProblems}}
-	<div class="ui attached segment">
+	<div class="ui attached segment self-check-problem">
 		<div class="ui warning message">
 			<div>{{ctx.Locale.Tr "admin.self_check.startup_warnings"}}</div>
 			<ul class="tw-w-full">{{range .StartupProblems}}<li>{{.}}</li>{{end}}</ul>
 		</div>
 	</div>
 	{{end}}
 
+	<div class="ui attached segment tw-hidden self-check-problem self-check-by-frontend"></div>
+
 	{{if .DatabaseCheckHasProblems}}
-	<div class="ui attached segment">
+	<div class="ui attached segment self-check-problem">
 		{{if .DatabaseType.IsMySQL}}
 			<div class="tw-p-2">{{ctx.Locale.Tr "admin.self_check.database_fix_mysql"}}</div>
 		{{else if .DatabaseType.IsMSSQL}}
@@ -29,22 +31,22 @@
 		{{end}}
 		{{if .DatabaseCheckInconsistentCollationColumns}}
 			<div class="ui red message">
-				{{ctx.Locale.Tr "admin.self_check.database_inconsistent_collation_columns" .DatabaseCheckResult.DatabaseCollation}}
-				<ul class="tw-w-full">
-				{{range .DatabaseCheckInconsistentCollationColumns}}
-					<li>{{.}}</li>
-				{{end}}
-				</ul>
+				<details>
+					<summary>{{ctx.Locale.Tr "admin.self_check.database_inconsistent_collation_columns" .DatabaseCheckResult.DatabaseCollation}}</summary>
+					<ul class="tw-w-full">
+					{{range .DatabaseCheckInconsistentCollationColumns}}
+						<li>{{.}}</li>
+					{{end}}
+					</ul>
+				</details>
 			</div>
 		{{end}}
 	</div>
 	{{end}}
-
-	{{if and (not .StartupProblems) (not .DatabaseCheckHasProblems)}}
-	<div class="ui attached segment">
+	{{/* only shown when there is no visible "self-check-problem" */}}
+	<div class="ui attached segment tw-hidden self-check-no-problem">
 		{{ctx.Locale.Tr "admin.self_check.no_problem_found"}}
 	</div>
-	{{end}}
 </div>
 
 {{template "admin/layout_footer" .}}

web_src/js/bootstrap.js

@@ -22,14 +22,14 @@ export function showGlobalErrorMessage(msg) {
   let msgDiv = msgContainer.querySelector(`.js-global-error[data-global-error-msg-compact="${msgCompact}"]`);
   if (!msgDiv) {
     const el = document.createElement('div');
-    el.innerHTML = `<div class="ui container negative message center aligned js-global-error tw-mt-[15px] tw-whitespace-pre-line"></div>`;
+    el.innerHTML = `<div class="ui container js-global-error tw-my-4"><div class="ui negative message tw-text-center tw-whitespace-pre-line"></div></div>`;
     msgDiv = el.childNodes[0];
   }
   // merge duplicated messages into "the message (count)" format
   const msgCount = Number(msgDiv.getAttribute(`data-global-error-msg-count`)) + 1;
   msgDiv.setAttribute(`data-global-error-msg-compact`, msgCompact);
   msgDiv.setAttribute(`data-global-error-msg-count`, msgCount.toString());
-  msgDiv.textContent = msg + (msgCount > 1 ? ` (${msgCount})` : '');
+  msgDiv.querySelector('.ui.message').textContent = msg + (msgCount > 1 ? ` (${msgCount})` : '');
   msgContainer.prepend(msgDiv);
 }
 
@@ -49,6 +49,8 @@ function processWindowErrorEvent({error, reason, message, type, filename, lineno
   const assetBaseUrl = String(new URL(__webpack_public_path__, window.location.origin));
   const {runModeIsProd} = window.config ?? {};
 
+  console.log(error, reason);
+
   // `error` and `reason` are not guaranteed to be errors. If the value is falsy, it is likely a
   // non-critical event from the browser. We log them but don't show them to users. Examples:
   // - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
@@ -60,6 +62,7 @@ function processWindowErrorEvent({error, reason, message, type, filename, lineno
   }
 
   if (err instanceof Error) {
+
     // If the error stack trace does not include the base URL of our script assets, it likely came
     // from a browser extension or inline script. Do not show such errors in production.
     if (!err.stack?.includes(assetBaseUrl) && runModeIsProd) return;

web_src/js/features/admin/selfcheck.js

@@ -0,0 +1,24 @@
+import {toggleElem} from '../../utils/dom.js';
+import {POST} from '../../modules/fetch.js';
+
+const {appSubUrl} = window.config;
+
+export async function initAdminSelfCheck() {
+  const elAdminSelfCheckFrontend = document.querySelector('.page-content.admin .self-check-by-frontend');
+  if (!elAdminSelfCheckFrontend) return;
+
+  const resp = await POST(`${appSubUrl}/admin/selfcheck/with-frontend`, {
+    data: new URLSearchParams({
+      locationOrigin: window.location.origin,
+      now: Date.now(),
+    }),
+  });
+
+  const json = await resp.json();
+  console.log(json);
+
+  // only show the "no problem" if there is no visible "self-check-problem"
+  const elContent = document.querySelector('.page-content.admin .admin-setting-content:not(.tw-hidden)');
+  const hasProblem = Boolean(elContent.querySelectorAll('.self-check-problem').length);
+  toggleElem(elContent.querySelector('.self-check-no-problem'), !hasProblem);
+}

web_src/js/index.js

@@ -87,6 +87,7 @@ import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js'
 import {initDirAuto} from './modules/dirauto.js';
 import {initRepositorySearch} from './features/repo-search.js';
 import {initColorPickers} from './features/colorpicker.js';
+import {initAdminSelfCheck} from './features/admin/selfcheck.js';
 
 // Init Gitea's Fomantic settings
 initGiteaFomantic();
@@ -132,6 +133,7 @@ onDomReady(() => {
   initAdminEmails();
   initAdminUserListSearchForm();
   initAdminConfigs();
+  initAdminSelfCheck();
 
   initDashboardRepoList();