fix: prevent silent save failure in admin settings form
The settings form contains multiple <input type="url"> fields that lack a name attribute. When a field value fails browser URL validation, the browser silently blocks form submission without showing an error — no network request is made, and the user sees no feedback. Root cause: HTML5 form validation requires a focusable element with a name attribute to surface errors. Without it, validation fails silently. Fix: - Add novalidate to the <form> to disable browser-native URL validation - Add an isValidHttpUrl() helper in saveSettings() to replicate the same checks the backend performs - Optional URL fields (frontend_url, doc_url): auto-clear invalid values instead of blocking the save, matching backend behaviour (these fields accept empty string without error) - purchase_subscription_url: block save with a clear error message when enabled + invalid; auto-clear when disabled to prevent the backend 400 "Purchase Subscription URL must be an absolute http(s) URL" error Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -7,7 +7,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Settings Form -->
|
<!-- Settings Form -->
|
||||||
<form v-else @submit.prevent="saveSettings" class="space-y-6">
|
<form v-else @submit.prevent="saveSettings" class="space-y-6" novalidate>
|
||||||
<!-- Tab Navigation -->
|
<!-- Tab Navigation -->
|
||||||
<div class="sticky top-0 z-10 overflow-x-auto settings-tabs-scroll">
|
<div class="sticky top-0 z-10 overflow-x-auto settings-tabs-scroll">
|
||||||
<nav class="settings-tabs">
|
<nav class="settings-tabs">
|
||||||
@@ -2198,6 +2198,35 @@ async function saveSettings() {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Validate URL fields — novalidate disables browser-native checks, so we validate here
|
||||||
|
const isValidHttpUrl = (url: string): boolean => {
|
||||||
|
if (!url) return true
|
||||||
|
try {
|
||||||
|
const u = new URL(url)
|
||||||
|
return u.protocol === 'http:' || u.protocol === 'https:'
|
||||||
|
} catch {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Optional URL fields: auto-clear invalid values so they don't cause backend 400 errors
|
||||||
|
if (!isValidHttpUrl(form.frontend_url)) form.frontend_url = ''
|
||||||
|
if (!isValidHttpUrl(form.doc_url)) form.doc_url = ''
|
||||||
|
// Purchase URL: required when enabled; auto-clear when disabled to avoid backend rejection
|
||||||
|
if (form.purchase_subscription_enabled) {
|
||||||
|
if (!form.purchase_subscription_url) {
|
||||||
|
appStore.showError(t('admin.settings.purchase.url') + ': URL is required when purchase is enabled')
|
||||||
|
saving.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!isValidHttpUrl(form.purchase_subscription_url)) {
|
||||||
|
appStore.showError(t('admin.settings.purchase.url') + ': must be an absolute http(s) URL (e.g. https://example.com)')
|
||||||
|
saving.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
} else if (!isValidHttpUrl(form.purchase_subscription_url)) {
|
||||||
|
form.purchase_subscription_url = ''
|
||||||
|
}
|
||||||
|
|
||||||
const payload: UpdateSettingsRequest = {
|
const payload: UpdateSettingsRequest = {
|
||||||
registration_enabled: form.registration_enabled,
|
registration_enabled: form.registration_enabled,
|
||||||
email_verify_enabled: form.email_verify_enabled,
|
email_verify_enabled: form.email_verify_enabled,
|
||||||
|
|||||||
Reference in New Issue
Block a user