This release significantly expands internationalization support and adds comprehensive identity management features. Internationalization (i18n): - Add 5 new languages: Spanish, Italian, German, Dutch, Portuguese - Expand from 3 to 8 total supported languages - Redesign language switcher for better scalability (dropdown UI) - Complete translations for all features across all languages Identity Management: - Multiple sender identities with per-identity signatures - Sub-addressing support (user+tag@domain.com) - Context-aware tag suggestions for sub-addresses - Identity badges in email viewer and list - Full CRUD operations for managing identities Newsletter Management: - RFC 2369 List-Unsubscribe support (one-click unsubscribe) - HTTP and mailto unsubscribe methods - Security validation prevents XSS attacks - Two-step confirmation with persistent dismissal Security & Accessibility: - Dark mode email readability (intelligent color transformation) - WCAG 2.0 Level AA color contrast compliance - Comprehensive XSS prevention with validation utilities - Unit test coverage for security-critical code (57 validation tests) Testing: - Add unit tests for validation utilities - Add unit tests for email sanitization - Add unit tests for color transformation - Full test coverage for XSS attack vectors
210 lines
6.2 KiB
TypeScript
210 lines
6.2 KiB
TypeScript
type RGB = { r: number; g: number; b: number; a?: number };
|
|
|
|
const namedColors: Record<string, string> = {
|
|
transparent: 'rgba(0,0,0,0)',
|
|
black: '#000000',
|
|
white: '#ffffff',
|
|
red: '#ff0000',
|
|
green: '#008000',
|
|
blue: '#0000ff',
|
|
yellow: '#ffff00',
|
|
cyan: '#00ffff',
|
|
magenta: '#ff00ff',
|
|
gray: '#808080',
|
|
grey: '#808080',
|
|
silver: '#c0c0c0',
|
|
maroon: '#800000',
|
|
olive: '#808000',
|
|
lime: '#00ff00',
|
|
aqua: '#00ffff',
|
|
teal: '#008080',
|
|
navy: '#000080',
|
|
fuchsia: '#ff00ff',
|
|
purple: '#800080',
|
|
};
|
|
|
|
export function parseColor(colorString: string): RGB | null {
|
|
if (!colorString || typeof colorString !== 'string') {
|
|
return null;
|
|
}
|
|
|
|
const color = colorString.trim().toLowerCase();
|
|
|
|
if (color === 'inherit' || color === 'currentcolor') {
|
|
return null;
|
|
}
|
|
|
|
if (namedColors[color]) {
|
|
return parseColor(namedColors[color]);
|
|
}
|
|
|
|
if (color === 'transparent') {
|
|
return { r: 0, g: 0, b: 0, a: 0 };
|
|
}
|
|
|
|
const hexMatch = color.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
|
|
if (hexMatch) {
|
|
const hex = hexMatch[1];
|
|
if (hex.length === 3) {
|
|
return {
|
|
r: parseInt(hex[0] + hex[0], 16),
|
|
g: parseInt(hex[1] + hex[1], 16),
|
|
b: parseInt(hex[2] + hex[2], 16),
|
|
};
|
|
}
|
|
return {
|
|
r: parseInt(hex.substr(0, 2), 16),
|
|
g: parseInt(hex.substr(2, 2), 16),
|
|
b: parseInt(hex.substr(4, 2), 16),
|
|
};
|
|
}
|
|
|
|
const rgbMatch = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/);
|
|
if (rgbMatch) {
|
|
const r = parseInt(rgbMatch[1], 10);
|
|
const g = parseInt(rgbMatch[2], 10);
|
|
const b = parseInt(rgbMatch[3], 10);
|
|
const a = rgbMatch[4] ? parseFloat(rgbMatch[4]) : undefined;
|
|
|
|
if (r > 255 || g > 255 || b > 255 || r < 0 || g < 0 || b < 0) {
|
|
return null;
|
|
}
|
|
if (a !== undefined && (a < 0 || a > 1)) {
|
|
return null;
|
|
}
|
|
|
|
return { r, g, b, a };
|
|
}
|
|
|
|
const hslMatch = color.match(/^hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%(?:,\s*([\d.]+))?\)$/);
|
|
if (hslMatch) {
|
|
const h = parseInt(hslMatch[1], 10) / 360;
|
|
const s = parseFloat(hslMatch[2]) / 100;
|
|
const l = parseFloat(hslMatch[3]) / 100;
|
|
const a = hslMatch[4] ? parseFloat(hslMatch[4]) : undefined;
|
|
|
|
const hue2rgb = (p: number, q: number, t: number) => {
|
|
if (t < 0) t += 1;
|
|
if (t > 1) t -= 1;
|
|
if (t < 1 / 6) return p + (q - p) * 6 * t;
|
|
if (t < 1 / 2) return q;
|
|
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
|
|
return p;
|
|
};
|
|
|
|
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
const p = 2 * l - q;
|
|
|
|
return {
|
|
r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
|
|
g: Math.round(hue2rgb(p, q, h) * 255),
|
|
b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255),
|
|
a,
|
|
};
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
export function getLuminance(r: number, g: number, b: number): number {
|
|
const [rs, gs, bs] = [r, g, b].map((c) => {
|
|
const val = c / 255;
|
|
return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
|
|
});
|
|
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
|
|
}
|
|
|
|
export function isDarkColor(colorString: string): boolean {
|
|
const rgb = parseColor(colorString);
|
|
if (!rgb) return false;
|
|
const luminance = getLuminance(rgb.r, rgb.g, rgb.b);
|
|
return luminance < 0.5;
|
|
}
|
|
|
|
export function transformColorForDarkMode(colorString: string): string {
|
|
const rgb = parseColor(colorString);
|
|
if (!rgb) return colorString;
|
|
|
|
if (rgb.a !== undefined && rgb.a < 0.1) {
|
|
return colorString;
|
|
}
|
|
|
|
const luminance = getLuminance(rgb.r, rgb.g, rgb.b);
|
|
|
|
if (luminance < 0.4) {
|
|
const invR = 255 - rgb.r;
|
|
const invG = 255 - rgb.g;
|
|
const invB = 255 - rgb.b;
|
|
|
|
const boost = 1.3;
|
|
const r = Math.min(255, Math.round(invR * boost));
|
|
const g = Math.min(255, Math.round(invG * boost));
|
|
const b = Math.min(255, Math.round(invB * boost));
|
|
|
|
return rgb.a !== undefined ? `rgba(${r}, ${g}, ${b}, ${rgb.a})` : `rgb(${r}, ${g}, ${b})`;
|
|
}
|
|
|
|
if (luminance >= 0.4 && luminance < 0.6) {
|
|
const factor = 1.5;
|
|
const r = Math.min(255, Math.round(rgb.r + (255 - rgb.r) * factor * 0.4));
|
|
const g = Math.min(255, Math.round(rgb.g + (255 - rgb.g) * factor * 0.4));
|
|
const b = Math.min(255, Math.round(rgb.b + (255 - rgb.b) * factor * 0.4));
|
|
|
|
return rgb.a !== undefined ? `rgba(${r}, ${g}, ${b}, ${rgb.a})` : `rgb(${r}, ${g}, ${b})`;
|
|
}
|
|
|
|
return colorString;
|
|
}
|
|
|
|
export function transformInlineStyles(cssText: string, theme: 'light' | 'dark'): string {
|
|
if (theme !== 'dark' || !cssText) {
|
|
return cssText;
|
|
}
|
|
|
|
const styleProps = cssText.split(';').map((prop) => prop.trim()).filter(Boolean);
|
|
|
|
const transformedProps = styleProps.map((prop) => {
|
|
const colonIndex = prop.indexOf(':');
|
|
if (colonIndex === -1) return prop;
|
|
|
|
const property = prop.slice(0, colonIndex).trim();
|
|
const value = prop.slice(colonIndex + 1).trim();
|
|
|
|
if (property === 'color') {
|
|
const hasImportant = value.includes('!important');
|
|
const colorValue = value.replace('!important', '').trim();
|
|
const transformed = transformColorForDarkMode(colorValue);
|
|
return `${property}: ${transformed}${hasImportant ? ' !important' : ''}`;
|
|
}
|
|
|
|
if (property === 'background-color') {
|
|
const hasImportant = value.includes('!important');
|
|
const colorValue = value.replace('!important', '').trim();
|
|
const transformed = transformColorForDarkMode(colorValue);
|
|
return `${property}: ${transformed}${hasImportant ? ' !important' : ''}`;
|
|
}
|
|
|
|
if (property === 'background' && !value.includes('url(')) {
|
|
const colorMatch = value.match(/#[0-9a-f]{3,6}|rgba?\([^)]+\)|hsla?\([^)]+\)|[a-z]+/i);
|
|
if (colorMatch) {
|
|
const hasImportant = value.includes('!important');
|
|
const originalColor = colorMatch[0];
|
|
const transformed = transformColorForDarkMode(originalColor);
|
|
const newValue = value.replace(originalColor, transformed);
|
|
return `${property}: ${newValue.replace('!important', '').trim()}${hasImportant ? ' !important' : ''}`;
|
|
}
|
|
}
|
|
|
|
if (property === 'border-color') {
|
|
const hasImportant = value.includes('!important');
|
|
const colorValue = value.replace('!important', '').trim();
|
|
const transformed = transformColorForDarkMode(colorValue);
|
|
return `${property}: ${transformed}${hasImportant ? ' !important' : ''}`;
|
|
}
|
|
|
|
return prop;
|
|
});
|
|
|
|
return transformedProps.join('; ');
|
|
}
|