Skip to content
Snippets Groups Projects
Commit f56da530 authored by Evangelos Foutras's avatar Evangelos Foutras :smiley_cat:
Browse files

Merge branch 'keycloak-quarkus' into 'master'

keycloak: migrate to Quarkus distribution

See merge request !544
parents 9d0925a6 450b782c
No related branches found
No related tags found
1 merge request!544keycloak: migrate to Quarkus distribution
Pipeline #16718 passed
Showing
with 3 additions and 1239 deletions
keycloak_db_name: keycloak
keycloak_domain: accounts.archlinux.org
keycloak_home_dir: /opt/keycloak
keycloak_port: "8443"
keycloak_port: "8080"
keycloak_nginx_htpasswd: /etc/nginx/auth/prometheus
[Service]
EnvironmentFile=-/etc/keycloak/admin-user.conf
FROM jboss/keycloak
USER root
RUN microdnf update -y && microdnf install -y vim && microdnf clean all
RUN sed -i 's|<cacheThemes>true</cacheThemes>|<cacheThemes>false</cacheThemes>|' /opt/jboss/keycloak/standalone/configuration/standalone.xml
RUN sed -i 's|<cacheTemplates>true</cacheTemplates>|<cacheTemplates>false</cacheTemplates>|' /opt/jboss/keycloak/standalone/configuration/standalone.xml
RUN sed -i 's|<staticMaxAge>2592000</staticMaxAge>|<staticMaxAge>-1</staticMaxAge>|' /opt/jboss/keycloak/standalone/configuration/standalone.xml
# Arch Linux Keycloak theme
A custom Keycloak theme that resembles the Arch Linux website in terms of coloring scheme and aesthetics.
The custom theme name is `archlinux` and is based on the default theme `keycloak` which in turn is based on `base`. Based means that the custom theme is an extension of the `keycloak` theme that already comes bundled with Keycloak.
## What has been modified
There are five sections that can be customized: login, account, admin console welcome screen and email. The email content did not need any further changes from the defaults therefore it has not been modified, everything else was customized.
The theme modifications were pretty simple and mostly involved replacing images from Keycloak logo to Arch Linux logo along with some background image changes and some element hiding and sizing fixes.
A Keycloak theme consists of various files but for the custom theme only images, CSS stylesheets and HTML templates (FreeMarker templates) were needed to be modified to achieve the desired results.
- Login screen
- the background image has been changed
- the Keycloak logo has been replaced with the Arch Linux logo
- Welcome screen
- the background image has been changed
- the Keycloak logo has been replaced with the Arch Linux logo
- the title text color was changed from black to white due to the dark background
- the text of the panels and their associated links has been changed to refer to the Arch Linux project instead of the Keycloak one
- the default footer has been hidden
- Account screen
- the Keycloak logo on the top left has been replaced with the Arch Linux logo
- the Keycloak logo during the account console loading animation has been replaced with the Arch Linux logo
- Admin console Screen
- the Keycloak logo on the top left has been replaced with the Arch Linux logo
## Useful resources
- [Keycloak theming documentation](https://www.keycloak.org/docs/latest/server_development/#_themes)
- [Keycloak default theme resource files](<https://github.com/keycloak/keycloak/tree/master/themes/src/main/resources/theme/keycloak>)
- [Keycloak base theme resource files](https://github.com/keycloak/keycloak/tree/master/themes/src/main/resources/theme/base)
- [Keycloak preview theme for new account system resource files](https://github.com/keycloak/keycloak/tree/master/themes/src/main/resources/theme/keycloak-preview/account)
- [Keycloak Docker containers main repository](https://github.com/keycloak/keycloak-containers)
## Additional notes
- When extending a theme you can override individual resources (templates, stylesheets, etc.). To minimize the changes the stylesheets only override what was necessary. Since the custom theme is based on the default `keycloak` theme the new stylesheets import the default stylesheets and through the use of [cascading]([Cascade and inheritance - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)) change only what is necessary.
- If you decide to override HTML templates bear in mind that you may need to update your custom template when upgrading to a new release. Since some HTML templates were modified, a maintenance update to the theme could be necessary.
- While creating a theme it’s a good idea to disable caching as this makes it possible to edit theme resources directly from the `themes` directory without restarting Keycloak. To do this edit `standalone.xml`. For `theme` set `staticMaxAge` to `-1` and both `cacheTemplates` and `cacheThemes` to `false`. **Note**: this is done automatically by the provided `docker-compose` file for local development. See the maintenance guide below for more details.
- Each section that can be modified uses a file called `theme.properties` which allows setting some configuration for the theme such as:
- parent - Parent theme to extend
- import - Import resources from another theme
- styles - Space-separated list of styles to include
- locales - Comma-separated list of supported locales
The file sometimes can also include custom properties that can be used from HTML templates. **Note**: this is quite powerful always try to use properties if at all possible to do theme alterations.
### Licensing details
The custom theme is using the following image resources:
- The Arch Linux "Two-color standard version" and "Two-color inverted version" SVG logos from the [Arch Linux Logos and Artwork webpage]([Arch Linux - Artwork](https://www.archlinux.org/art/)). The following Arch Linux logos are available for press and other use, subject to the restrictions of a [trademark policy](https://wiki.archlinux.org/index.php/DeveloperWiki:TrademarkPolicy "Arch Linux Trademark Policy").
- The [dark plaster texture background image](https://unsplash.com/photos/gM8igOIP5MA) by [Annie Spratt](https://unsplash.com/@anniespratt) hosted on Unsplash. All images hosted on Unsplash are made to be used freely. Please look at the [license](https://unsplash.com/license) for more information.
### Maintenance guide
Requirements:
- Docker
- Docker Compose
The theme folder includes a helpful Docker Compose file (`docker-compose.yml`) to enable local theme development and maintenance via a Docker container that spins up a local Keycloak instance that can be quickly accessed and be tampered with. This means that there is no need to touch the actual running Keycloak instance to do theme modifications. It is recommend to test out theme customizations locally first before deploying them to the running instance.
The Docker Compose file is doing the following:
- Spins up a local Keycloak server instance that can be accessed from `http://127.0.0.1:9000`
- Creates a default `admin` user with the same name and password
- Sets the default theme and welcome screen to the `archlinux` theme
- Disables theme caching to make it possible to edit theme resources directly from the `themes` directory without restarting Keycloak
- Installs vim to enable editing of the theme resources within the container
**Note**: the directory structure of the Keycloak docker container is different from an actual running instance.
| Directory | Container | Actual Instance |
| ------------- | -------------------------------------------- | -------------------------------------- |
| themes | /opt/jboss/keycloak/themes | /opt/keycloak/themes |
| configuration | /opt/jboss/keycloak/standalone/configuration | /opt/keycloak/standalone/configuration |
To start the local Keycloak instance and try out some changes:
1. navigate into the theme directory
```shell
cd /roles/keycloak/files/theme
```
2. run the Docker Compose file in detached mode (detaching is optional)
```shell
docker-compose up -d
```
3. edit the custom `archlinux` theme
```shell
docker exec -it keycloak bash
cd /opt/jboss/keycloak/themes/archlinux
vim path_to_file_you_want_to_edit
....
restart the page and view your changes live
```
**Note**: since the `archlinux` custom theme folder gets mounted within the container each time the playbook is executed, any changes you do within the container are persistent.
To automatically restart and recreate the container in order to test any new changes applied to the local resource files you can run the following command:
```shell
docker-compose up -d --force-recreate
```
<!DOCTYPE html>
<html>
<head>
<title>${msg("accountManagementTitle")}</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
<#if properties.developmentMode?has_content && properties.developmentMode == "true">
var developmentMode = true;
var reactRuntime = 'react.development.js';
var reactDOMRuntime = 'react-dom.development.js';
var reactRouterRuntime = 'react-router-dom.js';
<#else>
var developmentMode = false;
var reactRuntime = 'react.production.min.js';
var reactDOMRuntime = 'react-dom.production.min.js';
var reactRouterRuntime = 'react-router-dom.min.js';
</#if>
var authUrl = '${authUrl}';
var baseUrl = '${baseUrl}';
var realm = '${realm.name}';
var resourceUrl = '${resourceUrl}';
var isReactLoading = false;
<#if properties.logo?has_content>
var brandImg = resourceUrl + '${properties.logo}';
<#else>
var brandImg = resourceUrl + '/public/archlinux-logo-light.svg';
</#if>
<#if properties.logoUrl?has_content>
var brandUrl = '${properties.logoUrl}';
<#else>
var brandUrl = baseUrl;
</#if>
var features = {
isRegistrationEmailAsUsername : ${realm.registrationEmailAsUsername?c},
isEditUserNameAllowed : ${realm.editUsernameAllowed?c},
isInternationalizationEnabled : ${realm.isInternationalizationEnabled()?c},
isLinkedAccountsEnabled : ${realm.identityFederationEnabled?c},
isEventsEnabled : ${isEventsEnabled?c},
isMyResourcesEnabled : ${(realm.userManagedAccessAllowed && isAuthorizationEnabled)?c},
isTotpConfigured : ${isTotpConfigured?c},
deleteAccountAllowed : ${deleteAccountAllowed?c}
}
var availableLocales = [];
<#list supportedLocales as locale, label>
availableLocales.push({locale : '${locale}', label : '${label}'});
</#list>
<#if referrer??>
var referrer = '${referrer}';
var referrerName = '${referrerName}';
var referrerUri = '${referrer_uri}'.replace('&amp;', '&');
</#if>
<#if msg??>
var locale = '${locale}';
<#outputformat "JavaScript">
var l18nMsg = JSON.parse('${msgJSON?js_string}');
</#outputformat>
<#else>
var locale = 'en';
var l18Msg = {};
</#if>
</script>
<#if properties.favIcon?has_content>
<link rel="icon" href="${resourceUrl}${properties.favIcon}" type="image/x-icon"/>
<#else>
<link rel="icon" href="${resourceUrl}/public/archlinux-favicon.ico" type="image/x-icon"/>
</#if>
<script src="${authUrl}js/keycloak.js"></script>
<#if properties.developmentMode?has_content && properties.developmentMode == "true">
<!-- Don't use this in production: -->
<script src="${resourceUrl}/node_modules/react/umd/react.development.js" crossorigin></script>
<script src="${resourceUrl}/node_modules/react-dom/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</#if>
<#if properties.extensions?has_content>
<#list properties.extensions?split(' ') as script>
<#if properties.developmentMode?has_content && properties.developmentMode == "true">
<script type="text/babel" src="${resourceUrl}/${script}"></script>
<#else>
<script type="text/javascript" src="${resourceUrl}/${script}"></script>
</#if>
</#list>
</#if>
<#if properties.scripts?has_content>
<#list properties.scripts?split(' ') as script>
<script type="text/javascript" src="${resourceUrl}/${script}"></script>
</#list>
</#if>
<script>
var content = <#include "resources/content.json"/>
</script>
<#if properties.styles?has_content>
<#list properties.styles?split(' ') as style>
<link href="${resourceUrl}/${style}" rel="stylesheet"/>
</#list>
</#if>
<link rel="stylesheet" type="text/css" href="${resourceCommonUrl}/web_modules/@patternfly/react-core/dist/styles/base.css"/>
<link rel="stylesheet" type="text/css" href="${resourceCommonUrl}/web_modules/@patternfly/react-core/dist/styles/app.css"/>
<link href="${resourceUrl}/public/layout.css" rel="stylesheet"/>
</head>
<body>
<script>
const keycloak = Keycloak({
authServerUrl: authUrl,
realm: realm,
clientId: 'account-console'
});
keycloak.init({onLoad: 'check-sso', pkceMethod: 'S256', promiseType: 'native'}).then((authenticated) => {
isReactLoading = true;
toggleReact();
if (!keycloak.authenticated) {
document.getElementById("landingSignInButton").style.display='inline';
document.getElementById("landingSignInLink").style.display='inline';
} else {
document.getElementById("landingSignOutButton").style.display='inline';
document.getElementById("landingSignOutLink").style.display='inline';
document.getElementById("landingLoggedInUser").innerHTML = loggedInUserName('${msg("unknownUser")}', '${msg("fullName")}');
}
loadjs("/Main.js");
}).catch(() => {
alert('failed to initialize keycloak');
});
</script>
<div id="main_react_container" style="display:none;height:100%"></div>
<div id="spinner_screen" style="display:block; height:100%">
<div style="width: 320px; height: 328px; text-align: center; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto;">
<#if properties.logo?has_content>
<img src="${resourceUrl}${properties.logo}" alt="Logo" class="brand">
<#else>
<img src="${resourceUrl}/public/archlinux-logo-dark.svg" alt="Logo" class="brand">
</#if>
<p>${msg("loadingMessage")}</p>
<div >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<path d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="#5DBCD2" stroke="none" transform="rotate(16.3145 50 51)">
<animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="0 50 51;360 50 51"></animateTransform>
</path>
</div>
</div>
</div>
</div>
</div>
<div id="welcomeScreen" style="display:none;height:100%">
<div class="pf-c-page" id="page-layout-default-nav">
<header role="banner" class="pf-c-page__header">
<div class="pf-c-page__header-brand">
<#if properties.logoUrl?has_content>
<a id="landingLogo" class="pf-c-page__header-brand-link" href="${properties.logoUrl}">
<#else>
<a id="landingLogo" class="pf-c-page__header-brand-link" href="${baseUrl}">
</#if>
<#if properties.logo?has_content>
<img class="pf-c-brand brand" src="${resourceUrl}${properties.logo}" alt="Logo">
<#else>
<img class="pf-c-brand brand" src="${resourceUrl}/public/archlinux-logo-light.svg" alt="Logo">
</#if>
</a>
</div>
<div class="pf-c-page__header-tools">
<#if referrer?has_content && referrer_uri?has_content>
<div class="pf-c-page__header-tools-group pf-m-icons">
<a id="landingReferrerLink" href="${referrer_uri}" id="referrer" tabindex="0"><span class="pf-icon pf-icon-arrow"></span>${msg("backTo",referrerName)}</a>
</div>
</#if>
<div class="pf-c-page__header-tools-group pf-m-icons">
<button id="landingSignInButton" tabindex="0" style="display:none" onclick="keycloak.login();" class="pf-c-button pf-m-primary" type="button">${msg("doSignIn")}</button>
<button id="landingSignOutButton" tabindex="0" style="display:none" onclick="keycloak.logout();" class="pf-c-button pf-m-primary" type="button">${msg("doSignOut")}</button>
</div>
<!-- Kebab for mobile -->
<div class="pf-c-page__header-tools-group">
<div id="landingMobileKebab" class="pf-c-dropdown pf-m-mobile" onclick="toggleMobileDropdown();"> <!-- pf-m-expanded -->
<button aria-label="Actions" tabindex="0" id="landingMobileKebabButton" class="pf-c-dropdown__toggle pf-m-plain" type="button" aria-expanded="true" aria-haspopup="true">
<svg fill="currentColor" height="1em" width="1em" viewBox="0 0 192 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;"><path d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z" transform=""></path></svg>
</button>
<ul id="landingMobileDropdown" aria-labelledby="landingMobileKebabButton" class="pf-c-dropdown__menu pf-m-align-right" role="menu" style="display:none">
<#if referrer?has_content && referrer_uri?has_content>
<li role="none">
<a id="landingMobileReferrerLink" href="${referrer_uri}" role="menuitem" tabindex="0" aria-disabled="false" class="pf-c-dropdown__menu-item">${msg("backTo",referrerName)}</a>
</li>
</#if>
<li id="landingSignInLink" role="none" style="display:none">
<a onclick="keycloak.login();" role="menuitem" tabindex="0" aria-disabled="false" class="pf-c-dropdown__menu-item">${msg("doLogIn")}</a>
</li>
<li id="landingSignOutLink" role="none" style="display:none">
<a onclick="keycloak.logout();" role="menuitem" tabindex="0" aria-disabled="false" class="pf-c-dropdown__menu-item">${msg("doSignOut")}</a>
</li>
</ul>
</div>
</div>
<span id="landingLoggedInUser"></span>
</div> <!-- end header tools -->
</header>
<main role="main" class="pf-c-page__main">
<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content" id="landingWelcomeMessage">
<h1>${msg("accountManagementWelcomeMessage")}</h1>
</div>
</section>
<section class="pf-c-page__main-section">
<div class="pf-l-gallery pf-m-gutter">
<#assign content=theme.apply("content.json")?eval>
<#list content as item>
<div class="pf-l-gallery__item pf-c-card" id="landing-${item.id}">
<div>
<div class="pf-c-card__header pf-c-content">
<h2>
<#if item.icon??>
<i class="pf-icon ${item.icon}"></i>&nbsp;
<#elseif item.iconSvg??>
<img src="${item.iconSvg}" alt="icon"/>&nbsp;
</#if>
${msg(item.label)}
</h2>
<#if item.descriptionLabel??>
<p>${msg(item.descriptionLabel)}</p>
</#if>
</div>
<div class="pf-c-card__body pf-c-content">
<#if item.content??>
<#list item.content as sub>
<div id="landing-${sub.id}">
<a onclick="toggleReact(); window.location.hash='${sub.path}'">${msg(sub.label)}</a>
</div>
</#list>
<#else>
<a id="landing-${item.id}" onclick="toggleReact(); window.location.hash = '${item.path}'">${msg(item.label)}</a>
</#if>
</div>
</div>
</div>
</#list>
</div>
</section>
</main>
</div>
</div>
<script>
const removeHidden = (content) => {
content.forEach(c => {
if (c.hidden && eval(c.hidden)) {
document.getElementById('landing-' + c.id).remove();
}
if (c.content) removeHidden(c.content);
});
}
removeHidden(content);
</script>
</body>
</html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.0"
width="600"
height="199.41692"
id="svg2424">
<defs
id="defs2426">
<linearGradient
x1="112.49854"
y1="6.1372099"
x2="112.49853"
y2="129.3468"
id="path1082_2_"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(287,-83)">
<stop
id="stop193"
style="stop-color:#ffffff;stop-opacity:0"
offset="0" />
<stop
id="stop195"
style="stop-color:#ffffff;stop-opacity:0.27450982"
offset="1" />
<midPointStop
offset="0"
style="stop-color:#FFFFFF"
id="midPointStop197" />
<midPointStop
offset="0.5"
style="stop-color:#FFFFFF"
id="midPointStop199" />
<midPointStop
offset="1"
style="stop-color:#000000"
id="midPointStop201" />
</linearGradient>
<linearGradient
x1="541.33502"
y1="104.50665"
x2="606.91248"
y2="303.14029"
id="linearGradient2544"
xlink:href="#path1082_2_"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-0.3937741,0,0,0.393752,357.51969,122.00151)" />
<linearGradient
id="linearGradient3388">
<stop
id="stop3390"
style="stop-color:#000000;stop-opacity:0"
offset="0" />
<stop
id="stop3392"
style="stop-color:#000000;stop-opacity:0.37113401"
offset="1" />
</linearGradient>
<linearGradient
x1="490.72305"
y1="237.72447"
x2="490.72305"
y2="183.9644"
id="linearGradient4416"
xlink:href="#linearGradient3388"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.749107,0,0,0.749107,-35.459862,91.44108)" />
</defs>
<g
transform="translate(-34.777313,-129.80241)"
id="layer1">
<g
transform="matrix(0.8746356,0,0,0.8746356,14.730518,23.408954)"
id="g2424">
<g
transform="matrix(0.6378586,0,0,0.6378586,36.486487,2.17139)"
id="g2809"
style="fill:#4d4d4d;fill-opacity:1">
<path
d="m 339.96875,309.09375 c -14.47141,-0.0239 -26.4812,2.94367 -31.125,4.5625 l -4.78125,25.8125 c -0.0116,0.0951 23.79543,-6.34855 34.28125,-5.96875 17.36158,0.62381 18.95948,6.63541 18.65625,14.75 0.29595,0.47462 -4.47933,-7.33192 -19.5,-7.59375 -18.94961,-0.32687 -45.69284,6.70947 -45.65625,35.3125 -0.51086,32.17412 24.03361,41.63882 40.75,41.8125 15.02821,-0.27364 22.0777,-5.69136 25.9375,-8.59375 5.07124,-5.30236 10.87308,-10.63447 16.40625,-17.03125 -5.23567,9.51278 -9.77472,16.0898 -14.5,21.125 l 0,4.25 22.84375,-3.84375 0.15625,-62.09375 c -0.23141,-8.78839 5.04123,-42.41827 -43.46875,-42.5 z m -3.28125,54.0625 c 9.46889,0.12995 20.32788,4.79708 20.34375,16.03125 0.049,10.21821 -12.80005,15.71183 -21.15625,15.625 -8.35976,-0.0868 -19.45093,-6.56982 -19.5,-16.53125 0.16016,-8.90444 10.45953,-15.35418 20.3125,-15.125 z"
id="path2284"
style="fill:#4d4d4d;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 398.50106,314.83145 -0.15505,102.82693 26.61213,-5.12724 0.0449,-58.30157 c 0.006,-8.68089 12.40554,-18.82451 27.9627,-18.66287 3.30202,-5.97408 9.5087,-21.24219 11.02088,-24.71514 -34.75649,-0.0833 -35.19897,9.98993 -41.24398,14.94517 -0.0631,-9.45285 -0.0213,-15.12741 -0.0213,-15.12741 l -24.2202,4.16213 z"
id="path2286"
style="fill:#4d4d4d;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 548.2688,328.33058 c -0.25696,-0.12068 -13.87938,-15.93419 -41.26638,-16.0589 -25.65249,-0.42638 -54.42578,9.51895 -54.88631,52.5328 0.22457,37.81852 27.6402,52.59809 55.0314,52.88627 29.31292,0.30451 40.97654,-18.32947 41.67615,-18.79124 -3.49762,-3.0321 -16.59792,-16.0131 -16.59792,-16.0131 0,0 -8.18236,11.65102 -24.05802,11.79913 -15.87942,0.1512 -29.68245,-12.27325 -29.87805,-29.60905 -0.20349,-17.33595 12.68881,-26.72821 29.99725,-27.48687 14.98466,-0.003 23.6297,9.67334 23.6297,9.67334 l 16.35218,-18.93238 z"
id="path2288"
style="fill:#4d4d4d;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 581.8125,278.84375 -25.125,5.90625 0.1875,133.9375 24.75,-4.46875 0.28125,-63.03125 c 0.0529,-6.60927 9.56127,-16.75916 25.4375,-16.4375 15.17973,0.15775 18.57236,10.11767 18.53125,11.375 l 0.4375,72.96875 24.40625,-4.3125 0.0937,-77.375 c 0.1607,-7.44539 -16.30833,-23.16954 -42.78125,-23.28125 -12.58087,0.0202 -19.54815,2.86825 -23.09375,4.96875 -6.06656,4.68565 -12.9998,9.17543 -19.8125,14.90625 6.29809,-8.09099 11.58551,-13.68516 16.75,-17.84375 l -0.0625,-37.3125 z"
id="path2290"
style="fill:#4d4d4d;fill-opacity:1;fill-rule:evenodd;stroke:none" />
</g>
<g
transform="matrix(0.9443373,0,0.01336345,0.9443373,78.345657,-412.48879)"
id="g5326"
style="fill:#1793d1;fill-opacity:1;stroke:none">
<path
d="m 400.67581,629.79609 7.68167,-1.91575 -0.92851,91.20792 -7.79574,1.32426 1.04258,-90.61643 z"
id="path2292"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 421.10266,657.01757 6.75064,-2.9867 -0.86808,65.39931 -6.49779,1.33915 0.61523,-63.75176 z m -1.26059,-23.58316 5.47167,-4.41533 4.42261,4.99952 -5.47558,4.53221 -4.4187,-5.1164 z"
id="path2294"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 440.44273,655.82614 7.67755,-1.56201 -0.1573,13.6722 c -0.007,0.58717 4.4194,-15.27364 24.68502,-14.92094 19.67986,0.10952 22.68401,15.34634 22.5291,18.76237 l -0.43759,48.0783 -6.73044,1.45631 0.63316,-47.489 c 0.0974,-1.38684 -2.88144,-13.11441 -16.78906,-13.15754 -13.90509,-0.0404 -23.68364,10.10048 -23.75821,16.57937 l -0.48127,41.83477 -7.80388,2.0313 0.63292,-65.28513 z"
id="path2296"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 561.53301,720.20203 -7.6776,1.56186 0.15737,-13.67198 c 0.007,-0.58742 -4.42201,15.27361 -24.68504,14.92086 -19.67983,-0.10944 -22.68399,-15.34626 -22.52908,-18.76229 l 0.43757,-48.07861 8.15674,-1.64226 -0.54644,47.48988 c -0.0149,1.29682 1.36845,13.29979 15.27604,13.3426 13.90511,0.0405 23.76622,-8.37359 24.01453,-21.04416 l 0.43105,-37.46902 7.5978,-1.93195 -0.63294,65.28507 z"
id="path2298"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 577.45461,655.28678 -5.42715,4.20017 20.19894,26.93328 -22.39092,31.11622 5.63499,4.226 21.04365,-28.8967 20.8779,29.58159 5.32727,-4.20103 -22.37578,-31.62866 18.56963,-25.5775 -5.53193,-4.73429 -16.92109,23.66778 -19.00551,-24.68686 z"
id="path2300"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
</g>
<path
d="m 105.8125,16.625 c -7.39687,18.135158 -11.858304,29.997682 -20.09375,47.59375 5.04936,5.35232 11.247211,11.585364 21.3125,18.625 C 96.210077,78.390904 88.828713,73.920352 83.3125,69.28125 72.7727,91.274163 56.259864,122.60209 22.75,182.8125 49.087628,167.60733 69.504089,158.23318 88.53125,154.65625 87.714216,151.1422 87.2497,147.34107 87.28125,143.375 l 0.03125,-0.84375 c 0.417917,-16.87382 9.195665,-29.84979 19.59375,-28.96875 10.39809,0.88104 18.48041,15.28242 18.0625,32.15625 -0.0786,3.17512 -0.43674,6.22955 -1.0625,9.0625 18.82058,3.68164 39.01873,13.03179 65,28.03125 -5.123,-9.4318 -9.69572,-17.93388 -14.0625,-26.03125 -6.87839,-5.33121 -14.05289,-12.2698 -28.6875,-19.78125 10.05899,2.61375 17.2611,5.62932 22.875,9 C 124.63297,63.338161 121.03766,52.354109 105.8125,16.625 z"
transform="matrix(1.1433333,0,0,1.1433333,22.920168,121.64318)"
id="path2518"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<g
id="text2634"
style="font-size:8.44138241px;font-style:normal;font-weight:normal;fill:#1793d1;fill-opacity:1;stroke:none;font-family:DejaVu Sans Mono">
<path
d="m 685.46692,263.83624 0,-5.32944 -1.99082,0 0,-0.71307 4.7895,0 0,0.71307 -1.99906,0 0,5.32944 -0.79962,0"
id="path3945"
style="fill:#1793d1;fill-opacity:1" />
<path
d="m 689.0982,263.83624 0,-6.04251 1.20355,0 1.43026,4.2784 c 0.13189,0.39843 0.22806,0.69658 0.28852,0.89442 0.0687,-0.21983 0.17586,-0.5427 0.3215,-0.96862 l 1.44674,-4.2042 1.07578,0 0,6.04251 -0.77077,0 0,-5.05741 -1.75587,5.05741 -0.72131,0 -1.74763,-5.14396 0,5.14396 -0.77077,0"
id="path3947"
style="fill:#1793d1;fill-opacity:1" />
</g>
<g
id="text2638"
style="font-size:8.25130367px;font-style:normal;font-weight:normal;fill:#1793d1;fill-opacity:1;stroke:none;font-family:DejaVu Sans Mono">
<path
d="m 239.84053,313.69965 0,-5.20945 -1.94598,0 0,-0.697 4.68164,0 0,0.697 -1.95404,0 0,5.20945 -0.78162,0"
id="path3940"
style="fill:#1793d1;fill-opacity:1" />
<path
d="m 243.39004,313.69965 0,-5.90645 1.17646,0 1.39805,4.18205 c 0.12892,0.38947 0.22293,0.6809 0.28202,0.87429 0.0671,-0.21488 0.1719,-0.53048 0.31426,-0.94681 l 1.41417,-4.10953 1.05155,0 0,5.90645 -0.75341,0 0,-4.94353 -1.71634,4.94353 -0.70506,0 -1.70828,-5.02814 0,5.02814 -0.75342,0"
id="path3942"
style="fill:#1793d1;fill-opacity:1" />
</g>
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.0"
width="600"
height="199.41692"
id="svg2424">
<defs
id="defs2426">
<linearGradient
x1="112.49854"
y1="6.1372099"
x2="112.49853"
y2="129.3468"
id="path1082_2_"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(287,-83)">
<stop
id="stop193"
style="stop-color:#ffffff;stop-opacity:0"
offset="0" />
<stop
id="stop195"
style="stop-color:#ffffff;stop-opacity:0.27450982"
offset="1" />
<midPointStop
offset="0"
style="stop-color:#FFFFFF"
id="midPointStop197" />
<midPointStop
offset="0.5"
style="stop-color:#FFFFFF"
id="midPointStop199" />
<midPointStop
offset="1"
style="stop-color:#000000"
id="midPointStop201" />
</linearGradient>
<linearGradient
x1="541.33502"
y1="104.50665"
x2="606.91248"
y2="303.14029"
id="linearGradient2544"
xlink:href="#path1082_2_"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-0.3937741,0,0,0.393752,357.51969,122.00151)" />
<linearGradient
id="linearGradient3388">
<stop
id="stop3390"
style="stop-color:#000000;stop-opacity:0"
offset="0" />
<stop
id="stop3392"
style="stop-color:#000000;stop-opacity:0.37113401"
offset="1" />
</linearGradient>
<linearGradient
x1="490.72305"
y1="237.72447"
x2="490.72305"
y2="183.9644"
id="linearGradient4416"
xlink:href="#linearGradient3388"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.749107,0,0,0.749107,-35.459862,91.44108)" />
</defs>
<g
transform="translate(-34.777313,-129.80241)"
id="layer1">
<g
transform="matrix(0.8746356,0,0,0.8746356,14.730518,23.408954)"
id="g2424">
<g
transform="matrix(0.6378586,0,0,0.6378586,36.486487,2.17139)"
id="g2809"
style="fill:#ffffff;fill-opacity:1">
<path
d="m 339.96875,309.09375 c -14.47141,-0.0239 -26.4812,2.94367 -31.125,4.5625 l -4.78125,25.8125 c -0.0116,0.0951 23.79543,-6.34855 34.28125,-5.96875 17.36158,0.62381 18.95948,6.63541 18.65625,14.75 0.29595,0.47462 -4.47933,-7.33192 -19.5,-7.59375 -18.94961,-0.32687 -45.69284,6.70947 -45.65625,35.3125 -0.51086,32.17412 24.03361,41.63882 40.75,41.8125 15.02821,-0.27364 22.0777,-5.69136 25.9375,-8.59375 5.07124,-5.30236 10.87308,-10.63447 16.40625,-17.03125 -5.23567,9.51278 -9.77472,16.0898 -14.5,21.125 l 0,4.25 22.84375,-3.84375 0.15625,-62.09375 c -0.23141,-8.78839 5.04123,-42.41827 -43.46875,-42.5 z m -3.28125,54.0625 c 9.46889,0.12995 20.32788,4.79708 20.34375,16.03125 0.049,10.21821 -12.80005,15.71183 -21.15625,15.625 -8.35976,-0.0868 -19.45093,-6.56982 -19.5,-16.53125 0.16016,-8.90444 10.45953,-15.35418 20.3125,-15.125 z"
id="path2284"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 398.50106,314.83145 -0.15505,102.82693 26.61213,-5.12724 0.0449,-58.30157 c 0.006,-8.68089 12.40554,-18.82451 27.9627,-18.66287 3.30202,-5.97408 9.5087,-21.24219 11.02088,-24.71514 -34.75649,-0.0833 -35.19897,9.98993 -41.24398,14.94517 -0.0631,-9.45285 -0.0213,-15.12741 -0.0213,-15.12741 l -24.2202,4.16213 z"
id="path2286"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 548.2688,328.33058 c -0.25696,-0.12068 -13.87938,-15.93419 -41.26638,-16.0589 -25.65249,-0.42638 -54.42578,9.51895 -54.88631,52.5328 0.22457,37.81852 27.6402,52.59809 55.0314,52.88627 29.31292,0.30451 40.97654,-18.32947 41.67615,-18.79124 -3.49762,-3.0321 -16.59792,-16.0131 -16.59792,-16.0131 0,0 -8.18236,11.65102 -24.05802,11.79913 -15.87942,0.1512 -29.68245,-12.27325 -29.87805,-29.60905 -0.20349,-17.33595 12.68881,-26.72821 29.99725,-27.48687 14.98466,-0.003 23.6297,9.67334 23.6297,9.67334 l 16.35218,-18.93238 z"
id="path2288"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 581.8125,278.84375 -25.125,5.90625 0.1875,133.9375 24.75,-4.46875 0.28125,-63.03125 c 0.0529,-6.60927 9.56127,-16.75916 25.4375,-16.4375 15.17973,0.15775 18.57236,10.11767 18.53125,11.375 l 0.4375,72.96875 24.40625,-4.3125 0.0937,-77.375 c 0.1607,-7.44539 -16.30833,-23.16954 -42.78125,-23.28125 -12.58087,0.0202 -19.54815,2.86825 -23.09375,4.96875 -6.06656,4.68565 -12.9998,9.17543 -19.8125,14.90625 6.29809,-8.09099 11.58551,-13.68516 16.75,-17.84375 l -0.0625,-37.3125 z"
id="path2290"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
</g>
<g
transform="matrix(0.9443373,0,0.01336345,0.9443373,78.345657,-412.48879)"
id="g5326"
style="fill:#1793d1;fill-opacity:1;stroke:none">
<path
d="m 400.67581,629.79609 7.68167,-1.91575 -0.92851,91.20792 -7.79574,1.32426 1.04258,-90.61643 z"
id="path2292"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 421.10266,657.01757 6.75064,-2.9867 -0.86808,65.39931 -6.49779,1.33915 0.61523,-63.75176 z m -1.26059,-23.58316 5.47167,-4.41533 4.42261,4.99952 -5.47558,4.53221 -4.4187,-5.1164 z"
id="path2294"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 440.44273,655.82614 7.67755,-1.56201 -0.1573,13.6722 c -0.007,0.58717 4.4194,-15.27364 24.68502,-14.92094 19.67986,0.10952 22.68401,15.34634 22.5291,18.76237 l -0.43759,48.0783 -6.73044,1.45631 0.63316,-47.489 c 0.0974,-1.38684 -2.88144,-13.11441 -16.78906,-13.15754 -13.90509,-0.0404 -23.68364,10.10048 -23.75821,16.57937 l -0.48127,41.83477 -7.80388,2.0313 0.63292,-65.28513 z"
id="path2296"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 561.53301,720.20203 -7.6776,1.56186 0.15737,-13.67198 c 0.007,-0.58742 -4.42201,15.27361 -24.68504,14.92086 -19.67983,-0.10944 -22.68399,-15.34626 -22.52908,-18.76229 l 0.43757,-48.07861 8.15674,-1.64226 -0.54644,47.48988 c -0.0149,1.29682 1.36845,13.29979 15.27604,13.3426 13.90511,0.0405 23.76622,-8.37359 24.01453,-21.04416 l 0.43105,-37.46902 7.5978,-1.93195 -0.63294,65.28507 z"
id="path2298"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 577.45461,655.28678 -5.42715,4.20017 20.19894,26.93328 -22.39092,31.11622 5.63499,4.226 21.04365,-28.8967 20.8779,29.58159 5.32727,-4.20103 -22.37578,-31.62866 18.56963,-25.5775 -5.53193,-4.73429 -16.92109,23.66778 -19.00551,-24.68686 z"
id="path2300"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
</g>
<path
d="m 105.8125,16.625 c -7.39687,18.135158 -11.858304,29.997682 -20.09375,47.59375 5.04936,5.35232 11.247211,11.585364 21.3125,18.625 C 96.210077,78.390904 88.828713,73.920352 83.3125,69.28125 72.7727,91.274163 56.259864,122.60209 22.75,182.8125 49.087628,167.60733 69.504089,158.23318 88.53125,154.65625 87.714216,151.1422 87.2497,147.34107 87.28125,143.375 l 0.03125,-0.84375 c 0.417917,-16.87382 9.195665,-29.84979 19.59375,-28.96875 10.39809,0.88104 18.48041,15.28242 18.0625,32.15625 -0.0786,3.17512 -0.43674,6.22955 -1.0625,9.0625 18.82058,3.68164 39.01873,13.03179 65,28.03125 -5.123,-9.4318 -9.69572,-17.93388 -14.0625,-26.03125 -6.87839,-5.33121 -14.05289,-12.2698 -28.6875,-19.78125 10.05899,2.61375 17.2611,5.62932 22.875,9 C 124.63297,63.338161 121.03766,52.354109 105.8125,16.625 z"
transform="matrix(1.1433333,0,0,1.1433333,22.920168,121.64318)"
id="path2518"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<g
id="text2634"
style="font-size:8.44138241px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;font-family:DejaVu Sans Mono">
<path
d="m 685.46692,263.83624 0,-5.32944 -1.99082,0 0,-0.71307 4.7895,0 0,0.71307 -1.99906,0 0,5.32944 -0.79962,0"
id="path3660"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m 689.0982,263.83624 0,-6.04251 1.20355,0 1.43026,4.2784 c 0.13189,0.39843 0.22806,0.69658 0.28852,0.89442 0.0687,-0.21983 0.17586,-0.5427 0.3215,-0.96862 l 1.44674,-4.2042 1.07578,0 0,6.04251 -0.77077,0 0,-5.05741 -1.75587,5.05741 -0.72131,0 -1.74763,-5.14396 0,5.14396 -0.77077,0"
id="path3662"
style="fill:#ffffff;fill-opacity:1" />
</g>
<g
id="text2638"
style="font-size:8.25130367px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;font-family:DejaVu Sans Mono">
<path
d="m 239.84053,313.69965 0,-5.20945 -1.94598,0 0,-0.697 4.68164,0 0,0.697 -1.95404,0 0,5.20945 -0.78162,0"
id="path2883"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m 243.39004,313.69965 0,-5.90645 1.17646,0 1.39805,4.18205 c 0.12892,0.38947 0.22293,0.6809 0.28202,0.87429 0.0671,-0.21488 0.1719,-0.53048 0.31426,-0.94681 l 1.41417,-4.10953 1.05155,0 0,5.90645 -0.75341,0 0,-4.94353 -1.71634,4.94353 -0.70506,0 -1.70828,-5.02814 0,5.02814 -0.75342,0"
id="path2885"
style="fill:#ffffff;fill-opacity:1" />
</g>
</g>
</g>
</svg>
.brand {
height: 50px;
}
parent=keycloak.v2
logo=/public/archlinux-logo-light.svg
logoDark=/public/archlinux-logo-dark.svg
favIcon=/public/archlinux-favicon.ico
@import 'styles.css';
.navbar-pf .navbar-brand {
background-image: url('../img/archlinux-logo-light.svg');
background-size: 150px 50px;
width: 150px;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.0"
width="600"
height="199.41692"
id="svg2424">
<defs
id="defs2426">
<linearGradient
x1="112.49854"
y1="6.1372099"
x2="112.49853"
y2="129.3468"
id="path1082_2_"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(287,-83)">
<stop
id="stop193"
style="stop-color:#ffffff;stop-opacity:0"
offset="0" />
<stop
id="stop195"
style="stop-color:#ffffff;stop-opacity:0.27450982"
offset="1" />
<midPointStop
offset="0"
style="stop-color:#FFFFFF"
id="midPointStop197" />
<midPointStop
offset="0.5"
style="stop-color:#FFFFFF"
id="midPointStop199" />
<midPointStop
offset="1"
style="stop-color:#000000"
id="midPointStop201" />
</linearGradient>
<linearGradient
x1="541.33502"
y1="104.50665"
x2="606.91248"
y2="303.14029"
id="linearGradient2544"
xlink:href="#path1082_2_"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-0.3937741,0,0,0.393752,357.51969,122.00151)" />
<linearGradient
id="linearGradient3388">
<stop
id="stop3390"
style="stop-color:#000000;stop-opacity:0"
offset="0" />
<stop
id="stop3392"
style="stop-color:#000000;stop-opacity:0.37113401"
offset="1" />
</linearGradient>
<linearGradient
x1="490.72305"
y1="237.72447"
x2="490.72305"
y2="183.9644"
id="linearGradient4416"
xlink:href="#linearGradient3388"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.749107,0,0,0.749107,-35.459862,91.44108)" />
</defs>
<g
transform="translate(-34.777313,-129.80241)"
id="layer1">
<g
transform="matrix(0.8746356,0,0,0.8746356,14.730518,23.408954)"
id="g2424">
<g
transform="matrix(0.6378586,0,0,0.6378586,36.486487,2.17139)"
id="g2809"
style="fill:#ffffff;fill-opacity:1">
<path
d="m 339.96875,309.09375 c -14.47141,-0.0239 -26.4812,2.94367 -31.125,4.5625 l -4.78125,25.8125 c -0.0116,0.0951 23.79543,-6.34855 34.28125,-5.96875 17.36158,0.62381 18.95948,6.63541 18.65625,14.75 0.29595,0.47462 -4.47933,-7.33192 -19.5,-7.59375 -18.94961,-0.32687 -45.69284,6.70947 -45.65625,35.3125 -0.51086,32.17412 24.03361,41.63882 40.75,41.8125 15.02821,-0.27364 22.0777,-5.69136 25.9375,-8.59375 5.07124,-5.30236 10.87308,-10.63447 16.40625,-17.03125 -5.23567,9.51278 -9.77472,16.0898 -14.5,21.125 l 0,4.25 22.84375,-3.84375 0.15625,-62.09375 c -0.23141,-8.78839 5.04123,-42.41827 -43.46875,-42.5 z m -3.28125,54.0625 c 9.46889,0.12995 20.32788,4.79708 20.34375,16.03125 0.049,10.21821 -12.80005,15.71183 -21.15625,15.625 -8.35976,-0.0868 -19.45093,-6.56982 -19.5,-16.53125 0.16016,-8.90444 10.45953,-15.35418 20.3125,-15.125 z"
id="path2284"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 398.50106,314.83145 -0.15505,102.82693 26.61213,-5.12724 0.0449,-58.30157 c 0.006,-8.68089 12.40554,-18.82451 27.9627,-18.66287 3.30202,-5.97408 9.5087,-21.24219 11.02088,-24.71514 -34.75649,-0.0833 -35.19897,9.98993 -41.24398,14.94517 -0.0631,-9.45285 -0.0213,-15.12741 -0.0213,-15.12741 l -24.2202,4.16213 z"
id="path2286"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 548.2688,328.33058 c -0.25696,-0.12068 -13.87938,-15.93419 -41.26638,-16.0589 -25.65249,-0.42638 -54.42578,9.51895 -54.88631,52.5328 0.22457,37.81852 27.6402,52.59809 55.0314,52.88627 29.31292,0.30451 40.97654,-18.32947 41.67615,-18.79124 -3.49762,-3.0321 -16.59792,-16.0131 -16.59792,-16.0131 0,0 -8.18236,11.65102 -24.05802,11.79913 -15.87942,0.1512 -29.68245,-12.27325 -29.87805,-29.60905 -0.20349,-17.33595 12.68881,-26.72821 29.99725,-27.48687 14.98466,-0.003 23.6297,9.67334 23.6297,9.67334 l 16.35218,-18.93238 z"
id="path2288"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 581.8125,278.84375 -25.125,5.90625 0.1875,133.9375 24.75,-4.46875 0.28125,-63.03125 c 0.0529,-6.60927 9.56127,-16.75916 25.4375,-16.4375 15.17973,0.15775 18.57236,10.11767 18.53125,11.375 l 0.4375,72.96875 24.40625,-4.3125 0.0937,-77.375 c 0.1607,-7.44539 -16.30833,-23.16954 -42.78125,-23.28125 -12.58087,0.0202 -19.54815,2.86825 -23.09375,4.96875 -6.06656,4.68565 -12.9998,9.17543 -19.8125,14.90625 6.29809,-8.09099 11.58551,-13.68516 16.75,-17.84375 l -0.0625,-37.3125 z"
id="path2290"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
</g>
<g
transform="matrix(0.9443373,0,0.01336345,0.9443373,78.345657,-412.48879)"
id="g5326"
style="fill:#1793d1;fill-opacity:1;stroke:none">
<path
d="m 400.67581,629.79609 7.68167,-1.91575 -0.92851,91.20792 -7.79574,1.32426 1.04258,-90.61643 z"
id="path2292"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 421.10266,657.01757 6.75064,-2.9867 -0.86808,65.39931 -6.49779,1.33915 0.61523,-63.75176 z m -1.26059,-23.58316 5.47167,-4.41533 4.42261,4.99952 -5.47558,4.53221 -4.4187,-5.1164 z"
id="path2294"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 440.44273,655.82614 7.67755,-1.56201 -0.1573,13.6722 c -0.007,0.58717 4.4194,-15.27364 24.68502,-14.92094 19.67986,0.10952 22.68401,15.34634 22.5291,18.76237 l -0.43759,48.0783 -6.73044,1.45631 0.63316,-47.489 c 0.0974,-1.38684 -2.88144,-13.11441 -16.78906,-13.15754 -13.90509,-0.0404 -23.68364,10.10048 -23.75821,16.57937 l -0.48127,41.83477 -7.80388,2.0313 0.63292,-65.28513 z"
id="path2296"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 561.53301,720.20203 -7.6776,1.56186 0.15737,-13.67198 c 0.007,-0.58742 -4.42201,15.27361 -24.68504,14.92086 -19.67983,-0.10944 -22.68399,-15.34626 -22.52908,-18.76229 l 0.43757,-48.07861 8.15674,-1.64226 -0.54644,47.48988 c -0.0149,1.29682 1.36845,13.29979 15.27604,13.3426 13.90511,0.0405 23.76622,-8.37359 24.01453,-21.04416 l 0.43105,-37.46902 7.5978,-1.93195 -0.63294,65.28507 z"
id="path2298"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 577.45461,655.28678 -5.42715,4.20017 20.19894,26.93328 -22.39092,31.11622 5.63499,4.226 21.04365,-28.8967 20.8779,29.58159 5.32727,-4.20103 -22.37578,-31.62866 18.56963,-25.5775 -5.53193,-4.73429 -16.92109,23.66778 -19.00551,-24.68686 z"
id="path2300"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
</g>
<path
d="m 105.8125,16.625 c -7.39687,18.135158 -11.858304,29.997682 -20.09375,47.59375 5.04936,5.35232 11.247211,11.585364 21.3125,18.625 C 96.210077,78.390904 88.828713,73.920352 83.3125,69.28125 72.7727,91.274163 56.259864,122.60209 22.75,182.8125 49.087628,167.60733 69.504089,158.23318 88.53125,154.65625 87.714216,151.1422 87.2497,147.34107 87.28125,143.375 l 0.03125,-0.84375 c 0.417917,-16.87382 9.195665,-29.84979 19.59375,-28.96875 10.39809,0.88104 18.48041,15.28242 18.0625,32.15625 -0.0786,3.17512 -0.43674,6.22955 -1.0625,9.0625 18.82058,3.68164 39.01873,13.03179 65,28.03125 -5.123,-9.4318 -9.69572,-17.93388 -14.0625,-26.03125 -6.87839,-5.33121 -14.05289,-12.2698 -28.6875,-19.78125 10.05899,2.61375 17.2611,5.62932 22.875,9 C 124.63297,63.338161 121.03766,52.354109 105.8125,16.625 z"
transform="matrix(1.1433333,0,0,1.1433333,22.920168,121.64318)"
id="path2518"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<g
id="text2634"
style="font-size:8.44138241px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;font-family:DejaVu Sans Mono">
<path
d="m 685.46692,263.83624 0,-5.32944 -1.99082,0 0,-0.71307 4.7895,0 0,0.71307 -1.99906,0 0,5.32944 -0.79962,0"
id="path3660"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m 689.0982,263.83624 0,-6.04251 1.20355,0 1.43026,4.2784 c 0.13189,0.39843 0.22806,0.69658 0.28852,0.89442 0.0687,-0.21983 0.17586,-0.5427 0.3215,-0.96862 l 1.44674,-4.2042 1.07578,0 0,6.04251 -0.77077,0 0,-5.05741 -1.75587,5.05741 -0.72131,0 -1.74763,-5.14396 0,5.14396 -0.77077,0"
id="path3662"
style="fill:#ffffff;fill-opacity:1" />
</g>
<g
id="text2638"
style="font-size:8.25130367px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;font-family:DejaVu Sans Mono">
<path
d="m 239.84053,313.69965 0,-5.20945 -1.94598,0 0,-0.697 4.68164,0 0,0.697 -1.95404,0 0,5.20945 -0.78162,0"
id="path2883"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m 243.39004,313.69965 0,-5.90645 1.17646,0 1.39805,4.18205 c 0.12892,0.38947 0.22293,0.6809 0.28202,0.87429 0.0671,-0.21488 0.1719,-0.53048 0.31426,-0.94681 l 1.41417,-4.10953 1.05155,0 0,5.90645 -0.75341,0 0,-4.94353 -1.71634,4.94353 -0.70506,0 -1.70828,-5.02814 0,5.02814 -0.75342,0"
id="path2885"
style="fill:#ffffff;fill-opacity:1" />
</g>
</g>
</g>
</svg>
parent=keycloak
styles=css/custom.css
<#import "template.ftl" as layout>
<@layout.registrationLayout displayRequiredFields=false displayMessage=!messagesPerField.existsError('totp','userLabel'); section>
<#if section = "header">
${msg("loginTotpTitle")}
<#elseif section = "form">
<div class="alert alert-warning">
<span class="${properties.kcFeedbackWarningIcon}"></span>
${kcSanitize(msg("totp-registration-warning"))?no_esc}
</div>
<ol id="kc-totp-settings">
<li>
<p>${msg("loginTotpStep1")}</p>
<ul id="kc-totp-supported-apps">
<div style="margin-bottom: 10px; float: left; width: 40%">
<h4>Android</h4>
<ul style="margin-top: -5px;">
<li><a target="_blank" rel="noopener noreferrer" href="https://getaegis.app/">Aegis</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://github.com/andOTP/andOTP">andOTP</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://github.com/helloworld1/FreeOTPPlus">FreeOTP+</a></li>
</ul>
</div>
<div style="margin-bottom: 10px; float: left; width: 60%">
<h4>iOS</h4>
<ul style="margin-top: -5px;">
<li><a target="_blank" rel="noopener noreferrer" href="https://authy.com/">Authy</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://lastpass.com/auth/">LastPass Authenticator</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://cooperrs.de/otpauth.html ">OTP Auth</a></li>
</ul>
</div>
</ul>
</li>
<#if mode?? && mode = "manual">
<li>
<p>${msg("loginTotpManualStep2")}</p>
<p><span id="kc-totp-secret-key">${totp.totpSecretEncoded}</span></p>
<p><a href="${totp.qrUrl}" id="mode-barcode">${msg("loginTotpScanBarcode")}</a></p>
</li>
<li>
<p>${msg("loginTotpManualStep3")}</p>
<p>
<ul>
<li id="kc-totp-type">${msg("loginTotpType")}: ${msg("loginTotp." + totp.policy.type)}</li>
<li id="kc-totp-algorithm">${msg("loginTotpAlgorithm")}: ${totp.policy.getAlgorithmKey()}</li>
<li id="kc-totp-digits">${msg("loginTotpDigits")}: ${totp.policy.digits}</li>
<#if totp.policy.type = "totp">
<li id="kc-totp-period">${msg("loginTotpInterval")}: ${totp.policy.period}</li>
<#elseif totp.policy.type = "hotp">
<li id="kc-totp-counter">${msg("loginTotpCounter")}: ${totp.policy.initialCounter}</li>
</#if>
</ul>
</p>
</li>
<#else>
<li>
<p>${msg("loginTotpStep2")}</p>
<img id="kc-totp-secret-qr-code" src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"><br/>
<p><a href="${totp.manualUrl}" id="mode-manual">${msg("loginTotpUnableToScan")}</a></p>
</li>
</#if>
<li>
<p>${msg("loginTotpStep3")}</p>
<p>${msg("loginTotpStep3DeviceName")}</p>
</li>
</ol>
<form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-totp-settings-form" method="post">
<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcInputWrapperClass!}">
<label for="totp" class="control-label">${msg("authenticatorCode")}</label> <span class="required">*</span>
</div>
<div class="${properties.kcInputWrapperClass!}">
<input type="text" id="totp" name="totp" autocomplete="off" class="${properties.kcInputClass!}"
aria-invalid="<#if messagesPerField.existsError('totp')>true</#if>"
/>
<#if messagesPerField.existsError('totp')>
<span id="input-error-otp-code" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.get('totp'))?no_esc}
</span>
</#if>
</div>
<input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
<#if mode??><input type="hidden" id="mode" name="mode" value="${mode}"/></#if>
</div>
<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcInputWrapperClass!}">
<label for="userLabel" class="control-label">${msg("loginTotpDeviceName")}</label> <#if totp.otpCredentials?size gte 1><span class="required">*</span></#if>
</div>
<div class="${properties.kcInputWrapperClass!}">
<input type="text" class="${properties.kcInputClass!}" id="userLabel" name="userLabel" autocomplete="off"
aria-invalid="<#if messagesPerField.existsError('userLabel')>true</#if>"
/>
<#if messagesPerField.existsError('userLabel')>
<span id="input-error-otp-label" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.get('userLabel'))?no_esc}
</span>
</#if>
</div>
</div>
<#if isAppInitiatedAction??>
<input type="submit"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
id="saveTOTPBtn" value="${msg("doSubmit")}"
/>
<button type="submit"
class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} ${properties.kcButtonLargeClass!}"
id="cancelTOTPBtn" name="cancel-aia" value="true" />${msg("doCancel")}
</button>
<#else>
<input type="submit"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
id="saveTOTPBtn" value="${msg("doSubmit")}"
/>
</#if>
</form>
</#if>
</@layout.registrationLayout>
\ No newline at end of file
configureTotpMessage=<p>You need to set up a Mobile Authenticator to activate your account.</p>
termsText=By clicking on the "Accept" button below, you hereby accept and agree on behalf of yourself and, if you are being given access as a third party representative of an owner, on behalf of such owner, to be bound by the following terms and conditions:
totp-registration-warning=<p><strong>Warning</strong>: For security reasons, we may not be able to restore access to accounts with two-factor authentication enabled if you lose your two-factor authentication credentials. For this reason, it is highly recommended that you <strong>backup your credentials</strong>.</p>
webauthn-registration-warning=<p><strong>Warning</strong>: For security reasons, we may not be able to restore access to accounts with two-factor authentication enabled if you lose your two-factor authentication device. For this reason, it is highly recommended that you also set up a TOTP authenticator on top of your WebAuthn device (or a second WebAuthn device) in order to have an additional login method in place. This can be done from your account page.</p>
@import 'login.css';
.login-pf body {
background: url("../img/login-background.jpg") no-repeat center center fixed;
background-size: cover;
}
html.login-pf {
background: url("../img/login-background.jpg") no-repeat center center fixed;
background-size: cover;
}
div.kc-logo-text {
background-image: url('../img/archlinux-logo-light.svg');
background-size: 100%;
height: 100px;
}
@media(max-width: 767px) {
div.kc-logo-text {
background-size: 100%;
height: 60px;
width: 200px;
margin: 0 auto;
}
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.0"
width="600"
height="199.41692"
id="svg2424">
<defs
id="defs2426">
<linearGradient
x1="112.49854"
y1="6.1372099"
x2="112.49853"
y2="129.3468"
id="path1082_2_"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(287,-83)">
<stop
id="stop193"
style="stop-color:#ffffff;stop-opacity:0"
offset="0" />
<stop
id="stop195"
style="stop-color:#ffffff;stop-opacity:0.27450982"
offset="1" />
<midPointStop
offset="0"
style="stop-color:#FFFFFF"
id="midPointStop197" />
<midPointStop
offset="0.5"
style="stop-color:#FFFFFF"
id="midPointStop199" />
<midPointStop
offset="1"
style="stop-color:#000000"
id="midPointStop201" />
</linearGradient>
<linearGradient
x1="541.33502"
y1="104.50665"
x2="606.91248"
y2="303.14029"
id="linearGradient2544"
xlink:href="#path1082_2_"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-0.3937741,0,0,0.393752,357.51969,122.00151)" />
<linearGradient
id="linearGradient3388">
<stop
id="stop3390"
style="stop-color:#000000;stop-opacity:0"
offset="0" />
<stop
id="stop3392"
style="stop-color:#000000;stop-opacity:0.37113401"
offset="1" />
</linearGradient>
<linearGradient
x1="490.72305"
y1="237.72447"
x2="490.72305"
y2="183.9644"
id="linearGradient4416"
xlink:href="#linearGradient3388"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.749107,0,0,0.749107,-35.459862,91.44108)" />
</defs>
<g
transform="translate(-34.777313,-129.80241)"
id="layer1">
<g
transform="matrix(0.8746356,0,0,0.8746356,14.730518,23.408954)"
id="g2424">
<g
transform="matrix(0.6378586,0,0,0.6378586,36.486487,2.17139)"
id="g2809"
style="fill:#ffffff;fill-opacity:1">
<path
d="m 339.96875,309.09375 c -14.47141,-0.0239 -26.4812,2.94367 -31.125,4.5625 l -4.78125,25.8125 c -0.0116,0.0951 23.79543,-6.34855 34.28125,-5.96875 17.36158,0.62381 18.95948,6.63541 18.65625,14.75 0.29595,0.47462 -4.47933,-7.33192 -19.5,-7.59375 -18.94961,-0.32687 -45.69284,6.70947 -45.65625,35.3125 -0.51086,32.17412 24.03361,41.63882 40.75,41.8125 15.02821,-0.27364 22.0777,-5.69136 25.9375,-8.59375 5.07124,-5.30236 10.87308,-10.63447 16.40625,-17.03125 -5.23567,9.51278 -9.77472,16.0898 -14.5,21.125 l 0,4.25 22.84375,-3.84375 0.15625,-62.09375 c -0.23141,-8.78839 5.04123,-42.41827 -43.46875,-42.5 z m -3.28125,54.0625 c 9.46889,0.12995 20.32788,4.79708 20.34375,16.03125 0.049,10.21821 -12.80005,15.71183 -21.15625,15.625 -8.35976,-0.0868 -19.45093,-6.56982 -19.5,-16.53125 0.16016,-8.90444 10.45953,-15.35418 20.3125,-15.125 z"
id="path2284"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 398.50106,314.83145 -0.15505,102.82693 26.61213,-5.12724 0.0449,-58.30157 c 0.006,-8.68089 12.40554,-18.82451 27.9627,-18.66287 3.30202,-5.97408 9.5087,-21.24219 11.02088,-24.71514 -34.75649,-0.0833 -35.19897,9.98993 -41.24398,14.94517 -0.0631,-9.45285 -0.0213,-15.12741 -0.0213,-15.12741 l -24.2202,4.16213 z"
id="path2286"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 548.2688,328.33058 c -0.25696,-0.12068 -13.87938,-15.93419 -41.26638,-16.0589 -25.65249,-0.42638 -54.42578,9.51895 -54.88631,52.5328 0.22457,37.81852 27.6402,52.59809 55.0314,52.88627 29.31292,0.30451 40.97654,-18.32947 41.67615,-18.79124 -3.49762,-3.0321 -16.59792,-16.0131 -16.59792,-16.0131 0,0 -8.18236,11.65102 -24.05802,11.79913 -15.87942,0.1512 -29.68245,-12.27325 -29.87805,-29.60905 -0.20349,-17.33595 12.68881,-26.72821 29.99725,-27.48687 14.98466,-0.003 23.6297,9.67334 23.6297,9.67334 l 16.35218,-18.93238 z"
id="path2288"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 581.8125,278.84375 -25.125,5.90625 0.1875,133.9375 24.75,-4.46875 0.28125,-63.03125 c 0.0529,-6.60927 9.56127,-16.75916 25.4375,-16.4375 15.17973,0.15775 18.57236,10.11767 18.53125,11.375 l 0.4375,72.96875 24.40625,-4.3125 0.0937,-77.375 c 0.1607,-7.44539 -16.30833,-23.16954 -42.78125,-23.28125 -12.58087,0.0202 -19.54815,2.86825 -23.09375,4.96875 -6.06656,4.68565 -12.9998,9.17543 -19.8125,14.90625 6.29809,-8.09099 11.58551,-13.68516 16.75,-17.84375 l -0.0625,-37.3125 z"
id="path2290"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
</g>
<g
transform="matrix(0.9443373,0,0.01336345,0.9443373,78.345657,-412.48879)"
id="g5326"
style="fill:#1793d1;fill-opacity:1;stroke:none">
<path
d="m 400.67581,629.79609 7.68167,-1.91575 -0.92851,91.20792 -7.79574,1.32426 1.04258,-90.61643 z"
id="path2292"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 421.10266,657.01757 6.75064,-2.9867 -0.86808,65.39931 -6.49779,1.33915 0.61523,-63.75176 z m -1.26059,-23.58316 5.47167,-4.41533 4.42261,4.99952 -5.47558,4.53221 -4.4187,-5.1164 z"
id="path2294"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 440.44273,655.82614 7.67755,-1.56201 -0.1573,13.6722 c -0.007,0.58717 4.4194,-15.27364 24.68502,-14.92094 19.67986,0.10952 22.68401,15.34634 22.5291,18.76237 l -0.43759,48.0783 -6.73044,1.45631 0.63316,-47.489 c 0.0974,-1.38684 -2.88144,-13.11441 -16.78906,-13.15754 -13.90509,-0.0404 -23.68364,10.10048 -23.75821,16.57937 l -0.48127,41.83477 -7.80388,2.0313 0.63292,-65.28513 z"
id="path2296"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 561.53301,720.20203 -7.6776,1.56186 0.15737,-13.67198 c 0.007,-0.58742 -4.42201,15.27361 -24.68504,14.92086 -19.67983,-0.10944 -22.68399,-15.34626 -22.52908,-18.76229 l 0.43757,-48.07861 8.15674,-1.64226 -0.54644,47.48988 c -0.0149,1.29682 1.36845,13.29979 15.27604,13.3426 13.90511,0.0405 23.76622,-8.37359 24.01453,-21.04416 l 0.43105,-37.46902 7.5978,-1.93195 -0.63294,65.28507 z"
id="path2298"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
d="m 577.45461,655.28678 -5.42715,4.20017 20.19894,26.93328 -22.39092,31.11622 5.63499,4.226 21.04365,-28.8967 20.8779,29.58159 5.32727,-4.20103 -22.37578,-31.62866 18.56963,-25.5775 -5.53193,-4.73429 -16.92109,23.66778 -19.00551,-24.68686 z"
id="path2300"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
</g>
<path
d="m 105.8125,16.625 c -7.39687,18.135158 -11.858304,29.997682 -20.09375,47.59375 5.04936,5.35232 11.247211,11.585364 21.3125,18.625 C 96.210077,78.390904 88.828713,73.920352 83.3125,69.28125 72.7727,91.274163 56.259864,122.60209 22.75,182.8125 49.087628,167.60733 69.504089,158.23318 88.53125,154.65625 87.714216,151.1422 87.2497,147.34107 87.28125,143.375 l 0.03125,-0.84375 c 0.417917,-16.87382 9.195665,-29.84979 19.59375,-28.96875 10.39809,0.88104 18.48041,15.28242 18.0625,32.15625 -0.0786,3.17512 -0.43674,6.22955 -1.0625,9.0625 18.82058,3.68164 39.01873,13.03179 65,28.03125 -5.123,-9.4318 -9.69572,-17.93388 -14.0625,-26.03125 -6.87839,-5.33121 -14.05289,-12.2698 -28.6875,-19.78125 10.05899,2.61375 17.2611,5.62932 22.875,9 C 124.63297,63.338161 121.03766,52.354109 105.8125,16.625 z"
transform="matrix(1.1433333,0,0,1.1433333,22.920168,121.64318)"
id="path2518"
style="fill:#1793d1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<g
id="text2634"
style="font-size:8.44138241px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;font-family:DejaVu Sans Mono">
<path
d="m 685.46692,263.83624 0,-5.32944 -1.99082,0 0,-0.71307 4.7895,0 0,0.71307 -1.99906,0 0,5.32944 -0.79962,0"
id="path3660"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m 689.0982,263.83624 0,-6.04251 1.20355,0 1.43026,4.2784 c 0.13189,0.39843 0.22806,0.69658 0.28852,0.89442 0.0687,-0.21983 0.17586,-0.5427 0.3215,-0.96862 l 1.44674,-4.2042 1.07578,0 0,6.04251 -0.77077,0 0,-5.05741 -1.75587,5.05741 -0.72131,0 -1.74763,-5.14396 0,5.14396 -0.77077,0"
id="path3662"
style="fill:#ffffff;fill-opacity:1" />
</g>
<g
id="text2638"
style="font-size:8.25130367px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;font-family:DejaVu Sans Mono">
<path
d="m 239.84053,313.69965 0,-5.20945 -1.94598,0 0,-0.697 4.68164,0 0,0.697 -1.95404,0 0,5.20945 -0.78162,0"
id="path2883"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m 243.39004,313.69965 0,-5.90645 1.17646,0 1.39805,4.18205 c 0.12892,0.38947 0.22293,0.6809 0.28202,0.87429 0.0671,-0.21488 0.1719,-0.53048 0.31426,-0.94681 l 1.41417,-4.10953 1.05155,0 0,5.90645 -0.75341,0 0,-4.94353 -1.71634,4.94353 -0.70506,0 -1.70828,-5.02814 0,5.02814 -0.75342,0"
id="path2885"
style="fill:#ffffff;fill-opacity:1" />
</g>
</g>
</g>
</svg>
roles/keycloak/files/theme/archlinux/login/resources/img/login-background.jpg

544 KiB

<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=false; section>
<#if section = "header">
${msg("termsTitle")}
<#elseif section = "form">
<div id="kc-terms-text">
${kcSanitize(msg("termsText"))?no_esc}
<ul style="margin-top: 10px;">
<li><a target="_blank" rel="noopener noreferrer" href="https://terms.archlinux.org/docs/code-of-conduct/">Code of Conduct</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://terms.archlinux.org/docs/terms-of-service/">Terms of Service</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://terms.archlinux.org/docs/privacy-policy/">Privacy Policy</a></li>
</ul>
</div>
<form class="form-actions" action="${url.loginAction}" method="POST">
<input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="accept" id="kc-accept" type="submit" value="${msg("doAccept")}"/>
<input class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="cancel" id="kc-decline" type="submit" value="${msg("doDecline")}"/>
</form>
<div class="clearfix"></div>
</#if>
</@layout.registrationLayout>
parent=keycloak
styles=css/custom.css
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment