mirror of
https://github.com/jeffcaldwellca/mkcertWeb.git
synced 2026-01-06 04:39:57 -06:00
229 lines
11 KiB
HTML
229 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>mkcert Web UI</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<button class="theme-toggle" id="theme-toggle">
|
|
<i class="fas fa-sun"></i> Light Mode
|
|
</button>
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div>
|
|
<h1><i class="fas fa-certificate"></i> mkcert Web UI</h1>
|
|
<p>Manage SSL certificates with mkcert CLI</p>
|
|
</div>
|
|
<div id="auth-controls" style="display: none;">
|
|
<span id="username-display" style="margin-right: 15px; color: var(--secondary-color);"></span>
|
|
<button id="logout-btn" class="btn btn-logout">
|
|
<i class="fas fa-sign-out-alt"></i> Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation -->
|
|
<nav style="background: var(--background-color); padding: 10px 0; margin: 20px 0; border-radius: 8px; border: 1px solid var(--border-color);">
|
|
<div style="display: flex; gap: 20px; justify-content: center;">
|
|
<a href="/" style="color: var(--primary-color); text-decoration: none; padding: 8px 16px; border-radius: 4px; background: var(--primary-color); color: white;">
|
|
<i class="fas fa-home"></i> Certificate Manager
|
|
</a>
|
|
<a href="/scep.html" style="color: var(--primary-color); text-decoration: none; padding: 8px 16px; border-radius: 4px; border: 1px solid var(--primary-color); transition: all 0.3s;">
|
|
<i class="fas fa-satellite-dish"></i> SCEP Service
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Status Section -->
|
|
<section class="status-section">
|
|
<h2><i class="fas fa-info-circle"></i> System Status</h2>
|
|
<div id="status-info" class="status-card">
|
|
<div class="loading">
|
|
<i class="fas fa-spinner fa-spin"></i> Checking mkcert status...
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Root CA Section -->
|
|
<section class="rootca-section" id="rootca-section">
|
|
<h2><i class="fas fa-shield-alt"></i> Root Certificate Authority</h2>
|
|
<div id="rootca-info" class="rootca-card">
|
|
<div class="loading">
|
|
<i class="fas fa-spinner fa-spin"></i> Loading CA information...
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Certificate Generation Section -->
|
|
<section class="generate-section">
|
|
<h2><i class="fas fa-plus-circle"></i> Generate New Certificate</h2>
|
|
<div class="generate-card">
|
|
<form id="generate-form">
|
|
<div class="form-group">
|
|
<label for="domains">Domains (one per line):</label>
|
|
<textarea id="domains" placeholder="localhost 127.0.0.1 *.example.com example.com" rows="4" required></textarea>
|
|
<small class="help-text">Enter domain names, IP addresses, or wildcards. One per line.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="format">Certificate Format:</label>
|
|
<select id="format" class="form-select">
|
|
<option value="pem">PEM (.pem / -key.pem)</option>
|
|
<option value="crt">CRT/KEY (.crt / .key)</option>
|
|
</select>
|
|
<small class="help-text">Choose certificate file format. PEM is standard, CRT/KEY is common for web servers.</small>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-magic"></i> Generate Certificate
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Certificate Upload Section -->
|
|
<section class="upload-section">
|
|
<h2><i class="fas fa-upload"></i> Upload Certificate Files</h2>
|
|
<div class="upload-card">
|
|
<div class="upload-dropzone" id="upload-dropzone">
|
|
<div class="upload-icon">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
</div>
|
|
<div class="upload-text">Drag & Drop Certificate Files</div>
|
|
<div class="upload-subtext">or click to select files</div>
|
|
<div class="file-types">Supported: .pem, .crt, .key, .cer files</div>
|
|
</div>
|
|
<input type="file" id="file-input" multiple accept=".pem,.crt,.key,.cer,.p7b,.p7c,.pfx,.p12">
|
|
|
|
<div class="upload-progress" id="upload-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
<div class="progress-text" id="progress-text">Uploading files...</div>
|
|
</div>
|
|
|
|
<div class="upload-results" id="upload-results"></div>
|
|
|
|
<div class="file-list" id="file-list"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Email & Monitoring Configuration Section -->
|
|
<section class="notifications-section">
|
|
<h2><i class="fas fa-bell"></i> Notifications & Monitoring</h2>
|
|
|
|
<!-- Email Status Card -->
|
|
<div class="notification-card">
|
|
<h3><i class="fas fa-envelope"></i> Email Notifications</h3>
|
|
<div id="email-status" class="notification-status">
|
|
<div class="loading">
|
|
<i class="fas fa-spinner fa-spin"></i> Checking email configuration...
|
|
</div>
|
|
</div>
|
|
<div class="notification-actions" id="email-actions" style="display: none;">
|
|
<button id="test-email-btn" class="btn btn-secondary">
|
|
<i class="fas fa-paper-plane"></i> Send Test Email
|
|
</button>
|
|
<button id="verify-smtp-btn" class="btn btn-outline">
|
|
<i class="fas fa-check-circle"></i> Verify SMTP
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monitoring Status Card -->
|
|
<div class="notification-card">
|
|
<h3><i class="fas fa-shield-alt"></i> Certificate Monitoring</h3>
|
|
<div id="monitoring-status" class="notification-status">
|
|
<div class="loading">
|
|
<i class="fas fa-spinner fa-spin"></i> Checking monitoring status...
|
|
</div>
|
|
</div>
|
|
<div class="notification-actions" id="monitoring-actions" style="display: none;">
|
|
<button id="check-expiry-btn" class="btn btn-secondary">
|
|
<i class="fas fa-search"></i> Check Now
|
|
</button>
|
|
<button id="start-monitoring-btn" class="btn btn-success" style="display: none;">
|
|
<i class="fas fa-play"></i> Start Monitoring
|
|
</button>
|
|
<button id="stop-monitoring-btn" class="btn btn-warning" style="display: none;">
|
|
<i class="fas fa-stop"></i> Stop Monitoring
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expiring Certificates Card -->
|
|
<div class="notification-card" id="expiring-certs-card" style="display: none;">
|
|
<h3><i class="fas fa-exclamation-triangle"></i> Expiring Certificates</h3>
|
|
<div id="expiring-certs-list"></div>
|
|
</div>
|
|
|
|
<!-- Configuration Help -->
|
|
<div class="notification-help">
|
|
<details>
|
|
<summary><i class="fas fa-question-circle"></i> Configuration Help</summary>
|
|
<div class="help-content">
|
|
<h4>Email Notifications</h4>
|
|
<p>To enable email notifications, configure these environment variables:</p>
|
|
<ul>
|
|
<li><code>EMAIL_NOTIFICATIONS_ENABLED=true</code></li>
|
|
<li><code>SMTP_HOST=your-smtp-server.com</code></li>
|
|
<li><code>SMTP_USER=your-email@domain.com</code></li>
|
|
<li><code>SMTP_PASSWORD=your-password</code></li>
|
|
<li><code>EMAIL_TO=admin@domain.com,ops@domain.com</code></li>
|
|
</ul>
|
|
|
|
<h4>Certificate Monitoring</h4>
|
|
<p>To enable automatic certificate monitoring:</p>
|
|
<ul>
|
|
<li><code>CERT_MONITORING_ENABLED=true</code></li>
|
|
<li><code>CERT_CHECK_INTERVAL=0 8 * * *</code> (daily at 8 AM)</li>
|
|
<li><code>CERT_WARNING_DAYS=30</code> (warn 30 days before expiry)</li>
|
|
<li><code>CERT_CRITICAL_DAYS=7</code> (critical 7 days before expiry)</li>
|
|
</ul>
|
|
|
|
<p>See <code>.env.example</code> for complete configuration options.</p>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Certificates List Section -->
|
|
<section class="certificates-section">
|
|
<h2><i class="fas fa-list"></i> Existing Certificates</h2>
|
|
<div class="certificates-controls">
|
|
<button id="refresh-btn" class="btn btn-refresh">
|
|
<i class="fas fa-sync-alt"></i> Refresh
|
|
</button>
|
|
</div>
|
|
<div id="certificates-list" class="certificates-list">
|
|
<div class="loading">
|
|
<i class="fas fa-spinner fa-spin"></i> Loading certificates...
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Alerts -->
|
|
<div id="alerts-container"></div>
|
|
</div>
|
|
|
|
<!-- Modal for CA Installation -->
|
|
<div id="ca-modal" class="modal">
|
|
<div class="modal-content">
|
|
<h3><i class="fas fa-shield-alt"></i> Install Root CA</h3>
|
|
<p>The mkcert root Certificate Authority (CA) is not installed. You need to install it to create trusted certificates for local development.</p>
|
|
<div class="modal-actions">
|
|
<button id="install-ca-btn" class="btn btn-primary">
|
|
<i class="fas fa-download"></i> Install CA
|
|
</button>
|
|
<button id="cancel-ca-btn" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|