286 lines
12 KiB
PHP
286 lines
12 KiB
PHP
<?php
|
|
session_start();
|
|
require '../config.php';
|
|
require '../include_header.php';
|
|
?>
|
|
|
|
<body>
|
|
<?php require '../include_topbar.php'; ?>
|
|
<?php require '../include_setting_sidebar.php'; ?>
|
|
|
|
<main id="content" class="content py-15">
|
|
<div class="container-fluid">
|
|
|
|
<!-- Page header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-6 gap-3">
|
|
<div>
|
|
<h1 class="fs-3 mb-1">SMTP Setting</h1>
|
|
<p class="mb-0">Configure outgoing email server for your company</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-5">
|
|
|
|
<!-- LEFT: info panel -->
|
|
<div class="col-lg-3 col-12">
|
|
<div class="card">
|
|
<div class="card-body p-6">
|
|
<div class="text-center mb-4">
|
|
<span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-label-primary mb-3"
|
|
style="width:56px;height:56px;">
|
|
<i class="ti ti-mail-cog fs-3"></i>
|
|
</span>
|
|
<h6 class="mb-1">Email Server</h6>
|
|
<p class="text-muted small mb-0">Used for system notifications and invitations</p>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div id="smtp_status_panel">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<span id="status_dot" class="rounded-circle d-inline-block" style="width:10px;height:10px;background:#adb5bd;flex-shrink:0;"></span>
|
|
<span id="status_label" class="small fw-semibold text-muted">Not configured</span>
|
|
</div>
|
|
<div class="small text-muted" id="status_host">—</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="small text-muted">
|
|
<div class="fw-semibold mb-2">Common SMTP hosts</div>
|
|
<div class="mb-1"><i class="ti ti-brand-gmail me-1"></i>smtp.gmail.com : 587</div>
|
|
<div class="mb-1"><i class="ti ti-brand-office me-1"></i>smtp.office365.com : 587</div>
|
|
<div class="mb-1"><i class="ti ti-mail me-1"></i>smtp.mail.yahoo.com : 587</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT: form -->
|
|
<div class="col-lg-9 col-12">
|
|
<div class="card">
|
|
<div class="card-body p-6">
|
|
|
|
<h2 class="fs-5 mb-4">Server Configuration</h2>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-8 mb-3">
|
|
<label class="form-label">SMTP Host <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="smtp_host"
|
|
placeholder="e.g. smtp.gmail.com">
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label class="form-label">Port <span class="text-danger">*</span></label>
|
|
<select class="form-select" id="smtp_port">
|
|
<option value="587">587 — TLS (recommended)</option>
|
|
<option value="465">465 — SSL</option>
|
|
<option value="25">25 — Plain</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Username / Email <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="smtp_username"
|
|
placeholder="your@email.com">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Password</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="smtp_password"
|
|
placeholder="Leave blank to keep current">
|
|
<button class="btn btn-outline-secondary toggle-pw" type="button"
|
|
data-target="smtp_password">
|
|
<i class="ti ti-eye"></i>
|
|
</button>
|
|
</div>
|
|
<div class="form-text">Leave blank to keep the existing password.</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Sender Name</label>
|
|
<input type="text" class="form-control" id="smtp_from_name"
|
|
placeholder="e.g. My Company">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Sender Email</label>
|
|
<input type="email" class="form-control" id="smtp_from_email"
|
|
placeholder="noreply@company.com">
|
|
</div>
|
|
|
|
<div class="col-12 mb-3">
|
|
<label class="form-label">Encryption</label>
|
|
<div class="d-flex gap-4 mt-1">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="smtp_encryption"
|
|
id="enc_tls" value="tls" checked>
|
|
<label class="form-check-label" for="enc_tls">TLS</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="smtp_encryption"
|
|
id="enc_ssl" value="ssl">
|
|
<label class="form-check-label" for="enc_ssl">SSL</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="smtp_encryption"
|
|
id="enc_none" value="none">
|
|
<label class="form-check-label" for="enc_none">None</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Test connection -->
|
|
<div class="border rounded p-4 mb-4 bg-light">
|
|
<div class="fw-semibold mb-2"><i class="ti ti-plug-connected me-1"></i>Test Connection</div>
|
|
<p class="text-muted small mb-3">Send a test email to verify your SMTP settings before saving.</p>
|
|
<div class="d-flex gap-2 align-items-center flex-wrap">
|
|
<input type="email" class="form-control form-control-sm"
|
|
id="test_email" placeholder="Send test to…"
|
|
style="max-width:260px;">
|
|
<button class="btn btn-sm btn-outline-primary" onclick="test_smtp()">
|
|
<i class="ti ti-send me-1"></i>Send Test
|
|
</button>
|
|
<span id="test_result" class="small ms-1"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card-footer d-flex justify-content-end gap-2">
|
|
<button class="btn btn-ghost-secondary" onclick="load_smtp()">
|
|
<i class="ti ti-refresh me-1"></i>Reset
|
|
</button>
|
|
<button class="btn btn-primary" onclick="save_smtp()">
|
|
<i class="ti ti-device-floppy me-1"></i>Save Changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<?php require '../include_ending.php'; ?>
|
|
</main>
|
|
|
|
|
|
<script>
|
|
// ═══════════════════════════════════════════════
|
|
// State
|
|
// ═══════════════════════════════════════════════
|
|
const api = '<?php echo $server_url?>setting/api/engine/';
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// On load
|
|
// ═══════════════════════════════════════════════
|
|
$(function () {
|
|
load_smtp();
|
|
|
|
// Toggle show/hide password
|
|
$(document).on('click', '.toggle-pw', function () {
|
|
const $input = $('#' + $(this).data('target'));
|
|
const isText = $input.attr('type') === 'text';
|
|
$input.attr('type', isText ? 'password' : 'text');
|
|
$(this).find('i').toggleClass('ti-eye ti-eye-off');
|
|
});
|
|
});
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// Load
|
|
// ═══════════════════════════════════════════════
|
|
function load_smtp() {
|
|
return ajax_request({
|
|
url: api + 'retrieve_smtp.php',
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'read',
|
|
onSuccess: function (r) {
|
|
const s = r.output;
|
|
if (!s) return; // no config yet — leave form blank
|
|
|
|
$('#smtp_host').val(s.server || '');
|
|
$('#smtp_port').val(s.port || '587');
|
|
$('#smtp_username').val(s.username || '');
|
|
$('#smtp_password').val(''); // never prefill password
|
|
$('#smtp_from_name').val(s.from_name || '');
|
|
$('#smtp_from_email').val(s.from_email || '');
|
|
$(`input[name="smtp_encryption"][value="${s.encryption || 'tls'}"]`).prop('checked', true);
|
|
|
|
update_status_panel(s);
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// Save
|
|
// ═══════════════════════════════════════════════
|
|
function save_smtp() {
|
|
const encryption = $('input[name="smtp_encryption"]:checked').val();
|
|
|
|
ajax_request({
|
|
url: api + 'manage_smtp.php',
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'manage',
|
|
data: { smtp_encryption: encryption },
|
|
onSuccess: function (r) {
|
|
bootbox.alert('SMTP settings saved.');
|
|
load_smtp();
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// Test connection
|
|
// ═══════════════════════════════════════════════
|
|
function test_smtp() {
|
|
const to = $('#test_email').val().trim();
|
|
if (!to) {
|
|
$('#test_result').html('<span class="text-danger">Enter a recipient email.</span>');
|
|
return;
|
|
}
|
|
|
|
$('#test_result').html('<span class="text-muted"><i class="ti ti-loader-2 me-1"></i>Sending…</span>');
|
|
|
|
ajax_request({
|
|
url: api + 'test_smtp.php',
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'read',
|
|
data: { test_email: to },
|
|
onSuccess: function (r) {
|
|
$('#test_result').html('<span class="text-success"><i class="ti ti-circle-check me-1"></i>' + (r.message || 'Test email sent!') + '</span>');
|
|
},
|
|
onError: function (r) {
|
|
$('#test_result').html('<span class="text-danger"><i class="ti ti-circle-x me-1"></i>' + (r.message || 'Failed.') + '</span>');
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// Status panel
|
|
// ═══════════════════════════════════════════════
|
|
function update_status_panel(s) {
|
|
if (s && s.server) {
|
|
$('#status_dot').css('background', '#198754');
|
|
$('#status_label').text('Configured').removeClass('text-muted').addClass('text-success');
|
|
$('#status_host').text(s.server + ' : ' + (s.port || '587'));
|
|
} else {
|
|
$('#status_dot').css('background', '#adb5bd');
|
|
$('#status_label').text('Not configured').addClass('text-muted').removeClass('text-success');
|
|
$('#status_host').text('—');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|