fix: add missing submit button to CalDAV and CardDAV add account modals (#130)
The onSave callback was being executed immediately on modal open (its purpose is to wire up event listeners), causing the required-fields error to appear instantly and leaving the form with no way to submit. Both forms now include modal-actions buttons in the content HTML, and onSave correctly attaches a submit event listener instead of running validation directly. Fixes #128 Co-authored-by: Ulas Kalayci <ulas.kalayci@googlemail.com>
This commit is contained in:
@@ -1545,11 +1545,20 @@ function bindEvents(container, user, users, categories, icsSubscriptions, apiTok
|
||||
<small class="form-hint">${t('settings.caldavPasswordHint')}</small>
|
||||
</div>
|
||||
<div id="caldav-add-error" class="form-error" hidden></div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn--ghost" id="caldav-add-cancel">${t('common.cancel')}</button>
|
||||
<button type="submit" class="btn btn--primary">${t('common.save')}</button>
|
||||
</div>
|
||||
</form>
|
||||
`,
|
||||
onSave: async (panel) => {
|
||||
onSave: (panel) => {
|
||||
const form = panel.querySelector('#caldav-add-form');
|
||||
const errorEl = panel.querySelector('#caldav-add-error');
|
||||
|
||||
panel.querySelector('#caldav-add-cancel')?.addEventListener('click', () => closeModal({ force: true }));
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
errorEl.hidden = true;
|
||||
|
||||
const name = panel.querySelector('#caldav-name').value.trim();
|
||||
@@ -1575,6 +1584,7 @@ function bindEvents(container, user, users, categories, icsSubscriptions, apiTok
|
||||
} catch (err) {
|
||||
showError(errorEl, err.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -1610,10 +1620,20 @@ function bindEvents(container, user, users, categories, icsSubscriptions, apiTok
|
||||
<small class="form-hint">${t('settings.cardavPasswordHint')}</small>
|
||||
</div>
|
||||
<div id="cardav-add-error" class="form-error" hidden></div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn--ghost" id="cardav-add-cancel">${t('common.cancel')}</button>
|
||||
<button type="submit" class="btn btn--primary">${t('common.save')}</button>
|
||||
</div>
|
||||
</form>
|
||||
`,
|
||||
onSave: async (panel) => {
|
||||
onSave: (panel) => {
|
||||
const form = panel.querySelector('#cardav-add-form');
|
||||
const errorEl = panel.querySelector('#cardav-add-error');
|
||||
|
||||
panel.querySelector('#cardav-add-cancel')?.addEventListener('click', () => closeModal({ force: true }));
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
errorEl.hidden = true;
|
||||
|
||||
const name = panel.querySelector('#cardav-name').value.trim();
|
||||
@@ -1639,6 +1659,7 @@ function bindEvents(container, user, users, categories, icsSubscriptions, apiTok
|
||||
} catch (err) {
|
||||
showError(errorEl, err.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user