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

Feat: Add git commit info badge

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-27 17:44:39 +11:00
parent 8dcbacf0ed
commit d6cf8f6603
4 changed files with 458 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
index.html
View File

@@ -1,10 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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." /> <meta
name="description"
content="Advanced SMTP Tester - Test your SMTP configurations securely and easily."
/>
<title>Advanced SMTP Tester</title> <title>Advanced SMTP Tester</title>
<link rel="icon" type="image/png" href="public/Logo.png" /> <link rel="icon" type="image/png" href="public/Logo.png" />
<link rel="stylesheet" href="public/styles.css" /> <link rel="stylesheet" href="public/styles.css" />
@@ -14,7 +16,8 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" 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" /> rel="stylesheet"
/>
</head> </head>
<body> <body>
@@ -36,11 +39,16 @@
<p class="subtitle"> <p class="subtitle">
Advanced SMTP Configuration & Delivery Testing Utility Advanced SMTP Configuration & Delivery Testing Utility
</p> </p>
<a href="https://www.youtube.com/@beyondcloudtechnology" target="_blank" rel="noopener noreferrer" <a
class="youtube-link"> href="https://www.youtube.com/@beyondcloudtechnology"
target="_blank"
rel="noopener noreferrer"
class="youtube-link"
>
<svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor"> <svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
<path <path
d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" /> d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
/>
</svg> </svg>
Watch on YouTube @beyondcloudtechnology Watch on YouTube @beyondcloudtechnology
</a> </a>
@@ -74,11 +82,23 @@
<!-- Server Details --> <!-- Server Details -->
<div class="form-group"> <div class="form-group">
<label for="host">SMTP Host</label> <label for="host">SMTP Host</label>
<input type="text" id="host" name="host" placeholder="smtp.example.com" required /> <input
type="text"
id="host"
name="host"
placeholder="smtp.example.com"
required
/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="port">Port</label> <label for="port">Port</label>
<input type="number" id="port" name="port" placeholder="587" required /> <input
type="number"
id="port"
name="port"
placeholder="587"
required
/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="secure">Encryption</label> <label for="secure">Encryption</label>
@@ -92,13 +112,29 @@
<!-- Auth Details --> <!-- Auth Details -->
<div class="form-group"> <div class="form-group">
<label for="user">Username / Email</label> <label for="user">Username / Email</label>
<input type="text" id="user" name="user" placeholder="user@example.com" required /> <input
type="text"
id="user"
name="user"
placeholder="user@example.com"
required
/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="pass">Password</label> <label for="pass">Password</label>
<div class="password-input-wrapper"> <div class="password-input-wrapper">
<input type="password" id="pass" name="pass" placeholder="••••••••" required /> <input
<button type="button" class="toggle-password" onclick="togglePassword()"> type="password"
id="pass"
name="pass"
placeholder="••••••••"
required
/>
<button
type="button"
class="toggle-password"
onclick="togglePassword()"
>
👁️ 👁️
</button> </button>
</div> </div>
@@ -107,11 +143,22 @@
<!-- Email Details --> <!-- Email Details -->
<div class="form-group"> <div class="form-group">
<label for="from">From Address (Optional)</label> <label for="from">From Address (Optional)</label>
<input type="email" id="from" name="from" placeholder="Defaults to Username" /> <input
type="email"
id="from"
name="from"
placeholder="Defaults to Username"
/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="to">To Address</label> <label for="to">To Address</label>
<input type="email" id="to" name="to" placeholder="recipient@example.com" required /> <input
type="email"
id="to"
name="to"
placeholder="recipient@example.com"
required
/>
</div> </div>
</div> </div>
@@ -147,10 +194,14 @@
<div class="history-panel" id="historyPanel"> <div class="history-panel" id="historyPanel">
<div class="history-header"> <div class="history-header">
<h3>📋 Test History</h3> <h3>📋 Test History</h3>
<button class="clear-history-btn" id="clearHistoryBtn">Clear All</button> <button class="clear-history-btn" id="clearHistoryBtn">
Clear All
</button>
</div> </div>
<div id="historyList"> <div id="historyList">
<div class="history-empty">No test history yet. Run a test to see it here!</div> <div class="history-empty">
No test history yet. Run a test to see it here!
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -159,19 +210,30 @@
<!-- Footer --> <!-- Footer -->
<footer class="footer"> <footer class="footer">
<p>&copy; 2025 Beyond Cloud Technology. All rights reserved.</p> <p>&copy; 2025 Beyond Cloud Technology. All rights reserved.</p>
<a href="https://github.com/DeNNiiInc/Advanced-Smtp-Tester" target="_blank" rel="noopener noreferrer" <a
class="github-link"> href="https://github.com/DeNNiiInc/Advanced-Smtp-Tester"
target="_blank"
rel="noopener noreferrer"
class="github-link"
>
<svg class="github-icon" viewBox="0 0 24 24" fill="currentColor"> <svg class="github-icon" viewBox="0 0 24 24" fill="currentColor">
<path <path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /> d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
/>
</svg> </svg>
View on GitHub View on GitHub
</a> </a>
</footer> </footer>
</div> </div>
<!-- Version Badge -->
<div id="versionBadge" class="version-badge hidden">
<span class="commit-hash"></span>
<span class="commit-sep">•</span>
<span class="commit-date"></span>
</div>
<script src="public/db.js"></script> <script src="public/db.js"></script>
<script src="public/script.js"></script> <script src="public/script.js"></script>
</body> </body>
</html> </html>

50
public/script.js
View File

@@ -469,6 +469,53 @@ document.getElementById('autoTestBtn').addEventListener('click', async function
} }
}); });
}
});
// ===================================
// VERSION INFO
// ===================================
async function loadVersionInfo() {
try {
const response = await fetch('/api/version');
const data = await response.json();
if (data.hash && data.hash !== 'Unknown') {
const badge = document.getElementById('versionBadge');
const hashSpan = badge.querySelector('.commit-hash');
const dateSpan = badge.querySelector('.commit-date');
hashSpan.textContent = data.hash; // e.g., 9f3a914
dateSpan.textContent = timeAgo(new Date(data.date)); // e.g., 3d ago
badge.classList.remove('hidden');
}
} catch (e) {
console.warn('Failed to load version info:', e);
}
}
function timeAgo(date) {
const seconds = Math.floor((new Date() - date) / 1000);
let interval = seconds / 31536000;
if (interval > 1) return Math.floor(interval) + "y ago";
interval = seconds / 2592000;
if (interval > 1) return Math.floor(interval) + "mo ago";
interval = seconds / 86400;
if (interval > 1) return Math.floor(interval) + "d ago";
interval = seconds / 3600;
if (interval > 1) return Math.floor(interval) + "h ago";
interval = seconds / 60;
if (interval > 1) return Math.floor(interval) + "m ago";
return Math.floor(seconds) + "s ago";
}
// =================================== // ===================================
// INITIALIZATION // INITIALIZATION
// =================================== // ===================================
@@ -482,6 +529,9 @@ window.addEventListener('DOMContentLoaded', async () => {
// Load history // Load history
await loadHistory(); await loadHistory();
// Load Version Info
await loadVersionInfo();
// Load last used configuration // Load last used configuration
const settings = await window.smtpDB.getSettings(); const settings = await window.smtpDB.getSettings();
if (settings) { if (settings) {

64
public/styles.css
View File

@@ -77,12 +77,12 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: radial-gradient(circle at 15% 50%, background: radial-gradient(
circle at 15% 50%,
var(--gradient-bg-1) 0%, var(--gradient-bg-1) 0%,
transparent 25%), transparent 25%
radial-gradient(circle at 85% 30%, ),
var(--gradient-bg-2) 0%, radial-gradient(circle at 85% 30%, var(--gradient-bg-2) 0%, transparent 25%);
transparent 25%);
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
transition: background 0.3s ease; transition: background 0.3s ease;
@@ -276,9 +276,11 @@ select:focus {
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, background: linear-gradient(
135deg,
var(--accent-primary), var(--accent-primary),
var(--accent-hover)); var(--accent-hover)
);
color: white; color: white;
box-shadow: 0 4px 12px var(--accent-glow); box-shadow: 0 4px 12px var(--accent-glow);
} }
@@ -663,3 +665,51 @@ select:focus {
.log-output::-webkit-scrollbar-thumb:hover { .log-output::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary); background: var(--text-secondary);
} }
/* Version Badge */
.version-badge {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(8px);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 0.4rem 0.8rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
[data-theme="light"] .version-badge {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(0, 0, 0, 0.1);
}
.version-badge:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.commit-hash {
font-family: "JetBrains Mono", monospace;
color: #a78bfa; /* Slightly purple to match example */
font-weight: 600;
}
[data-theme="light"] .commit-hash {
color: #7c3aed;
}
.commit-sep {
color: var(--text-secondary);
font-size: 0.6rem;
}
.commit-date {
color: var(--text-secondary);
}

20
server.js
View File

@@ -3,10 +3,25 @@ const nodemailer = require("nodemailer");
const bodyParser = require("body-parser"); const bodyParser = require("body-parser");
const cors = require("cors"); const cors = require("cors");
const path = require("path"); const path = require("path");
const { execSync } = require("child_process");
const app = express(); const app = express();
const port = process.env.PORT || 3000; const port = process.env.PORT || 3000;
// Get Git Commit Info
let gitInfo = {
hash: 'Unknown',
date: 'Unknown'
};
try {
const hash = execSync('git log -1 --format="%h"').toString().trim();
const date = execSync('git log -1 --format="%cd"').toString().trim();
gitInfo = { hash, date };
} catch (e) {
console.warn("Could not retrieve git info:", e.message);
}
app.use(cors()); app.use(cors());
app.use(bodyParser.json()); app.use(bodyParser.json());
@@ -18,6 +33,11 @@ app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html')); res.sendFile(path.join(__dirname, 'index.html'));
}); });
// API Endpoint for Version Info
app.get('/api/version', (req, res) => {
res.json(gitInfo);
});
app.post('/api/test-smtp', async (req, res) => { app.post('/api/test-smtp', async (req, res) => {
const { host, port, secure, user, pass, from, to } = req.body; const { host, port, secure, user, pass, from, to } = req.body;