From 6bde1b35326f5445407e8c94306c81bc0b8e2ccd Mon Sep 17 00:00:00 2001
From: vcestone <v.cestone@gmail.com>
Date: Thu, 25 Jun 2020 19:41:27 +0200
Subject: [PATCH] Refactoring of d4science theme

---
 src/themes/bluecloud/login/theme.properties   |  21 ++-
 .../login/resources/css/d4science.css         |  54 ++++++++
 src/themes/d4science/login/template.ftl       | 124 +++++++-----------
 src/themes/d4science/login/theme.properties   |  22 ++--
 .../dev4.d4science.org/login/theme.properties |  23 ++--
 .../next.d4science.org/login/theme.properties |  23 ++--
 6 files changed, 157 insertions(+), 110 deletions(-)
 create mode 100644 src/themes/d4science/login/resources/css/d4science.css

diff --git a/src/themes/bluecloud/login/theme.properties b/src/themes/bluecloud/login/theme.properties
index 1fc69ca..16c2485 100644
--- a/src/themes/bluecloud/login/theme.properties
+++ b/src/themes/bluecloud/login/theme.properties
@@ -1,25 +1,32 @@
 parent=d4science
 
+
+#styles=
+
 titleTag=Blue-Cloud Login
 favicon=https://blue-cloud.d4science.org/generic-configurable-theme/images/favicon.ico
 
-linkWebsite=https://www.blue-cloud.org/
-descWebsite=Blue-Cloud Project Website
-
 logoSrc=https://blue-cloud.d4science.org/image/layout_set_logo?img_id=199274286&t=1591610863691
 logoAlt=Blue-Cloud Gateway
 #logoStyle=max-height: 50px;
 
-navbarStyle=color: #FFF; background: #225f97;
+infrastructureLogo=yes
 
-footerStyle=background-color: #2f4b6b;
+#bodyStyle=
+navbarStyle=color: #FFF; background: #225f97;
+navbarActive=background-color: #019ad3;
+#contentStyle=
+footerStyle=color: #fff; background-color: #2f4b6b; font-size: 0.7em;
 
 linkTerms=https://blue-cloud.d4science.org/terms-of-use
 linkCookies=https://blue-cloud.d4science.org/cookie-policy
 #linkPrivacy=https://www.iubenda.com/privacy-policy/441050
+linkProject=https://www.blue-cloud.org/
+descrProject=Blue-Cloud Project Website
 
-logoEC=https://blue-cloud.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
-#logoECStyle=max-width: 35px;
+ECLogoSrc=https://blue-cloud.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
+#ECLogoStyle=max-width: 35px;
+ECLogoAlt=EU H2020 programme
 
 footerRow1=Blue-Cloud has received funding from the European Union's Horizon programme call BG-07-2019-2020, topic: [A] 2019 - Blue Cloud services, Grant Agreement n.862409
 #footerRow2=...
\ No newline at end of file
diff --git a/src/themes/d4science/login/resources/css/d4science.css b/src/themes/d4science/login/resources/css/d4science.css
new file mode 100644
index 0000000..31e744e
--- /dev/null
+++ b/src/themes/d4science/login/resources/css/d4science.css
@@ -0,0 +1,54 @@
+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;
+}
+
diff --git a/src/themes/d4science/login/template.ftl b/src/themes/d4science/login/template.ftl
index 3d78c3b..aa1f6d6 100644
--- a/src/themes/d4science/login/template.ftl
+++ b/src/themes/d4science/login/template.ftl
@@ -9,73 +9,43 @@
 
   <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>
-    html {
-      position: relative;
-      min-height: 100%;
-    }
-    body {
-      margin-bottom: 60px; /* Margin bottom by footer height */
-    }
-    .footer {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      /* height: 60px; Set the fixed height of the footer here */
-      line-height: 60px; /* Vertically center the text there */
-      color: #fff;
-      font-size: 0.7em;
-      background-color: #f5f5f5;
-    }
-    .footer a {
-      color: #fff;
-    }
-    .login-pf-social-link {
-		  padding: 0.5em 4.5em;
-    }
-    a.zocial {
-			display: block;
-			color: white;
-			font-weight: bold;
-			text-align: center;
-			text-decoration: none;
-			padding: 0.5em;
-			box-shadow: 2px 2px 2px darkgrey;
-    }
-    a.google {
-			background-color: rgb(209, 72, 54);
-    }
-    a.linkedin {
-      background-color: rgb(38, 114, 176);
-    }
-    a.facebook {
-			background-color: #3c66c4;
-    }		
   </style>
-
 </head>
-<body>
-  
+
+<body style="${properties.bodyStyle!}">
   <header>
     <div class="container-fluid">
       <div class="row py-3">
         <div class="col">
-          <a href="${properties.linkWebsite}">
-            <img class="img-fluid float-left" alt="${properties.logoAlt}" src="${properties.logoSrc}" style="${properties.logoStyle}">
+          <a href="${client.getBaseUrl()}">
+            <#if properties.logoSrc?has_content>
+              <img class="img-fluid float-left" alt="${properties.logoAlt}" src="${properties.logoSrc}" style="${properties.logoStyle}">
+            <#else>
+              <h1>${client.getName()?capitalize?keep_before('.')}</h1>
+            </#if>
           </a>
         </div>
-				<#if properties.logoInfrastructure?has_content && properties.logoInfrastructure='yes'>
-					<div class="col">
-						<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">
-						</a>
-					</div>
+				<#if properties.infrastructureLogo?has_content && properties.infrastructureLogo='yes'>
+          <div class="col">
+            <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">
+            </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>
@@ -88,30 +58,30 @@
     <div id="kc-header-wrapper" class="${properties.kcHeaderWrapperClass!}">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
   </div>
 	-->
-
-  <div class="container-fluid">
+  
+  <div id="content" style="${properties.contentStyle!}">
+  <div class="container">
 
 		<div class="row pt-3 pb-2">
-			<div class="col px-5">
+			<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>
+      <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 px-5">
-        
+      <div class="col">
         <#nested "form">
 
         <#if displayInfo>
@@ -121,29 +91,31 @@
             </div>
           </div>
         </#if>
-
       </div>
     </div>
  
   </div>
+  </div>
 
   <footer class="footer container-fluid" style="${properties.footerStyle}">
-    <div class="row">
-      <div class="col-12">
+    <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.linkWebsite?has_content>
-          <a href="${properties.linkWebsite}" target="_blank">${properties.descWebsite}</a>
-        </#if>
+        <#if properties.linkProject?has_content><a href="${properties.linkProject}" target="_blank">${properties.descrProject}</a></#if>
       </div>
-      <div class="col-12">
+      <div class="col-12 text-right">
         <a href="http://ec.europa.eu/programmes/horizon2020/" target="_blank">
-          <img class="float-right" alt="EU H2020 programme" src="${properties.logoEC}" style="${properties.logoECStyle}">
+        <#if properties.ECLogoSrc?has_content>
+          <img class="float-right" alt="${properties.ECLogoAlt}" src="${properties.ECLogoSrc}" style="${properties.ECLogoStyle}">
+        <#else>
+          ${properties.ECLogoAlt}
+        </#if>
         </a>
       </div>
-      <div class="col-12 text-right">${properties.footerRow1}</div>
-      <div class="col-12 text-right">${properties.footerRow2}</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>
 
diff --git a/src/themes/d4science/login/theme.properties b/src/themes/d4science/login/theme.properties
index b10b93f..fad5b68 100644
--- a/src/themes/d4science/login/theme.properties
+++ b/src/themes/d4science/login/theme.properties
@@ -1,30 +1,32 @@
 parent=keycloak
 import=common/keycloak
 
-style=lib/zocial/zocial.css
+styles=lib/zocial/zocial.css css/d4science.css
 
 titleTag=Login
 favicon=
 
-linkWebsite=
-descWebsite=
-
-logoInfrastructure=yes
-
 logoSrc=
 logoAlt=
 logoStyle=max-height: 50px;
 
-navbarStyle=
+infrastructureLogo=yes
 
-footerStyle=background-color: #f5f5f5;
+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;
 
 linkTerms=
 linkCookies=
 linkPrivacy=https://www.iubenda.com/privacy-policy/441050
+linkProject=
+descrProject=
 
-logoEC=
-logoECStyle=max-width: 35px;
+ECLogoSrc=
+ECLogoStyle=max-width: 35px;
+ECLogoAlt=EU H2020 programme
 
 footerRow1=
 footerRow2=
diff --git a/src/themes/dev4.d4science.org/login/theme.properties b/src/themes/dev4.d4science.org/login/theme.properties
index 2301295..8e8882b 100644
--- a/src/themes/dev4.d4science.org/login/theme.properties
+++ b/src/themes/dev4.d4science.org/login/theme.properties
@@ -1,27 +1,32 @@
 parent=d4science
 
+
+#styles=
+
 titleTag=gCube Snapshot Gateway - Sign in
 favicon=https://dev4.d4science.org/generic-configurable-theme/images/favicon.ico
 
-linkWebsite=https://dev4.d4science.org
-descWebsite=Go to D4Science Gateway
-
 logoSrc=https://dev4.d4science.org/image/company_logo?img_id=0&amp;t=1590160581995
 logoAlt=gCube Snapshot Gateway
 logoStyle=height: 70px;
-logoInfrastructure=no
 
+infrastructureLogo=no
+
+#bodyStyle=
 navbarStyle=color: #FFF; background: #0271BE;
-
-footerStyle=background-color: #555;
+navbarActive=background-color: #019ad3;
+#contentStyle=
+footerStyle=color: #fff; background-color: #555; font-size: 0.7em;
 
 linkTerms=https://dev4.d4science.org/terms-of-use
 linkCookies=https://dev4.d4science.org/cookie-policy
 #linkPrivacy=https://www.iubenda.com/privacy-policy/441050
+linkProject=https://dev4.d4science.org
+descrProject=Go to D4Science Gateway
 
-logoEC=https://dev4.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
-#logoECStyle=max-width: 35px;
+ECLogoSrc=https://dev4.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
+#ECLogoStyle=max-width: 35px;
+ECLogoAlt=EU H2020 programme
 
 #footerRow1=...
 #footerRow2=...
-
diff --git a/src/themes/next.d4science.org/login/theme.properties b/src/themes/next.d4science.org/login/theme.properties
index 7215629..985e0f8 100644
--- a/src/themes/next.d4science.org/login/theme.properties
+++ b/src/themes/next.d4science.org/login/theme.properties
@@ -1,26 +1,33 @@
 parent=d4science
 
+
+#styles=
+
 titleTag=gCubeDev Gateway - Sign in
 favicon=https://next.d4science.org/generic-configurable-theme/images/favicon.ico
 
-linkWebsite=https://next.d4science.org/
-descWebsite=Go to D4Science Gateway
-
 logoSrc=https://next.d4science.org/image/layout_set_logo?img_id=9133999&amp;t=1592922317362
 logoAlt=gCubeDev Gateway
 logoStyle=height: 70px;
-logoInfrastructure=no
 
+infrastructureLogo=no
+
+#bodyStyle=
 navbarStyle=color: #FFF; background: #0271BE;
-
-footerStyle=background-color: #555;
+navbarActive=background-color: #019ad3;
+#contentStyle=
+footerStyle=color: #fff; background-color: #555; font-size: 0.7em;
 
 linkTerms=https://next.d4science.org/terms-of-use
 linkCookies=https://next.d4science.org/cookie-policy
 #linkPrivacy=https://www.iubenda.com/privacy-policy/441050
+linkProject=https://next.d4science.org/
+descrProject=Go to D4Science Gateway
 
-logoEC=https://next.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
-#logoECStyle=max-width: 35px;
+ECLogoSrc=https://next.d4science.org/generic-configurable-theme/images/custom/logo-ec.jpg
+#ECLogoStyle=max-width: 35px;
+ECLogoAlt=EU H2020 programme
 
 #footerRow1=...
 #footerRow2=...
+