Revised d4science base theme
This commit is contained in:
vcestone
parent
63625522cc
commit
ab747b5689
|
|
@ -0,0 +1,86 @@
|
|||
<#import "template.ftl" as layout>
|
||||
<@layout.registrationLayout; section>
|
||||
<#if section = "header">
|
||||
${msg("registerTitle")}
|
||||
<#elseif section = "form">
|
||||
<form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post">
|
||||
<div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('firstName',properties.kcFormGroupErrorClass!)}">
|
||||
<div class="${properties.kcLabelWrapperClass!}">
|
||||
<label for="firstName" class="${properties.kcLabelClass!}">${msg("firstName")}</label>
|
||||
</div>
|
||||
<div class="${properties.kcInputWrapperClass!}">
|
||||
<input type="text" id="firstName" class="${properties.kcInputClass!}" name="firstName" value="${(register.formData.firstName!'')}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('lastName',properties.kcFormGroupErrorClass!)}">
|
||||
<div class="${properties.kcLabelWrapperClass!}">
|
||||
<label for="lastName" class="${properties.kcLabelClass!}">${msg("lastName")}</label>
|
||||
</div>
|
||||
<div class="${properties.kcInputWrapperClass!}">
|
||||
<input type="text" id="lastName" class="${properties.kcInputClass!}" name="lastName" value="${(register.formData.lastName!'')}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('email',properties.kcFormGroupErrorClass!)}">
|
||||
<div class="${properties.kcLabelWrapperClass!}">
|
||||
<label for="email" class="${properties.kcLabelClass!}">${msg("email")}</label>
|
||||
</div>
|
||||
<div class="${properties.kcInputWrapperClass!}">
|
||||
<input type="text" id="email" class="${properties.kcInputClass!}" name="email" value="${(register.formData.email!'')}" autocomplete="email" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<#if !realm.registrationEmailAsUsername>
|
||||
<div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('username',properties.kcFormGroupErrorClass!)}">
|
||||
<div class="${properties.kcLabelWrapperClass!}">
|
||||
<label for="username" class="${properties.kcLabelClass!}">${msg("username")}</label>
|
||||
</div>
|
||||
<div class="${properties.kcInputWrapperClass!}">
|
||||
<input type="text" id="username" class="${properties.kcInputClass!}" name="username" value="${(register.formData.username!'')}" pattern="^(?!postfix$)(?!cyrus$)[^\s/\-\\]+$" autocomplete="username" />
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
<#if passwordRequired??>
|
||||
<div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('password',properties.kcFormGroupErrorClass!)}">
|
||||
<div class="${properties.kcLabelWrapperClass!}">
|
||||
<label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
|
||||
</div>
|
||||
<div class="${properties.kcInputWrapperClass!}">
|
||||
<input type="password" id="password" class="${properties.kcInputClass!}" name="password" autocomplete="new-password"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('password-confirm',properties.kcFormGroupErrorClass!)}">
|
||||
<div class="${properties.kcLabelWrapperClass!}">
|
||||
<label for="password-confirm" class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label>
|
||||
</div>
|
||||
<div class="${properties.kcInputWrapperClass!}">
|
||||
<input type="password" id="password-confirm" class="${properties.kcInputClass!}" name="password-confirm" />
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
<#if recaptchaRequired??>
|
||||
<div class="form-group">
|
||||
<div class="${properties.kcInputWrapperClass!}">
|
||||
<div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
|
||||
<div class="${properties.kcFormOptionsWrapperClass!}">
|
||||
<span><a href="${url.loginUrl}">${kcSanitize(msg("backToLogin"))?no_esc}</a></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
|
||||
<input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</#if>
|
||||
</@layout.registrationLayout>
|
||||
|
|
@ -1,54 +1,546 @@
|
|||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
header {
|
||||
color: #444;
|
||||
background: url("https://www.d4science.org/biznizz-theme/css/../images/custom/content-bg.png") no-repeat;
|
||||
background-position: top -70px right -180px;
|
||||
}
|
||||
header a {
|
||||
color: #444;
|
||||
}
|
||||
header a:hover {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
header .navbar {
|
||||
padding: 0 1rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
header .navbar li.active {
|
||||
padding: 0 1em;
|
||||
}
|
||||
#content {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
#kc-form-options {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.alert-error {
|
||||
border-color: #dd0000;
|
||||
color: #773333;
|
||||
}
|
||||
.login-pf-social-link {
|
||||
padding: 0.5em 4.5em;
|
||||
}
|
||||
a.zocial {
|
||||
display: block;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.zocial.google {
|
||||
background-color: #dd4b39;
|
||||
}
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.footer a {
|
||||
color: #fff;
|
||||
.login-pf body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#content {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: #ffffff;
|
||||
border-color: #cc0000;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
#kc-locale ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
list-style: none;
|
||||
right: 0;
|
||||
top: 20px;
|
||||
min-width: 100px;
|
||||
padding: 2px 0;
|
||||
border: solid 1px #bbb;
|
||||
}
|
||||
|
||||
#kc-locale:hover ul {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#kc-locale ul li a {
|
||||
display: block;
|
||||
padding: 5px 14px;
|
||||
color: #000 !important;
|
||||
text-decoration: none;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#kc-locale ul li a:hover {
|
||||
color: #4d5258;
|
||||
background-color: #d4edfa;
|
||||
}
|
||||
|
||||
#kc-locale-dropdown a {
|
||||
color: #4d5258;
|
||||
background: 0 0;
|
||||
padding: 0 15px 0 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#kc-locale-dropdown a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a#kc-current-locale-link {
|
||||
display: block;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
/* a#kc-current-locale-link:hover {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
} */
|
||||
|
||||
a#kc-current-locale-link::after {
|
||||
content: "\2c5";
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.login-pf .container {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.login-pf a:hover {
|
||||
color: #0099d3;
|
||||
}
|
||||
|
||||
#kc-logo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#kc-logo-wrapper {
|
||||
background-image: url(../img/keycloak-logo-2.png);
|
||||
background-repeat: no-repeat;
|
||||
height: 63px;
|
||||
width: 300px;
|
||||
margin: 62px auto 0;
|
||||
}
|
||||
|
||||
div.kc-logo-text {
|
||||
background-image: url(../img/keycloak-logo-text.png);
|
||||
background-repeat: no-repeat;
|
||||
height: 63px;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div.kc-logo-text span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#kc-header {
|
||||
color: #ededed;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#kc-header-wrapper {
|
||||
font-size: 29px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
line-height: 1.2em;
|
||||
padding: 62px 10px 20px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#kc-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#kc-attempted-username{
|
||||
font-size: 20px;
|
||||
font-family:inherit;
|
||||
font-weight: normal;
|
||||
padding-right:10px;
|
||||
}
|
||||
|
||||
#kc-username{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#kc-webauthn-settings-form{
|
||||
padding-top:8px;
|
||||
}
|
||||
|
||||
/* #kc-content-wrapper {
|
||||
overflow-y: hidden;
|
||||
} */
|
||||
|
||||
/* #kc-info {
|
||||
padding-bottom: 200px;
|
||||
margin-bottom: -200px;
|
||||
} */
|
||||
|
||||
#kc-info-wrapper {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#kc-form-options span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#kc-form-options .checkbox {
|
||||
margin-top: 0;
|
||||
color: #72767b;
|
||||
}
|
||||
|
||||
#kc-terms-text {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#kc-registration {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* TOTP */
|
||||
|
||||
.subtitle {
|
||||
text-align: right;
|
||||
margin-top: 30px;
|
||||
color: #909090;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #CB2915;
|
||||
}
|
||||
|
||||
ol#kc-totp-settings {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ul#kc-totp-supported-apps {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#kc-totp-secret-qr-code {
|
||||
max-width:150px;
|
||||
max-height:150px;
|
||||
}
|
||||
|
||||
#kc-totp-secret-key {
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* OAuth */
|
||||
|
||||
#kc-oauth h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#kc-oauth ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#kc-oauth ul li {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 12px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
#kc-oauth ul li:first-of-type {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
#kc-oauth .kc-role {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
#kc-code textarea {
|
||||
width: 100%;
|
||||
height: 8em;
|
||||
}
|
||||
|
||||
/* Social */
|
||||
|
||||
#kc-social-providers ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#kc-social-providers li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#kc-social-providers li:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.kc-login-tooltip{
|
||||
position:relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.kc-login-tooltip .kc-tooltip-text{
|
||||
top:-3px;
|
||||
left:160%;
|
||||
background-color: black;
|
||||
visibility: hidden;
|
||||
color: #fff;
|
||||
|
||||
min-width:130px;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
box-shadow:0 1px 8px rgba(0,0,0,0.6);
|
||||
padding: 5px;
|
||||
|
||||
position: absolute;
|
||||
opacity:0;
|
||||
transition:opacity 0.5s;
|
||||
}
|
||||
|
||||
/* Show tooltip */
|
||||
.kc-login-tooltip:hover .kc-tooltip-text {
|
||||
visibility: visible;
|
||||
opacity:0.7;
|
||||
}
|
||||
|
||||
/* Arrow for tooltip */
|
||||
.kc-login-tooltip .kc-tooltip-text::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 100%;
|
||||
margin-top: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent black transparent transparent;
|
||||
}
|
||||
|
||||
.zocial,
|
||||
a.zocial {
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
text-shadow: none;
|
||||
border: 0;
|
||||
background: #f5f5f5;
|
||||
color: #72767b;
|
||||
border-radius: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
.zocial:before {
|
||||
border-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.zocial span:before {
|
||||
padding: 7px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.zocial:hover {
|
||||
background: #ededed !important;
|
||||
}
|
||||
|
||||
.zocial.facebook,
|
||||
.zocial.github,
|
||||
.zocial.google,
|
||||
.zocial.microsoft,
|
||||
.zocial.stackoverflow,
|
||||
.zocial.linkedin,
|
||||
.zocial.twitter {
|
||||
background-image: none;
|
||||
border: 0;
|
||||
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Copy of zocial windows classes to be used for microsoft's social provider button */
|
||||
.zocial.microsoft:before{ content: "\f15d"; }
|
||||
.zocial.stackoverflow:before{ color: inherit; }
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#kc-container-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-pf .container {
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
#kc-locale {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.login-pf body {
|
||||
background: white;
|
||||
}
|
||||
|
||||
#kc-header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
float: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#kc-header-wrapper {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 20px 60px 0 0;
|
||||
color: #72767b;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
div.kc-logo-text {
|
||||
margin: 0;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
#kc-form {
|
||||
float: none;
|
||||
}
|
||||
|
||||
#kc-info-wrapper {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
padding-left: 0px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#kc-social-providers li {
|
||||
display: block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.login-pf .container {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
#kc-locale {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
text-align: right;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#kc-logo-wrapper {
|
||||
background-size: 100px 21px;
|
||||
height: 21px;
|
||||
width: 100px;
|
||||
margin: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-height: 646px) {
|
||||
#kc-container-wrapper {
|
||||
bottom: 12%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 645px) {
|
||||
#kc-container-wrapper {
|
||||
padding-top: 50px;
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-pf form.form-actions .btn {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#kc-form-buttons {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-brand {
|
||||
margin-top: 20px;
|
||||
max-width: 360px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.card-pf {
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
max-width: 500px;
|
||||
border-top: 0;
|
||||
box-shadow: 0 0 0;
|
||||
}
|
||||
|
||||
.login-pf-page .card-pf{
|
||||
padding: 20px 20px 20px 20px;
|
||||
}
|
||||
|
||||
/*tablet*/
|
||||
@media (max-width: 840px) {
|
||||
.login-pf-page .card-pf{
|
||||
max-width: none;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
padding: 20px 20px 20px 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.login-pf-page .card-pf{
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
.card-pf.login-pf-accounts{
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-signup {
|
||||
font-size: 15px;
|
||||
color: #72767b;
|
||||
}
|
||||
#kc-content-wrapper .row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.login-pf-page .login-pf-social-section:first-of-type {
|
||||
padding-right: 39px;
|
||||
border-right: 1px solid #d1d1d1;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.login-pf-page .login-pf-social-section:last-of-type {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.login-pf-page .login-pf-social-section .login-pf-social-link:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-social-link {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.login-pf-page .login-pf-social-link a {
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.login-pf-page.login-pf-page-accounts {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.login-pf-page .btn-primary {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.login-pf-page .list-view-pf .list-group-item {
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.login-pf-page .list-view-pf-description {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-pf-page .card-pf{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#kc-form-login div.form-group:last-of-type,
|
||||
#kc-register-form div.form-group:last-of-type,
|
||||
#kc-update-profile-form div.form-group:last-of-type {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#kc-back {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
form#kc-select-back-form div.login-pf-social-section {
|
||||
padding-left: 0px;
|
||||
border-left: 0px;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 439 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 550 KiB |
|
|
@ -1,33 +1,54 @@
|
|||
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false displayWide=false showAnotherWayIfPresent=true>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" class="${properties.kcHtmlClass!}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="robots" content="noindex, nofollow"><!-- base -->
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
|
||||
<title>${properties.titleTag}</title>
|
||||
<link rel="icon" href="${properties.favicon}" />
|
||||
<#if properties.styles?has_content>
|
||||
<#list properties.styles?split(' ') as style>
|
||||
<link href="${url.resourcesPath}/${style}" rel="stylesheet" />
|
||||
</#list>
|
||||
</#if>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<#if properties.meta?has_content>
|
||||
<#list properties.meta?split(' ') as meta>
|
||||
<meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/>
|
||||
</#list>
|
||||
</#if>
|
||||
<title><#if properties.titleTag?has_content>${properties.titleTag}<#else>${msg("loginTitle",(realm.displayName!''))}</#if></title>
|
||||
<link rel="icon" href="<#if properties.favicon?has_content>${properties.favicon}<#else>${url.resourcesPath}/img/favicon.ico</#if>" />
|
||||
<#if properties.styles?has_content>
|
||||
<#list properties.styles?split(' ') as style>
|
||||
<link href="${url.resourcesPath}/${style}" rel="stylesheet" />
|
||||
</#list>
|
||||
</#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>
|
||||
</head>
|
||||
|
||||
<body style="${properties.bodyStyle!}">
|
||||
<header>
|
||||
<div class="container-fluid">
|
||||
<div class="row py-3">
|
||||
<div class="col">
|
||||
<body class="${properties.kcBodyClass!}">
|
||||
<div id="content" style="<#if properties.contentBgImg?has_content>background: url('${url.resourcesPath}/${properties.contentBgImg!}');</#if> ${properties.contentStyle!}">
|
||||
|
||||
<div class="${properties.kcLoginClass!}">
|
||||
<!--
|
||||
<div id="kc-header" class="${properties.kcHeaderClass!}">
|
||||
<div id="kc-header-wrapper" class="${properties.kcHeaderWrapperClass!}">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="${properties.kcFormCardClass!} <#if displayWide>${properties.kcFormCardAccountClass!}</#if>">
|
||||
|
||||
<div style="${properties.logoHeaderStyle!}">
|
||||
<div>
|
||||
<#if client??>
|
||||
<a href="<#if client.getBaseUrl()?has_content>${client.getBaseUrl()}<#else>${"https://" + client.getClientId()}</#if>">
|
||||
<#if properties.logoSrc?has_content>
|
||||
<img class="img-fluid float-left" alt="${properties.logoAlt}" src="${properties.logoSrc}" style="${properties.logoStyle}">
|
||||
<img class="img-fluid float-left" alt="${properties.logoAlt!}" src="${properties.logoSrc!}" style="${properties.logoStyle!}">
|
||||
<#else>
|
||||
<h1>${(client.getName()!client.getClientId()!"undefined client")?capitalize?keep_before('.')}</h1>
|
||||
</#if>
|
||||
|
|
@ -35,96 +56,139 @@
|
|||
</#if>
|
||||
</div>
|
||||
<#if properties.infrastructureLogo?has_content && properties.infrastructureLogo='yes'>
|
||||
<div class="col">
|
||||
<div>
|
||||
<a target="_blank" href="http://www.d4science.org">
|
||||
<img class="img-fluid float-right" alt="D4Science Infrastructure" src="https://sobigdata.d4science.org/sobigdata-site-theme/images/custom/PoweredByD4Science.png">
|
||||
<img class="img-fluid float-right" alt="D4Science Infrastructure" src="${url.resourcesPath}/img/PoweredByD4Science.png" style="${properties.infrastructureLogoStyle!}">
|
||||
</a>
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="navbar navbar-expand-lg navbar-light" style="${properties.navbarStyle}">
|
||||
<div>
|
||||
<#if properties.navbarActive?has_content>
|
||||
<style>li.active { ${properties.navbarActive} }</style>
|
||||
</#if>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">${msg("doLogIn")}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Realm data
|
||||
<div id="kc-header" class="${properties.kcHeaderClass!}">
|
||||
<div id="kc-header-wrapper" class="${properties.kcHeaderWrapperClass!}">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div id="content" style="${properties.contentStyle!}">
|
||||
<div class="container">
|
||||
|
||||
<div class="row pt-3 pb-2">
|
||||
<div class="col">
|
||||
<h3><#nested "header"></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<#-- 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="alert alert-${message.type}">
|
||||
<#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>
|
||||
<span class="kc-feedback-text">${kcSanitize(message.summary)?no_esc}</span>
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
<div class="row pb-5">
|
||||
<div class="col">
|
||||
<#nested "form">
|
||||
|
||||
<#if displayInfo>
|
||||
<div id="kc-info" class="${properties.kcSignUpClass!}">
|
||||
<div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
|
||||
<#nested "info">
|
||||
<header class="${properties.kcFormHeaderClass!}">
|
||||
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
|
||||
<div id="kc-locale">
|
||||
<div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
|
||||
<div class="kc-dropdown" id="kc-locale-dropdown">
|
||||
<a href="#" id="kc-current-locale-link">${locale.current}</a>
|
||||
<ul>
|
||||
<#list locale.supported as l>
|
||||
<li class="kc-dropdown-item"><a href="${l.url}">${l.label}</a></li>
|
||||
</#list>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer container-fluid" style="${properties.footerStyle}">
|
||||
<div class="row pb-3">
|
||||
<div class="col-12 pt-3">
|
||||
<a href="${properties.linkTerms}">Terms of Use</a> |
|
||||
<a href="${properties.linkCookies}">Cookies Policy</a> |
|
||||
<a href="${properties.linkPrivacy}" target="_blank">Privacy Policy</a> |
|
||||
<#if properties.linkProject?has_content><a href="${properties.linkProject}" target="_blank">${properties.descrProject}</a></#if>
|
||||
</div>
|
||||
<div class="col-12 text-right">
|
||||
<a href="http://ec.europa.eu/programmes/horizon2020/" target="_blank">
|
||||
<#if properties.ECLogoSrc?has_content>
|
||||
<img class="float-right" alt="${properties.ECLogoAlt}" src="${properties.ECLogoSrc}" style="${properties.ECLogoStyle}">
|
||||
<#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
|
||||
<#if displayRequiredFields>
|
||||
<div class="${properties.kcContentWrapperClass!}">
|
||||
<div class="${properties.kcLabelWrapperClass!} subtitle">
|
||||
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<h1 id="kc-page-title"><#nested "header"></h1>
|
||||
</div>
|
||||
</div>
|
||||
<#else>
|
||||
<h1 id="kc-page-title"><#nested "header"></h1>
|
||||
</#if>
|
||||
<#else>
|
||||
${properties.ECLogoAlt}
|
||||
<#if displayRequiredFields>
|
||||
<div class="${properties.kcContentWrapperClass!}">
|
||||
<div class="${properties.kcLabelWrapperClass!} subtitle">
|
||||
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<#nested "show-username">
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<div id="kc-username">
|
||||
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
|
||||
<a id="reset-login" href="${url.loginRestartFlowUrl}">
|
||||
<div class="kc-login-tooltip">
|
||||
<i class="${properties.kcResetFlowIcon!}"></i>
|
||||
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<#else>
|
||||
<#nested "show-username">
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<div id="kc-username">
|
||||
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
|
||||
<a id="reset-login" href="${url.loginRestartFlowUrl}">
|
||||
<div class="kc-login-tooltip">
|
||||
<i class="${properties.kcResetFlowIcon!}"></i>
|
||||
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
</#if>
|
||||
</a>
|
||||
</header>
|
||||
<div id="kc-content">
|
||||
<div id="kc-content-wrapper">
|
||||
|
||||
<#-- 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="alert alert-${message.type}">
|
||||
<#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>
|
||||
<span class="kc-feedback-text">${kcSanitize(message.summary)?no_esc}</span>
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
<#nested "form">
|
||||
|
||||
<#if auth?has_content && auth.showTryAnotherWayLink() && showAnotherWayIfPresent>
|
||||
<form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post" <#if displayWide>class="${properties.kcContentWrapperClass!}"</#if>>
|
||||
<div <#if displayWide>class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"</#if>>
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<input type="hidden" name="tryAnotherWay" value="on" />
|
||||
<a href="#" id="try-another-way" onclick="document.forms['kc-select-try-another-way-form'].submit();return false;">${msg("doTryAnotherWay")}</a>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<#if properties.footerRow1?has_content><div class="col-12 text-right">${properties.footerRow1}</div></#if>
|
||||
<#if properties.footerRow2?has_content><div class="col-12 text-right">${properties.footerRow2}</div></#if>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
<footer style="${properties.footerStyle!}">
|
||||
<div>
|
||||
<a href="${properties.linkTerms!}">Terms of Use</a> |
|
||||
<a href="${properties.linkCookies!'#'}">Cookies Policy</a> |
|
||||
<a href="${properties.linkPrivacy!'#'}" target="_blank">Privacy Policy</a> |
|
||||
<#if properties.linkProject?has_content><a href="${properties.linkProject!}" target="_blank">${properties.descrProject!}</a></#if>
|
||||
</div>
|
||||
<div style="display: flex; padding-top: 10px; justify-content: space-between;">
|
||||
<#if properties.footerRow?has_content><div>${properties.footerRow}</div></#if>
|
||||
<div style="align-self: center;">
|
||||
<a href="http://ec.europa.eu/programmes/horizon2020/" target="_blank">
|
||||
<img class="float-right" alt="${properties.ECLogoAlt!}" src="${url.resourcesPath}/img/logo-ec.jpg" style="${properties.ECLogoStyle!}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div><!-- end form card -->
|
||||
</div><!-- end login -->
|
||||
|
||||
</div><!-- end content -->
|
||||
</body>
|
||||
</html>
|
||||
</#macro>
|
||||
</#macro>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,31 @@
|
|||
parent=keycloak
|
||||
import=common/keycloak
|
||||
|
||||
styles=lib/zocial/zocial.css css/d4science.css
|
||||
styles=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/zocial/zocial.css css/d4science.css
|
||||
|
||||
titleTag=Login
|
||||
favicon=
|
||||
#titleTag=
|
||||
#favicon=https://services.d4science.org/favicon.ico
|
||||
contentBgImg=img/color-triangles.png
|
||||
#contentStyle=background: url("https://url-of-background-img");
|
||||
|
||||
logoSrc=
|
||||
logoAlt=
|
||||
logoStyle=max-height: 50px;
|
||||
logoHeaderStyle=display: flex; justify-content: space-between; width: 100%;
|
||||
|
||||
#logoSrc=
|
||||
logoAlt=gCubeDev Gateway
|
||||
logoStyle=height: 60px;
|
||||
|
||||
infrastructureLogo=yes
|
||||
infrastructureLogoStyle=height: 40px;
|
||||
|
||||
bodyStyle=
|
||||
navbarStyle=color: #fff; background-color: #999;
|
||||
navbarActive=background-color: #aaa;
|
||||
contentStyle=background: #f8f6f2 url('https://www.d4science.org/biznizz-theme/css/../images/custom/bg-noise.png');
|
||||
footerStyle=color: #fff; background-color: #999; font-size: 0.7em;
|
||||
footerStyle=display: flex; flex-direction: column; width: 100%; padding-top: 10px;
|
||||
|
||||
linkTerms=
|
||||
linkCookies=
|
||||
#linkTerms=
|
||||
#linkCookies=
|
||||
linkPrivacy=https://www.iubenda.com/privacy-policy/441050
|
||||
linkProject=
|
||||
descrProject=
|
||||
#linkProject=
|
||||
#descrProject=
|
||||
|
||||
ECLogoSrc=
|
||||
ECLogoStyle=max-width: 35px;
|
||||
ECLogoAlt=EU H2020 programme
|
||||
|
||||
footerRow1=
|
||||
footerRow2=
|
||||
footerRow=Project has received funding from the European Union's Horizon programme ...
|
||||
|
|
|
|||
|
|
@ -5,18 +5,19 @@ parent=d4science
|
|||
|
||||
titleTag=gCube Snapshot Gateway - Sign in
|
||||
favicon=https://dev4.d4science.org/generic-configurable-theme/images/favicon.ico
|
||||
contentBgImg=img/color-triangles.png
|
||||
#contentStyle=background: url("https://url-of-background-img");
|
||||
|
||||
#logoHeaderStyle=
|
||||
|
||||
logoSrc=https://dev4.d4science.org/image/company_logo?img_id=0&t=1590160581995
|
||||
logoAlt=gCube Snapshot Gateway
|
||||
logoStyle=height: 70px;
|
||||
logoStyle=height: 50px;
|
||||
|
||||
infrastructureLogo=no
|
||||
#infrastructureLogoStyle=
|
||||
|
||||
#bodyStyle=
|
||||
navbarStyle=color: #FFF; background: #0271BE;
|
||||
navbarActive=background-color: #019ad3;
|
||||
#contentStyle=
|
||||
footerStyle=color: #fff; background-color: #555; font-size: 0.7em;
|
||||
#footerStyle=
|
||||
|
||||
linkTerms=https://dev4.d4science.org/terms-of-use
|
||||
linkCookies=https://dev4.d4science.org/cookie-policy
|
||||
|
|
@ -24,9 +25,7 @@ linkCookies=https://dev4.d4science.org/cookie-policy
|
|||
linkProject=https://dev4.d4science.org
|
||||
descrProject=Go to D4Science Gateway
|
||||
|
||||
ECLogoSrc=https://dev4.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
|
||||
#ECLogoStyle=max-width: 35px;
|
||||
ECLogoStyle=max-width: 35px;
|
||||
ECLogoAlt=EU H2020 programme
|
||||
|
||||
#footerRow1=...
|
||||
#footerRow2=...
|
||||
footerRow=
|
||||
|
|
|
|||
|
|
@ -5,18 +5,19 @@ parent=d4science
|
|||
|
||||
titleTag=gCubeDev Gateway - Sign in
|
||||
favicon=https://next.d4science.org/generic-configurable-theme/images/favicon.ico
|
||||
contentBgImg=img/blue-triangles.png
|
||||
#contentStyle=background: url("https://url-of-background-img");
|
||||
|
||||
#logoHeaderStyle=
|
||||
|
||||
logoSrc=https://next.d4science.org/image/layout_set_logo?img_id=9133999&t=1592922317362
|
||||
logoAlt=gCubeDev Gateway
|
||||
logoStyle=height: 70px;
|
||||
logoStyle=height: 50px;
|
||||
|
||||
infrastructureLogo=no
|
||||
#infrastructureLogoStyle=
|
||||
|
||||
#bodyStyle=
|
||||
navbarStyle=color: #FFF; background: #0271BE;
|
||||
navbarActive=background-color: #019ad3;
|
||||
#contentStyle=
|
||||
footerStyle=color: #fff; background-color: #555; font-size: 0.7em;
|
||||
#footerStyle=
|
||||
|
||||
linkTerms=https://next.d4science.org/terms-of-use
|
||||
linkCookies=https://next.d4science.org/cookie-policy
|
||||
|
|
@ -24,10 +25,7 @@ linkCookies=https://next.d4science.org/cookie-policy
|
|||
linkProject=https://next.d4science.org/
|
||||
descrProject=Go to D4Science Gateway
|
||||
|
||||
ECLogoSrc=https://next.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
|
||||
#ECLogoStyle=max-width: 35px;
|
||||
ECLogoStyle=max-width: 35px;
|
||||
ECLogoAlt=EU H2020 programme
|
||||
|
||||
#footerRow1=...
|
||||
#footerRow2=...
|
||||
|
||||
footerRow=
|
||||
Loading…
Reference in New Issue