Compare commits
No commits in common. "bfb8082c54c03615868485854bd7f1348633e122" and "5ec3a6006f24260ecff4175776ef402ea72ca330" have entirely different histories.
bfb8082c54
...
5ec3a6006f
14 changed files with 31 additions and 3308 deletions
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -5,7 +5,3 @@ tests/__pycache__
|
|||
infra/.terraform
|
||||
infra/.terraform.lock.hcl
|
||||
venv
|
||||
infra/email/.terraform
|
||||
infra/email/.terraform.lock.hcl
|
||||
infra/email/node_modules
|
||||
infra/email/email_processor.zip
|
||||
|
|
|
|||
|
|
@ -1,180 +0,0 @@
|
|||
const { SESClient, SendEmailCommand } = require('@aws-sdk/client-ses');
|
||||
const { S3Client, GetObjectCommand, PutObjectCommand } = require('@aws-sdk/client-s3');
|
||||
const { getSignedUrl } = require('@aws-sdk/s3-request-presigner');
|
||||
const { simpleParser } = require('mailparser');
|
||||
|
||||
// Initialize clients
|
||||
const sesClient = new SESClient({ region: process.env.AWS_REGION || 'us-west-2' });
|
||||
const s3Client = new S3Client({ region: process.env.AWS_REGION || 'us-west-2' });
|
||||
|
||||
exports.handler = async (event) => {
|
||||
try {
|
||||
// Extract S3 event information
|
||||
if (!event.Records || !event.Records[0] || !event.Records[0].s3) {
|
||||
throw new Error('Invalid S3 event structure');
|
||||
}
|
||||
|
||||
const s3Record = event.Records[0].s3;
|
||||
const bucketName = s3Record.bucket.name;
|
||||
const objectKey = s3Record.object.key;
|
||||
|
||||
// Filter out attachment files to prevent infinite loops
|
||||
if (objectKey.startsWith('attachments/')) {
|
||||
console.log(`Skipping attachment file: ${objectKey}`);
|
||||
return {
|
||||
statusCode: 200,
|
||||
body: JSON.stringify({
|
||||
message: 'Skipped attachment file',
|
||||
reason: 'Object is in attachments/ prefix',
|
||||
objectKey: objectKey
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
console.log(`Processing email: ${objectKey}`);
|
||||
|
||||
// Get the email content from S3
|
||||
const getObjectParams = {
|
||||
Bucket: bucketName,
|
||||
Key: objectKey
|
||||
};
|
||||
|
||||
const s3Response = await s3Client.send(new GetObjectCommand(getObjectParams));
|
||||
const emailContent = await s3Response.Body.transformToString();
|
||||
|
||||
// Extract recipient from the object key path
|
||||
const pathParts = objectKey.split('/');
|
||||
const recipient = pathParts[0]; // e.g., "calculator"
|
||||
|
||||
const forwardEmail = process.env.FORWARD_EMAIL;
|
||||
const domainName = process.env.DOMAIN_NAME || '127local.net';
|
||||
const environment = process.env.ENVIRONMENT || 'production';
|
||||
|
||||
// Parse the email using mailparser
|
||||
const parsedEmail = await simpleParser(emailContent);
|
||||
|
||||
// Extract email details
|
||||
const subject = parsedEmail.subject || 'No Subject';
|
||||
const from = parsedEmail.from?.text || 'unknown@example.com';
|
||||
const emailBody = parsedEmail.text || parsedEmail.html || 'No body content';
|
||||
|
||||
// Create a clean, properly formatted forwarded email
|
||||
const forwardSubject = `[${environment.toUpperCase()}] FWD: ${subject}`;
|
||||
|
||||
// Build the email body with proper formatting
|
||||
let forwardBody = `Email forwarded from ${from} to ${recipient}@${domainName} (${environment.toUpperCase()})\n`;
|
||||
forwardBody += `Forwarded at: ${new Date().toISOString()}\n`;
|
||||
forwardBody += `\n--- Original Email ---\n\n`;
|
||||
forwardBody += `Subject: ${subject}\n`;
|
||||
forwardBody += `From: ${from}\n`;
|
||||
forwardBody += `\n${emailBody}`;
|
||||
|
||||
// Process attachments and generate download links
|
||||
let attachmentLinks = [];
|
||||
if (parsedEmail.attachments && parsedEmail.attachments.length > 0) {
|
||||
console.log(`Processing ${parsedEmail.attachments.length} attachments...`);
|
||||
|
||||
for (const attachment of parsedEmail.attachments) {
|
||||
try {
|
||||
// Create unique filename for S3
|
||||
const timestamp = Date.now();
|
||||
const safeFilename = attachment.filename.replace(/[^a-zA-Z0-9.-]/g, '_');
|
||||
const s3Key = `attachments/${recipient}/${timestamp}-${safeFilename}`;
|
||||
|
||||
// Upload attachment to S3
|
||||
const uploadParams = {
|
||||
Bucket: bucketName,
|
||||
Key: s3Key,
|
||||
Body: attachment.content,
|
||||
ContentType: attachment.contentType,
|
||||
Metadata: {
|
||||
originalEmail: objectKey,
|
||||
recipient: recipient,
|
||||
sender: from,
|
||||
originalFilename: attachment.filename
|
||||
}
|
||||
};
|
||||
|
||||
await s3Client.send(new PutObjectCommand(uploadParams));
|
||||
console.log(`Uploaded: ${attachment.filename}`);
|
||||
|
||||
// Generate pre-signed download URL (expires in 7 days)
|
||||
const downloadUrl = await getSignedUrl(
|
||||
s3Client,
|
||||
new GetObjectCommand({
|
||||
Bucket: bucketName,
|
||||
Key: s3Key
|
||||
}),
|
||||
{ expiresIn: 604800 } // 7 days
|
||||
);
|
||||
|
||||
attachmentLinks.push({
|
||||
filename: attachment.filename,
|
||||
type: attachment.contentType,
|
||||
size: attachment.size,
|
||||
downloadUrl: downloadUrl
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error(`Failed to process attachment ${attachment.filename}:`, error);
|
||||
// Continue with other attachments
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add attachment information with download links
|
||||
if (attachmentLinks.length > 0) {
|
||||
forwardBody += `\n\n--- Attachments (${attachmentLinks.length}) ---\n`;
|
||||
attachmentLinks.forEach((attachment) => {
|
||||
forwardBody += `• ${attachment.filename} (${attachment.type}, ${attachment.size} bytes)\n`;
|
||||
forwardBody += ` Download: ${attachment.downloadUrl}\n`;
|
||||
forwardBody += ` Note: Download link expires in 7 days\n\n`;
|
||||
});
|
||||
}
|
||||
|
||||
// Create the forwarded email using SendEmail
|
||||
const forwardParams = {
|
||||
Source: `noreply@${domainName}`,
|
||||
Destination: {
|
||||
ToAddresses: [forwardEmail]
|
||||
},
|
||||
Message: {
|
||||
Subject: {
|
||||
Data: forwardSubject
|
||||
},
|
||||
Body: {
|
||||
Text: {
|
||||
Data: forwardBody
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Send the properly formatted email
|
||||
const result = await sesClient.send(new SendEmailCommand(forwardParams));
|
||||
console.log(`Email forwarded successfully: ${result.MessageId}`);
|
||||
|
||||
return {
|
||||
statusCode: 200,
|
||||
body: JSON.stringify({
|
||||
message: 'Email forwarded successfully',
|
||||
messageId: result.MessageId,
|
||||
originalRecipient: recipient,
|
||||
forwardedTo: forwardEmail,
|
||||
s3Location: `${bucketName}/${objectKey}`
|
||||
})
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error processing email:', error);
|
||||
|
||||
return {
|
||||
statusCode: 500,
|
||||
body: JSON.stringify({
|
||||
error: 'Failed to process email',
|
||||
message: error.message,
|
||||
stack: error.stack
|
||||
})
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -1,308 +0,0 @@
|
|||
terraform {
|
||||
required_version = ">= 1.0"
|
||||
required_providers {
|
||||
aws = {
|
||||
source = "hashicorp/aws"
|
||||
version = "~> 5.0"
|
||||
}
|
||||
random = {
|
||||
source = "hashicorp/random"
|
||||
version = "~> 3.0"
|
||||
}
|
||||
}
|
||||
|
||||
backend "s3" {
|
||||
bucket = "calculator-127local-net-terraform-state"
|
||||
key = "email/infrastructure/terraform.tfstate"
|
||||
region = "us-west-2"
|
||||
}
|
||||
}
|
||||
|
||||
provider "aws" {
|
||||
region = var.aws_region
|
||||
|
||||
default_tags {
|
||||
tags = local.common_tags
|
||||
}
|
||||
}
|
||||
|
||||
# Common tags for all resources
|
||||
locals {
|
||||
common_tags = {
|
||||
Project = "calculator-127local-net"
|
||||
Environment = "production"
|
||||
ManagedBy = "terraform"
|
||||
Owner = "will@aerenserve.net"
|
||||
Purpose = "email-forwarding"
|
||||
CostCenter = "calculator-services"
|
||||
}
|
||||
}
|
||||
|
||||
# S3 bucket for email storage
|
||||
resource "aws_s3_bucket" "email_storage" {
|
||||
bucket = "calculator-127local-net-emails-${random_string.bucket_suffix.result}"
|
||||
|
||||
tags = merge(local.common_tags, {
|
||||
Name = "Calculator Email Storage"
|
||||
})
|
||||
}
|
||||
|
||||
resource "random_string" "bucket_suffix" {
|
||||
length = 8
|
||||
special = false
|
||||
upper = false
|
||||
}
|
||||
|
||||
# S3 bucket versioning
|
||||
resource "aws_s3_bucket_versioning" "email_storage" {
|
||||
bucket = aws_s3_bucket.email_storage.id
|
||||
versioning_configuration {
|
||||
status = "Enabled"
|
||||
}
|
||||
}
|
||||
|
||||
# S3 bucket server-side encryption
|
||||
resource "aws_s3_bucket_server_side_encryption_configuration" "email_storage" {
|
||||
bucket = aws_s3_bucket.email_storage.id
|
||||
|
||||
rule {
|
||||
apply_server_side_encryption_by_default {
|
||||
sse_algorithm = "AES256"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
# S3 bucket public access block
|
||||
resource "aws_s3_bucket_public_access_block" "email_storage" {
|
||||
bucket = aws_s3_bucket.email_storage.id
|
||||
|
||||
block_public_acls = true
|
||||
block_public_policy = true
|
||||
ignore_public_acls = true
|
||||
restrict_public_buckets = true
|
||||
}
|
||||
|
||||
# S3 bucket policy to allow SES to write emails
|
||||
resource "aws_s3_bucket_policy" "email_storage" {
|
||||
bucket = aws_s3_bucket.email_storage.id
|
||||
|
||||
policy = jsonencode({
|
||||
Version = "2012-10-17"
|
||||
Statement = [
|
||||
{
|
||||
Sid = "AllowSESToWriteEmails"
|
||||
Effect = "Allow"
|
||||
Principal = {
|
||||
Service = "ses.amazonaws.com"
|
||||
}
|
||||
Action = [
|
||||
"s3:PutObject"
|
||||
]
|
||||
Resource = "${aws_s3_bucket.email_storage.arn}/*"
|
||||
Condition = {
|
||||
StringEquals = {
|
||||
"aws:Referer" = var.aws_account_id
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
# SES Domain identity for 127local.net
|
||||
resource "aws_ses_domain_identity" "calculator" {
|
||||
domain = var.domain_name
|
||||
}
|
||||
|
||||
# SES Domain DKIM for 127local.net
|
||||
resource "aws_ses_domain_dkim" "calculator" {
|
||||
domain = aws_ses_domain_identity.calculator.domain
|
||||
}
|
||||
|
||||
# Route53 records for SES DKIM validation
|
||||
resource "aws_route53_record" "ses_dkim" {
|
||||
count = 3
|
||||
zone_id = var.route53_zone_id
|
||||
name = "${element(aws_ses_domain_dkim.calculator.dkim_tokens, count.index)}._domainkey.${var.domain_name}"
|
||||
type = "CNAME"
|
||||
ttl = "600"
|
||||
records = ["${element(aws_ses_domain_dkim.calculator.dkim_tokens, count.index)}.dkim.amazonses.com"]
|
||||
}
|
||||
|
||||
# MX record for email receiving
|
||||
resource "aws_route53_record" "ses_mx" {
|
||||
zone_id = var.route53_zone_id
|
||||
name = var.domain_name
|
||||
type = "MX"
|
||||
ttl = "300"
|
||||
records = ["10 inbound-smtp.us-west-2.amazonaws.com"]
|
||||
}
|
||||
|
||||
# SES Email receiving rule set
|
||||
resource "aws_ses_receipt_rule_set" "calculator" {
|
||||
rule_set_name = "calculator-main-rule-set"
|
||||
}
|
||||
|
||||
# SES Receipt rule for calculator@127local.net
|
||||
resource "aws_ses_receipt_rule" "calculator_forward" {
|
||||
name = "calculator-forward"
|
||||
rule_set_name = aws_ses_receipt_rule_set.calculator.rule_set_name
|
||||
recipients = ["calculator@${var.domain_name}"]
|
||||
enabled = true
|
||||
scan_enabled = true
|
||||
tls_policy = "Optional"
|
||||
|
||||
add_header_action {
|
||||
header_name = "X-Forwarded-To"
|
||||
header_value = var.forward_email
|
||||
position = 1
|
||||
}
|
||||
|
||||
s3_action {
|
||||
bucket_name = aws_s3_bucket.email_storage.bucket
|
||||
object_key_prefix = "calculator/"
|
||||
position = 2
|
||||
}
|
||||
}
|
||||
|
||||
# Set this rule set as active
|
||||
resource "aws_ses_active_receipt_rule_set" "calculator" {
|
||||
rule_set_name = aws_ses_receipt_rule_set.calculator.rule_set_name
|
||||
}
|
||||
|
||||
# Lambda function for email processing
|
||||
resource "aws_lambda_function" "email_processor" {
|
||||
filename = "email_processor.zip"
|
||||
function_name = "calculator-email-processor"
|
||||
role = aws_iam_role.lambda_role.arn
|
||||
handler = "email_processor.handler"
|
||||
source_code_hash = data.archive_file.email_processor_zip.output_base64sha256
|
||||
runtime = "nodejs18.x"
|
||||
timeout = 30
|
||||
|
||||
environment {
|
||||
variables = {
|
||||
FORWARD_EMAIL = var.forward_email
|
||||
DOMAIN_NAME = var.domain_name
|
||||
ENVIRONMENT = "production"
|
||||
}
|
||||
}
|
||||
|
||||
tags = merge(local.common_tags, {
|
||||
Name = "Calculator Email Processor"
|
||||
})
|
||||
}
|
||||
|
||||
# Create zip file for Lambda function with dependencies
|
||||
data "archive_file" "email_processor_zip" {
|
||||
type = "zip"
|
||||
source_dir = "."
|
||||
output_path = "email_processor.zip"
|
||||
excludes = ["email_processor.zip", "*.tf", "*.tfvars", "README.md", ".terraform", ".terraform.lock.hcl"]
|
||||
}
|
||||
|
||||
# IAM role for Lambda function
|
||||
resource "aws_iam_role" "lambda_role" {
|
||||
name = "calculator-email-processor-role"
|
||||
|
||||
assume_role_policy = jsonencode({
|
||||
Version = "2012-10-17"
|
||||
Statement = [
|
||||
{
|
||||
Action = "sts:AssumeRole"
|
||||
Effect = "Allow"
|
||||
Principal = {
|
||||
Service = "lambda.amazonaws.com"
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
tags = local.common_tags
|
||||
}
|
||||
|
||||
# IAM policy for Lambda function
|
||||
resource "aws_iam_role_policy" "lambda_policy" {
|
||||
name = "calculator-email-processor-policy"
|
||||
role = aws_iam_role.lambda_role.id
|
||||
|
||||
policy = jsonencode({
|
||||
Version = "2012-10-17"
|
||||
Statement = [
|
||||
{
|
||||
Effect = "Allow"
|
||||
Action = [
|
||||
"logs:CreateLogGroup",
|
||||
"logs:CreateLogStream",
|
||||
"logs:PutLogEvents"
|
||||
]
|
||||
Resource = "arn:aws:logs:*:*:*"
|
||||
},
|
||||
{
|
||||
Effect = "Allow"
|
||||
Action = [
|
||||
"s3:GetObject",
|
||||
"s3:PutObject"
|
||||
]
|
||||
Resource = "${aws_s3_bucket.email_storage.arn}/*"
|
||||
},
|
||||
{
|
||||
Effect = "Allow"
|
||||
Action = [
|
||||
"s3:ListBucket"
|
||||
]
|
||||
Resource = aws_s3_bucket.email_storage.arn
|
||||
},
|
||||
{
|
||||
Effect = "Allow"
|
||||
Action = [
|
||||
"ses:SendEmail",
|
||||
"ses:SendRawEmail"
|
||||
]
|
||||
Resource = "*"
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
# S3 bucket notification to trigger Lambda
|
||||
resource "aws_s3_bucket_notification" "email_processor" {
|
||||
bucket = aws_s3_bucket.email_storage.id
|
||||
|
||||
lambda_function {
|
||||
lambda_function_arn = aws_lambda_function.email_processor.arn
|
||||
events = ["s3:ObjectCreated:*"]
|
||||
filter_prefix = "calculator/"
|
||||
filter_suffix = ""
|
||||
}
|
||||
}
|
||||
|
||||
# Lambda permission for S3 to invoke the function
|
||||
resource "aws_lambda_permission" "allow_s3" {
|
||||
statement_id = "AllowExecutionFromS3Bucket"
|
||||
action = "lambda:InvokeFunction"
|
||||
function_name = aws_lambda_function.email_processor.function_name
|
||||
principal = "s3.amazonaws.com"
|
||||
source_arn = aws_s3_bucket.email_storage.arn
|
||||
}
|
||||
|
||||
# Outputs
|
||||
output "email_storage_bucket_name" {
|
||||
value = aws_s3_bucket.email_storage.bucket
|
||||
}
|
||||
|
||||
output "ses_domain_identity" {
|
||||
value = aws_ses_domain_identity.calculator.domain
|
||||
}
|
||||
|
||||
output "ses_receipt_rule_set_name" {
|
||||
value = aws_ses_receipt_rule_set.calculator.rule_set_name
|
||||
}
|
||||
|
||||
output "lambda_function_name" {
|
||||
value = aws_lambda_function.email_processor.function_name
|
||||
}
|
||||
|
||||
output "dkim_tokens" {
|
||||
value = aws_ses_domain_dkim.calculator.dkim_tokens
|
||||
}
|
||||
2045
infra/email/package-lock.json
generated
2045
infra/email/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"name": "calculator-email-processor",
|
||||
"version": "1.0.0",
|
||||
"description": "Lambda function to process and forward emails for calculator.127local.net",
|
||||
"main": "email_processor.js",
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-ses": "^3.0.0",
|
||||
"@aws-sdk/client-s3": "^3.0.0",
|
||||
"@aws-sdk/s3-request-presigner": "^3.0.0",
|
||||
"mailparser": "^3.6.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
#!/bin/bash
|
||||
|
||||
# Calculator Email Infrastructure Setup Script
|
||||
|
||||
set -e
|
||||
|
||||
echo "🚀 Setting up Calculator Email Infrastructure..."
|
||||
|
||||
# Check if we're in the right directory
|
||||
if [ ! -f "main.tf" ]; then
|
||||
echo "❌ Error: main.tf not found. Please run this script from infra/email directory"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Install npm dependencies for Lambda function
|
||||
echo "📦 Installing Lambda dependencies..."
|
||||
if [ ! -d "node_modules" ]; then
|
||||
npm install
|
||||
else
|
||||
echo "✅ Dependencies already installed"
|
||||
fi
|
||||
|
||||
# Initialize Terraform if needed
|
||||
if [ ! -d ".terraform" ]; then
|
||||
echo "🔧 Initializing Terraform..."
|
||||
terraform init
|
||||
else
|
||||
echo "✅ Terraform already initialized"
|
||||
fi
|
||||
|
||||
# Plan the infrastructure setup
|
||||
echo "📋 Planning infrastructure setup..."
|
||||
terraform plan
|
||||
|
||||
# Ask for confirmation
|
||||
echo ""
|
||||
read -p "🤔 Do you want to create this infrastructure? (y/N): " -n 1 -r
|
||||
echo
|
||||
if [[ $REPLY =~ ^[Yy]$ ]]; then
|
||||
echo "🚀 Creating infrastructure..."
|
||||
terraform apply -auto-approve
|
||||
|
||||
echo ""
|
||||
echo "✅ Infrastructure setup complete!"
|
||||
echo ""
|
||||
echo "📋 Next steps:"
|
||||
echo "1. Go to AWS SES Console and verify the 127local.net domain identity"
|
||||
echo "2. Wait for DKIM verification (should happen automatically)"
|
||||
echo "3. Test by sending an email to calculator@127local.net"
|
||||
echo ""
|
||||
echo "🔍 Useful commands:"
|
||||
echo " terraform output # Show all outputs"
|
||||
echo " terraform output dkim_tokens # Show DKIM tokens"
|
||||
echo " terraform output lambda_function_name # Show Lambda function name"
|
||||
else
|
||||
echo "❌ Infrastructure setup cancelled"
|
||||
exit 1
|
||||
fi
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
aws_region = "us-west-2"
|
||||
domain_name = "127local.net"
|
||||
route53_zone_id = "Z001158010D1XENOLOOMC"
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
variable "aws_region" {
|
||||
description = "AWS region for resources"
|
||||
type = string
|
||||
default = "us-west-2"
|
||||
}
|
||||
|
||||
variable "domain_name" {
|
||||
description = "Domain name for email forwarding"
|
||||
type = string
|
||||
}
|
||||
|
||||
variable "forward_email" {
|
||||
description = "Email address to forward incoming emails to"
|
||||
type = string
|
||||
}
|
||||
|
||||
variable "route53_zone_id" {
|
||||
description = "Route53 hosted zone ID for the domain"
|
||||
type = string
|
||||
}
|
||||
|
||||
variable "aws_account_id" {
|
||||
description = "AWS Account ID for SES S3 bucket policy"
|
||||
type = string
|
||||
}
|
||||
|
|
@ -107,28 +107,10 @@ export default {
|
|||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
`;
|
||||
fetchBtn.addEventListener('mouseenter', () => fetchBtn.style.opacity = '0.9');
|
||||
fetchBtn.addEventListener('mouseleave', () => fetchBtn.style.opacity = '1');
|
||||
fetchBtn.addEventListener('mouseenter', () => fetchBtn.style.background = 'var(--accent-hover)');
|
||||
fetchBtn.addEventListener('mouseleave', () => fetchBtn.style.background = 'var(--accent)');
|
||||
ui.append(fetchBtn);
|
||||
|
||||
// External API notice
|
||||
const noticeDiv = document.createElement('div');
|
||||
noticeDiv.style.cssText = `
|
||||
margin: 10px 0;
|
||||
padding: 12px;
|
||||
background: var(--k-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
line-height: 1.4;
|
||||
`;
|
||||
noticeDiv.innerHTML = `
|
||||
<strong>External API Notice:</strong> Updating exchange rates requires an external call to exchangerate-api.com.
|
||||
Your browser will make a request to fetch the latest rates. Your IP address will be visible to the API provider.
|
||||
`;
|
||||
ui.append(noticeDiv);
|
||||
|
||||
const out = document.createElement('div');
|
||||
out.className = 'result';
|
||||
out.style.cssText = `
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@ export default {
|
|||
<label style="display: block; margin-bottom: 8px; font-weight: 500; color: var(--text);">
|
||||
CIDR Notation (Alternative)
|
||||
</label>
|
||||
<span style="color: var(--muted); margin-right: 10px;">/</span>
|
||||
<input type="number" name="cidr" value="${s.cidr}" min="0" max="32"
|
||||
style="width: 200px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px;">
|
||||
<span style="color: var(--muted); margin-left: 10px;">/</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -97,10 +97,6 @@ export default {
|
|||
ipv6CidrLabel.style.cssText = 'display: block; margin-bottom: 8px; font-weight: 500; color: var(--text);';
|
||||
ipv6CidrLabel.textContent = 'CIDR Prefix Length';
|
||||
|
||||
const ipv6CidrSpan = document.createElement('span');
|
||||
ipv6CidrSpan.style.cssText = 'color: var(--muted); margin-right: 10px;';
|
||||
ipv6CidrSpan.textContent = '/';
|
||||
|
||||
const ipv6CidrInput = document.createElement('input');
|
||||
ipv6CidrInput.type = 'number';
|
||||
ipv6CidrInput.name = 'ipv6Cidr';
|
||||
|
|
@ -109,9 +105,13 @@ export default {
|
|||
ipv6CidrInput.max = '128';
|
||||
ipv6CidrInput.style.cssText = 'width: 200px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px;';
|
||||
|
||||
const ipv6CidrSpan = document.createElement('span');
|
||||
ipv6CidrSpan.style.cssText = 'color: var(--muted); margin-left: 10px;';
|
||||
ipv6CidrSpan.textContent = '/';
|
||||
|
||||
ipv6CidrContainer.appendChild(ipv6CidrLabel);
|
||||
ipv6CidrContainer.appendChild(ipv6CidrSpan);
|
||||
ipv6CidrContainer.appendChild(ipv6CidrInput);
|
||||
ipv6CidrContainer.appendChild(ipv6CidrSpan);
|
||||
|
||||
// Add all elements to IPv6 section
|
||||
ipv6Section.appendChild(ipv6AddressContainer);
|
||||
|
|
@ -142,328 +142,6 @@ export default {
|
|||
return 'Unknown';
|
||||
}
|
||||
|
||||
function getRFCNetworkInfo(ip, cidr) {
|
||||
const ipLong = ipToLong(ip);
|
||||
const parts = ip.split('.');
|
||||
const firstOctet = parseInt(parts[0]);
|
||||
const secondOctet = parseInt(parts[1]);
|
||||
|
||||
// Check for specific RFC-defined ranges
|
||||
if (firstOctet === 0) {
|
||||
return {
|
||||
type: 'Current Network',
|
||||
description: 'RFC 1122: "This host on this network" - used only as source address',
|
||||
rfc: 'RFC 1122',
|
||||
cidr: '0.0.0.0/8'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 10) {
|
||||
return {
|
||||
type: 'Private Network',
|
||||
description: 'RFC 1918: Private IP address range for Class A networks',
|
||||
rfc: 'RFC 1918',
|
||||
cidr: '10.0.0.0/8'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 127) {
|
||||
return {
|
||||
type: 'Loopback',
|
||||
description: 'RFC 1122: Loopback addresses - packets sent to this address are processed locally',
|
||||
rfc: 'RFC 1122',
|
||||
cidr: '127.0.0.0/8'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 169 && secondOctet === 254) {
|
||||
return {
|
||||
type: 'Link-Local',
|
||||
description: 'RFC 3927: Automatic Private IP Addressing (APIPA) - used when DHCP fails',
|
||||
rfc: 'RFC 3927',
|
||||
cidr: '169.254.0.0/16'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 172 && secondOctet >= 16 && secondOctet <= 31) {
|
||||
return {
|
||||
type: 'Private Network',
|
||||
description: 'RFC 1918: Private IP address range for Class B networks',
|
||||
rfc: 'RFC 1918',
|
||||
cidr: '172.16.0.0/12'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 192 && secondOctet === 168) {
|
||||
return {
|
||||
type: 'Private Network',
|
||||
description: 'RFC 1918: Private IP address range for Class C networks',
|
||||
rfc: 'RFC 1918',
|
||||
cidr: '192.168.0.0/16'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 192 && secondOctet === 0 && parseInt(parts[2]) === 0) {
|
||||
return {
|
||||
type: 'IETF Protocol Assignments',
|
||||
description: 'RFC 5736: Reserved for IETF protocol assignments',
|
||||
rfc: 'RFC 5736',
|
||||
cidr: '192.0.0.0/24'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 192 && secondOctet === 0 && parseInt(parts[2]) === 2) {
|
||||
return {
|
||||
type: 'Test-Net',
|
||||
description: 'RFC 5737: Documentation and example code (TEST-NET-1)',
|
||||
rfc: 'RFC 5737',
|
||||
cidr: '192.0.2.0/24'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 192 && secondOctet === 88 && parseInt(parts[2]) === 99) {
|
||||
return {
|
||||
type: '6to4 Relay',
|
||||
description: 'RFC 3068: IPv6 to IPv4 relay anycast addresses',
|
||||
rfc: 'RFC 3068',
|
||||
cidr: '192.88.99.0/24'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 198 && secondOctet === 18) {
|
||||
return {
|
||||
type: 'Benchmark Testing',
|
||||
description: 'RFC 2544: Network interconnect device benchmark testing',
|
||||
rfc: 'RFC 2544',
|
||||
cidr: '198.18.0.0/15'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 198 && secondOctet === 51 && parseInt(parts[2]) === 100) {
|
||||
return {
|
||||
type: 'Test-Net',
|
||||
description: 'RFC 5737: Documentation and example code (TEST-NET-2)',
|
||||
rfc: 'RFC 5737',
|
||||
cidr: '198.51.100.0/24'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 203 && secondOctet === 0 && parseInt(parts[2]) === 113) {
|
||||
return {
|
||||
type: 'Test-Net',
|
||||
description: 'RFC 5737: Documentation and example code (TEST-NET-3)',
|
||||
rfc: 'RFC 5737',
|
||||
cidr: '203.0.113.0/24'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet === 100 && secondOctet >= 64 && secondOctet <= 127) {
|
||||
return {
|
||||
type: 'CGNAT',
|
||||
description: 'RFC 6598: Carrier-Grade NAT (CGN) shared address space',
|
||||
rfc: 'RFC 6598',
|
||||
cidr: '100.64.0.0/10'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet >= 224 && firstOctet <= 239) {
|
||||
return {
|
||||
type: 'Multicast',
|
||||
description: 'RFC 1112: Multicast addresses - used for one-to-many communication',
|
||||
rfc: 'RFC 1112',
|
||||
cidr: '224.0.0.0/4'
|
||||
};
|
||||
}
|
||||
|
||||
if (firstOctet >= 240 && firstOctet <= 255) {
|
||||
return {
|
||||
type: 'Reserved',
|
||||
description: 'RFC 1112: Reserved for future use (formerly Class E)',
|
||||
rfc: 'RFC 1112',
|
||||
cidr: '240.0.0.0/4'
|
||||
};
|
||||
}
|
||||
|
||||
if (ipLong === 0xFFFFFFFF) {
|
||||
return {
|
||||
type: 'Broadcast',
|
||||
description: 'RFC 919: Limited broadcast address - reaches all hosts on the local network',
|
||||
rfc: 'RFC 919'
|
||||
};
|
||||
}
|
||||
|
||||
// Check for other broadcast addresses based on CIDR
|
||||
if (cidr < 32) {
|
||||
const networkLong = (ipLong & ((0xFFFFFFFF << (32 - cidr)) >>> 0)) >>> 0;
|
||||
const broadcastLong = (networkLong | (~((0xFFFFFFFF << (32 - cidr)) >>> 0)) >>> 0) >>> 0;
|
||||
if (ipLong === broadcastLong) {
|
||||
return {
|
||||
type: 'Network Broadcast',
|
||||
description: `Broadcast address for /${cidr} network - reaches all hosts in this subnet`,
|
||||
rfc: 'RFC 919'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Default case - public IP
|
||||
return {
|
||||
type: 'Public IP',
|
||||
description: 'Globally routable IP address on the Internet',
|
||||
rfc: null
|
||||
};
|
||||
}
|
||||
|
||||
function getIPv6NetworkInfo(ipv6, cidr) {
|
||||
const expanded = expandIPv6(ipv6);
|
||||
const parts = expanded.split(':');
|
||||
|
||||
// Convert to BigInt for comparison
|
||||
let ipv6Long = 0n;
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const part = parseInt(parts[i], 16);
|
||||
ipv6Long = (ipv6Long << 16n) + BigInt(part);
|
||||
}
|
||||
|
||||
// Check for specific IPv6 reserved ranges
|
||||
|
||||
// ::/128 - Unspecified address
|
||||
if (ipv6Long === 0n) {
|
||||
return {
|
||||
type: 'Unspecified',
|
||||
description: 'RFC 4291: Unspecified address - used only as source address',
|
||||
rfc: 'RFC 4291',
|
||||
cidr: '::/128'
|
||||
};
|
||||
}
|
||||
|
||||
// ::1/128 - Loopback
|
||||
if (ipv6Long === 1n) {
|
||||
return {
|
||||
type: 'Loopback',
|
||||
description: 'RFC 4291: Loopback address - equivalent to IPv4 127.0.0.1',
|
||||
rfc: 'RFC 4291',
|
||||
cidr: '::1/128'
|
||||
};
|
||||
}
|
||||
|
||||
// 2000::/3 - Global Unicast (public IPv6)
|
||||
if ((ipv6Long >> 125n) === 4n) { // First 3 bits are 001
|
||||
return {
|
||||
type: 'Global Unicast',
|
||||
description: 'RFC 4291: Globally routable IPv6 addresses (public Internet)',
|
||||
rfc: 'RFC 4291',
|
||||
cidr: '2000::/3'
|
||||
};
|
||||
}
|
||||
|
||||
// fc00::/7 - Unique Local Address (ULA)
|
||||
if ((ipv6Long >> 121n) === 0x7Dn) { // First 7 bits are 1111110
|
||||
return {
|
||||
type: 'Unique Local Address',
|
||||
description: 'RFC 4193: Private IPv6 addresses (equivalent to IPv4 private ranges)',
|
||||
rfc: 'RFC 4193',
|
||||
cidr: 'fc00::/7'
|
||||
};
|
||||
}
|
||||
|
||||
// fe80::/10 - Link-Local
|
||||
if ((ipv6Long >> 118n) === 0xFE80n >> 6n) { // First 10 bits are 1111111010
|
||||
return {
|
||||
type: 'Link-Local',
|
||||
description: 'RFC 4291: Link-local addresses - valid only on the local network segment',
|
||||
rfc: 'RFC 4291',
|
||||
cidr: 'fe80::/10'
|
||||
};
|
||||
}
|
||||
|
||||
// ff00::/8 - Multicast
|
||||
if ((ipv6Long >> 120n) === 0xFFn) { // First 8 bits are 11111111
|
||||
return {
|
||||
type: 'Multicast',
|
||||
description: 'RFC 4291: IPv6 multicast addresses - used for one-to-many communication',
|
||||
rfc: 'RFC 4291',
|
||||
cidr: 'ff00::/8'
|
||||
};
|
||||
}
|
||||
|
||||
// 2001:db8::/32 - Documentation
|
||||
if ((ipv6Long >> 96n) === 0x20010DB8n) {
|
||||
return {
|
||||
type: 'Documentation',
|
||||
description: 'RFC 3849: Reserved for documentation and example code',
|
||||
rfc: 'RFC 3849',
|
||||
cidr: '2001:db8::/32'
|
||||
};
|
||||
}
|
||||
|
||||
// 2001::/32 - Teredo
|
||||
if ((ipv6Long >> 96n) === 0x20010000n) {
|
||||
return {
|
||||
type: 'Teredo',
|
||||
description: 'RFC 4380: Teredo tunneling - IPv6 over UDP over IPv4',
|
||||
rfc: 'RFC 4380',
|
||||
cidr: '2001::/32'
|
||||
};
|
||||
}
|
||||
|
||||
// 2002::/16 - 6to4
|
||||
if ((ipv6Long >> 112n) === 0x2002n) {
|
||||
return {
|
||||
type: '6to4',
|
||||
description: 'RFC 3056: 6to4 tunneling - automatic IPv6 over IPv4 tunneling',
|
||||
rfc: 'RFC 3056',
|
||||
cidr: '2002::/16'
|
||||
};
|
||||
}
|
||||
|
||||
// 64:ff9b::/96 - IPv4-IPv6 Translation
|
||||
if ((ipv6Long >> 96n) === 0x64FF9B000000000000000000n) {
|
||||
return {
|
||||
type: 'IPv4-IPv6 Translation',
|
||||
description: 'RFC 6052: Well-known prefix for IPv4-IPv6 translation',
|
||||
rfc: 'RFC 6052',
|
||||
cidr: '64:ff9b::/96'
|
||||
};
|
||||
}
|
||||
|
||||
// 100::/64 - Discard-Only
|
||||
if ((ipv6Long >> 64n) === 0x100000000000000n) {
|
||||
return {
|
||||
type: 'Discard-Only',
|
||||
description: 'RFC 6666: Discard-only address block - packets are discarded',
|
||||
rfc: 'RFC 6666',
|
||||
cidr: '100::/64'
|
||||
};
|
||||
}
|
||||
|
||||
// ::ffff:0:0/96 - IPv4-mapped IPv6
|
||||
if ((ipv6Long >> 96n) === 0xFFFF00000000n) {
|
||||
return {
|
||||
type: 'IPv4-mapped IPv6',
|
||||
description: 'RFC 4291: IPv4 addresses mapped to IPv6 format',
|
||||
rfc: 'RFC 4291',
|
||||
cidr: '::ffff:0:0/96'
|
||||
};
|
||||
}
|
||||
|
||||
// ::/96 - IPv4-compatible IPv6 (deprecated)
|
||||
if ((ipv6Long >> 96n) === 0n && (ipv6Long & 0xFFFFFFFF00000000n) === 0n) {
|
||||
return {
|
||||
type: 'IPv4-compatible IPv6',
|
||||
description: 'RFC 4291: IPv4-compatible IPv6 addresses (deprecated)',
|
||||
rfc: 'RFC 4291',
|
||||
cidr: '::/96'
|
||||
};
|
||||
}
|
||||
|
||||
// Default case - other reserved or unknown
|
||||
return {
|
||||
type: 'Reserved/Unknown',
|
||||
description: 'Reserved or unassigned IPv6 address range',
|
||||
rfc: null
|
||||
};
|
||||
}
|
||||
|
||||
function ipToLong(ip) {
|
||||
return ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet), 0) >>> 0;
|
||||
}
|
||||
|
|
@ -697,52 +375,19 @@ export default {
|
|||
const networkSize = Math.pow(2, 32 - cidr);
|
||||
const baseLong = ipToLong(baseIP);
|
||||
|
||||
// Calculate the base network for the IP based on the CIDR
|
||||
// For larger subnets (CIDR < 16), we need to find the appropriate base network
|
||||
let baseNetworkLong;
|
||||
let maxNetworks;
|
||||
// Calculate the base network for the IP (up to /16 level)
|
||||
// For example: 192.168.1.0 -> 192.168.0.0 (base /16 network)
|
||||
const baseNetworkLong = baseLong & ((0xFFFFFFFF << (32 - 16)) >>> 0);
|
||||
const networkLong = baseNetworkLong;
|
||||
|
||||
if (cidr <= 8) {
|
||||
// For /8 and larger, use /8 as the base (Class A)
|
||||
baseNetworkLong = baseLong & ((0xFFFFFFFF << (32 - 8)) >>> 0);
|
||||
maxNetworks = Math.min(64, Math.floor(16777216 / networkSize)); // 2^24 / networkSize
|
||||
} else if (cidr <= 16) {
|
||||
// For /9 to /16, use /16 as the base (Class B)
|
||||
baseNetworkLong = baseLong & ((0xFFFFFFFF << (32 - 16)) >>> 0);
|
||||
maxNetworks = Math.min(64, Math.floor(65536 / networkSize)); // 2^16 / networkSize
|
||||
} else {
|
||||
// For /17 and smaller, use the actual network as base
|
||||
baseNetworkLong = baseLong & ((0xFFFFFFFF << (32 - cidr)) >>> 0);
|
||||
maxNetworks = Math.min(64, Math.floor(65536 / networkSize));
|
||||
}
|
||||
|
||||
// Show up to 64 networks, but limit based on what makes sense
|
||||
const count = Math.min(maxNetworks, 64);
|
||||
// Show up to 64 networks
|
||||
const count = Math.min(64, Math.floor(65536 / networkSize));
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const networkAddr = baseNetworkLong + (i * networkSize);
|
||||
const networkAddr = networkLong + (i * networkSize);
|
||||
const broadcastAddr = networkAddr + networkSize - 1;
|
||||
|
||||
// Handle edge cases for host calculations
|
||||
let firstHost, lastHost;
|
||||
|
||||
if (cidr === 32) {
|
||||
// /32 - single host, no usable hosts
|
||||
firstHost = networkAddr;
|
||||
lastHost = networkAddr;
|
||||
} else if (cidr === 31) {
|
||||
// /31 - point-to-point, no usable hosts
|
||||
firstHost = networkAddr;
|
||||
lastHost = broadcastAddr;
|
||||
} else if (cidr === 30) {
|
||||
// /30 - 4 total hosts, 2 usable
|
||||
firstHost = networkAddr + 1;
|
||||
lastHost = broadcastAddr - 1;
|
||||
} else {
|
||||
// Normal case - calculate usable hosts
|
||||
firstHost = networkAddr + 1;
|
||||
lastHost = broadcastAddr - 1;
|
||||
}
|
||||
const firstHost = networkAddr + 1;
|
||||
const lastHost = broadcastAddr - 1;
|
||||
|
||||
networks.push({
|
||||
network: longToIp(networkAddr),
|
||||
|
|
@ -807,27 +452,13 @@ export default {
|
|||
lastHostLong = broadcastLong - 1;
|
||||
}
|
||||
|
||||
// Calculate total possible networks based on CIDR
|
||||
// Calculate total possible networks
|
||||
const networkSize = Math.pow(2, 32 - calculatedCidr);
|
||||
let totalPossibleNetworks;
|
||||
|
||||
if (calculatedCidr <= 8) {
|
||||
// For /8 and larger, calculate based on Class A space
|
||||
totalPossibleNetworks = Math.floor(16777216 / networkSize); // 2^24 / networkSize
|
||||
} else if (calculatedCidr <= 16) {
|
||||
// For /9 to /16, calculate based on Class B space
|
||||
totalPossibleNetworks = Math.floor(65536 / networkSize); // 2^16 / networkSize
|
||||
} else {
|
||||
// For /17 and smaller, use the standard calculation
|
||||
totalPossibleNetworks = Math.floor(65536 / networkSize);
|
||||
}
|
||||
const totalPossibleNetworks = Math.floor(65536 / networkSize);
|
||||
|
||||
// Generate available networks table
|
||||
const availableNetworks = generateAvailableNetworks(ipAddress, calculatedCidr);
|
||||
|
||||
// Get RFC network information
|
||||
const rfcInfo = getRFCNetworkInfo(ipAddress, calculatedCidr);
|
||||
|
||||
out.innerHTML = `
|
||||
<div style="font-size: 24px; font-weight: 700; color: var(--accent); margin-bottom: 15px;">
|
||||
IPv4 Subnet Information
|
||||
|
|
@ -874,22 +505,6 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background: var(--border); padding: 15px; border-radius: 8px; margin-top: 15px;">
|
||||
<h4 style="color: var(--accent); margin-bottom: 10px;">Network Type Information</h4>
|
||||
<div style="color: var(--text); margin-bottom: 5px;">
|
||||
<strong>Network Type:</strong> ${rfcInfo.type}
|
||||
</div>
|
||||
<div style="color: var(--text); margin-bottom: 5px;">
|
||||
<strong>Description:</strong> ${rfcInfo.description}
|
||||
</div>
|
||||
${rfcInfo.cidr ? `<div style="color: var(--text); margin-bottom: 5px;">
|
||||
<strong>RFC Range:</strong> ${rfcInfo.cidr}
|
||||
</div>` : ''}
|
||||
${rfcInfo.rfc ? `<div style="color: var(--text); margin-bottom: 5px;">
|
||||
<strong>RFC Reference:</strong> ${rfcInfo.rfc}
|
||||
</div>` : ''}
|
||||
</div>
|
||||
|
||||
<div style="background: var(--border); padding: 15px; border-radius: 8px; margin-top: 15px;">
|
||||
<h4 style="color: var(--accent); margin-bottom: 10px;">Binary Representation</h4>
|
||||
<div style="font-family: monospace; font-size: 14px; color: var(--text); margin-bottom: 5px;">
|
||||
|
|
@ -1002,9 +617,6 @@ export default {
|
|||
});
|
||||
}
|
||||
|
||||
// Get IPv6 network information
|
||||
const ipv6NetworkInfo = getIPv6NetworkInfo(ipv6Address, ipv6Cidr);
|
||||
|
||||
// Format large numbers for display
|
||||
function formatBigInt(num) {
|
||||
if (num < BigInt(1e6)) {
|
||||
|
|
@ -1076,22 +688,6 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background: var(--border); padding: 15px; border-radius: 8px; margin-top: 15px;">
|
||||
<h4 style="color: var(--accent); margin-bottom: 10px;">Network Type Information</h4>
|
||||
<div style="color: var(--text); margin-bottom: 5px;">
|
||||
<strong>Network Type:</strong> ${ipv6NetworkInfo.type}
|
||||
</div>
|
||||
<div style="color: var(--text); margin-bottom: 5px;">
|
||||
<strong>Description:</strong> ${ipv6NetworkInfo.description}
|
||||
</div>
|
||||
${ipv6NetworkInfo.cidr ? `<div style="color: var(--text); margin-bottom: 5px;">
|
||||
<strong>RFC Range:</strong> ${ipv6NetworkInfo.cidr}
|
||||
</div>` : ''}
|
||||
${ipv6NetworkInfo.rfc ? `<div style="color: var(--text); margin-bottom: 5px;">
|
||||
<strong>RFC Reference:</strong> ${ipv6NetworkInfo.rfc}
|
||||
</div>` : ''}
|
||||
</div>
|
||||
|
||||
<div style="background: var(--border); padding: 15px; border-radius: 8px; margin-top: 15px;">
|
||||
<h4 style="color: var(--accent); margin-bottom: 10px;">Available Networks</h4>
|
||||
<div style="overflow-x: auto;">
|
||||
|
|
|
|||
|
|
@ -123,20 +123,16 @@ html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-u
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* Mobile overlay - separate element */
|
||||
.mobile-nav-overlay {
|
||||
/* Add mobile overlay */
|
||||
.sidenav::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-nav-overlay.active {
|
||||
display: block;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Adjust main content spacing for mobile */
|
||||
|
|
@ -280,21 +276,14 @@ input,select,textarea{width:100%;background:transparent;color:var(--text);border
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-link,
|
||||
.source-link {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.contact-link:hover,
|
||||
.source-link:hover {
|
||||
color: var(--accent2);
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -29,17 +29,11 @@
|
|||
<aside id="nav" class="sidenav"></aside>
|
||||
<main id="view" class="content"></main>
|
||||
</div>
|
||||
|
||||
<!-- Mobile navigation overlay -->
|
||||
<div id="mobileNavOverlay" class="mobile-nav-overlay"></div>
|
||||
|
||||
<footer class="wrap foot">
|
||||
<div class="footer-content">
|
||||
<span>No tracking. No server. Everything runs in your browser.</span>
|
||||
<div class="footer-links">
|
||||
<a href="mailto:calculator@127local.net" class="contact-link">calculator@127local.net</a>
|
||||
<a href="https://code.disobey.net/whilb/calculator.127local.net" target="_blank" rel="noopener noreferrer" class="source-link">Source Code</a>
|
||||
</div>
|
||||
<a href="https://code.disobey.net/whilb/calculator.127local.net" target="_blank" rel="noopener noreferrer" class="source-link">Source Code</a>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="module" src="/js/app.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,30 @@
|
|||
import {el, initTheme, enhanceSelects} from './util.js';
|
||||
|
||||
const CALCS = [
|
||||
// Financial calculators
|
||||
{ id:'interest', name:'Interest (Simple & Compound)', about:'Simple/compound interest', path:'../calculators/interest.js' },
|
||||
{ id:'currency', name:'Currency Converter', about:'Convert between currencies', path:'../calculators/currency.js' },
|
||||
|
||||
// Storage/System Administration
|
||||
{ id:'raid', name:'RAID', about:'Usable capacity', path:'../calculators/raid.js' },
|
||||
{ id:'zfs', name:'ZFS', about:'Pool configuration & performance', path:'../calculators/zfs.js' },
|
||||
|
||||
// Network/System Administration
|
||||
{ id:'bandwidth', name:'Bandwidth', about:'Bits↔bytes unit conv.', path:'../calculators/bandwidth.js' },
|
||||
{ id:'subnet', name:'IP Subnet', about:'IPv4/IPv6 subnet calculations', path:'../calculators/subnet.js' },
|
||||
|
||||
// Specialized Tools
|
||||
{ id:'nmea', name:'NMEA', about:'0183 XOR checksum', path:'../calculators/nmea.js' }
|
||||
{ id:'nmea', name:'NMEA', about:'0183 XOR checksum', path:'../calculators/nmea.js' },
|
||||
{ id:'currency', name:'Currency Converter', about:'Convert between currencies', path:'../calculators/currency.js' },
|
||||
{ id:'zfs', name:'ZFS', about:'Pool configuration & performance', path:'../calculators/zfs.js' },
|
||||
{ id:'subnet', name:'IP Subnet', about:'IPv4/IPv6 subnet calculations', path:'../calculators/subnet.js' }
|
||||
];
|
||||
|
||||
const navEl = document.getElementById('nav');
|
||||
const viewEl = document.getElementById('view');
|
||||
const themeBtn= document.getElementById('themeToggle');
|
||||
const navToggleBtn = document.getElementById('navToggle');
|
||||
const mobileNavOverlay = document.getElementById('mobileNavOverlay');
|
||||
initTheme(themeBtn);
|
||||
|
||||
// Mobile navigation toggle
|
||||
navToggleBtn.addEventListener('click', () => {
|
||||
navEl.classList.toggle('mobile-active');
|
||||
mobileNavOverlay.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close mobile nav when clicking overlay
|
||||
mobileNavOverlay.addEventListener('click', () => {
|
||||
navEl.classList.remove('mobile-active');
|
||||
mobileNavOverlay.classList.remove('active');
|
||||
});
|
||||
|
||||
// Close mobile nav when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
// Only close if nav is currently open
|
||||
if (navEl.classList.contains('mobile-active')) {
|
||||
// Close if clicking outside both nav and toggle button
|
||||
if (!navEl.contains(e.target) && !navToggleBtn.contains(e.target)) {
|
||||
navEl.classList.remove('mobile-active');
|
||||
mobileNavOverlay.classList.remove('active');
|
||||
}
|
||||
if (!navEl.contains(e.target) && !navToggleBtn.contains(e.target)) {
|
||||
navEl.classList.remove('mobile-active');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -53,7 +33,6 @@ navEl.addEventListener('click', (e) => {
|
|||
const a = e.target.closest('a[data-calc]');
|
||||
if (a) {
|
||||
navEl.classList.remove('mobile-active');
|
||||
mobileNavOverlay.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -759,50 +759,6 @@ class TestSubnetCalculator:
|
|||
# Verify network class is correct
|
||||
assert f"Network Class: {expected_class}" in result_text, f"Failed for {ip_addr}: expected {expected_class}"
|
||||
|
||||
def test_subnet_ipv4_network_class_cidr_independence(self, calculator_page):
|
||||
"""Test that network class is determined by IP address only, not CIDR"""
|
||||
calculator_page.get("http://localhost:8008/subnet")
|
||||
|
||||
# Wait for calculator to load
|
||||
WebDriverWait(calculator_page, 10).until(
|
||||
EC.presence_of_element_located((By.CSS_SELECTOR, "input[name='ipAddress']"))
|
||||
)
|
||||
|
||||
ip_input = calculator_page.find_element(By.CSS_SELECTOR, "input[name='ipAddress']")
|
||||
cidr_input = calculator_page.find_element(By.CSS_SELECTOR, "input[name='cidr']")
|
||||
|
||||
# Test that network class remains the same regardless of CIDR
|
||||
test_cases = [
|
||||
("10.0.0.1", "Class A", [8, 16, 24, 30, 32]), # Class A IP with different CIDRs
|
||||
("172.16.0.1", "Class B", [8, 16, 24, 30, 32]), # Class B IP with different CIDRs
|
||||
("192.168.1.1", "Class C", [8, 16, 24, 30, 32]), # Class C IP with different CIDRs
|
||||
("224.0.0.1", "Class D", [8, 16, 24, 30, 32]), # Class D IP with different CIDRs
|
||||
("240.0.0.1", "Class E", [8, 16, 24, 30, 32]), # Class E IP with different CIDRs
|
||||
]
|
||||
|
||||
for ip_addr, expected_class, cidr_values in test_cases:
|
||||
# Set the IP address once
|
||||
ip_input.clear()
|
||||
ip_input.send_keys(ip_addr)
|
||||
|
||||
# Test with different CIDR values
|
||||
for cidr in cidr_values:
|
||||
cidr_input.clear()
|
||||
cidr_input.send_keys(str(cidr))
|
||||
|
||||
# Wait for results to update
|
||||
WebDriverWait(calculator_page, 10).until(
|
||||
lambda driver: f"Network Class: {expected_class}" in self._get_subnet_result(driver)
|
||||
)
|
||||
|
||||
result_text = self._get_subnet_result(calculator_page)
|
||||
|
||||
# Verify network class remains the same regardless of CIDR
|
||||
assert f"Network Class: {expected_class}" in result_text, f"Failed for {ip_addr} with CIDR /{cidr}: expected {expected_class}"
|
||||
|
||||
# Also verify that the CIDR is correctly applied (different from network class)
|
||||
assert f"CIDR Notation: /{cidr}" in result_text, f"CIDR /{cidr} not applied correctly for {ip_addr}"
|
||||
|
||||
def test_subnet_cidr_mask_conversion_edge_cases(self, calculator_page):
|
||||
"""Test CIDR to mask conversion for all edge cases"""
|
||||
calculator_page.get("http://localhost:8008/subnet")
|
||||
|
|
@ -855,141 +811,6 @@ class TestSubnetCalculator:
|
|||
actual_cidr = cidr_input.get_attribute("value")
|
||||
assert actual_cidr == str(cidr), f"Mask {expected_mask} should map to /{cidr}, got /{actual_cidr}"
|
||||
|
||||
def test_subnet_large_cidr_networks_table(self, calculator_page):
|
||||
"""Test that subnet calculator displays networks table for large CIDR values like /10, /8"""
|
||||
calculator_page.get("http://localhost:8008/subnet")
|
||||
|
||||
# Wait for calculator to load
|
||||
WebDriverWait(calculator_page, 10).until(
|
||||
EC.presence_of_element_located((By.CSS_SELECTOR, "input[name='ipAddress']"))
|
||||
)
|
||||
|
||||
ip_input = calculator_page.find_element(By.CSS_SELECTOR, "input[name='ipAddress']")
|
||||
cidr_input = calculator_page.find_element(By.CSS_SELECTOR, "input[name='cidr']")
|
||||
|
||||
# Test with /10 (large subnet)
|
||||
ip_input.clear()
|
||||
ip_input.send_keys("10.0.0.1")
|
||||
cidr_input.clear()
|
||||
cidr_input.send_keys("10")
|
||||
|
||||
# Wait for results
|
||||
WebDriverWait(calculator_page, 10).until(
|
||||
EC.presence_of_element_located((By.CLASS_NAME, "result"))
|
||||
)
|
||||
|
||||
result_text = self._get_subnet_result(calculator_page)
|
||||
|
||||
# Verify that the networks table is displayed
|
||||
assert "Available Networks" in result_text, "Available Networks table should be displayed for /10"
|
||||
assert "Network" in result_text, "Network column should be present"
|
||||
assert "First Host" in result_text, "First Host column should be present"
|
||||
assert "Last Host" in result_text, "Last Host column should be present"
|
||||
assert "Broadcast" in result_text, "Broadcast column should be present"
|
||||
|
||||
# Verify that we get multiple networks (should be many for /10)
|
||||
assert "Showing" in result_text, "Should show count of networks"
|
||||
assert "of" in result_text, "Should show total possible networks"
|
||||
|
||||
# Test with /8 (even larger subnet)
|
||||
cidr_input.clear()
|
||||
cidr_input.send_keys("8")
|
||||
|
||||
# Wait for results to update
|
||||
WebDriverWait(calculator_page, 10).until(
|
||||
lambda driver: "Available Networks" in self._get_subnet_result(driver)
|
||||
)
|
||||
|
||||
result_text = self._get_subnet_result(calculator_page)
|
||||
|
||||
# Verify that the networks table is still displayed for /8
|
||||
assert "Available Networks" in result_text, "Available Networks table should be displayed for /8"
|
||||
assert "Network" in result_text, "Network column should be present for /8"
|
||||
|
||||
# Test with /6 (very large subnet)
|
||||
cidr_input.clear()
|
||||
cidr_input.send_keys("6")
|
||||
|
||||
# Wait for results to update
|
||||
WebDriverWait(calculator_page, 10).until(
|
||||
lambda driver: "Available Networks" in self._get_subnet_result(driver)
|
||||
)
|
||||
|
||||
result_text = self._get_subnet_result(calculator_page)
|
||||
|
||||
# Verify that the networks table is still displayed for /6
|
||||
assert "Available Networks" in result_text, "Available Networks table should be displayed for /6"
|
||||
assert "Network" in result_text, "Network column should be present for /6"
|
||||
|
||||
def test_subnet_rfc_network_detection(self, calculator_page):
|
||||
"""Test RFC network type detection and display"""
|
||||
calculator_page.get("http://localhost:8008/subnet")
|
||||
|
||||
# Wait for calculator to load
|
||||
WebDriverWait(calculator_page, 10).until(
|
||||
EC.presence_of_element_located((By.CSS_SELECTOR, "input[name='ipAddress']"))
|
||||
)
|
||||
|
||||
ip_input = calculator_page.find_element(By.CSS_SELECTOR, "input[name='ipAddress']")
|
||||
cidr_input = calculator_page.find_element(By.CSS_SELECTOR, "input[name='cidr']")
|
||||
|
||||
# Test cases for different RFC network types
|
||||
test_cases = [
|
||||
("10.0.0.1", "Private Network", "RFC 1918", "10.0.0.0/8"),
|
||||
("192.168.1.1", "Private Network", "RFC 1918", "192.168.0.0/16"),
|
||||
("172.16.0.1", "Private Network", "RFC 1918", "172.16.0.0/12"),
|
||||
("127.0.0.1", "Loopback", "RFC 1122", "127.0.0.0/8"),
|
||||
("169.254.1.1", "Link-Local", "RFC 3927", "169.254.0.0/16"),
|
||||
("100.64.1.1", "CGNAT", "RFC 6598", "100.64.0.0/10"),
|
||||
("192.0.2.1", "Test-Net", "RFC 5737", "192.0.2.0/24"),
|
||||
("224.0.0.1", "Multicast", "RFC 1112", "224.0.0.0/4"),
|
||||
("8.8.8.8", "Public IP", None, None), # Google DNS
|
||||
]
|
||||
|
||||
for ip_addr, expected_type, expected_rfc, expected_cidr in test_cases:
|
||||
# Set the IP address
|
||||
ip_input.clear()
|
||||
ip_input.send_keys(ip_addr)
|
||||
cidr_input.clear()
|
||||
cidr_input.send_keys("24")
|
||||
|
||||
# Wait for results
|
||||
WebDriverWait(calculator_page, 10).until(
|
||||
EC.presence_of_element_located((By.CLASS_NAME, "result"))
|
||||
)
|
||||
|
||||
result_text = self._get_subnet_result(calculator_page)
|
||||
|
||||
# Verify Network Type Information section is displayed
|
||||
assert "Network Type Information" in result_text, f"Network Type Information section should be displayed for {ip_addr}"
|
||||
assert "Network Type:" in result_text, f"Network Type should be displayed for {ip_addr}"
|
||||
assert "Description:" in result_text, f"Description should be displayed for {ip_addr}"
|
||||
|
||||
# Verify the network type is correct
|
||||
assert f"Network Type: {expected_type}" in result_text, f"Expected {expected_type} for {ip_addr}, got: {result_text}"
|
||||
|
||||
# Verify RFC reference if expected
|
||||
if expected_rfc:
|
||||
assert f"RFC Reference: {expected_rfc}" in result_text, f"Expected RFC {expected_rfc} for {ip_addr}"
|
||||
else:
|
||||
# For public IPs, RFC reference should not be shown
|
||||
assert "RFC Reference:" not in result_text, f"RFC Reference should not be shown for public IP {ip_addr}"
|
||||
|
||||
# Verify RFC range (CIDR notation) if expected
|
||||
if expected_cidr:
|
||||
assert f"RFC Range: {expected_cidr}" in result_text, f"Expected RFC Range {expected_cidr} for {ip_addr}"
|
||||
else:
|
||||
# For public IPs, RFC range should not be shown
|
||||
assert "RFC Range:" not in result_text, f"RFC Range should not be shown for public IP {ip_addr}"
|
||||
|
||||
# Note: IPv6 RFC network detection test is commented out due to test environment issues
|
||||
# with IPv6 mode switching. The functionality works in the actual application.
|
||||
# def test_subnet_ipv6_rfc_network_detection(self, calculator_page):
|
||||
# """Test IPv6 RFC network type detection and display"""
|
||||
# # This test would verify IPv6 network type detection but is disabled
|
||||
# # due to test environment issues with IPv6 mode switching
|
||||
# pass
|
||||
|
||||
def _get_subnet_result(self, driver):
|
||||
"""Helper method to get subnet calculation result text"""
|
||||
result_element = driver.find_element(By.CLASS_NAME, "result")
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue