Updates/idp wizard v2

.gitignore

@@ -8,3 +8,4 @@ node
 .factorypath
 .project
 .settings/
+.playwright-mcp/

README.md

@@ -8,6 +8,32 @@ In addition to providing support for Identity Providers using OIDC and SAML, the
 
 ![youtube-video-gif](https://github.com/p2-inc/idp-wizard/assets/244253/e9b421c0-b487-4c07-9eed-87ea89fc574b)
 
+## Repository structure
+
+This is a pnpm workspace monorepo. The frontend apps live under `apps/`, the Java Keycloak SPI extension lives under `ext/`, and the Maven build at the root packages everything into a deployable JAR.
+
+```
+idp-wizard/
+├── apps/
+│   ├── wizard-v1/              # Original PatternFly + webpack app (current production build)
+│   └── wizard-v2/              # New Vite + Tailwind + shadcn + TanStack Router app (in development)
+│       ├── docker/             # Dev Keycloak setup with pre-configured realm and client
+│       ├── public/             # Static assets (favicons, logos, provider images, wizard screenshots)
+│       ├── src/                # Application source
+│       └── wizards/            # Declarative JSON wizard definitions
+├── ext/                        # Java Keycloak SPI extension
+├── pom.xml                     # Maven build — packages the active frontend into a Keycloak JAR
+└── pnpm-workspace.yaml
+```
+
+### wizard-v1
+
+The original implementation. Each identity provider has its own set of per-step React components built on PatternFly 4. This is the currently deployed version.
+
+### wizard-v2
+
+A rewrite in progress. Wizards are defined declaratively as JSON files (see `apps/wizard-v2/wizards/`) and rendered by a generic runtime engine, eliminating the need for per-provider component trees. Built with Vite, Tailwind CSS, shadcn/ui, TanStack Router, and oidc-spa for authentication. See [apps/wizard-v2/README.md](apps/wizard-v2/README.md) for full details.
+
 ## Quick start
 
 The easiest way to get started is our [Docker image](https://quay.io/repository/phasetwo/phasetwo-keycloak?tab=info). Documentation and examples for using it are in the [phasetwo-containers](https://github.com/p2-inc/phasetwo-containers) repo. The most recent version of this extension is included.
@@ -34,7 +60,9 @@ There are some reasonable defaults used for the configuration, but the behavior
 
 ## Building and installing
 
-This uses the `frontend-maven-plugin` to build UI code and then packages it as a jar file that can be installed as an extension in Keycloak. Checkout this project and run `mvn package`, which will produce a jar in the `target/` directory. Place the jar in the `providers` dir of your Keycloak distribution.
+This uses the `frontend-maven-plugin` to build the active frontend app and packages it as a JAR that can be installed as a Keycloak extension. Run `mvn package` from the repo root, which produces a JAR in `target/`. Place it in the `providers/` directory of your Keycloak distribution.
+
+The `pom.xml` `workingDirectory` controls which app is built. It currently points at `apps/wizard-v1`. When wizard-v2 is ready for production this will be updated to `apps/wizard-v2`.
 
 ### Dependencies
 
@@ -78,47 +106,44 @@ Note: By submitting any code, documentation, or other materials submitted to thi
 
 ### Working with the code
 
-Run the latest version of the Phase Two enhanced Keycloak distribution:
+#### wizard-v1 (current)
+
+Run the Phase Two Keycloak distribution, create a realm, and in the `idp-wizard` client configuration update the redirect URI to `http://localhost:9090/*` and add `http://localhost:9090` to Web Origins. Download the client's `keycloak.json` and place it in `apps/wizard-v1/src/keycloak.json`.
+
+Using the wizard at a different relative path than `/auth`? Update the following:
+
+- `RELATIVE_PATH` within [routes.tsx](./apps/wizard-v1/src/app/routes.tsx)
+- `wizard.ftl` ([login](./ext/main/resources/theme/wizard/login/wizard.ftl), [templates](./ext/main/resources/theme-resources/templates/wizard.ftl)) `<base href...`
+- [keycloak.json](./apps/wizard-v1/src/keycloak.json) key of `auth-server-url`
 
 ```bash
-docker run --name phasetwo_test --rm -p 8080:8080 \
-    -e KEYCLOAK_ADMIN=admin \
-    -e KEYCLOAK_ADMIN_PASSWORD=admin \
-    -e KC_HTTP_RELATIVE_PATH=/auth \
-    quay.io/phasetwo/phasetwo-keycloak:latest \
-    start-dev \
-    --spi-email-template-provider=freemarker-plus-mustache \
-    --spi-email-template-freemarker-plus-mustache-enabled=true
+pnpm install
+cd apps/wizard-v1
+pnpm start:dev
 ```
 
-Build and run a local container with the idp-wizard extension (uses `Dockerfile` + `docker-compose.yml` in this repo):
+To build and test the full JAR-packaged extension in a local container:
 
 ```bash
 mvn clean package
 docker compose up --build
 ```
 
-Create a Realm, and in the `idp-wizard` Client configuration, update redirect URI for `http://localhost:9090/*` (default for the IdP wizard) and add `http://localhost:9090` to the Web Origins. Download the Client's `keycloak.json` and put it in `src/keycloak.json`.
-
-Using wizard at a different relative path than `/auth`? If so, make sure to update the following:
-
-- `RELATIVE_PATH` within [routes.tsx](./src/app/routes.tsx)
-- `wizard.ftl` ([login](./ext/main/resources/theme/wizard/login/wizard.ftl), [templates](./ext/main/resources/theme-resources/templates/wizard.ftl)) `<base href...`
-- [keycloak.json](./src/keycloak.json) key of `auth-server-url`
+#### wizard-v2 (in development)
 
-Start the idp-wizard:
+See [apps/wizard-v2/README.md](apps/wizard-v2/README.md) for full setup instructions.
 
 ```bash
-git clone https://github.com/p2-inc/idp-wizard
-cd idp-wizard
-pnpm install && pnpm start:dev
+cp apps/wizard-v2/.env.local.sample apps/wizard-v2/.env.local
+cd apps/wizard-v2/docker && docker compose up
+cd apps/wizard-v2 && pnpm dev
 ```
 
 ## License
 
 The extensions herein are used in the [Phase Two](https://phasetwo.io) cloud offering, and are released here as part of its commitment to making its [core extensions](https://phasetwo.io/docs/introduction/open-source) open source. Please consult the [license](COPYING) for information regarding use.
 
-We’ve changed the license of our core extensions from the AGPL v3 to the [Elastic License v2](https://github.com/elastic/elasticsearch/blob/main/licenses/ELASTIC-LICENSE-2.0.txt).
+We've changed the license of our core extensions from the AGPL v3 to the [Elastic License v2](https://github.com/elastic/elasticsearch/blob/main/licenses/ELASTIC-LICENSE-2.0.txt).
 
 - Our blog post on the subject https://phasetwo.io/blog/licensing-change/
 - An attempt at a clarification https://github.com/p2-inc/keycloak-orgs/issues/81#issuecomment-1554683102

apps/wizard-v1/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "idp-wizard",
+  "version": "0.0.2",
+  "description": "Frontend for PhaseTwo Identity Provider Application",
+  "repository": "https://github.com/p2-inc/idp-wizard",
+  "homepage": "http://app.phasetwo.io/",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dr:surge": "node dr-surge.js",
+    "build": "rimraf dist && webpack --config webpack.prod.js && node dr-surge.js",
+    "start": "sirv dist --cors --single --host --port 8080",
+    "start:dev": "webpack serve --color --progress --config webpack.dev.js",
+    "test": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "eslint": "eslint --ext .tsx,.js ./src/",
+    "format": "prettier --check --write ./src/**/*.{tsx,ts}",
+    "type-check": "tsc --noEmit",
+    "build:bundle-profile": "webpack --config webpack.prod.js --profile --json > stats.json",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@keycloak/keycloak-admin-client": "26.5.7",
+    "@patternfly/patternfly": "^4.224.5",
+    "@patternfly/react-core": "^4.278.1",
+    "@patternfly/react-icons": "^4.93.7",
+    "@patternfly/react-styles": "^4.92.8",
+    "@patternfly/react-table": "^4.113.7",
+    "@react-keycloak/web": "^3.4.0",
+    "@reduxjs/toolkit": "^1.9.7",
+    "axios": "^1.14.0",
+    "classnames": "^2.5.1",
+    "formik": "^2.4.9",
+    "keycloak-js": "^25.0.6",
+    "lodash": "^4.17.23",
+    "nanoid": "^3.3.11",
+    "nanoid-dictionary": "^4.3.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hot-toast": "^2.6.0",
+    "react-redux": "^7.2.9",
+    "react-router-dom": "^6.30.3",
+    "react-use": "^17.6.0",
+    "redux-persist": "^6.0.0",
+    "sirv-cli": "^1.0.14",
+    "yup": "^0.32.11"
+  },
+  "devDependencies": {
+    "@types/enzyme": "^3.10.19",
+    "@types/jest": "^30.0.0",
+    "@types/victory": "^33.1.5",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "astroturf": "^1.2.0",
+    "autoprefixer": "^10.4.27",
+    "copy-webpack-plugin": "^9.1.0",
+    "css-loader": "^5.2.7",
+    "css-minimizer-webpack-plugin": "^3.4.1",
+    "dotenv-webpack": "^7.1.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.8",
+    "enzyme-to-json": "^3.6.2",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.6.6",
+    "imagemin": "^8.0.1",
+    "jest": "^30.3.0",
+    "jest-environment-jsdom": "^30.3.0",
+    "mini-css-extract-plugin": "^1.6.2",
+    "postcss": "^8.5.8",
+    "postcss-loader": "^6.2.1",
+    "postcss-nested": "^7.0.2",
+    "prettier": "^2.8.8",
+    "prop-types": "^15.8.1",
+    "raw-loader": "^4.0.2",
+    "react-axe": "^3.5.4",
+    "react-docgen-typescript-loader": "^3.7.2",
+    "regenerator-runtime": "^0.13.11",
+    "rimraf": "^3.0.2",
+    "style-loader": "^2.0.0",
+    "svg-url-loader": "^7.1.1",
+    "terser-webpack-plugin": "^5.4.0",
+    "ts-jest": "^29.4.9",
+    "ts-loader": "^9.5.4",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "tslib": "^2.8.1",
+    "typescript": "^4.9.5",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.105.4",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.3",
+    "webpack-merge": "^5.10.0"
+  }
+}