feat: theme for Keycloak 20 (#22)

* build: update Dockerfile to Keycloak 20.0
* feat: update styles for Keycloak 20.0

Author: ciyer

Dockerfile.dev

@@ -1,11 +1,11 @@
-FROM docker.io/jboss/keycloak:15.0.2
+FROM keycloak/keycloak:20.0.1
 
 # 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
 COPY ./renku-theme-dev/standalone-ha.xml /opt/jboss/keycloak/standalone/configuration/standalone-ha.xml
 
 # Set up a Renku realm
-COPY ./renku-theme-dev/renku-realm.json /tmp/renku-realm.json
+COPY ./renku-theme-dev/renku-realm.json /opt/keycloak/data/import/renku-realm.json
 
 # Copy the theme in, though this content will be overridden if you mount the folder when running
-COPY ./renku_theme/ /opt/jboss/keycloak/themes/renku_theme/
+COPY ./renku_theme/ /opt/keycloak/themes/renku_theme/

README.md

@@ -15,15 +15,39 @@ For development, you can do the following:
 ```
 docker build -f Dockerfile.dev -t renku-theme .
 
-docker run -d --rm --name renku-theme -v (pwd)/renku_theme:/opt/jboss/keycloak/themes/renku_theme -p 8080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin -e KEYCLOAK_IMPORT=/tmp/renku-realm.json renku-theme
+docker run -d --rm --name renku-theme -v (pwd)/renku_theme:/opt/keycloak/themes/renku_theme -p 8080:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin renku-theme start-dev --import-realm
 ```
 
-Then, after waiting for the service to start, connect to one of these urls (depending of if you are testing the account or login page):
-* http://localhost:8080/auth/realms/renku/account/
-* http://localhost:8080/auth/realms/renku/protocol/openid-connect/auth?client_id=account&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fauth%2Frealms%2Frenku%2Faccount%2Flogin-redirect&state=1234&response_type=code&scope=openid
+Then, after waiting for the service to start, connect to this URL
+
+* http://localhost:8080/realms/renku/account/
+
+From here, you can click _Sign In_ to get to the login UI.
+
 
 You can make changes to the theme and refresh in your browser to see the updates. You need to do a hard refresh (e.g., Shift-Refresh on Safari) or ensure the cache is disabled to see your changes.
 
+## Local Testing
+
+After the initial theme is set up, you should make some configuration changes to test several scenarios:
+
+### Auth providers
+
+Configure some auth providers like
+
+- Facebook http://localhost:8080/admin/master/console/#/renku/identity-providers/facebook/add
+- GitHub http://localhost:8080/admin/master/console/#/renku/identity-providers/github/add
+
+
+These should then appear on the login page.
+
+### Reset password page
+
+Enable the reset password page to make sure that looks correct:
+
+http://localhost:8080/admin/master/console/#/renku/realm-settings/login
+
+
 ## Testing
 
 If you want to deploy the theme in a real renku instance, you can build it and push it to docker hub, where you can reference it in a renku chart.
@@ -39,5 +63,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/15.0.2) 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/20.0.1) 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/resources/css/login.css

@@ -15,8 +15,6 @@
  * limitations under the License.
  */
 
-@import url("../../keycloak/lib/zocial/zocial.css");
-
 .login-pf {
   background: #07182b;
 }
@@ -36,7 +34,7 @@
 }
 
 h1 {
-  font-size: 32px;
+  font-size: 24px;
 }
 
 .alert {
@@ -51,9 +49,7 @@ a {
   font-weight: bold;
   text-decoration: underline;
 
-  padding: 10px;
   margin-top: 20px;
-  margin-right: 10px;
 }
 
 .renku-login-container {
@@ -68,44 +64,32 @@ a {
 
 .renku-login-card {
   position: relative;
-  top: 120px;
+  top: 20px;
   padding-bottom: 20px;
 }
 
 #kc-content {
-  width: 700px;
+  width: 300px;
 }
 
 #kc-content-wrapper {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-}
-
-#kc-form {
-  display: flex;
-  justify-content: space-between;
-}
-
-#kc-form-wrapper {
-  padding-right: 40px;
 }
 
 div#kc-social-providers {
-  border-left: 1px solid #009568;
-  padding-left: 20px;
-  flex-grow: 1;
+  background-color: rgba(7, 24, 43, 0.3);
 }
 
 div#kc-social-providers hr {
-  border-top: none;
+  border-top: 1px solid #009568;
   margin: 0px;
 }
 
 div#kc-social-providers h4 {
   font-size: 16px;
   font-weight: bold;
-  margin: 5px 0px 5px 5px;
+  margin: 10px 0px 5px 5px;
 }
 
 #kc-form label {
@@ -118,7 +102,8 @@ div#kc-social-providers h4 {
 }
 
 #kc-info {
-  margin-top: 40px;
+  margin-top: 10px;
+  background-color: rgb(7, 24, 43);
 }
 
 input[type="text"],
@@ -223,7 +208,6 @@ span.pf-m-error.required {
   margin-top: -15px;
 }
 
-
 div#kc-header {
   background-image: url("../img/logo.svg");
   background-size: cover;
@@ -251,10 +235,13 @@ div#kc-header-wrapper {
   width: 300px;
 }
 
-#kc-info-wrapper {
-  width: 400px;
+.kc-social-item {
+  text-align: center;
 }
 
+.kc-social-links {
+  font-size: 14px;
+}
 
 div#social-login {
   border-left: 1px solid rgba(255, 255, 255, 0.2);
@@ -299,7 +286,6 @@ div#kc-social-providers a {
 
   margin: 0px;
   padding: 10px;
-  width: 150px;
 }
 
 div#kc-social-providers a:hover {