diff --git a/src/themes/d4science/login/register.ftl b/src/themes/d4science/login/register.ftl new file mode 100644 index 0000000..ad5390e --- /dev/null +++ b/src/themes/d4science/login/register.ftl @@ -0,0 +1,86 @@ +<#import "template.ftl" as layout> +<@layout.registrationLayout; section> + <#if section = "header"> + ${msg("registerTitle")} + <#elseif section = "form"> +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + <#if !realm.registrationEmailAsUsername> +
+
+ +
+
+ +
+
+ + + <#if passwordRequired??> +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + <#if recaptchaRequired??> +
+
+
+
+
+ + +
+ + +
+ +
+
+
+ + diff --git a/src/themes/d4science/login/resources/css/d4science.css b/src/themes/d4science/login/resources/css/d4science.css index 31e744e..eb595be 100644 --- a/src/themes/d4science/login/resources/css/d4science.css +++ b/src/themes/d4science/login/resources/css/d4science.css @@ -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; +} diff --git a/src/themes/d4science/login/resources/img/PoweredByD4Science.png b/src/themes/d4science/login/resources/img/PoweredByD4Science.png new file mode 100644 index 0000000..f75c218 Binary files /dev/null and b/src/themes/d4science/login/resources/img/PoweredByD4Science.png differ diff --git a/src/themes/d4science/login/resources/img/blue-triangles.png b/src/themes/d4science/login/resources/img/blue-triangles.png new file mode 100644 index 0000000..cfb9540 Binary files /dev/null and b/src/themes/d4science/login/resources/img/blue-triangles.png differ diff --git a/src/themes/d4science/login/resources/img/color-triangles.png b/src/themes/d4science/login/resources/img/color-triangles.png new file mode 100644 index 0000000..6dcbee7 Binary files /dev/null and b/src/themes/d4science/login/resources/img/color-triangles.png differ diff --git a/src/themes/d4science/login/resources/img/favicon.ico b/src/themes/d4science/login/resources/img/favicon.ico new file mode 100644 index 0000000..718bf5d Binary files /dev/null and b/src/themes/d4science/login/resources/img/favicon.ico differ diff --git a/src/themes/d4science/login/resources/img/logo-ec.jpg b/src/themes/d4science/login/resources/img/logo-ec.jpg new file mode 100644 index 0000000..08d697b Binary files /dev/null and b/src/themes/d4science/login/resources/img/logo-ec.jpg differ diff --git a/src/themes/d4science/login/resources/img/network-blue.jpg b/src/themes/d4science/login/resources/img/network-blue.jpg new file mode 100644 index 0000000..3382286 Binary files /dev/null and b/src/themes/d4science/login/resources/img/network-blue.jpg differ diff --git a/src/themes/d4science/login/resources/img/network-lightblue.jpg b/src/themes/d4science/login/resources/img/network-lightblue.jpg new file mode 100644 index 0000000..f02057a Binary files /dev/null and b/src/themes/d4science/login/resources/img/network-lightblue.jpg differ diff --git a/src/themes/d4science/login/template.ftl b/src/themes/d4science/login/template.ftl index 87bf17a..c8aaa48 100644 --- a/src/themes/d4science/login/template.ftl +++ b/src/themes/d4science/login/template.ftl @@ -1,33 +1,54 @@ <#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false displayWide=false showAnotherWayIfPresent=true> - - + + + - - + + + - - - ${properties.titleTag} - - <#if properties.styles?has_content> - <#list properties.styles?split(' ') as style> - - - - - + <#if properties.meta?has_content> + <#list properties.meta?split(' ') as meta> + + + + <#if properties.titleTag?has_content>${properties.titleTag}<#else>${msg("loginTitle",(realm.displayName!''))}</#if> + + <#if properties.styles?has_content> + <#list properties.styles?split(' ') as style> + + + + <#if properties.scripts?has_content> + <#list properties.scripts?split(' ') as script> + + + + <#if scripts??> + <#list scripts as script> + + + - -
-
-
-
+ +
+ +
+ + +
+ + - -
- - -
-
- -
-
-

<#nested "header">

-
-
- - <#-- 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??)> -
- <#if message.type = 'success'> - <#if message.type = 'warning'> - <#if message.type = 'error'> - <#if message.type = 'info'> - -
- - -
-
- <#nested "form"> - - <#if displayInfo> -
-
- <#nested "info"> +
+ <#if realm.internationalizationEnabled && locale.supported?size gt 1> +
+
+
+ ${locale.current} +
    + <#list locale.supported as l> +
  • ${l.label}
    • + +
+
+
-
-
-
- -
-
- - - - - + +
+ + + - \ No newline at end of file + diff --git a/src/themes/d4science/login/theme.properties b/src/themes/d4science/login/theme.properties index fad5b68..10ae969 100644 --- a/src/themes/d4science/login/theme.properties +++ b/src/themes/d4science/login/theme.properties @@ -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 ... diff --git a/src/themes/dev4.d4science.org/login/theme.properties b/src/themes/dev4.d4science.org/login/theme.properties index 8e8882b..04889ff 100644 --- a/src/themes/dev4.d4science.org/login/theme.properties +++ b/src/themes/dev4.d4science.org/login/theme.properties @@ -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= diff --git a/src/themes/next.d4science.org/login/theme.properties b/src/themes/next.d4science.org/login/theme.properties index 985e0f8..32020c6 100644 --- a/src/themes/next.d4science.org/login/theme.properties +++ b/src/themes/next.d4science.org/login/theme.properties @@ -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= \ No newline at end of file