v2.0.0
# Complete Enhancement Package - Major Feature Update Comprehensive enhancement package for docker-ddns-server including security features, modern authentication, UI/UX improvements, and production-ready deployment features. ## 🔒 Security & Authentication ### IP Blocking System - Implemented automatic IP blocking after 3 failed authentication attempts within 72 hours - Added 7-day block duration with automatic expiration - Created `blocked_ips` database table for tracking blocked addresses - Added automatic cleanup of expired blocks - Implemented manual IP unblock capability via security dashboard ### Failed Authentication Logging - Added comprehensive failed authentication logging system - Created `failed_auths` database table storing IP, timestamp, username, and password - Implemented threat intelligence features for password pattern analysis - Added automatic cleanup of old authentication records - Logs intentionally include passwords for single-user security analysis ### Session-Based Authentication - Replaced HTTP Basic Auth with modern session-based authentication for admin panel - Integrated gorilla/sessions library for secure session management - Added configurable session secrets via `DDNS_SESSION_SECRET` environment variable - Implemented "Remember Me" functionality with 30-day session duration - Added proper session destruction on logout - Session cookies configured with HttpOnly, Secure, and SameSite attributes - Maintained HTTP Basic Auth for DynDNS API endpoints (device compatibility) ### HTTPS Enforcement - Added intelligent HTTPS detection via multiple header checks - Implemented automatic HTTPS redirect for admin panel when available - Graceful HTTP fallback when HTTPS unavailable - Supports reverse proxy configurations (nginx, Caddy, Traefik) - Detects SSL via X-Forwarded-Proto, X-Forwarded-Ssl, X-Url-Scheme headers - API endpoints remain HTTP-compatible for device support ## 🎨 UI/UX Enhancements ### Authentication UI - Created modern login page with gradient background and clean design - Added HTTPS security indicator (✓ green / ⚠ yellow) - Implemented auto-focus on username field - Added clear error messages for failed login attempts - Created logout confirmation page with redirect options - Removed browser authentication dialog popups ### Navigation & Layout - Changed admin panel URL from `/admin` to `/@` for uniqueness - Updated navigation with unicode icons (🏠 Dashboard, 🔒 Security, ⏏️ Logout) - Added tooltips to all navigation icons - Implemented sticky header that remains visible on scroll - Enhanced responsive design for mobile/tablet access ### Logo Support - Added automatic logo detection and display - Supports PNG, WebP, and SVG formats - Checks `/static/icons/` for logo files - Graceful fallback to text title if no logo found - Maintains aspect ratio and responsive sizing ### Security Dashboard - Created comprehensive security overview page at `/@/security` - Added statistics cards showing active blocks, failed attempts, and total blocks - Implemented recent failed attempts table with sortable columns - Added password reveal/hide functionality with confirmation prompts - Created detailed blocked IPs management page with unblock capability - Created detailed failed authentication logs page with full history - Added visual indicators for security status ## 📊 Data Management ### Data Consistency & Normalization - Implemented automatic lowercase conversion for all usernames and hostnames - Prevents case-sensitivity issues in DNS lookups and authentication - Ensures consistent data storage and retrieval - Handles mixed-case legacy data gracefully ### Automatic Migration - Added on-the-fly migration system for legacy uppercase entries - Migration triggers automatically on first `/@/hosts` page visit - Handles hostname conflicts by appending sequential numbers - Provides detailed migration report in UI showing all changes - Non-destructive migration preserves all host data - One-time execution with persistent migration status tracking ### Validation Updates - Reduced minimum hostname length to 1 character (allows single-letter subdomains) - Reduced minimum username length to 1 character - Reduced minimum password length to 6 characters - Maintained security while improving flexibility ### Username Uniqueness - Removed uniqueness constraint on usernames - Allows multiple hosts to share the same username - Supports different passwords for same username across hosts - Enables more flexible credential management strategies ## 🛡️ Middleware & Request Handling ### IP Blocker Middleware - Created IPBlockerMiddleware to check requests against blocked IPs - Automatic redirect to 127.0.0.1 for blocked addresses - Lightweight performance impact with database lookup - Positioned early in middleware chain for efficiency ### Session Authentication Middleware - Created SessionAuthMiddleware for admin panel protection - Skips authentication check for /login and /logout routes - Redirects unauthenticated users to login page - Validates session integrity on every request - Compatible with reverse proxy configurations ### HTTPS Redirect Middleware - Created HTTPSRedirectMiddleware for admin panel security - Intelligent detection of HTTPS availability - Skips redirect for API endpoints - Handles X-Forwarded-* headers from reverse proxies - Graceful operation when HTTPS unavailable ## 🗄️ Database & Models ### New Tables - Added `failed_auths` table for authentication logging - Added `blocked_ips` table for IP block tracking - Proper foreign key relationships and indexes - Automatic timestamps on all records ### Cleanup Functions - Implemented automatic cleanup of expired IP blocks - Implemented automatic cleanup of old authentication logs - Configurable retention periods - Background cleanup execution ## 🔧 Technical Improvements ### Dependencies - Added `github.com/gorilla/sessions@v1.2.2` for session management - Updated go.mod with proper version constraints - Maintained compatibility with existing dependencies ### Handler Architecture - Separated security logic into dedicated handler files - Created `security.go` for blocking logic and logging - Created `security_dashboard.go` for UI handlers - Created `auth.go` for login/logout and session management - Created `session.go` for session store implementation - Improved code organization and maintainability ### Main Application - Updated routing to support session-based authentication - Added session initialization on startup - Configured route groups for admin panel and API - Middleware ordering optimized for performance and security ## 🐳 Docker & CI/CD ### Multi-Platform Builds & Automated Releases - Created GitHub Actions workflow (`BuildEmAll.yml`) for automated Docker builds - Supports linux/amd64, linux/386, linux/arm/v7, and linux/arm64 platforms - Automatic builds on push to master with dyndns/ directory changes - Intelligent version tagging system: - Extracts version from commit message (e.g., "v1.2.3 Feature description") - Auto-increments patch version from latest git tag - Falls back to date-based versioning (vYY.MM.DD-HHMM) if no tags exist - Tags images with both `:latest` and semantic version tags (`:vX.Y.Z`) - Automatic GitHub release creation with each build - Release includes Docker image reference and commit message as notes - Publishes to Docker Hub (w3kllc/ddns) - Cross-platform compatibility for ARM devices (Raspberry Pi, etc.) - Workflow can be triggered manually via GitHub Actions UI ### Deployment - Enhanced docker-compose.yml example with all new features - Added documentation for environment variable configuration - Included reverse proxy configuration examples - Added security best practices for production deployment - Semantic versioning with automatic release management ## 📝 Documentation ### README Enhancements - Added comprehensive Security Features section - Added Environment Variables reference with descriptions - Added Admin Panel Access documentation - Added Data Consistency & Migration guide - Added API Endpoints documentation - Added UI/UX Enhancements overview - Added Reverse Proxy Configuration examples - Added Docker Configuration best practices - Added CI/CD & Multi-Platform Support details with versioning strategy - Added Semantic Versioning documentation - Added GitHub Release automation details - Added Security Best Practices recommendations - Added Threat Intelligence rationale - Added Migration Guide from original project - Added Troubleshooting section - Added API Reference documentation - Added Roadmap for future features - Updated Credits section - Added Support and Community links ## 🔄 Backward Compatibility ### Maintained Features - DynDNS API endpoints remain unchanged (/update, /nic/update, etc.) - HTTP Basic Auth still supported for API (device compatibility) - Existing host configurations continue working without changes - Database schema additions are non-breaking - All original functionality preserved ### Breaking Changes - Admin panel URL changed from `/admin` to `/@` (intentional, more unique) - Admin authentication method changed (sessions vs basic auth) - Requires `DDNS_SESSION_SECRET` environment variable for session security ## ⚡ Performance Considerations - IP blocker checks are optimized with database indexing - Session validation cached in memory - Automatic cleanup runs asynchronously - Minimal overhead on API endpoint performance - Efficient middleware ordering ## 🎯 Testing Considerations Recommended testing areas: - Login/logout flow with and without HTTPS - IP blocking after 3 failed attempts - Session persistence with remember me - API endpoint authentication (device compatibility) - HTTPS redirect with reverse proxy headers - Password reveal/hide in security dashboard - Hostname migration for legacy uppercase entries - Multi-platform Docker image functionality --- **Total Changes:** - **21 files modified** - **20 new files created** - **~2000+ lines of code added** - **100+ hours of development time** **Compatibility:** - ✅ Backward compatible for DynDNS API - ⚠️ Admin panel URL changed (bookmark update needed) - ✅ All existing hosts continue working - ✅ Database schema additions are additive **Credits:** - Original project: dprandzioch/docker-ddns - Web UI Fork: benjaminbear/docker-ddns-server - Enhanced fork: w3K-one/docker-ddns-server - Major enhancements and security features added This represents a significant enhancement to the original project while maintaining the core DynDNS functionality and adding modern security, authentication, and user experience improvements suitable for production deployment.
This commit is contained in:
w3K
@@ -0,0 +1,98 @@
|
||||
{{define "content"}}
|
||||
<div class="container marketing">
|
||||
<h3 class="text-center mb-4">Blocked IP Addresses</h3>
|
||||
|
||||
<div class="mb-3">
|
||||
<a href="/@/security" class="btn btn-secondary">← Back to Security Dashboard</a>
|
||||
</div>
|
||||
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>IP Address</th>
|
||||
<th>Blocked At</th>
|
||||
<th>Blocked Until</th>
|
||||
<th>Last Attempt</th>
|
||||
<th>Failure Count</th>
|
||||
<th>Reason</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .blockedIPs}}
|
||||
<tr class="{{if .IsBlocked}}table-danger{{else}}table-secondary{{end}}">
|
||||
<td><code>{{.IPAddress}}</code></td>
|
||||
<td>{{.BlockedAt.Format "01/02/2006 15:04"}}</td>
|
||||
<td>{{if .IsPermanent}}
|
||||
<span class="badge badge-dark">Permanent</span>
|
||||
{{else}}
|
||||
{{.BlockedUntil.Format "01/02/2006 15:04"}}
|
||||
{{end}}</td>
|
||||
<td>{{.LastAttemptAt.Format "01/02/2006 15:04"}}</td>
|
||||
<td><span class="badge badge-danger">{{.FailureCount}}</span></td>
|
||||
<td style="max-width: 300px;">{{.Reason}}</td>
|
||||
<td>
|
||||
{{if .IsBlocked}}
|
||||
<span class="badge badge-danger">Active</span>
|
||||
{{else}}
|
||||
<span class="badge badge-secondary">Expired</span>
|
||||
{{end}}
|
||||
</td>
|
||||
<td>
|
||||
{{if .IsBlocked}}
|
||||
<button class="btn btn-sm btn-warning unblock-btn" data-ip="{{.IPAddress}}">Unblock</button>
|
||||
{{else}}
|
||||
<span class="text-muted">N/A</span>
|
||||
{{end}}
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{if not .blockedIPs}}
|
||||
<div class="alert alert-success text-center" role="alert">
|
||||
<h4 class="alert-heading">No Blocked IPs</h4>
|
||||
<p>There are currently no blocked IP addresses. Your site security is doing great!</p>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
console.log('Blocked IPs page JavaScript loaded');
|
||||
|
||||
// Unblock button handler using event delegation
|
||||
$(document).on('click', '.unblock-btn', function(e) {
|
||||
e.preventDefault();
|
||||
var button = $(this);
|
||||
var ip = button.attr('data-ip');
|
||||
|
||||
console.log('Unblock clicked for IP:', ip);
|
||||
|
||||
if (confirm('Are you sure you want to unblock IP: ' + ip + '?')) {
|
||||
// Disable button during request
|
||||
button.prop('disabled', true).text('Unblocking...');
|
||||
|
||||
$.ajax({
|
||||
url: '/@/security/unblock/' + encodeURIComponent(ip),
|
||||
type: 'POST',
|
||||
success: function(result) {
|
||||
console.log('Unblock success:', result);
|
||||
alert('IP ' + ip + ' has been unblocked successfully!');
|
||||
location.reload();
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Unblock failed:', xhr.responseText);
|
||||
alert('Error unblocking IP: ' + (xhr.responseText || error));
|
||||
button.prop('disabled', false).text('Unblock');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Found', $('.unblock-btn').length, 'unblock buttons');
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
@@ -0,0 +1,362 @@
|
||||
{{define "content"}}
|
||||
<div class="container marketing">
|
||||
<h3 class="text-center mb-4">Failed Authentication Attempts</h3>
|
||||
|
||||
<div class="mb-3">
|
||||
<a href="/@/security" class="btn btn-secondary">← Back to Security Dashboard</a>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>⚠️ Security Warning:</strong> This system logs attempted passwords for security analysis.
|
||||
<ul class="mb-0 mt-2">
|
||||
<li>Ensure this database is encrypted and access is strictly controlled</li>
|
||||
<li>Never share or export this data without proper authorization</li>
|
||||
<li>Be aware that users may have mistyped legitimate passwords</li>
|
||||
<li>Comply with relevant data protection regulations (GDPR, etc.)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info" role="alert">
|
||||
<strong>📌 IP Blocking Policy:</strong> Only failed attempts to the admin panel (<code>/@/*</code>) count toward IP blocking.
|
||||
API endpoint failures (like <code>/nic/update</code>) are logged but do NOT trigger automatic IP blocks.
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Alternating yellow shades for API rows */
|
||||
.table-warning-light {
|
||||
background-color: #fff9e6 !important; /* Lighter yellow */
|
||||
}
|
||||
|
||||
.table-warning {
|
||||
background-color: #fff3cd !important; /* Standard yellow */
|
||||
}
|
||||
|
||||
/* Tooltip container for positioning */
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Speech bubble tooltip */
|
||||
.speech-tooltip {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-bottom: 10px;
|
||||
padding: 8px 12px;
|
||||
background: #2c3e50;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-family: 'Courier New', monospace;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s, visibility 0.2s;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Password tooltips: single line, auto-width */
|
||||
.pwd-btn + .speech-tooltip {
|
||||
white-space: nowrap;
|
||||
max-width: 90vw; /* Don't exceed viewport */
|
||||
}
|
||||
|
||||
/* User Agent tooltips: multi-line, 50% table width */
|
||||
.ua-btn + .speech-tooltip,
|
||||
.ua-btn .speech-tooltip {
|
||||
white-space: normal;
|
||||
max-width: 50%; /* 50% of container width */
|
||||
min-width: 200px;
|
||||
word-wrap: break-word;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Arrow pointing down */
|
||||
.speech-tooltip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-top-color: #2c3e50;
|
||||
}
|
||||
|
||||
/* Show tooltip when active */
|
||||
.speech-tooltip.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Clickable tooltip styling with cursor */
|
||||
.tooltip-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip-btn:hover {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.tooltip-btn.active {
|
||||
background-color: #ffc107 !important;
|
||||
}
|
||||
|
||||
/* User Agent button - make it look clickable */
|
||||
.ua-btn {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.ua-btn:hover {
|
||||
background-color: rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
/* Copy feedback animation */
|
||||
.copy-feedback {
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
z-index: 2000;
|
||||
animation: fadeInOut 1.5s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0% { opacity: 0; transform: translateX(-50%) translateY(5px); }
|
||||
20% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
80% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
100% { opacity: 0; transform: translateX(-50%) translateY(-5px); }
|
||||
}
|
||||
|
||||
/* Truncated text styling */
|
||||
.truncated {
|
||||
/* No underline - clean look */
|
||||
}
|
||||
</style>
|
||||
|
||||
<table class="table table-striped" style="font-size: 14px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th>IP Address</th>
|
||||
<th>Username</th>
|
||||
<th>Password Attempted</th>
|
||||
<th>Path</th>
|
||||
<th>User Agent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $index, $auth := .failedAuths}}
|
||||
{{$isAPI := not (hasPrefix $auth.Path "/@/")}}
|
||||
{{$rowClass := ""}}
|
||||
{{if $isAPI}}
|
||||
{{if eq (mod $index 2) 0}}
|
||||
{{$rowClass = "table-warning"}}
|
||||
{{else}}
|
||||
{{$rowClass = "table-warning-light"}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
<tr class="{{$rowClass}}">
|
||||
<td>{{$auth.Timestamp.Format "01/02/2006 15:04:05"}}</td>
|
||||
<td><code>{{$auth.IPAddress}}</code></td>
|
||||
<td>{{if $auth.Username}}<strong>{{$auth.Username}}</strong>{{else}}<em class="text-muted">no credentials</em>{{end}}</td>
|
||||
<td>
|
||||
{{if $auth.Password}}
|
||||
<div class="tooltip-container">
|
||||
<button class="btn btn-sm btn-outline-secondary tooltip-btn pwd-btn">👁</button>
|
||||
<div class="speech-tooltip">
|
||||
<code style="color: #ffc107; font-weight: bold;">{{$auth.Password}}</code>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<em class="text-muted">no password</em>
|
||||
{{end}}
|
||||
</td>
|
||||
<td>
|
||||
<code>{{$auth.Path}}</code>
|
||||
{{if hasPrefix $auth.Path "/@/"}}
|
||||
<span class="badge badge-danger ml-1">Admin</span>
|
||||
{{else}}
|
||||
<span class="badge badge-secondary ml-1">API</span>
|
||||
{{end}}
|
||||
</td>
|
||||
<td>
|
||||
{{if $auth.UserAgent}}
|
||||
{{$ua := $auth.UserAgent}}
|
||||
{{if gt (len $ua) 10}}
|
||||
<div class="tooltip-container">
|
||||
<button class="tooltip-btn ua-btn" title="Click to copy">
|
||||
<span class="truncated">{{slice $ua 0 10}}...</span>
|
||||
</button>
|
||||
<div class="speech-tooltip">
|
||||
<span style="color: #fff;">{{$ua}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<span class="ua-btn" style="cursor: pointer;" title="Click to copy">{{$ua}}</span>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<em class="text-muted">none</em>
|
||||
{{end}}
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{if not .failedAuths}}
|
||||
<div class="alert alert-success text-center" role="alert">
|
||||
<h4 class="alert-heading">No Failed Attempts</h4>
|
||||
<p>There are no recorded failed authentication attempts. Excellent!</p>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div class="alert alert-info mt-4" role="alert">
|
||||
<strong>📋 Note:</strong> Failed authentication records are automatically cleaned up after 30 days.
|
||||
IP addresses are blocked after <strong>3 failed ADMIN PANEL attempts</strong> within a 72-hour period and blocked for 7 days.
|
||||
<br><strong>API endpoint failures do NOT trigger IP blocking.</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
console.log('Failed auths page JavaScript loaded');
|
||||
|
||||
// Helper function to copy text to clipboard
|
||||
function copyToClipboard(text, button) {
|
||||
// Modern clipboard API
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(function() {
|
||||
showCopyFeedback(button, 'Copied!');
|
||||
}).catch(function(err) {
|
||||
console.error('Failed to copy:', err);
|
||||
fallbackCopy(text, button);
|
||||
});
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
fallbackCopy(text, button);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback copy method
|
||||
function fallbackCopy(text, button) {
|
||||
var textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showCopyFeedback(button, 'Copied!');
|
||||
} catch (err) {
|
||||
console.error('Fallback copy failed:', err);
|
||||
showCopyFeedback(button, 'Copy failed');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
// Show copy feedback animation
|
||||
function showCopyFeedback(button, message) {
|
||||
var feedback = $('<div class="copy-feedback">' + message + '</div>');
|
||||
$(button).closest('.tooltip-container, td').append(feedback);
|
||||
setTimeout(function() {
|
||||
feedback.remove();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Password tooltips: Click to toggle AND copy
|
||||
$(document).on('click', '.pwd-btn', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var button = $(this);
|
||||
var tooltip = button.siblings('.speech-tooltip');
|
||||
var password = button.closest('.tooltip-container').find('.speech-tooltip code').text();
|
||||
|
||||
// Copy password to clipboard
|
||||
copyToClipboard(password, button);
|
||||
|
||||
// Close all other tooltips first
|
||||
$('.speech-tooltip').removeClass('active');
|
||||
$('.tooltip-btn').removeClass('active');
|
||||
|
||||
// Toggle this one
|
||||
if (tooltip.hasClass('active')) {
|
||||
tooltip.removeClass('active');
|
||||
button.removeClass('active');
|
||||
} else {
|
||||
tooltip.addClass('active');
|
||||
button.addClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
// User Agent tooltips: Hover to show, Click to copy
|
||||
$(document).on('mouseenter', '.ua-btn', function() {
|
||||
var tooltip = $(this).siblings('.speech-tooltip');
|
||||
tooltip.addClass('active');
|
||||
});
|
||||
|
||||
$(document).on('mouseleave', '.ua-btn', function() {
|
||||
var tooltip = $(this).siblings('.speech-tooltip');
|
||||
// Small delay to allow moving mouse to tooltip
|
||||
setTimeout(function() {
|
||||
if (!tooltip.is(':hover')) {
|
||||
tooltip.removeClass('active');
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Click on User Agent to copy
|
||||
$(document).on('click', '.ua-btn', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var button = $(this);
|
||||
var userAgent = button.closest('.tooltip-container').find('.speech-tooltip span').text();
|
||||
|
||||
// If there's no tooltip (short UA), get text directly
|
||||
if (!userAgent) {
|
||||
userAgent = button.text().trim();
|
||||
}
|
||||
|
||||
copyToClipboard(userAgent, button);
|
||||
});
|
||||
|
||||
// Keep tooltip open if hovering over it
|
||||
$(document).on('mouseenter', '.ua-btn + .speech-tooltip', function() {
|
||||
$(this).addClass('active');
|
||||
});
|
||||
|
||||
$(document).on('mouseleave', '.ua-btn + .speech-tooltip', function() {
|
||||
$(this).removeClass('active');
|
||||
});
|
||||
|
||||
// Close password tooltips when clicking anywhere else on page
|
||||
$(document).on('click', function(e) {
|
||||
if (!$(e.target).closest('.pwd-btn').length) {
|
||||
$('.pwd-btn').removeClass('active');
|
||||
$('.pwd-btn').siblings('.speech-tooltip').removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Found', $('.pwd-btn').length, 'password buttons');
|
||||
console.log('Found', $('.ua-btn').length, 'user agent buttons');
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
@@ -8,6 +8,16 @@
|
||||
<link rel="icon" href="/static/icons/favicon.ico">
|
||||
|
||||
<title>{{.title}}</title>
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="/static/js/jquery-3.4.1.min.js"></script>
|
||||
<!-- popper.js@1.16.0 -->
|
||||
<script src="/static/js/popper.min.js"></script>
|
||||
<script src="/static/js/bootstrap.min.js"></script>
|
||||
<script src="/static/js/jquery-ui.min.js"></script>
|
||||
<script src="/static/js/actions-1.0.0.js"></script>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
|
||||
@@ -17,6 +27,42 @@
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="/static/css/narrow-jumbotron.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* Add padding to the top of the body to prevent content from being hidden under the sticky header */
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.header {
|
||||
/* Make the header sticky */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
/* Ensure it stays on top of other content */
|
||||
z-index: 1020;
|
||||
/* Give it a solid background to prevent content from showing through */
|
||||
background-color: #fff;
|
||||
/* Add some padding and a border for better visual separation */
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.logo {
|
||||
/* Control the size of the logo image */
|
||||
max-height: 128px;
|
||||
width: auto;
|
||||
position: fixed;
|
||||
margin-top: -20px;
|
||||
margin-left: -40px;
|
||||
}
|
||||
.copyleft {
|
||||
display: inline-block;
|
||||
-moz-transform: scale(-1, 1);
|
||||
-webkit-transform: scale(-1, 1);
|
||||
-o-transform: scale(-1, 1);
|
||||
-ms-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -27,40 +73,38 @@
|
||||
<nav>
|
||||
<ul class="nav nav-pills float-right">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-hosts" href="/admin/hosts">Hosts</a>
|
||||
<a class="nav-link nav-hosts" href="/@/hosts">Hosts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-cnames" href="/admin/cnames">CNames</a>
|
||||
<a class="nav-link nav-cnames" href="/@/cnames">CNames</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-logs" href="/admin/logs">Logs</a>
|
||||
<a class="nav-link nav-logs" href="/@/logs">Logs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-logout" href="/admin/logout" id="logout">Logout</a>
|
||||
<a class="nav-link nav-security" href="/@/security" title="Security"> 🔒 </a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-logout" href="/@/logout" id="logout"> ⏏️ </a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h3 class="text-muted">{{.title}}</h3>
|
||||
<!-- Conditionally display logo or title text -->
|
||||
{{ if .logoPath }}
|
||||
<a href="/@/hosts"><img src="{{.logoPath}}" alt="{{.title}}" class="logo"></a>
|
||||
{{ else }}
|
||||
<h3 class="text-muted">{{.title}}</h3>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Page Content -->
|
||||
{{template "content" .}}
|
||||
|
||||
<footer class="footer">
|
||||
<p>© {{.title}} {{year}}</p>
|
||||
<p><span class="copyleft">©</span> <a href="{{.poweredByUrl}}" target="_blank">{{.poweredBy}}</a> {{year}}</p>
|
||||
</footer>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="/static/js/jquery-3.4.1.min.js"></script>
|
||||
<!-- popper.js@1.16.0 -->
|
||||
<script src="/static/js/popper.min.js"></script>
|
||||
<script src="/static/js/bootstrap.min.js"></script>
|
||||
<script src="/static/js/jquery-ui.min.js"></script>
|
||||
<script src="/static/js/actions-1.0.0.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -51,4 +51,12 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{ if .migrationReport }}
|
||||
<div class="alert alert-info">
|
||||
<strong>Database Migration Report:</strong>
|
||||
<p>The following legacy entries were automatically converted to lowercase. You can copy this for your records.</p>
|
||||
<textarea class="form-control" rows="5" readonly>{{ .migrationReport }}</textarea>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{end}}
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
{{define "content"}}
|
||||
<style>
|
||||
/* Hide the header/navigation on login page */
|
||||
.header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Override container styles for full-page login */
|
||||
.container {
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Full-page background */
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.login-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.llogo {
|
||||
max-height: 80px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.login-icon {
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px;
|
||||
font-weight: 500;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-login:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.remember-me {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.security-note {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.https-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border-radius: 4px;
|
||||
font-size: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.https-indicator.insecure {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
/* Hide footer on login page */
|
||||
.footer {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="login-wrapper">
|
||||
<div class="login-container">
|
||||
<div class="logo-container">
|
||||
{{if .logoPath}}
|
||||
<img src="{{.logoPath}}" alt="{{.title}}" class="llogo">
|
||||
{{else}}
|
||||
<div class="login-icon">🔐</div>
|
||||
<h2 class="login-title">{{.title}}</h2>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
{{if .error}}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
{{if eq .error "invalid_credentials"}}
|
||||
<strong>Login Failed!</strong> Invalid username or password.
|
||||
{{else if eq .error "authentication_error"}}
|
||||
<strong>Error!</strong> Authentication system error. Please try again.
|
||||
{{else if eq .error "session_error"}}
|
||||
<strong>Error!</strong> Could not create session. Please try again.
|
||||
{{else}}
|
||||
<strong>Error!</strong> {{.error}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<form method="POST" action="/@/login">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
autofocus
|
||||
placeholder="Enter username"
|
||||
autocomplete="username">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
placeholder="Enter password"
|
||||
autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<div class="remember-me">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="remember_me"
|
||||
name="remember_me">
|
||||
<label class="custom-control-label" for="remember_me">
|
||||
Remember me for 30 days
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-login btn-block">
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="security-note">
|
||||
<small>
|
||||
🔒 Your credentials are protected<br>
|
||||
Session expires after 24 hours (or 30 days if remembered)<br>
|
||||
<div id="https-status"></div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Check if HTTPS is enabled
|
||||
(function() {
|
||||
var isHTTPS = window.location.protocol === 'https:';
|
||||
var statusDiv = document.getElementById('https-status');
|
||||
|
||||
if (isHTTPS) {
|
||||
statusDiv.innerHTML = '<div class="https-indicator">✓ Secure HTTPS Connection</div>';
|
||||
} else {
|
||||
statusDiv.innerHTML = '<div class="https-indicator insecure">⚠ HTTP Connection (HTTPS Recommended)</div>';
|
||||
}
|
||||
})();
|
||||
|
||||
// Focus on username field
|
||||
document.getElementById('username').focus();
|
||||
</script>
|
||||
{{end}}
|
||||
@@ -0,0 +1,202 @@
|
||||
{{define "content"}}
|
||||
<style>
|
||||
/* Hide the header/navigation on logout page */
|
||||
.header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Override container styles for full-page logout */
|
||||
.container {
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Full-page background */
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.logout-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.logout-container {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
padding: 3rem 2rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logout-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 30px;
|
||||
font-weight: 500;
|
||||
transition: transform 0.2s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-login:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.llogo {
|
||||
max-height: 80px;
|
||||
max-width: 200px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Hide footer on logout page */
|
||||
.footer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.redirect-notice {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: #f0f0f0;
|
||||
border-radius: 5px;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.redirect-url {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.redirect-url:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="logout-wrapper">
|
||||
<div class="logout-container">
|
||||
{{if .logoPath}}
|
||||
<img src="{{.logoPath}}" alt="{{.title}}" class="llogo">
|
||||
{{end}}
|
||||
|
||||
<div class="logout-icon">👋</div>
|
||||
<h1>Logged Out Successfully</h1>
|
||||
<p>Your session has been ended and you have been securely logged out.</p>
|
||||
|
||||
{{if .logoutUrl}}
|
||||
<div class="redirect-notice">
|
||||
<p style="margin-bottom: 0.5rem;">Redirecting in <span class="countdown" id="countdown">7</span> seconds...</p>
|
||||
<p style="margin-bottom: 0.5rem; font-size: 0.85rem;">
|
||||
to: <a href="{{.logoutUrl}}" class="redirect-url">{{.logoutUrl}}</a>
|
||||
</p>
|
||||
<button onclick="cancelRedirect()" class="btn btn-sm btn-outline-secondary mt-2">Cancel Auto-Redirect</button>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<a href="/@/login" class="btn btn-login mt-3">Log In Again</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
// Check if logout URL is provided
|
||||
var logoutUrl = {{if .logoutUrl}}"{{.logoutUrl}}"{{else}}null{{end}};
|
||||
var redirectTimer = null;
|
||||
var countdownInterval = null;
|
||||
var secondsLeft = 7;
|
||||
|
||||
if (logoutUrl) {
|
||||
console.log('Auto-redirect enabled. Redirecting to:', logoutUrl, 'in', secondsLeft, 'seconds');
|
||||
|
||||
// Update countdown display
|
||||
countdownInterval = setInterval(function() {
|
||||
secondsLeft--;
|
||||
var countdownElement = document.getElementById('countdown');
|
||||
if (countdownElement) {
|
||||
countdownElement.textContent = secondsLeft;
|
||||
}
|
||||
|
||||
if (secondsLeft <= 0) {
|
||||
clearInterval(countdownInterval);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// Set redirect timer
|
||||
redirectTimer = setTimeout(function() {
|
||||
console.log('Redirecting to:', logoutUrl);
|
||||
window.location.href = logoutUrl;
|
||||
}, 7000); // 7 seconds
|
||||
} else {
|
||||
console.log('No logout URL configured. Staying on logout page.');
|
||||
}
|
||||
|
||||
// Function to cancel redirect
|
||||
window.cancelRedirect = function() {
|
||||
if (redirectTimer) {
|
||||
clearTimeout(redirectTimer);
|
||||
redirectTimer = null;
|
||||
}
|
||||
if (countdownInterval) {
|
||||
clearInterval(countdownInterval);
|
||||
countdownInterval = null;
|
||||
}
|
||||
|
||||
var redirectNotice = document.querySelector('.redirect-notice');
|
||||
if (redirectNotice) {
|
||||
redirectNotice.innerHTML = '<p style="color: #28a745; margin: 0;">✓ Auto-redirect cancelled</p>';
|
||||
}
|
||||
|
||||
console.log('Auto-redirect cancelled by user');
|
||||
};
|
||||
|
||||
// Cancel redirect if user clicks "Log In Again" button
|
||||
var loginButton = document.querySelector('.btn-login');
|
||||
if (loginButton) {
|
||||
loginButton.addEventListener('click', function() {
|
||||
if (redirectTimer) {
|
||||
clearTimeout(redirectTimer);
|
||||
}
|
||||
if (countdownInterval) {
|
||||
clearInterval(countdownInterval);
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{{end}}
|
||||
@@ -0,0 +1,433 @@
|
||||
{{define "content"}}
|
||||
<div class="container marketing">
|
||||
<h3 class="text-center mb-4">Security Dashboard</h3>
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card text-white bg-danger mb-3">
|
||||
<div class="card-header">Active Blocks</div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{{.activeBlocks}}</h2>
|
||||
<p class="card-text">IP addresses currently blocked</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card text-white bg-warning mb-3">
|
||||
<div class="card-header">Failed Attempts</div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{{len .failedAuths}}</h2>
|
||||
<p class="card-text">Recent failed login attempts</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card text-white bg-info mb-3">
|
||||
<div class="card-header">Total Blocks</div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{{len .blockedIPs}}</h2>
|
||||
<p class="card-text">Total IP blocks (active + expired)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recently Blocked IPs -->
|
||||
<h4 class="mb-3">Recently Blocked IPs</h4>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>IP Address</th>
|
||||
<th>Blocked At</th>
|
||||
<th>Blocked Until</th>
|
||||
<th>Failures</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .blockedIPs}}
|
||||
{{if .IsBlocked}}
|
||||
<tr>
|
||||
<td><code>{{.IPAddress}}</code></td>
|
||||
<td>{{.BlockedAt.Format "01/02/2006 15:04"}}</td>
|
||||
<td>{{if .IsPermanent}}Permanent{{else}}{{.BlockedUntil.Format "01/02/2006 15:04"}}{{end}}</td>
|
||||
<td><span class="badge badge-danger">{{.FailureCount}}</span></td>
|
||||
<td><span class="badge badge-danger">Active</span></td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-warning unblock-btn" data-ip="{{.IPAddress}}">Unblock</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Recent Failed Authentication Attempts -->
|
||||
<h4 class="mb-3 mt-4">Recent Failed Authentication Attempts</h4>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>⚠️ Security Warning:</strong> This system logs attempted passwords for security analysis. Ensure database access is strictly controlled.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<strong>📌 IP Blocking Policy:</strong> Only failed attempts to the admin panel (<code>/@/*</code>) count toward IP blocking.
|
||||
API endpoint failures are logged but do NOT trigger automatic blocks.
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Alternating yellow shades for API rows */
|
||||
.table-warning-light {
|
||||
background-color: #fff9e6 !important; /* Lighter yellow */
|
||||
}
|
||||
|
||||
.table-warning {
|
||||
background-color: #fff3cd !important; /* Standard yellow */
|
||||
}
|
||||
|
||||
/* Tooltip container for positioning */
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Speech bubble tooltip */
|
||||
.speech-tooltip {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-bottom: 10px;
|
||||
padding: 8px 12px;
|
||||
background: #2c3e50;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-family: 'Courier New', monospace;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s, visibility 0.2s;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Password tooltips: single line, auto-width */
|
||||
.pwd-btn + .speech-tooltip {
|
||||
white-space: nowrap;
|
||||
max-width: 90vw; /* Don't exceed viewport */
|
||||
}
|
||||
|
||||
/* User Agent tooltips: multi-line, 50% table width */
|
||||
.ua-btn + .speech-tooltip,
|
||||
.ua-btn .speech-tooltip {
|
||||
white-space: normal;
|
||||
max-width: 50%; /* 50% of container width */
|
||||
min-width: 200px;
|
||||
word-wrap: break-word;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Arrow pointing down */
|
||||
.speech-tooltip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-top-color: #2c3e50;
|
||||
}
|
||||
|
||||
/* Show tooltip when active */
|
||||
.speech-tooltip.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Clickable tooltip styling with cursor */
|
||||
.tooltip-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip-btn:hover {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.tooltip-btn.active {
|
||||
background-color: #ffc107 !important;
|
||||
}
|
||||
|
||||
/* User Agent button - make it look clickable */
|
||||
.ua-btn {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.ua-btn:hover {
|
||||
background-color: rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
/* Copy feedback animation */
|
||||
.copy-feedback {
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
z-index: 2000;
|
||||
animation: fadeInOut 1.5s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0% { opacity: 0; transform: translateX(-50%) translateY(5px); }
|
||||
20% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
80% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
100% { opacity: 0; transform: translateX(-50%) translateY(-5px); }
|
||||
}
|
||||
|
||||
/* Truncated text styling */
|
||||
.truncated {
|
||||
/* No underline - clean look */
|
||||
}
|
||||
</style>
|
||||
|
||||
<table class="table table-striped" style="font-size: 14px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th>IP Address</th>
|
||||
<th>Username</th>
|
||||
<th>Password</th>
|
||||
<th>Path</th>
|
||||
<th>User Agent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $index, $auth := .failedAuths}}
|
||||
{{$isAPI := not (hasPrefix $auth.Path "/@/")}}
|
||||
{{$rowClass := ""}}
|
||||
{{if $isAPI}}
|
||||
{{if eq (mod $index 2) 0}}
|
||||
{{$rowClass = "table-warning"}}
|
||||
{{else}}
|
||||
{{$rowClass = "table-warning-light"}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
<tr class="{{$rowClass}}">
|
||||
<td>{{$auth.Timestamp.Format "01/02/2006 15:04:05"}}</td>
|
||||
<td><code>{{$auth.IPAddress}}</code></td>
|
||||
<td>{{if $auth.Username}}{{$auth.Username}}{{else}}<em>none</em>{{end}}</td>
|
||||
<td>
|
||||
{{if $auth.Password}}
|
||||
<div class="tooltip-container">
|
||||
<button class="btn btn-sm btn-outline-secondary tooltip-btn pwd-btn">👁</button>
|
||||
<div class="speech-tooltip">
|
||||
<code style="color: #ffc107; font-weight: bold;">{{$auth.Password}}</code>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<em>none</em>
|
||||
{{end}}
|
||||
</td>
|
||||
<td>
|
||||
<code>{{$auth.Path}}</code>
|
||||
{{if hasPrefix $auth.Path "/@/"}}
|
||||
<span class="badge badge-danger ml-1">Admin</span>
|
||||
{{else}}
|
||||
<span class="badge badge-secondary ml-1">API</span>
|
||||
{{end}}
|
||||
</td>
|
||||
<td>
|
||||
{{if $auth.UserAgent}}
|
||||
{{$ua := $auth.UserAgent}}
|
||||
{{if gt (len $ua) 10}}
|
||||
<div class="tooltip-container">
|
||||
<button class="tooltip-btn ua-btn" title="Click to copy">
|
||||
<span class="truncated">{{slice $ua 0 10}}...</span>
|
||||
</button>
|
||||
<div class="speech-tooltip">
|
||||
<span style="color: #fff;">{{$ua}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<span class="ua-btn" style="cursor: pointer;" title="Click to copy">{{$ua}}</span>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<em>none</em>
|
||||
{{end}}
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<a href="/@/security/blocked-ips" class="btn btn-primary">View All Blocked IPs</a>
|
||||
<a href="/@/security/failed-auths" class="btn btn-secondary">View All Failed Attempts</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
console.log('Security dashboard JavaScript loaded');
|
||||
|
||||
// Helper function to copy text to clipboard
|
||||
function copyToClipboard(text, button) {
|
||||
// Modern clipboard API
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(function() {
|
||||
showCopyFeedback(button, 'Copied!');
|
||||
}).catch(function(err) {
|
||||
console.error('Failed to copy:', err);
|
||||
fallbackCopy(text, button);
|
||||
});
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
fallbackCopy(text, button);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback copy method
|
||||
function fallbackCopy(text, button) {
|
||||
var textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showCopyFeedback(button, 'Copied!');
|
||||
} catch (err) {
|
||||
console.error('Fallback copy failed:', err);
|
||||
showCopyFeedback(button, 'Copy failed');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
// Show copy feedback animation
|
||||
function showCopyFeedback(button, message) {
|
||||
var feedback = $('<div class="copy-feedback">' + message + '</div>');
|
||||
$(button).closest('.tooltip-container, td').append(feedback);
|
||||
setTimeout(function() {
|
||||
feedback.remove();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Unblock IP button handler
|
||||
$(document).on('click', '.unblock-btn', function(e) {
|
||||
e.preventDefault();
|
||||
var button = $(this);
|
||||
var ip = button.attr('data-ip');
|
||||
|
||||
console.log('Unblock button clicked for IP:', ip);
|
||||
|
||||
if (confirm('Are you sure you want to unblock IP: ' + ip + '?')) {
|
||||
$.ajax({
|
||||
url: '/@/security/unblock/' + encodeURIComponent(ip),
|
||||
type: 'POST',
|
||||
success: function(result) {
|
||||
console.log('Unblock success:', result);
|
||||
alert('IP ' + ip + ' has been unblocked successfully!');
|
||||
location.reload();
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Unblock error:', xhr.responseText);
|
||||
alert('Error unblocking IP: ' + (xhr.responseText || error));
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Password tooltips: Click to toggle AND copy
|
||||
$(document).on('click', '.pwd-btn', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var button = $(this);
|
||||
var tooltip = button.siblings('.speech-tooltip');
|
||||
var password = button.closest('.tooltip-container').find('.speech-tooltip code').text();
|
||||
|
||||
// Copy password to clipboard
|
||||
copyToClipboard(password, button);
|
||||
|
||||
// Close all other tooltips first
|
||||
$('.speech-tooltip').removeClass('active');
|
||||
$('.tooltip-btn').removeClass('active');
|
||||
|
||||
// Toggle this one
|
||||
if (tooltip.hasClass('active')) {
|
||||
tooltip.removeClass('active');
|
||||
button.removeClass('active');
|
||||
} else {
|
||||
tooltip.addClass('active');
|
||||
button.addClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
// User Agent tooltips: Hover to show, Click to copy
|
||||
$(document).on('mouseenter', '.ua-btn', function() {
|
||||
var tooltip = $(this).siblings('.speech-tooltip');
|
||||
tooltip.addClass('active');
|
||||
});
|
||||
|
||||
$(document).on('mouseleave', '.ua-btn', function() {
|
||||
var tooltip = $(this).siblings('.speech-tooltip');
|
||||
// Small delay to allow moving mouse to tooltip
|
||||
setTimeout(function() {
|
||||
if (!tooltip.is(':hover')) {
|
||||
tooltip.removeClass('active');
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Click on User Agent to copy
|
||||
$(document).on('click', '.ua-btn', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var button = $(this);
|
||||
var userAgent = button.closest('.tooltip-container').find('.speech-tooltip span').text();
|
||||
|
||||
// If there's no tooltip (short UA), get text directly
|
||||
if (!userAgent) {
|
||||
userAgent = button.text().trim();
|
||||
}
|
||||
|
||||
copyToClipboard(userAgent, button);
|
||||
});
|
||||
|
||||
// Keep tooltip open if hovering over it
|
||||
$(document).on('mouseenter', '.ua-btn + .speech-tooltip', function() {
|
||||
$(this).addClass('active');
|
||||
});
|
||||
|
||||
$(document).on('mouseleave', '.ua-btn + .speech-tooltip', function() {
|
||||
$(this).removeClass('active');
|
||||
});
|
||||
|
||||
// Close password tooltips when clicking anywhere else on page
|
||||
$(document).on('click', function(e) {
|
||||
if (!$(e.target).closest('.pwd-btn').length) {
|
||||
$('.pwd-btn').removeClass('active');
|
||||
$('.pwd-btn').siblings('.speech-tooltip').removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Event handlers attached. Found', $('.unblock-btn').length, 'unblock buttons');
|
||||
console.log('Event handlers attached. Found', $('.pwd-btn').length, 'password buttons');
|
||||
console.log('Event handlers attached. Found', $('.ua-btn').length, 'user agent buttons');
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user