fix: validate owner/repo split in create_issue.html before submission
Add client-side validation to ensure a repository is selected before form submission. Split owner/repo on both change and submit events. Show inline error messages via form-error div. Update CreateIssue handler to return HTMX-friendly HTML error fragments on 400/500. Closes leeworks-agents/gitea-mobile#30 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,9 @@
|
||||
{{define "content"}}
|
||||
<h1>Create Issue</h1>
|
||||
|
||||
<form hx-post="/issues" hx-swap="innerHTML" hx-target="#main-content">
|
||||
<div id="form-error" class="empty" style="display:none;"></div>
|
||||
|
||||
<form id="create-issue-form" hx-post="/issues" hx-swap="innerHTML" hx-target="#main-content">
|
||||
<div class="form-group">
|
||||
<label for="repo-select">Repository</label>
|
||||
<select id="repo-select" name="owner_repo" required>
|
||||
@@ -32,11 +34,43 @@
|
||||
</form>
|
||||
|
||||
<script>
|
||||
// Split owner/repo from select into hidden fields.
|
||||
document.getElementById('repo-select').addEventListener('change', function() {
|
||||
var parts = this.value.split('/');
|
||||
document.getElementById('owner-input').value = parts[0] || '';
|
||||
document.getElementById('repo-input').value = parts[1] || '';
|
||||
});
|
||||
(function() {
|
||||
var repoSelect = document.getElementById('repo-select');
|
||||
var ownerInput = document.getElementById('owner-input');
|
||||
var repoInput = document.getElementById('repo-input');
|
||||
var formError = document.getElementById('form-error');
|
||||
|
||||
function splitOwnerRepo() {
|
||||
var val = repoSelect.value;
|
||||
if (val) {
|
||||
var parts = val.split('/');
|
||||
ownerInput.value = parts[0] || '';
|
||||
repoInput.value = parts[1] || '';
|
||||
} else {
|
||||
ownerInput.value = '';
|
||||
repoInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
repoSelect.addEventListener('change', splitOwnerRepo);
|
||||
|
||||
// Validate before HTMX submit.
|
||||
document.getElementById('create-issue-form').addEventListener('htmx:configRequest', function(evt) {
|
||||
splitOwnerRepo();
|
||||
if (!ownerInput.value || !repoInput.value) {
|
||||
evt.preventDefault();
|
||||
formError.textContent = 'Please select a repository before submitting.';
|
||||
formError.style.display = 'block';
|
||||
return false;
|
||||
}
|
||||
formError.style.display = 'none';
|
||||
});
|
||||
|
||||
// Show server-side errors inline on HTMX error responses.
|
||||
document.getElementById('create-issue-form').addEventListener('htmx:responseError', function(evt) {
|
||||
formError.textContent = evt.detail.xhr.responseText || 'An error occurred. Please try again.';
|
||||
formError.style.display = 'block';
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user