fix: make clear button link which trigger warning dialog

(cherry picked from commit ce67ee1bc6)

frappe/public/js/frappe/web_form/web_form.js

@@ -28,6 +28,7 @@ export default class WebForm extends frappe.ui.FieldGroup {
 
 		if (this.is_new || this.in_edit_mode) {
 			this.setup_primary_action();
+			this.setup_clear_action();
 		}
 
 		this.setup_previous_next_button();
@@ -157,6 +158,25 @@ export default class WebForm extends frappe.ui.FieldGroup {
 		$(".web-form").on("submit", () => this.save());
 	}
 
+	setup_clear_action() {
+		$(".web-form-footer .clear-btn").on("click", () => this.clear_form());
+	}
+
+	clear_form() {
+		let title = __("Clear Form?");
+		let message = __("Are you sure you want to clear the form? It cannot be undone.");
+		let clear_button_text = __("Clear Form");
+
+		if (location.href.includes("/edit")) {
+			title = __("Reset Form?");
+			message = __("Are you sure you want to reset all field values?");
+			clear_button_text = __("Reset Form");
+		}
+
+		frappe.warn(title, message, () => location.reload(true), clear_button_text);
+		return false;
+	}
+
 	validate_section() {
 		if (this.allow_incomplete) return true;
 

frappe/public/scss/website/web_form.scss

@@ -140,6 +140,15 @@
 						font-size: var(--text-base);
 					}
 
+					.btn-link {
+						padding-left: 0px;
+						color: var(--text-color);
+
+						&:hover {
+							color: var(--text-on-light-blue);
+						}
+					}
+
 					.left-area {
 						display: flex;
 						flex: 1;

frappe/website/doctype/web_form/templates/web_form.html

@@ -21,13 +21,13 @@
 	<div class="left-area">
 		{% if not in_view_mode %}
 			<!-- clear button -->
-			<a href="/{{ path }}" class="clear-btn btn btn-default btn-sm hide">
+			<button class="clear-btn btn btn-link btn-sm hide">
 				{% if in_edit_mode %}
 					{{ _("Reset Form", null, "Button in web form") }}
 				{% else %}
 					{{ _("Clear Form", null, "Button in web form") }}
 				{% endif %}
-			</a>
+			</button>
 		{% endif %}
 	</div>
 	<div class="center-area paging"></div>