[JS BUG] repo page shows incorrect clone url under different domain names

[darkclip]

Description

I deployed gitea instance in a vm that can be accessed from both inside and outside networks.
So, I have different domain names and different ports under different network env.
In gitea config file, i set the ROOR_URL to one domain name with a port append to it, visit the other domain using standard port.
for example: ROOR_URL = https://git.aaa.com:8443/ and visit https://git.bbb.com/
however, the clone button's HTTPS url shows: https://git.bbb.com:8443/owner/repo.git

I search through source code of gitea, found that inside
templates/repo/clone_script.tmp and web_src/js/webcomponents/GiteaOriginUrl.js
have the following to replace the app URL with the visiting protocol and host:

const url = new URL(link);
url.protocol = window.location.protocol;
url.host = window.location.host;
link = url.toString();

however, that doesn't set the url.port attribute, resulting incorrect clone URL.

Gitea Version

1.21.5

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

docker

Database

None

[silverwind]

Hmm yes this looks like a edge case with empty port where it's not being set.

> const url = new URL("https://git.aaa.com:8443/owner/repo.git", "https://git.bbb.com")
undefined
> url.host = "git.bbb.com"; url.toString()
'https://git.bbb.com:8443/owner/repo.git'
> url.host = "git.bbb.com:443"; url.toString()
'https://git.bbb.com/owner/repo.git'

[github-actions]

Automatically locked because of our CONTRIBUTING guidelines