From dabd1568d1a1e832c1e8a2e4d9b94319e8f76a9f Mon Sep 17 00:00:00 2001 From: Lucas Rayan Date: Fri, 16 Oct 2026 17:04:35 -0300 Subject: [PATCH] feat(bimi): logo studio, certificate upload and a setup check in the console The console took pasted SVG text and a URL. It now: - takes a PNG or SVG and makes the logo BIMI accepts (SVG Tiny PS, square, at most 32 KB). An SVG has what the format forbids removed and is told what; a PNG is traced into vectors in the browser (imagetracerjs, public domain), walking down quality presets until it fits. The person positions it as in the photo editor: drag, zoom, background colour, preview in a circle or rounded square, and downloads the exact SVG to give a certificate authority - holds the .pem the authority returns, validated against the logo and domain, and serves it at /.well-known/bimi/vmc.pem (routed by the webmail) - shows the DNS record and runs the setup check (logo, DMARC, record, public URLs, certificate) - a golden-file contract: the SVGs the studio produces are validated by the server's own validator (Go) and pinned by the studio's tests (TS) - found by those tests: an element inside a link kept its onclick when the link was unwrapped; links are now unwrapped before cleaning - the BIMI and photo texts are in Brazilian Portuguese with accents (they had been written without), and in Spanish with accents A VMC cannot be generated from an image: it is issued by a certificate authority. The README and the panel say so. Co-Authored-By: Claude Sonnet 5.5 --- README.md | 48 +- .../internal/domain/bimi/svg_test.go | 25 + .../testdata/studio/from-a-design-tool.svg | 4 + .../testdata/studio/positioned-and-zoomed.svg | 4 + .../testdata/studio/traced-from-a-png.svg | 2 + services/webmail/messages/en.json | 71 +- services/webmail/messages/es.json | 77 +- services/webmail/messages/pt-BR.json | 81 +- services/webmail/package-lock.json | 7 + services/webmail/package.json | 1 + .../src/app/(admin)/admin/domains/page.tsx | 137 +--- services/webmail/src/components/BimiPanel.tsx | 741 ++++++++++++++++++ services/webmail/src/imagetracerjs.d.ts | 10 + services/webmail/src/lib/bimiLogo.test.ts | 228 ++++++ services/webmail/src/lib/bimiLogo.ts | 311 ++++++++ 15 files changed, 1583 insertions(+), 164 deletions(-) create mode 100644 services/protocols/internal/domain/bimi/testdata/studio/from-a-design-tool.svg create mode 100644 services/protocols/internal/domain/bimi/testdata/studio/positioned-and-zoomed.svg create mode 100644 services/protocols/internal/domain/bimi/testdata/studio/traced-from-a-png.svg create mode 100644 services/webmail/src/components/BimiPanel.tsx create mode 100644 services/webmail/src/imagetracerjs.d.ts create mode 100644 services/webmail/src/lib/bimiLogo.test.ts create mode 100644 services/webmail/src/lib/bimiLogo.ts diff --git a/README.md b/README.md index f51bd3d..756b96a 100644 --- a/README.md +++ b/README.md @@ -194,21 +194,45 @@ Gmail or Outlook shows beside a message comes from the *recipient's* own contacts, or from the sender's Google or Microsoft account. A self-hosted server cannot put an image there. -**BIMI** is what external clients do read, and it is per domain — one mark for -everyone who sends from it. Publishing one needs: +**BIMI** is what external clients do read, and it is per domain: one mark for +everyone who sends from it. Publishing one needs three things, and the console +(`/admin/domains`, under the domain) handles each: -- DMARC at `p=quarantine` or `p=reject`, which this server already sets; -- a logo in SVG Tiny Portable/Secure — square viewBox, one ``, nothing - active or external. `/admin/domains` validates an upload against every rule - at once and names the ones it fails, because a receiver that rejects a mark - simply shows nothing; -- a **Verified Mark Certificate** for Gmail and Outlook to render it. It is - issued against a registered trademark, costs on the order of US$1000 a year, - and without it the record is still valid — some clients use it, those two do - not. +1. **The logo.** Upload a PNG or an SVG. The studio converts it to what BIMI + accepts, SVG Tiny Portable/Secure on a square canvas of at most 32 KB with + nothing active or external in it, and lets you place it the way the profile + photo editor does: drag, zoom, background colour, with a preview inside the + circle or rounded square clients draw. An SVG has what the format forbids + removed (scripts, links, embedded bitmaps, editor metadata) and says what; a + PNG is traced into vector paths, which loses some detail, so send the SVG + when you have it. The server validates the result again against every rule + at once, because a receiver that rejects a mark simply shows nothing. +2. **DMARC at `p=quarantine` or `p=reject`** with `pct=100`, which this server + already sets. +3. **A certificate, for Gmail and Apple Mail to render it.** A Verified Mark + Certificate (VMC, for a registered trademark) or a Common Mark Certificate + (CMC, for a mark in use) is **issued by a certificate authority** + (DigiCert, Entrust, SSL.com and others) after it checks the organisation. + It cannot be generated here from an image, and nothing signed here would be + trusted. What the console does: gives you the exact SVG to send the + authority, takes the `.pem` it returns, and refuses one that would not work + (the logo inside it must be byte for byte the published one, it must cover + the domain, be in date, and never contain a private key). It then serves it + from `https://<mail host>/.well-known/bimi/vmc.pem` and points the `a=` tag + there. Without a certificate the record is still valid and some clients use + it; Gmail and Apple Mail do not. + +"Verificar configuracao" in the panel looks at what a receiver would: the logo +file, DMARC, the BIMI record in DNS, the public URL of the logo, the +certificate and its public URL, and names the one that is wrong. The logo is served from `https://<mail host>/.well-known/bimi/default.svg` and -the record is published with the rest of the zone. +the record is published with the rest of the zone. Replacing the logo under a +held certificate breaks the certificate, and the console says so. + +A changed profile photo shows up at once everywhere in the webmail: every +photo carries a version that is bumped on save, in this tab and the others. The +server lets a browser reuse one for a minute and then revalidates it. ### DANE diff --git a/services/protocols/internal/domain/bimi/svg_test.go b/services/protocols/internal/domain/bimi/svg_test.go index 48a5543..91cf37d 100644 --- a/services/protocols/internal/domain/bimi/svg_test.go +++ b/services/protocols/internal/domain/bimi/svg_test.go @@ -2,6 +2,8 @@ package bimi import ( "fmt" + "os" + "path/filepath" "strings" "testing" ) @@ -150,3 +152,26 @@ func TestValidate_ReportsEveryViolationAtOnce(t *testing.T) { } } } + +// The webmail's logo studio (services/webmail/src/lib/bimiLogo.ts) produces the +// files in testdata/studio, and its tests keep them current. This is the other +// half of the contract: every one of them has to pass the validator that guards +// the upload. A studio that starts producing something the server refuses +// fails here, instead of in front of an operator who did everything right. +func TestWhatTheStudioProducesIsAccepted(t *testing.T) { + files, err := filepath.Glob("testdata/studio/*.svg") + if err != nil || len(files) == 0 { + t.Fatalf("no studio output to check (%v)", err) + } + for _, file := range files { + t.Run(filepath.Base(file), func(t *testing.T) { + svg, err := os.ReadFile(file) + if err != nil { + t.Fatal(err) + } + if violations := Validate(svg); len(violations) != 0 { + t.Errorf("the validator refused what the studio made: %v", violations) + } + }) + } +} diff --git a/services/protocols/internal/domain/bimi/testdata/studio/from-a-design-tool.svg b/services/protocols/internal/domain/bimi/testdata/studio/from-a-design-tool.svg new file mode 100644 index 0000000..dd7d26a --- /dev/null +++ b/services/protocols/internal/domain/bimi/testdata/studio/from-a-design-tool.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny-ps" viewBox="0 0 512 512"><title>Example + + diff --git a/services/protocols/internal/domain/bimi/testdata/studio/positioned-and-zoomed.svg b/services/protocols/internal/domain/bimi/testdata/studio/positioned-and-zoomed.svg new file mode 100644 index 0000000..db9972a --- /dev/null +++ b/services/protocols/internal/domain/bimi/testdata/studio/positioned-and-zoomed.svg @@ -0,0 +1,4 @@ + +Example brand + + diff --git a/services/protocols/internal/domain/bimi/testdata/studio/traced-from-a-png.svg b/services/protocols/internal/domain/bimi/testdata/studio/traced-from-a-png.svg new file mode 100644 index 0000000..b9bd5c5 --- /dev/null +++ b/services/protocols/internal/domain/bimi/testdata/studio/traced-from-a-png.svg @@ -0,0 +1,2 @@ + +Traced diff --git a/services/webmail/messages/en.json b/services/webmail/messages/en.json index dbe7f27..56fe4d3 100644 --- a/services/webmail/messages/en.json +++ b/services/webmail/messages/en.json @@ -115,14 +115,79 @@ "totpRemoved": "Second factor removed, with its recovery codes.", "tlsaDigest": "Digest for the TLSA record (DANE 3 1 1)", "bimiTitle": "BIMI for {domain}", - "bimiExplainer": "BIMI is the only mechanism that shows an image beside your mail in external clients. It is per domain, not per user. Gmail and Outlook render it only when the record points at a VMC.", + "bimiExplainer": "BIMI is the only mechanism that shows an image next to your mail in outside clients. It is per domain, not per user. Upload the logo as a PNG or SVG and the system converts it to the BIMI format. Gmail and Apple Mail show it only with a certificate (VMC or CMC) issued by a certificate authority, which this system cannot create.", "bimiConfigured": "Logo published", "bimiNotConfigured": "No logo", "bimiNoVmc": "No VMC: Gmail and Outlook will not show this logo.", - "bimiSvg": "Logo (SVG Tiny PS)", "bimiVmc": "VMC URL (optional)", "bimiRejected": "The logo does not meet SVG Tiny Portable/Secure:", - "bimiSaved": "Logo saved." + "bimiSaved": "Logo saved.", + "bimiNone": "No logo", + "bimiChoose": "Choose PNG or SVG", + "bimiReplace": "Replace logo", + "bimiFormatHint": "PNG or SVG. The result is a square SVG Tiny PS of at most 32 KB.", + "bimiDragHint": "Drag to position. Mail clients show the logo inside a circle or a rounded square.", + "bimiZoom": "Zoom", + "bimiBackground": "Background colour", + "bimiBrandTitle": "Brand name (SVG title)", + "bimiMask": "Preview", + "bimiMask_circle": "Circle", + "bimiMask_rounded": "Rounded square", + "bimiMask_none": "No mask", + "bimiPreset": "Conversion quality", + "bimiPreset_high": "High (most faithful)", + "bimiPreset_balanced": "Balanced", + "bimiPreset_compact": "Compact", + "bimiPreset_tiny": "Minimal", + "bimiTraced": "The PNG was converted to vector, which loses some detail. For the sharpest result, upload the original SVG.", + "bimiAutoLowered": "The quality was lowered automatically to fit in 32 KB.", + "bimiSize": "{size} of {max}", + "bimiTooBig": "The file is over 32 KB. Pick a lower quality or simplify the drawing.", + "bimiRemoved": "Removed from the file, because BIMI does not allow them: {items}.", + "bimiTextWarning": "The logo contains text, which uses the reader's font and may look different. Convert the text to outlines in your editor.", + "bimiDownload": "Download SVG", + "bimiSaveLogo": "Save logo", + "bimiCertTitle": "Certificate (VMC or CMC)", + "bimiCertExplainer": "Gmail and Apple Mail show the logo only with a certificate issued by a certificate authority such as DigiCert, Entrust or SSL.com: a VMC, for a registered trademark, or a CMC, for a mark in use. This system cannot create that certificate. Download the SVG above, send it to the authority, and put the .pem file it returns here. Gmail accepts both types; other clients may require a VMC.", + "bimiCertChoose": "Upload .pem file", + "bimiCertReplace": "Replace certificate", + "bimiCertPaste": "Or paste the .pem contents", + "bimiCertSave": "Save certificate", + "bimiCertValid": "Valid certificate", + "bimiCertInvalid": "Certificate has problems", + "bimiCertIssued": "Issued to {organization} by {issuer}", + "bimiCertValidUntil": "Valid until {date}", + "bimiCertDomains": "Domains: {names}", + "bimiCertMatches": "It carries exactly this logo.", + "bimiCertMismatch": "The logo inside the certificate is not the one published. Upload the SVG it was issued for.", + "bimiCertRemove": "Remove certificate", + "bimiCertSaved": "Certificate saved.", + "bimiCertRejected": "The certificate was refused:", + "bimiRecordTitle": "DNS record", + "bimiRecordHint": "This TXT record is created by the DNS reconciliation. Check it, or create it by hand at your provider.", + "bimiCopy": "Copy", + "bimiCopied": "Copied", + "bimiCheckTitle": "Check the setup", + "bimiCheckExplainer": "Looks at DNS and the public URLs the way a mail server would, and says which part is wrong.", + "bimiCheckRun": "Check now", + "bimiCheckRunning": "Checking...", + "bimiCheckReady": "Everything is in place for BIMI.", + "bimiCheckNotReady": "Some items need fixing.", + "bimiCheckStatus_ok": "OK", + "bimiCheckStatus_warn": "Notice", + "bimiCheckStatus_fail": "Failed", + "bimiCheckItem_logo": "Logo file", + "bimiCheckItem_dmarc": "DMARC policy", + "bimiCheckItem_record": "BIMI record in DNS", + "bimiCheckItem_logoUrl": "Public URL of the logo", + "bimiCheckItem_certificate": "Certificate", + "bimiCheckItem_certificateUrl": "Public URL of the certificate", + "bimiError_notXml": "That file is not a valid SVG.", + "bimiError_notSvg": "That file is not an SVG.", + "bimiError_noSize": "The SVG has no size (viewBox, or width and height), so it cannot be positioned.", + "bimiError_empty": "No drawing could be found in that file.", + "bimiError_notImage": "Choose a PNG or SVG file.", + "bimiError_tooComplex": "The drawing is too complex to fit in 32 KB." }, "auth": { "adminLoginTitle": "Admin console", diff --git a/services/webmail/messages/es.json b/services/webmail/messages/es.json index a78242f..e72d6eb 100644 --- a/services/webmail/messages/es.json +++ b/services/webmail/messages/es.json @@ -115,14 +115,79 @@ "totpRemoved": "Segundo factor eliminado, con sus codigos de recuperacion.", "tlsaDigest": "Digest para el registro TLSA (DANE 3 1 1)", "bimiTitle": "BIMI de {domain}", - "bimiExplainer": "BIMI es el unico mecanismo que muestra una imagen junto a su correo en clientes externos. Es por dominio, no por usuario. Gmail y Outlook solo lo dibujan cuando el registro apunta a un VMC.", + "bimiExplainer": "BIMI es el único mecanismo que muestra una imagen junto a su correo en clientes externos. Es por dominio, no por usuario. Suba el logotipo en PNG o SVG y el sistema lo convierte al formato de BIMI. Gmail y Apple Mail solo lo muestran con un certificado (VMC o CMC) emitido por una autoridad certificadora, que este sistema no puede crear.", "bimiConfigured": "Logotipo publicado", "bimiNotConfigured": "Sin logotipo", - "bimiNoVmc": "Sin VMC: Gmail y Outlook no mostraran este logotipo.", - "bimiSvg": "Logotipo (SVG Tiny PS)", - "bimiVmc": "URL del VMC (opcional)", + "bimiNoVmc": "Sin certificado: Gmail y Apple Mail no mostrarán este logotipo.", + "bimiVmc": "URL del certificado (opcional)", "bimiRejected": "El logotipo no cumple SVG Tiny Portable/Secure:", - "bimiSaved": "Logotipo guardado." + "bimiSaved": "Logotipo guardado.", + "bimiNone": "Sin logotipo", + "bimiChoose": "Elegir PNG o SVG", + "bimiReplace": "Cambiar logotipo", + "bimiFormatHint": "PNG o SVG. El resultado es un SVG Tiny PS cuadrado de como máximo 32 KB.", + "bimiDragHint": "Arrastre para colocar. Los clientes de correo muestran el logotipo dentro de un círculo o de un cuadrado redondeado.", + "bimiZoom": "Zoom", + "bimiBackground": "Color de fondo", + "bimiBrandTitle": "Nombre de la marca (título del SVG)", + "bimiMask": "Vista previa", + "bimiMask_circle": "Círculo", + "bimiMask_rounded": "Cuadrado redondeado", + "bimiMask_none": "Sin máscara", + "bimiPreset": "Calidad de la conversión", + "bimiPreset_high": "Alta (más fiel)", + "bimiPreset_balanced": "Equilibrada", + "bimiPreset_compact": "Compacta", + "bimiPreset_tiny": "Mínima", + "bimiTraced": "El PNG se convirtió a vector, lo que pierde algo de detalle. Para el resultado más nítido, suba el SVG original.", + "bimiAutoLowered": "La calidad se redujo automáticamente para caber en 32 KB.", + "bimiSize": "{size} de {max}", + "bimiTooBig": "El archivo supera 32 KB. Elija una calidad menor o simplifique el dibujo.", + "bimiRemoved": "Se quitaron del archivo, porque BIMI no los permite: {items}.", + "bimiTextWarning": "El logotipo contiene texto, que usa la fuente de quien lee el mensaje y puede verse distinto. Convierta el texto en curvas en su editor.", + "bimiDownload": "Descargar SVG", + "bimiSaveLogo": "Guardar logotipo", + "bimiCertTitle": "Certificado (VMC o CMC)", + "bimiCertExplainer": "Gmail y Apple Mail solo muestran el logotipo con un certificado emitido por una autoridad certificadora, como DigiCert, Entrust o SSL.com: VMC, para marca registrada, o CMC, para marca en uso. El sistema no crea ese certificado. Descargue el SVG de arriba, envíelo a la autoridad y ponga aquí el archivo .pem que le devuelva. Gmail acepta los dos tipos; otros clientes pueden exigir VMC.", + "bimiCertChoose": "Subir archivo .pem", + "bimiCertReplace": "Cambiar certificado", + "bimiCertPaste": "O pegue el contenido del .pem", + "bimiCertSave": "Guardar certificado", + "bimiCertValid": "Certificado válido", + "bimiCertInvalid": "Certificado con problemas", + "bimiCertIssued": "Emitido para {organization} por {issuer}", + "bimiCertValidUntil": "Válido hasta {date}", + "bimiCertDomains": "Dominios: {names}", + "bimiCertMatches": "Contiene exactamente este logotipo.", + "bimiCertMismatch": "El logotipo dentro del certificado no es el publicado. Suba el SVG para el que fue emitido.", + "bimiCertRemove": "Quitar certificado", + "bimiCertSaved": "Certificado guardado.", + "bimiCertRejected": "El certificado fue rechazado:", + "bimiRecordTitle": "Registro DNS", + "bimiRecordHint": "Este registro TXT lo crea la reconciliación del DNS. Revíselo, o créelo manualmente en su proveedor.", + "bimiCopy": "Copiar", + "bimiCopied": "Copiado", + "bimiCheckTitle": "Verificar la configuración", + "bimiCheckExplainer": "Consulta el DNS y las URL públicas como lo haría un servidor de correo, y dice qué parte está mal.", + "bimiCheckRun": "Verificar ahora", + "bimiCheckRunning": "Verificando...", + "bimiCheckReady": "Todo listo para BIMI.", + "bimiCheckNotReady": "Hay elementos por corregir.", + "bimiCheckStatus_ok": "OK", + "bimiCheckStatus_warn": "Aviso", + "bimiCheckStatus_fail": "Falló", + "bimiCheckItem_logo": "Archivo del logotipo", + "bimiCheckItem_dmarc": "Política DMARC", + "bimiCheckItem_record": "Registro BIMI en el DNS", + "bimiCheckItem_logoUrl": "URL pública del logotipo", + "bimiCheckItem_certificate": "Certificado", + "bimiCheckItem_certificateUrl": "URL pública del certificado", + "bimiError_notXml": "Ese archivo no es un SVG válido.", + "bimiError_notSvg": "Ese archivo no es un SVG.", + "bimiError_noSize": "El SVG no tiene tamaño (viewBox, o width y height), así que no se puede colocar.", + "bimiError_empty": "No se encontró ningún dibujo en ese archivo.", + "bimiError_notImage": "Elija un archivo PNG o SVG.", + "bimiError_tooComplex": "El dibujo es demasiado complejo para caber en 32 KB." }, "auth": { "adminLoginTitle": "Consola de administración", @@ -455,7 +520,7 @@ }, "avatar": { "title": "Foto de perfil", - "explainer": "Esta foto aparece dentro de LambdaMail. Servicios externos como Gmail y Outlook no la leen: para eso, vea BIMI en la pagina de dominios.", + "explainer": "Esta foto aparece dentro de LambdaMail. Servicios externos como Gmail y Outlook no la leen: para eso, vea BIMI en la página de dominios.", "none": "Sin foto", "choose": "Elegir foto", "replace": "Cambiar foto", diff --git a/services/webmail/messages/pt-BR.json b/services/webmail/messages/pt-BR.json index 9cf5e2f..2799a1e 100644 --- a/services/webmail/messages/pt-BR.json +++ b/services/webmail/messages/pt-BR.json @@ -115,14 +115,79 @@ "totpRemoved": "Segundo factor removido, com os codigos de recuperacao.", "tlsaDigest": "Digest para o registo TLSA (DANE 3 1 1)", "bimiTitle": "BIMI de {domain}", - "bimiExplainer": "O BIMI e o unico mecanismo que mostra uma imagem ao lado do seu correio em clientes externos. E por dominio, nao por utilizador. O Gmail e o Outlook so o desenham quando o registo aponta para um VMC.", + "bimiExplainer": "O BIMI é o único mecanismo que mostra uma imagem ao lado do seu e-mail em clientes externos. Ele vale por domínio, não por usuário. Envie o logotipo em PNG ou SVG e o sistema o converte para o formato do BIMI. O Gmail e o Apple Mail só o mostram com um certificado (VMC ou CMC) emitido por uma autoridade certificadora, que este sistema não consegue criar.", "bimiConfigured": "Logotipo publicado", "bimiNotConfigured": "Sem logotipo", - "bimiNoVmc": "Sem VMC: o Gmail e o Outlook nao vao mostrar este logotipo.", - "bimiSvg": "Logotipo (SVG Tiny PS)", - "bimiVmc": "URL do VMC (opcional)", - "bimiRejected": "O logotipo nao cumpre o SVG Tiny Portable/Secure:", - "bimiSaved": "Logotipo guardado." + "bimiNoVmc": "Sem certificado: o Gmail e o Apple Mail não vão mostrar este logotipo.", + "bimiVmc": "URL do certificado (opcional)", + "bimiRejected": "O logotipo não cumpre o SVG Tiny Portable/Secure:", + "bimiSaved": "Logotipo salvo.", + "bimiNone": "Sem logotipo", + "bimiChoose": "Escolher PNG ou SVG", + "bimiReplace": "Trocar logotipo", + "bimiFormatHint": "PNG ou SVG. O resultado é um SVG Tiny PS quadrado, com no máximo 32 KB.", + "bimiDragHint": "Arraste para posicionar. Os clientes de e-mail mostram o logotipo dentro de um círculo ou de um quadrado arredondado.", + "bimiZoom": "Zoom", + "bimiBackground": "Cor de fundo", + "bimiBrandTitle": "Nome da marca (título do SVG)", + "bimiMask": "Pré-visualização", + "bimiMask_circle": "Círculo", + "bimiMask_rounded": "Quadrado arredondado", + "bimiMask_none": "Sem máscara", + "bimiPreset": "Qualidade da conversão", + "bimiPreset_high": "Alta (mais fiel)", + "bimiPreset_balanced": "Equilibrada", + "bimiPreset_compact": "Compacta", + "bimiPreset_tiny": "Mínima", + "bimiTraced": "O PNG foi convertido em vetor, o que perde um pouco de detalhe. Para o resultado mais nítido, envie o SVG original.", + "bimiAutoLowered": "A qualidade foi reduzida automaticamente para caber em 32 KB.", + "bimiSize": "{size} de {max}", + "bimiTooBig": "O arquivo passa de 32 KB. Escolha uma qualidade menor ou simplifique o desenho.", + "bimiRemoved": "Foram removidos do arquivo, porque o BIMI não os permite: {items}.", + "bimiTextWarning": "O logotipo contém texto, que usa a fonte de quem lê a mensagem e pode mudar de aparência. Converta o texto em curvas no seu editor.", + "bimiDownload": "Baixar SVG", + "bimiSaveLogo": "Salvar logotipo", + "bimiCertTitle": "Certificado (VMC ou CMC)", + "bimiCertExplainer": "O Gmail e o Apple Mail só mostram o logotipo com um certificado emitido por uma autoridade certificadora, como DigiCert, Entrust ou SSL.com: VMC, para marca registrada, ou CMC, para marca em uso. O sistema não cria esse certificado. Baixe o SVG acima, envie-o à autoridade e coloque aqui o arquivo .pem que ela devolver. O Gmail aceita os dois tipos; outros clientes podem exigir VMC.", + "bimiCertChoose": "Enviar arquivo .pem", + "bimiCertReplace": "Trocar certificado", + "bimiCertPaste": "Ou cole o conteúdo do .pem", + "bimiCertSave": "Salvar certificado", + "bimiCertValid": "Certificado válido", + "bimiCertInvalid": "Certificado com problemas", + "bimiCertIssued": "Emitido para {organization} por {issuer}", + "bimiCertValidUntil": "Válido até {date}", + "bimiCertDomains": "Domínios: {names}", + "bimiCertMatches": "Contém exatamente este logotipo.", + "bimiCertMismatch": "O logotipo dentro do certificado não é o que está publicado. Envie o SVG para o qual ele foi emitido.", + "bimiCertRemove": "Remover certificado", + "bimiCertSaved": "Certificado salvo.", + "bimiCertRejected": "O certificado foi recusado:", + "bimiRecordTitle": "Registro DNS", + "bimiRecordHint": "Este registro TXT é criado pela reconciliação do DNS. Confira-o, ou crie-o manualmente no seu provedor.", + "bimiCopy": "Copiar", + "bimiCopied": "Copiado", + "bimiCheckTitle": "Verificar configuração", + "bimiCheckExplainer": "Consulta o DNS e as URLs públicas como um servidor de e-mail faria, e diz qual parte está errada.", + "bimiCheckRun": "Verificar agora", + "bimiCheckRunning": "Verificando...", + "bimiCheckReady": "Tudo certo para o BIMI.", + "bimiCheckNotReady": "Há itens a corrigir.", + "bimiCheckStatus_ok": "OK", + "bimiCheckStatus_warn": "Atenção", + "bimiCheckStatus_fail": "Falhou", + "bimiCheckItem_logo": "Arquivo do logotipo", + "bimiCheckItem_dmarc": "Política DMARC", + "bimiCheckItem_record": "Registro BIMI no DNS", + "bimiCheckItem_logoUrl": "URL pública do logotipo", + "bimiCheckItem_certificate": "Certificado", + "bimiCheckItem_certificateUrl": "URL pública do certificado", + "bimiError_notXml": "Esse arquivo não é um SVG válido.", + "bimiError_notSvg": "Esse arquivo não é um SVG.", + "bimiError_noSize": "O SVG não tem tamanho (viewBox, ou width e height), por isso não dá para posicioná-lo.", + "bimiError_empty": "Não foi possível encontrar um desenho nesse arquivo.", + "bimiError_notImage": "Escolha um arquivo PNG ou SVG.", + "bimiError_tooComplex": "O desenho é complexo demais para caber em 32 KB." }, "auth": { "adminLoginTitle": "Console de administração", @@ -455,12 +520,12 @@ }, "avatar": { "title": "Foto de perfil", - "explainer": "Esta foto aparece dentro do LambdaMail. Servicos externos como Gmail e Outlook nao a leem: para eles, veja BIMI na pagina de dominios.", + "explainer": "Esta foto aparece dentro do LambdaMail. Serviços externos como Gmail e Outlook não a leem: para eles, veja o BIMI na página de domínios.", "none": "Sem foto", "choose": "Escolher foto", "replace": "Trocar foto", "zoom": "Zoom", "dragToPosition": "Arraste para posicionar", - "notAnImage": "Nao foi possivel ler esse ficheiro como imagem." + "notAnImage": "Não foi possível ler esse arquivo como imagem." } } diff --git a/services/webmail/package-lock.json b/services/webmail/package-lock.json index 3f86b2d..188b692 100644 --- a/services/webmail/package-lock.json +++ b/services/webmail/package-lock.json @@ -11,6 +11,7 @@ "clsx": "^2.1.1", "dompurify": "^3.4.14", "framer-motion": "^11.18.2", + "imagetracerjs": "1.2.6", "lucide-react": "^0.474.0", "next": "15.5.27", "qrcode-generator": "^2.0.4", @@ -2721,6 +2722,12 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" } }, + "node_modules/imagetracerjs": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/imagetracerjs/-/imagetracerjs-1.2.6.tgz", + "integrity": "sha512-LKJlnKmXFzDdh6IZtXTyBxXcCLTAkwgKYS+NMiPXiXVnlTLjQC8fq7U89laUSgHtypJB3TdMMDK4ecG5NI/Cgw==", + "license": "Unlicense" + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", diff --git a/services/webmail/package.json b/services/webmail/package.json index bc1f3bd..6768627 100644 --- a/services/webmail/package.json +++ b/services/webmail/package.json @@ -13,6 +13,7 @@ "clsx": "^2.1.1", "dompurify": "^3.4.14", "framer-motion": "^11.18.2", + "imagetracerjs": "1.2.6", "lucide-react": "^0.474.0", "next": "15.5.27", "qrcode-generator": "^2.0.4", diff --git a/services/webmail/src/app/(admin)/admin/domains/page.tsx b/services/webmail/src/app/(admin)/admin/domains/page.tsx index 37fd678..6e5b5c9 100644 --- a/services/webmail/src/app/(admin)/admin/domains/page.tsx +++ b/services/webmail/src/app/(admin)/admin/domains/page.tsx @@ -5,6 +5,7 @@ import { Globe, RefreshCw, Plus, KeyRound, CheckCircle2, AlertTriangle } from "l import { useTranslations } from "../../../../i18n/provider"; import { Badge } from "../../../../components/ui/Badge"; import { Button } from "../../../../components/ui/Button"; +import { BimiPanel } from "../../../../components/BimiPanel"; /** * Domains, read from the database. @@ -79,13 +80,6 @@ export default function AdminDomainsPage() { const [reconciling, setReconciling] = useState(false); - // The BIMI mark for the selected domain: the one thing an external mail - // client will ever render for this sender. - const [bimi, setBimi] = useState<{ configured: boolean; vmc_url?: string; bytes?: number } | null>(null); - const [bimiSvg, setBimiSvg] = useState(""); - const [bimiVmc, setBimiVmc] = useState(""); - const [bimiBusy, setBimiBusy] = useState(false); - const [bimiProblems, setBimiProblems] = useState([]); const [verification, setVerification] = useState(null); // What the last reconciliation actually did, so the panel can say it rather // than leaving the operator to infer it from the verification that follows. @@ -126,73 +120,6 @@ export default function AdminDomainsPage() { // Asks the protocols service to resolve every expected record and report // each one. It used to post to the auth service, which has no resolver and // could only re-read the status already in the database. - // Reloaded whenever the selected domain changes: the mark belongs to the - // domain, not to the console. - useEffect(() => { - if (!selected) { - setBimi(null); - return; - } - let cancelled = false; - void (async () => { - try { - const res = await fetch(`/api/v1/admin/bimi?domain=${encodeURIComponent(selected.name)}`); - const data = res.ok ? await res.json() : { configured: false }; - if (cancelled) return; - setBimi(data); - setBimiVmc(data.vmc_url ?? ""); - setBimiSvg(""); - setBimiProblems([]); - } catch { - if (!cancelled) setBimi({ configured: false }); - } - })(); - return () => { - cancelled = true; - }; - }, [selected?.name]); - - const saveBimi = async () => { - if (!selected || !bimiSvg.trim()) return; - setBimiBusy(true); - setBimiProblems([]); - setError(null); - try { - const res = await fetch(`/api/v1/admin/bimi?domain=${encodeURIComponent(selected.name)}`, { - method: "PUT", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ svg: bimiSvg, vmc_url: bimiVmc.trim() }), - }); - const data = await res.json().catch(() => ({})); - if (!res.ok) { - // Every rule that failed, not the first: a receiver that rejects the - // mark shows nothing at all, so one round trip per rule is the worst - // possible way to learn this format. - setBimiProblems(data.violations ?? [data.message ?? t("errors.serverError")]); - return; - } - setBimi({ configured: true, vmc_url: bimiVmc.trim(), bytes: bimiSvg.length }); - setBimiSvg(""); - setNotice(t("admin.bimiSaved")); - } catch { - setError(t("errors.serverError")); - } finally { - setBimiBusy(false); - } - }; - - const removeBimi = async () => { - if (!selected) return; - setBimiBusy(true); - try { - await fetch(`/api/v1/admin/bimi?domain=${encodeURIComponent(selected.name)}`, { method: "DELETE" }); - setBimi({ configured: false }); - setBimiVmc(""); - } finally { - setBimiBusy(false); - } - }; - const handleReconcile = async () => { if (!selected) return; setReconciling(true); @@ -523,67 +450,7 @@ export default function AdminDomainsPage() { {/* BIMI: the only mark an external mail client ever renders for this sender, and the reason a profile photo does not travel. */} - {activeTab === "domains" && selected && ( -
-

- {t("admin.bimiTitle", { domain: selected.name })} -

-

{t("admin.bimiExplainer")}

- -
- - {bimi?.configured ? t("admin.bimiConfigured") : t("admin.bimiNotConfigured")} - - {bimi?.configured && !bimi.vmc_url && ( - {t("admin.bimiNoVmc")} - )} -
- -
- -