diff --git a/.forgejo/workflows/build.yaml b/.forgejo/workflows/build.yaml deleted file mode 100644 index 5a0bcc2..0000000 --- a/.forgejo/workflows/build.yaml +++ /dev/null @@ -1,72 +0,0 @@ -on: - push: - workflow_dispatch: - inputs: - build: - description: "Build package" - required: true - default: false - type: boolean - -jobs: - build: - runs-on: container - steps: - - uses: actions/checkout@v4 - with: - fetch-depth: 0 - - - name: Get the version from git - id: version - run: echo "version=$(git describe --dirty --tags)" >> $GITHUB_OUTPUT - - - name: Check if the package should be built - id: builder - env: - RUN: ${{ toJSON(inputs.build || !contains(steps.version.outputs.version, '-')) }} - run: | - echo "run=$RUN" >> $GITHUB_OUTPUT - echo "Run build: $RUN" - - - name: Info - version and if the image container should be built - env: - VERSION: ${{ steps.version.outputs.version }} - RUN: ${{ steps.builder.outputs.run }} - FORCE: ${{ toJSON(inputs.build) }} - run: | - echo "Version $VERSION, force (manual input): $FORCE, run the build: $RUN" - - - uses: pnpm/action-setup@v4 - name: Install pnpm - with: - run_install: false - version: 10 - - - name: Install Node.js - uses: actions/setup-node@v4 - with: - node-version: 20 - cache: "pnpm" - - - name: Install dependencies - run: pnpm install - - - name: Update version.json from git describe - run: pnpm run version - - - name: Set the version in package.json - env: - VERSION: ${{ steps.version.outputs.version }} - run: sed "s/0.0.0/${VERSION}/" -i package.json - - - name: Build package (transpile ts => js) - run: pnpm run build --base /oidc-test-web - - - name: Set registry token for pnpm" - env: - LOCAL_NPM_TOKEN: ${{ secrets.LOCAL_NPM_TOKEN }} - run: pnpm set "//code.philo.ydns.eu/api/packages/philorg/npm/:_authToken=${LOCAL_NPM_TOKEN}" - - - name: Publish - if: fromJSON(steps.builder.outputs.run) - run: pnpm publish --no-git-checks diff --git a/.woodpecker/build.yaml b/.woodpecker/build.yaml new file mode 100644 index 0000000..bb78fa7 --- /dev/null +++ b/.woodpecker/build.yaml @@ -0,0 +1,45 @@ +when: + - event: manual + - event: tag + +#depends_on: + #- test + +steps: + npm: + image: code.philo.ydns.eu/philorg/pnpm + environment: + ORG: philorg + REGISTRY_TOKEN: + from_secret: registry_token + volumes: + - pnpm:/root/.local/share/pnpm + commands: + - pnpm install --frozen-lockfile + - pnpm set "//code.philo.ydns.eu/api/packages/$ORG/npm/:_authToken=$REGISTRY_TOKEN" + - pnpm publish --no-git-checks + failure: ignore + + build_publish: + image: quay.io/podman/stable:latest + # Caution: This image is built daily. It might fill up your image store quickly. + #pull: true + volumes: + - containers:/var/lib/containers + - pnpm:/root/.local/share/pnpm + # Fill in the trusted checkbox in Woodpecker's settings as well + privileged: true + environment: + registry: code.philo.ydns.eu + org: philorg + container_name: oidc-vue-test + registry_token: + from_secret: registry_token + commands: + # Login at the registry + - podman login -u __token__ --password $registry_token $registry + # Build the container image + - podman build --volume=/var/lib/containers:/var/lib/containers --tag $registry/$org/$container_name:latest --tag $registry/$org/$container_name:$CI_COMMIT_TAG . + # Push the image + - podman push $registry/$org/$container_name:latest + - podman push $registry/$org/$container_name:$CI_COMMIT_TAG diff --git a/Containerfile b/Containerfile index e9815a2..acd663b 100644 --- a/Containerfile +++ b/Containerfile @@ -1,3 +1,20 @@ -FROM docker.io/nginx:alpine +FROM docker.io/node:alpine as base -COPY ./dist /usr/share/nginx/html +ENV PNPM_HOME="/pnpm" +ENV PATH="$PNPM_HOME:$PATH" +RUN corepack enable + + +FROM base as build-stage + +WORKDIR /app +COPY pnpm-lock.yaml . +RUN pnpm fetch --prod +COPY . . +RUN pnpm run build + +FROM docker.io/library/nginx:alpine as production-stage +RUN mkdir /app +COPY --from=build-stage /app/dist /usr/share/nginx/html/oidc-test-web + +CMD ["nginx", "-g", "daemon off;"] diff --git a/README.md b/README.md index 77693ed..cdf090c 100644 --- a/README.md +++ b/README.md @@ -2,27 +2,128 @@ Small web app for experimenting a web app with a Keycloak auth server. -It is a sibbling of the server version (oidc-test)[philorg/oidc-fastapi-test], +It is a sibling of the server version [oidc-test](philorg/oidc-fastapi-test), which acts also as a resource server. -Live demo: https://philo.ydns.eu/oidc-test-web: +Live demo: : + - configured with a test realm on a private Keycloak instance - 2 users are defined: foo (foofoo) and bar (barbar). -## Deployment +**Note**: decoding tokens requires the use of cryto extension, +that web browsers allow only with a secured connection (https). -In a container: +## Configuration + +The app expects that a `settings.json` file is available on the server +at the app's base url. + +For example: + +```json +{ + "keycloakUri": "https://keycloak.your.domain", + "realm": "test", + "authProvider": "keycloak", + "sso": false, + "clientId": "oidc-test-web", + "tokenSandbox": true, + "resourceServerUrl": "https://someserver.your.domain/resourceBaseUrl", + "resourceScopes": [ + "get:time", + "get:bs" + ], + "resourceProviders": { + "resourceProvider1": { + "name": "Third party 1", + "baseUrl": "https://otherserver.your.domain/resources/", + "verifySSL": true, + "resources": { + "public": { + "name": "A public resource", + "url": "resource/public" + }, + "bs": { + "name": "A secured resource, eg by scope", + "url": "resource/secured1" + }, + "time": { + "name": "Another secured resource, eg by role", + "url": "resource/secured2" + } + } + } + } +} +``` + +## Build + +For generating a `dist` directory ready to be copied to a web server +static data tree, it's a straightforward: + +```sh +pnpm run build +``` + +Eventually specify a `base url` (eg. accessible from `https://for.example.com/oidc-test-web`): ```sh pnpm run build --base oidc-test-web -podman run -it --rm -p 8874:80 -v ./dist:/usr/share/nginx/html/oidc-test-web docker.io/nginx:alpine +``` + +## Deployment + +Examples of deployment are presented below. + +- Using the nginx default container, from the development source tree: + +```sh +podman run -it --rm -p 8874:80 -v ./dist:/usr/share/nginx/html/oidc-test-web -v ./settings.json:/usr/share/nginx/html/oidc-test-web/settings.json docker.io/nginx:alpine +``` + +- The build is packaged in a provided container (see *pakcages*), serving with the `/oidc-test-web` base url: + +```sh +podman run -it --rm -p 8874:80 -v ./settings.json:/usr/share/nginx/html/oidc-test-web/settings.json code.philo.ydns.eu/philorg/oidc-vue-test:latest +``` + +- A *quadlet* *systemd* service, in `~/.config/containers/systemd/oidc-vue-test.container`: + +```systemd +[Container] +ContainerName=oidc-vue-test +Image=code.philo.ydns.eu/philorg/oidc-vue-test:latest +Mount=type=bind,source=/path/to/settings.json,destination=/usr/share/nginx/html/oidc-test-web/settings.json +PublishPort=8874:80 + +[Service] +Restart=always +RestartSec=5 + +[Unit] +After=podman-user-wait-network-online.service + +[Install] +WantedBy=default.target +``` + +Run with: + +```sh +systemctl --user daemon-reload +systemcrl --user start oidc-vue-test ``` ## Frontend +YMMV, easy with *Caddy*: + ```Caddyfile handle /oidc-test-web { reverse-proxy hostname.domainame:8874 } redir /oidc-test-web /oidc-test-web/ ``` + +[![status-badge](https://code.philo.ydns.eu/woodpecker/api/badges/18/status.svg)](https://code.philo.ydns.eu/woodpecker/repos/18) diff --git a/package-lock.json b/package-lock.json index e995e6a..81c986b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "typescript", - "version": "0.0.0", + "version": "0.2.9", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "typescript", - "version": "0.0.0", + "version": "0.2.9", "dependencies": { "axios": "^1.7.9", "vue": "3.5.13" diff --git a/package.json b/package.json index ee57e60..65dcd88 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,13 @@ { - "name": "oidc-text-web", - "version": "0.0.0", + "name": "oidc-test-web", + "version": "0.2.9", "type": "module", "scripts": { "dev": "vite --port 3000", "build": "run-p type-check \"build-only {@}\" --", "preview": "vite preview", "build-only": "vite build", - "type-check": "vue-tsc --build", - "version": "echo \"{\\\"version\\\":\\\"$(git describe --tags --dirty --always)\\\"}\" > src/version.json" + "type-check": "vue-tsc --build" }, "dependencies": { "@dsb-norge/vue-keycloak-js": "^3.0.1", @@ -27,6 +26,7 @@ "vite-plugin-vue-devtools": "7.7.0", "vue-tsc": "2.2.0" }, + "packageManager": "pnpm@10.12.1", "publishConfig": { "registry": "http://code.philo.ydns.eu/api/packages/philorg/npm/" } diff --git a/public/styles.css b/public/styles.css index 36de6da..8d4804f 100644 --- a/public/styles.css +++ b/public/styles.css @@ -178,6 +178,9 @@ hr { border: none; cursor: pointer; } +.content .links-to-check span { + margin: auto; +} .token { overflow-wrap: anywhere; diff --git a/src/App.vue b/src/App.vue index c120088..006f88b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,9 @@