develop into staging

.github/workflows/test-build-push.yml

@@ -2,6 +2,9 @@ name: Test, Build and Publish
 
 on:
   push:
+    branches: [ "main", "develop" ]
+    tags: [ "v*.*.*" ]
+  pull_request:
   workflow_dispatch:
     inputs:
       dockerTag:
@@ -80,7 +83,7 @@ jobs:
   build-and-push-image:
     name: Build and Push Docker Image
     runs-on: ubuntu-latest
-    if: contains(fromJSON('["main", "develop", "redlink"]'), github.ref_name) || github.event.inputs.dockerTag != ''
+    if: contains(fromJSON('["main", "develop"]'), github.ref_name) || startsWith(github.ref, 'refs/tags/v') || github.event.inputs.dockerTag != ''
     needs:
       - test
     permissions:
@@ -108,6 +111,10 @@ jobs:
             type=raw,value=1.0.${{ github.run_number }}.{{sha}}
             # tag with branch-name
             type=ref,event=branch,enable=${{ github.event.inputs.dockerTag == '' }}
+            # tags from git tag (e.g. v1.0.0 -> 1.0.0, 1.0, 1)
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
             # latest-tag on the default-branch (main)
             type=raw,value=latest,enable={{is_default_branch}}
             # a manually provided tag

.gitignore

@@ -10,3 +10,4 @@ more-configuration-api-client-ts*
 ConfiguratorAPI.yaml
 src/generated-sources
 tests/coverage
+.env

Dockerfile

@@ -7,6 +7,10 @@ RUN npm ci
 COPY . .
 ARG VITE_GIT_BRANCH
 ARG VITE_GIT_REVISION
+ARG BACKEND_URL=https://studymanager.platform-test.more.redlink.io/
+ARG KEYCLOAK_URL=https://auth.more.redlink.io
+ARG KEYCLOAK_REALM=Auth-Client-Test
+ARG KEYCLOAK_CLIENTID=oauth2-pkce-client
 RUN npm run package:quick
 
 # production stage
@@ -15,6 +19,13 @@ COPY --from=build-stage /app/dist /usr/share/nginx/html
 COPY docker/nginx/*.conf.template /etc/nginx/templates/
 EXPOSE 80
 
-ENV MORE_BACKEND_URL=https://studymanager.more.redlink.io/
+ARG BACKEND_URL=https://studymanager.platform-test.more.redlink.io/
+ENV BACKEND_URL=$BACKEND_URL
+ARG KEYCLOAK_URL=https://auth.more.redlink.io
+ENV KEYCLOAK_URL=$KEYCLOAK_URL
+ARG KEYCLOAK_REALM=Auth-Client-Test
+ENV KEYCLOAK_REALM=$KEYCLOAK_REALM
+ARG KEYCLOAK_CLIENTID=oauth2-pkce-client
+ENV KEYCLOAK_CLIENTID=$KEYCLOAK_CLIENTID
 
 CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,20 +1,27 @@
 # MORE / Front-End
+
 The Management & Monitoring Backend (MMB) is the front-end to manage and monitor the back-end.
 The [frontend`s architecture](docs/adr) is based upon an Architectural Decision Records (ADR).
 Mainly, Vue 3, vite, TS, tailwindCSS and PrimeVue are used.
 To have a consistent code style and quality, we use Eslint in combination with prettier.
 
 # Setup
+
 ```
 nvm use                   # Optional, let nvm use the needed version
 npm i                     # install all dependencies
 npm run generate:api      # generate needed sourced from BE, for generation as in the pipeline, java 17 must be set in your path
 npm run dev               # start local development server
 ```
-See [nvm](https://github.com/nvm-sh/nvm) for more. The local front-end can be visited on http://localhost:3000, the [gateway](https://github.com/MORE-Platform/more-data-gateway), [back-end](https://github.com/MORE-Platform/more-studymanager-backend) with their dependencies must also run locally. See `vite.config.ts` for the required port for localhost.
+
+See [nvm](https://github.com/nvm-sh/nvm) for more. The local front-end can be visited on http://localhost:3000,
+the [gateway](https://github.com/MORE-Platform/more-data-gateway), [back-end](https://github.com/MORE-Platform/more-studymanager-backend)
+with their dependencies must also run locally. See `vite.config.ts` for the required port for localhost.
 
 ## Intellij, Webstorm ESLint configuration
-Set the EsLint settings for Webstorm in Preferences --> Languages & Frameworks --> Javascript --> Code Quality Tools --> ESLint
+
+Set the EsLint settings for Webstorm in Preferences --> Languages & Frameworks --> Javascript --> Code Quality Tools -->
+ESLint
 
 - Automatic ESLint config check
 - File extensions to check: `{**/*,*}.{js,ts,html,vue,json}`
@@ -23,6 +30,7 @@ Set the EsLint settings for Webstorm in Preferences --> Languages & Frameworks -
 **Currently not working because of Intellij IDEs..., use `npm run lint:fix` for now**
 
 # Scripts
+
 - `npm i`: install dependencies / node modules
 - `npm run`: shows all possible `npm` run commands including generation, development, linting, testing, and building
 
@@ -53,11 +61,11 @@ First-party plugins needed for Tailwind UI:
 - [tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin)
 - [tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio)
 
-
-The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
+The template uses Vue 3 `<script setup>` SFCs, check out
+the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
 ## Generation
+
 Make sure that the enum structure within `openapi/StudyManagerApi.yml` is
 
 ```
@@ -77,9 +85,19 @@ Make sure that the enum structure within `openapi/StudyManagerApi.yml` is
               - DAY
 
 ```
+
 Otherwise, the generated enums will be duplicated, leading to errors.
 
 ## Testing Environment with Vitest
+
+To test the frontend with a deployed backend server, you have to set environment variable `BACKEND_URL` to the
+desired backend.
+
+For the Keycloak configuration, the environment variables `KEYCLOAK_URL`, `KEYCLOAK_REALM`, and `KEYCLOAK_CLIENTID`
+can be used to override the default fallback values.
+
+For testing with a local backend use `npm run dev:local`
+
 Run
 
 ```
@@ -89,3 +107,28 @@ npm run test:unit
 - [Vitest Documentation](https://vitest.dev/api/)
 - [Vitest quick explanation](https://www.youtube.com/watch?v=snCLQmINqCU&ab_channel=LearnVue)
 - [Vite introduction with Vue](https://www.youtube.com/watch?v=FJRuG85tXV0&ab_channel=ProgramWithErik)
+
+# Tagging and Deployment Strategy
+
+To ensure safe and traceable deployments, we use a Git tagging strategy.
+
+## Tag Format
+
+The standard tag format is `v<Major>.<Minor>.<Patch>`, for example: `v1.0.1`.
+
+## CI/CD Workflow
+
+The GitHub Action pipeline is configured to:
+
+- **Build and Test** on any pull request and on pushes to `main` and `develop`.
+- **Build and Publish Docker Image** when:
+  - A push occurs on `main` or `develop`.
+  - A tag matching `v*.*.*` is pushed.
+  - Manually triggered via `workflow_dispatch` with a custom tag.
+
+Docker images are automatically tagged with:
+
+- The full Git tag (if triggered by a tag).
+- The branch name (if triggered by a branch push).
+- `latest` (if on the default branch).
+- A unique identifier including the run number and SHA.

docker/nginx/default.conf.template

@@ -21,13 +21,13 @@ server {
 
     # Proxy API and other backend services
     location /api {
-        proxy_pass ${MORE_BACKEND_URL}/api;
+        proxy_pass ${BACKEND_URL}/api;
     }
     location /login {
-        proxy_pass ${MORE_BACKEND_URL}/login;
+        proxy_pass ${BACKEND_URL}/login;
     }
     location /logout {
-        proxy_pass ${MORE_BACKEND_URL}/logout;
+        proxy_pass ${BACKEND_URL}/logout;
     }
 
 }

docs/feature/conduct-study-without-app/TechnicalDocumentation.md

@@ -0,0 +1,126 @@
+# <span style="color: #6E8FAC">Technical Documentation: Conduct a MORE Study without the App</span>
+
+## <span style="color: #6E8FAC">Overview</span>
+MORE supports a study mode in which the mobile app is not required. In this mode, participants complete questionnaires via the Participant Portal web application instead of using the MORE mobile app.
+
+Currently, this mode supports LimeSurvey observations only, but the architecture allows extension to additional observation types in the future.
+
+---
+
+## <span style="color: #6E8FAC">System Architecture</span>
+
+In LimeSurvey-only studies, the MORE mobile application is replaced by the Participant Portal as the participant-facing client.
+
+### <span style="color: #6E8FAC">The Participant Portal</span>
+- authenticates participants using a generated login URL and code
+- retrieves observation metadata via the Gateway
+- displays active LimeSurvey observations
+- redirects participants to LimeSurvey questionnaires when schedules are active
+
+Survey availability depends on observation schedule activation.
+
+### <span style="color: #6E8FAC">Study Manager Architecture and Extension</span>
+
+#### <span style="color: #6E8FAC">Activate Participant Portal (StudyManager)</span>
+
+Participant Portal access is enabled via an extension of the study configuration schema.
+
+```yaml
+# StudyManagerAPI.yaml - Study Schema extension
+applicationAccess:
+  type: array
+  description: Application types which the user has access to
+  items:
+    type: string
+```
+
+The `applicationAccess` field defines which applications participants can use besides the MORE mobile app.
+
+Currently supported value:
+- `participantPortal`
+
+  If present, participants can authenticate via the Participant Portal.
+
+#### <span style="color: #6E8FAC">Participant Portal Access Mechanism</span>
+After activating the Participant Portal functionality, access credentials are generated per participant within the StudyManager.
+
+The backend generates:
+##### 1. Participant Portal URL
+The backend generates a portal URL containing the study ID and a participant reference, such as:
+- `participantId`
+- `observationId`
+- `scheduleId`
+
+This prevents exposure of internal identifiers.
+
+##### 2. Participant Portal Login Code:
+The login code acts as the password for the Participant to authenticate with the Participant Portal. It is similar to the login token of the mobile app, but the Participant will need to provide it every time he accesses the Participant Portal.
+
+##### 3. Access Roles
+Credential generation is available to users with the roles:
+- Study Administrator
+- Study Operator
+
+The Participant Portal communicates directly with the MORE Gateway, which performs authentication during portal login.
+
+#### <span style="color: #6E8FAC">Credential Generation Flow</span>
+
+Credential generation is triggered from the StudyManager participant list UI.
+
+Generated credentials include:
+
+| Component  | Purpose                         |
+| ---------- | ------------------------------- |
+| Portal URL | Identifies portal entry context |
+| Login code | Authenticates participant       |
+
+The generated URL remains stable even if observation configurations change.
+
+#### <span style="color: #6E8FAC">Observation Linkage Logic</span>
+This is the same as before (see also [more-limesurvey repository](https://github.com/MORE-Platform/more-limesurvey):
+
+LimeSurvey observations must be explicitly linked to LimeSurvey survey IDs.
+
+**During observation creation:**
+1. A LimeSurvey observation type is selected
+2. The survey ID is provided
+3. The observation schedule is configured
+
+Observation availability in the Participant Portal depends on schedule activation.
+
+Only active observations expose redirect links.
+
+Further configuration details are available in the MORE LimeSurvey repository:
+https://github.com/MORE-Platform/more-limesurvey
+
+#### <span style="color: #6E8FAC">LimeSurvey Integration</span>
+LimeSurvey questionnaires are accessed via redirect links generated dynamically by the backend. It is the same process that is also used for the More App. However the final links are put together by the Participant Portal itself.
+
+**Redirect links:**
+- are schedule-bound
+- are generated per observation instance
+- are validated by the Gateway before forwarding
+
+### <span style="color: #6E8FAC">Participant Portal Architecture</span>
+The Participant Portal is a standalone web client responsible for:
+- participant authentication via login code
+- consent state handling
+-. observation retrieval via Gateway
+- LimeSurvey redirect initiation
+
+Repository: https://github.com/MORE-Platform/more-participant-portal
+
+The portal currently supports LimeSurvey observations only but is designed for extensibility toward additional observation types.
+
+#### <span style="color: #6E8FAC">Tech Stack Used</span>
+| Tool              | Purpose                      |
+| ----------------- | ---------------------------- |
+| Vue 3             | UI framework                 |
+| Vite              | Build tooling                |
+| TypeScript        | Static typing                |
+| Vue Router        | Client-side routing          |
+| Pinia             | Client-side state management |
+| TanStack Query    | Server state synchronization |
+| TailwindCSS       | Utility-based styling        |
+| PrimeVue          | Component library            |
+| OpenAPI Generator | Typed API client generation  |