chore: update finallycoffee theme for keycloak 25+
This commit is contained in:
parent
c84b445972
commit
41898be21f
GPG Key ID:
03624C433676E465
237
finallycoffee/welcome/index.ftl
Executable file → Normal file
237
finallycoffee/welcome/index.ftl
Executable file → Normal file
@ -1,135 +1,124 @@
|
||||
<!--
|
||||
~ JBoss, Home of Professional Open Source.
|
||||
~ Copyright (c) 2011, Red Hat, Inc., and individual contributors
|
||||
~ as indicated by the @author tags. See the copyright.txt file in the
|
||||
~ distribution for a full listing of individual contributors.
|
||||
~
|
||||
~ This is free software; you can redistribute it and/or modify it
|
||||
~ under the terms of the GNU Lesser General Public License as
|
||||
~ published by the Free Software Foundation; either version 2.1 of
|
||||
~ the License, or (at your option) any later version.
|
||||
~
|
||||
~ This software is distributed in the hope that it will be useful,
|
||||
~ but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||
~ Lesser General Public License for more details.
|
||||
~
|
||||
~ You should have received a copy of the GNU Lesser General Public
|
||||
~ License along with this software; if not, write to the Free
|
||||
~ Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
|
||||
~ 02110-1301 USA, or see the FSF site: http://www.fsf.org.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Welcome to ${productName}</title>
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
<link rel="shortcut icon" href="${resourcesPath}/img/favicon.ico" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Welcome to ${productName}</title>
|
||||
<link rel="shortcut icon" href="${resourcesCommonPath}/img/favicon.ico">
|
||||
<#if properties.stylesCommon?has_content>
|
||||
<#list properties.stylesCommon?split(' ') as style>
|
||||
<link href="${resourcesCommonPath}/${style}" rel="stylesheet" />
|
||||
</#list>
|
||||
<#list properties.stylesCommon?split(' ') as style>
|
||||
<link rel="stylesheet" href="${resourcesCommonPath}/${style}">
|
||||
</#list>
|
||||
</#if>
|
||||
<#if properties.styles?has_content>
|
||||
<#list properties.styles?split(' ') as style>
|
||||
<link href="${resourcesPath}/${style}" rel="stylesheet" />
|
||||
</#list>
|
||||
<#list properties.styles?split(' ') as style>
|
||||
<link rel="stylesheet" href="${resourcesPath}/${style}">
|
||||
</#list>
|
||||
</#if>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
|
||||
<div class="welcome-header">
|
||||
<img src="${resourcesPath}/logo.png" alt="${productName}" border="0" />
|
||||
<h1>Welcome to <strong>${productName}</strong></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<#if adminConsoleEnabled>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<div class="card-pf h-l">
|
||||
<#if successMessage?has_content>
|
||||
<p class="alert success">${successMessage}</p>
|
||||
<#elseif errorMessage?has_content>
|
||||
<p class="alert error">${errorMessage}</p>
|
||||
<h3><img src="welcome-content/user.png">Administration Console</h3>
|
||||
<#elseif bootstrap>
|
||||
<#if localUser>
|
||||
<h3><img src="welcome-content/user.png">Administration Console</h3>
|
||||
<p>Please create an initial admin user to get started.</p>
|
||||
<#else>
|
||||
<p class="welcome-message">
|
||||
<img src="welcome-content/alert.png">You need local access to create the initial admin user. <br><br>Open <a href="${localAdminUrl}">${localAdminUrl}</a>
|
||||
<br>${adminUserCreationMessage}.
|
||||
</p>
|
||||
</#if>
|
||||
</#if>
|
||||
|
||||
<#if bootstrap && localUser>
|
||||
<form method="post" class="welcome-form">
|
||||
<p>
|
||||
<label for="username">Username</label>
|
||||
<input id="username" name="username" />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="password">Password</label>
|
||||
<input id="password" name="password" type="password" />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="passwordConfirmation">Password confirmation</label>
|
||||
<input id="passwordConfirmation" name="passwordConfirmation" type="password" />
|
||||
</p>
|
||||
|
||||
<input id="stateChecker" name="stateChecker" type="hidden" value="${stateChecker}" />
|
||||
|
||||
<button id="create-button" type="submit" class="btn btn-primary">Create</button>
|
||||
</form>
|
||||
</#if>
|
||||
|
||||
<div class="welcome-primary-link">
|
||||
<h3><a href="${adminUrl}"><img src="welcome-content/user.png">Administration Console <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
|
||||
<div class="description">
|
||||
Centrally manage all aspects of the ${productName} server
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<div class="pf-v5-c-background-image" style="--pf-v5-c-background-image--BackgroundImage: url(${baseUrl}${resourcesPath}/background.svg)"></div>
|
||||
<div class="pf-v5-c-login">
|
||||
<div class="pf-v5-c-login__container">
|
||||
<header class="pf-v5-c-login__header">
|
||||
<div class="pf-v5-c-brand">
|
||||
<img src="${resourcesPath}/logo.svg" alt="${productName} Logo" class="kc-brand">
|
||||
</div>
|
||||
</header>
|
||||
<#if adminConsoleEnabled && (bootstrap || successMessage?has_content)>
|
||||
<main class="pf-v5-c-login__main">
|
||||
<header class="pf-v5-c-login__main-header">
|
||||
<#if localUser>
|
||||
<h1 class="pf-v5-c-title pf-m-2xl">Create a temporary administrative user</h1>
|
||||
<#if !successMessage?has_content>
|
||||
<p class="pf-v5-c-login__main-header-desc">To get started with ${productName}, you first create a temporary administrative user. Later, to harden security, create a new permanent administrative user and delete the temporary user that was created during this setup.</p>
|
||||
</#if>
|
||||
<#else>
|
||||
<h1 class="pf-v5-c-title pf-m-3xl">Local access required</h1>
|
||||
<p class="pf-v5-c-login__main-header-desc">You will need local access to create the temporary administrative user.</p>
|
||||
</#if>
|
||||
</header>
|
||||
<div class="pf-v5-c-login__main-body">
|
||||
<#if successMessage?has_content>
|
||||
<div class="pf-v5-c-alert pf-m-inline pf-m-success pf-v5-u-mb-xl">
|
||||
<div class="pf-v5-c-alert__icon">
|
||||
<svg class="pf-v5-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em">
|
||||
<path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="pf-v5-c-alert__title">
|
||||
<span class="pf-v5-screen-reader">Success alert:</span>${successMessage}
|
||||
</h4>
|
||||
</div>
|
||||
<a class="pf-v5-c-button pf-m-primary pf-m-block" href="${adminUrl}">Open Administration Console</a>
|
||||
</#if>
|
||||
<#if bootstrap>
|
||||
<#if localUser>
|
||||
<form class="pf-v5-c-form" method="post" novalidate>
|
||||
<#if errorMessage?has_content>
|
||||
<div class="pf-v5-c-form__alert">
|
||||
<div class="pf-v5-c-alert pf-m-inline pf-m-danger">
|
||||
<div class="pf-v5-c-alert__icon">
|
||||
<svg class="pf-v5-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em">
|
||||
<path d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="pf-v5-c-alert__title">
|
||||
<span class="pf-v5-screen-reader">Danger alert:</span>${errorMessage}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
<div class="pf-v5-c-form__group">
|
||||
<div class="pf-v5-c-form__group-label">
|
||||
<label class="pf-v5-c-form__label" for="username">
|
||||
<span class="pf-v5-c-form__label-text">Username</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="pf-v5-c-form__group-control">
|
||||
<span class="pf-v5-c-form-control pf-m-required">
|
||||
<input id="username" type="text" name="username" autocomplete="username" required>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-v5-c-form__group">
|
||||
<div class="pf-v5-c-form__group-label">
|
||||
<label class="pf-v5-c-form__label" for="password">
|
||||
<span class="pf-v5-c-form__label-text">Password</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="pf-v5-c-form__group-control">
|
||||
<span class="pf-v5-c-form-control pf-m-required">
|
||||
<input id="password" type="password" name="password" autocomplete="new-password" required>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-v5-c-form__group">
|
||||
<div class="pf-v5-c-form__group-label">
|
||||
<label class="pf-v5-c-form__label" for="password-confirmation">
|
||||
<span class="pf-v5-c-form__label-text">Password confirmation</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="pf-v5-c-form__group-control">
|
||||
<span class="pf-v5-c-form-control pf-m-required">
|
||||
<input id="password-confirmation" type="password" name="passwordConfirmation" autocomplete="new-password" required>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<input name="stateChecker" type="hidden" value="${stateChecker}">
|
||||
<div class="pf-v5-c-form__group pf-m-action">
|
||||
<button class="pf-v5-c-button pf-m-primary pf-m-block" type="submit">Create user</button>
|
||||
</div>
|
||||
</form>
|
||||
<#else>
|
||||
<p>To create the temporary administrative user open <a href="${localAdminUrl}">${localAdminUrl}</a>, or set the environment variables <code>KC_BOOTSTRAP_ADMIN_USERNAME</code> and <code>KC_BOOTSTRAP_ADMIN_PASSWORD</code> when starting the server.</p>
|
||||
</#if>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</#if> <#-- adminConsoleEnabled -->
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<div class="card-pf h-l">
|
||||
<h3><a href="${properties.documentationUrl}"><img class="doc-img" src="welcome-content/admin-console.png">Documentation <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
|
||||
<div class="description">
|
||||
|
||||
User Guide, Admin REST API and Javadocs
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<#if properties.displayCommunityLinks = "true">
|
||||
<div class="card-pf h-m">
|
||||
<h3><a href="http://www.keycloak.org"><img src="welcome-content/keycloak-project.png">Keycloak Project <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
|
||||
</div>
|
||||
<div class="card-pf h-m">
|
||||
<h3><a href="https://groups.google.com/forum/#!forum/keycloak-user"><img src="welcome-content/mail.png">Mailing List <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
|
||||
</div>
|
||||
<div class="card-pf h-m">
|
||||
<h3><a href="https://github.com/keycloak/keycloak/issues"><img src="welcome-content/bug.png">Report an issue <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
|
||||
</div>
|
||||
</main>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -3,147 +3,22 @@ body {
|
||||
background-size: cover;
|
||||
color: #ccc;
|
||||
}
|
||||
.welcome-header {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 60px;
|
||||
margin-left: -10px;
|
||||
color: #ddd;
|
||||
}
|
||||
.welcome-header img {
|
||||
width: 150px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.welcome-header h1 {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
.welcome-header h1 strong {
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
.welcome-message {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.h-l {
|
||||
min-height: 370px;
|
||||
padding: 10px 20px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.h-l h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.h-m {
|
||||
height: 110px;
|
||||
padding-top: 23px;
|
||||
}
|
||||
.card-pf img {
|
||||
width: 22px;
|
||||
margin-right: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
img.doc-img {
|
||||
width: auto;
|
||||
height: 22px;
|
||||
}
|
||||
.link {
|
||||
font-size: 16px;
|
||||
vertical-align: baseline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 550;
|
||||
}
|
||||
h3 a:link,
|
||||
h3 a:visited {
|
||||
color: #ddd;
|
||||
font-weight: 550;
|
||||
}
|
||||
h3 a:hover,
|
||||
h3 a:hover .link {
|
||||
text-decoration: none;
|
||||
color: #00659c;
|
||||
}
|
||||
.h-l h3 a img {
|
||||
height: 30px;
|
||||
width: auto;
|
||||
|
||||
.pf-v5-c-background-image {
|
||||
/* Change background size so that the image covers the entire background. */
|
||||
--pf-v5-c-background-image--BackgroundSize: cover;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 30px;
|
||||
.pf-v5-c-login__container {
|
||||
/* Change the grid layout so that the header is always above the main area. */
|
||||
grid-template-areas: "header" "main";
|
||||
--pf-v5-c-login__container--xl--GridTemplateColumns: minmax(auto, 34rem);
|
||||
}
|
||||
|
||||
.card-pf {
|
||||
border-top: 1px solid rgba(3, 3, 3, 0.1);
|
||||
box-shadow: 0 1px 1px rgba(3, 3, 3, 0.275);
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.welcome-form label,
|
||||
.welcome-form input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.welcome-form label {
|
||||
color: #828486;
|
||||
font-weight: normal;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.welcome-form input {
|
||||
border: 0;
|
||||
border-bottom: solid 1px #cbcbcb;
|
||||
}
|
||||
.welcome-form input:focus {
|
||||
border-bottom: solid 1px #5e99c6;
|
||||
outline-width: 0;
|
||||
}
|
||||
.welcome-form button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.error {
|
||||
color: #c00;
|
||||
border-color: #c00;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.success {
|
||||
color: #3f9c35;
|
||||
border-color: #3f9c35;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.welcome-form + .welcome-primary-link,
|
||||
.welcome-message + .welcome-primary-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
float: right;
|
||||
width: 150px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.welcome-header {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.welcome-header img {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.h-l,
|
||||
.h-m {
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.h-l img {
|
||||
display: inline;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
.description {
|
||||
display: none;
|
||||
}
|
||||
.footer img {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.kc-brand {
|
||||
height: 63px;
|
||||
width: 300px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
styles=css/welcome.css
|
||||
import=common/keycloak
|
||||
|
||||
stylesCommon=node_modules/patternfly/dist/css/patternfly.css node_modules/patternfly/dist/css/patternfly-additions.css
|
||||
stylesCommon=vendor/patternfly-v5/patternfly.min.css vendor/patternfly-v5/patternfly-addons.css
|
||||
|
||||
productName=id.finally.coffee
|
||||
documentationUrl=https://www.keycloak.org/documentation.html
|
||||
|
||||
Loading…
Reference in New Issue
Block a user