Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add keycloak aiod theme initial commit #339

Merged
merged 5 commits into from
Jul 29, 2024
Merged

Add keycloak aiod theme initial commit #339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0cc60a3
Add keycloak aiod theme initial commit
mrorro Jun 27, 2024
f7b0b69
Add AIoD theme to identity providers
mrorro Jun 28, 2024
ca0deec
Add EGI Check-in button
mrorro Jul 3, 2024
5f6e8e3
Add login template
mrorro Jul 8, 2024
7960ea8
Add error check
mrorro Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .env
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ KEYCLOAK_CLIENT_SECRET="QJiOGn09eCEfnqAmcPP2l4vMU8grlmVQ"
REDIRECT_URIS=http://${HOSTNAME}/docs/oauth2-redirect
POST_LOGOUT_REDIRECT_URIS=http://${HOSTNAME}/aiod-auth/realms/aiod/protocol/openid-connect/logout

EGICHECKINALIAS=

#ELASTICSEARCH
ES_USER=elastic
ES_PASSWORD=changeme
Expand All @@ -23,4 +25,4 @@ LS_JAVA_OPTS="-Xmx256m -Xms256m"

#DATA STORAGE
DATA_PATH=./data
BACKUP_PATH=./data/backups
BACKUP_PATH=./data/backups
1 change: 1 addition & 0 deletions data/keycloak/import/realm-export.json → data/keycloak/data/import/realm-export.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1527,6 +1527,7 @@
"strictTransportSecurity": "max-age=31536000; includeSubDomains"
},
"smtpServer": {},
"loginTheme" : "aiod",
"eventsEnabled": false,
"eventsListeners": [
"jboss-logging"
Expand Down
123 changes: 123 additions & 0 deletions data/keycloak/themes/aiod/login/login.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
<#if section = "header">
${msg("loginAccountTitle")}
<#elseif section = "form">
<div id="kc-form">
<hr>
<#if social.providers??>
<h2 id="kc-form-toggle" class="kc-form-toggle">${msg("identity-provider-login-label")} </h2>
<div id="kc-form-wrapper" class="kc-form-wrapper">
<#else>
<div id="kc-form-wrapper">
</#if>
<#if realm.password>
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<#if !usernameHidden??>
<div class="${properties.kcFormGroupClass!}">
<label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>

<input tabindex="2" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="username"
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
/>

<#if messagesPerField.existsError('username','password')>
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</span>
</#if>

</div>
</#if>

<div class="${properties.kcFormGroupClass!}">
<label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>

<div class="${properties.kcInputGroup!}">
<input tabindex="3" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="current-password"
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
/>
<button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg("showPassword")}"
aria-controls="password" data-password-toggle tabindex="4"
data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
<i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
</button>
</div>

<#if usernameHidden?? && messagesPerField.existsError('username','password')>
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</span>
</#if>

</div>

<div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
<div id="kc-form-options">
<#if realm.rememberMe && !usernameHidden??>
<div class="checkbox">
<label>
<#if login.rememberMe??>
<input tabindex="5" id="rememberMe" name="rememberMe" type="checkbox" checked> ${msg("rememberMe")}
<#else>
<input tabindex="5" id="rememberMe" name="rememberMe" type="checkbox"> ${msg("rememberMe")}
</#if>
</label>
</div>
</#if>
</div>
<div class="${properties.kcFormOptionsWrapperClass!}">
<#if realm.resetPasswordAllowed>
<span><a tabindex="6" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
</#if>
</div>

</div>

<div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
<input tabindex="7" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
</div>
</form>
</#if>
</div>
</div>
<script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
<#elseif section = "info" >
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
<div id="kc-registration-container">
<div id="kc-registration">
<span>${msg("noAccount")} <a tabindex="8"
href="${url.registrationUrl}">${msg("doRegister")}</a></span>
</div>
</div>
</#if>
<#elseif section = "socialProviders" >
<#if realm.password && social?? && social.providers?has_content>
<div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
<#list social.providers as p>
<li>
<#if p.alias = "${properties.egi_checkin_alias}" >
<a id="social-egicheckin" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
type="button" href="${p.loginUrl}">
<#else>
<a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
type="button" href="${p.loginUrl}">
</#if>
<#if p.iconClasses?has_content>
<i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
<span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
<#else>
<span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
</#if>
</a>
</li>
</#list>
</ul>
</div>
</#if>
</#if>

</@layout.registrationLayout>
1 change: 1 addition & 0 deletions data/keycloak/themes/aiod/login/messages/messages_en.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
identity-provider-login-label=Or sign in with your local account
80 changes: 80 additions & 0 deletions data/keycloak/themes/aiod/login/resources/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
body {
color: white;
}

login-pf {
background: none;
}

.form-group {
font-size: small;
}

.btn-group-lg {
font-size: small;
}

.login-pf body {
background: #000613 none;
}

#kc-header-wrapper {
font-size: 0px;
padding: 124px 10px 20px;
background: url("../img/logo.svg") no-repeat center;
background-size: contain;
}

.card-pf {
background: transparent;
}

.kc-form-toggle {
color: white;
text-align: center;
}

.kc-form-toggle::after {
content: '▶︎';
display: inline-block;
transform: rotate(0deg);
transition: transform 0.3s ease;
}

.kc-form-toggle.up::after {
transform: rotate(90deg);
}

.kc-form-wrapper {
display: none;
}

h1#kc-page-title {
color: white;
}

#social-egicheckin {
display: inline-block;
width: auto;
padding: 20px 30px 20px 80px;
border: 2px solid #005faa;
border-radius: 100vw;
background-color: #005faa;
background-image: url(../img/egi-logo-white.svg);
background-position: 30px 43%;
background-size: 36px;
background-repeat: no-repeat;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
font-family: 'DM Sans', sans-serif;
color: #fff;
font-size: 18px;
font-weight: 700;
--pf-c-button--after--BorderColor: transparent;
}

#social-egicheckin:hover {
background-color: #fff;
background-image: url(../img/egi-logo-color.svg);
color: #005faa;
}
Loading
Loading