dennii/Advanced-Smtp-Tester
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Advanced-Smtp-Tester.git synced 2026-04-17 17:35:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement full SMTP Tester with premium UI and Backend

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-13 10:13:45 +11:00
parent 90381ffe37
commit d979a7843e
9 changed files with 1605 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/Logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 749 KiB

166
public/index.html Normal file
View File

@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Advanced SMTP Tester - Test your SMTP configurations securely and easily."
/>
<title>Advanced SMTP Tester</title>
<link rel="icon" type="image/png" href="Logo.png" />
<link rel="stylesheet" href="styles.css" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="background-animation"></div>
<div class="container">
<!-- Header -->
<header class="header">
<div class="header-content">
<h1 class="title">
<img src="Logo.png" alt="Logo" class="title-icon" />
SMTP Tester
</h1>
<p class="subtitle">
Advanced SMTP Configuration & Delivery Testing Utility
</p>
</div>
</header>
<!-- Main Content Area -->
<main class="main-content">
<div class="panel">
<div class="panel-header">
<div class="panel-icon">📧</div>
<h2 class="panel-title">Server Configuration</h2>
</div>
<form id="smtpForm" class="smtp-form">
<div class="form-grid">
<!-- Server Details -->
<div class="form-group">
<label for="host">SMTP Host</label>
<input
type="text"
id="host"
name="host"
placeholder="smtp.example.com"
required
/>
</div>
<div class="form-group">
<label for="port">Port</label>
<input
type="number"
id="port"
name="port"
placeholder="587"
required
/>
</div>
<div class="form-group">
<label for="secure">Encryption</label>
<select id="secure" name="secure">
<option value="false">STARTTLS (587/25)</option>
<option value="true">SSL/TLS (465)</option>
</select>
</div>
<!-- Auth Details -->
<div class="form-group">
<label for="user">Username / Email</label>
<input
type="text"
id="user"
name="user"
placeholder="user@example.com"
required
/>
</div>
<div class="form-group">
<label for="pass">Password</label>
<div class="password-input-wrapper">
<input
type="password"
id="pass"
name="pass"
placeholder="••••••••"
required
/>
<button
type="button"
class="toggle-password"
onclick="togglePassword()"
>
👁️
</button>
</div>
</div>
<!-- Email Details -->
<div class="form-group">
<label for="from">From Address (Optional)</label>
<input
type="email"
id="from"
name="from"
placeholder="Defaults to Username"
/>
</div>
<div class="form-group">
<label for="to">To Address</label>
<input
type="email"
id="to"
name="to"
placeholder="recipient@example.com"
required
/>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="testBtn">
<span class="btn-text">Test Configuration & Send Email</span>
<div class="loading-spinner hidden"></div>
</button>
</div>
<!-- Warning for Password Transmission -->
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<p>
<strong>Note:</strong> Per your request, the password used for
this test will be included in the body of the test email.
</p>
</div>
</form>
<!-- Results Section -->
<div id="results" class="results-section hidden">
<h3>Test Results</h3>
<div id="statusMessage" class="status-message"></div>
<pre id="logOutput" class="log-output"></pre>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<p>&copy; 2025 Beyond Cloud Technology. All rights reserved.</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>

67
public/script.js Normal file
View File

@@ -0,0 +1,67 @@
function togglePassword() {
const passInput = document.getElementById('pass');
const type = passInput.getAttribute('type') === 'password' ? 'text' : 'password';
passInput.setAttribute('type', type);
}
document.getElementById('smtpForm').addEventListener('submit', async function(e) {
e.preventDefault();
const btn = document.getElementById('testBtn');
const spinner = btn.querySelector('.loading-spinner');
const btnText = btn.querySelector('.btn-text');
const resultsDiv = document.getElementById('results');
const statusDiv = document.getElementById('statusMessage');
const logOutput = document.getElementById('logOutput');
// Reset UI
resultsDiv.classList.add('hidden');
statusDiv.className = 'status-message';
statusDiv.textContent = '';
logOutput.textContent = '';
// Set Loading State
btn.disabled = true;
spinner.classList.remove('hidden');
btnText.textContent = 'Testing...';
// Get Form Data
const formData = new FormData(this);
const data = Object.fromEntries(formData.entries());
try {
const response = await fetch('/api/test-smtp', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
const result = await response.json();
// Show Results
resultsDiv.classList.remove('hidden');
if (result.success) {
statusDiv.classList.add('status-success');
statusDiv.textContent = '✅ Success! Email Sent Successfully.';
logOutput.textContent = JSON.stringify(result.details, null, 2);
} else {
statusDiv.classList.add('status-error');
statusDiv.textContent = '❌ Error: ' + result.message;
logOutput.textContent = result.error || 'Unknown error occurred.';
}
} catch (error) {
resultsDiv.classList.remove('hidden');
statusDiv.classList.add('status-error');
statusDiv.textContent = '❌ Network Error';
logOutput.textContent = error.toString();
} finally {
// Reset Button
btn.disabled = false;
spinner.classList.add('hidden');
btnText.textContent = 'Test Configuration & Send Email';
}
});

344
public/styles.css Normal file
View File

@@ -0,0 +1,344 @@
/* ===================================
BEYOND CLOUD TECHNOLOGY - PREMIUM DESIGN SYSTEM
=================================== */
:root {
/* Colors */
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-glass: rgba(30, 41, 59, 0.7);
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--accent-primary: #6366f1; /* Indigo 500 */
--accent-hover: #4f46e5; /* Indigo 600 */
--accent-glow: rgba(99, 102, 241, 0.5);
--success: #10b981;
--error: #ef4444;
--warning: #f59e0b;
/* Spacing & Borders */
--radius-lg: 16px;
--radius-md: 8px;
--radius-sm: 4px;
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
}
/* Background Animation */
.background-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
circle at 15% 50%,
rgba(99, 102, 241, 0.15) 0%,
transparent 25%
),
radial-gradient(
circle at 85% 30%,
rgba(139, 92, 246, 0.15) 0%,
transparent 25%
);
z-index: -1;
pointer-events: none;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: var(--spacing-lg) var(--spacing-sm);
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Header */
.header {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: var(--spacing-xs);
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.title-icon {
width: 48px;
height: 48px;
object-fit: contain;
filter: drop-shadow(0 0 10px var(--accent-glow));
}
.subtitle {
color: var(--text-secondary);
font-size: 1.1rem;
font-weight: 400;
}
/* Panel */
.panel {
background: var(--bg-glass);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.panel-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: var(--spacing-md);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 1rem;
}
.panel-icon {
font-size: 2rem;
}
.panel-title {
font-size: 1.5rem;
font-weight: 600;
}
/* Form */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
label {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
}
input,
select {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
color: var(--text-primary);
font-family: "JetBrains Mono", monospace;
font-size: 0.95rem;
transition: all 0.2s ease;
}
input:focus,
select:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
background: rgba(15, 23, 42, 0.8);
}
/* Password Toggle */
.password-input-wrapper {
position: relative;
display: flex;
}
.password-input-wrapper input {
width: 100%;
padding-right: 3rem;
}
.toggle-password {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 3rem;
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-password:hover {
color: var(--text-primary);
}
/* Button */
.btn {
width: 100%;
padding: 1rem;
border: none;
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.btn-primary {
background: linear-gradient(
135deg,
var(--accent-primary),
var(--accent-hover)
);
color: white;
box-shadow: 0 4px 12px var(--accent-glow);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.6);
}
.btn-primary:active {
transform: translateY(0);
}
.btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* Alerts */
.alert {
margin-top: var(--spacing-md);
padding: 1rem;
border-radius: var(--radius-md);
display: flex;
align-items: start;
gap: 1rem;
font-size: 0.9rem;
}
.alert-warning {
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.2);
color: #fbbf24;
}
/* Results */
.results-section {
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
border-top: 1px solid rgba(255, 255, 255, 0.1);
animation: fadeIn 0.4s ease-out;
}
.hidden {
display: none;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.status-message {
padding: 1rem;
border-radius: var(--radius-md);
margin-bottom: 1rem;
font-weight: 600;
text-align: center;
}
.status-success {
background: rgba(16, 185, 129, 0.1);
border: 1px solid var(--success);
color: var(--success);
}
.status-error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid var(--error);
color: var(--error);
}
.log-output {
background: #000;
color: #10b981;
padding: 1rem;
border-radius: var(--radius-md);
font-family: "JetBrains Mono", monospace;
font-size: 0.85rem;
overflow-x: auto;
white-space: pre-wrap;
max-height: 300px;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* Loading Spinner */
.loading-spinner {
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Footer */
.footer {
margin-top: auto;
text-align: center;
padding-top: var(--spacing-lg);
color: var(--text-secondary);
font-size: 0.85rem;
}