Fix gitea-origin-url with default ports

When setting `url.host` on a URL object with no port specified, the
resulting URL's protocol will not change. Workaround this quirk in the
URL standard by explicitely setting port for the http and https
protocols.

Extracted the logic to a function for the purpose of testing it.
Initially I wanted to have the function in utils.js, but it turns out
esbuild can not treeshake the unused functions which would result in the
webcomponents chunk having all of utils.js inlined.

Fixes: #29084

Author: silverwind

.eslintrc.yaml

@@ -811,7 +811,7 @@ rules:
   wc/no-constructor-params: [2]
   wc/no-constructor: [2]
   wc/no-customized-built-in-elements: [2]
-  wc/no-exports-with-element: [2]
+  wc/no-exports-with-element: [0]
   wc/no-invalid-element-name: [2]
   wc/no-invalid-extends: [2]
   wc/no-method-prefixed-with-on: [2]

web_src/js/webcomponents/GiteaOriginUrl.js

@@ -1,17 +1,21 @@
 // Convert an absolute or relative URL to an absolute URL with the current origin
+export function toOriginUrl(urlStr) {
+  try {
+    // only process absolute HTTP/HTTPS URL or relative URLs ('/xxx' or '//host/xxx')
+    if (urlStr.startsWith('http://') || urlStr.startsWith('https://') || urlStr.startsWith('/')) {
+      const url = new URL(urlStr, window.origin);
+      const {protocol, hostname, port} = window.location;
+      url.protocol = protocol;
+      url.hostname = hostname;
+      url.port = port || (protocol === 'https:' ? '443' : '80');
+      return url.toString();
+    }
+  } catch {}
+  return urlStr;
+}
+
 window.customElements.define('gitea-origin-url', class extends HTMLElement {
   connectedCallback() {
-    const urlStr = this.getAttribute('data-url');
-    try {
-      // only process absolute HTTP/HTTPS URL or relative URLs ('/xxx' or '//host/xxx')
-      if (urlStr.startsWith('http://') || urlStr.startsWith('https://') || urlStr.startsWith('/')) {
-        const url = new URL(urlStr, window.origin);
-        url.protocol = window.location.protocol;
-        url.host = window.location.host;
-        this.textContent = url.toString();
-        return;
-      }
-    } catch {}
-    this.textContent = urlStr;
+    this.textContent = toOriginUrl(this.getAttribute('data-url'));
   }
 });

web_src/js/webcomponents/GiteaOriginUrl.test.js

@@ -0,0 +1,17 @@
+import {toOriginUrl} from './GiteaOriginUrl.js';
+
+test('toOriginUrl', () => {
+  const oldLocation = window.location;
+  for (const origin of ['https://example.com', 'https://example.com:3000']) {
+    window.location = new URL(`${origin}/`);
+    expect(toOriginUrl('/')).toEqual(`${origin}/`);
+    expect(toOriginUrl('/org/repo.git')).toEqual(`${origin}/org/repo.git`);
+    expect(toOriginUrl('https://another.com')).toEqual(`${origin}/`);
+    expect(toOriginUrl('https://another.com/')).toEqual(`${origin}/`);
+    expect(toOriginUrl('https://another.com/org/repo.git')).toEqual(`${origin}/org/repo.git`);
+    expect(toOriginUrl('https://another.com:4000')).toEqual(`${origin}/`);
+    expect(toOriginUrl('https://another.com:4000/')).toEqual(`${origin}/`);
+    expect(toOriginUrl('https://another.com:4000/org/repo.git')).toEqual(`${origin}/org/repo.git`);
+  }
+  window.location = oldLocation;
+});