Consolidate clone button templates (#14023)

The four clone button templates are pretty much identical except the one
in a non-empty repo had a few features which the others lacked.

Consolidate them in a single shared template which also makes the JS
that remembers protocol work on them all.

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

5 files changed, 40 insertions, 95 deletions

diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl
new file mode 100644
index 0000000000..92195283ca
--- /dev/null
+++ b/templates/repo/clone_buttons.tmpl
@@ -0,0 +1,35 @@
+{{if not $.DisableHTTP}}
+	<button class="ui basic clone button no-transition" id="repo-clone-https" data-link="{{.CloneLink.HTTPS}}">
+		{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
+	</button>
+{{end}}
+{{if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
+	<button class="ui basic clone button no-transition" id="repo-clone-ssh" data-link="{{.CloneLink.SSH}}">
+		SSH
+	</button>
+{{end}}
+{{if not $.DisableHTTP}}
+	<input id="repo-clone-url" value="{{$.CloneLink.HTTPS}}" readonly>
+{{else if and (not .DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
+	<input id="repo-clone-url" value="{{$.CloneLink.SSH}}" readonly>
+{{end}}
+{{if or (not $.DisableHTTP) (and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH))}}
+	<button class="ui basic icon button poping up clipboard" id="clipboard-btn" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url">
+		{{svg "octicon-clippy"}}
+	</button>
+{{end}}
+{{if not (and $.DisableHTTP $.DisableSSH)}}
+	<script defer>
+		const isSSH = localStorage.getItem('repo-clone-protocol') === 'ssh';
+		const sshButton = document.getElementById('repo-clone-ssh');
+		const httpsButton = document.getElementById('repo-clone-https');
+		const input = document.getElementById('repo-clone-url');
+		if (input) input.value = (isSSH ? sshButton : httpsButton).dataset.link;
+		if (sshButton) sshButton.classList[isSSH ? 'add' : 'remove']('primary');
+		if (httpsButton) httpsButton.classList[isSSH ? 'remove' : 'add']('primary');
+		setTimeout(() => {
+			if (sshButton) sshButton.classList.remove('no-transition');
+			if (httpsButton) httpsButton.classList.remove('no-transition');
+		}, 100);
+	</script>
+{{end}}
diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl
index b5a39d0a9b..7dae7c0121 100644
--- a/templates/repo/empty.tmpl
+++ b/templates/repo/empty.tmpl
@@ -18,26 +18,7 @@
 						<div class="item">
 							<h3>{{.i18n.Tr "repo.clone_this_repo"}} <small>{{.i18n.Tr "repo.clone_helper" "http://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository" | Str2html}}</small></h3>
 							<div class="ui action small input">
-								{{if not $.DisableHTTP}}
-									<button class="ui basic clone button" id="repo-clone-https" data-link="{{.CloneLink.HTTPS}}">
-										{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
-									</button>
-								{{end}}
-								{{if not $.DisableSSH}}
-									<button class="ui basic clone button" id="repo-clone-ssh" data-link="{{.CloneLink.SSH}}">
-										SSH
-									</button>
-								{{end}}
-								{{if not $.DisableHTTP}}
-									<input id="repo-clone-url" value="{{$.CloneLink.HTTPS}}" readonly>
-								{{else}}
-									<input id="repo-clone-url" value="{{$.CloneLink.SSH}}" readonly>
-								{{end}}
-								{{if not (and $.DisableHTTP $.DisableSSH)}}
-									<button class="ui basic button poping up clipboard" id="clipboard-btn" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url">
-										{{svg "octicon-clippy"}}
-									</button>
-								{{end}}
+								{{template "repo/clone_buttons" .}}
 							</div>
 						</div>
 
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 80187a2fbf..4d8d289211 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -106,43 +106,10 @@
 				{{end}}
 			</div>
 			<div class="fitted item">
-
 				<!-- Only show clone panel in repository home page -->
 				{{if eq $n 0}}
 					<div class="ui action tiny input" id="clone-panel">
-						{{if not $.DisableHTTP}}
-							<button class="ui basic clone button no-transition" id="repo-clone-https" data-link="{{.CloneLink.HTTPS}}">
-								{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
-							</button>
-						{{end}}
-						{{if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
-							<button class="ui basic clone button no-transition" id="repo-clone-ssh" data-link="{{.CloneLink.SSH}}">
-								SSH
-							</button>
-						{{end}}
-						{{if not $.DisableHTTP}}
-							<input id="repo-clone-url" value="{{$.CloneLink.HTTPS}}" readonly>
-						{{else if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
-							<input id="repo-clone-url" value="{{$.CloneLink.SSH}}" readonly>
-						{{end}}
-						<script defer>
-							const isSSH = localStorage.getItem('repo-clone-protocol') === 'ssh';
-							const sshButton = document.getElementById('repo-clone-ssh');
-							const httpsButton = document.getElementById('repo-clone-https');
-							const input = document.getElementById('repo-clone-url');
-							if (input) input.value = (isSSH ? sshButton : httpsButton).dataset.link;
-							if (sshButton) sshButton.classList[isSSH ? 'add' : 'remove']('primary');
-							if (httpsButton) httpsButton.classList[isSSH ? 'remove' : 'add']('primary');
-							setTimeout(() => {
-								if (sshButton) sshButton.classList.remove('no-transition');
-								if (httpsButton) httpsButton.classList.remove('no-transition');
-							}, 100);
-						</script>
-						{{if or (not $.DisableHTTP) (and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH))}}
-							<button class="ui basic icon button poping up clipboard" id="clipboard-btn" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url">
-								{{svg "octicon-clippy"}}
-							</button>
-						{{end}}
+						{{template "repo/clone_buttons" .}}
 						<div class="ui basic jump dropdown icon button poping up" data-content="{{.i18n.Tr "repo.download_archive"}}" data-variation="tiny inverted" data-position="top right">
 							{{svg "octicon-download"}}
 							<div class="menu">
diff --git a/templates/repo/wiki/revision.tmpl b/templates/repo/wiki/revision.tmpl
index cd1adfb547..9838b2c11c 100644
--- a/templates/repo/wiki/revision.tmpl
+++ b/templates/repo/wiki/revision.tmpl
@@ -4,28 +4,9 @@
 	{{ $title := .title}}
 	<div class="ui container">
 		<div class="ui stackable grid">
-			<div class="ui eight wide column text right">
+			<div class="ui eight wide column text right df ac je">
 				<div class="ui action small input" id="clone-panel">
-					{{if not $.DisableHTTP}}
-						<button class="ui basic clone button" id="repo-clone-https" data-link="{{.WikiCloneLink.HTTPS}}">
-							{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
-						</button>
-					{{end}}
-					{{if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
-						<button class="ui basic clone button" id="repo-clone-ssh" data-link="{{.WikiCloneLink.SSH}}">
-							SSH
-						</button>
-					{{end}}
-					{{if not $.DisableHTTP}}
-						<input id="repo-clone-url" value="{{$.WikiCloneLink.HTTPS}}" readonly>
-					{{else if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
-						<input id="repo-clone-url" value="{{$.WikiCloneLink.SSH}}" readonly>
-					{{end}}
-					{{if or (not $.DisableHTTP) (and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH))}}
-						<button class="ui basic icon button poping up clipboard" id="clipboard-btn" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url">
-							{{svg "octicon-clippy"}}
-						</button>
-					{{end}}
+					{{template "repo/clone_buttons" .}}
 				</div>
 			</div>
 			<div class="ui header eight wide column">
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index 255fe52503..afd7096377 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -30,26 +30,7 @@
 			</div>
 			<div class="right fitted item">
 				<div class="ui action small input" id="clone-panel">
-					{{if not $.DisableHTTP}}
-						<button class="ui basic clone button" id="repo-clone-https" data-link="{{.WikiCloneLink.HTTPS}}">
-							{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
-						</button>
-					{{end}}
-					{{if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
-						<button class="ui basic clone button" id="repo-clone-ssh" data-link="{{.WikiCloneLink.SSH}}">
-							SSH
-						</button>
-					{{end}}
-					{{if not $.DisableHTTP}}
-						<input id="repo-clone-url" value="{{$.WikiCloneLink.HTTPS}}" readonly>
-					{{else if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
-						<input id="repo-clone-url" value="{{$.WikiCloneLink.SSH}}" readonly>
-					{{end}}
-					{{if or (not $.DisableHTTP) (and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH))}}
-						<button class="ui basic icon button poping up clipboard" id="clipboard-btn" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url">
-							{{svg "octicon-clippy"}}
-						</button>
-					{{end}}
+					{{template "repo/clone_buttons" .}}
 				</div>
 			</div>
 		</div>