feat: add test channel feature in admin UI

- POST /admin/channels/{id}/test — direct SMTP send via MailKit
- Test button shown only on existing channels (not create)
- Bootstrap modal with recipient email input and spinner
- Inline success/error result inside the modal

Ref: IT-628

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Anatolii Grynchuk
2026-05-02 02:57:36 +03:00
parent 936d41c2f1
commit 61ccf9c777
4 changed files with 115 additions and 1 deletions
@@ -134,8 +134,76 @@
<button type="submit" form="channelForm" class="btn btn-primary">
<i class="bi bi-floppy me-1"></i> Save
</button>
@if (!Model.IsNew)
{
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#testModal">
<i class="bi bi-send me-1"></i> Test
</button>
}
<a href="/admin/channels" class="btn btn-secondary">
<i class="bi bi-x-lg me-1"></i> Cancel
</a>
}
</form>
@if (!Model.IsNew)
{
<div class="modal fade" id="testModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="bi bi-send me-2"></i>Send Test Email</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<label for="testToEmail" class="form-label fw-semibold">Recipient Email</label>
<input type="email" id="testToEmail" class="form-control" placeholder="you@example.com" />
<div id="testResult" class="mt-3" style="display:none"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="testSendBtn" onclick="sendTestEmail('@Model.Id')">
<i class="bi bi-send me-1"></i> Send
</button>
</div>
</div>
</div>
</div>
<script>
async function sendTestEmail(channelId) {
const toEmail = document.getElementById('testToEmail').value.trim();
const resultDiv = document.getElementById('testResult');
const sendBtn = document.getElementById('testSendBtn');
if (!toEmail) {
resultDiv.style.display = 'block';
resultDiv.innerHTML = '<div class="alert alert-warning mb-0">Please enter a recipient email.</div>';
return;
}
sendBtn.disabled = true;
sendBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Sending…';
resultDiv.style.display = 'none';
try {
const resp = await fetch(`/admin/channels/${channelId}/test`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ toEmail })
});
const data = await resp.json();
resultDiv.style.display = 'block';
resultDiv.innerHTML = data.success
? `<div class="alert alert-success mb-0"><i class="bi bi-check-circle me-1"></i>${data.message}</div>`
: `<div class="alert alert-danger mb-0"><i class="bi bi-x-circle me-1"></i>${data.message}</div>`;
} catch (e) {
resultDiv.style.display = 'block';
resultDiv.innerHTML = `<div class="alert alert-danger mb-0">Request failed: ${e.message}</div>`;
} finally {
sendBtn.disabled = false;
sendBtn.innerHTML = '<i class="bi bi-send me-1"></i> Send';
}
}
</script>
}