upgrade to Keycloakify 11

.github/workflows/keycloakify-test.yml

@@ -40,7 +40,5 @@ jobs:
         run: yarn install --immutable
       - name: Build
         run: yarn build
-      - name: Build storybook
-        run: yarn build-storybook
       - name: Build keycloak theme
         run: yarn build-keycloak-theme

keycloak/keycloakify/.eslintrc.cjs

@@ -1,25 +1,27 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:storybook/recommended"
     ],
-    'react-hooks/exhaustive-deps': 'off',
-    '@typescript-eslint/no-redeclare': 'off',
-    'no-labels': 'off',
-  },
-  overrides: [
-    {
-      files: ['**/*.stories.*'],
-      rules: {
-        'import/no-anonymous-default-export': 'off',
-      },
+    ignorePatterns: ["dist", ".eslintrc.cjs"],
+    parser: "@typescript-eslint/parser",
+    plugins: ["react-refresh"],
+    rules: {
+        "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+        "react-hooks/exhaustive-deps": "off",
+        "@typescript-eslint/no-redeclare": "off",
+        "no-labels": "off"
     },
-  ],
-}
+    overrides: [
+        {
+            files: ["**/*.stories.*"],
+            rules: {
+                "import/no-anonymous-default-export": "off"
+            }
+        }
+    ]
+};

keycloak/keycloakify/.gitignore

@@ -54,4 +54,4 @@ jspm_packages
 
 /dist_keycloak
 /build
-/storybook-static
+/storybook-static

keycloak/keycloakify/.prettierignore

@@ -0,0 +1,6 @@
+node_modules/
+/dist/
+/dist_keycloak/
+/public/keycloakify-dev-resources/
+/.vscode/
+/.yarn_home/

keycloak/keycloakify/.prettierrc.json

@@ -0,0 +1,25 @@
+{
+    "printWidth": 90,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "arrowParens": "avoid",
+    "overrides": [
+        {
+            "files": [
+                "**/login/pages/*.tsx",
+                "**/account/pages/*.tsx",
+                "**/login/Template.tsx",
+                "**/account/Template.tsx",
+                "**/login/UserProfileFormFields.tsx",
+                "KcApp.tsx"
+            ],
+            "options": {
+                "printWidth": 150
+            }
+        }
+    ]
+}

keycloak/keycloakify/.storybook/main.ts

@@ -1,21 +1,12 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
-    "@chromatic-com/storybook"
-  ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-  staticDirs: ["../public"],
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {}
+    },
+    staticDirs: ["../public"]
 };
 export default config;

keycloak/keycloakify/.storybook/preview-head.html

@@ -0,0 +1,25 @@
+<style>
+    body.sb-show-main.sb-main-padded {
+        padding: 0;
+    }
+
+    /* Following styles are just meant to avoid white flash when switching from one story to another */
+    @keyframes fadeToTransparent {
+        from {
+            background-color: #393939;
+        }
+
+        to {
+            background-color: transparent;
+        }
+    }
+    html {
+        animation: fadeToTransparent 500ms forwards ease-in;
+    }
+    body > .sb-preparing-docs {
+        visibility: hidden;
+    }
+    body > .sb-preparing-story {
+        visibility: hidden;
+    }
+</style>

keycloak/keycloakify/.storybook/preview.ts

@@ -1,14 +1,14 @@
 import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i
+            }
+        }
+    }
 };
 
 export default preview;

keycloak/keycloakify/.yarnrc.yml

@@ -1,2 +1 @@
 nodeLinker: node-modules
-yarnPath: .yarn/releases/yarn-4.2.2.cjs

keycloak/keycloakify/Dockerfile

@@ -1,7 +1,8 @@
 ARG NODE_VERSION=22
-FROM node:${NODE_VERSION}-bookworm as builder
+FROM node:${NODE_VERSION}-bookworm AS builder
 
 ARG KEYCLOAK_ORCID_VERSION=1.3.0
+ARG KEYCLOAK_MAJOR_VERSION=24
 
 USER root
 
@@ -12,18 +13,25 @@ RUN mvn --version
 WORKDIR /app
 RUN wget  https://github.com/eosc-kc/keycloak-orcid/releases/download/${KEYCLOAK_ORCID_VERSION}/keycloak-orcid-${KEYCLOAK_ORCID_VERSION}.jar
 COPY package.json yarn.lock .yarnrc.yml ./
-COPY .yarn/releases .yarn/releases
 RUN corepack enable
 RUN corepack install
 RUN yarn install --immutable && \
     yarn cache clean
 COPY . .
 RUN yarn build-keycloak-theme
 
+RUN if [ "$KEYCLOAK_MAJOR_VERSION" -le 25 ]; then \
+        mv dist_keycloak/keycloak-theme-for-kc-22-to-25.jar loculus-theme.jar; \
+    else \
+        mv dist_keycloak/keycloak-theme-for-kc-all-other-versions.jar loculus-theme.jar; \
+    fi
+# You can set an explicit version in vite.config.ts, see docs here:
+# https://docs.keycloakify.dev/targeting-specific-keycloak-versions
+# But for now this was the easiest way; In the future once we migrated away from KC<25 we can just get rid if this entirely
+
 FROM alpine:3.19
 RUN mkdir /output
 COPY --from=builder /app/keycloak-orcid*.jar /output/
-# /loculus.jar is the theme name set in vite.config.ts
-COPY --from=builder /app/dist_keycloak/target/loculus*.jar /output/
+COPY --from=builder /app/loculus-theme.jar /output/
 RUN ls -alht /output
 CMD sh -c 'cp /output/*.jar /destination/'

keycloak/keycloakify/README.md

@@ -1,36 +1,74 @@
-# Keycloakify theme
+# Loculus Keycloakify theme
 
-This is a keycloak theme, built with keycloakify, and branched from <https://github.com/keycloakify/keycloakify-starter>.
+This theme is primarily used for:
 
-We last synced with upstream on 2024-05-11.
+-   Adding ORCID support
+-   Adding a little tickbox to the registration process, as well as the IDP review page (after registering with ORCID).
+-   Minimal styling changes.
+-   Overriding the realm name in various places.
 
-To preview in the storybook:
+Changes are deliberately kept minimal to make it easier to maintain the theme.
+
+Based on upstream commit: https://github.com/keycloakify/keycloakify-starter/commit/a543bc0f73e5874648cf6d907c88aba9b4b48536
+
+## Quick start
+
+```bash
+nvm use
+corepack install
+yarn install --immutable
+```
+
+If you get:
+
+```log
+error This project's package.json defines "packageManager": "[email protected]". However the current global version of Yarn is 1.22.22.
+```
+
+then uninstall the global yarn version (e.g. `homebrew install yarn`) and try `yarn install` again.
+
+## Testing the theme locally
+
+### Storybook
+
+For a quick preview of the theme, you can use Storybook:
 
 ```bash
-nvm use # use the correct node version
-yarn install --immutable # install dependencies (it's like npm install)
 yarn storybook
 ```
 
-To build a JAR and package it into an image that copies it to an output directory, build the Dockerfile. (This is done by CI).
+Then visit http://localhost:6006/
+
+### Use with actual dev Keycloak
 
-Currently, only the login theme is implemented.
+Not so useful right now as it doesn't show the right pages yet:
 
-## Dependency documentation
+```sh
+npx keycloakify start-keycloak
+```
+
+(needs port 8080 to be available, so shut down your cluster if you have one running)
 
-### Keycloakify
+Then visit https://my-theme.keycloakify.dev (ensure ad blocker is disabled if you get an error).
 
-https://docs.keycloakify.dev/
+[Documentation](https://docs.keycloakify.dev/testing-your-theme)
 
-### Keycloak ORCID
+## How to customize the theme
 
-https://github.com/eosc-kc/keycloak-orcid
+[Documentation](https://docs.keycloakify.dev/customization-strategies)
 
-## Installing yarn 4
+## Building the theme
 
-Prerequisite: node
+You need to have [Maven](https://maven.apache.org/) installed to build the theme (Maven >= 3.1.1, Java >= 7).  
+The `mvn` command must be in the $PATH.
+
+-   macOS: `brew install maven`
+-   On Debian/Ubuntu: `sudo apt-get install maven`
+-   On Windows: `choco install openjdk` and `choco install maven` (Or download from [here](https://maven.apache.org/download.cgi))
 
 ```bash
-corepack enable
-corepack install yarn
+npm run build-keycloak-theme
 ```
+
+Note that by default Keycloakify generates multiple .jar files for different versions of Keycloak.  
+You can customize this behavior, see documentation [here](https://docs.keycloakify.dev/targeting-specific-keycloak-versions).

keycloak/keycloakify/index.html

@@ -1,31 +1,14 @@
 <!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-  <!--
-        Notice the use of %BASE_URL% in the tags above.
-        It will be replaced with the URL of the `public` folder during the build.
-        Only files inside the `public` folder can be referenced from the HTML.
-
-        Unlike "/favicon.ico" or "favicon.ico", "%BASE_URL%favicon.ico" will
-        work correctly both with client-side routing and a non-root public URL.
-    -->
-  <link rel="icon" type="image/svg+xml" sizes="32x32" href="%BASE_URL%favicon.svg">
-
-  <title>Loculus Authentication</title>
-
-  <meta name="keycloakify-ignore-start">
-  <script>console.log("This is logged Only in the main app, stripped out in the theme")</script>
-  <meta name="keycloakify-ignore-end">
-
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    </head>
+
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>