417 lines
18 KiB
PHP
417 lines
18 KiB
PHP
<?php
|
|
$mailboxes = is_array($mailboxes ?? null) ? $mailboxes : [];
|
|
$em = is_array($editMailbox ?? null) ? $editMailbox : null;
|
|
$isEdit = $em !== null;
|
|
?>
|
|
<link href="https://cdn.quilljs.com/2.0.3/quill.snow.css" rel="stylesheet">
|
|
<style>
|
|
#js-header-editor .ql-editor, #js-footer-editor .ql-editor { min-height: 80px; }
|
|
.html-source-toggle { margin-top: 4px; display: flex; justify-content: flex-end; }
|
|
.html-source-toggle button { font-size: 11px; padding: 2px 8px; cursor: pointer; background: #f5f5f5; border: 1px solid #ccc; border-radius: 3px; }
|
|
.html-source-toggle button.active { background: #e0e0e0; font-weight: 600; }
|
|
.html-source-area { width: 100%; min-height: 120px; font-family: monospace; font-size: 12px; border: 1px solid #ccc; padding: 8px; box-sizing: border-box; display: none; }
|
|
</style>
|
|
|
|
<section class="card">
|
|
<h2 class="section-title">Skrzynki pocztowe</h2>
|
|
<p class="muted mt-12">Konfiguracja skrzynek SMTP do wysylki wiadomosci e-mail.</p>
|
|
|
|
<?php if (!empty($errorMessage)): ?>
|
|
<div class="alert alert--danger mt-12" role="alert"><?= $e((string) $errorMessage) ?></div>
|
|
<?php endif; ?>
|
|
<?php if (!empty($successMessage)): ?>
|
|
<div class="alert alert--success mt-12" role="status"><?= $e((string) $successMessage) ?></div>
|
|
<?php endif; ?>
|
|
</section>
|
|
|
|
<section class="card mt-16">
|
|
<h3 class="section-title">Lista skrzynek</h3>
|
|
|
|
<?php if (count($mailboxes) === 0): ?>
|
|
<p class="muted mt-12">Brak skrzynek pocztowych. Dodaj pierwsza skrzynke ponizej.</p>
|
|
<?php else: ?>
|
|
<div class="table-wrap mt-12">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nazwa</th>
|
|
<th>Serwer</th>
|
|
<th>Port</th>
|
|
<th>E-mail nadawcy</th>
|
|
<th>Status</th>
|
|
<th>Akcje</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($mailboxes as $mb): ?>
|
|
<tr>
|
|
<td>
|
|
<?= $e((string) ($mb['name'] ?? '')) ?>
|
|
<?php if (((int) ($mb['is_default'] ?? 0)) === 1): ?>
|
|
<span class="badge badge--info" style="margin-left:4px">Domyslna</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td><?= $e((string) ($mb['smtp_host'] ?? '')) ?></td>
|
|
<td><?= (int) ($mb['smtp_port'] ?? 0) ?></td>
|
|
<td><?= $e((string) ($mb['sender_email'] ?? '')) ?></td>
|
|
<td>
|
|
<?php if (((int) ($mb['is_active'] ?? 0)) === 1): ?>
|
|
<span class="badge badge--success">Aktywna</span>
|
|
<?php else: ?>
|
|
<span class="badge badge--muted">Nieaktywna</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td style="white-space:nowrap">
|
|
<a href="/settings/email-mailboxes?edit=<?= (int) ($mb['id'] ?? 0) ?>" class="btn btn--sm btn--secondary">Edytuj</a>
|
|
<form action="/settings/email-mailboxes/toggle" method="post" style="display:inline">
|
|
<input type="hidden" name="_token" value="<?= $e($csrfToken ?? '') ?>">
|
|
<input type="hidden" name="id" value="<?= (int) ($mb['id'] ?? 0) ?>">
|
|
<button type="submit" class="btn btn--sm btn--secondary">
|
|
<?= ((int) ($mb['is_active'] ?? 0)) === 1 ? 'Dezaktywuj' : 'Aktywuj' ?>
|
|
</button>
|
|
</form>
|
|
<form action="/settings/email-mailboxes/delete" method="post" style="display:inline" class="js-confirm-delete">
|
|
<input type="hidden" name="_token" value="<?= $e($csrfToken ?? '') ?>">
|
|
<input type="hidden" name="id" value="<?= (int) ($mb['id'] ?? 0) ?>">
|
|
<button type="button" class="btn btn--sm btn--danger js-delete-btn">Usun</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<?php endif; ?>
|
|
</section>
|
|
|
|
<section class="card mt-16">
|
|
<h3 class="section-title"><?= $isEdit ? 'Edytuj skrzynke pocztowa' : 'Dodaj skrzynke pocztowa' ?></h3>
|
|
|
|
<form action="/settings/email-mailboxes/save" method="post" novalidate class="mt-12" id="js-mailbox-form">
|
|
<input type="hidden" name="_token" value="<?= $e($csrfToken ?? '') ?>">
|
|
<?php if ($isEdit): ?>
|
|
<input type="hidden" name="id" value="<?= (int) ($em['id'] ?? 0) ?>">
|
|
<?php endif; ?>
|
|
|
|
<div class="form-grid-2">
|
|
<label class="form-field">
|
|
<span class="field-label">Nazwa *</span>
|
|
<input class="form-control" type="text" name="name" maxlength="100" required value="<?= $e((string) ($em['name'] ?? '')) ?>" placeholder="np. Glowna skrzynka">
|
|
</label>
|
|
<label class="form-field">
|
|
<span class="field-label">E-mail nadawcy *</span>
|
|
<input class="form-control" type="email" name="sender_email" maxlength="255" required value="<?= $e((string) ($em['sender_email'] ?? '')) ?>" placeholder="noreply@firma.pl">
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-grid-2 mt-0">
|
|
<label class="form-field">
|
|
<span class="field-label">Nazwa nadawcy</span>
|
|
<input class="form-control" type="text" name="sender_name" maxlength="200" value="<?= $e((string) ($em['sender_name'] ?? '')) ?>" placeholder="np. Sklep XYZ">
|
|
</label>
|
|
<div class="form-field"></div>
|
|
</div>
|
|
|
|
<h4 class="section-title mt-16">Ustawienia SMTP</h4>
|
|
|
|
<div class="form-grid-3 mt-12">
|
|
<label class="form-field">
|
|
<span class="field-label">Serwer SMTP *</span>
|
|
<input class="form-control" type="text" name="smtp_host" maxlength="255" required value="<?= $e((string) ($em['smtp_host'] ?? '')) ?>" placeholder="smtp.firma.pl">
|
|
</label>
|
|
<label class="form-field">
|
|
<span class="field-label">Port *</span>
|
|
<input class="form-control" type="number" name="smtp_port" min="1" max="65535" required value="<?= (int) ($em['smtp_port'] ?? 587) ?>">
|
|
</label>
|
|
<label class="form-field">
|
|
<span class="field-label">Szyfrowanie</span>
|
|
<select class="form-control" name="smtp_encryption">
|
|
<option value="tls"<?= ((string) ($em['smtp_encryption'] ?? 'tls')) === 'tls' ? ' selected' : '' ?>>TLS (STARTTLS)</option>
|
|
<option value="ssl"<?= ((string) ($em['smtp_encryption'] ?? '')) === 'ssl' ? ' selected' : '' ?>>SSL</option>
|
|
<option value="none"<?= ((string) ($em['smtp_encryption'] ?? '')) === 'none' ? ' selected' : '' ?>>Brak</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-grid-2 mt-0">
|
|
<label class="form-field">
|
|
<span class="field-label">Uzytkownik SMTP *</span>
|
|
<input class="form-control" type="text" name="smtp_username" maxlength="255" required value="<?= $e((string) ($em['smtp_username'] ?? '')) ?>">
|
|
</label>
|
|
<label class="form-field">
|
|
<span class="field-label">Haslo SMTP <?= $isEdit ? '' : '*' ?></span>
|
|
<input class="form-control" type="password" name="smtp_password" maxlength="255" <?= $isEdit ? '' : 'required' ?> placeholder="<?= $isEdit ? '(bez zmian)' : '' ?>">
|
|
<?php if ($isEdit): ?>
|
|
<small class="field-hint">Pozostaw puste, aby zachowac aktualne haslo</small>
|
|
<?php endif; ?>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-grid-2 mt-0">
|
|
<label class="form-field" style="display:flex;align-items:center;gap:6px;flex-direction:row">
|
|
<input type="checkbox" name="is_default" value="1"<?= ((int) ($em['is_default'] ?? 0)) === 1 ? ' checked' : '' ?>>
|
|
<span class="field-label" style="margin:0">Domyslna skrzynka</span>
|
|
</label>
|
|
<label class="form-field" style="display:flex;align-items:center;gap:6px;flex-direction:row">
|
|
<input type="checkbox" name="is_active" value="1"<?= $isEdit ? (((int) ($em['is_active'] ?? 0)) === 1 ? ' checked' : '') : ' checked' ?>>
|
|
<span class="field-label" style="margin:0">Aktywna</span>
|
|
</label>
|
|
</div>
|
|
|
|
<h4 class="section-title mt-16">Szablon wiadomosci</h4>
|
|
<p class="muted mt-4" style="font-size:12px">Opcjonalnie. Naglowek i stopka beda dolaczane do kazdego e-maila wysylanego z tej skrzynki.</p>
|
|
|
|
<div class="form-field mt-12">
|
|
<span class="field-label">Naglowek (header)</span>
|
|
<div id="js-header-editor" style="min-height:80px"></div>
|
|
<textarea id="js-header-source" class="html-source-area"></textarea>
|
|
<div class="html-source-toggle"><button type="button" class="js-toggle-html" data-editor="header"></> HTML</button> <button type="button" class="js-preview-html" data-editor="header">Podglad</button></div>
|
|
<input type="hidden" name="header_html" id="js-header-html" value="">
|
|
</div>
|
|
|
|
<div class="form-field mt-12">
|
|
<span class="field-label">Stopka (footer)</span>
|
|
<div id="js-footer-editor" style="min-height:80px"></div>
|
|
<textarea id="js-footer-source" class="html-source-area"></textarea>
|
|
<div class="html-source-toggle"><button type="button" class="js-toggle-html" data-editor="footer"></> HTML</button> <button type="button" class="js-preview-html" data-editor="footer">Podglad</button></div>
|
|
<input type="hidden" name="footer_html" id="js-footer-html" value="">
|
|
</div>
|
|
|
|
<div class="form-actions mt-16">
|
|
<button type="submit" class="btn btn--primary"><?= $isEdit ? 'Zapisz zmiany' : 'Dodaj skrzynke' ?></button>
|
|
<button type="button" class="btn btn--secondary" id="js-test-connection">Testuj polaczenie</button>
|
|
<?php if ($isEdit): ?>
|
|
<a href="/settings/email-mailboxes" class="btn btn--secondary">Anuluj</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="js-test-result" class="mt-12" style="display:none"></div>
|
|
</section>
|
|
|
|
<div id="js-html-preview-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; background:rgba(0,0,0,0.5);">
|
|
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; max-width:90vw; max-height:80vh; background:#fff; border-radius:6px; box-shadow:0 4px 24px rgba(0,0,0,0.2); display:flex; flex-direction:column;">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #eee;">
|
|
<strong id="js-preview-title">Podglad</strong>
|
|
<button type="button" id="js-preview-close" style="border:none; background:none; font-size:20px; cursor:pointer; padding:0 4px;">×</button>
|
|
</div>
|
|
<div style="flex:1; overflow:auto; padding:16px;">
|
|
<iframe id="js-preview-iframe" style="width:100%; min-height:300px; border:none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.quilljs.com/2.0.3/quill.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// --- Quill editors for header/footer ---
|
|
var quillToolbar = [
|
|
[{ header: [1, 2, 3, false] }],
|
|
['bold', 'italic', 'underline'],
|
|
[{ color: [] }, { background: [] }],
|
|
[{ align: [] }],
|
|
[{ list: 'ordered' }, { list: 'bullet' }],
|
|
['link', 'image'],
|
|
['clean']
|
|
];
|
|
|
|
var headerEditor = new Quill('#js-header-editor', {
|
|
theme: 'snow',
|
|
modules: { toolbar: quillToolbar },
|
|
placeholder: 'Naglowek wiadomosci (np. logo, nazwa firmy)...'
|
|
});
|
|
|
|
var footerEditor = new Quill('#js-footer-editor', {
|
|
theme: 'snow',
|
|
modules: { toolbar: quillToolbar },
|
|
placeholder: 'Stopka wiadomosci (np. dane kontaktowe, adres)...'
|
|
});
|
|
|
|
// --- HTML source toggle ---
|
|
var editors = { header: headerEditor, footer: footerEditor };
|
|
var sourceMode = { header: false, footer: false };
|
|
var rawHtml = { header: '', footer: '' };
|
|
|
|
function isRichHtml(html) {
|
|
if (!html) return false;
|
|
return /<(div|table|td|tr|meta|img)\b[^>]*style=/i.test(html) || /<meta\b/i.test(html);
|
|
}
|
|
|
|
function activateSourceMode(key) {
|
|
var quillContainer = document.getElementById('js-' + key + '-editor');
|
|
var sourceArea = document.getElementById('js-' + key + '-source');
|
|
var toolbar = quillContainer.parentNode.querySelector('.ql-toolbar');
|
|
var btn = document.querySelector('.js-toggle-html[data-editor="' + key + '"]');
|
|
sourceArea.value = rawHtml[key];
|
|
quillContainer.style.display = 'none';
|
|
if (toolbar) toolbar.style.display = 'none';
|
|
sourceArea.style.display = 'block';
|
|
if (btn) btn.classList.add('active');
|
|
sourceMode[key] = true;
|
|
}
|
|
|
|
function activateQuillMode(key) {
|
|
var quillContainer = document.getElementById('js-' + key + '-editor');
|
|
var sourceArea = document.getElementById('js-' + key + '-source');
|
|
var toolbar = quillContainer.parentNode.querySelector('.ql-toolbar');
|
|
var btn = document.querySelector('.js-toggle-html[data-editor="' + key + '"]');
|
|
rawHtml[key] = sourceArea.value;
|
|
editors[key].root.innerHTML = rawHtml[key] || '<p><br></p>';
|
|
sourceArea.style.display = 'none';
|
|
quillContainer.style.display = '';
|
|
if (toolbar) toolbar.style.display = '';
|
|
if (btn) btn.classList.remove('active');
|
|
sourceMode[key] = false;
|
|
}
|
|
|
|
// Load existing HTML — if it contains rich HTML (inline styles, divs), start in source mode
|
|
<?php if ($isEdit && isset($em['header_html']) && $em['header_html'] !== null && $em['header_html'] !== ''): ?>
|
|
rawHtml.header = <?= json_encode((string) $em['header_html'], JSON_UNESCAPED_UNICODE) ?>;
|
|
if (isRichHtml(rawHtml.header)) {
|
|
activateSourceMode('header');
|
|
} else {
|
|
headerEditor.root.innerHTML = rawHtml.header;
|
|
}
|
|
<?php endif; ?>
|
|
<?php if ($isEdit && isset($em['footer_html']) && $em['footer_html'] !== null && $em['footer_html'] !== ''): ?>
|
|
rawHtml.footer = <?= json_encode((string) $em['footer_html'], JSON_UNESCAPED_UNICODE) ?>;
|
|
if (isRichHtml(rawHtml.footer)) {
|
|
activateSourceMode('footer');
|
|
} else {
|
|
footerEditor.root.innerHTML = rawHtml.footer;
|
|
}
|
|
<?php endif; ?>
|
|
|
|
document.querySelectorAll('.js-toggle-html').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var key = this.getAttribute('data-editor');
|
|
if (!sourceMode[key]) {
|
|
var quill = editors[key];
|
|
var html = quill.root.innerHTML === '<p><br></p>' ? '' : quill.root.innerHTML;
|
|
rawHtml[key] = rawHtml[key] && html === '' ? rawHtml[key] : html;
|
|
activateSourceMode(key);
|
|
} else {
|
|
activateQuillMode(key);
|
|
}
|
|
});
|
|
});
|
|
|
|
// --- Preview ---
|
|
var previewModal = document.getElementById('js-html-preview-modal');
|
|
var previewIframe = document.getElementById('js-preview-iframe');
|
|
var previewTitle = document.getElementById('js-preview-title');
|
|
|
|
function getEditorHtml(key) {
|
|
if (sourceMode[key]) {
|
|
return document.getElementById('js-' + key + '-source').value.trim();
|
|
}
|
|
var html = editors[key].root.innerHTML;
|
|
return html === '<p><br></p>' ? '' : html;
|
|
}
|
|
|
|
document.querySelectorAll('.js-preview-html').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var key = this.getAttribute('data-editor');
|
|
var label = key === 'header' ? 'Naglowek (header)' : 'Stopka (footer)';
|
|
var html = getEditorHtml(key);
|
|
if (!html) {
|
|
if (window.OrderProAlerts && window.OrderProAlerts.warning) {
|
|
window.OrderProAlerts.warning('Podglad', 'Brak tresci do wyswietlenia.');
|
|
}
|
|
return;
|
|
}
|
|
previewTitle.textContent = 'Podglad: ' + label;
|
|
previewModal.style.display = 'block';
|
|
var doc = previewIframe.contentDocument || previewIframe.contentWindow.document;
|
|
doc.open();
|
|
doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"><style>body{margin:0;padding:16px;font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#000;}</style></head><body>' + html + '</body></html>');
|
|
doc.close();
|
|
previewIframe.style.height = '0';
|
|
setTimeout(function() {
|
|
var h = doc.body.scrollHeight + 40;
|
|
previewIframe.style.height = Math.min(Math.max(h, 150), 500) + 'px';
|
|
}, 50);
|
|
});
|
|
});
|
|
|
|
document.getElementById('js-preview-close').addEventListener('click', function() {
|
|
previewModal.style.display = 'none';
|
|
});
|
|
previewModal.addEventListener('click', function(e) {
|
|
if (e.target === previewModal) previewModal.style.display = 'none';
|
|
});
|
|
|
|
var mailboxForm = document.getElementById('js-mailbox-form');
|
|
mailboxForm.addEventListener('submit', function() {
|
|
var headerVal, footerVal;
|
|
if (sourceMode.header) {
|
|
headerVal = document.getElementById('js-header-source').value.trim();
|
|
} else {
|
|
headerVal = headerEditor.root.innerHTML === '<p><br></p>' ? '' : headerEditor.root.innerHTML;
|
|
}
|
|
if (sourceMode.footer) {
|
|
footerVal = document.getElementById('js-footer-source').value.trim();
|
|
} else {
|
|
footerVal = footerEditor.root.innerHTML === '<p><br></p>' ? '' : footerEditor.root.innerHTML;
|
|
}
|
|
document.getElementById('js-header-html').value = headerVal;
|
|
document.getElementById('js-footer-html').value = footerVal;
|
|
});
|
|
|
|
// --- Delete confirm ---
|
|
document.querySelectorAll('.js-delete-btn').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var form = this.closest('form');
|
|
if (window.OrderProAlerts && window.OrderProAlerts.confirm) {
|
|
window.OrderProAlerts.confirm(
|
|
'Usuwanie skrzynki',
|
|
'Czy na pewno chcesz usunac te skrzynke pocztowa?',
|
|
function() { form.submit(); }
|
|
);
|
|
} else {
|
|
if (confirm('Czy na pewno chcesz usunac te skrzynke pocztowa?')) {
|
|
form.submit();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
var testBtn = document.getElementById('js-test-connection');
|
|
var resultDiv = document.getElementById('js-test-result');
|
|
if (testBtn) {
|
|
testBtn.addEventListener('click', function() {
|
|
var form = document.getElementById('js-mailbox-form');
|
|
var formData = new FormData(form);
|
|
|
|
testBtn.disabled = true;
|
|
testBtn.textContent = 'Testowanie...';
|
|
resultDiv.style.display = 'none';
|
|
|
|
fetch('/settings/email-mailboxes/test', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(function(response) { return response.json(); })
|
|
.then(function(data) {
|
|
resultDiv.style.display = 'block';
|
|
if (data.success) {
|
|
resultDiv.className = 'mt-12 alert alert--success';
|
|
} else {
|
|
resultDiv.className = 'mt-12 alert alert--danger';
|
|
}
|
|
resultDiv.textContent = data.message || 'Brak odpowiedzi';
|
|
})
|
|
.catch(function(err) {
|
|
resultDiv.style.display = 'block';
|
|
resultDiv.className = 'mt-12 alert alert--danger';
|
|
resultDiv.textContent = 'Blad polaczenia: ' + err.message;
|
|
})
|
|
.finally(function() {
|
|
testBtn.disabled = false;
|
|
testBtn.textContent = 'Testuj polaczenie';
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|