feat: vendor gitea 1.16.2

package/gitea/source/web_src/js/features/admin/common.ts

@@ -2,6 +2,7 @@ import {checkAppUrl} from '../common-page.ts';
 import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts';
 import {POST} from '../../modules/fetch.ts';
 import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {pathEscape} from '../../utils/url.ts';
 
 const {appSubUrl} = window.config;
 
@@ -63,7 +64,7 @@ function initAdminAuthentication() {
 
   function onUsePagedSearchChange() {
     const searchPageSizeElements = document.querySelectorAll<HTMLDivElement>('.search-page-size');
-    if (document.querySelector<HTMLInputElement>('#use_paged_search').checked) {
+    if (document.querySelector<HTMLInputElement>('#use_paged_search')!.checked) {
       showElem('.search-page-size');
       for (const el of searchPageSizeElements) {
         el.querySelector('input')?.setAttribute('required', 'required');
@@ -82,10 +83,10 @@ function initAdminAuthentication() {
       input.removeAttribute('required');
     }
 
-    const provider = document.querySelector<HTMLInputElement>('#oauth2_provider').value;
+    const provider = document.querySelector<HTMLInputElement>('#oauth2_provider')!.value;
     switch (provider) {
       case 'openidConnect':
-        document.querySelector<HTMLInputElement>('.open_id_connect_auto_discovery_url input').setAttribute('required', 'required');
+        document.querySelector<HTMLInputElement>('.open_id_connect_auto_discovery_url input')!.setAttribute('required', 'required');
         showElem('.open_id_connect_auto_discovery_url');
         break;
       default: {
@@ -97,7 +98,7 @@ function initAdminAuthentication() {
           showElem('.oauth2_use_custom_url'); // show the checkbox
         }
         if (mustProvideCustomURLs) {
-          document.querySelector<HTMLInputElement>('#oauth2_use_custom_url').checked = true; // make the checkbox checked
+          document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')!.checked = true; // make the checkbox checked
         }
         break;
       }
@@ -109,20 +110,20 @@ function initAdminAuthentication() {
   }
 
   function onOAuth2UseCustomURLChange(applyDefaultValues: boolean) {
-    const provider = document.querySelector<HTMLInputElement>('#oauth2_provider').value;
+    const provider = document.querySelector<HTMLInputElement>('#oauth2_provider')!.value;
     hideElem('.oauth2_use_custom_url_field');
     for (const input of document.querySelectorAll<HTMLInputElement>('.oauth2_use_custom_url_field input[required]')) {
       input.removeAttribute('required');
     }
 
     const elProviderCustomUrlSettings = document.querySelector(`#${provider}_customURLSettings`);
-    if (elProviderCustomUrlSettings && document.querySelector<HTMLInputElement>('#oauth2_use_custom_url').checked) {
+    if (elProviderCustomUrlSettings && document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')!.checked) {
       for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
         if (applyDefaultValues) {
-          document.querySelector<HTMLInputElement>(`#oauth2_${custom}`).value = document.querySelector<HTMLInputElement>(`#${provider}_${custom}`).value;
+          document.querySelector<HTMLInputElement>(`#oauth2_${custom}`)!.value = document.querySelector<HTMLInputElement>(`#${provider}_${custom}`)!.value;
         }
         const customInput = document.querySelector(`#${provider}_${custom}`);
-        if (customInput && customInput.getAttribute('data-available') === 'true') {
+        if (customInput?.getAttribute('data-available') === 'true') {
           for (const input of document.querySelectorAll(`.oauth2_${custom} input`)) {
             input.setAttribute('required', 'required');
           }
@@ -134,10 +135,10 @@ function initAdminAuthentication() {
 
   function onEnableLdapGroupsChange() {
     const checked = document.querySelector<HTMLInputElement>('.js-ldap-group-toggle')?.checked;
-    toggleElem(document.querySelector('#ldap-group-options'), checked);
+    toggleElem(document.querySelector('#ldap-group-options')!, checked);
   }
 
-  const elAuthType = document.querySelector<HTMLInputElement>('#auth_type');
+  const elAuthType = document.querySelector<HTMLInputElement>('#auth_type')!;
 
   // New authentication
   if (isNewPage) {
@@ -208,14 +209,14 @@ function initAdminAuthentication() {
     document.querySelector<HTMLInputElement>('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
     document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
 
-    document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
+    document.querySelector('.js-ldap-group-toggle')!.addEventListener('change', onEnableLdapGroupsChange);
   }
   // Edit authentication
   if (isEditPage) {
     const authType = elAuthType.value;
     if (authType === '2' || authType === '5') {
       document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
-      document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
+      document.querySelector('.js-ldap-group-toggle')!.addEventListener('change', onEnableLdapGroupsChange);
       onEnableLdapGroupsChange();
       if (authType === '2') {
         document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
@@ -227,10 +228,10 @@ function initAdminAuthentication() {
     }
   }
 
-  const elAuthName = document.querySelector<HTMLInputElement>('#auth_name');
+  const elAuthName = document.querySelector<HTMLInputElement>('#auth_name')!;
   const onAuthNameChange = function () {
     // appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
-    document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(elAuthName.value)}/callback`;
+    document.querySelector('#oauth2-callback-url')!.textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${pathEscape(elAuthName.value)}/callback`;
   };
   elAuthName.addEventListener('input', onAuthNameChange);
   onAuthNameChange();
@@ -240,13 +241,13 @@ function initAdminNotice() {
   const pageContent = document.querySelector('.page-content.admin.notice');
   if (!pageContent) return;
 
-  const detailModal = document.querySelector<HTMLDivElement>('#detail-modal');
+  const detailModal = document.querySelector<HTMLDivElement>('#detail-modal')!;
 
   // Attach view detail modals
   queryElems(pageContent, '.view-detail', (el) => el.addEventListener('click', (e) => {
     e.preventDefault();
-    const elNoticeDesc = el.closest('tr').querySelector('.notice-description');
-    const elModalDesc = detailModal.querySelector('.content pre');
+    const elNoticeDesc = el.closest('tr')!.querySelector('.notice-description')!;
+    const elModalDesc = detailModal.querySelector('.content pre')!;
     elModalDesc.textContent = elNoticeDesc.textContent;
     fomanticQuery(detailModal).modal('show');
   }));
@@ -280,10 +281,10 @@ function initAdminNotice() {
     const data = new FormData();
     for (const checkbox of checkboxes) {
       if (checkbox.checked) {
-        data.append('ids[]', checkbox.closest('.ui.checkbox').getAttribute('data-id'));
+        data.append('ids[]', checkbox.closest('.ui.checkbox')!.getAttribute('data-id')!);
       }
     }
-    await POST(this.getAttribute('data-link'), {data});
-    window.location.href = this.getAttribute('data-redirect');
+    await POST(this.getAttribute('data-link')!, {data});
+    window.location.href = this.getAttribute('data-redirect')!;
   });
 }

package/gitea/source/web_src/js/features/admin/config.test.ts

@@ -0,0 +1,48 @@
+import {ConfigFormValueMapper} from './config.ts';
+
+test('ConfigFormValueMapper', () => {
+  document.body.innerHTML = `
+<form>
+    <input id="checkbox-unrelated" type="checkbox" value="v-unrelated" checked>
+
+    <!-- top-level key -->
+    <input name="k1" type="checkbox" value="v-key-only" data-config-dyn-key="k1" data-config-value-json="true" data-config-value-type="boolean">
+
+    <input type="hidden" data-config-dyn-key="k2" data-config-value-json='"k2-val"'>
+    <input name="k2">
+
+    <textarea name="repository.open-with.editor-apps"> a = b\n</textarea>
+
+    <input name="k-flipped-true" type="checkbox" data-config-value-type="flipped">
+    <input name="k-flipped-false" type="checkbox" checked data-config-value-type="flipped">
+
+    <!-- sub key -->
+    <input type="hidden" data-config-dyn-key="struct" data-config-value-json='{"SubBoolean": true, "SubTimestamp": 123456789, "OtherKey": "other-value"}'>
+    <input name="struct.SubBoolean" type="checkbox" data-config-value-type="boolean">
+    <input name="struct.SubTimestamp" type="datetime-local" data-config-value-type="timestamp">
+    <textarea name="struct.NewKey">new-value</textarea>
+</form>
+`;
+
+  const form = document.querySelector('form')!;
+  const mapper = new ConfigFormValueMapper(form);
+  mapper.fillFromSystemConfig();
+  const formData = mapper.collectToFormData();
+  const result: Record<string, string> = {};
+  const keys = [], values = [];
+  for (const [key, value] of formData.entries()) {
+    if (key === 'key') keys.push(value as string);
+    if (key === 'value') values.push(value as string);
+  }
+  for (let i = 0; i < keys.length; i++) {
+    result[keys[i]] = values[i];
+  }
+  expect(result).toEqual({
+    'k1': 'true',
+    'k2': '"k2-val"',
+    'k-flipped-false': 'false',
+    'k-flipped-true': 'true',
+    'repository.open-with.editor-apps': '[{"DisplayName":"a","OpenURL":"b"}]', // TODO: OPEN-WITH-EDITOR-APP-JSON: it must match backend
+    'struct': '{"SubBoolean":true,"SubTimestamp":123456780,"OtherKey":"other-value","NewKey":"new-value"}',
+  });
+});

package/gitea/source/web_src/js/features/admin/config.ts

@@ -1,24 +1,221 @@
 import {showTemporaryTooltip} from '../../modules/tippy.ts';
 import {POST} from '../../modules/fetch.ts';
+import {registerGlobalInitFunc} from '../../modules/observer.ts';
+import {queryElems} from '../../utils/dom.ts';
+import {submitFormFetchAction} from '../common-fetch-action.ts';
 
 const {appSubUrl} = window.config;
 
-export function initAdminConfigs(): void {
-  const elAdminConfig = document.querySelector<HTMLDivElement>('.page-content.admin.config');
-  if (!elAdminConfig) return;
+function collectCheckboxBooleanValue(el: HTMLInputElement): boolean {
+  const valType = el.getAttribute('data-config-value-type') as ConfigValueType;
+  if (valType === 'boolean') return el.checked;
+  if (valType === 'flipped') return !el.checked;
+  requireExplicitValueType(el);
+}
 
-  for (const el of elAdminConfig.querySelectorAll<HTMLInputElement>('input[type="checkbox"][data-config-dyn-key]')) {
-    el.addEventListener('change', async () => {
+function initSystemConfigAutoCheckbox(el: HTMLInputElement) {
+  el.addEventListener('change', async () => {
+    // if the checkbox is inside a form, we assume it's handled by the form submit and do not send an individual request
+    if (el.closest('form')) return;
+    try {
+      const data = new URLSearchParams({
+        key: el.getAttribute('data-config-dyn-key')!,
+        value: String(collectCheckboxBooleanValue(el)),
+      });
+      const resp = await POST(`${appSubUrl}/-/admin/config`, {data});
+      const json: Record<string, any> = await resp.json();
+      if (json.errorMessage) throw new Error(json.errorMessage);
+    } catch (ex) {
+      showTemporaryTooltip(el, ex.toString());
+      el.checked = !el.checked;
+    }
+  });
+}
+
+type GeneralFormFieldElement = HTMLInputElement;
+
+function unsupportedElement(el: Element): never {
+  // HINT: for future developers: if you need to handle a config that cannot be directly mapped to a form element, you should either:
+  // * Add a "hidden" input to store the value (not configurable)
+  // * Design a new "component" to handle the config
+  throw new Error(`Unsupported config form value mapping for ${el.nodeName} (name=${(el as HTMLInputElement).name},type=${(el as HTMLInputElement).type}), please add more and design carefully`);
+}
+
+function requireExplicitValueType(el: Element): never {
+  throw new Error(`Unsupported config form value type for ${el.nodeName} (name=${(el as HTMLInputElement).name},type=${(el as HTMLInputElement).type}), please add explicit value type with "data-config-value-type" attribute`);
+}
+
+// try to extract the subKey for the config value from the element name
+// * return '' if the element name exactly matches the config key, which means the value is directly stored in the element
+// * return null if the config key not match
+function extractElemConfigSubKey(el: GeneralFormFieldElement, dynKey: string): string | null {
+  if (el.name === dynKey) return '';
+  if (el.name.startsWith(`${dynKey}.`)) return el.name.slice(dynKey.length + 1); // +1 for the dot
+  return null;
+}
+
+// Due to the different design between HTML form elements and the JSON struct of the config values, we need to explicitly define some types.
+// * checkbox can be used for boolean value, it can also be used for multiple values (array)
+type ConfigValueType = 'boolean' | 'flipped' | 'string' | 'number' | 'timestamp'; // TODO: support more types like array, not used at the moment.
+
+function toDatetimeLocalValue(unixSeconds: number) {
+  const d = new Date(unixSeconds * 1000);
+  return new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
+}
+
+export class ConfigFormValueMapper {
+  form: HTMLFormElement;
+  presetJsonValues: Record<string, any> = {};
+  presetValueTypes: Record<string, ConfigValueType> = {};
+
+  constructor(form: HTMLFormElement) {
+    this.form = form;
+    for (const el of queryElems<HTMLInputElement>(form, '[data-config-value-json]')) {
+      const dynKey = el.getAttribute('data-config-dyn-key')!;
+      const jsonStr = el.getAttribute('data-config-value-json');
       try {
-        const resp = await POST(`${appSubUrl}/-/admin/config`, {
-          data: new URLSearchParams({key: el.getAttribute('data-config-dyn-key'), value: String(el.checked)}),
-        });
-        const json: Record<string, any> = await resp.json();
-        if (json.errorMessage) throw new Error(json.errorMessage);
-      } catch (ex) {
-        showTemporaryTooltip(el, ex.toString());
-        el.checked = !el.checked;
+        this.presetJsonValues[dynKey] = JSON.parse(jsonStr || '{}'); // empty string also is valid, default to an empty object
+      } catch (error) {
+        this.presetJsonValues[dynKey] = {}; // in case the value in database is corrupted, don't break the whole form
+        console.error(`Error parsing JSON for config ${dynKey}:`, error);
       }
-    });
+    }
+    for (const el of queryElems<HTMLInputElement>(form, '[data-config-value-type]')) {
+      const valKey = el.getAttribute('data-config-dyn-key') || el.name;
+      this.presetValueTypes[valKey] = el.getAttribute('data-config-value-type')! as ConfigValueType;
+    }
+  }
+
+  // try to assign the config value to the form element, return true if assigned successfully,
+  // otherwise return false (e.g. the element is not related to the config key)
+  assignConfigValueToFormElement(el: GeneralFormFieldElement, dynKey: string, cfgVal: any) {
+    const subKey = extractElemConfigSubKey(el, dynKey);
+    if (subKey === null) return false; // if not match, skip
+
+    const val = subKey ? cfgVal![subKey] : cfgVal;
+    if (val === null) return true; // if name matches, but no value to assign, also succeed because the form element does exist
+    const valType = this.presetValueTypes[el.name];
+    if (el.matches('[type="checkbox"]')) {
+      if (valType !== 'boolean') requireExplicitValueType(el);
+      el.checked = Boolean(val ?? el.checked);
+    } else if (el.matches('[type="datetime-local"]')) {
+      if (valType !== 'timestamp') requireExplicitValueType(el);
+      if (val) el.value = toDatetimeLocalValue(val);
+    } else if (el.matches('textarea')) {
+      el.value = String(val ?? el.value);
+    } else if (el.matches('input') && (el.getAttribute('type') ?? 'text') === 'text') {
+      el.value = String(val ?? el.value);
+    } else {
+      unsupportedElement(el);
+    }
+    return true;
+  }
+
+  collectConfigValueFromElement(el: GeneralFormFieldElement) {
+    let val: any;
+    const valType = this.presetValueTypes[el.name];
+    if (el.matches('[type="checkbox"]')) {
+      // TODO: if it needs to support array values in the future,
+      //  it needs to iterate the "namedElems" to find all the checkboxes with the same name and collect values accordingly,
+      //  and set the namedElems[matchedIdx] to null to avoid duplicate processing.
+      val = collectCheckboxBooleanValue(el);
+    } else if (el.matches('[type="datetime-local"]')) {
+      if (valType !== 'timestamp') requireExplicitValueType(el);
+      val = Math.floor(new Date(el.value).getTime() / 1000) ?? 0; // NaN is fine to JSON.stringify, it becomes null.
+    } else if (el.matches('textarea')) {
+      val = el.value;
+    } else if (el.matches('input') && (el.getAttribute('type') ?? 'text') === 'text') {
+      val = el.value;
+    } else {
+      unsupportedElement(el);
+    }
+    return val;
+  }
+
+  collectConfigSubValues(namedElems: Array<GeneralFormFieldElement | null>, dynKey: string, cfgVal: Record<string, any>) {
+    for (let idx = 0; idx < namedElems.length; idx++) {
+      const el = namedElems[idx];
+      if (!el) continue;
+      const subKey = extractElemConfigSubKey(el, dynKey);
+      if (!subKey) continue; // if not match, skip
+      cfgVal[subKey] = this.collectConfigValueFromElement(el);
+      namedElems[idx] = null;
+    }
+  }
+
+  fillFromSystemConfig() {
+    for (const [dynKey, cfgVal] of Object.entries(this.presetJsonValues)) {
+      const elems = this.form.querySelectorAll<GeneralFormFieldElement>(`[name^="${CSS.escape(dynKey)}"]`);
+      let assigned = false;
+      for (const el of elems) {
+        if (this.assignConfigValueToFormElement(el, dynKey, cfgVal)) {
+          assigned = true;
+        }
+      }
+      if (!assigned) throw new Error(`Could not find form element for config ${dynKey}, please check the form design and json struct`);
+    }
+  }
+
+  // TODO: OPEN-WITH-EDITOR-APP-JSON: need to use the same logic as backend
+  marshalConfigValueOpenWithEditorApps(cfgVal: string): string {
+    const apps: Array<{DisplayName: string, OpenURL: string}> = [];
+    const lines = cfgVal.split('\n');
+    for (const line of lines) {
+      let [displayName, openUrl] = line.split('=', 2);
+      displayName = displayName.trim();
+      openUrl = openUrl?.trim() ?? '';
+      if (!displayName || !openUrl) continue;
+      apps.push({DisplayName: displayName, OpenURL: openUrl});
+    }
+    return JSON.stringify(apps);
+  }
+
+  marshalConfigValue(dynKey: string, cfgVal: any): string {
+    if (dynKey === 'repository.open-with.editor-apps') return this.marshalConfigValueOpenWithEditorApps(cfgVal);
+    return JSON.stringify(cfgVal);
+  }
+
+  collectToFormData(): FormData {
+    const namedElems: Array<GeneralFormFieldElement | null> = [];
+    queryElems(this.form, '[name]', (el) => namedElems.push(el as GeneralFormFieldElement));
+
+    // first, process the config options with sub values, for example:
+    // merge "foo.bar.Enabled", "foo.bar.Message" to "foo.bar"
+    const formData = new FormData();
+    for (const [dynKey, cfgVal] of Object.entries(this.presetJsonValues)) {
+      this.collectConfigSubValues(namedElems, dynKey, cfgVal);
+      formData.append('key', dynKey);
+      formData.append('value', this.marshalConfigValue(dynKey, cfgVal));
+    }
+
+    // now, the namedElems should only contain the config options without sub values,
+    // directly store the value in formData with key as the element name, for example:
+    // "foo.enabled" => "true"
+    for (const el of namedElems) {
+      if (!el) continue;
+      const dynKey = el.name;
+      const newVal = this.collectConfigValueFromElement(el);
+      formData.append('key', dynKey);
+      formData.append('value', this.marshalConfigValue(dynKey, newVal));
+    }
+    return formData;
   }
 }
+
+function initSystemConfigForm(form: HTMLFormElement) {
+  const formMapper = new ConfigFormValueMapper(form);
+  formMapper.fillFromSystemConfig();
+  form.addEventListener('submit', async (e) => {
+    if (!form.reportValidity()) return;
+    e.preventDefault();
+    const formData = formMapper.collectToFormData();
+    await submitFormFetchAction(form, {formData});
+  });
+}
+
+export function initAdminConfigs(): void {
+  registerGlobalInitFunc('initAdminConfigSettings', (el) => {
+    queryElems(el, 'input[type="checkbox"][data-config-dyn-key]', initSystemConfigAutoCheckbox);
+    queryElems(el, 'form.system-config-form', initSystemConfigForm);
+  });
+}

package/gitea/source/web_src/js/features/admin/selfcheck.ts

@@ -7,7 +7,7 @@ export async function initAdminSelfCheck() {
   const elCheckByFrontend = document.querySelector('#self-check-by-frontend');
   if (!elCheckByFrontend) return;
 
-  const elContent = document.querySelector<HTMLDivElement>('.page-content.admin .admin-setting-content');
+  const elContent = document.querySelector<HTMLDivElement>('.page-content.admin .admin-setting-content')!;
 
   // send frontend self-check request
   const resp = await POST(`${appSubUrl}/-/admin/self_check`, {
@@ -27,5 +27,5 @@ export async function initAdminSelfCheck() {
 
   // only show the "no problem" if there is no visible "self-check-problem"
   const hasProblem = Boolean(elContent.querySelectorAll('.self-check-problem:not(.tw-hidden)').length);
-  toggleElem(elContent.querySelector('.self-check-no-problem'), !hasProblem);
+  toggleElem(elContent.querySelector('.self-check-no-problem')!, !hasProblem);
 }