custom theme for keycloak
This commit is contained in:
commit
3db80463bd
6 changed files with 338 additions and 0 deletions
46
login/resources/css/styles.css
Normal file
46
login/resources/css/styles.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
:root {
|
||||
--pf-global--primary-color--100: #FFDF5D;
|
||||
--pf-global--primary-color--200: #ffd738;
|
||||
}
|
||||
|
||||
|
||||
.login-pf body {
|
||||
background-image: url('../img/background.svg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.pf-v5-c-login__main {
|
||||
border-radius: 0.75rem;
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
.pf-v5-c-button.pf-m-primary {
|
||||
background-color: #FFDF5D;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.pf-v5-c-button.pf-m-primary:hover {
|
||||
background-color: #ffd738;
|
||||
}
|
||||
|
||||
.pf-v5-c-form-control:focus-within {
|
||||
--pf-v5-c-form-control--after--BorderBottomColor: #FFDF5D;
|
||||
--pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--focus--after--BorderBottomWidth);
|
||||
}
|
||||
|
||||
#kc-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pf-v5-c-login__main-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cccsbg-logo {
|
||||
background-image: url('../img/logo.svg');
|
||||
height: 170px;
|
||||
width: 300px;
|
||||
background-repeat: no-repeat;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
28
login/resources/img/background.svg
Normal file
28
login/resources/img/background.svg
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<svg width="1928" height="1088" viewBox="0 0 1928 1088" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_126_3)" filter="url(#filter0_d_126_3)">
|
||||
<rect width="1920" height="1080" transform="translate(4)" fill="#1F1F1F"/>
|
||||
<path opacity="0.08" d="M1524.95 -329L1537.27 -321.888L538.318 1408.34L526 1401.23L1524.95 -329Z" fill="#FFDF5D"/>
|
||||
<rect opacity="0.08" x="1676.97" y="-343" width="38.2309" height="2039.94" transform="rotate(30 1676.97 -343)" fill="#FFDF5D"/>
|
||||
<rect opacity="0.08" x="1729.69" y="-307.732" width="55.7603" height="2015.38" transform="rotate(30 1729.69 -307.732)" fill="#FFDF5D"/>
|
||||
<rect opacity="0.08" x="1835.17" y="-330.327" width="75.0563" height="2070.34" transform="rotate(30 1835.17 -330.327)" fill="#FFDF5D"/>
|
||||
<rect opacity="0.08" x="1906.61" y="-251.391" width="84.9295" height="2009.21" transform="rotate(30 1906.61 -251.391)" fill="#FFDF5D"/>
|
||||
<rect opacity="0.08" x="2016.81" y="-210.952" width="99.9236" height="1985.61" transform="rotate(30 2016.81 -210.952)" fill="#FFDF5D"/>
|
||||
<rect opacity="0.08" x="1596.95" y="-306.147" width="27" height="1997.9" transform="rotate(30 1596.95 -306.147)" fill="#FFDF5D"/>
|
||||
<rect opacity="0.08" x="1554.95" y="-321" width="22.7129" height="1997.9" transform="rotate(30 1554.95 -321)" fill="#FFDF5D"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_126_3" x="0" y="0" width="1928" height="1088" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_126_3"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_126_3" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_126_3">
|
||||
<rect width="1920" height="1080" fill="white" transform="translate(4)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
login/resources/img/logo.png
Normal file
BIN
login/resources/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
22
login/resources/img/logo.svg
Normal file
22
login/resources/img/logo.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 281 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,-437,0)">
|
||||
<g id="Base-Logo" serif:id="Base Logo" transform="matrix(0.142656,0,0,0.138477,819.879,-9.08095)">
|
||||
<rect x="-2683.93" y="65.578" width="1965.88" height="1248.91" style="fill:none;"/>
|
||||
<g transform="matrix(8.19804,0,0,8.44549,-5647.04,-12356.9)">
|
||||
<path d="M469.172,1543.1C465.132,1543.1 461.591,1542.34 458.548,1540.82C455.505,1539.3 453.139,1537.17 451.452,1534.43C449.764,1531.69 448.92,1528.49 448.92,1524.84L448.92,1499.11C448.92,1495.4 449.764,1492.19 451.452,1489.48C453.139,1486.77 455.505,1484.66 458.548,1483.13C461.591,1481.61 465.132,1480.85 469.172,1480.85C473.266,1480.85 476.821,1481.61 479.837,1483.13C482.852,1484.66 485.204,1486.77 486.891,1489.48C488.579,1492.19 489.423,1495.4 489.423,1499.11L476.973,1499.11C476.973,1496.68 476.295,1494.82 474.94,1493.55C473.584,1492.28 471.661,1491.64 469.172,1491.64C466.682,1491.64 464.759,1492.28 463.403,1493.55C462.048,1494.82 461.37,1496.68 461.37,1499.11L461.37,1524.84C461.37,1527.22 462.048,1529.06 463.403,1530.36C464.759,1531.66 466.682,1532.31 469.172,1532.31C471.661,1532.31 473.584,1531.66 474.94,1530.36C476.295,1529.06 476.973,1527.22 476.973,1524.84L489.423,1524.84C489.423,1528.49 488.579,1531.69 486.891,1534.43C485.204,1537.17 482.852,1539.3 479.837,1540.82C476.821,1542.34 473.266,1543.1 469.172,1543.1Z" style="fill:rgb(255,223,93);fill-rule:nonzero;"/>
|
||||
<path d="M518.97,1543.1C514.931,1543.1 511.389,1542.34 508.346,1540.82C505.303,1539.3 502.937,1537.17 501.25,1534.43C499.562,1531.69 498.718,1528.49 498.718,1524.84L498.718,1499.11C498.718,1495.4 499.562,1492.19 501.25,1489.48C502.937,1486.77 505.303,1484.66 508.346,1483.13C511.389,1481.61 514.931,1480.85 518.97,1480.85C523.064,1480.85 526.619,1481.61 529.635,1483.13C532.65,1484.66 535.002,1486.77 536.69,1489.48C538.377,1492.19 539.221,1495.4 539.221,1499.11L526.771,1499.11C526.771,1496.68 526.094,1494.82 524.738,1493.55C523.382,1492.28 521.46,1491.64 518.97,1491.64C516.48,1491.64 514.557,1492.28 513.201,1493.55C511.846,1494.82 511.168,1496.68 511.168,1499.11L511.168,1524.84C511.168,1527.22 511.846,1529.06 513.201,1530.36C514.557,1531.66 516.48,1532.31 518.97,1532.31C521.46,1532.31 523.382,1531.66 524.738,1530.36C526.094,1529.06 526.771,1527.22 526.771,1524.84L539.221,1524.84C539.221,1528.49 538.377,1531.69 536.69,1534.43C535.002,1537.17 532.65,1539.3 529.635,1540.82C526.619,1542.34 523.064,1543.1 518.97,1543.1Z" style="fill:rgb(255,223,93);fill-rule:nonzero;"/>
|
||||
<path d="M568.768,1543.1C564.729,1543.1 561.188,1542.34 558.144,1540.82C555.101,1539.3 552.736,1537.17 551.048,1534.43C549.36,1531.69 548.517,1528.49 548.517,1524.84L548.517,1499.11C548.517,1495.4 549.36,1492.19 551.048,1489.48C552.736,1486.77 555.101,1484.66 558.144,1483.13C561.188,1481.61 564.729,1480.85 568.768,1480.85C572.862,1480.85 576.417,1481.61 579.433,1483.13C582.449,1484.66 584.8,1486.77 586.488,1489.48C588.175,1492.19 589.019,1495.4 589.019,1499.11L576.57,1499.11C576.57,1496.68 575.892,1494.82 574.536,1493.55C573.181,1492.28 571.258,1491.64 568.768,1491.64C566.278,1491.64 564.355,1492.28 563,1493.55C561.644,1494.82 560.966,1496.68 560.966,1499.11L560.966,1524.84C560.966,1527.22 561.644,1529.06 563,1530.36C564.355,1531.66 566.278,1532.31 568.768,1532.31C571.258,1532.31 573.181,1531.66 574.536,1530.36C575.892,1529.06 576.57,1527.22 576.57,1524.84L589.019,1524.84C589.019,1528.49 588.175,1531.69 586.488,1534.43C584.8,1537.17 582.449,1539.3 579.433,1540.82C576.417,1542.34 572.862,1543.1 568.768,1543.1Z" style="fill:rgb(255,223,93);fill-rule:nonzero;"/>
|
||||
<path d="M468.674,1610.75C464.413,1610.75 460.692,1610 457.51,1608.51C454.329,1607.02 451.867,1604.9 450.124,1602.16C448.381,1599.42 447.509,1596.2 447.509,1592.49L459.627,1592.49C459.627,1594.76 460.443,1596.57 462.075,1597.93C463.708,1599.28 465.907,1599.96 468.674,1599.96C471.385,1599.96 473.501,1599.31 475.023,1598.01C476.544,1596.71 477.305,1594.98 477.305,1592.82C477.305,1591.11 476.807,1589.57 475.811,1588.22C474.815,1586.86 473.349,1585.96 471.412,1585.52L464.026,1583.78C459.267,1582.67 455.491,1580.53 452.697,1577.34C449.902,1574.16 448.505,1570.36 448.505,1565.93C448.505,1560.51 450.262,1556.25 453.776,1553.15C457.289,1550.05 462.089,1548.5 468.176,1548.5C474.262,1548.5 479.104,1550.07 482.7,1553.19C486.297,1556.32 488.095,1560.54 488.095,1565.85L475.977,1565.85C475.977,1563.75 475.286,1562.1 473.902,1560.91C472.519,1559.72 470.61,1559.13 468.176,1559.13C465.796,1559.13 463.943,1559.71 462.615,1560.87C461.287,1562.03 460.623,1563.58 460.623,1565.52C460.623,1568.67 462.532,1570.69 466.35,1571.58L473.985,1573.32C478.744,1574.37 482.52,1576.65 485.314,1580.17C488.109,1583.68 489.506,1587.9 489.506,1592.82C489.506,1596.42 488.662,1599.57 486.974,1602.29C485.287,1605 482.88,1607.09 479.754,1608.55C476.627,1610.02 472.934,1610.75 468.674,1610.75Z" style="fill:rgb(255,223,93);fill-rule:nonzero;"/>
|
||||
<path d="M498.884,1609.92L498.884,1549.33L518.389,1549.33C522.428,1549.33 525.955,1549.98 528.971,1551.28C531.986,1552.58 534.338,1554.4 536.026,1556.72C537.713,1559.04 538.557,1561.78 538.557,1564.94C538.557,1568.37 537.616,1571.23 535.735,1573.53C533.854,1575.82 531.419,1577.19 528.431,1577.63L528.431,1577.8C530.7,1578.02 532.706,1578.81 534.449,1580.17C536.192,1581.52 537.547,1583.25 538.516,1585.35C539.484,1587.46 539.968,1589.81 539.968,1592.41C539.968,1595.89 539.096,1598.95 537.354,1601.58C535.611,1604.21 533.176,1606.26 530.05,1607.72C526.924,1609.19 523.286,1609.92 519.136,1609.92L498.884,1609.92ZM510.919,1573.73L518.223,1573.73C520.657,1573.73 522.566,1573.08 523.95,1571.78C525.333,1570.48 526.024,1568.73 526.024,1566.51C526.024,1564.25 525.333,1562.49 523.95,1561.24C522.566,1560 520.657,1559.38 518.223,1559.38L510.919,1559.38L510.919,1573.73ZM510.919,1599.88L518.721,1599.88C521.432,1599.88 523.562,1599.16 525.111,1597.72C526.661,1596.28 527.435,1594.29 527.435,1591.74C527.435,1589.2 526.661,1587.19 525.111,1585.73C523.562,1584.26 521.432,1583.53 518.721,1583.53L510.919,1583.53L510.919,1599.88Z" style="fill:rgb(255,223,93);fill-rule:nonzero;"/>
|
||||
<path d="M568.436,1610.75C564.397,1610.75 560.856,1609.99 557.812,1608.47C554.769,1606.95 552.404,1604.82 550.716,1602.08C549.028,1599.34 548.185,1596.14 548.185,1592.49L548.185,1566.76C548.185,1563.06 549.028,1559.85 550.716,1557.13C552.404,1554.42 554.769,1552.31 557.812,1550.79C560.856,1549.26 564.397,1548.5 568.436,1548.5C572.53,1548.5 576.085,1549.26 579.101,1550.79C582.117,1552.31 584.468,1554.42 586.156,1557.13C587.843,1559.85 588.687,1563.06 588.687,1566.76L576.238,1566.76C576.238,1564.33 575.56,1562.47 574.204,1561.2C572.849,1559.93 570.926,1559.29 568.436,1559.29C565.946,1559.29 564.023,1559.93 562.668,1561.2C561.312,1562.47 560.634,1564.33 560.634,1566.76L560.634,1592.49C560.634,1594.87 561.312,1596.71 562.668,1598.01C564.023,1599.31 565.946,1599.96 568.436,1599.96C570.926,1599.96 572.849,1599.31 574.204,1598.01C575.56,1596.71 576.238,1594.87 576.238,1592.49L576.238,1586.85L567.274,1586.85L567.274,1576.31L588.687,1576.31L588.687,1592.49C588.687,1596.14 587.843,1599.34 586.156,1602.08C584.468,1604.82 582.117,1606.95 579.101,1608.47C576.085,1609.99 572.53,1610.75 568.436,1610.75Z" style="fill:rgb(255,223,93);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(7.00985,0,0,7.22144,-7131.09,-10254.5)">
|
||||
<path d="M669.769,1486.09L653.146,1486.09C650.059,1486.09 647.553,1483.59 647.553,1480.5C647.553,1477.41 650.059,1474.91 653.146,1474.91L669.769,1474.91L669.769,1467.32C669.769,1464.23 672.272,1461.73 675.361,1461.73L682.861,1461.73L682.861,1446.38C682.861,1443.29 685.367,1440.78 688.453,1440.78C691.54,1440.78 694.045,1443.29 694.045,1446.38L694.045,1461.73L706.877,1461.73L706.877,1446.38C706.877,1443.29 709.383,1440.78 712.469,1440.78C715.556,1440.78 718.061,1443.29 718.061,1446.38L718.061,1461.73L729.457,1461.73L729.457,1472.91L680.953,1472.91L680.953,1536.9L729.457,1536.9L729.457,1548.08L718.061,1548.08L718.061,1563.21C718.061,1566.3 715.556,1568.81 712.469,1568.81C709.383,1568.81 706.877,1566.3 706.877,1563.21L706.877,1548.08L694.045,1548.08L694.045,1563.21C694.045,1566.3 691.54,1568.81 688.453,1568.81C685.367,1568.81 682.861,1566.3 682.861,1563.21L682.861,1548.08L675.361,1548.08C672.272,1548.08 669.769,1545.58 669.769,1542.49L669.769,1535.26L653.146,1535.26C650.059,1535.26 647.553,1532.75 647.553,1529.67C647.553,1526.58 650.059,1524.07 653.146,1524.07L669.769,1524.07L669.769,1510.24L653.146,1510.24C650.059,1510.24 647.553,1507.74 647.553,1504.65C647.553,1501.56 650.059,1499.06 653.146,1499.06L669.769,1499.06L669.769,1486.09ZM688.387,1524.1C691.461,1524.1 693.957,1526.59 693.957,1529.67C693.957,1532.74 691.461,1535.24 688.387,1535.24C685.313,1535.24 682.817,1532.74 682.817,1529.67C682.817,1526.59 685.313,1524.1 688.387,1524.1Z" style="fill:rgb(255,223,93);"/>
|
||||
</g>
|
||||
<g id="Ebene1">
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.2 KiB |
238
login/template.ftl
Normal file
238
login/template.ftl
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
<#import "field.ftl" as field>
|
||||
<#import "footer.ftl" as loginFooter>
|
||||
<#macro username>
|
||||
<#assign label>
|
||||
<#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
|
||||
</#assign>
|
||||
<@field.group name="username" label=label>
|
||||
<div class="${properties.kcInputGroup}">
|
||||
<div class="${properties.kcInputGroupItemClass} ${properties.kcFill}">
|
||||
<span class="${properties.kcInputClass} ${properties.kcFormReadOnlyClass}">
|
||||
<input id="kc-attempted-username" value="${auth.attemptedUsername}" readonly>
|
||||
</span>
|
||||
</div>
|
||||
<div class="${properties.kcInputGroupItemClass}">
|
||||
<button id="reset-login" class="${properties.kcFormPasswordVisibilityButtonClass} kc-login-tooltip" type="button"
|
||||
aria-label="${msg('restartLoginTooltip')}" onclick="location.href='${url.loginRestartFlowUrl}'">
|
||||
<i class="fa-sync-alt fas" aria-hidden="true"></i>
|
||||
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
|
||||
</button>
|
||||
</div>
|
||||
</@field.group>
|
||||
</#macro>
|
||||
|
||||
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
|
||||
<!DOCTYPE html>
|
||||
<html class="${properties.kcHtmlClass!}" lang="${lang}"<#if realm.internationalizationEnabled> dir="${(locale.rtl)?then('rtl','ltr')}"</#if>>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="color-scheme" content="light${darkMode?then(' dark', '')}">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<#if properties.meta?has_content>
|
||||
<#list properties.meta?split(' ') as meta>
|
||||
<meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/>
|
||||
</#list>
|
||||
</#if>
|
||||
<title>${msg("loginTitle",(realm.displayName!''))}</title>
|
||||
<link rel="icon" href="${url.resourcesPath}/img/favicon.ico" />
|
||||
<#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>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"rfc4648": "${url.resourcesCommonPath}/vendor/rfc4648/rfc4648.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<#if darkMode>
|
||||
<script type="module" async blocking="render">
|
||||
const DARK_MODE_CLASS = "${properties.kcDarkModeClass}";
|
||||
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
||||
updateDarkMode(mediaQuery.matches);
|
||||
mediaQuery.addEventListener("change", (event) => updateDarkMode(event.matches));
|
||||
|
||||
function updateDarkMode(isEnabled) {
|
||||
const { classList } = document.documentElement;
|
||||
|
||||
if (isEnabled) {
|
||||
classList.add(DARK_MODE_CLASS);
|
||||
} else {
|
||||
classList.remove(DARK_MODE_CLASS);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</#if>
|
||||
<#if properties.scripts?has_content>
|
||||
<#list properties.scripts?split(' ') as script>
|
||||
<script src="${url.resourcesPath}/${script}" type="text/javascript"></script>
|
||||
</#list>
|
||||
</#if>
|
||||
<#if scripts??>
|
||||
<#list scripts as script>
|
||||
<script src="${script}" type="text/javascript"></script>
|
||||
</#list>
|
||||
</#if>
|
||||
<script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
|
||||
<script type="module">
|
||||
import { startSessionPolling } from "${url.resourcesPath}/js/authChecker.js";
|
||||
|
||||
startSessionPolling(
|
||||
"${url.ssoLoginInOtherTabsUrl?no_esc}"
|
||||
);
|
||||
</script>
|
||||
<#if authenticationSession??>
|
||||
<script type="module">
|
||||
import { checkAuthSession } from "${url.resourcesPath}/js/authChecker.js";
|
||||
|
||||
checkAuthSession(
|
||||
"${authenticationSession.authSessionIdHash}"
|
||||
);
|
||||
</script>
|
||||
</#if>
|
||||
<script>
|
||||
// Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
|
||||
const isFirefox = true;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body id="keycloak-bg" class="${properties.kcBodyClass!}">
|
||||
<div class="${properties.kcLogin!}">
|
||||
<div class="${properties.kcLoginContainer!}">
|
||||
<header id="kc-header" class="pf-v5-c-login__header">
|
||||
<div id="kc-header-wrapper"
|
||||
class="pf-v5-c-brand">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
|
||||
</header>
|
||||
<main class="${properties.kcLoginMain!}">
|
||||
<div class="${properties.kcLoginMainHeader!}">
|
||||
<div class="cccsbg-logo">
|
||||
</div>
|
||||
<h1 class="${properties.kcLoginMainTitle!}" id="kc-page-title"><#nested "header"></h1>
|
||||
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
|
||||
<div class="${properties.kcLoginMainHeaderUtilities!}">
|
||||
<div class="${properties.kcInputClass!}">
|
||||
<select
|
||||
aria-label="${msg("languages")}"
|
||||
id="login-select-toggle"
|
||||
onchange="if (this.value) window.location.href=this.value"
|
||||
>
|
||||
<#list locale.supported?sort_by("label") as l>
|
||||
<option
|
||||
value="${l.url}"
|
||||
${(l.languageTag == locale.currentLanguageTag)?then('selected','')}
|
||||
>
|
||||
${l.label}
|
||||
</option>
|
||||
</#list>
|
||||
</select>
|
||||
<span class="${properties.kcFormControlUtilClass}">
|
||||
<span class="${properties.kcFormControlToggleIcon!}">
|
||||
<svg
|
||||
class="pf-v5-svg"
|
||||
viewBox="0 0 320 512"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
width="1em"
|
||||
height="1em"
|
||||
>
|
||||
<path
|
||||
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
<div class="${properties.kcLoginMainBody!}">
|
||||
<#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
|
||||
<#if displayRequiredFields>
|
||||
<div class="${properties.kcContentWrapperClass!}">
|
||||
<div class="${properties.kcLabelWrapperClass!} subtitle">
|
||||
<span class="${properties.kcInputHelperTextItemTextClass!}">
|
||||
<span class="${properties.kcInputRequiredClass!}">*</span> ${msg("requiredFields")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
<#else>
|
||||
<#if displayRequiredFields>
|
||||
<div class="${properties.kcContentWrapperClass!}">
|
||||
<div class="${properties.kcLabelWrapperClass!} subtitle">
|
||||
<span class="${properties.kcInputHelperTextItemTextClass!}">
|
||||
<span class="${properties.kcInputRequiredClass!}">*</span> ${msg("requiredFields")}
|
||||
</span>
|
||||
</div>
|
||||
<div class="${properties.kcFormClass} ${properties.kcContentWrapperClass}">
|
||||
<#nested "show-username">
|
||||
<@username />
|
||||
</div>
|
||||
</div>
|
||||
<#else>
|
||||
<div class="${properties.kcFormClass} ${properties.kcContentWrapperClass}">
|
||||
<#nested "show-username">
|
||||
<@username />
|
||||
</div>
|
||||
</#if>
|
||||
</#if>
|
||||
|
||||
<#-- App-initiated actions should not see warning messages about the need to complete the action -->
|
||||
<#-- during login. -->
|
||||
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
|
||||
<div class="${properties.kcAlertClass!} pf-m-${(message.type = 'error')?then('danger', message.type)}">
|
||||
<div class="${properties.kcAlertIconClass!}">
|
||||
<#if message.type = 'success'><span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
|
||||
<#if message.type = 'warning'><span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
|
||||
<#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
|
||||
<#if message.type = 'info'><span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
|
||||
</div>
|
||||
<span class="${properties.kcAlertTitleClass!} kc-feedback-text">${kcSanitize(message.summary)?no_esc}</span>
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
<#nested "form">
|
||||
|
||||
<#if auth?has_content && auth.showTryAnotherWayLink()>
|
||||
<form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post" novalidate="novalidate">
|
||||
<input type="hidden" name="tryAnotherWay" value="on"/>
|
||||
<a id="try-another-way" href="javascript:document.forms['kc-select-try-another-way-form'].requestSubmit()"
|
||||
class="${properties.kcButtonSecondaryClass} ${properties.kcButtonBlockClass} ${properties.kcMarginTopClass}">
|
||||
${kcSanitize(msg("doTryAnotherWay"))?no_esc}
|
||||
</a>
|
||||
</form>
|
||||
</#if>
|
||||
|
||||
<#if displayInfo>
|
||||
<div id="kc-info" class="${properties.kcSignUpClass!}">
|
||||
<div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
|
||||
<#nested "info">
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
<div class="pf-v5-c-login__main-footer">
|
||||
<#nested "socialProviders">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<@loginFooter.content/>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</#macro>
|
||||
4
login/theme.properties
Normal file
4
login/theme.properties
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
parent=keycloak.v2
|
||||
import=common/keycloak
|
||||
styles=css/styles.css
|
||||
logo=/img/logo.svg
|
||||
Loading…
Add table
Reference in a new issue