feat(vault): add confirmation modals for destructive operations

Replaced inline confirm() dialogs with proper modal dialogs for key migration, DEK rotation, token revocation, and version rollback operations. Improves UX and provides better context for destructive actions.

locale/locale_en-US.json

@@ -205,5 +205,6 @@
   "vault.current_key_source": "Current key source",
   "vault.one_click_migration": "One-Click Migration",
   "vault.manual_migration": "Manual Migration",
-  "vault.manual_migration_description": "If your secrets were encrypted with a different key (not the fallback), enter it manually below."
+  "vault.manual_migration_description": "If your secrets were encrypted with a different key (not the fallback), enter it manually below.",
+  "vault.confirm_migrate_fallback": "This will migrate all vault secrets from the fallback key (Gitea SECRET_KEY) to your dedicated MASTER_KEY. This operation cannot be undone. Continue?"
 }

templates/repo/vault/key_migrate.tmpl

@@ -45,7 +45,7 @@
 		<div class="ui info message">
 			<p>{{ctx.Locale.Tr "vault.migrate_from_fallback_description"}}</p>
 		</div>
-		<form class="ui form" action="{{.RepoLink}}/vault/migrate-from-fallback" method="post">
+		<form class="ui form" id="migrate-fallback-form" action="{{.RepoLink}}/vault/migrate-from-fallback" method="post">
 			{{.CsrfTokenHtml}}
 			<div class="field">
 				<select name="scope" class="ui dropdown">
@@ -55,7 +55,7 @@
 					{{end}}
 				</select>
 			</div>
-			<button class="ui primary button" type="submit" onclick="return confirm('{{ctx.Locale.Tr "vault.confirm_migrate"}}');">
+			<button class="ui primary button show-modal" data-modal="#migrate-fallback-modal" type="button">
 				{{svg "octicon-sync" 16}} {{ctx.Locale.Tr "vault.migrate_from_fallback_button"}}
 			</button>
 		</form>
@@ -86,7 +86,7 @@
 		<div class="ui divider"></div>
 		{{end}}
 
-		<form class="ui form" action="{{.RepoLink}}/vault/migrate-key" method="post">
+		<form class="ui form" id="migrate-manual-form" action="{{.RepoLink}}/vault/migrate-key" method="post">
 			{{.CsrfTokenHtml}}
 			<div class="required field">
 				<label>{{ctx.Locale.Tr "vault.old_master_key"}}</label>
@@ -103,7 +103,7 @@
 				</select>
 				<p class="help">{{ctx.Locale.Tr "vault.migration_scope_help"}}</p>
 			</div>
-			<button class="ui {{if .HasDedicatedMasterKey}}{{else}}primary {{end}}button" type="submit" onclick="return confirm('{{ctx.Locale.Tr "vault.confirm_migrate"}}');">
+			<button class="ui {{if .HasDedicatedMasterKey}}{{else}}primary {{end}}button show-modal" data-modal="#migrate-manual-modal" type="button">
 				{{svg "octicon-sync" 16}} {{ctx.Locale.Tr "vault.start_migration"}}
 			</button>
 			<a class="ui button" href="{{.RepoLink}}/vault">
@@ -119,9 +119,9 @@
 		</h5>
 		<p>{{ctx.Locale.Tr "vault.dek_rotation_description"}}</p>
 		{{if .IsEnterprise}}
-		<form class="ui form" action="{{.RepoLink}}/vault/rotate-key" method="post">
+		<form class="ui form" id="rotate-dek-form" action="{{.RepoLink}}/vault/rotate-key" method="post">
 			{{.CsrfTokenHtml}}
-			<button class="ui button" type="submit" onclick="return confirm('{{ctx.Locale.Tr "vault.confirm_rotate"}}');">
+			<button class="ui button show-modal" data-modal="#rotate-dek-modal" type="button">
 				{{svg "octicon-sync" 16}} {{ctx.Locale.Tr "vault.rotate_dek"}}
 			</button>
 		</form>
@@ -132,4 +132,42 @@
 		{{end}}
 	</div>
 	{{end}}
+
+{{if .HasDedicatedMasterKey}}
+<div class="ui small modal" id="migrate-fallback-modal">
+	<div class="header">{{svg "octicon-sync"}} {{ctx.Locale.Tr "vault.migrate_from_fallback"}}</div>
+	<div class="content">
+		<p>{{ctx.Locale.Tr "vault.confirm_migrate_fallback"}}</p>
+	</div>
+	<div class="actions">
+		<button class="ui cancel button">{{ctx.Locale.Tr "cancel"}}</button>
+		<button class="ui primary button" onclick="document.getElementById('migrate-fallback-form').submit();">{{ctx.Locale.Tr "vault.start_migration"}}</button>
+	</div>
+</div>
+{{end}}
+
+<div class="ui small modal" id="migrate-manual-modal">
+	<div class="header">{{svg "octicon-key"}} {{ctx.Locale.Tr "vault.manual_migration"}}</div>
+	<div class="content">
+		<p>{{ctx.Locale.Tr "vault.confirm_migrate"}}</p>
+	</div>
+	<div class="actions">
+		<button class="ui cancel button">{{ctx.Locale.Tr "cancel"}}</button>
+		<button class="ui primary button" onclick="document.getElementById('migrate-manual-form').submit();">{{ctx.Locale.Tr "vault.start_migration"}}</button>
+	</div>
+</div>
+
+{{if and .IsRepoAdmin .IsEnterprise}}
+<div class="ui small modal" id="rotate-dek-modal">
+	<div class="header">{{svg "octicon-sync"}} {{ctx.Locale.Tr "vault.dek_rotation_title"}}</div>
+	<div class="content">
+		<p>{{ctx.Locale.Tr "vault.confirm_rotate"}}</p>
+	</div>
+	<div class="actions">
+		<button class="ui cancel button">{{ctx.Locale.Tr "cancel"}}</button>
+		<button class="ui primary button" onclick="document.getElementById('rotate-dek-form').submit();">{{ctx.Locale.Tr "vault.rotate_dek"}}</button>
+	</div>
+</div>
+{{end}}
+
 {{template "repo/vault/layout_footer" .}}

templates/repo/vault/tokens.tmpl

@@ -119,9 +119,9 @@
 					<td>{{.UsedCount}}</td>
 					<td class="right aligned">
 						{{if not .IsRevoked}}
-						<form class="ui inline" action="{{$.RepoLink}}/vault/tokens/{{.ID}}/revoke" method="post">
+						<form class="ui inline" id="revoke-form-{{.ID}}" action="{{$.RepoLink}}/vault/tokens/{{.ID}}/revoke" method="post">
 							{{$.CsrfTokenHtml}}
-							<button class="ui tiny red button" type="submit" onclick="return confirm('{{ctx.Locale.Tr "vault.confirm_revoke_token"}}');">
+							<button class="ui tiny red button show-modal" type="button" data-modal="#revoke-token-modal" data-token-id="{{.ID}}">
 								{{svg "octicon-x" 14}} {{ctx.Locale.Tr "vault.revoke"}}
 							</button>
 						</form>
@@ -142,6 +142,17 @@
 		{{end}}
 	</div>
 
+<div class="ui small modal" id="revoke-token-modal">
+	<div class="header">{{svg "octicon-x"}} {{ctx.Locale.Tr "vault.revoke"}}</div>
+	<div class="content">
+		<p>{{ctx.Locale.Tr "vault.confirm_revoke_token"}}</p>
+	</div>
+	<div class="actions">
+		<button class="ui cancel button">{{ctx.Locale.Tr "cancel"}}</button>
+		<button class="ui red button" id="revoke-confirm">{{ctx.Locale.Tr "vault.revoke"}}</button>
+	</div>
+</div>
+
 <script>
 document.getElementById('new-token-btn')?.addEventListener('click', function() {
 	document.getElementById('new-token-form').style.display = 'block';
@@ -157,5 +168,20 @@ document.getElementById('copy-token')?.addEventListener('click', function() {
 	const input = document.getElementById('new-token-value');
 	navigator.clipboard.writeText(input.value);
 });
+
+// Revoke token modal
+(function() {
+	let currentTokenId = null;
+	document.querySelectorAll('[data-modal="#revoke-token-modal"]').forEach(btn => {
+		btn.addEventListener('click', function() {
+			currentTokenId = this.getAttribute('data-token-id');
+		});
+	});
+	document.getElementById('revoke-confirm')?.addEventListener('click', function() {
+		if (currentTokenId) {
+			document.getElementById('revoke-form-' + currentTokenId).submit();
+		}
+	});
+})();
 </script>
 {{template "repo/vault/layout_footer" .}}

templates/repo/vault/versions.tmpl

@@ -52,10 +52,10 @@
 								{{svg "octicon-diff" 14}} {{ctx.Locale.Tr "vault.compare"}}
 							</a>
 							{{if and $.CanWrite (ne .Version $.Secret.CurrentVersion)}}
-							<form class="ui inline tw-inline" action="{{$.RepoLink}}/vault/secrets/{{$.Secret.Name}}/rollback" method="post">
+							<form class="ui inline tw-inline" id="rollback-form-{{.Version}}" action="{{$.RepoLink}}/vault/secrets/{{$.Secret.Name}}/rollback" method="post">
 								{{$.CsrfTokenHtml}}
 								<input type="hidden" name="version" value="{{.Version}}">
-								<button class="ui button" type="submit" onclick="return confirm('{{ctx.Locale.Tr "vault.confirm_rollback" .Version}}');">
+								<button class="ui button show-modal" type="button" data-modal="#rollback-modal" data-version="{{.Version}}">
 									{{svg "octicon-history" 14}} {{ctx.Locale.Tr "vault.rollback"}}
 								</button>
 							</form>
@@ -75,4 +75,33 @@
 		</div>
 		{{end}}
 	</div>
+
+{{if .CanWrite}}
+<div class="ui small modal" id="rollback-modal">
+	<div class="header">{{svg "octicon-history"}} {{ctx.Locale.Tr "vault.rollback"}}</div>
+	<div class="content">
+		<p id="rollback-message"></p>
+	</div>
+	<div class="actions">
+		<button class="ui cancel button">{{ctx.Locale.Tr "cancel"}}</button>
+		<button class="ui primary button" id="rollback-confirm">{{ctx.Locale.Tr "vault.rollback"}}</button>
+	</div>
+</div>
+<script>
+(function() {
+	let currentVersion = null;
+	document.querySelectorAll('[data-modal="#rollback-modal"]').forEach(btn => {
+		btn.addEventListener('click', function() {
+			currentVersion = this.getAttribute('data-version');
+			document.getElementById('rollback-message').textContent = '{{ctx.Locale.Tr "vault.confirm_rollback" 0}}'.replace('0', currentVersion);
+		});
+	});
+	document.getElementById('rollback-confirm')?.addEventListener('click', function() {
+		if (currentVersion) {
+			document.getElementById('rollback-form-' + currentVersion).submit();
+		}
+	});
+})();
+</script>
+{{end}}
 {{template "repo/vault/layout_footer" .}}

templates/repo/vault/view.tmpl

@@ -92,7 +92,7 @@
 					{{svg "octicon-history" 16}} {{ctx.Locale.Tr "vault.restore"}}
 				</button>
 				{{else}}
-				<button class="ui red button" type="button" onclick="if(confirm('{{ctx.Locale.Tr "vault.confirm_delete"}}')) document.getElementById('delete-form').submit();">
+				<button class="ui red button show-modal" type="button" data-modal="#delete-secret-modal">
 					{{svg "octicon-trash" 16}} {{ctx.Locale.Tr "vault.delete"}}
 				</button>
 				{{end}}
@@ -238,4 +238,17 @@
 		</table>
 	</div>
 	{{end}}
+
+{{if not .Secret.IsDeleted}}
+<div class="ui small modal" id="delete-secret-modal">
+	<div class="header">{{svg "octicon-trash"}} {{ctx.Locale.Tr "vault.delete_secret"}}</div>
+	<div class="content">
+		<p>{{ctx.Locale.Tr "vault.confirm_delete"}}</p>
+	</div>
+	<div class="actions">
+		<button class="ui cancel button">{{ctx.Locale.Tr "cancel"}}</button>
+		<button class="ui red button" onclick="document.getElementById('delete-form').submit();">{{ctx.Locale.Tr "vault.delete"}}</button>
+	</div>
+</div>
+{{end}}
 {{template "repo/vault/layout_footer" .}}