deploy
292 lines
14 KiB
YAML
292 lines
14 KiB
YAML
# GERADO por scripts/tema_email_athleticmap.py — nao edite na mao.
|
|
# Fonte: keycloak-theme/escolinha/email/
|
|
#
|
|
# O `items` do volume (ver 20-keycloak.yaml) desfaz o achatamento das
|
|
# chaves: `template.ftl` vira `html/template.ftl` na montagem.
|
|
apiVersion: v1
|
|
kind: ConfigMap
|
|
metadata:
|
|
name: kc-email-athleticmapv2
|
|
namespace: plataforma-prod
|
|
annotations:
|
|
# Mesmo motivo do tema de login: sem isto o ArgoCD guarda o
|
|
# manifesto inteiro numa anotacao limitada a 256 KiB.
|
|
argocd.argoproj.io/sync-options: ServerSideApply=true
|
|
data:
|
|
theme.properties: |-
|
|
# O tema de E-MAIL do Athletic Map.
|
|
#
|
|
# `parent=base` e nao `keycloak`: o tema `keycloak` de e-mail nao acrescenta
|
|
# nada ao `base` alem de recursos que nao usamos, e herdar dele traria um
|
|
# template.ftl que este aqui substitui inteiro.
|
|
#
|
|
# Ao sobrescrever `template.ftl`, TODO e-mail do realm ganha a moldura da marca
|
|
# — inclusive os que este tema nao reescreve (redefinicao de senha, verificacao
|
|
# de e-mail). O corpo deles continua vindo do `base`, dentro da moldura nova.
|
|
parent=base
|
|
|
|
# pt-BR primeiro: o cliente e brasileiro. O `en` fica porque o Keycloak cai
|
|
# nele quando o navegador de quem recebe pede outra coisa, e um e-mail em
|
|
# ingles e melhor do que um e-mail com as chaves cruas.
|
|
locales=pt-BR,en
|
|
template.ftl: |-
|
|
<#--
|
|
A moldura de TODO e-mail do realm.
|
|
|
|
── POR QUE TABELA, E NAO DIV ────────────────────────────────────────────────
|
|
|
|
Outlook no Windows renderiza com o motor do Word, que ignora `flex`, `grid` e
|
|
boa parte de `margin`. Tabela aninhada com largura fixa e o unico layout que
|
|
chega igual no Gmail, no Outlook e no app do celular. Nao e gosto antigo: e o
|
|
que o cliente que acabou de pagar vai abrir.
|
|
|
|
── POR QUE ESTILO EM LINHA ──────────────────────────────────────────────────
|
|
|
|
Gmail REMOVE a tag <style> do <head>. Tudo que precisa valer vai em `style=`
|
|
no proprio elemento.
|
|
|
|
── POR QUE A MARCA NAO E IMAGEM ─────────────────────────────────────────────
|
|
|
|
A tela de login embute o logo em data URI, e ali funciona. Em e-mail nao: o
|
|
Gmail nao carrega `src="data:..."`, e o Outlook bloqueia imagem externa ate
|
|
o leitor clicar em "exibir". As tres barras sao celulas com `bgcolor`, que
|
|
todo cliente pinta, e o nome e texto — a marca chega inteira mesmo com as
|
|
imagens desligadas.
|
|
|
|
Cores: as mesmas variaveis do login.ftl.
|
|
laranja #F58220 · navy #0B2C3D · papel #F6F5F3 · linha #E7E5E1 · fraco #6B6B6B
|
|
-->
|
|
<#macro emailLayout>
|
|
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>${msg("emailTituloDaJanela")}</title>
|
|
</head>
|
|
<body style="margin:0; padding:0; background:#F6F5F3;">
|
|
|
|
<!-- A primeira linha do preview, no lugar de um trecho do HTML. -->
|
|
<div style="display:none; max-height:0; overflow:hidden; opacity:0;">
|
|
${msg("emailPreCabecalho")}
|
|
</div>
|
|
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"
|
|
style="background:#F6F5F3; padding:32px 16px;">
|
|
<tr>
|
|
<td align="center">
|
|
|
|
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"
|
|
style="width:600px; max-width:100%; background:#FFFFFF;
|
|
border:1px solid #E7E5E1; border-radius:14px; overflow:hidden;
|
|
font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;">
|
|
|
|
<!-- ── cabecalho ─────────────────────────────────────────────── -->
|
|
<tr>
|
|
<td style="background:#0B2C3D; padding:26px 32px;">
|
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
|
|
<tr>
|
|
<!-- as tres barras -->
|
|
<td style="padding-right:4px;">
|
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
|
|
<tr>
|
|
<td width="5" height="14" bgcolor="#F58220"
|
|
style="font-size:0; line-height:0;"> </td>
|
|
<td width="4"> </td>
|
|
<td width="5" height="20" bgcolor="#F58220"
|
|
style="font-size:0; line-height:0;"> </td>
|
|
<td width="4"> </td>
|
|
<td width="5" height="26" bgcolor="#F58220"
|
|
style="font-size:0; line-height:0;"> </td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td style="padding-left:10px; color:#FFFFFF; font-size:19px;
|
|
font-weight:700; letter-spacing:-0.2px;">
|
|
Athletic Map
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- a fatia laranja, o mesmo corte diagonal da tela de login -->
|
|
<tr>
|
|
<td height="4" bgcolor="#F58220" style="font-size:0; line-height:0;"> </td>
|
|
</tr>
|
|
|
|
<!-- ── corpo ─────────────────────────────────────────────────── -->
|
|
<tr>
|
|
<td style="padding:36px 32px 8px 32px; color:#0B2C3D; font-size:16px; line-height:1.6;">
|
|
<#nested>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- ── rodape ────────────────────────────────────────────────── -->
|
|
<tr>
|
|
<td style="padding:24px 32px 30px 32px;">
|
|
<div style="border-top:1px solid #E7E5E1; padding-top:18px;
|
|
color:#6B6B6B; font-size:12px; line-height:1.6;">
|
|
${msg("emailRodapeAviso")}<br>
|
|
<span style="color:#9C9A95;">${msg("emailRodapeAssinatura")}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</body>
|
|
</html>
|
|
</#macro>
|
|
executeActions.ftl: |-
|
|
<#--
|
|
O e-mail que o cliente que ACABOU DE PAGAR recebe.
|
|
|
|
E o primeiro contato dele com o produto depois do cartao passar, e ate
|
|
2026-09-24 ele chegava com o texto de fabrica do Keycloak: "Your administrator
|
|
has just requested that you update your account". Nao ha administrador nenhum,
|
|
ninguem pediu nada, e o cliente nao fala ingles.
|
|
|
|
── AS VARIAVEIS QUE O KEYCLOAK ENTREGA ──────────────────────────────────────
|
|
|
|
link o endereco de uso unico
|
|
linkExpiration o prazo, em minutos
|
|
linkExpirationFormatter formata o prazo por extenso ("12 horas")
|
|
realmName o displayName do realm
|
|
requiredActions a lista de acoes (UPDATE_PASSWORD, VERIFY_EMAIL...)
|
|
user quem recebe
|
|
|
|
── POR QUE O BOTAO E UMA TABELA ─────────────────────────────────────────────
|
|
|
|
`<a>` com padding nao vira area clicavel no Outlook: ele so pinta o texto. A
|
|
tabela com `bgcolor` e o <a> ocupando a celula inteira e o unico jeito de o
|
|
botao ser um botao nos tres clientes.
|
|
|
|
── E POR QUE O LINK APARECE EM TEXTO TAMBEM ─────────────────────────────────
|
|
|
|
Cliente corporativo reescreve href para passar por filtro, e as vezes quebra.
|
|
Com o endereco visivel, quem recebe consegue copiar e colar. Custa tres linhas
|
|
e salva o cliente de ligar para o suporte no primeiro dia.
|
|
-->
|
|
<#assign acoes><#if requiredActions??><#list requiredActions><#items as a>${msg("requiredAction.${a}")}<#sep>, </#sep></#items></#list></#if></#assign>
|
|
|
|
<#import "template.ftl" as layout>
|
|
<@layout.emailLayout>
|
|
|
|
<h1 style="margin:0 0 6px 0; font-size:26px; line-height:1.25; font-weight:700; color:#0B2C3D;">
|
|
${msg("boasVindasTitulo")} <span style="color:#F58220;">${msg("boasVindasTituloDestaque")}</span>
|
|
</h1>
|
|
|
|
<p style="margin:0 0 22px 0; color:#6B6B6B; font-size:15px;">
|
|
${msg("boasVindasSubtitulo", realmName)}
|
|
</p>
|
|
|
|
<p style="margin:0 0 26px 0;">
|
|
${msg("boasVindasCorpo", acoes)}
|
|
</p>
|
|
|
|
<!-- o botao -->
|
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 0 22px 0;">
|
|
<tr>
|
|
<td bgcolor="#F58220" style="border-radius:10px;">
|
|
<a href="${link}"
|
|
style="display:inline-block; padding:15px 30px; color:#FFFFFF;
|
|
font-size:16px; font-weight:700; text-decoration:none;
|
|
font-family:'Inter','Segoe UI',system-ui,Helvetica,Arial,sans-serif;">
|
|
${msg("boasVindasBotao")} →
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p style="margin:0 0 24px 0; padding:14px 16px; background:#FFF5E8;
|
|
border-left:3px solid #F58220; border-radius:0 8px 8px 0;
|
|
color:#0B2C3D; font-size:14px; line-height:1.55;">
|
|
${msg("boasVindasPrazo", linkExpirationFormatter(linkExpiration))}
|
|
</p>
|
|
|
|
<p style="margin:0 0 6px 0; color:#6B6B6B; font-size:13px;">
|
|
${msg("boasVindasLinkManual")}
|
|
</p>
|
|
<p style="margin:0 0 10px 0; font-size:13px; line-height:1.5; word-break:break-all;">
|
|
<a href="${link}" style="color:#2563EB; text-decoration:underline;">${link}</a>
|
|
</p>
|
|
|
|
</@layout.emailLayout>
|
|
messages_pt_BR.properties: |-
|
|
# Textos do e-mail do Athletic Map.
|
|
#
|
|
# ISO-8859-1 e o encoding que o Keycloak le aqui - em .properties, tudo fora do
|
|
# Latin-1 precisa de \uXXXX. Acento comum (a, e, i, o, u com til/agudo/circunflexo)
|
|
# passa direto; travessao, aspas curvas e emoji NAO passam, e viram simbolo torto
|
|
# na caixa de quem recebe.
|
|
#
|
|
# Chave `{0}`, `{1}`... sao os argumentos na ordem em que o .ftl passa.
|
|
|
|
# -- o assunto ---------------------------------------------------------------
|
|
# Sem "Update Your Account". O cliente acabou de pagar; o assunto diz o que ele
|
|
# precisa fazer, e a marca aparece para ele reconhecer na lista.
|
|
executeActionsSubject=Sua conta Athletic Map esta pronta
|
|
|
|
# -- a moldura ---------------------------------------------------------------
|
|
emailTituloDaJanela=Athletic Map
|
|
# O trecho que Gmail e Outlook mostram ao lado do assunto, antes de abrir.
|
|
emailPreCabecalho=Falta um passo para voce entrar: defina sua senha de acesso.
|
|
emailRodapeAviso=Se voce nao reconhece este pedido, pode ignorar esta mensagem \u2014 nada muda na sua conta.
|
|
emailRodapeAssinatura=Athletic Map \u2014 gestao para escolinhas esportivas
|
|
|
|
# -- o corpo das boas-vindas -------------------------------------------------
|
|
boasVindasTitulo=Sua conta esta
|
|
boasVindasTituloDestaque=pronta!
|
|
# {0} = nome do realm (displayName)
|
|
boasVindasSubtitulo=Acesso a {0}
|
|
# {0} = as acoes pedidas, ja traduzidas ("Atualizar senha")
|
|
boasVindasCorpo=Falta um passo para voce comecar: {0}. Clique no botao abaixo e leve menos de um minuto.
|
|
boasVindasBotao=Definir minha senha
|
|
# {0} = o prazo por extenso
|
|
boasVindasPrazo=Este link vale por {0} e pode ser usado uma vez so. Depois disso, peca outro na tela de acesso, em "Esqueceu sua senha?".
|
|
boasVindasLinkManual=Se o botao nao funcionar, copie e cole este endereco no navegador:
|
|
|
|
# -- as acoes, em portugues --------------------------------------------------
|
|
# O Keycloak traduz estas chaves para montar a lista do corpo. Sem elas, o
|
|
# cliente brasileiro le "Update Password" no meio de uma frase em portugues.
|
|
requiredAction.UPDATE_PASSWORD=definir sua senha
|
|
requiredAction.VERIFY_EMAIL=confirmar seu e-mail
|
|
requiredAction.UPDATE_PROFILE=completar seu cadastro
|
|
requiredAction.CONFIGURE_TOTP=configurar a verificacao em duas etapas
|
|
requiredAction.TERMS_AND_CONDITIONS=aceitar os termos de uso
|
|
requiredAction.CONFIGURE_RECOVERY_AUTHN_CODES=gerar seus codigos de recuperacao
|
|
messages_en.properties: |-
|
|
# O MESMO conjunto de chaves, em ingles.
|
|
#
|
|
# Nao e capricho: o Keycloak escolhe o locale pelo idioma de quem recebe, e se
|
|
# ele cair no `en` sem estas chaves o e-mail sai com o NOME DELAS no lugar do
|
|
# texto - "boasVindasTitulo" literal no corpo. Um arquivo faltando aqui nao
|
|
# quebra nada em teste e estraga o primeiro e-mail de um cliente estrangeiro.
|
|
|
|
executeActionsSubject=Your Athletic Map account is ready
|
|
|
|
emailTituloDaJanela=Athletic Map
|
|
emailPreCabecalho=One step left: set your password.
|
|
emailRodapeAviso=If you did not expect this, you can ignore this message \u2014 nothing changes in your account.
|
|
emailRodapeAssinatura=Athletic Map \u2014 management for sports schools
|
|
|
|
boasVindasTitulo=Your account is
|
|
boasVindasTituloDestaque=ready!
|
|
boasVindasSubtitulo=Access to {0}
|
|
boasVindasCorpo=One step left before you start: {0}. Click the button below \u2014 it takes less than a minute.
|
|
boasVindasBotao=Set my password
|
|
boasVindasPrazo=This link is valid for {0} and can be used once. After that, request a new one on the sign-in screen, under "Forgot your password?".
|
|
boasVindasLinkManual=If the button does not work, copy and paste this address into your browser:
|
|
|
|
requiredAction.UPDATE_PASSWORD=set your password
|
|
requiredAction.VERIFY_EMAIL=confirm your e-mail
|
|
requiredAction.UPDATE_PROFILE=complete your profile
|
|
requiredAction.CONFIGURE_TOTP=set up two-step verification
|
|
requiredAction.TERMS_AND_CONDITIONS=accept the terms of use
|
|
requiredAction.CONFIGURE_RECOVERY_AUTHN_CODES=generate your recovery codes
|