This commit is contained in:
BIN
.playwright-mcp/keycloak-login-nested.png
Normal file
BIN
.playwright-mcp/keycloak-login-nested.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 426 KiB |
@ -1,78 +1,35 @@
|
|||||||
<#import "template.ftl" as layout>
|
<#import "template.ftl" as layout>
|
||||||
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
|
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password'); section>
|
||||||
<#if section = "header">
|
<#if section = "form">
|
||||||
<#elseif section = "form">
|
<form id="kc-form-login" action="${url.loginAction}" method="post">
|
||||||
<div id="kc-form">
|
<div class="form-group">
|
||||||
<div id="kc-form-wrapper">
|
<label for="username">
|
||||||
<div style="text-align: center; margin-bottom: 32px;">
|
<#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
|
||||||
<h1 style="font-size: 1.75rem; font-weight: 700; color: rgba(0, 0, 0, 0.87); margin: 0 0 8px 0;">Team Planner</h1>
|
</label>
|
||||||
<p style="font-size: 0.875rem; color: rgba(0, 0, 0, 0.6); margin: 0;">Приложение для управления бэклогом идей команды</p>
|
<input tabindex="1" id="username" class="form-control" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off" />
|
||||||
</div>
|
</div>
|
||||||
<#if realm.password>
|
|
||||||
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="username" class="control-label">
|
|
||||||
<#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
|
|
||||||
</label>
|
|
||||||
<input tabindex="1" id="username" class="form-control" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off"
|
|
||||||
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>" />
|
|
||||||
<#if messagesPerField.existsError('username','password')>
|
|
||||||
<span class="input-error" aria-live="polite" style="color: #d32f2f; font-size: 0.75rem; margin-top: 4px; display: block;">
|
|
||||||
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
|
|
||||||
</span>
|
|
||||||
</#if>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="password" class="control-label">${msg("password")}</label>
|
<label for="password">${msg("password")}</label>
|
||||||
<input tabindex="2" id="password" class="form-control" name="password" type="password" autocomplete="off"
|
<input tabindex="2" id="password" class="form-control" name="password" type="password" autocomplete="off" />
|
||||||
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>" />
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
<div class="form-options">
|
||||||
<#if realm.rememberMe && !usernameHidden??>
|
<#if realm.rememberMe && !usernameHidden??>
|
||||||
<div class="checkbox" style="margin-bottom: 0; display: flex; align-items: center; gap: 8px;">
|
<div class="checkbox-group">
|
||||||
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" style="width: 18px; height: 18px; accent-color: #1976d2;" <#if login.rememberMe??>checked</#if>>
|
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" <#if login.rememberMe??>checked</#if>>
|
||||||
<label for="rememberMe" style="margin: 0; font-size: 0.875rem; color: rgba(0, 0, 0, 0.6);">${msg("rememberMe")}</label>
|
<label for="rememberMe">${msg("rememberMe")}</label>
|
||||||
</div>
|
</div>
|
||||||
</#if>
|
<#else>
|
||||||
<#if realm.resetPasswordAllowed>
|
<div></div>
|
||||||
<span><a tabindex="5" href="${url.loginResetCredentialsUrl}" style="font-size: 0.875rem; color: #1976d2;">${msg("doForgotPassword")}</a></span>
|
|
||||||
</#if>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group" style="margin-top: 24px;">
|
|
||||||
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
|
|
||||||
<input tabindex="4" class="btn-primary" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</#if>
|
</#if>
|
||||||
|
<#if realm.resetPasswordAllowed>
|
||||||
|
<a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a>
|
||||||
|
</#if>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="text-align: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.12);">
|
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
|
||||||
<p style="font-size: 0.875rem; color: rgba(0, 0, 0, 0.6); margin: 0;">
|
<input tabindex="4" class="btn-primary" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
|
||||||
Для получения доступа обратитесь к Николаю Вигдорову
|
</form>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<#elseif section = "info">
|
|
||||||
<#elseif section = "socialProviders">
|
|
||||||
<#if realm.password && social.providers??>
|
|
||||||
<div id="kc-social-providers" style="margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.12);">
|
|
||||||
<p style="text-align: center; color: rgba(0, 0, 0, 0.6); margin-bottom: 16px; font-size: 0.875rem;">Или войти через</p>
|
|
||||||
<ul style="list-style: none; padding: 0; margin: 0;">
|
|
||||||
<#list social.providers as p>
|
|
||||||
<li style="margin-bottom: 8px;">
|
|
||||||
<a id="social-${p.alias}" href="${p.loginUrl}" style="display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 16px; font-size: 0.875rem; color: rgba(0, 0, 0, 0.87); background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.23); border-radius: 4px; text-decoration: none;">
|
|
||||||
<#if p.iconClasses?has_content>
|
|
||||||
<i class="${p.iconClasses!}" aria-hidden="true"></i>
|
|
||||||
</#if>
|
|
||||||
<span>${p.displayName!}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</#list>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</#if>
|
|
||||||
</#if>
|
</#if>
|
||||||
</@layout.registrationLayout>
|
</@layout.registrationLayout>
|
||||||
|
|||||||
@ -1,372 +1,10 @@
|
|||||||
/* Team Planner - Keycloak Login Theme */
|
/* Team Planner - Keycloak Login Theme */
|
||||||
/* Полное переопределение стилей Keycloak/PatternFly */
|
/* Основные стили в template.ftl, здесь дополнительные переопределения */
|
||||||
|
|
||||||
:root {
|
/* Убираем возможные остатки PatternFly стилей */
|
||||||
--primary-color: #1976d2;
|
|
||||||
--primary-hover: #1565c0;
|
|
||||||
--text-primary: rgba(0, 0, 0, 0.87);
|
|
||||||
--text-secondary: rgba(0, 0, 0, 0.6);
|
|
||||||
--background: #f5f5f5;
|
|
||||||
--surface: #ffffff;
|
|
||||||
--error: #d32f2f;
|
|
||||||
--border-radius: 4px;
|
|
||||||
--shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
ПОЛНЫЙ СБРОС ФОНА KEYCLOAK
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
background: var(--background) !important;
|
|
||||||
background-image: none !important;
|
|
||||||
min-height: 100vh;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Убираем ВСЕ фоны PatternFly */
|
|
||||||
.login-pf,
|
|
||||||
.login-pf body,
|
|
||||||
.login-pf-page,
|
|
||||||
.pf-c-background-image,
|
.pf-c-background-image,
|
||||||
.pf-c-login,
|
|
||||||
.pf-c-login__container,
|
|
||||||
[class*="pf-c-background"],
|
|
||||||
[class*="login-pf"] {
|
|
||||||
background: var(--background) !important;
|
|
||||||
background-image: none !important;
|
|
||||||
background-color: var(--background) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Убираем SVG фон */
|
|
||||||
.pf-c-background-image::before,
|
|
||||||
.pf-c-background-image::after,
|
|
||||||
.login-pf-page::before,
|
|
||||||
.login-pf-page::after {
|
|
||||||
display: none !important;
|
|
||||||
content: none !important;
|
|
||||||
background: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
СКРЫВАЕМ СТАНДАРТНЫЙ HEADER KEYCLOAK
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
#kc-header,
|
|
||||||
#kc-header-wrapper,
|
|
||||||
.pf-c-login__header,
|
.pf-c-login__header,
|
||||||
.login-pf-page-header,
|
#kc-header,
|
||||||
.pf-c-brand,
|
#kc-header-wrapper {
|
||||||
header[class*="pf-"],
|
display: none !important;
|
||||||
.kc-logo-text {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
ОСНОВНОЙ КОНТЕЙНЕР
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
.pf-c-login__main,
|
|
||||||
#kc-content,
|
|
||||||
#kc-content-wrapper,
|
|
||||||
.card-pf,
|
|
||||||
#kc-form-wrapper {
|
|
||||||
background: var(--surface) !important;
|
|
||||||
border-radius: var(--border-radius) !important;
|
|
||||||
box-shadow: var(--shadow) !important;
|
|
||||||
padding: 48px !important;
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 400px !important;
|
|
||||||
margin: 20px auto !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pf-c-login {
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
min-height: 100vh !important;
|
|
||||||
padding: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pf-c-login__container {
|
|
||||||
max-width: 400px !important;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
ЗАГОЛОВОК ФОРМЫ
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
#kc-page-title,
|
|
||||||
.pf-c-login__main-header,
|
|
||||||
.pf-c-title {
|
|
||||||
font-size: 1.75rem !important;
|
|
||||||
font-weight: 700 !important;
|
|
||||||
color: var(--text-primary) !important;
|
|
||||||
text-align: center !important;
|
|
||||||
margin: 0 0 8px 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
ФОРМА ЛОГИНА
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
.pf-c-login__main-body,
|
|
||||||
.pf-c-form {
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Группы полей */
|
|
||||||
.form-group,
|
|
||||||
.pf-c-form__group {
|
|
||||||
margin-bottom: 24px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Лейблы */
|
|
||||||
label,
|
|
||||||
.pf-c-form__label,
|
|
||||||
.pf-c-form__label-text,
|
|
||||||
.control-label {
|
|
||||||
display: block !important;
|
|
||||||
font-size: 0.875rem !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
color: var(--text-primary) !important;
|
|
||||||
margin-bottom: 8px !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Инпуты */
|
|
||||||
input[type="text"],
|
|
||||||
input[type="password"],
|
|
||||||
input[type="email"],
|
|
||||||
.form-control,
|
|
||||||
.pf-c-form-control {
|
|
||||||
width: 100% !important;
|
|
||||||
padding: 16.5px 14px !important;
|
|
||||||
font-size: 1rem !important;
|
|
||||||
font-family: inherit !important;
|
|
||||||
color: var(--text-primary) !important;
|
|
||||||
background-color: var(--surface) !important;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.23) !important;
|
|
||||||
border-radius: var(--border-radius) !important;
|
|
||||||
outline: none !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
transition: border-color 0.2s ease !important;
|
|
||||||
box-sizing: border-box !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"]:hover,
|
|
||||||
input[type="password"]:hover,
|
|
||||||
input[type="email"]:hover,
|
|
||||||
.form-control:hover,
|
|
||||||
.pf-c-form-control:hover {
|
|
||||||
border-color: var(--text-primary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"]:focus,
|
|
||||||
input[type="password"]:focus,
|
|
||||||
input[type="email"]:focus,
|
|
||||||
.form-control:focus,
|
|
||||||
.pf-c-form-control:focus {
|
|
||||||
border-color: var(--primary-color) !important;
|
|
||||||
border-width: 2px !important;
|
|
||||||
padding: 15.5px 13px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
КНОПКА ВХОДА
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
#kc-login,
|
|
||||||
.btn-primary,
|
|
||||||
.pf-c-button.pf-m-primary,
|
|
||||||
input[type="submit"],
|
|
||||||
button[type="submit"] {
|
|
||||||
width: 100% !important;
|
|
||||||
padding: 12px 24px !important;
|
|
||||||
font-size: 0.9375rem !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
font-family: inherit !important;
|
|
||||||
text-transform: uppercase !important;
|
|
||||||
letter-spacing: 0.02857em !important;
|
|
||||||
color: #ffffff !important;
|
|
||||||
background-color: var(--primary-color) !important;
|
|
||||||
border: none !important;
|
|
||||||
border-radius: var(--border-radius) !important;
|
|
||||||
cursor: pointer !important;
|
|
||||||
transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
|
|
||||||
box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12) !important;
|
|
||||||
margin-top: 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#kc-login:hover,
|
|
||||||
.btn-primary:hover,
|
|
||||||
.pf-c-button.pf-m-primary:hover,
|
|
||||||
input[type="submit"]:hover,
|
|
||||||
button[type="submit"]:hover {
|
|
||||||
background-color: var(--primary-hover) !important;
|
|
||||||
box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
ССЫЛКИ
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
a,
|
|
||||||
.pf-c-button.pf-m-link {
|
|
||||||
color: var(--primary-color) !important;
|
|
||||||
text-decoration: none !important;
|
|
||||||
font-size: 0.875rem !important;
|
|
||||||
background: none !important;
|
|
||||||
border: none !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover,
|
|
||||||
.pf-c-button.pf-m-link:hover {
|
|
||||||
text-decoration: underline !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
ЧЕКБОКС "ЗАПОМНИТЬ МЕНЯ"
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
.checkbox,
|
|
||||||
.pf-c-check {
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox input[type="checkbox"],
|
|
||||||
.pf-c-check__input {
|
|
||||||
width: 18px !important;
|
|
||||||
height: 18px !important;
|
|
||||||
accent-color: var(--primary-color) !important;
|
|
||||||
cursor: pointer !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox label,
|
|
||||||
.pf-c-check__label {
|
|
||||||
margin: 0 !important;
|
|
||||||
font-size: 0.875rem !important;
|
|
||||||
color: var(--text-secondary) !important;
|
|
||||||
cursor: pointer !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
СООБЩЕНИЯ ОБ ОШИБКАХ
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
.alert,
|
|
||||||
.alert-error,
|
|
||||||
.pf-c-alert,
|
|
||||||
.pf-c-alert.pf-m-danger,
|
|
||||||
.kc-feedback-text {
|
|
||||||
background-color: #fdeded !important;
|
|
||||||
color: var(--error) !important;
|
|
||||||
border: 1px solid #f5c6cb !important;
|
|
||||||
border-radius: var(--border-radius) !important;
|
|
||||||
padding: 12px 16px !important;
|
|
||||||
margin-bottom: 24px !important;
|
|
||||||
font-size: 0.875rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pf-c-alert__icon {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
СОЦИАЛЬНЫЕ ПРОВАЙДЕРЫ
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
#kc-social-providers,
|
|
||||||
.pf-c-login__main-footer-band {
|
|
||||||
margin-top: 24px !important;
|
|
||||||
padding-top: 24px !important;
|
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#kc-social-providers h4,
|
|
||||||
.pf-c-login__main-footer-band-item {
|
|
||||||
font-size: 0.875rem !important;
|
|
||||||
color: var(--text-secondary) !important;
|
|
||||||
text-align: center !important;
|
|
||||||
margin-bottom: 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pf-c-login__main-footer-links-item a,
|
|
||||||
#kc-social-providers a {
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
width: 100% !important;
|
|
||||||
padding: 10px 16px !important;
|
|
||||||
margin-bottom: 8px !important;
|
|
||||||
font-size: 0.875rem !important;
|
|
||||||
color: var(--text-primary) !important;
|
|
||||||
background-color: var(--surface) !important;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.23) !important;
|
|
||||||
border-radius: var(--border-radius) !important;
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pf-c-login__main-footer-links-item a:hover,
|
|
||||||
#kc-social-providers a:hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.04) !important;
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
FOOTER
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
.pf-c-login__main-footer,
|
|
||||||
.pf-c-login__footer,
|
|
||||||
#kc-info-wrapper,
|
|
||||||
#kc-form-options {
|
|
||||||
margin-top: 16px !important;
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
АДАПТИВНОСТЬ
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.pf-c-login__main,
|
|
||||||
#kc-form-wrapper,
|
|
||||||
.card-pf {
|
|
||||||
margin: 10px !important;
|
|
||||||
padding: 32px 24px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
СКРЫВАЕМ ЛИШНИЕ ЭЛЕМЕНТЫ
|
|
||||||
=========================================== */
|
|
||||||
|
|
||||||
.pf-c-login__main-header-desc,
|
|
||||||
#kc-attempted-username,
|
|
||||||
.pf-c-alert__action,
|
|
||||||
.pf-c-login__footer-list,
|
|
||||||
.login-pf-page .login-pf-page-header {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Скрываем иконку показа пароля если мешает */
|
|
||||||
.pf-c-button.pf-m-control {
|
|
||||||
background: transparent !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
}
|
||||||
|
|||||||
231
keycloak-theme/team-planner/login/template.ftl
Normal file
231
keycloak-theme/team-planner/login/template.ftl
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<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>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||||||
|
<#if properties.stylesCommon?has_content>
|
||||||
|
<#list properties.stylesCommon?split(' ') as style>
|
||||||
|
<link href="${url.resourcesCommonPath}/${style}" rel="stylesheet" />
|
||||||
|
</#list>
|
||||||
|
</#if>
|
||||||
|
<#if properties.styles?has_content>
|
||||||
|
<#list properties.styles?split(' ') as style>
|
||||||
|
<link href="${url.resourcesPath}/${style}" rel="stylesheet" />
|
||||||
|
</#list>
|
||||||
|
</#if>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.login-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
|
||||||
|
padding: 48px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
.login-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.login-header h1 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
.login-header p {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.form-control {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 14px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: inherit;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.23);
|
||||||
|
border-radius: 4px;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
.form-control:hover {
|
||||||
|
border-color: rgba(0, 0, 0, 0.87);
|
||||||
|
}
|
||||||
|
.form-control:focus {
|
||||||
|
border-color: #1976d2;
|
||||||
|
border-width: 2px;
|
||||||
|
padding: 15px 13px;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 24px;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.02857em;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #1976d2;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #1565c0;
|
||||||
|
}
|
||||||
|
.form-options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.checkbox-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.checkbox-group input[type="checkbox"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
accent-color: #1976d2;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.checkbox-group label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #1976d2;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.login-footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 32px;
|
||||||
|
padding-top: 24px;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
.login-footer p {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.alert {
|
||||||
|
background-color: #fdeded;
|
||||||
|
color: #d32f2f;
|
||||||
|
border: 1px solid #f5c6cb;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
.alert-success {
|
||||||
|
background-color: #edf7ed;
|
||||||
|
color: #1e4620;
|
||||||
|
border-color: #c3e6cb;
|
||||||
|
}
|
||||||
|
.social-providers {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding-top: 24px;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
.social-providers p {
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
.social-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 16px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.23);
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.social-link:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.04);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="login-card">
|
||||||
|
<div class="login-header">
|
||||||
|
<h1>Team Planner</h1>
|
||||||
|
<p>Приложение для управления бэклогом идей команды</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
|
||||||
|
<div class="alert <#if message.type = 'success'>alert-success</#if>">
|
||||||
|
${kcSanitize(message.summary)?no_esc}
|
||||||
|
</div>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#nested "form">
|
||||||
|
|
||||||
|
<#if realm.password && social.providers??>
|
||||||
|
<div class="social-providers">
|
||||||
|
<p>Или войти через</p>
|
||||||
|
<#list social.providers as p>
|
||||||
|
<a class="social-link" href="${p.loginUrl}">
|
||||||
|
<#if p.iconClasses?has_content><i class="${p.iconClasses!}"></i></#if>
|
||||||
|
${p.displayName!}
|
||||||
|
</a>
|
||||||
|
</#list>
|
||||||
|
</div>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<div class="login-footer">
|
||||||
|
<p>Для получения доступа обратитесь к Николаю Вигдорову</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</#macro>
|
||||||
@ -1,5 +1,6 @@
|
|||||||
# Team Planner Keycloak Theme
|
# Team Planner Keycloak Theme
|
||||||
parent=keycloak
|
parent=base
|
||||||
import=common/keycloak
|
|
||||||
|
|
||||||
styles=css/login.css
|
styles=css/login.css
|
||||||
|
|
||||||
|
locales=en,ru
|
||||||
|
|||||||
Reference in New Issue
Block a user