feat(atm-plataforma): tela de login Athletic Map
This commit is contained in:
deploy
@@ -224,7 +224,7 @@ data:
|
||||
<p class="sub">Escolha uma senha para entrar na sua conta</p>
|
||||
|
||||
<#if message?? && message.summary?has_content>
|
||||
<div class="aviso aviso-${message.type!'info'}" style="margin-top:24px">${message.summary!''}</div>
|
||||
<div class="aviso aviso-${message.type!'info'}" style="margin-top:24px">${kcSanitize(message.summary)?no_esc}</div>
|
||||
</#if>
|
||||
|
||||
<form id="kc-passwd-update-form" action="${url.loginAction}" method="post" novalidate>
|
||||
@@ -453,6 +453,31 @@ data:
|
||||
.entrar.secundario{background:transparent;color:var(--muted);border:1px solid var(--line);margin-top:10px}
|
||||
.entrar.secundario:hover{background:var(--paper);color:var(--navy)}
|
||||
|
||||
/* O conteudo que vem das paginas do tema BASE (info, erro, expirado, termos).
|
||||
Elas trazem a propria marcacao, com classes do PatternFly que este tema nao
|
||||
carrega — entao o que importa aqui e o texto, o link e o botao ficarem
|
||||
legiveis, e nao reproduzir cada componente. */
|
||||
.conteudo{margin-top:20px;color:var(--navy);font-size:15px;line-height:1.6}
|
||||
.conteudo p{margin:0 0 14px}
|
||||
.conteudo a{color:var(--blue);text-decoration:underline}
|
||||
.conteudo a:hover{color:var(--orange)}
|
||||
.conteudo ul,.conteudo ol{margin:0 0 14px;padding-left:20px}
|
||||
.conteudo li{margin:0 0 6px}
|
||||
.conteudo input[type=text],.conteudo input[type=email],.conteudo input[type=password]{
|
||||
width:100%;box-sizing:border-box;padding:13px 14px;font:inherit;font-size:15px;
|
||||
color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:11px}
|
||||
.conteudo input:focus{outline:none;border-color:var(--orange);
|
||||
box-shadow:0 0 0 3px rgba(245,130,32,.16)}
|
||||
.conteudo label{display:block;font-size:13px;font-weight:600;color:var(--navy);
|
||||
margin:0 0 6px}
|
||||
/* O botao de acao das paginas base, qualquer que seja a classe dele. */
|
||||
.conteudo button,.conteudo input[type=submit]{width:100%;margin-top:6px;
|
||||
padding:14px 18px;font:inherit;font-size:16px;font-weight:700;color:#fff;
|
||||
background:var(--orange);border:0;border-radius:11px;cursor:pointer}
|
||||
.conteudo button:hover,.conteudo input[type=submit]:hover{background:var(--orange-600)}
|
||||
.info-extra{margin-top:18px;font-size:14px;color:var(--muted)}
|
||||
.info-extra a{color:var(--blue)}
|
||||
|
||||
.ou{display:flex;align-items:center;gap:16px;margin:4px 0;color:#9C9A95;font-size:13px}
|
||||
.ou::before,.ou::after{content:'';flex:1;height:1px;background:var(--line)}
|
||||
|
||||
@@ -488,3 +513,118 @@ data:
|
||||
}
|
||||
</style>
|
||||
|
||||
template.ftl: |-
|
||||
<#--
|
||||
A MOLDURA DE TODAS AS OUTRAS TELAS do fluxo de login.
|
||||
|
||||
── POR QUE ELA EXISTE ───────────────────────────────────────────────────────
|
||||
|
||||
O tema tinha `login.ftl` e `login-update-password.ftl`, escritas a mao. As
|
||||
OUTRAS quarenta paginas do Keycloak — "execute estas acoes", link expirado,
|
||||
erro, esqueci a senha, termos — caiam no `parent=keycloak` e apareciam com o
|
||||
fundo cinza de poligonos e o botao azul de fabrica.
|
||||
|
||||
Escrever quarenta paginas a mao seria trocar um problema por quarenta. Esta
|
||||
aqui e a que todas elas usam: sobrescrevendo-a, TODAS ganham a marca de uma
|
||||
vez, e o conteudo de cada uma continua vindo do tema base.
|
||||
|
||||
── O CONTRATO NAO E MEU, E NAO PODE MUDAR ───────────────────────────────────
|
||||
|
||||
A assinatura do macro e as quatro secoes `<#nested>` sao do Keycloak. Cada
|
||||
pagina do tema base chama `<@layout.registrationLayout ...>` passando
|
||||
`displayInfo`, `displayMessage`, `displayRequiredFields` e preenchendo
|
||||
`header`, `form`, `info` e `socialProviders`. Mudar um nome aqui nao quebra
|
||||
uma pagina: quebra as quarenta.
|
||||
|
||||
header o titulo da tela
|
||||
form o conteudo principal
|
||||
info o rodape informativo, so quando displayInfo
|
||||
socialProviders os provedores externos, quando houver
|
||||
|
||||
── O QUE ELA DELIBERADAMENTE NAO FAZ ────────────────────────────────────────
|
||||
|
||||
Nao carrega `properties.styles` nem `properties.scripts` do tema base: o
|
||||
visual e o do `estilo.ftl`, e trazer o CSS do PatternFly junto so devolveria
|
||||
o cinza que se esta tirando.
|
||||
|
||||
Nao mostra o seletor de idioma. O realm suporta so pt-BR — e com um idioma
|
||||
so, o seletor e um botao que nao faz nada.
|
||||
|
||||
── AS IMAGENS VEM DO `estilo.ftl` ───────────────────────────────────────────
|
||||
|
||||
Mesmo include do `login.ftl`: elas pesam ~400 KB em data URI e existem uma
|
||||
vez no ConfigMap.
|
||||
-->
|
||||
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<title>${msg("loginTitle",(realm.displayName!''))}</title>
|
||||
<#include "estilo.ftl">
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="foto" role="img" aria-label="Crianças jogando futebol"></div>
|
||||
|
||||
<svg class="borda" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="tracoLaranja" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#B8560C" />
|
||||
<stop offset="0.48" stop-color="#F58220" />
|
||||
<stop offset="1" stop-color="#FBC183" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon class="chapa" points="57.90,0 100,0 100,100 57.18,100 52.55,50" />
|
||||
<polygon class="risco" points="57,0 52,50 57,100 57.18,100 52.55,50 57.90,0" />
|
||||
</svg>
|
||||
|
||||
<main class="painel">
|
||||
<span class="pontos topo" aria-hidden="true"></span>
|
||||
<span class="pontos base" aria-hidden="true"></span>
|
||||
|
||||
<div class="form">
|
||||
<span class="marca" role="img" aria-label="Athletic Map"></span>
|
||||
|
||||
<h1><#nested "header"></h1>
|
||||
|
||||
<#-- A mesma regra do tema base: uma acao iniciada pelo proprio app nao
|
||||
mostra o aviso de "voce precisa completar isto", porque quem a
|
||||
iniciou foi o usuario, agora. -->
|
||||
<#if displayMessage && message?has_content
|
||||
&& (message.type != 'warning' || !isAppInitiatedAction??)>
|
||||
<div class="aviso aviso-${message.type}" style="margin-top:20px">
|
||||
${kcSanitize(message.summary)?no_esc}
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
<div class="conteudo">
|
||||
<#nested "form">
|
||||
</div>
|
||||
|
||||
<#if auth?has_content && auth.showTryAnotherWayLink()>
|
||||
<form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post">
|
||||
<input type="hidden" name="tryAnotherWay" value="on"/>
|
||||
<button class="entrar secundario" type="submit">${msg("doTryAnotherWay")}</button>
|
||||
</form>
|
||||
</#if>
|
||||
|
||||
<#nested "socialProviders">
|
||||
|
||||
<#if displayInfo>
|
||||
<div class="info-extra"><#nested "info"></div>
|
||||
</#if>
|
||||
|
||||
<p class="rodape">
|
||||
Precisa de ajuda? <a href="mailto:suporte@athleticmap.com.br">Fale com o suporte</a>
|
||||
<span class="direitos">© ${.now?string('yyyy')} Athletic Map. Todos os direitos reservados.</span>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</#macro>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user