peerpigeon
Version:
WebRTC-based peer-to-peer mesh networking library with intelligent routing and signaling server
428 lines (366 loc) • 16.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PeerPigeon - Crypto Test Suite</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="assets/images/favicon.png">
<style>
.crypto-test-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.test-section {
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.test-section h3 {
margin: 0 0 15px 0;
color: #333;
}
.test-controls {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 15px 0;
}
.test-result {
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
padding: 15px;
margin: 10px 0;
font-family: monospace;
font-size: 12px;
max-height: 200px;
overflow-y: auto;
}
.test-result.success {
border-color: #28a745;
background-color: #d4edda;
}
.test-result.error {
border-color: #dc3545;
background-color: #f8d7da;
}
.test-result.warning {
border-color: #ffc107;
background-color: #fff3cd;
}
.crypto-status {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin: 20px 0;
}
.status-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
padding: 15px;
}
.status-card h4 {
margin: 0 0 10px 0;
color: #555;
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
}
.status-indicator.active {
background-color: #28a745;
}
.status-indicator.inactive {
background-color: #dc3545;
}
.status-indicator.warning {
background-color: #ffc107;
}
.key-display {
font-family: monospace;
font-size: 10px;
word-break: break-all;
background: #f8f9fa;
padding: 8px;
border-radius: 4px;
margin: 5px 0;
}
.performance-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin: 15px 0;
}
.metric-item {
text-align: center;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.metric-value {
font-size: 18px;
font-weight: bold;
color: #007bff;
}
.metric-label {
font-size: 12px;
color: #666;
margin-top: 5px;
}
.peer-keys-list {
max-height: 150px;
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
}
.peer-key-item {
padding: 8px 12px;
border-bottom: 1px solid #eee;
font-family: monospace;
font-size: 11px;
}
.peer-key-item:last-child {
border-bottom: none;
}
.test-message-area {
margin: 15px 0;
}
.test-message-area textarea {
width: 100%;
min-height: 80px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: monospace;
font-size: 12px;
resize: vertical;
}
.encryption-demo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.demo-panel {
border: 1px solid #ddd;
border-radius: 6px;
padding: 15px;
background: #fff;
}
.demo-panel h4 {
margin: 0 0 10px 0;
color: #333;
}
@media (max-width: 768px) {
.encryption-demo {
grid-template-columns: 1fr;
}
.crypto-status {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="crypto-test-container">
<header>
<h1>🔐 PeerPigeon Crypto Test Suite</h1>
<p>Comprehensive testing interface for cryptographic functionality using unsea.</p>
</header>
<!-- Crypto Status Overview -->
<div class="test-section">
<h3>📊 Crypto Status</h3>
<div class="crypto-status">
<div class="status-card">
<h4>
<span id="crypto-enabled-indicator" class="status-indicator inactive"></span>
Crypto Manager
</h4>
<div>Status: <span id="crypto-status">Not Initialized</span></div>
<div>Keypair: <span id="keypair-status">None</span></div>
</div>
<div class="status-card">
<h4>
<span id="mesh-status-indicator" class="status-indicator inactive"></span>
Mesh Network
</h4>
<div>Connected: <span id="mesh-connected">No</span></div>
<div>Peers: <span id="peer-count">0</span></div>
</div>
<div class="status-card">
<h4>Public Key</h4>
<div id="public-key-display" class="key-display">Not generated</div>
</div>
<div class="status-card">
<h4>Performance Metrics</h4>
<div class="performance-metrics">
<div class="metric-item">
<div class="metric-value" id="encrypted-count">0</div>
<div class="metric-label">Encrypted</div>
</div>
<div class="metric-item">
<div class="metric-value" id="decrypted-count">0</div>
<div class="metric-label">Decrypted</div>
</div>
<div class="metric-item">
<div class="metric-value" id="key-exchanges">0</div>
<div class="metric-label">Key Exchanges</div>
</div>
</div>
</div>
</div>
</div>
<!-- Initialization Tests -->
<div class="test-section">
<h3>🚀 Initialization Tests</h3>
<div class="test-controls">
<button id="init-basic-crypto" class="btn btn-primary">Initialize Basic Crypto</button>
<button id="init-with-credentials" class="btn btn-secondary">Initialize with Credentials</button>
<button id="reset-crypto" class="btn btn-danger">Reset Crypto</button>
<button id="run-self-test" class="btn btn-info">Run Self Test</button>
</div>
<div class="test-message-area">
<label for="user-alias">User Alias (for persistent identity):</label>
<input type="text" id="user-alias" placeholder="Enter username" style="margin: 5px 10px; padding: 5px;">
<label for="user-password">Password:</label>
<input type="password" id="user-password" placeholder="Enter password" style="margin: 5px 10px; padding: 5px;">
</div>
<div id="init-test-result" class="test-result"></div>
</div>
<!-- Mesh Integration Tests -->
<div class="test-section">
<h3>🌐 Mesh Integration Tests</h3>
<div class="test-controls">
<button id="init-mesh-with-crypto" class="btn btn-primary">Initialize Mesh with Crypto</button>
<button id="connect-mesh" class="btn btn-secondary">Connect to Mesh</button>
<button id="disconnect-mesh" class="btn btn-danger">Disconnect Mesh</button>
</div>
<div class="test-message-area">
<label for="signaling-url">Signaling Server URL:</label>
<input type="text" id="signaling-url" value="ws://localhost:3000" style="width: 300px; margin: 5px 10px; padding: 5px;">
</div>
<div id="mesh-test-result" class="test-result"></div>
</div>
<!-- Encryption/Decryption Tests -->
<div class="test-section">
<h3>🔒 Encryption/Decryption Tests</h3>
<div class="encryption-demo">
<div class="demo-panel">
<h4>Message Encryption</h4>
<textarea id="plaintext-message" placeholder="Enter message to encrypt...">Hello, encrypted world! This is a test message.</textarea>
<div class="test-controls">
<button id="encrypt-message" class="btn btn-primary">Encrypt Message</button>
<button id="sign-message" class="btn btn-secondary">Sign Message</button>
</div>
<div id="encryption-result" class="test-result"></div>
</div>
<div class="demo-panel">
<h4>Message Decryption</h4>
<textarea id="encrypted-message" placeholder="Encrypted message will appear here..."></textarea>
<div class="test-controls">
<button id="decrypt-message" class="btn btn-primary">Decrypt Message</button>
<button id="verify-signature" class="btn btn-secondary">Verify Signature</button>
</div>
<div id="decryption-result" class="test-result"></div>
</div>
</div>
</div>
<!-- Key Management Tests -->
<div class="test-section">
<h3>🗝️ Key Management Tests</h3>
<div class="test-controls">
<button id="generate-test-keypair" class="btn btn-primary">Generate Test Keypair</button>
<button id="export-public-key" class="btn btn-secondary">Export Public Key</button>
<button id="simulate-key-exchange" class="btn btn-info">Simulate Key Exchange</button>
<button id="generate-group-key" class="btn btn-warning">Generate Group Key</button>
</div>
<div class="test-message-area">
<label for="group-id">Group ID:</label>
<input type="text" id="group-id" value="test-group-1" style="margin: 5px 10px; padding: 5px;">
<label for="peer-public-key">Peer Public Key (for testing):</label>
<textarea id="peer-public-key" placeholder="Paste peer public key here..." style="height: 60px;"></textarea>
</div>
<div>
<h4>Stored Peer Keys:</h4>
<div id="peer-keys-list" class="peer-keys-list">
<div style="padding: 20px; text-align: center; color: #666;">No peer keys stored</div>
</div>
</div>
<div id="key-management-result" class="test-result"></div>
</div>
<!-- Group Encryption Tests -->
<div class="test-section">
<h3>👥 Group Encryption Tests</h3>
<div class="test-controls">
<button id="create-test-group" class="btn btn-primary">Create Test Group</button>
<button id="encrypt-group-message" class="btn btn-secondary">Encrypt for Group</button>
<button id="decrypt-group-message" class="btn btn-info">Decrypt Group Message</button>
</div>
<div class="test-message-area">
<textarea id="group-message" placeholder="Enter group message...">This is a secret group message!</textarea>
</div>
<div id="group-encryption-result" class="test-result"></div>
</div>
<!-- Performance Tests -->
<div class="test-section">
<h3>⚡ Performance Tests</h3>
<div class="test-controls">
<button id="benchmark-encryption" class="btn btn-primary">Benchmark Encryption</button>
<button id="benchmark-signing" class="btn btn-secondary">Benchmark Signing</button>
<button id="stress-test" class="btn btn-warning">Stress Test</button>
<button id="clear-metrics" class="btn btn-danger">Clear Metrics</button>
</div>
<div class="test-message-area">
<label for="benchmark-iterations">Iterations:</label>
<input type="number" id="benchmark-iterations" value="100" min="1" max="10000" style="margin: 5px 10px; padding: 5px;">
<label for="message-size">Message Size (chars):</label>
<input type="number" id="message-size" value="1000" min="10" max="100000" style="margin: 5px 10px; padding: 5px;">
</div>
<div id="performance-test-result" class="test-result"></div>
</div>
<!-- Real-time Messaging Tests -->
<div class="test-section">
<h3>💬 Real-time Encrypted Messaging Tests</h3>
<div class="test-controls">
<button id="send-encrypted-broadcast" class="btn btn-primary">Send Encrypted Broadcast</button>
<button id="send-encrypted-dm" class="btn btn-secondary">Send Encrypted DM</button>
<button id="toggle-auto-encrypt" class="btn btn-info">Toggle Auto-Encrypt</button>
</div>
<div class="test-message-area">
<label for="target-peer-id">Target Peer ID (for DM):</label>
<input type="text" id="target-peer-id" placeholder="Enter peer ID..." style="width: 300px; margin: 5px 10px; padding: 5px;">
<textarea id="real-time-message" placeholder="Enter message to send...">Hello encrypted mesh!</textarea>
</div>
<div>
<h4>Received Messages:</h4>
<div id="received-messages" class="test-result" style="max-height: 300px;">
<div style="padding: 20px; text-align: center; color: #666;">No messages received yet</div>
</div>
</div>
</div>
<!-- Debug and Diagnostics -->
<div class="test-section">
<h3>🐛 Debug and Diagnostics</h3>
<div class="test-controls">
<button id="dump-crypto-state" class="btn btn-primary">Dump Crypto State</button>
<button id="validate-setup" class="btn btn-secondary">Validate Setup</button>
<button id="test-compatibility" class="btn btn-info">Test Browser Compatibility</button>
<button id="generate-test-report" class="btn btn-success">Generate Test Report</button>
</div>
<div id="debug-result" class="test-result"></div>
</div>
</div>
<!-- Import the crypto test suite JavaScript -->
<script type="module" src="crypto-test.js"></script>
</body>
</html>