fix(webapp): fix lang query location (#9337)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.coderabbit.yaml

@@ -0,0 +1,103 @@
+# CodeRabbit Configuration
+# https://docs.coderabbit.ai/guides/configure-coderabbit
+
+language: de
+
+reviews:
+  pre_merge_checks:
+    docstrings:
+      mode: "off"
+
+  # Automatisches Review für alle PRs
+  auto_review:
+    enabled: true
+    drafts: false
+    base_branches:
+      - master
+      - main
+
+  auto_approve:
+    enabled: true
+
+  # Review-Einstellungen
+  request_changes_workflow: true
+  high_level_summary: true
+  poem: false
+  review_status: true
+  collapse_walkthrough: false
+  changed_files_summary: true
+
+  # Pfad-Filter (Dateien die ignoriert werden)
+  path_filters:
+    - "!**/*.lock"
+    - "!**/package-lock.json"
+    - "!**/yarn.lock"
+    - "!**/*.snap"
+    - "!**/coverage/**"
+    - "!**/dist/**"
+    - "!**/node_modules/**"
+    - "!**/*.min.js"
+    - "!**/*.min.css"
+    - "!**/.git/**"
+    - "!**/storybook-static/**"
+
+  # Instruktionen für spezifische Pfade
+  path_instructions:
+    - path: "webapp/**/*.vue"
+      instructions: |
+        Prüfe Vue.js Best Practices:
+        - Composition API Verwendung
+        - Props Validierung
+        - Event-Handling
+        - Reaktivität
+
+    - path: "webapp/**/*.spec.js"
+      instructions: |
+        Prüfe Test-Qualität:
+        - Aussagekräftige Test-Namen
+        - Edge Cases abgedeckt
+        - Mocking korrekt verwendet
+
+    - path: "backend/**/*.js"
+      instructions: |
+        Prüfe Backend Best Practices:
+        - Error Handling
+        - Input Validierung
+        - SQL Injection Prevention
+        - Performance (N+1 Queries)
+
+    - path: "packages/ui/**/*.ts"
+      instructions: |
+        Prüfe UI Library Standards:
+        - TypeScript Typisierung
+        - Vue 2/3 Kompatibilität (vue-demi)
+        - Accessibility (WCAG 2.1)
+        - CVA Varianten-Pattern
+
+    - path: "packages/ui/**/*.vue"
+      instructions: |
+        Prüfe UI Komponenten:
+        - Render-Funktion Pattern für vue-demi
+        - Props mit korrekten Types
+        - Slots dokumentiert
+        - Keine Template-Syntax (nur h() für Vue 2/3 Kompatibilität)
+
+# Chat-Befehle
+chat:
+  auto_reply: true
+
+# Ton und Stil
+tone_instructions: |
+  Sei konstruktiv und freundlich.
+  Erkläre das "Warum" hinter Vorschlägen.
+  Priorisiere Sicherheit > Korrektheit > Performance > Lesbarkeit.
+  Schlage konkrete Code-Änderungen vor wenn möglich.
+
+# Knowledge Base (Repository-spezifisches Wissen)
+knowledge_base:
+  learnings:
+    scope: auto
+  issues:
+    scope: auto
+  pull_requests:
+    scope: auto

.github/dependabot.yml

@@ -127,79 +127,70 @@ updates:
     timezone: "Europe/Berlin"
     time: "03:00"
 
-# frontend
+# ui library
-# - package-ecosystem: npm
+- package-ecosystem: npm
-#   open-pull-requests-limit: 99
+  open-pull-requests-limit: 99
-#   directory: "/frontend"
+  directory: "/packages/ui"
-#   rebase-strategy: "disabled"
+  rebase-strategy: "disabled"
-#   schedule:
+  schedule:
-#     interval: weekly
+    interval: weekly
-#     day: "saturday"
+    day: "saturday"
-#     timezone: "Europe/Berlin"
+    timezone: "Europe/Berlin"
-#     time: "03:00"
+    time: "03:00"
-#   groups:
+  groups:
-#     eslint:
+    vue:
-#       applies-to: version-updates
+      applies-to: version-updates
-#       patterns:
+      patterns:
-#         - "eslint*"
+        - "vue*"
-#         - "@eslint*"
+        - "@vue*"
-#     pinia:
+    vite:
-#       applies-to: version-updates
+      applies-to: version-updates
-#       patterns:
+      patterns:
-#         - "pinia*"
+        - "vite*"
-#     react:
+        - "@vitejs*"
-#       applies-to: version-updates
+    vitest:
-#       patterns:
+      applies-to: version-updates
-#         - "react*"
+      patterns:
-#     remark:
+        - "vitest*"
-#       applies-to: version-updates
+        - "@vitest*"
-#       patterns:
+
-#         - "remark*"
+# ui examples
-#     storybook:
+- package-ecosystem: npm
-#       applies-to: version-updates
+  open-pull-requests-limit: 99
-#       patterns:
+  directory: "/packages/ui/examples/vue3-tailwind"
-#         - "storybook"
+  rebase-strategy: "disabled"
-#         - "@storybook*"
+  schedule:
-#     stylelint:
+    interval: weekly
-#       applies-to: version-updates
+    day: "saturday"
-#       patterns:
+    timezone: "Europe/Berlin"
-#         - "stylelint*"
+    time: "03:00"
-#     typescript:
+
-#       applies-to: version-updates
+- package-ecosystem: npm
-#       patterns:
+  open-pull-requests-limit: 99
-#         - "ts*"
+  directory: "/packages/ui/examples/vue3-css"
-#         - "@types*"
+  rebase-strategy: "disabled"
-#         - "typescript"
+  schedule:
-#     vite:
+    interval: weekly
-#       applies-to: version-updates
+    day: "saturday"
-#       patterns:
+    timezone: "Europe/Berlin"
-#         - "vite"
+    time: "03:00"
-#         - "vite-plugin*"
+
-#         - "@vitejs/plugin-vue"
+- package-ecosystem: npm
-#     vitest:
+  open-pull-requests-limit: 99
-#       applies-to: version-updates
+  directory: "/packages/ui/examples/vue2-tailwind"
-#       patterns:
+  rebase-strategy: "disabled"
-#         - "vitest"
+  schedule:
-#         - "@vitest*"
+    interval: weekly
-#     vue:
+    day: "saturday"
-#       applies-to: version-updates
+    timezone: "Europe/Berlin"
-#       patterns:
+    time: "03:00"
-#         - "*vue?(/)*"
+
-#       exclude-patterns:
+- package-ecosystem: npm
-#         - "vuetify"
+  open-pull-requests-limit: 99
-#         - "*vuepress*"
+  directory: "/packages/ui/examples/vue2-css"
-#         - "vue-tsc"
+  rebase-strategy: "disabled"
-#     vuepress:
+  schedule:
-#       applies-to: version-updates
+    interval: weekly
-#       patterns:
+    day: "saturday"
-#         - "vuepress"
+    timezone: "Europe/Berlin"
-#         - "@vuepress*"
+    time: "03:00"
-# - package-ecosystem: docker
-#   open-pull-requests-limit: 99
-#   directory: "/frontend"
-#   rebase-strategy: "disabled"
-#   schedule:
-#     interval: weekly
-#     day: "saturday"
-#     timezone: "Europe/Berlin"
-#     time: "03:00"

.github/file-filters.yml

@@ -1,5 +1,9 @@
 # These file filter patterns are used by the action https://github.com/dorny/paths-filter
 
+ui: &ui
+  - '.github/workflows/ui-*.yml'
+  - 'packages/ui/**/*'
+
 backend: &backend
   - '.github/workflows/test-backend.yml'
   - 'backend/**/*'
@@ -12,7 +16,9 @@ docker: &docker
 webapp: &webapp
   - '.github/workflows/test-webapp.yml'
   - 'webapp/**/*'
+  - 'styleguide/**/*'
   - 'package.json'
+  - *ui
 
 docs-check: &docs-check
   - '.github/workflows/check-documentation.yml'
@@ -30,24 +36,4 @@ vuepress: &vuepress
 
 documentation: &documentation
   - *vuepress
-  - *markdown
+  - *markdown
-
-# frontend
-frontend-test-lint-code: &frontend-test-lint-code
-  - 'frontend/**/*'
-
-frontend-test-unit-code: &frontend-test-unit-code
-  - 'frontend/**/*'
-
-frontend-test-build-code: &frontend-test-build-code
-  - 'frontend/**/*'
-
-frontend-test-build-docker: &frontend-test-build-docker
-  - 'frontend/**/*'
-
-frontend-test-build-docs: &frontend-test-build-docs
-  - 'frontend/**/*.md'
-  - 'frontend/.vuepress/*'
-
-frontend-test-build-storybook: &frontend-test-build-storybook
-  - 'frontend/**/*'

.github/workflows/check-documentation.yml

@@ -11,7 +11,7 @@ jobs:
       documentation: ${{ steps.changes.outputs.documentation }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Check for markdown file changes
         uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
@@ -28,13 +28,13 @@ jobs:
     if: needs.files-changed.outputs.markdown == 'true'
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       
       - name: Remove uncheckable documentation files
         run: rm -rf ./CHANGELOG.md # workaround until https://github.com/gaurav-nelson/github-action-markdown-link-check/pull/183 has been done
 
       - name: Check Markdown Links
-        uses: gaurav-nelson/github-action-markdown-link-check@1b916f2cf6c36510a6059943104e3c42ce6c16bc # 1.0.15
+        uses: gaurav-nelson/github-action-markdown-link-check@3c3b66f1f7d0900e37b71eca45b63ea9eedfce31 # 1.0.15
         with:
           use-quiet-mode: 'yes'
           use-verbose-mode: 'no'
@@ -51,10 +51,10 @@ jobs:
     if: needs.files-changed.outputs.documentation == 'true'
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Setup Node 20
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.0.3
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: '20'
 

.github/workflows/cleanup-cache-at-pr-closing.yml

@@ -1,42 +0,0 @@
-###############################################################################
-# A Github repo has max 10 GB of cache.
-# https://github.blog/changelog/2021-11-23-github-actions-cache-size-is-now-increased-to-10gb-per-repository/
-#
-# To avoid "cache thrashing" by their cache eviction policy it is recommended
-# to apply a cache cleanup workflow at PR closing to dele cache leftovers of
-# the current branch:
-# https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows#force-deleting-cache-entries
-###############################################################################
-
-name: ocelot.social cache cleanup on pr closing
-
-on:
-  pull_request:
-    types:
-      - closed
-
-jobs:
-  clean-branch-cache:
-    name: Cleanup branch cache
-    runs-on: ubuntu-latest
-    continue-on-error: true
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Cleanup
-        run: |
-          gh extension install actions/gh-actions-cache
-          REPO=${{ github.repository }}
-          BRANCH="refs/pull/${{ github.event.pull_request.number }}/merge"
-          echo "Fetching list of cache key"
-          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH | cut -f 1 )
-          set +e
-          echo "Deleting caches..."
-          for cacheKey in $cacheKeysForPR
-          do
-              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
-          done
-          echo "Done"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy-documentation.yml

@@ -13,7 +13,7 @@ jobs:
       documentation: ${{ steps.changes.outputs.documentation }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Check for file changes
         uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
@@ -27,10 +27,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Setup Node 20
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.0.3
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: 20
 

.github/workflows/docker-push.yml

@@ -24,27 +24,27 @@ jobs:
             file: backend/Dockerfile
             target: production
           - name: webapp-base
-            context: webapp
+            context: .
             file: webapp/Dockerfile
             target: base
           - name: webapp-build
-            context: webapp
+            context: .
             file: webapp/Dockerfile
             target: build
           - name: webapp
-            context: webapp
+            context: .
             file: webapp/Dockerfile
             target: production
           - name: maintenance-base
-            context: webapp
+            context: .
             file: webapp/Dockerfile.maintenance
             target: base
           - name: maintenance-build
-            context: webapp
+            context: .
             file: webapp/Dockerfile.maintenance
             target: build
           - name: maintenance
-            context: webapp
+            context: .
             file: webapp/Dockerfile.maintenance
             target: production
     runs-on: ubuntu-latest
@@ -59,16 +59,18 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
       - name: Log in to the Container registry
-        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
@@ -81,7 +83,7 @@ jobs:
             type=sha
       - name: Build and push Docker images
         id: push
-        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6
         with:
           context: ${{ matrix.app.context }}
           target:  ${{ matrix.app.target }}
@@ -89,3 +91,5 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha,scope=${{ matrix.app.name }}
+          cache-to: type=gha,mode=max,scope=${{ matrix.app.name }}

.github/workflows/frontend.test.build.code.yml

@@ -1,37 +0,0 @@
-name: "frontend:test:build test code"
-
-on: push
-
-jobs:
-  # only (but most important) job from this workflow required for pull requests
-  # check results serve as run conditions for all other jobs here
-  files-changed:
-    name: Detect File Changes - frontend-test-build-code
-    runs-on: ubuntu-latest
-    outputs:
-      changes: ${{ steps.changes.outputs.frontend-test-build-code }}
-    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Check for frontend file changes
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-        id: changes
-        with:
-          token: ${{ github.token }}
-          filters: .github/file-filters.yml
-          list-files: shell
-
-  build:
-    if: needs.files-changed.outputs.changes == 'true'
-    name: Build - Frontend
-    needs: files-changed
-    runs-on: ubuntu-latest
-    env:
-      WORKING_DIRECTORY: ./frontend
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Frontend | Build
-        run: npm install && npm run build
-        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/frontend.test.build.docker.yml

@@ -1,52 +0,0 @@
-name: "frontend:test:build test docker"
-
-on: push
-
-jobs:
-  # only (but most important) job from this workflow required for pull requests
-  # check results serve as run conditions for all other jobs here
-  files-changed:
-    name: Detect File Changes - frontend-test-build-docker
-    runs-on: ubuntu-latest
-    outputs:
-      changes: ${{ steps.changes.outputs.frontend-test-build-docker }}
-    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Check for frontend file changes
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-        id: changes
-        with:
-          token: ${{ github.token }}
-          filters: .github/file-filters.yml
-          list-files: shell
-
-  build-production:
-    if: needs.files-changed.outputs.changes == 'true'
-    name: Build Docker Production - Frontend
-    needs: files-changed
-    runs-on: ubuntu-latest
-    env:
-      WORKING_DIRECTORY: ./frontend
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Frontend | Build Docker Production
-        run: docker compose -f docker-compose.yml build
-        working-directory: ${{env.WORKING_DIRECTORY}}
-
-  build-development:
-    if: needs.files-changed.outputs.changes == 'true'
-    name: Build Docker Development - Frontend
-    needs: files-changed
-    runs-on: ubuntu-latest
-    env:
-      WORKING_DIRECTORY: ./frontend
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Frontend | Build Docker Development
-        run: docker compose build
-        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/frontend.test.build.docs.yml

@@ -1,37 +0,0 @@
-name: "frontend:test:build test docs"
-
-on: push
-
-jobs:
-  # only (but most important) job from this workflow required for pull requests
-  # check results serve as run conditions for all other jobs here
-  files-changed:
-    name: Detect File Changes - frontend-test-build-docs
-    runs-on: ubuntu-latest
-    outputs:
-      changes: ${{ steps.changes.outputs.frontend-test-build-docs }}
-    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Check for frontend file changes
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-        id: changes
-        with:
-          token: ${{ github.token }}
-          filters: .github/file-filters.yml
-          list-files: shell
-
-  build:
-    if: needs.files-changed.outputs.changes == 'true'
-    name: Build Docs - Frontend
-    needs: files-changed
-    runs-on: ubuntu-latest
-    env:
-      WORKING_DIRECTORY: ./frontend
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Frontend | Build Docs
-        run: npm install && npm run docs:build
-        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/frontend.test.build.storybook.yml

@@ -1,37 +0,0 @@
-name: "frontend:test:build test storybook"
-
-on: push
-
-jobs:
-  # only (but most important) job from this workflow required for pull requests
-  # check results serve as run conditions for all other jobs here
-  files-changed:
-    name: Detect File Changes - frontend-test-build-storybook
-    runs-on: ubuntu-latest
-    outputs:
-      changes: ${{ steps.changes.outputs.frontend-test-build-storybook }}
-    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Check for frontend file changes
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-        id: changes
-        with:
-          token: ${{ github.token }}
-          filters: .github/file-filters.yml
-          list-files: shell
-
-  storybook:
-    if: needs.files-changed.outputs.changes == 'true'
-    name: Build Storybook - Frontend
-    needs: files-changed
-    runs-on: ubuntu-latest
-    env:
-      WORKING_DIRECTORY: ./frontend
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Frontend | Build Storybook
-        run: npm install && npm run storybook:build
-        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/frontend.test.lint.code.yml

@@ -1,37 +0,0 @@
-name: "frontend:test:lint code with defined linters"
-
-on: push
-
-jobs:
-  # only (but most important) job from this workflow required for pull requests
-  # check results serve as run conditions for all other jobs here 
-  files-changed:
-    name: Detect File Changes - frontend-test-lint-code
-    runs-on: ubuntu-latest
-    outputs:
-      changes: ${{ steps.changes.outputs.frontend-test-lint-code }}
-    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Check for frontend file changes
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-        id: changes
-        with:
-          token: ${{ github.token }}
-          filters: .github/file-filters.yml
-          list-files: shell
-
-  lint:
-    if: needs.files-changed.outputs.changes == 'true'
-    name: Lint - Frontend
-    needs: files-changed
-    runs-on: ubuntu-latest
-    env:
-      WORKING_DIRECTORY: ./frontend
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Frontend | Lint
-        run: npm install && npm run test:lint
-        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/frontend.test.unit.code.yml

@@ -1,37 +0,0 @@
-name: "frontend:test:unit test code with defined suites"
-
-on: push
-
-jobs:
-  # only (but most important) job from this workflow required for pull requests
-  # check results serve as run conditions for all other jobs here 
-  files-changed:
-    name: Detect File Changes - frontend-test-unit-code
-    runs-on: ubuntu-latest
-    outputs:
-      changes: ${{ steps.changes.outputs.frontend-test-unit-code }}
-    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Check for frontend file changes
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-        id: changes
-        with:
-          token: ${{ github.token }}
-          filters: .github/file-filters.yml
-          list-files: shell
-
-  unit:
-    if: needs.files-changed.outputs.changes == 'true'
-    name: Unit - Frontend
-    needs: files-changed
-    runs-on: ubuntu-latest
-    env:
-      WORKING_DIRECTORY: ./frontend
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
-
-      - name: Frontend | Unit
-        run: npm install && npm run test:unit
-        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/publish.yml

@@ -14,9 +14,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0 # Fetch full History for changelog
+      - name: Setup Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version-file: '.nvmrc'
       - name: Setup env
         run: |
           echo "VERSION=$(node -p -e "require('./package.json').version")" >> $GITHUB_ENV
@@ -54,9 +58,13 @@ jobs:
     needs: [github_tag]
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0 # Fetch full History for changelog
+      - name: Setup Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version-file: '.nvmrc'
       - name: Setup env
         run: |
           echo "VERSION=$(node -p -e "require('./package.json').version")" >> $GITHUB_ENV
@@ -64,7 +72,7 @@ jobs:
           echo "BUILD_COMMIT=${GITHUB_SHA}" >> $GITHUB_ENV
       - run: echo "BUILD_VERSION=${VERSION}-${GITHUB_RUN_NUMBER}" >> $GITHUB_ENV
       #- name: Repository Dispatch
-      #  uses: peter-evans/repository-dispatch@6846232b0e1bfd17c14dce7ac13fd3fcefe22c0c # v3.0.0
+      #  uses: peter-evans/repository-dispatch@f49a8ac5751834a0666df77deb0289abbe2b3a78 # v3.0.0
       #  with:
       #    token: ${{ github.token }}
       #    event-type: trigger-ocelot-build-success
@@ -72,7 +80,7 @@ jobs:
       #    client-payload: '{"ref": "${{ github.ref }}", "sha": "${{ github.sha }}", "VERSION": "${VERSION}", "BUILD_DATE": "${BUILD_DATE}", "BUILD_COMMIT": "${BUILD_COMMIT}", "BUILD_VERSION": "${BUILD_VERSION}"}'
 
       - name: Repository Dispatch stage.ocelot.social
-        uses: peter-evans/repository-dispatch@6846232b0e1bfd17c14dce7ac13fd3fcefe22c0c # v3.0.0
+        uses: peter-evans/repository-dispatch@f49a8ac5751834a0666df77deb0289abbe2b3a78 # v3.0.0
         with:
           token: ${{ secrets.OCELOT_PUBLISH_EVENT_PAT }} # this token is required to access the other repository
           event-type: trigger-ocelot-build-success
@@ -80,7 +88,7 @@ jobs:
           client-payload: '{"ref": "${{ github.ref }}", "sha": "${{ github.sha }}", "GITHUB_RUN_NUMBER": "${{ env.GITHUB_RUN_NUMBER }}", "VERSION": "${VERSION}", "BUILD_DATE": "${BUILD_DATE}", "BUILD_COMMIT": "${BUILD_COMMIT}", "BUILD_VERSION": "${BUILD_VERSION}"}'
       
       - name: Repository Dispatch stage.yunite.me
-        uses: peter-evans/repository-dispatch@6846232b0e1bfd17c14dce7ac13fd3fcefe22c0c # v3.0.0
+        uses: peter-evans/repository-dispatch@f49a8ac5751834a0666df77deb0289abbe2b3a78 # v3.0.0
         with:
           token: ${{ secrets.OCELOT_PUBLISH_EVENT_PAT }} # this token is required to access the other repository
           event-type: trigger-ocelot-build-success

.github/workflows/test-backend.yml

@@ -11,7 +11,7 @@ jobs:
       backend: ${{ steps.changes.outputs.backend }}
       docker: ${{ steps.changes.outputs.docker }}
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Check for backend file changes
         uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
@@ -28,16 +28,28 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
 
       - name: Neo4J | Build 'community' image
-        run: |
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6
-          docker compose -f docker-compose.yml -f docker-compose.test.yml build neo4j
+        with:
-          docker save "ghcr.io/ocelot-social-community/ocelot-social/neo4j:community" > /tmp/neo4j.tar
+          context: neo4j
-      
+          file: neo4j/Dockerfile
+          target: community
+          load: true
+          tags: ghcr.io/ocelot-social-community/ocelot-social/neo4j:community
+          cache-from: type=gha,scope=neo4j
+          cache-to: type=gha,mode=max,scope=neo4j
+
+      - name: Save image for test job
+        run: docker save "ghcr.io/ocelot-social-community/ocelot-social/neo4j:community" > /tmp/neo4j.tar
+
       - name: Cache docker images
         id: cache-neo4j
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: /tmp/neo4j.tar
           key: ${{ github.run_id }}-backend-neo4j-cache
@@ -49,16 +61,28 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
 
       - name: backend | Build 'test' image
-        run: |
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6
-          docker compose -f docker-compose.yml -f docker-compose.test.yml build backend
+        with:
-          docker save "ghcr.io/ocelot-social-community/ocelot-social/backend:test" > /tmp/backend.tar
+          context: backend
-      
+          file: backend/Dockerfile
+          target: test
+          load: true
+          tags: ghcr.io/ocelot-social-community/ocelot-social/backend:test
+          cache-from: type=gha,scope=backend-test
+          cache-to: type=gha,mode=max,scope=backend-test
+
+      - name: Save image for test job
+        run: docker save "ghcr.io/ocelot-social-community/ocelot-social/backend:test" > /tmp/backend.tar
+
       - name: Cache docker images
         id: cache-backend
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: /tmp/backend.tar
           key: ${{ github.run_id }}-backend-cache
@@ -70,10 +94,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version-file: 'backend/.nvmrc'
+          cache: 'yarn'
+          cache-dependency-path: 'backend/yarn.lock'
 
       - name: backend | Lint
-        run: cd backend && yarn && yarn run lint
+        run: cd backend && yarn --frozen-lockfile && yarn run lint
 
   unit_test_backend:
     name: Unit tests - Backend
@@ -84,17 +115,17 @@ jobs:
       checks: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Restore Neo4J cache
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: /tmp/neo4j.tar
           key: ${{ github.run_id }}-backend-neo4j-cache
           fail-on-cache-miss: true
 
       - name: Restore Backend cache
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: /tmp/backend.tar
           key: ${{ github.run_id }}-backend-cache
@@ -108,7 +139,6 @@ jobs:
       - name: backend | copy env files
         run: |
           cp webapp/.env.template webapp/.env
-          cp frontend/.env.dist frontend/.env
           cp backend/.env.template backend/.env
 
       - name: backend | docker compose
@@ -123,20 +153,3 @@ jobs:
       - name: backend | Unit test incl. coverage check
         run: docker compose exec -T backend yarn test
 
-  cleanup:
-    name: Cleanup
-    if: ${{ needs.files-changed.outputs.backend == 'true' || needs.files-changed.outputs.docker == 'true' }}
-    needs: [files-changed, unit_test_backend]
-    runs-on: ubuntu-latest
-    permissions: write-all
-    continue-on-error: true
-    steps:
-      - name: Delete cache
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh extension install actions/gh-actions-cache
-          KEY="${{ github.run_id }}-backend-neo4j-cache"
-          gh actions-cache delete $KEY -R Ocelot-Social-Community/Ocelot-Social --confirm
-          KEY="${{ github.run_id }}-backend-cache"
-          gh actions-cache delete $KEY -R Ocelot-Social-Community/Ocelot-Social --confirm

.github/workflows/test-e2e.yml

@@ -8,30 +8,54 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f # v4.2.2
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
 
       - name: Copy backend env file
         run: |
           cp backend/.env.test_e2e backend/.env
           cp webapp/.env.template webapp/.env
 
-      - name: Build backend and dependencies
+      - name: Neo4J | Build image
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6
+        with:
+          context: neo4j
+          file: neo4j/Dockerfile
+          target: community
+          load: true
+          tags: ghcr.io/ocelot-social-community/ocelot-social/neo4j:community
+          cache-from: type=gha,scope=neo4j
+          cache-to: type=gha,mode=max,scope=neo4j
+
+      - name: Backend | Build image
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6
+        with:
+          context: backend
+          file: backend/Dockerfile
+          target: test
+          load: true
+          tags: ghcr.io/ocelot-social-community/ocelot-social/backend:test
+          cache-from: type=gha,scope=backend-test
+          cache-to: type=gha,mode=max,scope=backend-test
+
+      - name: Pull third-party images
         run: |
-          # Build and start all required images for backend
+          docker pull quay.io/minio/minio:latest
-          docker compose -f docker-compose.yml -f docker-compose.test.yml up --detach neo4j backend --build
+          docker pull quay.io/minio/mc:latest
-          
+          docker pull maildev/maildev:latest
-          # Save the build images
+
-          docker save "ghcr.io/ocelot-social-community/ocelot-social/backend:test" > /tmp/backend.tar          
+      - name: Save all images
+        run: |
+          docker save "ghcr.io/ocelot-social-community/ocelot-social/backend:test" > /tmp/backend.tar
           docker save "ghcr.io/ocelot-social-community/ocelot-social/neo4j:community" > /tmp/neo4j.tar
           docker save "quay.io/minio/minio:latest" > /tmp/minio.tar
           docker save "quay.io/minio/mc:latest" > /tmp/minio-mc.tar
           docker save "maildev/maildev:latest" > /tmp/mailserver.tar
-          
+
-          # Stop the containers
-          docker compose -f docker-compose.yml -f docker-compose.test.yml down
-      
       - name: Cache docker images
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: |
             /tmp/backend.tar
@@ -46,20 +70,27 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f # v4.2.2
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
-      - name: Copy backend env file
+      - name: Set up Docker Buildx
-        run: |
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
-          cp backend/.env.test_e2e backend/.env
+
-          cp webapp/.env.template webapp/.env
+      - name: Webapp | Build 'test' image
-      
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6
-      - name: Build docker image
+        with:
-        run: |
+          context: .
-          docker compose -f docker-compose.yml -f docker-compose.test.yml up --detach webapp --build --no-deps
+          file: webapp/Dockerfile
-          docker save "ghcr.io/ocelot-social-community/ocelot-social/webapp:test" > /tmp/webapp.tar
+          target: test
-      
+          load: true
-      - name: Cache docker image        
+          tags: ghcr.io/ocelot-social-community/ocelot-social/webapp:test
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+          cache-from: type=gha,scope=webapp-test
+          cache-to: type=gha,mode=max,scope=webapp-test
+
+      - name: Save image for test jobs
+        run: docker save "ghcr.io/ocelot-social-community/ocelot-social/webapp:test" > /tmp/webapp.tar
+
+      - name: Cache docker image
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: /tmp/webapp.tar
           key: ${{ github.run_id }}-e2e-webapp-cache
@@ -68,13 +99,16 @@ jobs:
     name: Fullstack | prepare cypress
     runs-on: ubuntu-latest
     steps:
+      - name: Delete huge unnecessary tools folder
+        run: rm -rf /opt/hostedtoolcache
+
       - name: Checkout code
-        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f # v4.2.2
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Setup Node.js
-        uses: actions/setup-node@08f58d1471bff7f3a07d167b4ad7df25d5fcfcb6 # v4.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version-file: 'backend/.tool-versions'
+          node-version-file: 'backend/.nvmrc'
           cache: 'yarn'
 
       - name: Copy env files
@@ -84,7 +118,9 @@ jobs:
 
       - name: Install cypress requirements
         run: |
-          wget --no-verbose -O /opt/cucumber-json-formatter "https://github.com/cucumber/json-formatter/releases/download/v19.0.0/cucumber-json-formatter-linux-386"
+          sudo wget --no-verbose -O /opt/cucumber-json-formatter "https://github.com/cucumber/json-formatter/releases/download/v19.0.0/cucumber-json-formatter-linux-amd64"
+          echo "66a2ef158866c3ecb3d8e49a7189814a485bddca43e133e4ca5735b8d3951bf7  /opt/cucumber-json-formatter" | sha256sum -c -
+          sudo chmod +x /opt/cucumber-json-formatter
           cd backend
           yarn install
           yarn build
@@ -93,7 +129,7 @@ jobs:
       
       - name: Cache docker image
         
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: |
             /opt/cucumber-json-formatter
@@ -101,29 +137,45 @@ jobs:
             /home/runner/work/Ocelot-Social/Ocelot-Social
           key: ${{ github.run_id }}-e2e-cypress
 
-  fullstack_tests:
+  list_features:
-    name: Fullstack | tests
+    name: List Feature Files
-    if: success()
-    needs: [prepare_backend_environment, prepare_webapp_image, prepare_cypress]
     runs-on: ubuntu-latest
-    env:
+    outputs:
-      jobs: 8
+      features: ${{ steps.list.outputs.features }}
-    strategy:
-      matrix:
-        # run copies of the current job in parallel
-        job: [1, 2, 3, 4, 5, 6, 7, 8]
     steps:
       - name: Checkout code
-        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f # v4.2.2
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: List feature files
+        id: list
+        run: |
+          FEATURES=$(find cypress/e2e/ -maxdepth 1 -name "*.feature" -printf '%f\n' | sort | jq -R -s -c 'split("\n") | map(select(length > 0))')
+          echo "features=$FEATURES" >> $GITHUB_OUTPUT
+
+  fullstack_tests:
+    name: E2E | ${{ matrix.feature }}
+    if: success()
+    needs: [prepare_backend_environment, prepare_webapp_image, prepare_cypress, list_features]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        feature: ${{ fromJson(needs.list_features.outputs.features) }}
+    steps:
+      - name: Delete huge unnecessary tools folder
+        run: rm -rf /opt/hostedtoolcache
+
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Setup Node.js
-        uses: actions/setup-node@08f58d1471bff7f3a07d167b4ad7df25d5fcfcb6 # v4.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version-file: 'backend/.tool-versions'
+          node-version-file: 'backend/.nvmrc'
           cache: 'yarn'
 
       - name: Restore cypress cache
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: |
             /opt/cucumber-json-formatter
@@ -133,7 +185,7 @@ jobs:
           restore-keys: ${{ github.run_id }}-e2e-cypress
 
       - name: Restore backend environment cache
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: |
             /tmp/backend.tar
@@ -144,15 +196,27 @@ jobs:
           key: ${{ github.run_id }}-e2e-backend-environment-cache
 
       - name: Restore webapp cache
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: /tmp/webapp.tar
           key: ${{ github.run_id }}-e2e-webapp-cache
           
+      - name: Copy env files
+        run: |
+          cp webapp/.env.template webapp/.env
+          cp backend/.env.test_e2e backend/.env
+
+      - name: Ensure cucumber-json-formatter exists
+        run: |
+          if [ ! -f /opt/cucumber-json-formatter ]; then
+            sudo wget --no-verbose -O /opt/cucumber-json-formatter "https://github.com/cucumber/json-formatter/releases/download/v19.0.0/cucumber-json-formatter-linux-amd64"
+            echo "66a2ef158866c3ecb3d8e49a7189814a485bddca43e133e4ca5735b8d3951bf7  /opt/cucumber-json-formatter" | sha256sum -c -
+          fi
+          sudo chmod +x /opt/cucumber-json-formatter
+          sudo ln -fs /opt/cucumber-json-formatter /usr/bin/cucumber-json-formatter
+
       - name: Boot up test system | docker compose
         run: |
-          chmod +x /opt/cucumber-json-formatter
-          sudo ln -fs /opt/cucumber-json-formatter /usr/bin/cucumber-json-formatter
           docker load < /tmp/neo4j.tar
           docker load < /tmp/backend.tar
           docker load < /tmp/minio.tar
@@ -160,11 +224,18 @@ jobs:
           docker load < /tmp/mailserver.tar
           docker load < /tmp/webapp.tar
           docker compose -f docker-compose.yml -f docker-compose.test.yml up --detach backend mailserver webapp
-          sleep 90s
+
+          echo "Waiting for backend (max 120s)..."
+          timeout 120 bash -c 'until curl -sf -X POST -H "Content-Type: application/json" -d "{\"query\":\"{__typename}\"}" http://localhost:4000 > /dev/null 2>&1; do sleep 5; done'
+          echo "Backend is ready."
+
+          echo "Waiting for webapp (max 120s)..."
+          timeout 120 bash -c 'until curl -sf http://localhost:3000 > /dev/null 2>&1; do sleep 5; done'
+          echo "Webapp is ready."
 
       - name: Full stack tests | run tests
         id: e2e-tests
-        run: yarn run cypress:run --spec $(cypress/parallel-features.sh ${{ matrix.job }} ${{ env.jobs }} )
+        run: yarn run cypress:run --spec "cypress/e2e/${{ matrix.feature }}"
 
       - name: Full stack tests | if tests failed, compile html report
         if: ${{ failure() && steps.e2e-tests.conclusion == 'failure' }}
@@ -175,29 +246,21 @@ jobs:
       - name: Full stack tests | if tests failed, upload report
         id: e2e-report
         if: ${{ failure() && steps.e2e-tests.conclusion == 'failure' }}
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
-          name: ocelot-e2e-test-report-pr${{ needs.docker_preparation.outputs.pr-number }}
+          name: e2e-report-${{ matrix.feature }}
           path: /home/runner/work/Ocelot-Social/Ocelot-Social/cypress/reports/cucumber_html_report
 
-  cleanup_cache:
+  e2e_status:
-    name: Cleanup Cache
+    name: E2E | Status
-    needs: fullstack_tests
+    if: always()
+    needs: [fullstack_tests]
     runs-on: ubuntu-latest
-    continue-on-error: true
     steps:
-      - name: Checkout code
+      - name: Check E2E results
-        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f # v4.2.2
-      
-      - name: Full stack tests | cleanup cache
         run: |
-          cacheKeys=$(gh cache list --json key --jq '.[] | select(.key | startswith("${{ github.run_id }}-e2e-")) | .key')
+          if [ "${{ needs.fullstack_tests.result }}" != "success" ]; then
-          set +e
+            echo "E2E tests failed or were cancelled (result: ${{ needs.fullstack_tests.result }})"
-          echo "Deleting caches..."
+            exit 1
-          for cacheKey in $cacheKeys
+          fi
-          do
+
-            gh cache delete "$cacheKey"
-          done
-          echo "Done"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test-webapp.yml

@@ -11,7 +11,7 @@ jobs:
       docker: ${{ steps.changes.outputs.docker }}
       webapp: ${{ steps.changes.outputs.webapp }}
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Check for frontend file changes
         uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
@@ -28,7 +28,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version-file: 'webapp/.nvmrc'
 
       - name: Check translation files
         run: |
@@ -38,19 +43,31 @@ jobs:
   build_test_webapp:
     name: Docker Build Test - Webapp
     if: needs.files-changed.outputs.docker == 'true' || needs.files-changed.outputs.webapp == 'true'
-    needs: [files-changed, prepare]
+    needs: files-changed
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
 
       - name: Webapp | Build 'test' image
-        run: |
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6
-          docker build --target test -t "ocelotsocialnetwork/webapp:test" webapp/
+        with:
-          docker save "ocelotsocialnetwork/webapp:test" > /tmp/webapp.tar
+          context: .
+          file: webapp/Dockerfile
+          target: test
+          load: true
+          tags: ghcr.io/ocelot-social-community/ocelot-social/webapp:test
+          cache-from: type=gha,scope=webapp-test
+          cache-to: type=gha,mode=max,scope=webapp-test
+
+      - name: Save image for test job
+        run: docker save "ghcr.io/ocelot-social-community/ocelot-social/webapp:test" > /tmp/webapp.tar
 
       - name: Cache docker image
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: /tmp/webapp.tar
           key: ${{ github.run_id }}-webapp-cache
@@ -62,10 +79,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version-file: 'webapp/.nvmrc'
+          cache: 'yarn'
+          cache-dependency-path: 'webapp/yarn.lock'
 
       - name: webapp | Lint
-        run: cd webapp && yarn && yarn run lint
+        run: cd webapp && yarn --frozen-lockfile && yarn run lint
 
   unit_test_webapp:
     name: Unit Tests - Webapp
@@ -76,10 +100,10 @@ jobs:
       checks: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Restore webapp cache
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v4.0.2
         with:
           path: /tmp/webapp.tar
           key: ${{ github.run_id }}-webapp-cache
@@ -90,29 +114,10 @@ jobs:
       - name: Copy env files
         run: |
           cp webapp/.env.template webapp/.env
-          cp frontend/.env.dist frontend/.env
           cp backend/.env.template backend/.env
 
-      - name: backend | docker compose
+      - name: Start webapp container
-        # doesn't work without the --build flag - this either means we should not load the cached images or cache the correct image
+        run: docker compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps webapp
-        run: docker compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps webapp --build
 
       - name: webapp | Unit tests incl. coverage check
         run: docker compose exec -T webapp yarn test
-
-  cleanup:
-    name: Cleanup
-    if: ${{ needs.files-changed.outputs.docker == 'true' || needs.files-changed.outputs.webapp == 'true' }}
-    needs: [files-changed, unit_test_webapp]
-    runs-on: ubuntu-latest
-    permissions: write-all
-    continue-on-error: true
-    steps:
-      - name: Delete cache
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh extension install actions/gh-actions-cache
-          KEY="${{ github.run_id }}-webapp-cache"
-          gh actions-cache delete $KEY -R Ocelot-Social-Community/Ocelot-Social --confirm
-

.github/workflows/test.lint_pr.yml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ github.actor != 'dependabot[bot]' }}
     steps:
-      - uses: amannn/action-semantic-pull-request@335288255954904a41ddda8947c8f2c844b8bfeb # v5.5.3
+      - uses: amannn/action-semantic-pull-request@069817c298f23fab00a8f29a2e556a5eac0f6390 # v5.5.3
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
@@ -29,10 +29,11 @@ jobs:
           # Configure which scopes are allowed (newline delimited).
           scopes: |
             backend
+            package/ui
             webapp
-            frontend
             maintenance
             database
+            e2e
             docu
             docker
             release

.github/workflows/ui-build.yml

@@ -0,0 +1,95 @@
+name: UI Build
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+defaults:
+  run:
+    working-directory: packages/ui
+
+jobs:
+  files-changed:
+    name: Detect File Changes
+    runs-on: ubuntu-latest
+    outputs:
+      ui: ${{ steps.changes.outputs.ui }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Check for file changes
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+
+  build:
+    name: Build
+    if: needs.files-changed.outputs.ui == 'true'
+    needs: files-changed
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: 'packages/ui/.tool-versions'
+          cache: 'npm'
+          cache-dependency-path: packages/ui/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build library
+        run: npm run build
+
+      - name: Verify build output
+        run: |
+          echo "Checking build output..."
+
+          # Check that dist directory exists
+          if [ ! -d "dist" ]; then
+            echo "::error::dist directory not found"
+            exit 1
+          fi
+
+          # Check required files exist
+          FILES=(
+            "dist/index.mjs"
+            "dist/index.cjs"
+            "dist/index.d.ts"
+            "dist/index.d.cts"
+            "dist/tailwind.preset.mjs"
+            "dist/tailwind.preset.cjs"
+            "dist/tailwind.preset.d.ts"
+            "dist/tailwind.preset.d.cts"
+            "dist/style.css"
+          )
+
+          for file in "${FILES[@]}"; do
+            if [ ! -f "$file" ]; then
+              echo "::error::Missing required file: $file"
+              exit 1
+            fi
+            echo "✓ $file"
+          done
+
+          echo ""
+          echo "All build outputs verified!"
+
+      - name: Validate package
+        run: npm run validate
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v6
+        with:
+          name: dist
+          path: packages/ui/dist/
+          retention-days: 7

.github/workflows/ui-compatibility.yml

@@ -0,0 +1,121 @@
+name: UI Compatibility
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  files-changed:
+    name: Detect File Changes
+    runs-on: ubuntu-latest
+    outputs:
+      ui: ${{ steps.changes.outputs.ui }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Check for file changes
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+
+  build-library:
+    name: Build Library
+    if: needs.files-changed.outputs.ui == 'true'
+    needs: files-changed
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/ui
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: 'packages/ui/.tool-versions'
+          cache: 'npm'
+          cache-dependency-path: packages/ui/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build library
+        run: npm run build
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v6
+        with:
+          name: ui-dist
+          path: packages/ui/dist/
+          retention-days: 1
+
+  test-compatibility:
+    name: Test Compatibility
+    if: needs.files-changed.outputs.ui == 'true'
+    needs: [files-changed, build-library]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        example:
+          - vue3-tailwind
+          - vue3-css
+          - vue2-tailwind
+          - vue2-css
+    defaults:
+      run:
+        working-directory: packages/ui/examples/${{ matrix.example }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist
+          path: packages/ui/dist/
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: 'packages/ui/.tool-versions'
+          cache: 'npm'
+          cache-dependency-path: packages/ui/examples/${{ matrix.example }}/package-lock.json
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build example app
+        run: npm run build
+
+  compatibility-result:
+    name: Compatibility Result
+    if: always()
+    needs: [files-changed, test-compatibility]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Skip if no UI changes
+        if: needs.files-changed.outputs.ui != 'true'
+        run: echo "No UI changes detected, skipping."
+
+      - name: Check matrix results
+        if: needs.files-changed.outputs.ui == 'true'
+        run: |
+          if [ "${{ needs.test-compatibility.result }}" != "success" ]; then
+            echo "Compatibility tests failed"
+            exit 1
+          fi

.github/workflows/ui-docker.yml

@@ -0,0 +1,59 @@
+name: UI Docker
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  files-changed:
+    name: Detect File Changes
+    runs-on: ubuntu-latest
+    outputs:
+      ui: ${{ steps.changes.outputs.ui }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Check for file changes
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+
+  build:
+    name: Build Docker Image
+    if: needs.files-changed.outputs.ui == 'true'
+    needs: files-changed
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
+
+      - name: Build development image
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6
+        with:
+          context: ./packages/ui
+          file: ./packages/ui/Dockerfile
+          target: development
+          push: false
+          tags: ocelot-social/ui:development
+          cache-from: type=gha,scope=ui-development
+          cache-to: type=gha,mode=max,scope=ui-development
+
+      - name: Build production image
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6
+        with:
+          context: ./packages/ui
+          file: ./packages/ui/Dockerfile
+          target: production
+          push: false
+          tags: ocelot-social/ui:latest
+          cache-from: type=gha,scope=ui-production
+          cache-to: type=gha,mode=max,scope=ui-production

.github/workflows/ui-lint.yml

@@ -0,0 +1,54 @@
+name: UI Lint
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+defaults:
+  run:
+    working-directory: packages/ui
+
+jobs:
+  files-changed:
+    name: Detect File Changes
+    runs-on: ubuntu-latest
+    outputs:
+      ui: ${{ steps.changes.outputs.ui }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Check for file changes
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+
+  lint:
+    name: ESLint
+    if: needs.files-changed.outputs.ui == 'true'
+    needs: files-changed
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: 'packages/ui/.tool-versions'
+          cache: 'npm'
+          cache-dependency-path: packages/ui/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Run TypeScript type check
+        run: npm run typecheck

.github/workflows/ui-release.yml

@@ -0,0 +1,65 @@
+name: UI Release
+
+on:
+  push:
+    branches: [master]
+    paths:
+      - 'packages/ui/**'
+      - 'release-please-config.json'
+      - '.release-please-manifest.json'
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  release-please:
+    name: Release Please
+    runs-on: ubuntu-latest
+    outputs:
+      release_created: ${{ steps.release.outputs['packages/ui--release_created'] }}
+      tag_name: ${{ steps.release.outputs['packages/ui--tag_name'] }}
+      version: ${{ steps.release.outputs['packages/ui--version'] }}
+
+    steps:
+      - name: Release Please
+        id: release
+        uses: googleapis/release-please-action@v4
+        with:
+          config-file: release-please-config.json
+          manifest-file: .release-please-manifest.json
+
+  publish:
+    name: Publish to npm
+    needs: release-please
+    if: ${{ needs.release-please.outputs.release_created == 'true' }}
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/ui
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: 'packages/ui/.tool-versions'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'npm'
+          cache-dependency-path: packages/ui/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Validate package
+        run: npm run validate
+
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/ui-size.yml

@@ -0,0 +1,54 @@
+name: UI Size
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+defaults:
+  run:
+    working-directory: packages/ui
+
+jobs:
+  files-changed:
+    name: Detect File Changes
+    runs-on: ubuntu-latest
+    outputs:
+      ui: ${{ steps.changes.outputs.ui }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Check for file changes
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+
+  size:
+    name: Bundle Size Check
+    if: needs.files-changed.outputs.ui == 'true'
+    needs: files-changed
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: 'packages/ui/.tool-versions'
+          cache: 'npm'
+          cache-dependency-path: packages/ui/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Check bundle size
+        run: npm run size

.github/workflows/ui-storybook.yml

@@ -0,0 +1,74 @@
+name: UI Storybook
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+defaults:
+  run:
+    working-directory: packages/ui
+
+jobs:
+  files-changed:
+    name: Detect File Changes
+    runs-on: ubuntu-latest
+    outputs:
+      ui: ${{ steps.changes.outputs.ui }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Check for file changes
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+
+  build:
+    name: Build Storybook
+    if: needs.files-changed.outputs.ui == 'true'
+    needs: files-changed
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: 'packages/ui/.tool-versions'
+          cache: 'npm'
+          cache-dependency-path: packages/ui/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Storybook
+        run: npm run storybook:build
+
+      - name: Verify build output
+        run: |
+          echo "Checking Storybook build output..."
+
+          if [ ! -d "storybook-static" ]; then
+            echo "::error::storybook-static directory not found"
+            exit 1
+          fi
+
+          if [ ! -f "storybook-static/index.html" ]; then
+            echo "::error::index.html not found in storybook-static"
+            exit 1
+          fi
+
+          echo "✓ Storybook build verified!"
+
+      - name: Upload Storybook artifacts
+        uses: actions/upload-artifact@v6
+        with:
+          name: storybook-static
+          path: packages/ui/storybook-static/
+          retention-days: 7

.github/workflows/ui-test.yml

@@ -0,0 +1,59 @@
+name: UI Test
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+defaults:
+  run:
+    working-directory: packages/ui
+
+jobs:
+  files-changed:
+    name: Detect File Changes
+    runs-on: ubuntu-latest
+    outputs:
+      ui: ${{ steps.changes.outputs.ui }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Check for file changes
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+
+  test:
+    name: Unit Tests
+    if: needs.files-changed.outputs.ui == 'true'
+    needs: files-changed
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: 'packages/ui/.tool-versions'
+          cache: 'npm'
+          cache-dependency-path: packages/ui/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests with coverage
+        run: npm run test:coverage
+
+      - name: Upload coverage report
+        uses: actions/upload-artifact@v6
+        if: always()
+        with:
+          name: coverage-report
+          path: packages/ui/coverage/
+          retention-days: 7

.github/workflows/ui-verify.yml

@@ -0,0 +1,51 @@
+name: UI Verify
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+defaults:
+  run:
+    working-directory: packages/ui
+
+jobs:
+  files-changed:
+    name: Detect File Changes
+    runs-on: ubuntu-latest
+    outputs:
+      ui: ${{ steps.changes.outputs.ui }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Check for file changes
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+
+  verify:
+    name: Completeness Check
+    if: needs.files-changed.outputs.ui == 'true'
+    needs: files-changed
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: 'packages/ui/.tool-versions'
+          cache: 'npm'
+          cache-dependency-path: packages/ui/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check component completeness
+        run: npm run verify

.github/workflows/ui-visual.yml

@@ -0,0 +1,64 @@
+name: UI Visual
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+defaults:
+  run:
+    working-directory: packages/ui
+
+jobs:
+  files-changed:
+    name: Detect File Changes
+    runs-on: ubuntu-latest
+    outputs:
+      ui: ${{ steps.changes.outputs.ui }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Check for file changes
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+
+  visual:
+    name: Visual Regression
+    if: needs.files-changed.outputs.ui == 'true'
+    needs: files-changed
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: 'packages/ui/.tool-versions'
+          cache: 'npm'
+          cache-dependency-path: packages/ui/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+
+      - name: Run visual tests
+        run: npm run test:visual
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v6
+        if: failure()
+        with:
+          name: visual-test-results
+          path: |
+            packages/ui/test-results/
+            packages/ui/playwright-report/
+          retention-days: 7

.gitmodules

@@ -1,6 +1,3 @@
-[submodule "styleguide"]
-	path = styleguide
-	url = https://github.com/Human-Connection/Nitro-Styleguide.git
 [submodule "deployment/configurations/stage.ocelot.social"]
 	path = deployment/configurations/stage.ocelot.social
 	url = git@github.com:Ocelot-Social-Community/stage.ocelot.social.git

.nvmrc

@@ -1 +1 @@
-v24.2.0
+v25.3.0

.release-please-manifest.json

@@ -0,0 +1,3 @@
+{
+  "packages/ui": "0.0.1"
+}

.tool-versions

@@ -1 +0,0 @@
-nodejs 20.12.1

backend/.env.template

@@ -19,7 +19,7 @@ SMTP_PASSWORD=
 SMTP_SECURE="false" # true for 465, false for other ports
 SMTP_DKIM_DOMAINNAME=
 SMTP_DKIM_KEYSELECTOR=
-SMTP_DKIM_PRIVATKEY=
+SMTP_DKIM_PRIVATEKEY=
 # E-Mail settings for our 'docker compose up mailserver'
 # SMTP_HOST=localhost
 # SMTP_PORT=1025
@@ -33,8 +33,6 @@ JWT_SECRET="b/&&7b78BF&fv/Vd"
 JWT_EXPIRES="2y"
 MAPBOX_TOKEN="pk.eyJ1IjoiYnVzZmFrdG9yIiwiYSI6ImNraDNiM3JxcDBhaWQydG1uczhpZWtpOW4ifQ.7TNRTO-o9aK1Y6MyW_Nd4g"
 
-PRIVATE_KEY_PASSPHRASE="a7dsf78sadg87ad87sfagsadg78"
-
 SENTRY_DSN_BACKEND=
 COMMIT=
 PUBLIC_REGISTRATION=false
@@ -45,7 +43,9 @@ AWS_SECRET_ACCESS_KEY=12341234
 AWS_ENDPOINT=http://localhost:9000
 AWS_REGION=local
 AWS_BUCKET=ocelot
-S3_PUBLIC_GATEWAY=http://localhost:8000
+IMAGOR_PUBLIC_URL=http://localhost:8000
+IMAGOR_SECRET=mysecret
 
 CATEGORIES_ACTIVE=false
 MAX_PINNED_POSTS=1
+MAX_GROUP_PINNED_POSTS=1

backend/.env.test_e2e

@@ -19,14 +19,12 @@ SMTP_PASSWORD=
 SMTP_SECURE="false" # true for 465, false for other ports
 SMTP_DKIM_DOMAINNAME=
 SMTP_DKIM_KEYSELECTOR=
-SMTP_DKIM_PRIVATKEY=
+SMTP_DKIM_PRIVATEKEY=
 
 JWT_SECRET="b/&&7b78BF&fv/Vd"
 JWT_EXPIRES="2y"
 MAPBOX_TOKEN="pk.eyJ1IjoiYnVzZmFrdG9yIiwiYSI6ImNraDNiM3JxcDBhaWQydG1uczhpZWtpOW4ifQ.7TNRTO-o9aK1Y6MyW_Nd4g"
 
-PRIVATE_KEY_PASSPHRASE="a7dsf78sadg87ad87sfagsadg78"
-
 SENTRY_DSN_BACKEND=
 COMMIT=
 PUBLIC_REGISTRATION=false
@@ -37,7 +35,9 @@ AWS_SECRET_ACCESS_KEY=12341234
 AWS_ENDPOINT=http://localhost:9000
 AWS_REGION=local
 AWS_BUCKET=ocelot
-S3_PUBLIC_GATEWAY=http://localhost:8000
+IMAGOR_PUBLIC_URL=http://localhost:8000
+IMAGOR_SECRET=mysecret
 
 CATEGORIES_ACTIVE=false
 MAX_PINNED_POSTS=1
+MAX_GROUP_PINNED_POSTS=1

backend/.eslintignore

@@ -1,3 +0,0 @@
-node_modules/
-build/
-coverage/

backend/.eslintrc.cjs

@@ -1,232 +0,0 @@
-// eslint-disable-next-line import/no-commonjs
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  parser: '@typescript-eslint/parser',
-  plugins: ['prettier', '@typescript-eslint', 'import', 'n', 'promise', 'security', 'no-catch-all'],
-  extends: [
-    'standard',
-    'eslint:recommended',
-    'plugin:n/recommended',
-    'plugin:prettier/recommended',
-    'plugin:import/recommended',
-    'plugin:import/typescript',
-    'plugin:promise/recommended',
-    'plugin:security/recommended-legacy',
-    'plugin:@eslint-community/eslint-comments/recommended',
-    'prettier',
-  ],
-  settings: {
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx'],
-    },
-    'import/resolver': {
-      typescript: {
-        project: ['./tsconfig.json', './backend/tsconfig.json'],
-      },
-      node: true,
-    },
-  },
-  rules: {
-    'no-catch-all/no-catch-all': 'error',
-    'no-console': 'error',
-    camelcase: 'error',
-    'no-debugger': 'error',
-    'prettier/prettier': [
-      'error',
-      {
-        htmlWhitespaceSensitivity: 'ignore',
-      },
-    ],
-    // import
-    'import/export': 'error',
-    // 'import/no-deprecated': 'error',
-    'import/no-empty-named-blocks': 'error',
-    'import/no-extraneous-dependencies': 'error',
-    'import/no-mutable-exports': 'error',
-    'import/no-unused-modules': 'error',
-    'import/no-named-as-default': 'error',
-    'import/no-named-as-default-member': 'error',
-    'import/no-amd': 'error',
-    'import/no-commonjs': 'error',
-    'import/no-import-module-exports': 'error',
-    'import/no-nodejs-modules': 'off',
-    'import/unambiguous': 'off', // not compatible with .eslintrc.cjs
-    'import/default': 'error',
-    'import/named': 'off', // has false positives
-    'import/namespace': 'error',
-    'import/no-absolute-path': 'error',
-    'import/no-cycle': 'error',
-    'import/no-dynamic-require': 'error',
-    'import/no-internal-modules': 'off',
-    'import/no-relative-packages': 'error',
-    'import/no-relative-parent-imports': ['error', { ignore: ['@/*'] }],
-    'import/no-self-import': 'error',
-    'import/no-unresolved': 'error',
-    'import/no-useless-path-segments': 'error',
-    'import/no-webpack-loader-syntax': 'error',
-    'import/consistent-type-specifier-style': 'error',
-    'import/exports-last': 'off',
-    'import/extensions': 'error',
-    'import/first': 'error',
-    'import/group-exports': 'off',
-    'import/newline-after-import': 'error',
-    'import/no-anonymous-default-export': 'off', // not compatible with neode
-    'import/no-default-export': 'off', // not compatible with neode
-    'import/no-duplicates': 'error',
-    'import/no-named-default': 'error',
-    'import/no-namespace': 'error',
-    'import/no-unassigned-import': 'error',
-    'import/order': [
-      'error',
-      {
-        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
-        'newlines-between': 'always',
-        pathGroups: [
-          {
-            pattern: '@?*/**',
-            group: 'external',
-            position: 'after',
-          },
-          {
-            pattern: '@/**',
-            group: 'external',
-            position: 'after',
-          },
-        ],
-        alphabetize: {
-          order: 'asc' /* sort in ascending order. Options: ['ignore', 'asc', 'desc'] */,
-          caseInsensitive: true /* ignore case. Options: [true, false] */,
-        },
-        distinctGroup: true,
-      },
-    ],
-    'import/prefer-default-export': 'off',
-
-    // n
-    // 'n/callback-return': 'error',
-    'n/exports-style': 'error',
-    'n/file-extension-in-import': ['error', 'never'],
-    'n/global-require': 'error',
-    'n/handle-callback-err': 'error',
-    // 'n/hashbang': 'error', // part of n/recommended
-    'n/no-callback-literal': 'error',
-    // 'n/no-deprecated-api': 'error', // part of n/recommended
-    // 'n/no-exports-assign': 'error', // part of n/recommended
-    'n/no-extraneous-import': 'off', // duplicate of import/no-extraneous-dependencies // part of n/recommended
-    // 'n/no-extraneous-require': 'error', // part of n/recommended
-    'n/no-hide-core-modules': 'error',
-    'n/no-missing-import': 'off', // not compatible with typescript // part of n/recommended
-    // 'n/no-missing-require': 'error', // part of n/recommended
-    'n/no-mixed-requires': 'error',
-    'n/no-new-require': 'error',
-    'n/no-path-concat': 'error',
-    'n/no-process-env': 'error',
-    // 'n/no-process-exit': 'error', // part of n/recommended
-    'n/no-restricted-import': 'error',
-    'n/no-restricted-require': 'error',
-    'n/no-sync': 'error',
-    // 'n/no-unpublished-bin': 'error', // part of n/recommended
-    'n/no-unpublished-import': [
-      'error',
-      { allowModules: ['apollo-server-testing', 'rosie', '@faker-js/faker', 'ts-jest'] },
-    ], // part of n/recommended
-    'n/no-unpublished-require': ['error', { allowModules: ['ts-jest', 'require-json5'] }], // part of n/recommended
-    // 'n/no-unsupported-features/es-builtins': 'error', // part of n/recommended
-    // 'n/no-unsupported-features/es-syntax': 'error', // part of n/recommended
-    // 'n/no-unsupported-features/node-builtins': 'error', // part of n/recommended
-    'n/prefer-global/buffer': 'error',
-    'n/prefer-global/console': 'error',
-    'n/prefer-global/process': 'error',
-    'n/prefer-global/text-decoder': 'error',
-    'n/prefer-global/text-encoder': 'error',
-    'n/prefer-global/url': 'error',
-    'n/prefer-global/url-search-params': 'error',
-    'n/prefer-node-protocol': 'error',
-    'n/prefer-promises/dns': 'error',
-    'n/prefer-promises/fs': 'error',
-    // 'n/process-exit-as-throw': 'error', // part of n/recommended
-    'n/shebang': 'error',
-
-    // promise
-    // 'promise/always-return': 'error', // part of promise/recommended
-    'promise/avoid-new': 'error',
-    // 'promise/catch-or-return': 'error', // part of promise/recommended
-    // 'promise/no-callback-in-promise': 'warn', // part of promise/recommended
-    'promise/no-multiple-resolved': 'error',
-    'promise/no-native': 'off', // ES5 only
-    // 'promise/no-nesting': 'warn', // part of promise/recommended
-    // 'promise/no-new-statics': 'error', // part of promise/recommended
-    // 'promise/no-promise-in-callback': 'warn', // part of promise/recommended
-    // 'promise/no-return-in-finally': 'warn', // part of promise/recommended
-    // 'promise/no-return-wrap': 'error', // part of promise/recommended
-    // 'promise/param-names': 'error', // part of promise/recommended
-    'promise/prefer-await-to-callbacks': 'error',
-    'promise/prefer-catch': 'error',
-    'promise/spec-only': 'error',
-    // 'promise/valid-params': 'error', // part of promise/recommended
-
-    // eslint comments
-    '@eslint-community/eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
-    '@eslint-community/eslint-comments/no-restricted-disable': 'error',
-    '@eslint-community/eslint-comments/no-use': 'off',
-    '@eslint-community/eslint-comments/require-description': 'off',
-  },
-  overrides: [
-    // only for ts files
-    {
-      files: ['*.ts', '*.tsx'],
-      extends: [
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@typescript-eslint/recommended-requiring-type-checking',
-        'plugin:@typescript-eslint/strict',
-        'prettier',
-      ],
-      rules: {
-        // allow explicitly defined dangling promises
-        // '@typescript-eslint/no-floating-promises': ['error', { ignoreVoid: true }],
-        'no-void': ['error', { allowAsStatement: true }],
-        // ignore prefer-regexp-exec rule to allow string.match(regex)
-        '@typescript-eslint/prefer-regexp-exec': 'off',
-        // this should not run on ts files: https://github.com/import-js/eslint-plugin-import/issues/2215#issuecomment-911245486
-        'import/unambiguous': 'off',
-        // this is not compatible with typeorm, due to joined tables can be null, but are not defined as nullable
-        '@typescript-eslint/no-unnecessary-condition': 'off',
-        // respect underscore as acceptable unused variable
-        '@typescript-eslint/no-unused-vars': [
-          'error',
-          { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
-        ],
-      },
-      parserOptions: {
-        tsconfigRootDir: __dirname,
-        project: ['./tsconfig.json'],
-        // this is to properly reference the referenced project database without requirement of compiling it
-        EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
-      },
-    },
-    {
-      files: ['*.spec.ts'],
-      plugins: ['jest'],
-      env: {
-        jest: true,
-      },
-      rules: {
-        'jest/no-disabled-tests': 'error',
-        'jest/no-focused-tests': 'error',
-        'jest/no-identical-title': 'error',
-        'jest/prefer-to-have-length': 'error',
-        'jest/valid-expect': 'error',
-        '@typescript-eslint/unbound-method': 'off',
-        'jest/unbound-method': 'error',
-      },
-    },
-    {
-      extends: ['plugin:jsonc/recommended-with-jsonc'],
-      files: ['*.json', '*.json5', '*.jsonc'],
-      parser: 'jsonc-eslint-parser',
-    },
-  ],
-}

backend/.nvmrc

@@ -1 +1 @@
-v24.2.0
+v25.3.0

backend/.prettierrc.cjs

@@ -1,9 +0,0 @@
-
-module.exports = {
-  semi: false,
-  printWidth: 100,
-  singleQuote: true,
-  trailingComma: "all",
-  tabWidth: 2,
-  bracketSpacing: true
-};

backend/.tool-versions

@@ -1 +0,0 @@
-nodejs 24.2.0

backend/Dockerfile

@@ -1,4 +1,5 @@
-FROM node:24.4.0-alpine AS base
+# syntax=docker/dockerfile:1
+FROM node:25.6.1-alpine AS base
 LABEL org.label-schema.name="ocelot.social:backend"
 LABEL org.label-schema.description="Backend of the Social Network Software ocelot.social"
 LABEL org.label-schema.usage="https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/README.md"
@@ -28,13 +29,15 @@ ONBUILD COPY ./branding/email/ src/middleware/helpers/email/
 ONBUILD COPY ./branding/middlewares/ src/middleware/branding/
 ONBUILD COPY ./branding/data/ src/db/data
 ONBUILD COPY ./branding/public/ public/
-ONBUILD RUN yarn install --production=false --frozen-lockfile --non-interactive
+ONBUILD RUN --mount=type=cache,target=/yarn-cache,sharing=locked \
+    yarn install --production=false --frozen-lockfile --non-interactive --cache-folder /yarn-cache
 ONBUILD RUN yarn run build
 ONBUILD RUN mkdir /build
 ONBUILD RUN cp -r ./build /build
 ONBUILD RUN cp -r ./public /build
 ONBUILD RUN cp -r ./package.json yarn.lock /build
-ONBUILD RUN cd /build && yarn install --production=true --frozen-lockfile --non-interactive
+ONBUILD RUN --mount=type=cache,target=/yarn-cache,sharing=locked \
+    cd /build && yarn install --production=true --frozen-lockfile --non-interactive --cache-folder /yarn-cache
 
 FROM build AS test
 # required for the migrations

backend/README.md

@@ -19,18 +19,16 @@ Wait a little until your backend is up and running at [http://localhost:4000/](h
 ## Installation without Docker
 
 For the local installation you need a recent version of
-[Node](https://nodejs.org/en/) (>= `v16.19.0`). We are using
+[Node](https://nodejs.org/en/). We are using
-`v24.2.0` and therefore we recommend to use the same version
+`v25.3.0` and therefore we recommend to use the same version. You can use the
-([see](https://github.com/Ocelot-Social-Community/Ocelot-Social/issues/4082)
-some known problems with more recent node versions). You can use the
 [node version manager](https://github.com/nvm-sh/nvm) `nvm` to switch
 between different local Node versions:
 
 ```sh
-# install Node
+# install Node using '.nvmrc' file
 $ cd backend
-$ nvm install v24.2.0
+$ nvm install
-$ nvm use v24.2.0
+$ nvm use
 ```
 
 Install node dependencies with [yarn](https://yarnpkg.com/en/):

backend/eslint.config.ts

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+import config from 'eslint-config-it4c'
+import graphql from 'eslint-config-it4c/modules/graphql'
+import jest from 'eslint-config-it4c/modules/jest'
+
+export default [
+  {
+    ignores: ['node_modules/', 'build/', 'coverage/'],
+  },
+  ...config,
+  ...jest,
+  // GraphQL schema linting (extend file pattern to include .gql)
+  ...graphql.map((c) => ({
+    ...c,
+    files: ['**/*.graphql', '**/*.gql'],
+  })),
+  {
+    files: ['**/*.graphql', '**/*.gql'],
+    // TODO: Parser must be set explicitly because the it4c module only provides
+    // plugins and rules, not languageOptions. Without this, ESLint uses the JS
+    // parser for .gql files. Remove when fixed in eslint-config-it4c.
+    languageOptions: {
+      parser: graphql[0].plugins['@graphql-eslint'].parser,
+      parserOptions: {
+        graphQLConfig: {
+          schema: './src/graphql/types/**/*.gql',
+          documents: './src/graphql/queries/**/*.gql',
+        },
+      },
+    },
+    rules: {
+      // Would require descriptions on every type/field/input — too noisy for now
+      '@graphql-eslint/require-description': 'off',
+      // camelCase operation names and _id/_ne underscores conflict with existing schema
+      '@graphql-eslint/naming-convention': 'off',
+      // Many types (Image, File, InviteCode, etc.) intentionally lack id: ID!
+      '@graphql-eslint/strict-id-in-types': 'off',
+      // Fields like groupType, queryLocations match parent type name by coincidence
+      '@graphql-eslint/no-typename-prefix': 'off',
+      // neo4j-graphql-js adds arguments (first, offset) at runtime not present in static schema
+      '@graphql-eslint/known-argument-names': 'off',
+      // TODO: operations-recommended rules must be disabled because the it4c
+      // graphql module bundles both schema and operations configs together.
+      // Remove when eslint-config-it4c exports them separately (e.g. graphql/schema).
+      '@graphql-eslint/executable-definitions': 'off',
+      // neo4j-graphql-js adds fields at runtime (_id, relations) not present in static schema
+      '@graphql-eslint/fields-on-correct-type': 'off',
+    },
+  },
+  {
+    // Backend-specific TypeScript overrides
+    files: ['**/*.ts'],
+    languageOptions: {
+      parserOptions: {
+        projectService: {
+          allowDefaultProject: ['eslint.config.ts', 'jest.config.ts', 'prettier.config.ts'],
+        },
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      // TypeORM compatibility: joined tables can be null but are not defined as nullable
+      '@typescript-eslint/no-unnecessary-condition': 'off',
+      // Allow string.match(regex) instead of regex.exec(string)
+      '@typescript-eslint/prefer-regexp-exec': 'off',
+      // TODO: gradually add return types to exported functions, then remove this override
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      // Allow @/* path aliases in relative parent imports
+      'import-x/no-relative-parent-imports': ['error', { ignore: ['@/*'] }],
+    },
+  },
+  {
+    // Jest test file overrides
+    files: ['**/*.spec.ts'],
+    rules: {
+      '@typescript-eslint/unbound-method': 'off',
+    },
+  },
+  {
+    // Config files: allow require() of devDependencies
+    files: ['*.config.{js,mjs,cjs,ts,mts,cts}'],
+    rules: {
+      'n/no-unpublished-require': 'off',
+    },
+  },
+]

backend/jest.config.cjs

@@ -1,27 +0,0 @@
-/* eslint-disable import/no-commonjs */
-const requireJSON5 = require('require-json5')
-const { pathsToModuleNameMapper } = require('ts-jest')
-
-const { compilerOptions } = requireJSON5('./tsconfig.json')
-
-module.exports = {
-  verbose: true,
-  preset: 'ts-jest',
-  collectCoverage: true,
-  collectCoverageFrom: [
-    '**/*.ts',
-    '!**/node_modules/**',
-    '!**/test/**',
-    '!**/build/**',
-    '!**/src/**/?(*.)+(spec|test).ts?(x)',
-    '!**/src/db/**',
-  ],
-  coverageThreshold: {
-    global: {
-      lines: 90,
-    },
-  },
-  testMatch: ['**/src/**/?(*.)+(spec|test).ts?(x)'],
-  setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
-  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
-}

backend/jest.config.ts

@@ -0,0 +1,40 @@
+import { readFileSync } from 'node:fs'
+
+import { pathsToModuleNameMapper } from 'ts-jest'
+import { parseConfigFileTextToJson } from 'typescript'
+
+// eslint-disable-next-line n/no-sync -- config files are synchronous by nature
+const tsconfigText = readFileSync('./tsconfig.json', 'utf-8')
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- parseConfigFileTextToJson returns untyped config
+const { config } = parseConfigFileTextToJson('tsconfig.json', tsconfigText)
+const paths = (config as { compilerOptions: { paths: Record<string, string[]> } }).compilerOptions
+  .paths
+
+export default {
+  verbose: true,
+  preset: 'ts-jest',
+  collectCoverage: true,
+  collectCoverageFrom: [
+    '**/*.ts',
+    '!**/node_modules/**',
+    '!**/test/**',
+    '!**/build/**',
+    '!**/src/**/?(*.)+(spec|test).ts?(x)',
+    '!**/src/db/**',
+    '!*.config.ts',
+    '!**/*.d.ts',
+    '!**/gql-register.ts',
+  ],
+  coverageThreshold: {
+    global: {
+      lines: 93,
+    },
+  },
+  testMatch: ['**/src/**/?(*.)+(spec|test).ts?(x)'],
+  setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
+  transform: {
+    '\\.gql$': '<rootDir>/test/graphqlTransform.ts',
+    '\\.tsx?$': 'ts-jest',
+  },
+  moduleNameMapper: pathsToModuleNameMapper(paths, { prefix: '<rootDir>/' }),
+}

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocelot-social-backend",
-  "version": "3.11.0",
+  "version": "3.14.1",
   "description": "GraphQL Backend for ocelot.social",
   "repository": "https://github.com/Ocelot-Social-Community/Ocelot-Social",
   "author": "ocelot.social Community",
@@ -10,122 +10,111 @@
   "scripts": {
     "start": "node build/src/",
     "build": "tsc && tsc-alias && ./scripts/build.copy.files.sh",
-    "dev": "nodemon --exec ts-node --require tsconfig-paths/register src/index.ts -e js,ts,gql",
+    "dev": "nodemon --exec tsx src/index.ts -e js,ts,gql",
     "dev:debug": "nodemon --exec node --inspect=0.0.0.0:9229 build/src/index.js -e js,ts,gql",
-    "lint": "eslint --max-warnings=0 --report-unused-disable-directives --ext .js,.ts,.cjs,.json,.json5,.jsonc .",
+    "lint": "eslint --max-warnings 0 .",
     "test": "cross-env NODE_ENV=test NODE_OPTIONS=--max-old-space-size=8192 jest --runInBand --coverage --forceExit --detectOpenHandles",
-    "db:reset": "ts-node --require tsconfig-paths/register src/db/reset.ts",
+    "db:reset": "tsx src/db/reset.ts",
-    "db:reset:withmigrations": "ts-node --require tsconfig-paths/register src/db/reset-with-migrations.ts",
+    "db:reset:withmigrations": "tsx src/db/reset-with-migrations.ts",
-    "db:seed": "ts-node --require tsconfig-paths/register src/db/seed.ts",
+    "db:seed": "tsx --require ./src/graphql/gql-register.ts src/db/seed.ts",
-    "db:data:admin": "ts-node --require tsconfig-paths/register src/db/admin.ts",
+    "db:data:admin": "tsx src/db/admin.ts",
-    "db:data:badges": "ts-node --require tsconfig-paths/register src/db/badges.ts",
+    "db:data:badges": "tsx src/db/badges.ts",
-    "db:data:branding": "ts-node --require tsconfig-paths/register src/db/data-branding.ts",
+    "db:data:branding": "tsx src/db/data-branding.ts",
-    "db:data:categories": "ts-node --require tsconfig-paths/register src/db/categories.ts",
+    "db:data:categories": "tsx src/db/categories.ts",
     "db:migrate": "migrate --compiler 'ts:./src/db/compiler.ts' --migrations-dir ./src/db/migrations --store ./src/db/migrate/store.ts",
     "db:migrate:create": "migrate --compiler 'ts:./src/db/compiler.ts' --migrations-dir ./src/db/migrations --template-file ./src/db/migrate/template.ts --date-format 'yyyymmddHHmmss' create",
+    "db:func:disable:notifications": "tsx src/db/disable-notifications.ts",
     "prod:migrate": "migrate --migrations-dir ./build/src/db/migrations --store ./build/src/db/migrate/store.js",
     "prod:db:data:branding": "node build/src/db/data-branding.js",
-    "prod:db:data:categories": "node build/src/db/categories.js"
+    "prod:db:data:categories": "node build/src/db/categories.js",
+    "prod:db:data:admin": "node build/src/db/admin.js",
+    "prod:db:func:disable:notifications": "node build/src/db/disable-notifications.js"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.844.0",
+    "@apollo/server": "^4.11.3",
-    "@aws-sdk/lib-storage": "^3.842.0",
+    "@aws-sdk/client-s3": "^3.1000.0",
-    "@sentry/node": "^5.15.4",
+    "@aws-sdk/lib-storage": "^3.1000.0",
+    "@graphql-tools/load-files": "^7.0.0",
+    "@graphql-tools/merge": "^9.0.0",
+    "@sentry/node": "^5.30.0",
     "@types/mime-types": "^3.0.1",
-    "apollo-server": "~2.14.2",
+    "bcryptjs": "~3.0.3",
-    "apollo-server-express": "^2.14.2",
+    "body-parser": "^2.2.2",
-    "bcryptjs": "~3.0.2",
+    "cheerio": "~1.2.0",
-    "body-parser": "^1.20.3",
+    "cross-env": "~10.1.0",
-    "cheerio": "~1.1.0",
-    "cross-env": "~7.0.3",
     "dotenv": "~17.0.1",
-    "email-templates": "^12.0.3",
+    "email-templates": "^13.0.1",
-    "express": "^5.1.0",
+    "express": "^4.22.1",
-    "graphql": "^14.6.0",
+    "graphql": "^16.13.0",
-    "graphql-middleware": "~4.0.2",
+    "graphql-middleware": "~6.1.35",
-    "graphql-middleware-sentry": "^3.2.1",
     "graphql-redis-subscriptions": "^2.7.0",
-    "graphql-shield": "~7.2.2",
+    "graphql-shield": "^7.6.5",
-    "graphql-subscriptions": "^1.1.0",
+    "graphql-subscriptions": "^2.0.0",
-    "graphql-tag": "~2.10.3",
     "graphql-upload": "^13.0.0",
+    "graphql-ws": "^5.16.2",
     "helmet": "~8.1.0",
-    "ioredis": "^5.6.1",
+    "ioredis": "^5.9.3",
     "jsonwebtoken": "~8.5.1",
     "languagedetect": "^2.0.0",
-    "linkify-html": "^4.3.1",
+    "linkify-html": "^4.3.2",
-    "linkifyjs": "^4.3.1",
+    "linkifyjs": "^4.3.2",
-    "lodash": "~4.17.21",
+    "lodash": "~4.17.23",
-    "merge-graphql-schemas": "^1.7.8",
+    "metascraper": "^5.49.24",
-    "metascraper": "^5.49.1",
+    "metascraper-author": "^5.49.24",
-    "metascraper-author": "^5.49.1",
+    "metascraper-date": "^5.49.24",
-    "metascraper-date": "^5.49.1",
+    "metascraper-description": "^5.49.24",
-    "metascraper-description": "^5.49.1",
+    "metascraper-image": "^5.49.24",
-    "metascraper-image": "^5.49.1",
+    "metascraper-lang": "^5.49.24",
-    "metascraper-lang": "^5.49.1",
     "metascraper-lang-detector": "^4.10.2",
-    "metascraper-logo": "^5.49.1",
+    "metascraper-logo": "^5.49.24",
-    "metascraper-publisher": "^5.49.1",
+    "metascraper-publisher": "^5.49.24",
     "metascraper-soundcloud": "^5.34.4",
-    "metascraper-title": "^5.49.1",
+    "metascraper-title": "^5.49.24",
-    "metascraper-url": "^5.49.1",
+    "metascraper-url": "^5.49.24",
-    "metascraper-video": "^5.49.1",
+    "metascraper-video": "^5.49.24",
-    "metascraper-youtube": "^5.49.1",
+    "metascraper-youtube": "^5.49.24",
     "migrate": "^2.1.0",
-    "mime-types": "^3.0.1",
+    "mime-types": "^3.0.2",
-    "minimatch": "^10.0.3",
+    "minimatch": "^10.2.4",
     "mustache": "^4.2.0",
     "neo4j-driver": "^4.4.11",
-    "neo4j-graphql-js": "^2.11.5",
+    "neo4j-graphql-js": "2.11.5",
     "neode": "^0.4.9",
     "node-fetch": "^2.7.0",
-    "nodemailer": "^7.0.5",
+    "nodemailer": "^8.0.1",
     "nodemailer-html-to-text": "^3.2.0",
-    "preview-email": "^3.1.0",
+    "preview-email": "^3.1.1",
     "pug": "^3.0.3",
-    "sanitize-html": "~2.17.0",
+    "sanitize-html": "~2.17.1",
-    "slug": "~9.1.0",
+    "slugify": "^1.6.6",
+    "subscriptions-transport-ws": "^0.11.0",
     "trunc-html": "~1.1.2",
-    "tslog": "^4.9.3",
+    "tslog": "^4.10.2",
     "uuid": "~9.0.1",
-    "validator": "^13.15.15",
+    "validator": "^13.15.26",
+    "ws": "^8.18.2",
     "xregexp": "^5.1.2"
   },
   "devDependencies": {
-    "@eslint-community/eslint-plugin-eslint-comments": "^4.5.0",
     "@faker-js/faker": "9.9.0",
     "@types/email-templates": "^10.0.4",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/jsonwebtoken": "~8.5.1",
-    "@types/lodash": "^4.17.20",
+    "@types/lodash": "^4.17.24",
-    "@types/node": "^24.0.14",
+    "@types/node": "^25.3.2",
-    "@types/request": "^2.48.12",
+    "@types/request": "^2.48.13",
     "@types/slug": "^5.0.9",
     "@types/uuid": "~9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@types/ws": "^8.18.1",
-    "@typescript-eslint/parser": "^5.62.0",
+    "eslint": "^9.27.0",
-    "apollo-server-testing": "~2.11.0",
+    "eslint-config-it4c": "^0.12.0",
-    "eslint": "^8.57.1",
+    "jest": "^30.2.0",
-    "eslint-config-prettier": "^10.1.5",
+    "nodemon": "~3.1.14",
-    "eslint-config-standard": "^17.1.0",
+    "prettier": "^3.8.1",
-    "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jest": "^29.0.1",
-    "eslint-plugin-jsonc": "^2.20.1",
-    "eslint-plugin-n": "^17.21.0",
-    "eslint-plugin-no-catch-all": "^1.1.0",
-    "eslint-plugin-prettier": "^5.5.1",
-    "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-security": "^3.0.1",
-    "jest": "^29.7.0",
-    "nodemon": "~3.1.10",
-    "prettier": "^3.6.2",
-    "require-json5": "^1.3.0",
     "rosie": "^2.1.1",
-    "ts-jest": "^29.4.0",
+    "ts-jest": "^29.4.6",
-    "ts-node": "^10.9.2",
     "tsc-alias": "^1.8.16",
-    "tsconfig-paths": "^4.2.0",
+    "tsx": "^4.21.0",
     "typescript": "^5.8.3"
   },
   "resolutions": {
@@ -133,7 +122,11 @@
     "**/graphql-upload": "^11.0.0",
     "**/strip-ansi": "6.0.1",
     "**/string-width": "4.2.0",
-    "**/wrap-ansi": "7.0.0"
+    "**/wrap-ansi": "7.0.0",
+    "**/jwa": "^2.0.1",
+    "**/@types/express": "4.17.25",
+    "neo4j-graphql-js/graphql": "^16.11.0",
+    "graphql-upload/graphql": "^16.11.0"
   },
   "engines": {
     "node": ">=20.12.1"

backend/prettier.config.ts

@@ -0,0 +1 @@
+export { default } from 'eslint-config-it4c/prettier'

backend/src/config/index.ts

@@ -1,14 +1,17 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable import-x/no-namespace */
+/* eslint-disable @typescript-eslint/no-redundant-type-constituents */
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 
 /* eslint-disable n/no-process-env */
 import { config } from 'dotenv'
-// eslint-disable-next-line import/no-namespace
-import * as SMTPTransport from 'nodemailer/lib/smtp-pool'
 
 import emails from './emails'
 import metadata from './metadata'
 
+import type * as SMTPTransport from 'nodemailer/lib/smtp-pool'
+
 // Load env file
 config()
 
@@ -30,6 +33,7 @@ const environment = {
     : [],
   SEND_MAIL: env.NODE_ENV !== 'test',
   LOG_LEVEL: 'DEBUG',
+  PROXY_S3: env.PROXY_S3,
 }
 
 const server = {
@@ -47,7 +51,7 @@ const SMTP_PASSWORD = env.SMTP_PASSWORD
 const SMTP_DKIM_DOMAINNAME = env.SMTP_DKIM_DOMAINNAME
 const SMTP_DKIM_KEYSELECTOR = env.SMTP_DKIM_KEYSELECTOR
 // PEM format = https://docs.progress.com/bundle/datadirect-hybrid-data-pipeline-installation-46/page/PEM-file-format.html
-const SMTP_DKIM_PRIVATKEY = env.SMTP_DKIM_PRIVATKEY?.replace(/\\n/g, '\n') // replace all "\n" in .env string by real line break
+const SMTP_DKIM_PRIVATEKEY = env.SMTP_DKIM_PRIVATEKEY?.replace(/\\n/g, '\n') // replace all "\n" in .env string by real line break
 const SMTP_MAX_CONNECTIONS = (env.SMTP_MAX_CONNECTIONS && parseInt(env.SMTP_MAX_CONNECTIONS)) || 5
 const SMTP_MAX_MESSAGES = (env.SMTP_MAX_MESSAGES && parseInt(env.SMTP_MAX_MESSAGES)) || 100
 
@@ -66,11 +70,11 @@ if (SMTP_USERNAME && SMTP_PASSWORD) {
     pass: SMTP_PASSWORD,
   }
 }
-if (SMTP_DKIM_DOMAINNAME && SMTP_DKIM_KEYSELECTOR && SMTP_DKIM_PRIVATKEY) {
+if (SMTP_DKIM_DOMAINNAME && SMTP_DKIM_KEYSELECTOR && SMTP_DKIM_PRIVATEKEY) {
   nodemailerTransportOptions.dkim = {
     domainName: SMTP_DKIM_DOMAINNAME,
     keySelector: SMTP_DKIM_KEYSELECTOR,
-    privateKey: SMTP_DKIM_PRIVATKEY,
+    privateKey: SMTP_DKIM_PRIVATEKEY,
   }
 }
 
@@ -92,19 +96,21 @@ const redis = {
 }
 
 const required = {
+  EMAIL_DEFAULT_SENDER: env.EMAIL_DEFAULT_SENDER,
+
   AWS_ACCESS_KEY_ID: env.AWS_ACCESS_KEY_ID,
   AWS_SECRET_ACCESS_KEY: env.AWS_SECRET_ACCESS_KEY,
   AWS_ENDPOINT: env.AWS_ENDPOINT,
   AWS_REGION: env.AWS_REGION,
   AWS_BUCKET: env.AWS_BUCKET,
 
+  IMAGOR_PUBLIC_URL: env.IMAGOR_PUBLIC_URL,
+  IMAGOR_SECRET: env.IMAGOR_SECRET,
+
   MAPBOX_TOKEN: env.MAPBOX_TOKEN,
   JWT_SECRET: env.JWT_SECRET,
-  PRIVATE_KEY_PASSPHRASE: env.PRIVATE_KEY_PASSPHRASE,
 }
 
-const S3_PUBLIC_GATEWAY = env.S3_PUBLIC_GATEWAY
-
 // https://stackoverflow.com/a/53050575
 type NoUndefinedField<T> = { [P in keyof T]-?: NoUndefinedField<NonNullable<T[P]>> }
 
@@ -121,7 +127,6 @@ function assertRequiredConfig(
 assertRequiredConfig(required)
 
 const options = {
-  EMAIL_DEFAULT_SENDER: env.EMAIL_DEFAULT_SENDER,
   SUPPORT_EMAIL: env.SUPPORT_EMAIL,
   SUPPORT_URL: emails.SUPPORT_LINK,
   APPLICATION_NAME: metadata.APPLICATION_NAME,
@@ -136,6 +141,9 @@ const options = {
   MAX_PINNED_POSTS: Number.isNaN(Number(process.env.MAX_PINNED_POSTS))
     ? 1
     : Number(process.env.MAX_PINNED_POSTS),
+  MAX_GROUP_PINNED_POSTS: Number.isNaN(Number(process.env.MAX_GROUP_PINNED_POSTS))
+    ? 1
+    : Number(process.env.MAX_GROUP_PINNED_POSTS),
 }
 
 const language = {
@@ -151,7 +159,6 @@ const CONFIG = {
   ...redis,
   ...options,
   ...language,
-  S3_PUBLIC_GATEWAY,
 }
 
 export type Config = typeof CONFIG
@@ -162,7 +169,8 @@ export type S3Config = Pick<
   | 'AWS_ENDPOINT'
   | 'AWS_REGION'
   | 'AWS_BUCKET'
-  | 'S3_PUBLIC_GATEWAY'
+  | 'IMAGOR_SECRET'
+  | 'IMAGOR_PUBLIC_URL'
 >
 export default CONFIG
 

backend/src/context/database.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-shadow */
 import { getDriver, getNeode } from '@db/neo4j'
 
 import type { Driver } from 'neo4j-driver'

backend/src/context/index.ts

@@ -1,14 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-
 import databaseContext from '@context/database'
 import pubsubContext from '@context/pubsub'
 import CONFIG from '@src/config'
-import type { DecodedUser } from '@src/jwt/decode'
 import { decode } from '@src/jwt/decode'
 import ocelotLogger from '@src/logger'
-import type OcelotLogger from '@src/logger'
 
-import type { ApolloServerExpressConfig } from 'apollo-server-express'
+import type { DecodedUser } from '@src/jwt/decode'
 
 const serverDatabase = databaseContext()
 const serverPubsub = pubsubContext()
@@ -18,14 +14,14 @@ export const getContext =
     database?: ReturnType<typeof databaseContext>
     pubsub?: ReturnType<typeof pubsubContext>
     authenticatedUser: DecodedUser | null | undefined
-    logger?: typeof OcelotLogger
+    logger?: typeof ocelotLogger
     config: typeof CONFIG
   }) =>
   async (req: { headers: { authorization?: string } }) => {
     const {
       database = serverDatabase,
       pubsub = serverPubsub,
-      authenticatedUser = undefined,
+      authenticatedUser,
       logger = ocelotLogger,
       config = CONFIG,
     } = opts ?? {}
@@ -44,18 +40,11 @@ export const getContext =
       req,
       cypherParams: {
         currentUserId: user ? user.id : null,
+        languageDefault: config.LANGUAGE_DEFAULT.toUpperCase(),
       },
       config,
     }
     return result
   }
 
-export const context: ApolloServerExpressConfig['context'] = async (options) => {
-  const { connection, req } = options
-  if (connection) {
-    return connection.context
-  } else {
-    return getContext()(req)
-  }
-}
 export type Context = Awaited<ReturnType<ReturnType<typeof getContext>>>

backend/src/db/badges.ts

@@ -2,7 +2,7 @@
 import { getNeode } from './neo4j'
 import { trophies, verification } from './seed/badges'
 
-// eslint-disable-next-line import/newline-after-import
+// eslint-disable-next-line import-x/newline-after-import
 ;(async function () {
   const neode = getNeode()
   try {

backend/src/db/compiler.ts

@@ -1,9 +1,8 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable import/no-commonjs */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-// eslint-disable-next-line n/no-unpublished-require, @typescript-eslint/no-var-requires
+/* eslint-disable @typescript-eslint/no-require-imports */
-const tsNode = require('ts-node')
+/* eslint-disable import-x/no-commonjs */
-// eslint-disable-next-line import/no-unassigned-import, n/no-unpublished-require
+// eslint-disable-next-line n/no-unpublished-require
-require('tsconfig-paths/register')
+const tsx = require('tsx/cjs/api')
 
-module.exports = tsNode.register
+module.exports = tsx.register

backend/src/db/data-branding.ts

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable @typescript-eslint/await-thenable */
 import { readdir } from 'node:fs/promises'
 import path from 'node:path'
 

backend/src/db/disable-notifications.ts

@@ -0,0 +1,61 @@
+import databaseContext from '@context/database'
+
+const run = async () => {
+  const args = process.argv.slice(2)
+
+  if (args.length !== 1) {
+    // eslint-disable-next-line no-console
+    console.error('Usage: yarn run db:func:disable-notifications <email>')
+
+    process.exit(1)
+  }
+
+  const email = args[0]
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!emailRegex.test(email)) {
+    // eslint-disable-next-line no-console
+    console.error('Error: Invalid email address format')
+
+    process.exit(1)
+  }
+
+  const { write } = databaseContext()
+
+  const result = (
+    await write({
+      query: `
+    MATCH (:EmailAddress {email: $email})-[:BELONGS_TO]->(user:User)
+      SET user.emailNotificationsFollowingUsers = false
+      SET user.emailNotificationsPostInGroup = false
+      SET user.emailNotificationsCommentOnObservedPost = false
+      SET user.emailNotificationsMention = false
+      SET user.emailNotificationsChatMessage = false
+      SET user.emailNotificationsGroupMemberJoined = false
+      SET user.emailNotificationsGroupMemberLeft = false
+      SET user.emailNotificationsGroupMemberRemoved = false
+      SET user.emailNotificationsGroupMemberRoleChanged = false
+    RETURN toString(count(user)) as count
+    `,
+      variables: {
+        email,
+      },
+    })
+  ).records[0].get('count') as string
+
+  if (result !== '1') {
+    // eslint-disable-next-line no-console
+    console.error(`User with email address ${email} not found`)
+
+    process.exit(1)
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(`Notifications for User with email address ${email} disabled`)
+
+  process.exit(0)
+}
+
+void (async function () {
+  await run()
+})()

backend/src/db/factories.ts

@@ -4,19 +4,22 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable n/no-unpublished-import */
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import { faker } from '@faker-js/faker'
 import { hashSync } from 'bcryptjs'
 import { Factory } from 'rosie'
-import slugify from 'slug'
+import slugify from 'slugify'
 import { v4 as uuid } from 'uuid'
 
 import { generateInviteCode } from '@graphql/resolvers/inviteCodes'
 import { isUniqueFor } from '@middleware/sluggifyMiddleware'
 import uniqueSlug from '@middleware/slugify/uniqueSlug'
-import { Context } from '@src/context'
 
 import { getDriver, getNeode } from './neo4j'
 
+import type { Context } from '@src/context'
+
 const neode = getNeode()
 
 const uniqueImageUrl = (imageUrl) => {
@@ -49,14 +52,14 @@ Factory.define('category')
   .attr('id', uuid)
   .attr('icon', 'globe')
   .attr('name', 'Global Peace & Nonviolence')
-  .after((buildObject, _options) => {
+  .after(async (buildObject, _options) => {
     return neode.create('Category', buildObject)
   })
 
 Factory.define('badge')
   .attr('type', 'crowdfunding')
   .attr('status', 'permanent')
-  .after((buildObject, _options) => {
+  .after(async (buildObject, _options) => {
     return neode.create('Badge', buildObject)
   })
 
@@ -67,7 +70,7 @@ Factory.define('image')
   .attr('alt', faker.lorem.sentence)
   .attr('type', 'image/jpeg')
   .attr('url', null)
-  .after((buildObject, _options) => {
+  .after(async (buildObject, _options) => {
     if (!buildObject.url) {
       buildObject.url = faker.image.urlPicsumPhotos({
         width: buildObject.width,
@@ -84,7 +87,7 @@ Factory.define('file')
   .attr('name', faker.lorem.slug)
   .attr('type', 'image/jpeg')
   .attr('url', null)
-  .after((buildObject, _options) => {
+  .after(async (buildObject, _options) => {
     if (!buildObject.url) {
       buildObject.url = faker.image.urlPicsumPhotos()
     }
@@ -171,8 +174,8 @@ Factory.define('post')
     return Promise.all([Factory.build('category')])
   }) */
   .option('tagIds', [])
-  .option('tags', ['tagIds'], (tagIds) => {
+  .option('tags', ['tagIds'], async (tagIds) => {
-    return Promise.all(tagIds.map((id) => neode.find('Tag', id)))
+    return Promise.all(tagIds.map(async (id) => neode.find('Tag', id)))
   })
   .option('authorId', null)
   .option('author', ['authorId'], (authorId) => {
@@ -264,7 +267,7 @@ Factory.define('donations')
   .attr('showDonations', true)
   .attr('goal', 15000)
   .attr('progress', 7000)
-  .after((buildObject, _options) => {
+  .after(async (buildObject, _options) => {
     return neode.create('Donations', buildObject)
   })
 
@@ -275,13 +278,13 @@ const emailDefaults = {
 
 Factory.define('emailAddress')
   .attrs(emailDefaults)
-  .after((buildObject, _options) => {
+  .after(async (buildObject, _options) => {
     return neode.create('EmailAddress', buildObject)
   })
 
 Factory.define('unverifiedEmailAddress')
   .attr(emailDefaults)
-  .after((buildObject, _options) => {
+  .after(async (buildObject, _options) => {
     return neode.create('UnverifiedEmailAddress', buildObject)
   })
 
@@ -294,7 +297,7 @@ const inviteCodeDefaults = {
 Factory.define('inviteCode')
   .attrs(inviteCodeDefaults)
   .option('groupId', null)
-  .option('group', ['groupId'], (groupId) => {
+  .option('group', ['groupId'], async (groupId) => {
     if (groupId) {
       return neode.find('Group', groupId)
     }
@@ -331,11 +334,11 @@ Factory.define('location')
     id: 'country.10743216036480410',
     type: 'country',
   })
-  .after((buildObject, _options) => {
+  .after(async (buildObject, _options) => {
     return neode.create('Location', buildObject)
   })
 
-Factory.define('report').after((buildObject, _options) => {
+Factory.define('report').after(async (buildObject, _options) => {
   return neode.create('Report', buildObject)
 })
 
@@ -343,7 +346,7 @@ Factory.define('tag')
   .attrs({
     name: '#human-connection',
   })
-  .after((buildObject, _options) => {
+  .after(async (buildObject, _options) => {
     return neode.create('Tag', buildObject)
   })
 
@@ -351,7 +354,7 @@ Factory.define('socialMedia')
   .attrs({
     url: 'https://mastodon.social/@Gargron',
   })
-  .after((buildObject, _options) => {
+  .after(async (buildObject, _options) => {
     return neode.create('SocialMedia', buildObject)
   })
 

backend/src/db/migrate/store.ts

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-confusing-void-expression */
 import { getDriver, getNeode } from '@db/neo4j'
 
 class Store {
@@ -83,7 +84,7 @@ class Store {
     const driver = getDriver()
     const session = driver.session()
     const { migrations } = set
-    const writeTxResultPromise = session.writeTransaction((txc) => {
+    const writeTxResultPromise = session.writeTransaction(async (txc) => {
       return Promise.all(
         migrations.map(async (migration) => {
           const { title, description, timestamp } = migration

backend/src/db/migrations-examples/20200123150105-merge_duplicate_user_accounts.ts

@@ -4,8 +4,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import-x/no-extraneous-dependencies */
 /* eslint-disable promise/prefer-await-to-callbacks */
+/* eslint-disable import-x/no-deprecated */
 import { throwError, concat } from 'rxjs'
 import { flatMap, mergeMap, map, catchError, filter } from 'rxjs/operators'
 
@@ -71,7 +72,7 @@ export function up(next) {
       ),
     )
     .subscribe({
-      next: ({ user, email, _oldUser, oldEmail }) =>
+      next: ({ user, email, _oldUser, oldEmail }) => {
         // eslint-disable-next-line no-console
         console.log(`
           Merged:
@@ -79,7 +80,8 @@ export function up(next) {
           userId: ${user.id}
           email: ${oldEmail} => ${email.email}
           =============================
-        `),
+        `)
+      },
       complete: () => {
         // eslint-disable-next-line no-console
         console.log('Merging of duplicate users completed')

backend/src/db/migrations-examples/20200123150110-merge_duplicate_location_nodes.ts

@@ -4,8 +4,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import-x/no-extraneous-dependencies */
 /* eslint-disable promise/prefer-await-to-callbacks */
+/* eslint-disable import-x/no-deprecated */
 import { throwError, concat } from 'rxjs'
 import { flatMap, mergeMap, map, catchError } from 'rxjs/operators'
 
@@ -65,7 +66,7 @@ export function up(next) {
       ),
     )
     .subscribe({
-      next: ({ updatedLocation, location }) =>
+      next: ({ updatedLocation, location }) => {
         // eslint-disable-next-line no-console
         console.log(`
           Merged:
@@ -73,7 +74,8 @@ export function up(next) {
           locationId: ${location.id}
           updatedLocation: ${location.id} => ${updatedLocation.id}
           =============================
-        `),
+        `)
+      },
       complete: () => {
         // eslint-disable-next-line no-console
         console.log('Merging of duplicate locations completed')

backend/src/db/migrations/1613589876420-null_mutation.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
 'use strict'
 
 export async function up(_next) {}

backend/src/db/migrations/20250502230521-migrate-to-s3.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/await-thenable */
 
 import { open } from 'node:fs/promises'
 import path from 'node:path'
@@ -37,42 +38,38 @@ export async function up(_next) {
     urls = urls.filter((url) => url.startsWith('/uploads'))
     // eslint-disable-next-line no-console
     console.log('URLS uploaded:')
-    await Promise.all(
+    for await (const url of urls) {
-      urls
+      const { pathname } = new URL(url, 'http://example.org')
-        .map((url) => async () => {
+      // TODO: find a better way to do this - this is quite a hack
-          const { pathname } = new URL(url, 'http://example.org')
+      const fileLocation =
-          // TODO: find a better way to do this - this is quite a hack
+        CONFIG.NODE_ENV === 'production'
-          const fileLocation =
+          ? path.join(__dirname, `../../../../public/${pathname}`) // we're in the /build folder
-            CONFIG.NODE_ENV === 'production'
+          : path.join(__dirname, `../../../public/${pathname}`)
-              ? path.join(__dirname, `../../../../public/${pathname}`) // we're in the /build folder
+      const s3Location = `original${pathname}`
-              : path.join(__dirname, `../../../public/${pathname}`)
+      const mimeType = lookup(fileLocation)
-          const s3Location = `original${pathname}`
+      // eslint-disable-next-line security/detect-non-literal-fs-filename
-          const mimeType = lookup(fileLocation)
+      const fileHandle = await open(fileLocation)
-          // eslint-disable-next-line security/detect-non-literal-fs-filename
+      const params = {
-          const fileHandle = await open(fileLocation)
+        Bucket: AWS_BUCKET,
-          const params = {
+        Key: s3Location,
-            Bucket: AWS_BUCKET,
+        ACL: ObjectCannedACL.public_read,
-            Key: s3Location,
+        ContentType: mimeType || 'image/jpeg',
-            ACL: ObjectCannedACL.public_read,
+        Body: fileHandle.createReadStream(),
-            ContentType: mimeType || 'image/jpeg',
+      }
-            Body: fileHandle.createReadStream(),
+      const command = new Upload({ client: s3, params })
-          }
-          const command = new Upload({ client: s3, params })
 
-          const data = await command.done()
+      const data = await command.done()
-          const { Location: spacesUrl } = data
+      const { Location: spacesUrl } = data
 
-          const updatedRecord = await transaction.run(
+      const updatedRecord = await transaction.run(
-            'MATCH (image:Image {url: $url}) SET image.url = $spacesUrl RETURN image.url as url',
+        'MATCH (image:Image {url: $url}) SET image.url = $spacesUrl RETURN image.url as url',
-            { url, spacesUrl },
+        { url, spacesUrl },
-          )
+      )
-          const [updatedUrl] = updatedRecord.records.map((record) => record.get('url') as string)
+      const [updatedUrl] = updatedRecord.records.map((record) => record.get('url') as string)
-          // eslint-disable-next-line no-console
+      // eslint-disable-next-line no-console
-          console.log(updatedUrl)
+      console.log(updatedUrl)
-          return updatedUrl
+      // return updatedUrl
-        })
+    }
-        .map((p) => p()),
-    )
     await transaction.commit()
   } catch (error) {
     // eslint-disable-next-line no-console

backend/src/db/migrations/20250804140837-delted-user-follows.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+
+import { getDriver } from '@db/neo4j'
+
+export const description = 'Delete follow relation for deleted users'
+
+export async function up(_next) {
+  const driver = getDriver()
+  const session = driver.session()
+  const transaction = session.beginTransaction()
+
+  try {
+    // Implement your migration here.
+    await transaction.run(`
+      MATCH (:User {deleted: true})-[follow:FOLLOWS]-(:User)
+      DELETE follow;
+    `)
+    await transaction.commit()
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+    await transaction.rollback()
+    // eslint-disable-next-line no-console
+    console.log('rolled back')
+    throw new Error(error)
+  } finally {
+    await session.close()
+  }
+}
+
+export async function down(_next) {
+  const driver = getDriver()
+  const session = driver.session()
+  const transaction = session.beginTransaction()
+
+  try {
+    // cannot be rolled back
+    // Implement your migration here.
+    // await transaction.run(``)
+    // await transaction.commit()
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+    await transaction.rollback()
+    // eslint-disable-next-line no-console
+    console.log('rolled back')
+    throw new Error(error)
+  } finally {
+    await session.close()
+  }
+}

backend/src/db/models/Location.ts

@@ -13,6 +13,7 @@ export default {
   nameNL: { type: 'string' },
   namePL: { type: 'string' },
   nameRU: { type: 'string' },
+  nameSQ: { type: 'string' },
   isIn: {
     type: 'relationship',
     relationship: 'IS_IN',

backend/src/db/models/Post.ts

@@ -18,7 +18,7 @@ export default {
   },
   title: { type: 'string', disallow: [null], min: 3 },
   slug: { type: 'string', allow: [null], unique: 'true' },
-  content: { type: 'string', disallow: [null], min: 3 },
+  content: { type: 'string', disallow: [null], required: true, min: 3 },
   contentExcerpt: { type: 'string', allow: [null] },
   deleted: { type: 'boolean', default: false },
   disabled: { type: 'boolean', default: false },
@@ -58,6 +58,7 @@ export default {
     },
   },
   pinned: { type: 'boolean', default: null, valid: [null, true] },
+  groupPinned: { type: 'boolean', default: null, valid: [null, true] },
   postType: { type: 'string', default: 'Article', valid: ['Article', 'Event'] },
   observes: {
     type: 'relationship',

backend/src/db/models/User.spec.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable jest/valid-title */
 
 import { cleanDatabase } from '@db/factories'
 import { getNeode, getDriver } from '@db/neo4j'
@@ -65,8 +66,8 @@ describe('slug', () => {
   })
 
   describe('characters', () => {
-    const createUser = (attrs) => {
+    const createUser = async (attrs) => {
-      return neode.create('User', attrs).then((user) => user.toJson())
+      return neode.create('User', attrs).then(async (user) => user.toJson())
     }
 
     it('-', async () => {
@@ -81,7 +82,7 @@ describe('slug', () => {
       })
     })
 
-    it(' ', async () => {
+    it('', async () => {
       await expect(createUser({ slug: 'matt rider' })).rejects.toThrow('ERROR_VALIDATION')
     })
 

backend/src/db/models/index.ts

@@ -1,36 +1,49 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable n/no-missing-require */
-/* eslint-disable n/global-require */
 // NOTE: We cannot use `fs` here to clean up the code. Cypress breaks on any npm
 // module that is not browser-compatible. Node's `fs` module is server-side only
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+//
-declare let Cypress: any | undefined
+// We use static imports instead of dynamic require() to ensure compatibility
+// with both Node.js and Webpack (used by Cypress cucumber preprocessor).
+
+import Badge from './Badge'
+import Category from './Category'
+import Comment from './Comment'
+import Donations from './Donations'
+import EmailAddress from './EmailAddress'
+import File from './File'
+import Group from './Group'
+import Image from './Image'
+import InviteCode from './InviteCode'
+import Location from './Location'
+import Migration from './Migration'
+import Post from './Post'
+import Report from './Report'
+import SocialMedia from './SocialMedia'
+import Tag from './Tag'
+import UnverifiedEmailAddress from './UnverifiedEmailAddress'
+import User from './User'
+
+import type Neode from 'neode'
+
+// Type assertion needed because TypeScript infers literal types from the model
+// objects (e.g., type: 'string' as literal), but Neode expects the broader
+// SchemaObject type with PropertyTypes union. The Neode type definitions are
+// incomplete/incorrect, so we use double assertion to bypass the check.
 export default {
-  File: typeof Cypress !== 'undefined' ? require('./File') : require('./File').default,
+  Badge,
-  Image: typeof Cypress !== 'undefined' ? require('./Image') : require('./Image').default,
+  Category,
-  Badge: typeof Cypress !== 'undefined' ? require('./Badge') : require('./Badge').default,
+  Comment,
-  User: typeof Cypress !== 'undefined' ? require('./User') : require('./User').default,
+  Donations,
-  Group: typeof Cypress !== 'undefined' ? require('./Group') : require('./Group').default,
+  EmailAddress,
-  EmailAddress:
+  File,
-    typeof Cypress !== 'undefined' ? require('./EmailAddress') : require('./EmailAddress').default,
+  Group,
-  UnverifiedEmailAddress:
+  Image,
-    typeof Cypress !== 'undefined'
+  InviteCode,
-      ? require('./UnverifiedEmailAddress')
+  Location,
-      : require('./UnverifiedEmailAddress').default,
+  Migration,
-  SocialMedia:
+  Post,
-    typeof Cypress !== 'undefined' ? require('./SocialMedia') : require('./SocialMedia').default,
+  Report,
-  Post: typeof Cypress !== 'undefined' ? require('./Post') : require('./Post').default,
+  SocialMedia,
-  Comment: typeof Cypress !== 'undefined' ? require('./Comment') : require('./Comment').default,
+  Tag,
-  Category: typeof Cypress !== 'undefined' ? require('./Category') : require('./Category').default,
+  UnverifiedEmailAddress,
-  Tag: typeof Cypress !== 'undefined' ? require('./Tag') : require('./Tag').default,
+  User,
-  Location: typeof Cypress !== 'undefined' ? require('./Location') : require('./Location').default,
+} as unknown as Record<string, Neode.SchemaObject>
-  Donations:
-    typeof Cypress !== 'undefined' ? require('./Donations') : require('./Donations').default,
-  Report: typeof Cypress !== 'undefined' ? require('./Report') : require('./Report').default,
-  Migration:
-    typeof Cypress !== 'undefined' ? require('./Migration') : require('./Migration').default,
-  InviteCode:
-    typeof Cypress !== 'undefined' ? require('./InviteCode') : require('./InviteCode').default,
-}

backend/src/db/neo4j.ts

@@ -1,10 +1,12 @@
-/* eslint-disable import/no-named-as-default-member */
+/* eslint-disable import-x/no-named-as-default-member */
-import neo4j, { Driver } from 'neo4j-driver'
+import neo4j from 'neo4j-driver'
 import Neode from 'neode'
 
 import CONFIG from '@config/index'
 import models from '@db/models/index'
 
+import type { Driver } from 'neo4j-driver'
+
 let driver: Driver
 const defaultOptions = {
   uri: CONFIG.NEO4J_URI,

backend/src/db/reset-with-migrations.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable n/no-process-exit */
+
 import CONFIG from '@config/index'
 
 import { cleanDatabase } from './factories'

backend/src/db/reset.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable n/no-process-exit */
+
 import CONFIG from '@config/index'
 
 import { cleanDatabase } from './factories'

backend/src/db/seed.ts

@@ -2,19 +2,22 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable n/no-process-exit */
+/* eslint-disable n/no-unpublished-import */
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/no-confusing-void-expression */
+
 import { faker } from '@faker-js/faker'
 import sample from 'lodash/sample'
 
 import CONFIG from '@config/index'
 import { categories } from '@constants/categories'
-import { changeGroupMemberRoleMutation } from '@graphql/queries/changeGroupMemberRoleMutation'
+import CreateComment from '@graphql/queries/comments/CreateComment.gql'
-import { createCommentMutation } from '@graphql/queries/createCommentMutation'
+import ChangeGroupMemberRole from '@graphql/queries/groups/ChangeGroupMemberRole.gql'
-import { createGroupMutation } from '@graphql/queries/createGroupMutation'
+import CreateGroup from '@graphql/queries/groups/CreateGroup.gql'
-import { CreateMessage } from '@graphql/queries/CreateMessage'
+import JoinGroup from '@graphql/queries/groups/JoinGroup.gql'
-import { createPostMutation } from '@graphql/queries/createPostMutation'
+import CreateMessage from '@graphql/queries/messaging/CreateMessage.gql'
-import { createRoomMutation } from '@graphql/queries/createRoomMutation'
+import CreateRoom from '@graphql/queries/messaging/CreateRoom.gql'
-import { joinGroupMutation } from '@graphql/queries/joinGroupMutation'
+import CreatePost from '@graphql/queries/posts/CreatePost.gql'
 import { createApolloTestSetup } from '@root/test/helpers'
 
 import Factory from './factories'
@@ -39,7 +42,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     authenticatedUser,
     config: CONFIG,
   })
-  const apolloSetup = createApolloTestSetup({ context })
+  const apolloSetup = await createApolloTestSetup({ context })
   const { mutate, server, database } = apolloSetup
   const { neode } = database
 
@@ -341,7 +344,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     console.log('seed', 'groups')
     authenticatedUser = await peterLustig.toJson()
     await mutate({
-      mutation: createGroupMutation(),
+      mutation: CreateGroup,
       variables: {
         id: 'g0',
         name: 'Investigative Journalism',
@@ -354,21 +357,21 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g0',
         userId: 'u2',
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g0',
         userId: 'u4',
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g0',
         userId: 'u6',
@@ -376,7 +379,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     })
 
     await mutate({
-      mutation: changeGroupMemberRoleMutation(),
+      mutation: ChangeGroupMemberRole,
       variables: {
         groupId: 'g0',
         userId: 'u2',
@@ -385,7 +388,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     })
 
     await mutate({
-      mutation: changeGroupMemberRoleMutation(),
+      mutation: ChangeGroupMemberRole,
       variables: {
         groupId: 'g0',
         userId: 'u4',
@@ -396,7 +399,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     // eslint-disable-next-line no-console
     console.log('seed', 'group posts')
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'p0-g0',
         groupId: 'g0',
@@ -408,7 +411,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
 
     authenticatedUser = await bobDerBaumeister.toJson()
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'p1-g0',
         groupId: 'g0',
@@ -420,7 +423,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
 
     authenticatedUser = await jennyRostock.toJson()
     await mutate({
-      mutation: createGroupMutation(),
+      mutation: CreateGroup,
       variables: {
         id: 'g1',
         name: 'School For Citizens',
@@ -433,35 +436,35 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g1',
         userId: 'u1',
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g1',
         userId: 'u2',
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g1',
         userId: 'u5',
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g1',
         userId: 'u6',
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g1',
         userId: 'u7',
@@ -469,7 +472,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     })
 
     await mutate({
-      mutation: changeGroupMemberRoleMutation(),
+      mutation: ChangeGroupMemberRole,
       variables: {
         groupId: 'g1',
         userId: 'u1',
@@ -477,7 +480,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: changeGroupMemberRoleMutation(),
+      mutation: ChangeGroupMemberRole,
       variables: {
         groupId: 'g1',
         userId: 'u5',
@@ -485,7 +488,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: changeGroupMemberRoleMutation(),
+      mutation: ChangeGroupMemberRole,
       variables: {
         groupId: 'g1',
         userId: 'u6',
@@ -493,7 +496,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'p0-g1',
         groupId: 'g1',
@@ -504,7 +507,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     })
     authenticatedUser = await peterLustig.toJson()
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'p1-g1',
         groupId: 'g1',
@@ -516,7 +519,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
 
     authenticatedUser = await bobDerBaumeister.toJson()
     await mutate({
-      mutation: createGroupMutation(),
+      mutation: CreateGroup,
       variables: {
         id: 'g2',
         name: 'Yoga Practice',
@@ -528,35 +531,35 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g2',
         userId: 'u3',
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g2',
         userId: 'u4',
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g2',
         userId: 'u5',
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g2',
         userId: 'u6',
       },
     })
     await mutate({
-      mutation: joinGroupMutation(),
+      mutation: JoinGroup,
       variables: {
         groupId: 'g2',
         userId: 'u7',
@@ -564,7 +567,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     })
 
     await mutate({
-      mutation: changeGroupMemberRoleMutation(),
+      mutation: ChangeGroupMemberRole,
       variables: {
         groupId: 'g2',
         userId: 'u3',
@@ -572,7 +575,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: changeGroupMemberRoleMutation(),
+      mutation: ChangeGroupMemberRole,
       variables: {
         groupId: 'g2',
         userId: 'u4',
@@ -580,7 +583,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: changeGroupMemberRoleMutation(),
+      mutation: ChangeGroupMemberRole,
       variables: {
         groupId: 'g2',
         userId: 'u5',
@@ -588,7 +591,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: changeGroupMemberRoleMutation(),
+      mutation: ChangeGroupMemberRole,
       variables: {
         groupId: 'g2',
         userId: 'u6',
@@ -598,7 +601,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
 
     authenticatedUser = await louie.toJson()
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'p0-g2',
         groupId: 'g2',
@@ -614,7 +617,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     const now = new Date()
 
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'e0',
         title: 'Illegaler Kindergeburtstag',
@@ -629,7 +632,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'e1',
         title: 'Wir Schützen den Stuttgarter Schlossgarten',
@@ -644,7 +647,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'e2',
         title: 'IT 4 Change Treffen',
@@ -848,7 +851,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       'The new physics of <a class="hashtag" data-hashtag-id="QuantenFlussTheorie" href="/?hashtag=QuantenFlussTheorie">#QuantenFlussTheorie</a> can explain <a class="hashtag" data-hashtag-id="QuantumGravity" href="/?hashtag=QuantumGravity">#QuantumGravity</a>! <a class="mention" data-mention-id="u1" href="/profile/u1">@peter-lustig</a> got that already. ;-)'
 
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'p2',
         title: `Nature Philosophy Yoga`,
@@ -857,7 +860,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'p7',
         title: 'This is post #7',
@@ -866,7 +869,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'p8',
         title: `Quantum Flow Theory explains Quantum Gravity`,
@@ -875,7 +878,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: createPostMutation(),
+      mutation: CreatePost,
       variables: {
         id: 'p12',
         title: 'This is post #12',
@@ -899,7 +902,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     const mentionInComment2 =
       'Did <a class="mention" data-mention-id="u1" href="/profile/u1">@peter-lustig</a> tell you?'
     await mutate({
-      mutation: createCommentMutation,
+      mutation: CreateComment,
       variables: {
         id: 'c4',
         postId: 'p2',
@@ -907,7 +910,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: createCommentMutation,
+      mutation: CreateComment,
       variables: {
         id: 'c4-1',
         postId: 'p2',
@@ -915,7 +918,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       },
     })
     await mutate({
-      mutation: createCommentMutation,
+      mutation: CreateComment,
       variables: {
         postId: 'p14',
         content: faker.lorem.paragraph(),
@@ -1223,7 +1226,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       authenticatedUser = userObj
 
       await mutate({
-        mutation: joinGroupMutation(),
+        mutation: JoinGroup,
         variables: {
           groupId: 'g2',
           userId: userObj.id,
@@ -1530,7 +1533,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     console.log('seed', 'chat')
     authenticatedUser = await huey.toJson()
     const { data: roomHueyPeter } = await mutate({
-      mutation: createRoomMutation(),
+      mutation: CreateRoom,
       variables: {
         userId: (await peterLustig.toJson()).id,
       },
@@ -1557,7 +1560,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
 
     authenticatedUser = await huey.toJson()
     const { data: roomHueyJenny } = await mutate({
-      mutation: createRoomMutation(),
+      mutation: CreateRoom,
       variables: {
         userId: (await jennyRostock.toJson()).id,
       },
@@ -1584,7 +1587,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     for (const user of additionalUsers.slice(0, 99)) {
       authenticatedUser = await jennyRostock.toJson()
       const { data: room } = await mutate({
-        mutation: createRoomMutation(),
+        mutation: CreateRoom,
         variables: {
           userId: (await user.toJson()).id,
         },

backend/src/db/types/Category.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface CategoryDbProperties {
   createdAt: string

backend/src/db/types/Comment.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface CommentDbProperties {
   content: string

backend/src/db/types/EmailAddress.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface EmailAddressDbProperties {
   createdAt: string

backend/src/db/types/Event.ts

@@ -1,6 +1,5 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { PostDbProperties } from './Post'
-
+import type { Integer, Node } from 'neo4j-driver'
-import { PostDbProperties } from './Post'
 
 export interface EventDbProperties extends PostDbProperties {
   eventIsOnline: boolean

backend/src/db/types/Group.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface GroupDbProperties {
   about: string

backend/src/db/types/Image.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface ImageDbProperties {
   alt: string

backend/src/db/types/InviteCode.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface InviteCodeDbProperties {
   code: string

backend/src/db/types/Location.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface LocationDbProperties {
   id: string
@@ -14,6 +14,7 @@ export interface LocationDbProperties {
   namePL: string
   namePT: string
   nameRU: string
+  nameSQ: string
   type: string
 }
 

backend/src/db/types/Message.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface MessageDbProperties {
   content: string

backend/src/db/types/Post.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface PostDbProperties {
   clickedCount: number

backend/src/db/types/Report.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface ReportDbProperties {
   closed: boolean

backend/src/db/types/Tag.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface TagDbProperties {
   deleted: boolean

backend/src/db/types/User.ts

@@ -1,4 +1,4 @@
-import { Integer, Node } from 'neo4j-driver'
+import type { Integer, Node } from 'neo4j-driver'
 
 export interface UserDbProperties {
   allowEmbedIframes: boolean

backend/src/emails/__snapshots__/sendChatMessageMail.spec.ts.snap

@@ -1,9 +1,12 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`sendChatMessageMail English chat_message template 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -13,9 +16,10 @@ exports[`sendChatMessageMail English chat_message template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +27,10 @@ exports[`sendChatMessageMail English chat_message template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +41,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +62,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +72,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +80,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -94,13 +100,13 @@ footer {
         <p>you have received a new chat message from <a class="user" href="http://webapp:3000/profile/chatSender/chatsender">chatSender</a>.
         </p><a class="button" href="http://webapp:3000/chat">Show Chat</a>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p><br>
-          <p>PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
+          <p class="no-margin-top-bottom">PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -129,14 +135,20 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "user@example.org",
+    "name": "chatReceiver",
+  },
 }
 `;
 
 exports[`sendChatMessageMail German chat_message template 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="de">
   <head>
@@ -146,9 +158,10 @@ exports[`sendChatMessageMail German chat_message template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -156,9 +169,10 @@ exports[`sendChatMessageMail German chat_message template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -169,11 +183,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -184,10 +204,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -195,10 +214,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -207,7 +222,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -227,13 +242,13 @@ footer {
         <p>du hast eine neue Chat-Nachricht von <a class="user" href="http://webapp:3000/profile/chatSender/chatsender">chatSender</a> erhalten.
         </p><a class="button" href="http://webapp:3000/chat">Chat anzeigen</a>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p><br>
-          <p>PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
+          <p class="no-margin-top-bottom">PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -262,6 +277,9 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "user@example.org",
+    "name": "chatReceiver",
+  },
 }
 `;

backend/src/emails/__snapshots__/sendEmailVerification.spec.ts.snap

@@ -1,9 +1,12 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`sendEmailVerification English renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -13,9 +16,10 @@ exports[`sendEmailVerification English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +27,10 @@ exports[`sendEmailVerification English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +41,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +62,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +72,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +80,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -95,12 +101,12 @@ footer {
         <p>If you don't want to change your e-mail address feel free to ignore this message. </p>
         <p>If the above button doesn't work, you can also copy the following code into your browser window: <span>123456</span></p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -132,14 +138,20 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "user@example.org",
+    "name": "User",
+  },
 }
 `;
 
 exports[`sendEmailVerification German renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="de">
   <head>
@@ -149,9 +161,10 @@ exports[`sendEmailVerification German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -159,9 +172,10 @@ exports[`sendEmailVerification German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -172,11 +186,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -187,10 +207,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -198,10 +217,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -210,7 +225,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -231,12 +246,12 @@ footer {
         <p>Falls du deine E-Mail Adresse doch nicht ändern möchtest, kannst du diese Nachricht einfach ignorieren. </p>
         <p>Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in dein Browserfenster kopieren: <span>123456</span></p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -268,6 +283,9 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "user@example.org",
+    "name": "User",
+  },
 }
 `;

backend/src/emails/__snapshots__/sendRegistrationMail.spec.ts.snap

@@ -1,9 +1,12 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`sendRegistrationMail with invite code English renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -13,9 +16,10 @@ exports[`sendRegistrationMail with invite code English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +27,10 @@ exports[`sendRegistrationMail with invite code English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +41,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +62,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +72,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +80,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -91,19 +97,19 @@ footer {
       <h2>Welcome to ocelot.social!</h2>
       <div class="wrapper">
         <div class="content"></div>
-        <p>Thank you for joining our cause – it's awesome to have you on board. There's just one tiny step missing before we can start shaping the world together … Please confirm your e-mail address by clicking the button below:</p><a class="button" href="http://webapp:3000/registration?email=user%40example.org&amp;nonce=123456&amp;inviteCode=welcome&amp;method=invite-code">Confirm your e-mail address</a>
+        <p>Thank you for joining our cause – it's awesome to have you on board. There's just one tiny step missing before we can start shaping the world together … Please confirm your e-mail address by clicking the button below:</p><a class="button" href="http://webapp:3000/registration?email=moderator%40example.org&amp;nonce=123456&amp;inviteCode=welcome&amp;method=invite-code">Confirm your e-mail address</a>
         <p>If the above button doesn't work, you can also copy the following code into your browser window: <span>123456</span></p>
         <p>However, this only works if you have registered through our website.</p>
         <p>If you didn't sign up for <a>ocelot.social</a> we recommend you to check it out! It's a social network from people for people who want to connect and change the world together.
         </p>
         <p>PS: If you ignore this e-mail we will not create an account for you. ;)</p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -119,7 +125,7 @@ just one tiny step missing before we can start shaping the world together …
 Please confirm your e-mail address by clicking the button below:
 
 Confirm your e-mail address
-[http://webapp:3000/registration?email=user%40example.org&nonce=123456&inviteCode=welcome&method=invite-code]
+[http://webapp:3000/registration?email=moderator%40example.org&nonce=123456&inviteCode=welcome&method=invite-code]
 
 If the above button doesn't work, you can also copy the following code into your
 browser window: 123456
@@ -141,14 +147,20 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "moderator@example.org",
+    "name": "Bob &"?@\\ Baumeister",
+  },
 }
 `;
 
 exports[`sendRegistrationMail with invite code German renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="de">
   <head>
@@ -158,9 +170,10 @@ exports[`sendRegistrationMail with invite code German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -168,9 +181,10 @@ exports[`sendRegistrationMail with invite code German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -181,11 +195,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -196,10 +216,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -207,10 +226,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -219,7 +234,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -236,19 +251,19 @@ footer {
       <h2>Willkommen bei ocelot.social!</h2>
       <div class="wrapper">
         <div class="content"></div>
-        <p>Danke, dass du dich angemeldet hast – wir freuen uns, dich dabei zu haben. Jetzt fehlt nur noch eine Kleinigkeit, bevor wir gemeinsam die Welt verbessern können … Bitte bestätige deine E-Mail Adresse:</p><a class="button" href="http://webapp:3000/registration?email=user%40example.org&amp;nonce=123456&amp;inviteCode=welcome&amp;method=invite-code">Bestätige deine E-Mail Adresse</a>
+        <p>Danke, dass du dich angemeldet hast – wir freuen uns, dich dabei zu haben. Jetzt fehlt nur noch eine Kleinigkeit, bevor wir gemeinsam die Welt verbessern können … Bitte bestätige deine E-Mail Adresse:</p><a class="button" href="http://webapp:3000/registration?email=moderator%40example.org&amp;nonce=123456&amp;inviteCode=welcome&amp;method=invite-code">Bestätige deine E-Mail Adresse</a>
         <p>Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in dein Browserfenster kopieren: <span>123456</span></p>
         <p>Das funktioniert allerdings nur, wenn du dich über unsere Website registriert hast.</p>
         <p>Falls du dich nicht selbst bei <a>ocelot.social</a> angemeldet hast, schau doch mal vorbei! Wir sind ein gemeinnütziges Aktionsnetzwerk – von Menschen für Menschen.
         </p>
         <p>PS: Wenn du keinen Account bei uns möchtest, kannst du diese E-Mail einfach ignorieren. ;)</p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -264,7 +279,7 @@ fehlt nur noch eine Kleinigkeit, bevor wir gemeinsam die Welt verbessern können
 … Bitte bestätige deine E-Mail Adresse:
 
 Bestätige deine E-Mail Adresse
-[http://webapp:3000/registration?email=user%40example.org&nonce=123456&inviteCode=welcome&method=invite-code]
+[http://webapp:3000/registration?email=moderator%40example.org&nonce=123456&inviteCode=welcome&method=invite-code]
 
 Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in
 dein Browserfenster kopieren: 123456
@@ -287,14 +302,20 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "moderator@example.org",
+    "name": "Bob &"?@\\ Baumeister",
+  },
 }
 `;
 
 exports[`sendRegistrationMail without invite code English renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -304,9 +325,10 @@ exports[`sendRegistrationMail without invite code English renders correctly 1`]
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -314,9 +336,10 @@ exports[`sendRegistrationMail without invite code English renders correctly 1`]
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -327,11 +350,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -342,10 +371,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -353,10 +381,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -365,7 +389,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -382,19 +406,19 @@ footer {
       <h2>Welcome to ocelot.social!</h2>
       <div class="wrapper">
         <div class="content"></div>
-        <p>Thank you for joining our cause – it's awesome to have you on board. There's just one tiny step missing before we can start shaping the world together … Please confirm your e-mail address by clicking the button below:</p><a class="button" href="http://webapp:3000/registration?email=user%40example.org&amp;nonce=123456&amp;method=invite-mail">Confirm your e-mail address</a>
+        <p>Thank you for joining our cause – it's awesome to have you on board. There's just one tiny step missing before we can start shaping the world together … Please confirm your e-mail address by clicking the button below:</p><a class="button" href="http://webapp:3000/registration?email=moderator%40example.org&amp;nonce=123456&amp;method=invite-mail">Confirm your e-mail address</a>
         <p>If the above button doesn't work, you can also copy the following code into your browser window: <span>123456</span></p>
         <p>However, this only works if you have registered through our website.</p>
         <p>If you didn't sign up for <a>ocelot.social</a> we recommend you to check it out! It's a social network from people for people who want to connect and change the world together.
         </p>
         <p>PS: If you ignore this e-mail we will not create an account for you. ;)</p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -410,7 +434,7 @@ just one tiny step missing before we can start shaping the world together …
 Please confirm your e-mail address by clicking the button below:
 
 Confirm your e-mail address
-[http://webapp:3000/registration?email=user%40example.org&nonce=123456&method=invite-mail]
+[http://webapp:3000/registration?email=moderator%40example.org&nonce=123456&method=invite-mail]
 
 If the above button doesn't work, you can also copy the following code into your
 browser window: 123456
@@ -432,14 +456,20 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "moderator@example.org",
+    "name": "Bob &"?@\\ Baumeister",
+  },
 }
 `;
 
 exports[`sendRegistrationMail without invite code German renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="de">
   <head>
@@ -449,9 +479,10 @@ exports[`sendRegistrationMail without invite code German renders correctly 1`] =
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -459,9 +490,10 @@ exports[`sendRegistrationMail without invite code German renders correctly 1`] =
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -472,11 +504,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -487,10 +525,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -498,10 +535,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -510,7 +543,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -527,19 +560,19 @@ footer {
       <h2>Willkommen bei ocelot.social!</h2>
       <div class="wrapper">
         <div class="content"></div>
-        <p>Danke, dass du dich angemeldet hast – wir freuen uns, dich dabei zu haben. Jetzt fehlt nur noch eine Kleinigkeit, bevor wir gemeinsam die Welt verbessern können … Bitte bestätige deine E-Mail Adresse:</p><a class="button" href="http://webapp:3000/registration?email=user%40example.org&amp;nonce=123456&amp;method=invite-mail">Bestätige deine E-Mail Adresse</a>
+        <p>Danke, dass du dich angemeldet hast – wir freuen uns, dich dabei zu haben. Jetzt fehlt nur noch eine Kleinigkeit, bevor wir gemeinsam die Welt verbessern können … Bitte bestätige deine E-Mail Adresse:</p><a class="button" href="http://webapp:3000/registration?email=moderator%40example.org&amp;nonce=123456&amp;method=invite-mail">Bestätige deine E-Mail Adresse</a>
         <p>Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in dein Browserfenster kopieren: <span>123456</span></p>
         <p>Das funktioniert allerdings nur, wenn du dich über unsere Website registriert hast.</p>
         <p>Falls du dich nicht selbst bei <a>ocelot.social</a> angemeldet hast, schau doch mal vorbei! Wir sind ein gemeinnütziges Aktionsnetzwerk – von Menschen für Menschen.
         </p>
         <p>PS: Wenn du keinen Account bei uns möchtest, kannst du diese E-Mail einfach ignorieren. ;)</p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -555,7 +588,7 @@ fehlt nur noch eine Kleinigkeit, bevor wir gemeinsam die Welt verbessern können
 … Bitte bestätige deine E-Mail Adresse:
 
 Bestätige deine E-Mail Adresse
-[http://webapp:3000/registration?email=user%40example.org&nonce=123456&method=invite-mail]
+[http://webapp:3000/registration?email=moderator%40example.org&nonce=123456&method=invite-mail]
 
 Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in
 dein Browserfenster kopieren: 123456
@@ -578,6 +611,9 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "moderator@example.org",
+    "name": "Bob &"?@\\ Baumeister",
+  },
 }
 `;

backend/src/emails/__snapshots__/sendResetPasswordMail.spec.ts.snap

@@ -1,9 +1,12 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`sendResetPasswordMail English renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -13,9 +16,10 @@ exports[`sendResetPasswordMail English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +27,10 @@ exports[`sendResetPasswordMail English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +41,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +62,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +72,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +80,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -95,12 +101,12 @@ footer {
         <p>If you didn't request a new password feel free to ignore this e-mail.</p>
         <p>If the above button doesn't work you can also copy the following code into your browser window: <span>123456</span></p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -131,14 +137,20 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "user@example.org",
+    "name": "Jenny Rostock",
+  },
 }
 `;
 
 exports[`sendResetPasswordMail German renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="de">
   <head>
@@ -148,9 +160,10 @@ exports[`sendResetPasswordMail German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -158,9 +171,10 @@ exports[`sendResetPasswordMail German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -171,11 +185,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -186,10 +206,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -197,10 +216,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -209,7 +224,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -230,12 +245,12 @@ footer {
         <p>Falls du kein neues Passwort angefordert hast, kannst du diese E-Mail einfach ignorieren.</p>
         <p>Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in dein Browserfenster kopieren: <span>123456</span></p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -267,6 +282,9 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "user@example.org",
+    "name": "Jenny Rostock",
+  },
 }
 `;

backend/src/emails/__snapshots__/sendWrongEmail.spec.ts.snap

@@ -1,9 +1,12 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`sendWrongEmail English renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -13,9 +16,10 @@ exports[`sendWrongEmail English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +27,10 @@ exports[`sendWrongEmail English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +41,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +62,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +72,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +80,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -95,12 +101,12 @@ footer {
         <p>If you don't have an account at <a>ocelot.social</a> yet or if you didn't want to reset your password, please ignore this e-mail.
         </p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -129,14 +135,20 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "moderator@example.org",
+    "name": "Bob &"?@\\ Baumeister",
+  },
 }
 `;
 
 exports[`sendWrongEmail German renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="de">
   <head>
@@ -146,9 +158,10 @@ exports[`sendWrongEmail German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -156,9 +169,10 @@ exports[`sendWrongEmail German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -169,11 +183,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -184,10 +204,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -195,10 +214,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -207,7 +222,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -228,12 +243,12 @@ footer {
         <p>Wenn du noch keinen Account bei <a>ocelot.social</a> hast oder dein Password gar nicht ändern willst, kannst du diese E-Mail einfach ignorieren!
         </p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -262,6 +277,9 @@ devops@ocelot.social [devops@ocelot.social]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "moderator@example.org",
+    "name": "Bob &"?@\\ Baumeister",
+  },
 }
 `;

backend/src/emails/__snapshots__/supportLine.spec.ts.snap

@@ -1,9 +1,12 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`sendResetPasswordMail with support English renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -13,9 +16,10 @@ exports[`sendResetPasswordMail with support English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +27,10 @@ exports[`sendResetPasswordMail with support English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +41,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +62,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +72,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +80,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -95,12 +101,12 @@ footer {
         <p>If you didn't request a new password feel free to ignore this e-mail.</p>
         <p>If the above button doesn't work you can also copy the following code into your browser window: <span>123456</span></p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:support@example.org">support@example.org</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:support@example.org">support@example.org</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -131,14 +137,20 @@ support@example.org [support@example.org]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "user@example.org",
+    "name": "Jenny Rostock",
+  },
 }
 `;
 
 exports[`sendResetPasswordMail with support German renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="de">
   <head>
@@ -148,9 +160,10 @@ exports[`sendResetPasswordMail with support German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -158,9 +171,10 @@ exports[`sendResetPasswordMail with support German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -171,11 +185,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -186,10 +206,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -197,10 +216,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -209,7 +224,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -230,12 +245,12 @@ footer {
         <p>Falls du kein neues Passwort angefordert hast, kannst du diese E-Mail einfach ignorieren.</p>
         <p>Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in dein Browserfenster kopieren: <span>123456</span></p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:support@example.org">support@example.org</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:support@example.org">support@example.org</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -267,14 +282,20 @@ support@example.org [support@example.org]
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "user@example.org",
+    "name": "Jenny Rostock",
+  },
 }
 `;
 
 exports[`sendResetPasswordMail without support English renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -284,9 +305,10 @@ exports[`sendResetPasswordMail without support English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -294,9 +316,10 @@ exports[`sendResetPasswordMail without support English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -307,11 +330,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -322,10 +351,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -333,10 +361,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -345,7 +369,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -366,8 +390,8 @@ footer {
         <p>If you didn't request a new password feel free to ignore this e-mail.</p>
         <p>If the above button doesn't work you can also copy the following code into your browser window: <span>123456</span></p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <footer>
@@ -396,14 +420,20 @@ See you soon on ocelot.social [https://ocelot.social]!
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "user@example.org",
+    "name": "Jenny Rostock",
+  },
 }
 `;
 
 exports[`sendResetPasswordMail without support German renders correctly 1`] = `
 {
   "attachments": [],
-  "from": "ocelot.social <devops@ocelot.social>",
+  "from": {
+    "address": "devops@ocelot.social",
+    "name": "ocelot.social",
+  },
   "html": "<!DOCTYPE html>
 <html lang="de">
   <head>
@@ -413,9 +443,10 @@ exports[`sendResetPasswordMail without support German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -423,9 +454,10 @@ exports[`sendResetPasswordMail without support German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -436,11 +468,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -451,10 +489,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -462,10 +499,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -474,7 +507,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -495,8 +528,8 @@ footer {
         <p>Falls du kein neues Passwort angefordert hast, kannst du diese E-Mail einfach ignorieren.</p>
         <p>Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in dein Browserfenster kopieren: <span>123456</span></p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <footer>
@@ -526,6 +559,9 @@ Bis bald bei ocelot.social [https://ocelot.social]!
 
 
 ocelot.social Community [https://ocelot.social]",
-  "to": "user@example.org",
+  "to": {
+    "address": "user@example.org",
+    "name": "Jenny Rostock",
+  },
 }
 `;

backend/src/emails/sendChatMessageMail.spec.ts

@@ -2,7 +2,7 @@ import CONFIG from '@config/index'
 
 CONFIG.SUPPORT_EMAIL = 'devops@ocelot.social'
 
-// eslint-disable-next-line import/first
+// eslint-disable-next-line import-x/first
 import { sendChatMessageMail } from './sendEmail'
 
 const senderUser = {

backend/src/emails/sendEmail.ts

@@ -2,7 +2,6 @@
 
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 import path from 'node:path'
 
 import Email from 'email-templates'
@@ -13,7 +12,8 @@ import { createTransport } from 'nodemailer'
 import CONFIG, { nodemailerTransportOptions } from '@config/index'
 import logosWebapp from '@config/logosBranded'
 import metadata from '@config/metadata'
-import { UserDbProperties } from '@db/types/User'
+
+import type { UserDbProperties } from '@db/types/User'
 
 const welcomeImageUrl = new URL(logosWebapp.LOGO_WELCOME_PATH, CONFIG.CLIENT_URI)
 const settingsUrl = new URL('/settings/notifications', CONFIG.CLIENT_URI)
@@ -29,7 +29,7 @@ export const defaultParams = {
   renderSettingsUrl: true,
 }
 
-const from = `${CONFIG.APPLICATION_NAME} <${CONFIG.EMAIL_DEFAULT_SENDER}>`
+const from = { name: CONFIG.APPLICATION_NAME, address: CONFIG.EMAIL_DEFAULT_SENDER }
 
 const transport = createTransport(nodemailerTransportOptions)
 
@@ -74,8 +74,8 @@ interface OriginalMessage {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const sendNotificationMail = async (notification: any): Promise<OriginalMessage> => {
   const locale = notification?.to?.locale
-  const to = notification?.email
   const name = notification?.to?.name
+  const to = { name, address: notification?.email }
   const template = notification?.reason
 
   try {
@@ -94,8 +94,8 @@ export const sendNotificationMail = async (notification: any): Promise<OriginalM
             : notification?.from?.title,
         postUrl: new URL(
           notification?.from?.__typename === 'Comment'
-            ? `/post/${notification?.from?.post?.id}/${notification?.from?.post?.slug}`
+            ? `/post/${encodeURIComponent(notification?.from?.post?.id)}/${encodeURIComponent(notification?.from?.post?.slug)}`
-            : `/post/${notification?.from?.id}/${notification?.from?.slug}`,
+            : `/post/${encodeURIComponent(notification?.from?.id)}/${encodeURIComponent(notification?.from?.slug)}`,
           CONFIG.CLIENT_URI,
         ),
         postAuthorName:
@@ -106,7 +106,7 @@ export const sendNotificationMail = async (notification: any): Promise<OriginalM
           notification?.from?.__typename === 'Comment'
             ? undefined
             : new URL(
-                `user/${notification?.from?.author?.id}/${notification?.from?.author?.slug}`,
+                `profile/${encodeURIComponent(notification?.from?.author?.id)}/${encodeURIComponent(notification?.from?.author?.slug)}`,
                 CONFIG.CLIENT_URI,
               ),
         commenterName:
@@ -116,14 +116,14 @@ export const sendNotificationMail = async (notification: any): Promise<OriginalM
         commenterUrl:
           notification?.from?.__typename === 'Comment'
             ? new URL(
-                `/profile/${notification?.from?.author?.id}/${notification?.from?.author?.slug}`,
+                `/profile/${encodeURIComponent(notification?.from?.author?.id)}/${encodeURIComponent(notification?.from?.author?.slug)}`,
                 CONFIG.CLIENT_URI,
               )
             : undefined,
         commentUrl:
           notification?.from?.__typename === 'Comment'
             ? new URL(
-                `/post/${notification?.from?.post?.id}/${notification?.from?.post?.slug}#commentId-${notification?.from?.id}`,
+                `/post/${encodeURIComponent(notification?.from?.post?.id)}/${encodeURIComponent(notification?.from?.post?.slug)}#commentId-${encodeURIComponent(notification?.from?.id)}`,
                 CONFIG.CLIENT_URI,
               )
             : undefined,
@@ -132,7 +132,7 @@ export const sendNotificationMail = async (notification: any): Promise<OriginalM
         groupUrl:
           notification?.from?.__typename === 'Group'
             ? new URL(
-                `/groups/${notification?.from?.id}/${notification?.from?.slug}`,
+                `/groups/${encodeURIComponent(notification?.from?.id)}/${encodeURIComponent(notification?.from?.slug)}`,
                 CONFIG.CLIENT_URI,
               )
             : undefined,
@@ -143,7 +143,7 @@ export const sendNotificationMail = async (notification: any): Promise<OriginalM
         groupRelatedUserUrl:
           notification?.from?.__typename === 'Group'
             ? new URL(
-                `/profile/${notification?.relatedUser?.id}/${notification?.relatedUser?.slug}`,
+                `/profile/${encodeURIComponent(notification?.relatedUser?.id)}/${encodeURIComponent(notification?.relatedUser?.slug)}`,
                 CONFIG.CLIENT_URI,
               )
             : undefined,
@@ -165,7 +165,7 @@ export const sendChatMessageMail = async (
   data: ChatMessageEmailInput,
 ): Promise<OriginalMessage> => {
   const { senderUser, recipientUser } = data
-  const to = data.email
+  const to = { name: recipientUser.name, address: data.email }
   try {
     const { originalMessage } = await email.send({
       template: path.join(__dirname, 'templates', 'chat_message'),
@@ -177,7 +177,10 @@ export const sendChatMessageMail = async (
         locale: recipientUser.locale,
         name: recipientUser.name,
         chattingUser: senderUser.name,
-        chattingUserUrl: new URL(`/profile/${senderUser.id}/${senderUser.slug}`, CONFIG.CLIENT_URI),
+        chattingUserUrl: new URL(
+          `/profile/${encodeURIComponent(senderUser.id)}/${encodeURIComponent(senderUser.slug)}`,
+          CONFIG.CLIENT_URI,
+        ),
         chatUrl: new URL('/chat', CONFIG.CLIENT_URI),
       },
     })
@@ -188,6 +191,7 @@ export const sendChatMessageMail = async (
 }
 
 interface VerifyMailInput {
+  name: string
   email: string
   nonce: string
   locale: string
@@ -200,10 +204,10 @@ interface RegistrationMailInput extends VerifyMailInput {
 export const sendRegistrationMail = async (
   data: RegistrationMailInput,
 ): Promise<OriginalMessage> => {
-  const { nonce, locale, inviteCode } = data
+  const { name, nonce, locale, inviteCode } = data
-  const to = data.email
+  const to = { name, address: data.email }
   const actionUrl = new URL('/registration', CONFIG.CLIENT_URI)
-  actionUrl.searchParams.set('email', to)
+  actionUrl.searchParams.set('email', to.address)
   actionUrl.searchParams.set('nonce', nonce)
   if (inviteCode) {
     actionUrl.searchParams.set('inviteCode', inviteCode)
@@ -240,9 +244,9 @@ export const sendEmailVerification = async (
   data: EmailVerificationInput,
 ): Promise<OriginalMessage> => {
   const { nonce, locale, name } = data
-  const to = data.email
+  const to = { name, address: data.email }
   const actionUrl = new URL('/settings/my-email-address/verify', CONFIG.CLIENT_URI)
-  actionUrl.searchParams.set('email', to)
+  actionUrl.searchParams.set('email', to.address)
   actionUrl.searchParams.set('nonce', nonce)
 
   try {
@@ -270,9 +274,9 @@ export const sendResetPasswordMail = async (
   data: EmailVerificationInput,
 ): Promise<OriginalMessage> => {
   const { nonce, locale, name } = data
-  const to = data.email
+  const to = { name, address: data.email }
   const actionUrl = new URL('/password-reset/change-password', CONFIG.CLIENT_URI)
-  actionUrl.searchParams.set('email', to)
+  actionUrl.searchParams.set('email', to.address)
   actionUrl.searchParams.set('nonce', nonce)
   try {
     const { originalMessage } = await email.send({
@@ -296,11 +300,12 @@ export const sendResetPasswordMail = async (
 }
 
 export const sendWrongEmail = async (data: {
+  name: string
   locale: string
   email: string
 }): Promise<OriginalMessage> => {
-  const { locale } = data
+  const { locale, name } = data
-  const to = data.email
+  const to = { name, address: data.email }
   const actionUrl = new URL('/password-reset/request', CONFIG.CLIENT_URI)
   try {
     const { originalMessage } = await email.send({

backend/src/emails/sendEmailVerification.spec.ts

@@ -2,7 +2,7 @@ import CONFIG from '@config/index'
 
 CONFIG.SUPPORT_EMAIL = 'devops@ocelot.social'
 
-// eslint-disable-next-line import/first
+// eslint-disable-next-line import-x/first
 import { sendEmailVerification } from './sendEmail'
 
 describe('sendEmailVerification', () => {

backend/src/emails/sendNotificationMail.spec.ts

@@ -2,7 +2,7 @@ import CONFIG from '@config/index'
 
 CONFIG.SUPPORT_EMAIL = 'devops@ocelot.social'
 
-// eslint-disable-next-line import/first
+// eslint-disable-next-line import-x/first
 import { sendNotificationMail } from './sendEmail'
 
 describe('sendNotificationMail', () => {

backend/src/emails/sendRegistrationMail.spec.ts

@@ -2,17 +2,19 @@ import CONFIG from '@config/index'
 
 CONFIG.SUPPORT_EMAIL = 'devops@ocelot.social'
 
-// eslint-disable-next-line import/first
+// eslint-disable-next-line import-x/first
 import { sendRegistrationMail } from './sendEmail'
 
 describe('sendRegistrationMail', () => {
   const data: {
+    name: string
     email: string
     nonce: string
     locale: string
     inviteCode?: string
   } = {
-    email: 'user@example.org',
+    name: 'Bob &"?@\\ Baumeister',
+    email: 'moderator@example.org',
     nonce: '123456',
     locale: 'en',
     inviteCode: 'welcome',

backend/src/emails/sendResetPasswordMail.spec.ts

@@ -2,7 +2,7 @@ import CONFIG from '@config/index'
 
 CONFIG.SUPPORT_EMAIL = 'devops@ocelot.social'
 
-// eslint-disable-next-line import/first
+// eslint-disable-next-line import-x/first
 import { sendResetPasswordMail } from './sendEmail'
 
 describe('sendResetPasswordMail', () => {

backend/src/emails/sendWrongEmail.spec.ts

@@ -2,15 +2,17 @@ import CONFIG from '@config/index'
 
 CONFIG.SUPPORT_EMAIL = 'devops@ocelot.social'
 
-// eslint-disable-next-line import/first
+// eslint-disable-next-line import-x/first
 import { sendWrongEmail } from './sendEmail'
 
 describe('sendWrongEmail', () => {
   const data: {
+    name: string
     email: string
     locale: string
   } = {
-    email: 'user@example.org',
+    name: 'Bob &"?@\\ Baumeister',
+    email: 'moderator@example.org',
     locale: 'en',
   }
 

backend/src/emails/templates/changed_group_member_role/html.pug

@@ -3,5 +3,5 @@ extend ../layout.pug
 block content
   .content
   - var groupUrl = groupUrl
-  p= t('changedGroupMemberRole', { groupName })
+  p!= t('changedGroupMemberRole', { groupName })
-  a.button(href=groupUrl)= t('buttons.viewGroup')
+  a.button(href=groupUrl)!= t('buttons.viewGroup')

backend/src/emails/templates/changed_group_member_role/subject.pug

@@ -1 +1 @@
-= `${APPLICATION_NAME}  – ${t('notification')}: ${t('subjects.changedGroupMemberRole')}`
+!= `${APPLICATION_NAME}  – ${t('notification')}: ${t('subjects.changedGroupMemberRole')}`

backend/src/emails/templates/chat_message/html.pug

@@ -2,7 +2,7 @@ extend ../layout.pug
 
 block content
   .content
-  p= t('chatMessageStart')
+  p!= t('chatMessageStart')
-    a.user(href=chattingUserUrl)= chattingUser
+    a.user(href=chattingUserUrl)!= chattingUser
-    = t('chatMessageEnd')
+    != t('chatMessageEnd')
-  a.button(href=chatUrl)= t('buttons.viewChat')
+  a.button(href=chatUrl)!= t('buttons.viewChat')

backend/src/emails/templates/chat_message/subject.pug

@@ -1 +1 @@
-= `${APPLICATION_NAME}  – ${t('notification')}: ${t('subjects.chatMessage')}`
+!= `${APPLICATION_NAME}  – ${t('notification')}: ${t('subjects.chatMessage')}`