fix: update for keycloak 26

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM keycloak/keycloak:25.0.6
+FROM keycloak/keycloak:26.4.0
 
 # Turn of caching in the configuration so we can modify the theme and refresh to see changes
 COPY ./renku-theme-dev/standalone.xml /opt/jboss/keycloak/standalone/configuration/standalone.xml

README.md

@@ -88,4 +88,4 @@ In the renku chart, change the `values.yaml` to reference the image in the `keyc
 
 To understand the structure of the content, you may need to consult the source code for the theme.
 
-Download the source for the release that is used (https://github.com/keycloak/keycloak/releases/tag/25.0.6) and then look in the `themes/src/main/resources/theme` folder for the `base` and `keycloak` templates. Official theme examples are found in `examples/themes/src/main/resources/theme` folder.
+Download the source for the release that is used (https://github.com/keycloak/keycloak/releases/tag/26.4.0) and then look in the `themes/src/main/resources/theme` folder for the `base` and `keycloak` templates. Official theme examples are found in `examples/themes/src/main/resources/theme` folder.

renku_theme/login/login.ftl

@@ -13,7 +13,7 @@
             </div>
         </div>
     <#elseif section = "socialProviders" >
-        <#if realm.password && social.providers??>
+        <#if realm.password && social?? && social.providers?has_content>
             <div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
                 <h2 class="login-section-title-providers">${msg("identity-provider-login-label")}</h2>
                 <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
@@ -100,7 +100,7 @@
         </div>
 
     </div>
-    <#if realm.password && social.providers??>
+    <#if realm.password && social?? && social.providers?has_content>
         <div id="login-separator">
             <div class="separator"></div>
             OR

renku_theme/login/resources/css/login.css

@@ -150,9 +150,16 @@ input[type="password"]:hover {
   background-color: #f5f5f5;
 }
 
+.pf-c-button.pf-m-primary,
 input[type="submit"] {
   font-family: var(--inter-font);
 
+  /* Override PatternFly v4 primary-button colors (default is light blue) */
+  --pf-c-button--m-primary--BackgroundColor: #07182b;
+  --pf-c-button--m-primary--hover--BackgroundColor: #007a6c;
+  --pf-c-button--m-primary--active--BackgroundColor: #009568;
+  --pf-c-button--m-primary--focus--BackgroundColor: #07182b;
+
   background-color: #07182b;
   color: #009568;
   border: 1px solid #009568;
@@ -165,6 +172,7 @@ input[type="submit"] {
   width: 300px;
 }
 
+.pf-c-button.pf-m-primary:hover,
 input[type="submit"]:hover {
   background: #007a6c;
   color: #ffffff;
@@ -196,31 +204,6 @@ div#kc-form-options div {
   margin-right: 20px;
 }
 
-div#kc-feedback {
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-
-div#kc-feedback-wrapper {
-  padding: 1em;
-}
-
-div.feedback-success {
-  background-color: rgba(155, 155, 255, 0.1);
-}
-
-div.feedback-warning {
-  background-color: rgba(255, 175, 0, 0.1);
-}
-
-div.feedback-error {
-  background-color: rgba(255, 0, 0, 0.1);
-}
-
 span#input-error {
   color: hsl(342, 89%, 45%);
   display: block;
@@ -297,6 +280,7 @@ div#kc-social-providers ul {
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 20px;
 }
 
 div#kc-social-providers ul a {
@@ -306,13 +290,22 @@ div#kc-social-providers ul a {
   width: 300px;
 }
 
+div#kc-social-providers a.pf-c-button.pf-m-control,
 div#kc-social-providers a {
   font-family: var(--inter-font);
   text-decoration: none;
 
   box-shadow: none;
   text-shadow: none;
 
+  /* Override PatternFly v4 pf-m-control variant: light background + ::after border */
+  --pf-c-button--m-control--BackgroundColor: #07182b;
+  --pf-c-button--m-control--after--BorderColor: transparent;
+  --pf-c-button--m-control--after--BorderTopColor: transparent;
+  --pf-c-button--m-control--after--BorderRightColor: transparent;
+  --pf-c-button--m-control--after--BorderBottomColor: transparent;
+  --pf-c-button--m-control--after--BorderLeftColor: transparent;
+
   background: none;
   background-color: #07182b;
   color: #009568;
@@ -325,19 +318,29 @@ div#kc-social-providers a {
   padding: 10px;
 }
 
+div#kc-social-providers a.pf-c-button.pf-m-control::after,
+div#kc-social-providers a::after {
+  border: none;
+}
+
+div#kc-social-providers a.pf-c-button.pf-m-control:hover,
 div#kc-social-providers a:hover {
+  --pf-c-button--m-control--hover--BackgroundColor: #007a6c;
   background: #007a6c;
   color: #ffffff;
 }
 
+div#kc-social-providers a.pf-c-button.pf-m-control:active,
 div#kc-social-providers a:active {
+  --pf-c-button--m-control--active--BackgroundColor: #009568;
   background: #009568;
   color: #ffffff;
 }
 
 .login-section-title-providers {
   margin-bottom: 40px;
 }
+
 .login-section-title-form {
   margin-bottom: 35px;
 }
@@ -384,21 +387,26 @@ div#renku-login-terms-text {
     align-items: center;
     flex-direction: column-reverse;
   }
+
   #login-separator {
     flex-direction: row;
     margin: 20px;
   }
+
   #login-separator .separator {
     width: 100px;
     height: 1px;
   }
+
   div#kc-social-providers ul {
     margin-bottom: 0;
     gap: 40px;
   }
+
   div#kc-social-providers ul a {
     margin: 0;
   }
+
   div#renku-login-terms-icon {
     display: none;
   }

renku_theme/login/resources/css/styles.css

@@ -1,17 +1,43 @@
-.alert.alert-success {
+/*
+ * Alert / feedback message styling.
+ *
+ * As of Keycloak 26 the login template renders messages as a PatternFly v4
+ * alert: <div class="alert-<type> pf-c-alert pf-m-inline pf-m-<danger|success|warning|info>">.
+ * Target the pf-c-alert + pf-m-* classes (the old `.alert.alert-*` compound
+ * selectors no longer match, since Keycloak emits `alert-<type>` as a single token).
+ */
+.pf-c-alert.pf-m-success {
   background-color: #65E677;
   border-color: #65E677;
 }
-.alert.alert-error {
+
+.pf-c-alert.pf-m-danger {
   background-color: #E04B43;
   border-color: #E04B43;
   color: #F5F5F5;
 }
-.alert.alert-warning {
+
+.pf-c-alert.pf-m-warning {
   background-color: #FFD91A;
   border-color: #FFD91A;
 }
-.alert.alert-info {
+
+.pf-c-alert.pf-m-info {
   background-color: #5994B2;
   border-color: #5994B2;
-}
+}
+
+/* Text + icon color per alert type (override PatternFly's own title color) */
+.pf-c-alert.pf-m-danger .pf-c-alert__title,
+.pf-c-alert.pf-m-danger .pf-c-alert__icon,
+.pf-c-alert.pf-m-info .pf-c-alert__title,
+.pf-c-alert.pf-m-info .pf-c-alert__icon {
+  color: #F5F5F5;
+}
+
+.pf-c-alert.pf-m-success .pf-c-alert__title,
+.pf-c-alert.pf-m-success .pf-c-alert__icon,
+.pf-c-alert.pf-m-warning .pf-c-alert__title,
+.pf-c-alert.pf-m-warning .pf-c-alert__icon {
+  color: #07182b;
+}

renku_theme/login/theme.properties

@@ -17,7 +17,7 @@
 
 parent=keycloak
 styles=css/fonts.css css/styles.css css/login.css fonts/inter.css
-stylesCommon=node_modules/patternfly/dist/css/patternfly.css node_modules/patternfly/dist/css/patternfly-additions.css
+stylesCommon=vendor/patternfly-v4/patternfly.min.css vendor/patternfly-v3/css/patternfly.min.css vendor/patternfly-v3/css/patternfly-additions.min.css lib/pficon/pficon.css
 
 kcLogoLink=https://renkulab.io