OpenConext · Liemine · Nov 13, 2025 · Nov 13, 2025 · Nov 13, 2025 · Nov 13, 2025
diff --git a/README.md b/README.md
@@ -42,21 +42,40 @@ Note: for MariaDB `COLLATE utf8mb4_0900_ai_ci` might not work and can be left ou
 This project uses Spring Boot and Maven. To run locally, type:
 
 ```bash
-(cd server && mvn spring-boot:run)
+cd server 
+mvn spring-boot:run
 ```
 
-Install frontend dependencies
+Install client frontend dependencies
 
 ```bash
 cd client 
 nvm use
 yarn install
 ```
 
-Run frontend
+Install welcome frontend dependencies
+```bash
+cd welcome 
+nvm use
+yarn install
+```
+
+Run the client frontend <http://localhost:3000>
+
+```bash
+cd client
+yarn start
+```
+Run the welcome frontend <http://localhost:4000>
+```bash
+cd welcome
+yarn start
+```
 
+Run the server backend
 ```bash
-(cd client && yarn start)
+mvn spring-boot:run -Dspring-boot.run.profiles=dev -Dmaven.test.skip=true
 ```
 
 ### [Mail](#mail)

diff --git a/client/build.sh b/client/build.sh
@@ -4,4 +4,4 @@ rm -Rf target/*
 rm -Rf dist/*
 source $NVM_DIR/nvm.sh
 nvm use
-yarn install --force && CI=true yarn test && yarn build
+yarn install --force && CI=true yarn test && yarn lint && yarn build
diff --git a/welcome/.nvmrc b/welcome/.nvmrc
@@ -1 +1 @@
-v20.8.0
+v24.11.0
diff --git a/welcome/assembly.xml b/welcome/assembly.xml
@@ -7,7 +7,7 @@
   </formats>
   <fileSets>
     <fileSet>
-      <directory>build</directory>
+      <directory>dist</directory>
       <outputDirectory>.</outputDirectory>
       <includes>
         <include>**/*.*</include>

diff --git a/welcome/build.sh b/welcome/build.sh
@@ -1,6 +1,7 @@
 #!/bin/bash
 rm -Rf public/bundle*
 rm -Rf target/*
+rm -Rf dist/*
 source $NVM_DIR/nvm.sh
 nvm use
-yarn install --force && CI=true yarn test && yarn build
+yarn install --force && CI=true yarn test && yarn lint && yarn build
diff --git a/welcome/docker/Dockerfile b/welcome/docker/Dockerfile
@@ -1,5 +1,5 @@
 FROM ghcr.io/openconext/openconext-basecontainers/apache2:latest
-ADD ./build/ /var/www/
+ADD ./dist/ /var/www/
 RUN rm -rf /etc/apache2/sites-enabled/*.conf
 COPY ./docker/appconf.conf /etc/apache2/sites-enabled/
 
diff --git a/welcome/eslint.config.mjs b/welcome/eslint.config.mjs
@@ -0,0 +1,30 @@
+import js from "@eslint/js";
+import globals from "globals";
+import pluginReact from "eslint-plugin-react";
+import reactHooks from 'eslint-plugin-react-hooks';
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,jsx}"],
+    plugins: {
+      js ,
+      'react-hooks': reactHooks
+    },
+    extends: ["js/recommended"],
+    languageOptions: { globals: globals.browser }
+  },
+  pluginReact.configs.flat.recommended, // React config first
+  reactHooks.configs.flat.recommended,
+  {
+    rules: {
+      "react/prop-types": "off",
+      "react/no-children-prop": "off",
+      'react-hooks/exhaustive-deps': 'warn',
+      "react/react-in-jsx-scope" : "off",
+      "react-hooks/set-state-in-effect": "warn",
+      "react-hooks/immutability":"off"
+    },
+  },
+
+]);
diff --git a/welcome/public/index.html → welcome/index.html b/welcome/public/index.html → welcome/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -12,7 +12,7 @@
     <title>SURFconext Invite</title>
   </head>
   <body class="sds--color-palette--blue">
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="app"></div>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/welcome/package.json b/welcome/package.json
@@ -2,6 +2,13 @@
   "name": "welcome",
   "version": "0.1.0",
   "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
   "dependencies": {
     "@surfnet/sds": "^0.0.150",
     "dompurify": "^3.2.6",
@@ -24,22 +31,22 @@
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@vitejs/plugin-react": "^5.1.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^16.5.0",
     "http-proxy-middleware": "^3.0.5",
-    "react-scripts": "5.0.1",
-    "sass": "^1.90.0"
+    "sass": "^1.90.0",
+    "vite": "^7.2.2",
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^4.0.8"
   },
   "resolutions": {
     "nth-check": "^2.1.1",
     "tough-cookie": "^5.1.2",
     "word-wrap": "^1.2.5"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "proxy": "http://127.0.0.1:8888/",
   "eslintConfig": {
     "extends": [
       "react-app",

diff --git a/welcome/src/__tests__/locale/en.test.js b/welcome/src/__tests__/locale/en.test.js
@@ -1,4 +1,4 @@
-import React from "react";
+import { describe, it, expect } from 'vitest';
 import en from "../../locale/en";
 import nl from "../../locale/nl";
 
@@ -10,22 +10,23 @@ expect.extend({
         };
     },
 });
-
-test("All translations exists in all bundles", () => {
-    const contains = (translation, translationToVerify, keyCollection, parents) => {
-        Object.keys(translation).forEach(key => {
-            expect(translationToVerify).toContainKey(key);
-            const value = translation[key];
-            keyCollection.push(parents+key);
-            if (typeof value === "object") {
-                contains(value, translationToVerify[key], keyCollection, parents+key+".")
-            }
-        });
-    };
-    const keyCollectionEN = [];
-    contains(en, nl, keyCollectionEN, '');
-    const keyCollectionNL = [];
-    contains(nl, en, keyCollectionNL, '');
-    const positionalMismatches = keyCollectionEN.filter((item, index) => keyCollectionNL[index] !== item);
-    expect(positionalMismatches).toEqual([])
+describe('En', () => {
+    it("All translations exists in all bundles", () => {
+        const contains = (translation, translationToVerify, keyCollection, parents) => {
+            Object.keys(translation).forEach(key => {
+                expect(translationToVerify).toContainKey(key);
+                const value = translation[key];
+                keyCollection.push(parents+key);
+                if (typeof value === "object") {
+                    contains(value, translationToVerify[key], keyCollection, parents+key+".")
+                }
+            });
+        };
+        const keyCollectionEN = [];
+        contains(en, nl, keyCollectionEN, '');
+        const keyCollectionNL = [];
+        contains(nl, en, keyCollectionNL, '');
+        const positionalMismatches = keyCollectionEN.filter((item, index) => keyCollectionNL[index] !== item);
+        expect(positionalMismatches).toEqual([])
+    });
 });
diff --git a/welcome/src/__tests__/stores/AppStore.test.js b/welcome/src/__tests__/stores/AppStore.test.js
@@ -1,12 +1,14 @@
-import React from "react";
+import { describe, it, expect } from 'vitest';
 import {useAppStore} from "../../stores/AppStore";
 
-test("Store outside functional component", () => {
-    const csrfToken = useAppStore.getState().csrfToken;
-    expect(csrfToken).toBeNull();
+describe('AppStore', () => {
+    it("Store outside functional component", () => {
+        const csrfToken = useAppStore.getState().csrfToken;
+        expect(csrfToken).toBeNull();
 
-    useAppStore.setState({csrfToken: "test"});
+        useAppStore.setState({csrfToken: "test"});
 
-    const updatedCsrfToken = useAppStore.getState().csrfToken;
-    expect(updatedCsrfToken).toEqual("test");
+        const updatedCsrfToken = useAppStore.getState().csrfToken;
+        expect(updatedCsrfToken).toEqual("test");
+    });
 });
diff --git a/welcome/src/__tests__/utils/Utils.test.js b/welcome/src/__tests__/utils/Utils.test.js
@@ -1,8 +1,9 @@
-import React from "react";
+import { describe, it, expect } from 'vitest';
 import {
     sanitizeURL
 } from "../../utils/Utils";
-
-test("Test sanitizeURL", () => {
-    expect(sanitizeURL("https://invite.test2.surfconext.nl")).toEqual("https://invite.test2.surfconext.nl");
+describe('Utils', () => {
+    it("Test sanitizeURL", () => {
+        expect(sanitizeURL("https://invite.test2.surfconext.nl")).toEqual("https://invite.test2.surfconext.nl");
+    });
 });
diff --git a/welcome/src/__tests__/validations/regExps.test.js b/welcome/src/__tests__/validations/regExps.test.js
@@ -1,7 +1,8 @@
-import React from "react";
+import { describe, it, expect } from 'vitest';
 import {constructShortName} from "../../validations/regExps";
-
-test("Sanitize URN", () => {
-    const urn = constructShortName(" !@#$%^&*(9IIOO   UU  plp ")
-    expect(urn).toEqual("9iioo_uu_plp")
+describe('regExps', () => {
+    it("Sanitize URN", () => {
+        const urn = constructShortName(" !@#$%^&*(9IIOO   UU  plp ")
+        expect(urn).toEqual("9iioo_uu_plp")
+    });
 });
diff --git a/welcome/src/components/BreadCrumb.jsx b/welcome/src/components/BreadCrumb.jsx
@@ -4,7 +4,7 @@ import {useAppStore} from "../stores/AppStore";
 import {Link} from "react-router-dom";
 import {isEmpty} from "../utils/Utils";
 import DOMPurify from "dompurify";
-import {ReactComponent as ArrowRight} from "@surfnet/sds/icons/functional-icons/arrow-right-2.svg";
+import ArrowRight from "@surfnet/sds/icons/functional-icons/arrow-right-2.svg";
 
 export const BreadCrumb = () => {
 

diff --git a/welcome/src/components/BreadCrumb.scss b/welcome/src/components/BreadCrumb.scss
@@ -1,18 +1,18 @@
-@import "../styles/vars.scss";
+@use "../styles/vars.scss";
 
 .sds--breadcrumb {
     margin: 0 auto;
     color: black;
-    background-color: $background;
+    background-color: vars.$background;
     padding-top: 10px;
 
-    @media (max-width: $medium) {
+    @media (max-width: vars.$medium) {
         padding: 10px 15px 0 15px;
     }
 
     ol.sds--breadcrumb--list {
         min-height: 32px;
-        max-width: $medium;
+        max-width: vars.$medium;
         margin: 0 auto 0 auto;
         position: relative;
         transition: margin 150ms ease-in-out;
@@ -37,7 +37,7 @@
         margin-left: auto;
         font-weight: bold;
 
-        @media (max-width: $medium) {
+        @media (max-width: vars.$medium) {
             display: none;
         }
 

diff --git a/welcome/src/components/ClipBoardCopy.jsx b/welcome/src/components/ClipBoardCopy.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import "./ClipBoardCopy.scss";
-import {ReactComponent as Duplicate} from "@surfnet/sds//icons/functional-icons/duplicate.svg";
+import Duplicate from "@surfnet/sds//icons/functional-icons/duplicate.svg";
 import {CopyToClipboard} from "react-copy-to-clipboard";
 
 export default function ClipBoardCopy({txt, right = false, transparentBackground = false, input = false}) {

diff --git a/welcome/src/components/ClipBoardCopy.scss b/welcome/src/components/ClipBoardCopy.scss
@@ -1,4 +1,4 @@
-@import "../styles/vars";
+@use "../styles/vars";
 
 section.copy-to-clipboard {
     border-radius: 4px;

diff --git a/welcome/src/components/ErrorIndicator.jsx b/welcome/src/components/ErrorIndicator.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import "./ErrorIndicator.scss";
-import {ReactComponent as CriticalIcon} from "../icons/critical.svg";
+import CriticalIcon from "../icons/critical.svg";
 import DOMPurify from "dompurify";
 
 export default function ErrorIndicator({msg, standalone = false, decode = true}) {

diff --git a/welcome/src/components/Header.jsx b/welcome/src/components/Header.jsx
@@ -8,7 +8,7 @@ import I18n from "../locale/I18n";
 
 export const Header = () => {
 
-    const {user, config} = useAppStore(state => state);
+    const {user} = useAppStore(state => state);
     const actions = [];
     return (
         <div className="header-container">
@@ -20,7 +20,6 @@ export const Header = () => {
                 </Link>
                 {(user && user.id) &&
                     <UserMenu user={user}
-                              config={config}
                               actions={actions}
                     />
                 }

diff --git a/welcome/src/components/Header.scss b/welcome/src/components/Header.scss
@@ -1,4 +1,4 @@
-@import "../styles/vars.scss";
+@use "../styles/vars.scss";
 
 .header-container {
 
@@ -14,9 +14,9 @@
         align-items: center;
         width: 100%;
         margin: 0 auto;
-        max-width: $medium;
+        max-width: vars.$medium;
 
-        @media (max-width: $medium) {
+        @media (max-width: vars.$medium) {
             padding: 0 15px;
         }
 

diff --git a/welcome/src/components/InputField.jsx b/welcome/src/components/InputField.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ReactComponent as ArrowRight} from "@surfnet/sds/icons/functional-icons/arrow-right-2.svg";
+import ArrowRight from "@surfnet/sds/icons/functional-icons/arrow-right-2.svg";
 
 import {Tooltip} from "@surfnet/sds";
 import "./InputField.scss";

diff --git a/welcome/src/components/InputField.scss b/welcome/src/components/InputField.scss
@@ -1,5 +1,5 @@
-@import "../styles/vars.scss";
-@import "../styles/mixins";
+@use "../styles/vars.scss";
+@use "../styles/mixins";
 
 .input-field {
     @include input-field;
@@ -13,7 +13,7 @@
         width: 100%;
         border: 1px solid var(--sds--color--gray--300);
         padding: 6px 12px;
-        border-radius: $br;
+        border-radius: vars.$br;
         font-size: 16px;
         height: 48px;
         color: black;