mix deps.update dataloader

Flake lock file updates:

• Updated input 'nixpkgs':
    'github:NixOS/nixpkgs/c3aa7b8938b17aebd2deecf7be0636000d62a2b9' (2024-08-14)
  → 'github:NixOS/nixpkgs/99dc8785f6a0adac95f5e2ab05cc2e1bf666d172' (2024-09-16)

.credo.exs

@@ -22,7 +22,7 @@
         # In the latter case `**/*.{ex,exs}` will be used.
         #
         included: ["lib/", "src/", "test/"],
-        excluded: [~r"/_build/", ~r"/deps/", ~r"/js/"]
+        excluded: [~r"/_build/", ~r"/deps/", ~r"/src/"]
       },
       #
       # If you create your own checks, you must specify the source files for
@@ -33,12 +33,15 @@
       # If you want to enforce a style guide and need a more traditional linting
       # experience, you can change `strict` to `true` below:
       #
-      strict: false,
+      strict: true,
       #
       # If you want to use uncolored output by default, you can change `color`
       # to `false` below:
       #
       color: true,
+      plugins: [
+        {CredoCodeClimate, []}
+      ],
       #
       # You can customize the parameters of any check by adding a second element
       # to the tuple.
@@ -105,9 +108,10 @@
         {Credo.Check.Refactor.MatchInCondition, []},
         {Credo.Check.Refactor.NegatedConditionsInUnless, []},
         {Credo.Check.Refactor.NegatedConditionsWithElse, []},
-        {Credo.Check.Refactor.Nesting, [
-          max_nesting: 3
-        ]},
+        {Credo.Check.Refactor.Nesting,
+         [
+           max_nesting: 3
+         ]},
         {Credo.Check.Refactor.PipeChainStart,
          [
            excluded_argument_types: [:atom, :binary, :fn, :keyword, :number],
@@ -156,7 +160,7 @@
         # Removed checks
         #
         {Credo.Check.Warning.LazyLogging, false},
-        {Credo.Check.Refactor.MapInto, false},
+        {Credo.Check.Refactor.MapInto, false}
       ]
     }
   ]

.devcontainer/devcontainer.json

@@ -1,44 +1,46 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.209.6/containers/elixir-phoenix-postgres
 {
-	"name": "Elixir, Phoenix, Node.js & PostgresSQL (Community)",
-	"dockerComposeFile": "docker-compose.yml",
-	"service": "elixir",
-	"workspaceFolder": "/workspace",
+  "name": "Elixir, Phoenix, Node.js & PostgresSQL (Community)",
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "elixir",
+  "workspaceFolder": "/workspace",
 
-	// Set *default* container specific settings.json values on container create.
-	"settings": {
-		"sqltools.connections": [{
-			"name": "Container database",
-			"driver": "PostgreSQL",
-			"previewLimit": 50,
-			"server": "localhost",
-			"port": 5432,
-			"database": "postgres",
-			"username": "postgres",
-			"password": "postgres"
-		}]
-	},
+  // Set *default* container specific settings.json values on container create.
+  "settings": {
+    "sqltools.connections": [
+      {
+        "name": "Container database",
+        "driver": "PostgreSQL",
+        "previewLimit": 50,
+        "server": "localhost",
+        "port": 5432,
+        "database": "postgres",
+        "username": "postgres",
+        "password": "postgres"
+      }
+    ]
+  },
 
-	// Add the IDs of extensions you want installed when the container is created.
-	"extensions": [
-		"jakebecker.elixir-ls",
-		"mtxr.sqltools",
-		"mtxr.sqltools-driver-pg"
-	],
+  // Add the IDs of extensions you want installed when the container is created.
+  "extensions": [
+    "jakebecker.elixir-ls",
+    "mtxr.sqltools",
+    "mtxr.sqltools-driver-pg"
+  ],
 
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	"forwardPorts": [4000, 4001, 5432],
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [4000, 4001, 5432],
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "mix deps.get",
-	// "runArgs": ["--userns=keep-id", "--privileged"],
-	// "containerUser": "vscode",
-	// "containerEnv": {
-	// 	"HOME": "/home/vscode",
-	// },
-	// "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,Z",
+  // Use 'postCreateCommand' to run commands after the container is created.
+  // "postCreateCommand": "mix deps.get",
+  // "runArgs": ["--userns=keep-id", "--privileged"],
+  // "containerUser": "vscode",
+  // "containerEnv": {
+  // 	"HOME": "/home/vscode",
+  // },
+  // "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,Z",
 
-	// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "vscode"
+  // Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "vscode"
 }

.dockerignore

@@ -1,6 +1,10 @@
 _build
 CONTRIBUTING.md
+coverage
+demo
 deps
+doc
+docs
 docker-compose.yml
 Dockerfile
 .elixir_ls
@@ -15,5 +19,8 @@ Makefile
 README.md
 SECURITY.md
 ssh_match_hostname
-.js/package-lock.json
-js/node_modules
+package-lock.json
+node_modules
+playwright-report
+test
+tests

.env.template

@@ -22,3 +22,6 @@ MOBILIZON_SMTP_PORT=25
 MOBILIZON_SMTP_USERNAME=noreply@mobilizon.lan
 MOBILIZON_SMTP_PASSWORD=password
 MOBILIZON_SMTP_SSL=false
+
+# When using docker for development, VITE_HOST must be set to 0.0.0.0
+VITE_HOST=localhost

.eslintrc.cjs

@@ -1,3 +1,6 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
 module.exports = {
   root: true,
 
@@ -6,10 +9,11 @@ module.exports = {
   },
 
   extends: [
-    "plugin:vue/essential",
     "eslint:recommended",
-    "@vue/typescript/recommended",
+    "plugin:vue/vue3-essential",
+    "@vue/eslint-config-typescript/recommended",
     "plugin:prettier/recommended",
+    "@vue/eslint-config-prettier",
   ],
 
   plugins: ["prettier"],
@@ -20,12 +24,11 @@ module.exports = {
   },
 
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-underscore-dangle": [
       "error",
       {
-        allow: ["__typename"],
+        allow: ["__typename", "__schema"],
       },
     ],
     "@typescript-eslint/no-explicit-any": "off",
@@ -50,4 +53,7 @@ module.exports = {
   },
 
   ignorePatterns: ["src/typings/*.d.ts", "vue.config.js"],
+  globals: {
+    GeolocationPositionError: true,
+  },
 };

.formatter.exs

@@ -1,4 +1,5 @@
 [
+  import_deps: [:ecto, :ecto_sql, :phoenix],
   plugins: [Phoenix.LiveView.HTMLFormatter],
   inputs: ["{mix,.formatter}.exs", "{config,lib,test,priv}/**/*.{ex,exs,heex}"]
 ]

.gitignore

@@ -46,6 +46,16 @@ release/
 .weblate
 docker/production/.env
 test-junit-report.xml
-js/junit.xml
+junit.xml
 .env
 demo/
+codeclimate.json
+
+node_modules
+stats.html
+/coverage
+/playwright-report/
+.histoire
+
+# Nix out-links
+result*

.gitlab-ci.yml

@@ -4,15 +4,14 @@ stages:
   - install
   - check
   - build-js
+  - sentry
   - test
-  - docker
-  - package
+  - build
   - upload
   - deploy
 
 variables:
   MIX_ENV: "test"
-  YARN_CACHE_FOLDER: "js/.yarn"
   # DB Variables for Postgres / Postgis
   POSTGRES_DB: mobilizon_test
   POSTGRES_USER: postgres
@@ -31,17 +30,14 @@ variables:
   EXPORT_FORMATS: "csv,ods,pdf"
   APP_VERSION: "${CI_COMMIT_REF_NAME}"
   APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
-  CYPRESS_INSTALL_BINARY: 0
 
 cache:
   key: "${CI_COMMIT_REF_SLUG}-${CI_COMMIT_SHORT_SHA}"
   paths:
-    - ~/.cache/Cypress
-    - cache/Cypress
     - deps/
     - _build/
-    - js/node_modules
-    - js/.yarn
+    - node_modules
+    - .npm
 
 # Installed dependencies are cached across the pipeline
 # So there is no need to reinstall them all the time
@@ -49,7 +45,7 @@ cache:
 install:
   stage: install
   script:
-    - yarn --cwd "js" install --frozen-lockfile
+    - npm ci
     - mix deps.get
     - mix compile
 
@@ -66,27 +62,30 @@ lint-elixir:
     - mix credo diff --from-git-merge-base $TARGET_SHA1 --strict -a || export EXITVALUE=1
     - mix sobelow --config || export EXITVALUE=1
     - exit $EXITVALUE
+  artifacts:
+    reports:
+      codequality: codeclimate.json
 
 lint-front:
-  image: node:16
+  image: node:20
   stage: check
   before_script:
     - export EXITVALUE=0
-    - yarn --cwd "js" install --frozen-lockfile
+    - npm ci
   script:
-    - yarn --cwd "js" run lint || export EXITVALUE=1
-    - yarn --cwd "js" run prettier -c . || export EXITVALUE=1
+    - npm run lint || export EXITVALUE=1
+    - npx prettier -c . || export EXITVALUE=1
     - exit $EXITVALUE
 
 build-frontend:
   stage: build-js
-  image: node:16
+  image: node:20
   before_script:
     - apt update
-    - apt install -y --no-install-recommends python build-essential webp imagemagick gifsicle jpegoptim optipng pngquant
+    - apt install -y --no-install-recommends python3 build-essential webp imagemagick gifsicle jpegoptim optipng pngquant
   script:
-    - yarn --cwd "js" install --frozen-lockfile
-    - yarn --cwd "js" run build
+    - npm install --frozen-lockfile
+    - npm run build
   artifacts:
     expire_in: 5 days
     paths:
@@ -94,6 +93,21 @@ build-frontend:
   needs:
     - lint-front
 
+sentry-commit:
+  stage: sentry
+  image: getsentry/sentry-cli
+  script:
+    - echo "Create a new release $CI_COMMIT_TAG"
+    - sentry-cli releases new $CI_COMMIT_TAG
+    - sentry-cli releases set-commits $CI_COMMIT_TAG --auto
+    - sentry-cli releases files $CI_COMMIT_TAG upload-sourcemaps priv/static/assets/
+    - sentry-cli releases finalize $CI_COMMIT_TAG
+    - echo "Finalized release for $CI_COMMIT_TAG"
+  needs:
+    - build-frontend
+  only:
+    - tags@framasoft/mobilizon
+
 deps:
   stage: check
   before_script:
@@ -101,7 +115,7 @@ deps:
   script:
     - export EXITVALUE=0
     - mix hex.outdated || export EXITVALUE=1
-    - yarn --cwd "js" outdated || export EXITVALUE=1
+    - npm outdated || export EXITVALUE=1
     - exit $EXITVALUE
   allow_failure: true
   needs:
@@ -110,12 +124,14 @@ deps:
 exunit:
   stage: test
   services:
-    - name: postgis/postgis:14-3.2
+    - name: postgis/postgis:16-3.4
       alias: postgres
   variables:
     MIX_ENV: test
   before_script:
-    - mix deps.get && mix tz_world.update
+    - mix deps.get
+    - mix compile
+    - mix tz_world.update
     - mix ecto.create
     - mix ecto.migrate
   script:
@@ -127,53 +143,60 @@ exunit:
         - test-junit-report.xml
     expire_in: 30 days
 
-jest:
+vitest:
   stage: test
   needs:
     - lint-front
   before_script:
-    - yarn --cwd "js" install --frozen-lockfile
+    - npm install --frozen-lockfile
   script:
-    - yarn --cwd "js" run test:unit --no-color --ci --reporters=default --reporters=jest-junit
+    - npm run coverage --reporter=default --reporter=junit --outputFile.junit=./junit.xml
   artifacts:
     when: always
     paths:
-      - js/coverage
+      - coverage
     reports:
       junit:
-        - js/junit.xml
+        - junit.xml
     expire_in: 30 days
 
-# cypress:
-#   stage: test
-#   services:
-#     - name: postgis/postgis:13.3
-#       alias: postgres
-#   variables:
-#     MIX_ENV=e2e
-#   script:
-#     - mix ecto.create
-#     - mix ecto.migrate
-#     - mix run priv/repo/e2e.seed.exs
-#     - mix phx.server &
-#     - cd js
-#     - npx wait-on http://localhost:4000
-#     - if [ -z "$CYPRESS_KEY" ]; then npx cypress run; else npx cypress run --record --parallel --key $CYPRESS_KEY; fi
-#   artifacts:
-#     expire_in: 2 day
-#     paths:
-#       - js/tests/e2e/screenshots/**/*.png
-#       - js/tests/e2e/videos/**/*.mp4
+e2e:
+  stage: test
+  services:
+    - name: postgis/postgis:16-3.4
+      alias: postgres
+  variables:
+    MIX_ENV: "e2e"
+  before_script:
+    - mix deps.get
+    - mix ecto.create
+    - mix ecto.migrate
+    - mix run priv/repo/e2e.seed.exs
+    - npm install && npm run build && npx playwright install
+    - mix phx.digest
+  script:
+    - mix phx.server &
+    - npx wait-on http://localhost:4000
+    - npx playwright test --project $BROWSER
+  parallel:
+    matrix:
+      - BROWSER: ["firefox", "chromium"]
+  artifacts:
+    expire_in: 2 days
+    paths:
+      - playwright-report/
+      - test-results/
 
 pages:
   stage: deploy
   script:
+    - mv public public-mbz
     - mkdir public
     - mix deps.get
     - mix docs
     - mv doc public/backend
-  #     #- yarn run --cwd "js" styleguide:build
-  #     #- mv js/styleguide public/frontend
+  #     #- npm run styleguide:build
+  #     #- mv styleguide public/frontend
   rules:
     - if: '$CI_COMMIT_BRANCH == "main"'
   artifacts:
@@ -182,22 +205,23 @@ pages:
       - public
 
 .docker: &docker
-  stage: docker
-  image: docker:20.10.12
+  stage: build
+  image: docker:24
   variables:
     DOCKER_TLS_CERTDIR: "/certs"
     DOCKER_HOST: tcp://docker:2376
     DOCKER_TLS_VERIFY: 1
     DOCKER_CERT_PATH: "$DOCKER_TLS_CERTDIR/client"
     DOCKER_DRIVER: overlay2
+    DOCKER_CLI_EXPERIMENTAL: enabled
   services:
-    - docker:20.10.12-dind
+    - docker:24-dind
   cache: {}
   before_script:
     # Install buildx
-    - wget https://github.com/docker/buildx/releases/download/v0.8.1/buildx-v0.8.1.linux-amd64
+    - wget https://github.com/docker/buildx/releases/download/v0.11.2/buildx-v0.11.2.linux-amd64
     - mkdir -p ~/.docker/cli-plugins/
-    - mv buildx-v0.8.1.linux-amd64 ~/.docker/cli-plugins/docker-buildx
+    - mv buildx-v0.11.2.linux-amd64 ~/.docker/cli-plugins/docker-buildx
     - chmod a+x ~/.docker/cli-plugins/docker-buildx
     # Create env
     - docker context create tls-environment
@@ -205,6 +229,8 @@ pages:
     # Install qemu/binfmt
     - docker pull tonistiigi/binfmt:latest
     - docker run --rm --privileged tonistiigi/binfmt:latest --install all
+    # Install jq
+    - apk --no-cache add jq
     # Login to DockerHub
     - mkdir -p ~/.docker
     - echo "{\"auths\":{\"$CI_REGISTRY\":{\"auth\":\"$CI_REGISTRY_AUTH\",\"email\":\"$CI_REGISTRY_EMAIL\"}}}" > ~/.docker/config.json
@@ -216,30 +242,72 @@ build-docker-main:
   rules:
     - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
       when: never
-    - if: '$CI_PIPELINE_SOURCE == "schedule"'
+    - if: '$CI_PIPELINE_SOURCE == "schedule" || $CI_PIPELINE_TRIGGERED == "true"'
   script:
-    - docker buildx build --push --platform linux/amd64 -t framasoft/mobilizon:main -f docker/production/Dockerfile .
+    - docker buildx build --platform linux/amd64 -t framasoft/mobilizon:main -f docker/production/Dockerfile .
 
 build-docker-tag:
   <<: *docker
-  rules: &tag-rules
+  rules: &release-tag-rules
     - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
       when: never
-    - if: $CI_COMMIT_TAG
+    - if: $CI_COMMIT_TAG != null
+      when: on_success
   timeout: 3 hours
   script:
     - >
       docker buildx build
       --push
-      --platform linux/amd64,linux/arm64,linux/arm
-      -t framasoft/mobilizon:$CI_COMMIT_TAG
-      -t framasoft/mobilizon:latest
+      --platform linux/${ARCH}
+      --provenance=false
+      --build-arg="${ERL_FLAGS}"
+      -t framasoft/mobilizon:${CI_COMMIT_TAG}-${ARCH}
       -f docker/production/Dockerfile .
+  parallel:
+    matrix:
+      - ARCH: ["amd64"]
+        ERL_FLAGS: ["ERL_FLAGS="]
+      - ARCH: ["arm64"]
+        ERL_FLAGS: ["ERL_FLAGS=+JMsingle true"]
+
+# Create manifest and push
+docker-manifest-push:
+  <<: *docker
+  needs: ["build-docker-tag"]
+  rules: &release-tag-rules
+    - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
+      when: never
+    - if: $CI_COMMIT_TAG != null
+      when: on_success
+  script:
+    - >
+      docker manifest create framasoft/mobilizon:${CI_COMMIT_TAG}
+      --amend framasoft/mobilizon:${CI_COMMIT_TAG}-amd64
+      --amend framasoft/mobilizon:${CI_COMMIT_TAG}-arm64
+    - docker manifest push --purge framasoft/mobilizon:${CI_COMMIT_TAG}
+
+###
+# Simply creating an alias to the tag doesn't work:
+# « xxx is a manifest list »
+# https://joonas.fi/2021/02/docker-multi-arch-image-tooling-buildx/
+###
+docker-latest:
+  <<: *docker
+  needs: ["docker-manifest-push"]
+  rules: &release-tag-rules
+    - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
+      when: never
+    - if: $CI_COMMIT_TAG != null && $CI_COMMIT_TAG !~ /alpha|beta|rc/
+      when: on_success
+  script:
+    - echo docker manifest create framasoft/mobilizon:latest $(docker manifest inspect framasoft/mobilizon:$CI_COMMIT_TAG | jq '.manifests[] | .digest' | xargs -I {} echo framasoft/mobilizon@{})
+    - docker manifest create framasoft/mobilizon:latest $(docker manifest inspect framasoft/mobilizon:$CI_COMMIT_TAG | jq -r '.manifests[] | .digest' | xargs -I {} echo framasoft/mobilizon@{})
+    - docker manifest push --purge framasoft/mobilizon:latest
 
 # Packaging app for amd64
 package-app:
-  image: mobilizon/buildpack:1.13.4-erlang-24.3.3-debian-buster
-  stage: package
+  image: mobilizon/buildpack:1.16.1-erlang-26.2.2-${SYSTEM}
+  stage: build
   variables: &release-variables
     MIX_ENV: "prod"
     DEBIAN_FRONTEND: noninteractive
@@ -250,7 +318,7 @@ package-app:
     - mix local.rebar --force
     - mix deps.get --only-prod
     - mix compile
-    - mix phx.digest.clean --all && \
+    - mix phx.digest.clean --all && mix phx.digest
     - mix release --path release/mobilizon
     - cd release/mobilizon && ln -s lib/mobilizon-*/priv priv && cd ../../
     - du -sh release/
@@ -263,9 +331,21 @@ package-app:
     expire_in: 2 days
     paths:
       - ${APP_ASSET}
+  parallel:
+    matrix:
+      - SYSTEM:
+          [
+            "debian-bookworm",
+            "debian-bullseye",
+            "debian-buster",
+            "ubuntu-jammy",
+            "ubuntu-focal",
+            "fedora-38",
+            "fedora-39",
+          ]
 
 package-app-dev:
-  stage: package
+  stage: build
   variables: *release-variables
   script: *release-script
   except:
@@ -276,9 +356,9 @@ package-app-dev:
       - ${APP_ASSET}
 
 # Packaging app for multi-arch
-multi-arch-release:
-  stage: package
-  image: docker:20.10.12
+package-multi-arch-release:
+  stage: build
+  image: docker:24
   variables:
     DOCKER_TLS_CERTDIR: "/certs"
     DOCKER_HOST: tcp://docker:2376
@@ -288,13 +368,13 @@ multi-arch-release:
     APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
     OS: debian-buster
   services:
-    - docker:20.10.12-dind
+    - docker:24-dind
   cache: {}
   before_script:
     # Install buildx
-    - wget https://github.com/docker/buildx/releases/download/v0.8.1/buildx-v0.8.1.linux-amd64
+    - wget https://github.com/docker/buildx/releases/download/v0.11.2/buildx-v0.11.2.linux-amd64
     - mkdir -p ~/.docker/cli-plugins/
-    - mv buildx-v0.8.1.linux-amd64 ~/.docker/cli-plugins/docker-buildx
+    - mv buildx-v0.11.2.linux-amd64 ~/.docker/cli-plugins/docker-buildx
     - chmod a+x ~/.docker/cli-plugins/docker-buildx
     # Create env
     - docker context create tls-environment
@@ -303,7 +383,7 @@ multi-arch-release:
     - docker pull tonistiigi/binfmt:latest
     - docker run --rm --privileged tonistiigi/binfmt:latest --install all
   script:
-    - docker buildx build --platform linux/${ARCH} --output type=local,dest=releases --build-arg APP_ASSET=${APP_ASSET} -f docker/multiarch/Dockerfile .
+    - docker buildx build --platform linux/${ARCH} --output type=local,dest=releases --build-arg="ERL_FLAGS=+JMsingle true" --build-arg APP_ASSET=${APP_ASSET} -f docker/multiarch/Dockerfile .
     - ls -alh releases/mobilizon/
     - du -sh releases/mobilizon/${APP_ASSET}
     - mv releases/mobilizon/${APP_ASSET} .
@@ -313,15 +393,27 @@ multi-arch-release:
     expire_in: 2 days
     paths:
       - ${APP_ASSET}
+      - erl_crash.dump # if there's a memory issue
   parallel:
     matrix:
-      - ARCH: ["arm", "arm64"]
+      - ARCH: ["arm64"]
+        ## Currently not used as the hexpm base images do not have support for other architectures than amd64
+        # SYSTEM:
+        #   [
+        #     "debian-bookworm",
+        #     "debian-bullseye",
+        #     "ubuntu-jammy",
+        #     "ubuntu-focal",
+        #     "ubuntu-bionic",
+        #     "alpine-3.17.5",
+        #     "alpine-3.18.4",
+        #     "fedora-38",
+        #     "fedora-39",
+        #   ]
   rules:
-    - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
-      when: never
-    - if: '$CI_PIPELINE_SOURCE == "schedule"'
-    - if: $CI_COMMIT_TAG
+    - if: '$CI_COMMIT_TAG != null || $CI_PIPELINE_SOURCE == "schedule" || $CI_PIPELINE_TRIGGERED == "true"'
   timeout: 3h
+  allow_failure: true
 
 # Release
 release-upload:
@@ -329,7 +421,9 @@ release-upload:
   image: framasoft/upload-packages:latest
   variables:
     APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
-  rules: *tag-rules
+  rules:
+    - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
+      when: never
   script:
     - eval `ssh-agent -s`
     - ssh-add <(echo "${DEPLOYEMENT_KEY}" | base64 --decode -i)
@@ -342,11 +436,14 @@ release-upload:
   parallel:
     matrix:
       - ARCH: ["amd64", "arm", "arm64"]
+  allow_failure: true
 
 release-create:
   stage: deploy
   image: registry.gitlab.com/gitlab-org/release-cli:latest
-  rules: *tag-rules
+  rules:
+    - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
+      when: never
   variables:
     APP_ASSET_AMD64: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_amd64.tar.gz"
     APP_ASSET_ARM: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_arm.tar.gz"
@@ -360,6 +457,6 @@ release-create:
     release-cli create  --name "$CI_COMMIT_TAG" \
                         --description "$CHANGELOG" \
                         --tag-name "$CI_COMMIT_TAG" \
-                        --assets-link "{\"name\":\"${APP_ASSET_AMD64}\",\"url\":\"${ENDPOINT}/${APP_ASSET_AMD64}\"}" \
-                        --assets-link "{\"name\":\"${APP_ASSET_ARM}\",\"url\":\"${ENDPOINT}/${APP_ASSET_ARM}\"}" \
-                        --assets-link "{\"name\":\"${APP_ASSET_ARM64}\",\"url\":\"${ENDPOINT}/${APP_ASSET_ARM64}\"}"
+                        --assets-link "{\"name\":\"${APP_ASSET_AMD64}\",\"url\":\"${ENDPOINT}/${CI_COMMIT_REF_NAME}/${APP_ASSET_AMD64}\"}" \
+                        --assets-link "{\"name\":\"${APP_ASSET_ARM}\",\"url\":\"${ENDPOINT}/${CI_COMMIT_REF_NAME}/${APP_ASSET_ARM}\"}" \
+                        --assets-link "{\"name\":\"${APP_ASSET_ARM64}\",\"url\":\"${ENDPOINT}/${CI_COMMIT_REF_NAME}/${APP_ASSET_ARM64}\"}"

.husky/pre-commit

@@ -0,0 +1 @@
+npm run pre-commit

.prettierignore

@@ -0,0 +1,4 @@
+src/i18n/*.json
+coverage/
+**/*.md
+test/fixtures

.sobelow-skips

@@ -1,16 +1,14 @@
 
-02CE4963DFD1B0D6D5C567357CAFFE97
-155A1FB53DE39EC8EFCFD7FB94EA823D
-2262742E5C8944D5BF6698EC61F5DE50
-25BEE162A99754480967216281E9EF33
-2A6F71CD6F1246F0B152C2376E2E398A
-30552A09D485A6AA73401C1D54F63C21
-52900CE4EE3598F6F178A651FB256770
-6151F44368FC19F2394274F513C29151
-765526195D4C6D770EAF4DC944A8CBF4
-B2FF1A12F13B873507C85091688C1D6D
-B9AF8A342CD7FF39E10CC10A408C28E1
-C042E87389F7BDCFF4E076E95731AE69
-C42BFAEF7100F57BED75998B217C857A
-D11958E86F1B6D37EF656B63405CA8A4
-F16F054F2628609A726B9FF2F089D484
+26ED12A8E03D044BEDC08749BAA5E357
+31CE26BC979C57B9E3CC97B40C290CE5
+4E7C044C59E0BCB76AA826789998F624
+5BCE3651A03711295046DE48BDFE007E
+5C4CED447689F00D9D1ACEB9B895ED29
+5D8350E7A2DE5BB1CBCC983AF121F0DA
+94ACF7B17C3FF42F64E57DD1DA936BD8
+A32E125003F1EDFAD95C487C6A969725
+C46C4893B2F702ACADC4CAA5683FE370
+CD4CD6571816FCAF1E305066CDA0CD2F
+E720CB13C50FF3ADEE7C522531E11217
+F3D5851D3FB050939841ED2F14307A27
+FD1C9756370A195B74E95CE504C45E9E

.tool-versions

@@ -1,2 +1,3 @@
-elixir 1.13.4-otp-24
-erlang 24.3.3
+erlang 26.2.2
+elixir 1.16.1-otp-26
+nodejs 18.19.1

Dockerfile

@@ -1,9 +1,10 @@
-FROM elixir:alpine
+FROM elixir:1.15-alpine
 
-RUN apk add --no-cache inotify-tools postgresql-client yarn file make gcc libc-dev argon2 imagemagick cmake build-base libwebp-tools bash ncurses git python3
+RUN apk add --no-cache inotify-tools postgresql-client file make gcc libc-dev argon2 imagemagick cmake build-base libwebp-tools bash ncurses git python3 npm
 
 RUN mix local.hex --force && mix local.rebar --force
 
 WORKDIR /app
 
 EXPOSE 4000
+EXPOSE 5173

LICENSE

@@ -630,7 +630,7 @@ state the exclusion of warranty; and each file should have at least
 the "copyright" line and a pointer to where the full notice is found.
 
     Mobilizon
-    Copyright (C) 2018  Thomas Citharel
+    Copyright (C) 2018 - 2024 Framasoft
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published

Makefile

@@ -4,24 +4,25 @@ init:
 
 setup: stop
 	@bash docker/message.sh "Compiling everything"
-	docker-compose run --rm api bash -c 'mix deps.get; yarn --cwd "js"; yarn --cwd "js" build:pictures; mix ecto.create; mix ecto.migrate'
+	docker compose run --rm api bash -c 'mix deps.get; npm ci; npm run build:pictures; mix ecto.create; mix ecto.migrate'
 migrate:
-	docker-compose run --rm api mix ecto.migrate
+	docker compose run --rm api mix ecto.migrate
 logs:
-	docker-compose logs -f
+	docker compose logs -f
 start: stop
 	@bash docker/message.sh "Starting Mobilizon with Docker"
-	docker-compose up -d api
+	docker compose up -d api
 	@bash docker/message.sh "Docker server started"
 stop:
 	@bash docker/message.sh "Stopping Mobilizon"
-	docker-compose down
+	docker compose down
 	@bash docker/message.sh "Mobilizon is stopped"
 test: stop
 	@bash docker/message.sh "Running tests"
-	docker-compose -f docker-compose.yml -f docker-compose.test.yml run api mix test $(only)
+	docker compose -f docker-compose.yml -f docker-compose.test.yml run api mix prepare_test
+	docker compose -f docker-compose.yml -f docker-compose.test.yml run api mix test $(only)
 	@bash docker/message.sh "Done running tests"
 format: 
-	docker-compose run --rm api bash -c "mix format && mix credo --strict"
+	docker compose run --rm api bash -c "mix format && mix credo --strict"
 	@bash docker/message.sh "Code is now ready to commit :)"
 target: init

README.md

@@ -1,3 +1,5 @@
+*You can learn about [what we plan to do with this fork](https://framacolibri.org/t/using-mobilizon-for-regional-leftist-subculture-calendar-platforms/18772) in this post in the Mobilizon forum.*
+
 <h1 align="center">
   <a href="https://joinmobilizon.org">
     <img src="https://lutim.cpy.re/qVYC86G9.png" alt="Mobilizon">
@@ -7,7 +9,7 @@
 Mobilizon is your federated organization and mobilization platform. Gather people with a convivial, ethical, and emancipating tool.
 
 <p align="center">
-  <strong>Developed with ♥ by <a href="https://framasoft.org">Framasoft</a></strong>
+  <strong>2017 - 2024 Developed with ♥ by <a href="https://framasoft.org">Framasoft</a></strong>
 </p>
 
 <p align="center">
@@ -16,6 +18,20 @@ Mobilizon is your federated organization and mobilization platform. Gather peopl
   </a>
 </p>
 
+## Notes about this fork
+
+The currently deployed `v4.x` branch can be tested at [https://rotes.potsda.mn/](https://rotes.potsda.mn/).
+
+### Building with Nix
+
+For building this locally, you can use Nix (with Flakes enabled):
+
+```
+$ nix build git+ssh://git@git.potsda.mn/potsda.mn/mobilizon.git?ref=main#mobilizon
+```
+
+The built package is then located in `result/`.
+
 ## Introduction
 
 Mobilizon is a tool designed to create platforms for managing communities and events. Its purpose is to help as many people as possible to free themselves from Facebook groups and events, from Meetup, etc.
@@ -41,7 +57,7 @@ There's no lock-in, you can interact with the event without registration.
 
 ## Contributing
 
-We appreciate any contribution to Mobilizon. Check our [CONTRIBUTING](CONTRIBUTING.md) file for more information.
+We appreciate any contribution to Mobilizon. Check [our contributing page](https://docs.joinmobilizon.org/contribute/) for more information.
 
 ## Links
 
@@ -50,6 +66,7 @@ We appreciate any contribution to Mobilizon. Check our [CONTRIBUTING](CONTRIBUTI
   * 🔢 Pick an instance [https://mobilizon.org](https://mobilizon.org)
   * 💻 Source: [https://framagit.org/framasoft/mobilizon](https://framagit.org/framasoft/mobilizon)
   * 📜 Documentation [https://docs.joinmobilizon.org](https://docs.joinmobilizon.org)
+    * A summarized description of structure of sources is done in [`docs/dev.md`](./docs/dev.md)
   
 ### Discuss
   * 💬 Element/Matrix: [https://matrix.to/#/#Mobilizon:matrix.org](https://matrix.to/#/#Mobilizon:matrix.org)

SECURITY.md

@@ -1,7 +1,7 @@
 [Mobilizon](https://joinmobilizon.org) takes security, privacy and user control seriously, and we want to put them front and centre of our project.
 
 This document outlines security procedures and general policies for the Mobilizon project.
-Framasoft, the Mobilizon maintainer team and community take all security bugs in Mobilizon seriously. Thank you for improving the security of Mobilizon. We appreciate your efforts and responsible disclosure and will make every effort to acknowledge your contributions.
+The Mobilizon maintainer team and community take all security bugs in Mobilizon seriously. Thank you for improving the security of Mobilizon. We appreciate your efforts and responsible disclosure and will make every effort to acknowledge your contributions.
 
 ### Goals
 
@@ -15,8 +15,6 @@ Framasoft, the Mobilizon maintainer team and community take all security bugs in
 
 * GDPR compliance.
 
-Framasoft is both a developer of open-source/free/libre self-hosted software, and a service provider with users in the European Union. As a result, we are putting user privacy, data sovereignty, and GDPR compliance into our security plans, including asking both the Framasoft community and outside hackers to review our approaches and implementations.
-
 ### Challenges
 
 [Mobilizon](https://joinmobilizon.org) will be challenging to keep secure, as it is:
@@ -33,14 +31,14 @@ This means there are more attack surfaces compared to typical proprietary, centr
 
 We are committed to working with security researchers to verify, reproduce, and respond to legitimate reported vulnerabilities. You can help us by following these simple guidelines:
 
-* Alert us about the vulnerability as soon as you become aware of it by emailing the lead maintainer at tcit+mobilizon@framasoft.org.
+* Alert us about the vulnerability as soon as you become aware of it by emailing the lead maintainer.
 * Provide details needed to reproduce and validate the vulnerability and a Proof of Concept (PoC) as soon as possible
 * Act in good faith to avoid privacy violations, destruction of data, and interruption or degradation of services
 * Do not access or modify users’ private data, without explicit permission of the owner. Only interact with your own accounts or test accounts for security research purposes;
-* Contact Framasoft or a maintainer of the Mobilizon project (or the instance admin) immediately if you do inadvertently encounter user data. Do not view, alter, save, store, transfer, or otherwise access the data, and immediately purge any local information upon reporting the vulnerability;
+* Contact a maintainer of the Mobilizon project (or the instance admin) immediately if you do inadvertently encounter user data. Do not view, alter, save, store, transfer, or otherwise access the data, and immediately purge any local information upon reporting the vulnerability;
 * The lead maintainer will acknowledge your email within 48 hours, and will send a more detailed response within 48 hours indicating the next steps in handling your report. After the initial reply to your report, the security team will endeavor to keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance.
 * Give us time to confirm, determine the affected versions and prepare fixes to correct the issue before disclosing it to other parties (if after waiting a reasonable amount of time, we are clearly unable or unwilling to do anything about it, please do hold us accountable!)
-* Please test against a local instance of the software, and refrain from running any Denial of Service or automated testing tools against Framasoft's (and our partners') infrastructure
+* Please test against a local instance of the software, and refrain from running any Denial of Service or automated testing tools against the project managers (and their partners') infrastructure
 
 Note : Please report security bugs in third-party modules to the person or team maintaining the module.
 

apollo.config.cjs

@@ -7,6 +7,6 @@ module.exports = {
       localSchemaFile: "./schema.graphql",
     },
     // Files processed by the extension
-    includes: ["js/src/**/*.vue", "js/src/**/*.js"],
+    includes: ["src/**/*.vue", "src/**/*.js"],
   },
 };

config/config.exs

@@ -19,6 +19,7 @@ config :mobilizon, :instance,
   registrations_open: false,
   registration_email_allowlist: [],
   registration_email_denylist: [],
+  disable_database_login: false,
   languages: [],
   default_language: "en",
   demo: false,
@@ -35,18 +36,23 @@ config :mobilizon, :instance,
   unconfirmed_user_grace_period_hours: 48,
   activity_expire_days: 365,
   activity_keep_number: 100,
-  enable_instance_feeds: false,
+  duration_of_long_event: 30,
+  enable_instance_feeds: true,
   email_from: "noreply@localhost",
   email_reply_to: "noreply@localhost"
 
 config :mobilizon, :groups, enabled: true
-config :mobilizon, :events, creation: true
+
+config :mobilizon, :events,
+  creation: true,
+  external: true
 
 config :mobilizon, :restrictions, only_admin_can_create_groups: false
 config :mobilizon, :restrictions, only_groups_can_create_events: false
 
 # Configures the endpoint
 config :mobilizon, Mobilizon.Web.Endpoint,
+  adapter: Bandit.PhoenixAdapter,
   url: [
     host: "mobilizon.local",
     scheme: "https"
@@ -54,7 +60,7 @@ config :mobilizon, Mobilizon.Web.Endpoint,
   secret_key_base: "1yOazsoE0Wqu4kXk3uC5gu3jDbShOimTCzyFL3OjCdBmOXMyHX87Qmf3+Tu9s0iM",
   render_errors: [view: Mobilizon.Web.ErrorView, accepts: ~w(html json)],
   pubsub_server: Mobilizon.PubSub,
-  cache_static_manifest: "priv/static/manifest.json",
+  cache_static_manifest: "priv/static/cache_manifest.json",
   has_reverse_proxy: true
 
 config :mime, :types, %{
@@ -64,6 +70,10 @@ config :mime, :types, %{
   "application/xrd+xml" => ["xrd-xml"]
 }
 
+config :mime, :extensions, %{
+  "activity-json" => "application/activity+json"
+}
+
 # Upload configuration
 config :mobilizon, Mobilizon.Web.Upload,
   uploader: Mobilizon.Web.Upload.Uploader.Local,
@@ -108,30 +118,33 @@ config :mobilizon, :media_proxy,
 config :mobilizon, Mobilizon.Web.Email.Mailer,
   adapter: Swoosh.Adapters.SMTP,
   relay: "localhost",
-  # usually 25, 465 or 587
-  port: 25,
   username: "",
   password: "",
   # can be `:always` or `:never`
   auth: :if_available,
   # can be `true`
-  ssl: false,
+  # ssl: false,
   # can be `:always` or `:never`
-  tls: :if_available,
-  allowed_tls_versions: [:tlsv1, :"tlsv1.1", :"tlsv1.2"],
+  tls: :never,
   retries: 1,
   # can be `true`
   no_mx_lookups: false
 
+config :vite_phx,
+  release_app: :mobilizon,
+  # to tell prod and dev env appart
+  environment: config_env(),
+  # this manifest is different from the Phoenix "cache_manifest.json"!
+  # optional
+  vite_manifest: "priv/static/.vite/manifest.json",
+  # optional
+  dev_server_address: "http://localhost:5173"
+
 # Configures Elixir's Logger
 config :logger, :console,
   backends: [:console],
   format: "$time $metadata[$level] $message\n",
-  metadata: [:request_id]
-
-config :logger, Sentry.LoggerBackend,
-  level: :warn,
-  capture_log_messages: true
+  metadata: [:request_id, :graphql_operation_name, :user_id, :actor_name, :trace]
 
 config :mobilizon, Mobilizon.Web.Auth.Guardian,
   issuer: "mobilizon",
@@ -141,13 +154,12 @@ config :mobilizon, Mobilizon.Web.Auth.Guardian,
   }
 
 config :guardian, Guardian.DB,
+  adapter: Guardian.DB.EctoAdapter,
   repo: Mobilizon.Storage.Repo,
   # default
   schema_name: "guardian_tokens",
   # store all token types if not set
-  token_types: ["refresh"],
-  # default: 60 minutes
-  sweep_interval: 60
+  token_types: ["refresh"]
 
 config :elixir, :time_zone_database, Tzdata.TimeZoneDatabase
 
@@ -194,6 +206,8 @@ config :codepagex, :encodings, [
   :"VENDORS/MICSFT/WINDOWS/CP1252"
 ]
 
+config :gettext, :default_locale, "en"
+
 config :mobilizon, Mobilizon.Web.Gettext, split_module_by: [:locale, :domain]
 
 config :ex_cldr,
@@ -300,16 +314,24 @@ config :mobilizon, Oban,
      crontab: [
        {"@hourly", Mobilizon.Service.Workers.BuildSiteMap, queue: :background},
        {"17 4 * * *", Mobilizon.Service.Workers.RefreshGroups, queue: :background},
-       {"36 * * * *", Mobilizon.Service.Workers.RefreshInstances, queue: :background},
+       {"36 3 * * *", Mobilizon.Service.Workers.RefreshInstances, queue: :background},
        {"@hourly", Mobilizon.Service.Workers.CleanOrphanMediaWorker, queue: :background},
        {"@hourly", Mobilizon.Service.Workers.CleanUnconfirmedUsersWorker, queue: :background},
        {"@hourly", Mobilizon.Service.Workers.ExportCleanerWorker, queue: :background},
        {"@hourly", Mobilizon.Service.Workers.SendActivityRecapWorker, queue: :notifications},
-       {"@daily", Mobilizon.Service.Workers.CleanOldActivityWorker, queue: :background}
+       {"@daily", Mobilizon.Service.Workers.CleanOldActivityWorker, queue: :background},
+       {"@daily", Mobilizon.Service.Workers.RefreshParticipantStats, queue: :background},
+       {"@hourly", Mobilizon.Service.Workers.CleanApplicationData,
+        queue: :background, args: %{type: :application_token}},
+       {"@hourly", Mobilizon.Service.Workers.CleanApplicationData,
+        queue: :background, args: %{type: :application_device_activation}}
      ]},
     {Oban.Plugins.Pruner, max_age: 300}
   ]
 
+config :hammer,
+  backend: {Hammer.Backend.ETS, [expiry_ms: 60_000 * 60 * 4, cleanup_interval_ms: 60_000 * 10]}
+
 config :mobilizon, :rich_media,
   parsers: [
     Mobilizon.Service.RichMedia.Parsers.OEmbed,
@@ -347,6 +369,27 @@ config :mobilizon, :exports,
 
 config :mobilizon, :analytics, providers: []
 
+config :mobilizon, Mobilizon.Service.Pictures, service: Mobilizon.Service.Pictures.Unsplash
+
+config :mobilizon, Mobilizon.Service.Pictures.Unsplash,
+  app_name: "Mobilizon",
+  access_key: nil
+
+config :mobilizon, :search, global: [is_default_search: false, is_enabled: true]
+
+config :mobilizon, Mobilizon.Service.GlobalSearch,
+  service: Mobilizon.Service.GlobalSearch.SearchMobilizon
+
+config :mobilizon, Mobilizon.Service.GlobalSearch.SearchMobilizon,
+  endpoint: "https://search.joinmobilizon.org",
+  csp_policy: [
+    img_src: ["search.joinmobilizon.org"]
+  ]
+
+config :mobilizon, Mobilizon.Service.AntiSpam, service: Mobilizon.Service.AntiSpam.Akismet
+
+config :mobilizon, Mobilizon.Service.SiteMap, path: "/var/lib/mobilizon/sitemap"
+
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{config_env()}.exs"

config/dev.exs

@@ -5,9 +5,9 @@ config :mobilizon, Mobilizon.Web.Endpoint,
     port: String.to_integer(System.get_env("MOBILIZON_INSTANCE_HOST_PORT", "4000"))
   ],
   url: [
-    host: System.get_env("MOBILIZON_INSTANCE_HOST", "mobilizon.local"),
-    port: String.to_integer(System.get_env("MOBILIZON_INSTANCE_HOST_PORT", "80")),
-    scheme: "http"
+    host: System.get_env("MOBILIZON_INSTANCE_HOST", "localhost"),
+    port: String.to_integer(System.get_env("MOBILIZON_INSTANCE_HOST_PORT", "4000")),
+    scheme: System.get_env("MOBILIZON_INSTANCE_SCHEME", "http")
   ],
   secret_key_base: System.get_env("MOBILIZON_INSTANCE_SECRET_KEY_BASE", "changethis"),
   debug_errors: true,
@@ -15,14 +15,9 @@ config :mobilizon, Mobilizon.Web.Endpoint,
   check_origin: false,
   watchers: [
     node: [
-      "node_modules/webpack/bin/webpack.js",
-      "--mode",
-      "development",
-      "--watch",
-      "--watch-options-stdin",
-      "--config",
-      "node_modules/@vue/cli-service/webpack.config.js",
-      cd: Path.expand("../js", __DIR__)
+      "node_modules/.bin/vite",
+      "--host",
+      System.get_env("VITE_HOST", "localhost")
     ]
   ]
 
@@ -54,7 +49,7 @@ config :mobilizon, Mobilizon.Web.Endpoint,
   ]
 
 # Do not include metadata nor timestamps in development logs
-config :logger, :console, format: "[$level] $message\n", level: :debug
+config :logger, :console, format: "$metadata[$level] $message\n", level: :debug
 
 config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Nominatim
 
@@ -77,7 +72,9 @@ config :mobilizon, Mobilizon.Storage.Repo,
   hostname: System.get_env("MOBILIZON_DATABASE_HOST", "localhost"),
   port: System.get_env("MOBILIZON_DATABASE_PORT", "5432"),
   pool_size: 10,
-  show_sensitive_data_on_connection_error: true
+  show_sensitive_data_on_connection_error: true,
+  # Logging is handled by Ecto.DevLogger
+  log: false
 
 config :mobilizon, :instance,
   name: System.get_env("MOBILIZON_INSTANCE_NAME", "Mobilizon"),
@@ -96,9 +93,14 @@ config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "uploads"
 
 config :mobilizon, :exports, path: "uploads/exports"
 
+config :mobilizon, Mobilizon.Service.SiteMap,
+  path: System.get_env("MOBILIZON_SITEMAP_PATH", "priv/static")
+
 config :tz_world, data_dir: "_build/dev/lib/tz_world/priv"
 
 config :mobilizon, :anonymous,
   reports: [
     allowed: true
   ]
+
+config :unplug, :init_mode, :runtime

config/docker.exs

@@ -1,6 +1,29 @@
 # Mobilizon instance configuration
 
 import Config
+import Mobilizon.Service.Config.Helpers
+
+{:ok, _} = Application.ensure_all_started(:tls_certificate_check)
+
+loglevels = [
+  :emergency,
+  :alert,
+  :critical,
+  :error,
+  :warning,
+  :notice,
+  :info,
+  :debug
+]
+
+loglevel_env = System.get_env("MOBILIZON_LOGLEVEL", "error")
+
+loglevel =
+  if loglevel_env in Enum.map(loglevels, &to_string/1) do
+    String.to_existing_atom(loglevel_env)
+  else
+    :error
+  end
 
 listen_ip = System.get_env("MOBILIZON_INSTANCE_LISTEN_IP", "0.0.0.0")
 
@@ -27,9 +50,20 @@ config :mobilizon, :instance,
   description: "Change this to a proper description of your instance",
   hostname: System.get_env("MOBILIZON_INSTANCE_HOST", "mobilizon.lan"),
   registrations_open: System.get_env("MOBILIZON_INSTANCE_REGISTRATIONS_OPEN", "false") == "true",
-  demo: false,
-  allow_relay: true,
-  federating: true,
+  registration_email_allowlist:
+    System.get_env("MOBILIZON_INSTANCE_REGISTRATIONS_EMAIL_ALLOWLIST", "")
+    |> String.split(",", trim: true),
+  registration_email_denylist:
+    System.get_env("MOBILIZON_INSTANCE_REGISTRATIONS_EMAIL_DENYLIST", "")
+    |> String.split(",", trim: true),
+  disable_database_login:
+    System.get_env("MOBILIZON_INSTANCE_DISABLE_DATABASE_LOGIN", "false") == "true",
+  default_language: System.get_env("MOBILIZON_INSTANCE_DEFAULT_LANGUAGE", "en"),
+  demo: System.get_env("MOBILIZON_INSTANCE_DEMO", "false") == "true",
+  allow_relay: System.get_env("MOBILIZON_INSTANCE_ALLOW_RELAY", "true") == "true",
+  federating: System.get_env("MOBILIZON_INSTANCE_FEDERATING", "true") == "true",
+  enable_instance_feeds:
+    System.get_env("MOBILIZON_INSTANCE_ENABLE_INSTANCE_FEEDS", "true") == "true",
   email_from: System.get_env("MOBILIZON_INSTANCE_EMAIL", "noreply@mobilizon.lan"),
   email_reply_to: System.get_env("MOBILIZON_REPLY_EMAIL", "noreply@mobilizon.lan")
 
@@ -39,21 +73,25 @@ config :mobilizon, Mobilizon.Storage.Repo,
   password: System.get_env("MOBILIZON_DATABASE_PASSWORD", "password"),
   database: System.get_env("MOBILIZON_DATABASE_DBNAME", "mobilizon"),
   hostname: System.get_env("MOBILIZON_DATABASE_HOST", "postgres"),
-  port: 5432,
+  port: System.get_env("MOBILIZON_DATABASE_PORT", "5432"),
+  ssl: System.get_env("MOBILIZON_DATABASE_SSL", "false") == "true",
   pool_size: 10
 
+config :logger, level: loglevel
+
 config :mobilizon, Mobilizon.Web.Email.Mailer,
   adapter: Swoosh.Adapters.SMTP,
   relay: System.get_env("MOBILIZON_SMTP_SERVER", "localhost"),
   port: System.get_env("MOBILIZON_SMTP_PORT", "25"),
   username: System.get_env("MOBILIZON_SMTP_USERNAME", nil),
   password: System.get_env("MOBILIZON_SMTP_PASSWORD", nil),
-  tls: :if_available,
-  allowed_tls_versions: [:tlsv1, :"tlsv1.1", :"tlsv1.2"],
+  tls: System.get_env("MOBILIZON_SMTP_TLS", "if_available"),
+  tls_options:
+    :tls_certificate_check.options(System.get_env("MOBILIZON_SMTP_SERVER", "localhost")),
   ssl: System.get_env("MOBILIZON_SMTP_SSL", "false"),
   retries: 1,
   no_mx_lookups: false,
-  auth: :if_available
+  auth: System.get_env("MOBILIZON_SMTP_AUTH", "if_available")
 
 config :geolix,
   databases: [
@@ -67,13 +105,152 @@ config :geolix,
 config :mobilizon, Mobilizon.Web.Upload.Uploader.Local,
   uploads: System.get_env("MOBILIZON_UPLOADS", "/var/lib/mobilizon/uploads")
 
+formats =
+  if System.get_env("MOBILIZON_EXPORTS_FORMAT_CSV_ENABLED", "true") == "true" do
+    [Mobilizon.Service.Export.Participants.CSV]
+  else
+    []
+  end
+
+formats =
+  if System.get_env("MOBILIZON_EXPORTS_FORMAT_PDF_ENABLED", "true") == "true" do
+    formats ++ [Mobilizon.Service.Export.Participants.PDF]
+  else
+    formats
+  end
+
+formats =
+  if System.get_env("MOBILIZON_EXPORTS_FORMAT_ODS_ENABLED", "true") == "true" do
+    formats ++ [Mobilizon.Service.Export.Participants.ODS]
+  else
+    formats
+  end
+
 config :mobilizon, :exports,
   path: System.get_env("MOBILIZON_UPLOADS_EXPORTS", "/var/lib/mobilizon/uploads/exports"),
-  formats: [
-    Mobilizon.Service.Export.Participants.CSV,
-    Mobilizon.Service.Export.Participants.PDF,
-    Mobilizon.Service.Export.Participants.ODS
-  ]
+  formats: formats
 
 config :tz_world,
   data_dir: System.get_env("MOBILIZON_TIMEZONES_DIR", "/var/lib/mobilizon/timezones")
+
+config :tzdata, :data_dir, System.get_env("MOBILIZON_TZDATA_DIR", "/var/lib/mobilizon/tzdata")
+
+config :web_push_encryption, :vapid_details,
+  subject: System.get_env("MOBILIZON_WEB_PUSH_ENCRYPTION_SUBJECT", nil),
+  public_key: System.get_env("MOBILIZON_WEB_PUSH_ENCRYPTION_PUBLIC_KEY", nil),
+  private_key: System.get_env("MOBILIZON_WEB_PUSH_ENCRYPTION_PRIVATE_KEY", nil)
+
+geospatial_service =
+  case System.get_env("MOBILIZON_GEOSPATIAL_SERVICE", "Nominatim") do
+    "Nominatim" -> Mobilizon.Service.Geospatial.Nominatim
+    "Addok" -> Mobilizon.Service.Geospatial.Addok
+    "Photon" -> Mobilizon.Service.Geospatial.Photon
+    "GoogleMaps" -> Mobilizon.Service.Geospatial.GoogleMaps
+    "MapQuest" -> Mobilizon.Service.Geospatial.MapQuest
+    "Mimirsbrunn" -> Mobilizon.Service.Geospatial.Mimirsbrunn
+    "Pelias" -> Mobilizon.Service.Geospatial.Pelias
+    "Hat" -> Mobilizon.Service.Geospatial.Hat
+  end
+
+config :mobilizon, Mobilizon.Service.Geospatial, service: geospatial_service
+
+config :mobilizon, Mobilizon.Service.Geospatial.Nominatim,
+  endpoint:
+    System.get_env(
+      "MOBILIZON_GEOSPATIAL_NOMINATIM_ENDPOINT",
+      "https://nominatim.openstreetmap.org"
+    ),
+  api_key: System.get_env("MOBILIZON_GEOSPATIAL_NOMINATIM_API_KEY", nil)
+
+config :mobilizon, Mobilizon.Service.Geospatial.Addok,
+  endpoint:
+    System.get_env("MOBILIZON_GEOSPATIAL_ADDOK_ENDPOINT", "https://api-adresse.data.gouv.fr")
+
+config :mobilizon, Mobilizon.Service.Geospatial.Photon,
+  endpoint: System.get_env("MOBILIZON_GEOSPATIAL_PHOTON_ENDPOINT", "https://photon.komoot.de")
+
+config :mobilizon, Mobilizon.Service.Geospatial.GoogleMaps,
+  api_key: System.get_env("MOBILIZON_GEOSPATIAL_GOOGLE_MAPS_API_KEY", nil),
+  fetch_place_details: true
+
+config :mobilizon, Mobilizon.Service.Geospatial.MapQuest,
+  api_key: System.get_env("MOBILIZON_GEOSPATIAL_MAP_QUEST_API_KEY", nil)
+
+config :mobilizon, Mobilizon.Service.Geospatial.Mimirsbrunn,
+  endpoint: System.get_env("MOBILIZON_GEOSPATIAL_MIMIRSBRUNN_ENDPOINT", nil)
+
+config :mobilizon, Mobilizon.Service.Geospatial.Pelias,
+  endpoint: System.get_env("MOBILIZON_GEOSPATIAL_PELIAS_ENDPOINT", nil)
+
+sentry_dsn = System.get_env("MOBILIZON_ERROR_REPORTING_SENTRY_DSN", nil)
+
+included_environments = if sentry_dsn, do: ["prod"], else: []
+
+config :sentry,
+  dsn: sentry_dsn,
+  included_environments: included_environments,
+  release: to_string(Application.spec(:mobilizon, :vsn))
+
+config :logger, Sentry.LoggerBackend,
+  capture_log_messages: true,
+  level: :error
+
+if sentry_dsn != nil do
+  config :mobilizon, Mobilizon.Service.ErrorReporting,
+    adapter: Mobilizon.Service.ErrorReporting.Sentry
+end
+
+matomo_enabled = System.get_env("MOBILIZON_FRONT_END_ANALYTICS_MATOMO_ENABLED", "false") == "true"
+matomo_endpoint = System.get_env("MOBILIZON_FRONT_END_ANALYTICS_MATOMO_ENDPOINT", nil)
+matomo_site_id = System.get_env("MOBILIZON_FRONT_END_ANALYTICS_MATOMO_SITE_ID", nil)
+
+matomo_tracker_file_name =
+  System.get_env("MOBILIZON_FRONT_END_ANALYTICS_MATOMO_TRACKER_FILE_NAME", "matomo")
+
+matomo_host = host_from_uri(matomo_endpoint)
+
+analytics_providers =
+  if matomo_enabled do
+    [Mobilizon.Service.FrontEndAnalytics.Matomo]
+  else
+    []
+  end
+
+analytics_providers =
+  if sentry_dsn != nil do
+    analytics_providers ++ [Mobilizon.Service.FrontEndAnalytics.Sentry]
+  else
+    analytics_providers
+  end
+
+config :mobilizon, :analytics, providers: analytics_providers
+
+matomo_csp =
+  if matomo_enabled and matomo_host do
+    [
+      connect_src: [matomo_host],
+      script_src: [matomo_host],
+      img_src: [matomo_host]
+    ]
+  else
+    []
+  end
+
+config :mobilizon, Mobilizon.Service.FrontEndAnalytics.Matomo,
+  enabled: matomo_enabled,
+  host: matomo_endpoint,
+  siteId: matomo_site_id,
+  trackerFileName: matomo_tracker_file_name,
+  csp: matomo_csp
+
+config :mobilizon, Mobilizon.Service.FrontEndAnalytics.Sentry,
+  enabled: sentry_dsn != nil,
+  dsn: sentry_dsn,
+  tracesSampleRate: 1.0,
+  organization: System.get_env("MOBILIZON_ERROR_REPORTING_SENTRY_ORGANISATION", nil),
+  project: System.get_env("MOBILIZON_ERROR_REPORTING_SENTRY_PROJECT", nil),
+  host: System.get_env("MOBILIZON_ERROR_REPORTING_SENTRY_HOST", nil),
+  csp: [
+    connect_src:
+      System.get_env("MOBILIZON_ERROR_REPORTING_SENTRY_HOST", "") |> String.split(" ", trim: true)
+  ]

config/e2e.exs

@@ -16,22 +16,44 @@ config :mobilizon, Mobilizon.Web.Endpoint,
   check_origin: false,
   # Somehow this can't be merged properly with the dev config so we got this…
   watchers: [
-    yarn: [cd: Path.expand("../js", __DIR__)]
+    node: [
+      "node_modules/.bin/vite"
+    ]
   ]
 
-require Logger
+config :vite_phx,
+  release_app: :mobilizon,
+  # Hard code :prod as an environment as :e2e will not be recongnized
+  environment: :prod,
+  vite_manifest: "priv/static/.vite/manifest.json",
+  phx_manifest: "priv/static/cache_manifest.json",
+  dev_server_address: "http://localhost:5173"
 
-cond do
-  System.get_env("INSTANCE_CONFIG") &&
-      File.exists?("./config/#{System.get_env("INSTANCE_CONFIG")}") ->
-    import_config System.get_env("INSTANCE_CONFIG")
+config :mobilizon, :instance,
+  name: "E2E Testing instance",
+  description: "E2E is safety",
+  hostname: "mobilizon1.com",
+  registrations_open: true,
+  registration_email_denylist: ["gmail.com", "deny@tcit.fr"],
+  demo: false,
+  default_language: "en",
+  allow_relay: true,
+  federating: true,
+  email_from: "mobilizon@mobilizon1.com",
+  email_reply_to: nil,
+  enable_instance_feeds: true,
+  koena_connect_link: true,
+  extra_categories: [
+    %{
+      id: :something_else,
+      label: "Quelque chose d'autre"
+    }
+  ]
 
-  System.get_env("DOCKER", "false") == "false" && File.exists?("./config/e2e.secret.exs") ->
-    import_config "e2e.secret.exs"
-
-  System.get_env("DOCKER", "false") == "true" ->
-    Logger.info("Using environment configuration for Docker")
-
-  true ->
-    Logger.error("No configuration file found")
-end
+config :mobilizon, Mobilizon.Storage.Repo,
+  adapter: Ecto.Adapters.Postgres,
+  username: System.get_env("MOBILIZON_DATABASE_USERNAME", "mobilizon_e2e"),
+  password: System.get_env("MOBILIZON_DATABASE_PASSWORD", "mobilizon_e2e"),
+  database: System.get_env("MOBILIZON_DATABASE_DBNAME", "mobilizon_e2e"),
+  hostname: System.get_env("MOBILIZON_DATABASE_HOST", "localhost"),
+  port: System.get_env("MOBILIZON_DATABASE_PORT") || "5432"

config/prod.exs

@@ -30,6 +30,7 @@ config :mobilizon, :cldr,
     "fr",
     "gd",
     "gl",
+    "hr",
     "hu",
     "id",
     "it",

config/test.exs

@@ -2,7 +2,8 @@ import Config
 
 config :mobilizon, :instance,
   name: "Test instance",
-  registrations_open: true
+  registrations_open: true,
+  duration_of_long_event: 0
 
 # We don't run a server during test. If one is required,
 # you can enable the server option below.
@@ -54,6 +55,11 @@ config :mobilizon, :ldap,
   bind_uid: System.get_env("LDAP_BIND_UID"),
   bind_password: System.get_env("LDAP_BIND_PASSWORD")
 
+# Faster runs in test environment
+config :argon2_elixir,
+  t_cost: 1,
+  m_cost: 8
+
 config :mobilizon, Mobilizon.Web.Email.Mailer, adapter: Swoosh.Adapters.Test
 
 config :mobilizon, Mobilizon.Web.Upload, filters: [], link_name: false
@@ -62,6 +68,9 @@ config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "test/uploads"
 
 config :mobilizon, :exports, path: "test/uploads/exports"
 
+config :mobilizon, Mobilizon.Service.SiteMap,
+  path: System.get_env("MOBILIZON_SITEMAP_PATH", "test/sitemap")
+
 config :tz_world, data_dir: "_build/test/lib/tz_world/priv"
 
 config :tesla, Mobilizon.Service.HTTP.ActivityPub,
@@ -78,7 +87,7 @@ config :tesla, Mobilizon.Service.HTTP.HostMetaClient,
 
 config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Mock
 
-config :mobilizon, Oban, queues: false, plugins: false
+config :mobilizon, Oban, testing: :manual
 
 config :mobilizon, Mobilizon.Web.Auth.Guardian, secret_key: "some secret"
 
@@ -88,6 +97,10 @@ config :mobilizon, Mobilizon.Web.Gettext, allowed_locales: ["fr", "en", "es", "r
 
 config :junit_formatter, report_dir: "."
 
+config :mobilizon, :http_security, report_uri: "https://endpoint.com"
+
+config :mobilizon, Mobilizon.Service.AntiSpam, service: Mobilizon.Service.AntiSpam.Mock
+
 if System.get_env("DOCKER", "false") == "false" && File.exists?("./config/test.secret.exs") do
   import_config "test.secret.exs"
 end

default.nix

@@ -0,0 +1,87 @@
+{
+  lib,
+  beam_nox,
+  fetchFromGitHub,
+  cmake,
+  nixosTests,
+  src,
+  src-config,
+  mobilizon-js,
+}:
+
+let
+  inherit (beam_nox.packages.erlang) mixRelease buildMix elixir;
+in
+mixRelease rec {
+  pname = "mobilizon";
+
+  # This has to be kept in sync with the version in mix.exs and package.json!
+  # Otherwise the nginx routing isn't going to work properly.
+  version = "5.0.0-beta.1";
+
+  inherit src;
+
+  # Update deps.nix by running `mix deps.nix`
+  mixNixDeps = import ./deps.nix {
+    inherit lib;
+    beamPackages = beam_nox.packages.erlang;
+    overrides = (
+      final: prev:
+      (lib.mapAttrs (_: value: value.override { appConfigPath = src-config; }) prev)
+      // {
+        fast_html = prev.fast_html.override { nativeBuildInputs = [ cmake ]; };
+        ex_cldr = prev.ex_cldr.overrideAttrs (old: {
+          # We have to use the GitHub sources, as it otherwise tries to download
+          # the locales at build time.
+          src = fetchFromGitHub {
+            owner = "elixir-cldr";
+            repo = "cldr";
+            rev = "v${old.version}";
+            sha256 =
+              assert old.version == "2.37.5";
+              "sha256-T5Qvuo+xPwpgBsqHNZYnTCA4loToeBn1LKTMsDcCdYs=";
+          };
+          postInstall = ''
+            cp $src/priv/cldr/locales/* $out/lib/erlang/lib/ex_cldr-${old.version}/priv/cldr/locales/
+          '';
+        });
+
+      }
+    );
+  };
+
+  # fix elixir locale warning
+  env.LANG = "C.UTF-8";
+
+  # Install the compiled js part
+  preBuild = ''
+    cp -a "${mobilizon-js}/_napalm-install/priv/static" ./priv
+    chmod 770 -R ./priv
+  '';
+
+  postBuild = ''
+    mix phx.digest --no-deps-check
+  '';
+
+  # Just a hack to reduce path size by 60MB
+  postInstall =
+    let
+      inherit (mixNixDeps) ex_cldr;
+    in
+    ''
+      rm -r $out/lib/ex_cldr-${ex_cldr.version}/priv/cldr/locales
+      ln -s ${ex_cldr.src}/priv/cldr/locales $out/lib/ex_cldr-${ex_cldr.version}/priv/cldr/locales
+    '';
+
+  passthru.elixirPackage = elixir;
+
+  meta = with lib; {
+    description = "Mobilizon is an online tool to help manage your events, your profiles and your groups";
+    homepage = "https://joinmobilizon.org/";
+    license = licenses.agpl3Plus;
+    maintainers = with maintainers; [
+      minijackson
+      erictapen
+    ];
+  };
+}

docker-compose.test.yml

@@ -11,7 +11,7 @@ services:
       MIX_ENV: "test"
       MOBILIZON_DATABASE_DBNAME: mobilizon_test
       MOBILIZON_INSTANCE_HOST: mobilizon.test
-    command: "mix test"
+    command: "mix prepare_test && mix test"
 volumes:
   pgdata:
   .:

docker-compose.yml

@@ -19,6 +19,7 @@ services:
       - ".:/app"
     ports:
       - 4000:4000
+      - 5173:5173
     depends_on:
       - postgres
     environment:
@@ -35,6 +36,7 @@ services:
       MOBILIZON_DATABASE_DBNAME: ${POSTGRES_DB}
       MOBILIZON_DATABASE_HOST: postgres
       MOBILIZON_DATABASE_PORT: ${POSTGRES_PORT}
+      VITE_HOST: ${VITE_HOST:-localhost}
     command: sh -c "mix phx.server"
 volumes:
   pgdata:

docker/multiarch/Dockerfile

@@ -1,21 +1,27 @@
-FROM elixir as build
+ARG IMAGE="elixir:1.16"
+
+FROM ${IMAGE} as build
 SHELL ["/bin/bash", "-c"]
 ENV MIX_ENV prod
 # ENV LANG en_US.UTF-8
 ARG APP_ASSET
 
+# Fix qemu segfault on arm64
+# See https://github.com/plausible/analytics/pull/2879 and https://github.com/erlang/otp/pull/6340
+ARG ERL_FLAGS=""
+ENV ERL_FLAGS=$ERL_FLAGS
+
 # Set the right versions
 ENV ELIXIR_VERSION latest
 ENV ERLANG_VERSION latest
-ENV NODE_VERSION 16
+ENV NODE_VERSION 20
 
 # Install system dependencies
 RUN apt-get update -yq && apt-get install -yq build-essential cmake postgresql-client git curl gnupg unzip exiftool webp imagemagick gifsicle
 RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
-# # Install Node & yarn
+# # Install Node
 # RUN curl -sL https://deb.nodesource.com/setup_16.x | bash && apt-get install nodejs -yq
-# RUN npm install -g yarn
 
 # Install build tools
 RUN source /root/.bashrc && \
@@ -27,14 +33,15 @@ COPY ./ /mobilizon
 WORKDIR /mobilizon
 
 # # Build front-end
-# RUN yarn --cwd "js" install --frozen-lockfile
-# RUN yarn --cwd "js" run build
+# RUN npm install
+# RUN npm run build
 
 # Elixir release
 RUN source /root/.bashrc && \
     mix deps.get --only prod && \
     mix compile  && \
     mix phx.digest.clean --all && \
+    mix phx.digest && \
     mix release --path release/mobilizon && \
     cd release/mobilizon && \
     ln -s lib/mobilizon-*/priv priv && \

docker/production/Dockerfile

@@ -1,18 +1,20 @@
 # First build the application assets
-FROM node:16-alpine as assets
+FROM node:20-alpine as assets
 
 RUN apk add --no-cache python3 build-base libwebp-tools bash imagemagick ncurses
 WORKDIR /build
-COPY js .
-
-ENV CYPRESS_INSTALL_BINARY 0
+COPY . .
 
 # Network timeout because it's slow when cross-compiling
-RUN yarn install --network-timeout 100000 \
-    && yarn run build
+RUN npm install && npm run build
 
 # Then, build the application binary
-FROM elixir:1.13-alpine AS builder
+FROM elixir:1.16-alpine AS builder
+
+# Fix qemu segfault on arm64
+# See https://github.com/plausible/analytics/pull/2879 and https://github.com/erlang/otp/pull/6340
+ARG ERL_FLAGS=""
+ENV ERL_FLAGS=$ERL_FLAGS
 
 RUN apk add --no-cache build-base git cmake
 
@@ -28,10 +30,9 @@ COPY config/config.exs config/prod.exs ./config/
 COPY config/docker.exs ./config/runtime.exs
 COPY rel ./rel
 COPY support ./support
-COPY --from=assets ./priv/static ./priv/static
+COPY --from=assets /build/priv/static ./priv/static
 
-RUN mix phx.digest.clean --all \
-    && mix release
+RUN mix phx.digest.clean --all && mix phx.digest && mix release
 
 # Finally setup the app
 FROM alpine
@@ -50,16 +51,23 @@ LABEL org.opencontainers.image.title="mobilizon" \
     org.opencontainers.image.created=$BUILD_DATE
 
 RUN apk add --no-cache curl openssl ca-certificates ncurses-libs file postgresql-client libgcc libstdc++ imagemagick python3 py3-pip py3-pillow py3-cffi py3-brotli gcc g++ musl-dev python3-dev pango libxslt-dev ttf-cantarell
-RUN pip install weasyprint pyexcel-ods3
+RUN pip --no-cache-dir install --break-system-packages weasyprint pyexcel-ods3
 
+# Create every data directory
 RUN mkdir -p /var/lib/mobilizon/uploads && chown nobody:nobody /var/lib/mobilizon/uploads
+RUN mkdir -p /var/lib/mobilizon/timezones && chown nobody:nobody /var/lib/mobilizon/timezones
+RUN mkdir -p /var/lib/mobilizon/tzdata && chown nobody:nobody /var/lib/mobilizon/tzdata
+RUN mkdir -p /var/lib/mobilizon/sitemap && chown nobody:nobody /var/lib/mobilizon/sitemap
 RUN mkdir -p /var/lib/mobilizon/uploads/exports/{csv,pdf,ods} && chown -R nobody:nobody /var/lib/mobilizon/uploads/exports
-RUN mkdir -p /var/lib/mobilizon/timezones
-RUN curl -L 'https://packages.joinmobilizon.org/tz_world/timezones-geodata.dets' -o /var/lib/mobilizon/timezones/timezones-geodata.dets
-RUN chown nobody:nobody /var/lib/mobilizon/timezones
+
+# Create configuration directory
 RUN mkdir -p /etc/mobilizon && chown nobody:nobody /etc/mobilizon
 
 USER nobody
+
+# Get timezone geodata
+RUN curl -L 'https://packages.joinmobilizon.org/tz_world/timezones-geodata.dets' -o /var/lib/mobilizon/timezones/timezones-geodata.dets
+
 EXPOSE 4000
 
 ENV MOBILIZON_DOCKER=true

docker/production/docker-entrypoint.sh

@@ -3,12 +3,12 @@
 set -e
 
 echo "-- Waiting for database..."
-while ! pg_isready -U ${MOBILIZON_DATABASE_USERNAME} -d postgres://${MOBILIZON_DATABASE_HOST}:5432/${MOBILIZON_DATABASE_DBNAME} -t 1; do
+while ! pg_isready -U ${MOBILIZON_DATABASE_USERNAME} -d postgres://${MOBILIZON_DATABASE_HOST}:${MOBILIZON_DATABASE_PORT:-5432}/${MOBILIZON_DATABASE_DBNAME} -t 1; do
    sleep 1s
 done
 
-PGPASSWORD=$MOBILIZON_DATABASE_PASSWORD psql -U $MOBILIZON_DATABASE_USERNAME -d $MOBILIZON_DATABASE_DBNAME -h $MOBILIZON_DATABASE_HOST -c 'CREATE EXTENSION IF NOT EXISTS pg_trgm;'
-PGPASSWORD=$MOBILIZON_DATABASE_PASSWORD psql -U $MOBILIZON_DATABASE_USERNAME -d $MOBILIZON_DATABASE_DBNAME -h $MOBILIZON_DATABASE_HOST -c 'CREATE EXTENSION IF NOT EXISTS unaccent;'
+PGPASSWORD=$MOBILIZON_DATABASE_PASSWORD psql -U $MOBILIZON_DATABASE_USERNAME -d $MOBILIZON_DATABASE_DBNAME -h $MOBILIZON_DATABASE_HOST -p ${MOBILIZON_DATABASE_PORT:-5432} -c 'CREATE EXTENSION IF NOT EXISTS pg_trgm;'
+PGPASSWORD=$MOBILIZON_DATABASE_PASSWORD psql -U $MOBILIZON_DATABASE_USERNAME -d $MOBILIZON_DATABASE_DBNAME -h $MOBILIZON_DATABASE_HOST -p ${MOBILIZON_DATABASE_PORT:-5432} -c 'CREATE EXTENSION IF NOT EXISTS unaccent;'
 
 echo "-- Running migrations..."
 /bin/mobilizon_ctl migrate

docker/tests/Dockerfile

@@ -1,11 +1,10 @@
 FROM elixir:latest
-LABEL maintainer="Thomas Citharel <tcit@tcit.fr>"
 
-ENV REFRESHED_AT=2022-04-06
-RUN apt-get update -yq && apt-get install -yq build-essential inotify-tools postgresql-client git curl gnupg xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 cmake exiftool python3-pip python3-setuptools
-RUN curl -sL https://deb.nodesource.com/setup_16.x | bash && apt-get install nodejs -yq
-RUN npm install -g yarn wait-on
+ENV REFRESHED_AT=2024-02-29
+RUN apt-get update -yq && apt-get install -yq ca-certificates build-essential inotify-tools postgresql-client git curl gnupg xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 cmake exiftool python3-pip python3-setuptools
+RUN mkdir -p /etc/apt/keyrings && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list && apt-get update && apt-get install nodejs -yq
+RUN npm install -g wait-on
 RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 RUN mix local.hex --force && mix local.rebar --force
-RUN pip3 install -Iv weasyprint pyexcel_ods3
+RUN pip --no-cache-dir install --break-system-packages weasyprint pyexcel-ods3
 RUN curl https://dbip.mirror.framasoft.org/files/dbip-city-lite-latest.mmdb --output GeoLite2-City.mmdb -s && mkdir -p /usr/share/GeoIP && mv GeoLite2-City.mmdb /usr/share/GeoIP/

docs/dev.md

@@ -0,0 +1,30 @@
+# Documentation for developpers
+
+_This file is a summary of the documentation for developpers. As explained in [CONTRIBUTING.md](../CONTRIBUTING.md), the main documentation is available at <https://docs.joinmobilizon.org/contribute/>_
+
+## Technologies
+
+Mobilizon is an app that uses:
+  * [Elixir](https://elixir-lang.org/) for backend,
+  * [VueJS](https://vuejs.org/) for front-end
+  * [GraphQL](https://graphql.org/) as it's API layer
+
+[GraphQL](https://graphql.org/) is managed using:
+  * [Absinthe](https://absinthe-graphql.org/) on the backend
+  * [VueApollo](https://apollo.vuejs.org/) on the front-end.
+  
+[UI](https://en.wikipedia.org/wiki/User_interface) is handled with [Tailwind](https://tailwindcss.com/) and [Oruga](https://oruga.io/).
+
+## Structure of sources
+
+  * `config` backend compile-time and runtime configuration
+  * `docker` 🐳
+  * `src` Front-end
+  * `lib/federation` Handling all the federation stuff (sending and receving activities, converting activities, signatures, helpers…)
+  * `lib/graphql/schema` The schema declarations for the GraphQL API
+  * `lib/graphql/resolvers` The logic behind the GraphQL API
+  * `lib/mix/tasks` CLI
+  * `lib/mobilizon` model structures, database queries
+  * `lib/service` various services
+  * `lib/web` controllers, middlewares, auth-related stuff
+  * `test` tests

env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="histoire/vue" />
+
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SERVER_URL: string;
+  readonly VITE_HISTOIRE_ENV: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

flake.lock

@@ -0,0 +1,98 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1701680307,
+        "narHash": "sha256-kAuep2h5ajznlPMD9rnQyffWG8EM/C73lejGofXvdM8=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "4022d587cbbfd70fe950c1e2083a02621806a725",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "napalm": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": [
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1717929455,
+        "narHash": "sha256-BiI5xWygriOJuNISnGAeL0KYxrEMnjgpg+7wDskVBhI=",
+        "owner": "nix-community",
+        "repo": "napalm",
+        "rev": "e1babff744cd278b56abe8478008b4a9e23036cf",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-community",
+        "repo": "napalm",
+        "type": "github"
+      }
+    },
+    "nix-filter": {
+      "locked": {
+        "lastModified": 1710156097,
+        "narHash": "sha256-1Wvk8UP7PXdf8bCCaEoMnOT1qe5/Duqgj+rL8sRQsSM=",
+        "owner": "numtide",
+        "repo": "nix-filter",
+        "rev": "3342559a24e85fc164b295c3444e8a139924675b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "nix-filter",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1726463316,
+        "narHash": "sha256-gI9kkaH0ZjakJOKrdjaI/VbaMEo9qBbSUl93DnU7f4c=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "99dc8785f6a0adac95f5e2ab05cc2e1bf666d172",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "napalm": "napalm",
+        "nix-filter": "nix-filter",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,462 @@
+{
+  description = "Mobilizon fork for potsda.mn";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+    nix-filter.url = "github:numtide/nix-filter";
+    napalm.url = "github:nix-community/napalm";
+    napalm.inputs.nixpkgs.follows = "nixpkgs";
+  };
+
+  outputs =
+    {
+      self,
+      nixpkgs,
+      nix-filter,
+      napalm,
+    }:
+    let
+      forAllSystems =
+        f:
+        nixpkgs.lib.genAttrs [
+          "x86_64-linux"
+          "aarch64-linux"
+        ] (system: f system);
+      nixpkgsFor = forAllSystems (system: import nixpkgs { inherit system; });
+      filter = nix-filter.lib;
+    in
+    {
+
+      packages = forAllSystems (
+        system:
+        let
+          pkgs = nixpkgsFor.${system};
+          # Directories that are neither needed for building the frontend nor the backend.
+          # For better build caching.
+          unrelatedDirs = [
+            "flake.lock"
+            (filter.matchExt "nix")
+            "docs"
+            "docker"
+            "docker-compose.test.yml"
+            "docker-compose.yml"
+            "generate-test-data"
+          ];
+        in
+        {
+          mobilizon = pkgs.callPackage ./. {
+            src = filter {
+              root = ./.;
+              exclude = [
+                "src"
+                (filter.matchExt "js")
+                (filter.matchExt "ts")
+                (filter.matchExt "json")
+                "tests"
+                "scripts"
+                "public"
+              ] ++ unrelatedDirs;
+            };
+            src-config = ./config;
+            mobilizon-js = self.packages."${system}".mobilizon-frontend;
+          };
+
+          mobilizon-frontend =
+            napalm.legacyPackages."${system}".buildPackage
+              (filter {
+                root = ./.;
+                exclude = [
+                  "lib"
+                  "config"
+                  "test"
+                  "rel"
+                  "support"
+                ] ++ unrelatedDirs;
+              })
+              {
+                inherit (pkgs) nodejs;
+                nativeBuildInputs = [ pkgs.imagemagick ];
+                npmCommands = [
+                  "npm install"
+                  "npm run build"
+                ];
+                # Keep this in sync with the content of ./patches/
+                customPatchPackages = {
+                  vue-i18n-extract."2.0.7" = pkgs: prev: {
+                    preConfigure = ''
+                      ${pkgs.git}/bin/git apply -p3 ${./patches/vue-i18n-extract+2.0.7.patch}
+                    '';
+                  };
+                };
+              };
+
+          default = self.packages."${system}".mobilizon;
+        }
+      );
+
+      devShells = forAllSystems (
+        system:
+        let
+          pkgs = nixpkgsFor.${system};
+          settingsFormat = pkgs.formats.elixirConf { };
+          mobilizonConfig = settingsFormat.generate "runtime.exs" {
+            ":mobilizon" = {
+              "Mobilizon.Web.Endpoint" = {
+                server = true;
+                url.host = "mobilizon.dev";
+                http = {
+                  ip = settingsFormat.lib.mkTuple [
+                    0
+                    0
+                    0
+                    0
+                    0
+                    0
+                    0
+                    1
+                  ];
+                  port = 4000;
+                };
+                secret_key_base = "2q/l1WDx3RQQy7gZ1k001//6nc66moWUEJQyGuMK/z3zPLYW6FYtIgCkUzGP0+X/";
+              };
+              "Mobilizon.Web.Auth.Guardian" = {
+                secret_key = "N8x7/tf0kInLFS2poO22g6OGPiMjSrDEhmk29nFqV35q7hQ0DtBt/cRYCsqBNp2L";
+              };
+              ":instance" = {
+                name = "Mobilizon";
+                description = "Change this to a proper description of your instance";
+                hostname = "mobilizon.dev";
+                registrations_open = true;
+                email_from = "noreply@mobilizon.dev";
+                email_reply_to = "noreply@mobilizon.dev";
+              };
+              "Mobilizon.Storage.Repo" = {
+                adapter = settingsFormat.lib.mkAtom "Ecto.Adapters.Postgres";
+                pool_size = 10;
+                username = "mobilizon";
+                database = "mobilizon";
+                socket_dir = "/var/run/postgresql";
+              };
+            };
+          };
+        in
+        {
+          default = pkgs.mkShell {
+            MIX_ENV = "dev";
+            PGUSER = "mobilizon";
+            PGDATABASE = "mobilizon";
+            buildInputs = with pkgs; [
+              elixir
+              cmake
+              imagemagick
+              nodejs
+              inotify-tools
+              (pkgs.writeShellApplication {
+                name = "build";
+                runtimeInputs = [
+                  elixir
+                  nodejs
+                ];
+                text = ''
+                  mix deps.get
+                  mix deps.nix
+                  mix deps.compile
+                  mix phx.digest
+                  npm install
+                  npm run build
+                '';
+              })
+              (pkgs.writeShellApplication {
+                name = "setup";
+                runtimeInputs = [
+                  elixir
+                  postgresql
+                ];
+                text = ''
+                  cat ${mobilizonConfig} > config/runtime.exs
+                  # We assume the database already exists
+                  sudo -u postgres psql -d mobilizon << SQL
+                    create extension if not exists postgis;
+                    create extension if not exists unaccent;
+                    create extension if not exists pg_trgm;
+                  SQL
+                  mix ecto.migrate
+                '';
+              })
+              (pkgs.writeShellApplication {
+                name = "start";
+                runtimeInputs = [ elixir ];
+                text = ''
+                  mix phx.server
+                '';
+              })
+              (pkgs.writeShellApplication {
+                name = "clean";
+                runtimeInputs = [ postgresql ];
+                text = ''
+                  rm -rf deps/ _build/ node_modules/
+                  sudo -u postgres psql  -c "DROP DATABASE mobilizon;"
+                  sudo systemctl restart postgresql.service
+                '';
+              })
+            ];
+          };
+        }
+      );
+
+      nixosModules.devSetup =
+        {
+          config,
+          lib,
+          pkgs,
+          ...
+        }:
+        let
+          cfg = config.mobilizonDevEnvironment;
+        in
+        {
+
+          options.mobilizonDevEnvironment = {
+            enable = lib.mkEnableOption (lib.mdDoc "development environment for Mobilizon");
+            user = lib.mkOption {
+              type = lib.types.str;
+              description = "Unix user that runs the backend application to connect to the database";
+            };
+          };
+
+          config = lib.mkIf cfg.enable {
+            services.postgresql = {
+              enable = true;
+              ensureDatabases = [ "mobilizon" ];
+              ensureUsers = [
+                {
+                  name = "mobilizon";
+                  ensureDBOwnership = true;
+                }
+              ];
+              extraPlugins = with config.services.postgresql.package.pkgs; [ postgis ];
+              identMap = ''
+                map-mobilizon ${cfg.user} mobilizon
+              '';
+              authentication = ''
+                local all mobilizon ident map=map-mobilizon
+              '';
+            };
+
+          };
+
+        };
+
+      overlays.default = final: prev: { inherit (self.packages."${prev.system}") mobilizon; };
+
+      checks = forAllSystems (system: {
+        inherit (self.packages.${system}) mobilizon;
+        nixosTest =
+          let
+            pkgsMobilizon = import nixpkgs {
+              inherit system;
+              overlays = [ self.overlays.default ];
+            };
+            certs = import "${nixpkgs}/nixos/tests/common/acme/server/snakeoil-certs.nix";
+            test = import ./integration-test.nix { inherit certs; };
+          in
+          pkgsMobilizon.nixosTest test;
+      });
+
+      lib = {
+        # Patch the logos in the source tree of a mobilizon-frontend package before building.
+        # Can be used to construct the argument for .overrideAttrs on mobilizon-frontend.
+        mobilizonLogosOverride =
+          icons:
+          let
+            inherit (icons) logo favicon;
+          in
+          old: {
+            postPatch =
+              ''
+                cp '${logo}' src/assets/logo.svg
+
+                magick convert \
+                  -resize x16 \
+                  -gravity center \
+                  -crop 16x16+0+0 \
+                  -flatten \
+                  -colors 256 \
+                  '${favicon}' \
+                  public/img/icons/favicon-16x16.png
+
+                magick convert \
+                  -resize x32 \
+                  -gravity center \
+                  -crop 32x32+0+0 \
+                  -flatten \
+                  -colors 256 \
+                  '${favicon}' \
+                  public/img/icons/favicon-32x32.png
+
+
+                magick convert \
+                  -resize x16 \
+                  -gravity center \
+                  -crop 16x16+0+0 \
+                  -flatten \
+                  -colors 256 \
+                  '${favicon}' \
+                  favicon-16x16.ico
+
+                magick convert \
+                  -resize x32 \
+                  -gravity center \
+                  -crop 32x32+0+0 \
+                  -flatten \
+                  -colors 256 \
+                  '${favicon}' \
+                  favicon-32x32.ico
+
+                magick convert \
+                  -resize x48 \
+                  -gravity center \
+                  -crop 48x48+0+0 \
+                  -flatten \
+                  -colors 256 \
+                  '${favicon}' \
+                  favicon-48x48.ico
+
+                magick convert \
+                  favicon-16x16.ico \
+                  favicon-32x32.ico \
+                  favicon-48x48.ico \
+                  public/favicon.ico
+
+                rm favicon-16x16.ico favicon-32x32.ico favicon-48x48.ico
+
+                cp '${favicon}' public/img/icons/favicon.svg
+                cp '${favicon}' public/img/icons/safari-pinned-tab.svg
+
+                magick convert \
+                  '${favicon}' \
+                  -gravity center \
+                  -extent 630x350 \
+                  public/img/mobilizon_default_card.png
+
+                magick convert \
+                  -background '#e08c96' \
+                  '${logo}' \
+                  -resize 366x108 \
+                  public/img/mobilizon_logo.png
+
+              ''
+              +
+                nixpkgs.lib.concatMapStrings
+                  (
+                    { resize, filename }:
+                    ''
+                      magick convert \
+                        -resize x${resize} \
+                        '${favicon}' \
+                        public/img/icons/${filename}
+
+                    ''
+                  )
+                  [
+                    {
+                      resize = "180";
+                      filename = "apple-touch-icon.png";
+                    }
+                    {
+                      resize = "180";
+                      filename = "apple-touch-icon-180x180.png";
+                    }
+                    {
+                      resize = "152";
+                      filename = "apple-touch-icon-152x152.png";
+                    }
+                    {
+                      resize = "120";
+                      filename = "apple-touch-icon-120x120.png";
+                    }
+                    {
+                      resize = "76";
+                      filename = "apple-touch-icon-76x76.png";
+                    }
+                    {
+                      resize = "60";
+                      filename = "apple-touch-icon-60x60.png";
+                    }
+                    {
+                      resize = "192";
+                      filename = "android-chrome-192x192.png";
+                    }
+                    {
+                      resize = "512";
+                      filename = "android-chrome-512x512.png";
+                    }
+                    {
+                      resize = "192";
+                      filename = "android-chrome-maskable-192x192.png";
+                    }
+                    {
+                      resize = "512";
+                      filename = "android-chrome-maskable-512x512.png";
+                    }
+                    {
+                      resize = "128";
+                      filename = "badge-128x128.png";
+                    }
+                    {
+                      resize = "144";
+                      filename = "icon-144x144.png";
+                    }
+                    {
+                      resize = "168";
+                      filename = "icon-168x168.png";
+                    }
+                    {
+                      resize = "256";
+                      filename = "icon-256x256.png";
+                    }
+                    {
+                      resize = "48";
+                      filename = "icon-48x48.png";
+                    }
+                    {
+                      resize = "72";
+                      filename = "icon-72x72.png";
+                    }
+                    {
+                      resize = "96";
+                      filename = "icon-96x96.png";
+                    }
+                    {
+                      resize = "144";
+                      filename = "msapplication-icon-144x144.png";
+                    }
+                    {
+                      resize = "150";
+                      filename = "mstile-150x150.png";
+                    }
+                    {
+                      resize = "192";
+                      filename = "android-chrome-192x192.png";
+                    }
+                    {
+                      resize = "512";
+                      filename = "android-chrome-512x512.png";
+                    }
+                    {
+                      resize = "192";
+                      filename = "android-chrome-maskable-192x192.png";
+                    }
+                    {
+                      resize = "512";
+                      filename = "android-chrome-maskable-512x512.png";
+                    }
+                  ];
+          };
+
+      };
+
+      formatter = forAllSystems (system: nixpkgsFor.${system}.nixfmt-rfc-style);
+
+    };
+}

get_union_json.ts

@@ -1,5 +1,5 @@
-const fetch = require("node-fetch");
-const fs = require("fs");
+import fetch from "node-fetch";
+import fs from "fs";
 
 fetch(`http://localhost:4000/api`, {
   method: "POST",

histoire.config.ts

@@ -0,0 +1,52 @@
+/// <reference types="@histoire/plugin-vue/components" />
+
+import { defineConfig } from "histoire";
+import { HstVue } from "@histoire/plugin-vue";
+import path from "path";
+
+export default defineConfig({
+  plugins: [HstVue()],
+  setupFile: path.resolve(__dirname, "./src/histoire.setup.ts"),
+  viteNodeInlineDeps: [/date-fns/],
+  // viteIgnorePlugins: ['vite-plugin-pwa', 'vite-plugin-pwa:build', 'vite-plugin-pwa:info'],
+  tree: {
+    groups: [
+      {
+        title: "Actors",
+        include: (file) => /^src\/components\/Account/.test(file.path),
+      },
+      {
+        title: "Address",
+        include: (file) => /^src\/components\/Address/.test(file.path),
+      },
+      {
+        title: "Comments",
+        include: (file) => /^src\/components\/Comment/.test(file.path),
+      },
+      {
+        title: "Discussion",
+        include: (file) => /^src\/components\/Discussion/.test(file.path),
+      },
+      {
+        title: "Events",
+        include: (file) => /^src\/components\/Event/.test(file.path),
+      },
+      {
+        title: "Groups",
+        include: (file) => /^src\/components\/Group/.test(file.path),
+      },
+      {
+        title: "Home",
+        include: (file) => /^src\/components\/Home/.test(file.path),
+      },
+      {
+        title: "Posts",
+        include: (file) => /^src\/components\/Post/.test(file.path),
+      },
+      {
+        title: "Others",
+        include: () => true,
+      },
+    ],
+  },
+});

integration-test.nix

@@ -0,0 +1,49 @@
+{ certs }:
+{ lib, ... }:
+let
+  mobilizonDomain = certs.domain;
+  port = 41395;
+in
+
+{
+  name = "mobilizon";
+  meta.maintainers = with lib.maintainers; [
+    minijackson
+    erictapen
+  ];
+
+  nodes.server =
+    { pkgs, ... }:
+    {
+      services.mobilizon = {
+        enable = true;
+        settings = {
+          ":mobilizon" = {
+            ":instance" = {
+              name = "Test Mobilizon";
+              hostname = mobilizonDomain;
+            };
+            "Mobilizon.Web.Endpoint".http.port = port;
+          };
+        };
+      };
+
+      services.postgresql.package = pkgs.postgresql_14;
+
+      security.pki.certificateFiles = [ certs.ca.cert ];
+
+      services.nginx.virtualHosts."${mobilizonDomain}" = {
+        enableACME = lib.mkForce false;
+        sslCertificate = certs.${mobilizonDomain}.cert;
+        sslCertificateKey = certs.${mobilizonDomain}.key;
+      };
+
+      networking.hosts."::1" = [ mobilizonDomain ];
+    };
+
+  testScript = ''
+    server.wait_for_unit("mobilizon.service")
+    server.wait_for_open_port(${toString port})
+    server.succeed("curl --fail https://${mobilizonDomain}/")
+  '';
+}

js/.gitignore

@@ -1,25 +0,0 @@
-.DS_Store
-node_modules
-/dist
-
-/tests/e2e/videos/
-/tests/e2e/screenshots/
-/coverage
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

js/.prettierignore

@@ -1,2 +0,0 @@
-src/i18n/*.json
-coverage/

js/README.md

@@ -1,41 +0,0 @@
-# mobilizon
-
-## Project setup
-
-```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-
-```
-yarn build
-```
-
-### Run your unit tests
-
-```
-yarn test:unit
-```
-
-### Run your end-to-end tests
-
-```
-yarn test:e2e
-```
-
-### Lints and fixes files
-
-```
-yarn lint
-```
-
-### Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).

js/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};

js/cypress.json

@@ -1,7 +0,0 @@
-{
-  "pluginsFile": "tests/e2e/plugins/index.js",
-  "projectId": "86dpkx",
-  "baseUrl": "http://localhost:4000",
-  "viewportWidth": 1920,
-  "viewportHeight": 1080
-}

js/jest.config.js

@@ -1,20 +0,0 @@
-module.exports = {
-  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
-  collectCoverage: true,
-  collectCoverageFrom: [
-    "**/*.{vue,ts}",
-    "!**/node_modules/**",
-    "!get_union_json.ts",
-  ],
-  coverageReporters: ["html", "text", "text-summary"],
-  reporters: ["default", "jest-junit"],
-  // The following should fix the issue with svgs and ?inline loader (see Logo.vue), but doesn't work
-  //
-  // transform: {
-  //   "^.+\\.svg$": "<rootDir>/tests/unit/svgTransform.js",
-  // },
-  // moduleNameMapper: {
-  //   "^@/(.*svg)(\\?inline)$": "<rootDir>/src/$1",
-  //   "^@/(.*)$": "<rootDir>/src/$1",
-  // },
-};

js/package.json

@@ -1,129 +0,0 @@
-{
-  "name": "mobilizon",
-  "version": "2.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "yarn run build:assets && yarn run build:pictures",
-    "test:unit": "LANG=en_US.UTF-8 LANGUAGE=en_US:en LC_ALL=en_US.UTF-8 TZ=UTC vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint",
-    "build:assets": "vue-cli-service build --report",
-    "build:pictures": "bash ./scripts/build/pictures.sh"
-  },
-  "dependencies": {
-    "@absinthe/socket": "^0.2.1",
-    "@absinthe/socket-apollo-link": "^0.2.1",
-    "@apollo/client": "^3.3.16",
-    "@mdi/font": "^6.1.95",
-    "@sentry/tracing": "^6.16.1",
-    "@sentry/vue": "^6.16.1",
-    "@tailwindcss/line-clamp": "^0.4.0",
-    "@tiptap/core": "^2.0.0-beta.41",
-    "@tiptap/extension-blockquote": "^2.0.0-beta.25",
-    "@tiptap/extension-bold": "^2.0.0-beta.24",
-    "@tiptap/extension-bubble-menu": "^2.0.0-beta.9",
-    "@tiptap/extension-bullet-list": "^2.0.0-beta.23",
-    "@tiptap/extension-document": "^2.0.0-beta.15",
-    "@tiptap/extension-dropcursor": "^2.0.0-beta.25",
-    "@tiptap/extension-gapcursor": "^2.0.0-beta.33",
-    "@tiptap/extension-heading": "^2.0.0-beta.23",
-    "@tiptap/extension-history": "^2.0.0-beta.21",
-    "@tiptap/extension-image": "^2.0.0-beta.6",
-    "@tiptap/extension-italic": "^2.0.0-beta.24",
-    "@tiptap/extension-link": "^2.0.0-beta.8",
-    "@tiptap/extension-list-item": "^2.0.0-beta.19",
-    "@tiptap/extension-mention": "^2.0.0-beta.42",
-    "@tiptap/extension-ordered-list": "^2.0.0-beta.24",
-    "@tiptap/extension-paragraph": "^2.0.0-beta.22",
-    "@tiptap/extension-strike": "^2.0.0-beta.26",
-    "@tiptap/extension-text": "^2.0.0-beta.15",
-    "@tiptap/extension-underline": "^2.0.0-beta.7",
-    "@tiptap/vue-2": "^2.0.0-beta.21",
-    "@vue-a11y/announcer": "^2.1.0",
-    "@vue-a11y/skip-to": "^2.1.2",
-    "@vue/apollo-option": "4.0.0-alpha.11",
-    "apollo-absinthe-upload-link": "^1.5.0",
-    "autoprefixer": "^10",
-    "blurhash": "^1.1.3",
-    "buefy": "^0.9.0",
-    "bulma-divider": "^0.2.0",
-    "core-js": "^3.6.4",
-    "date-fns": "^2.16.0",
-    "date-fns-tz": "^1.1.6",
-    "graphql": "^16.0.0",
-    "graphql-tag": "^2.10.3",
-    "intersection-observer": "^0.12.0",
-    "jwt-decode": "^3.1.2",
-    "leaflet": "^1.4.0",
-    "leaflet.locatecontrol": "^0.76.0",
-    "lodash": "^4.17.11",
-    "ngeohash": "^0.6.3",
-    "p-debounce": "^4.0.0",
-    "phoenix": "^1.6",
-    "postcss": "^8",
-    "register-service-worker": "^1.7.2",
-    "sanitize-html": "^2.5.3",
-    "tailwindcss": "^3",
-    "tippy.js": "^6.2.3",
-    "unfetch": "^4.2.0",
-    "v-tooltip": "^2.1.3",
-    "vue": "^2.6.11",
-    "vue-class-component": "^7.2.3",
-    "vue-i18n": "^8.14.0",
-    "vue-matomo": "^4.1.0",
-    "vue-meta": "^2.3.1",
-    "vue-plausible": "^1.3.1",
-    "vue-property-decorator": "^9.0.0",
-    "vue-router": "^3.1.6",
-    "vue-scrollto": "^2.17.1",
-    "vue2-leaflet": "^2.0.3",
-    "vuedraggable": "^2.24.3"
-  },
-  "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.0",
-    "@types/jest": "^27.0.2",
-    "@types/leaflet": "^1.5.2",
-    "@types/leaflet.locatecontrol": "^0.74",
-    "@types/lodash": "^4.14.141",
-    "@types/ngeohash": "^0.6.2",
-    "@types/phoenix": "^1.5.2",
-    "@types/prosemirror-inputrules": "^1.0.2",
-    "@types/prosemirror-model": "^1.7.2",
-    "@types/prosemirror-state": "^1.2.4",
-    "@types/prosemirror-view": "^1.11.4",
-    "@types/sanitize-html": "^2.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.3.0",
-    "@vue/cli-plugin-babel": "~5.0.4",
-    "@vue/cli-plugin-eslint": "~5.0.4",
-    "@vue/cli-plugin-pwa": "~5.0.4",
-    "@vue/cli-plugin-router": "~5.0.4",
-    "@vue/cli-plugin-typescript": "~5.0.4",
-    "@vue/cli-plugin-unit-jest": "~5.0.4",
-    "@vue/cli-service": "~5.0.4",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^1.1.0",
-    "@vue/vue2-jest": "^27.0.0-alpha.3",
-    "@vue/vue3-jest": "^27.0.0-alpha.1",
-    "eslint": "^8.2.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "flush-promises": "^1.0.2",
-    "jest": "^27.1.0",
-    "jest-junit": "^13.0.0",
-    "mock-apollo-client": "^1.1.0",
-    "prettier": "^2.2.1",
-    "prettier-eslint": "^14.0.0",
-    "sass": "^1.34.1",
-    "sass-loader": "^12.0.0",
-    "ts-jest": "27",
-    "typescript": "~4.5.5",
-    "vue-cli-plugin-tailwind": "~3.0.0",
-    "vue-i18n-extract": "^2.0.4",
-    "vue-template-compiler": "^2.6.11",
-    "webpack-cli": "^4.7.0"
-  }
-}

js/public/index.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="auto">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <meta name="server-injected-data" />
-  </head>
-
-  <body>
-    <noscript>
-      <strong
-        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
-        properly without JavaScript enabled. Please enable it to
-        continue.</strong
-      >
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

js/src/App.vue

@@ -1,278 +0,0 @@
-<template>
-  <div id="mobilizon">
-    <VueAnnouncer />
-    <VueSkipTo to="#main" :label="$t('Skip to main content')" />
-    <NavBar />
-    <div v-if="config && config.demoMode">
-      <b-message
-        class="container"
-        type="is-danger"
-        :title="$t('Warning').toLocaleUpperCase()"
-        closable
-        :aria-close-label="$t('Close')"
-      >
-        <p>
-          {{ $t("This is a demonstration site to test Mobilizon.") }}
-          <b>{{ $t("Please do not use it in any real way.") }}</b>
-          {{
-            $t(
-              "This website isn't moderated and the data that you enter will be automatically destroyed every day at 00:01 (Paris timezone)."
-            )
-          }}
-        </p>
-      </b-message>
-    </div>
-    <error v-if="error" :error="error" />
-
-    <main id="main" v-else>
-      <transition name="fade" mode="out-in">
-        <router-view ref="routerView" />
-      </transition>
-    </main>
-    <mobilizon-footer />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
-import NavBar from "./components/NavBar.vue";
-import {
-  AUTH_ACCESS_TOKEN,
-  AUTH_USER_EMAIL,
-  AUTH_USER_ID,
-  AUTH_USER_ROLE,
-} from "./constants";
-import {
-  CURRENT_USER_CLIENT,
-  UPDATE_CURRENT_USER_CLIENT,
-} from "./graphql/user";
-import Footer from "./components/Footer.vue";
-import Logo from "./components/Logo.vue";
-import { initializeCurrentActor } from "./utils/auth";
-import { CONFIG } from "./graphql/config";
-import { IConfig } from "./types/config.model";
-import { ICurrentUser } from "./types/current-user.model";
-import jwt_decode, { JwtPayload } from "jwt-decode";
-import { refreshAccessToken } from "./apollo/utils";
-import { Route } from "vue-router";
-
-@Component({
-  apollo: {
-    currentUser: CURRENT_USER_CLIENT,
-    config: CONFIG,
-  },
-  components: {
-    Logo,
-    NavBar,
-    error: () =>
-      import(/* webpackChunkName: "editor" */ "./components/Error.vue"),
-    "mobilizon-footer": Footer,
-  },
-  metaInfo() {
-    return {
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class App extends Vue {
-  config!: IConfig;
-
-  currentUser!: ICurrentUser;
-
-  error: Error | null = null;
-
-  online = true;
-
-  interval: number | undefined = undefined;
-
-  @Ref("routerView") routerView!: Vue;
-
-  async created(): Promise<void> {
-    if (await this.initializeCurrentUser()) {
-      await initializeCurrentActor(this.$apollo.provider.defaultClient);
-    }
-  }
-
-  errorCaptured(error: Error): void {
-    this.error = error;
-  }
-
-  private async initializeCurrentUser() {
-    const userId = localStorage.getItem(AUTH_USER_ID);
-    const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
-    const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
-    const role = localStorage.getItem(AUTH_USER_ROLE);
-
-    if (userId && userEmail && accessToken && role) {
-      return this.$apollo.mutate({
-        mutation: UPDATE_CURRENT_USER_CLIENT,
-        variables: {
-          id: userId,
-          email: userEmail,
-          isLoggedIn: true,
-          role,
-        },
-      });
-    }
-    return false;
-  }
-
-  mounted(): void {
-    this.online = window.navigator.onLine;
-    window.addEventListener("offline", () => {
-      this.online = false;
-      this.showOfflineNetworkWarning();
-      console.debug("offline");
-    });
-    window.addEventListener("online", () => {
-      this.online = true;
-      console.debug("online");
-    });
-    document.addEventListener("refreshApp", (event: Event) => {
-      this.$buefy.snackbar.open({
-        queue: false,
-        indefinite: true,
-        type: "is-secondary",
-        actionText: this.$t("Update app") as string,
-        cancelText: this.$t("Ignore") as string,
-        message: this.$t("A new version is available.") as string,
-        onAction: async () => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          const detail = event.detail;
-          const registration = detail as ServiceWorkerRegistration;
-          try {
-            await this.refreshApp(registration);
-            window.location.reload();
-          } catch (err) {
-            console.error(err);
-            this.$notifier.error(
-              this.$t(
-                "An error has occured while refreshing the page."
-              ) as string
-            );
-          }
-        },
-      });
-    });
-
-    this.interval = setInterval(async () => {
-      const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
-      if (accessToken) {
-        const token = jwt_decode<JwtPayload>(accessToken);
-        if (
-          token?.exp !== undefined &&
-          new Date(token.exp * 1000 - 60000) < new Date()
-        ) {
-          refreshAccessToken(this.$apollo.getClient());
-        }
-      }
-    }, 60000);
-  }
-
-  private async refreshApp(
-    registration: ServiceWorkerRegistration
-  ): Promise<any> {
-    const worker = registration.waiting;
-    if (!worker) {
-      return Promise.resolve();
-    }
-    console.debug("Doing worker.skipWaiting().");
-    return new Promise((resolve, reject) => {
-      const channel = new MessageChannel();
-
-      channel.port1.onmessage = (event) => {
-        console.debug("Done worker.skipWaiting().");
-        if (event.data.error) {
-          reject(event.data);
-        } else {
-          resolve(event.data);
-        }
-      };
-      console.debug("calling skip waiting");
-      worker?.postMessage({ type: "skip-waiting" }, [channel.port2]);
-    });
-  }
-
-  showOfflineNetworkWarning(): void {
-    this.$notifier.error(this.$t("You are offline") as string);
-  }
-
-  unmounted(): void {
-    clearInterval(this.interval);
-    this.interval = undefined;
-  }
-
-  @Watch("config")
-  async initializeStatistics(config: IConfig) {
-    if (config) {
-      const { statistics } = (await import("./services/statistics")) as {
-        statistics: (config: IConfig, environment: Record<string, any>) => void;
-      };
-      statistics(config, { router: this.$router, version: config.version });
-    }
-  }
-
-  @Watch("$route", { immediate: true })
-  updateAnnouncement(route: Route): void {
-    const pageTitle = this.extractPageTitleFromRoute(route);
-    if (pageTitle) {
-      this.$announcer.polite(
-        this.$t("Navigated to {pageTitle}", {
-          pageTitle,
-        }) as string
-      );
-    }
-    // Set the focus to the router view
-    // https://marcus.io/blog/accessible-routing-vuejs
-    setTimeout(() => {
-      const focusTarget = (
-        this.routerView?.$refs?.componentFocusTarget !== undefined
-          ? this.routerView?.$refs?.componentFocusTarget
-          : this.routerView?.$el
-      ) as HTMLElement;
-      if (focusTarget && focusTarget instanceof Element) {
-        // Make focustarget programmatically focussable
-        focusTarget.setAttribute("tabindex", "-1");
-
-        // Focus element
-        focusTarget.focus();
-
-        // Remove tabindex from focustarget.
-        // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
-        focusTarget.removeAttribute("tabindex");
-      }
-    }, 0);
-  }
-
-  extractPageTitleFromRoute(route: Route): string {
-    if (route.meta?.announcer?.message) {
-      return route.meta?.announcer?.message();
-    }
-    return document.title;
-  }
-}
-</script>
-
-<style lang="scss">
-@import "variables";
-
-/* Icons */
-$mdi-font-path: "~@mdi/font/fonts";
-@import "~@mdi/font/scss/materialdesignicons";
-@import "common";
-
-#mobilizon {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-
-  main {
-    flex-grow: 1;
-  }
-}
-
-.vue-skip-to {
-  z-index: 40;
-}
-</style>

js/src/assets/tailwind.css

@@ -1,5 +0,0 @@
-@tailwind base;
-
-@tailwind components;
-
-@tailwind utilities;

js/src/common.scss

@@ -1,188 +0,0 @@
-@use "@/styles/_mixins" as *;
-@import "variables.scss";
-
-@import "~bulma";
-@import "~bulma-divider";
-@import "~buefy/src/scss/buefy";
-@import "styles/vue-announcer.scss";
-@import "styles/vue-skip-to.scss";
-
-a.out,
-.content a,
-.ProseMirror a {
-  text-decoration: underline;
-  text-decoration-color: #ed8d07;
-  text-decoration-thickness: 2px;
-}
-
-.section {
-  padding: 1rem 1% 4rem;
-}
-
-$color-black: #000;
-
-.mention {
-  background: rgba($color-black, 0.1);
-  font-size: 0.9rem;
-  font-weight: bold;
-  border-radius: 5px;
-  padding: 0.2rem;
-  white-space: nowrap;
-  @include margin-right(0.2rem);
-}
-
-.mention-suggestion {
-  color: rgba($color-black, 0.6);
-}
-
-.mention .mention {
-  background: initial;
-  @include margin-right(0);
-}
-
-.select select {
-  border-color: $borders;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-body {
-  background: $body-background-color;
-  font-family: BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Segoe UI",
-    "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-  overflow-x: hidden;
-}
-
-#mobilizon > .container > .message {
-  margin: 1rem auto auto;
-  .message-header {
-    button.delete {
-      background: #4a4a4a;
-    }
-  }
-}
-
-.module-description {
-  margin-bottom: 2rem;
-  color: $violet-1;
-}
-
-$list-background-color: $scheme-main !default;
-$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1),
-  0 0 0 1px rgba($scheme-invert, 0.1) !default;
-$list-radius: $radius !default;
-
-$list-item-border: 1px solid $border !default;
-$list-item-color: $text !default;
-$list-item-active-background-color: $link !default;
-$list-item-active-color: $link-invert !default;
-$list-item-hover-background-color: $background !default;
-
-.list-item {
-  display: block;
-  padding: 0.5em 1em;
-  &:not(a) {
-    color: $list-item-color;
-  }
-  &:first-child {
-    border-top-left-radius: $list-radius;
-    border-top-right-radius: $list-radius;
-  }
-  &:last-child {
-    border-bottom-left-radius: $list-radius;
-    border-bottom-right-radius: $list-radius;
-  }
-  &:not(:last-child) {
-    border-bottom: $list-item-border;
-  }
-  &.is-active {
-    background-color: $list-item-active-background-color;
-    color: $list-item-active-color;
-  }
-}
-
-a.list-item {
-  background-color: $list-item-hover-background-color;
-  cursor: pointer;
-}
-
-.setting-title {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-
-  h2 {
-    display: inline;
-    background: $secondary;
-    padding: 2px 7.5px;
-    text-transform: uppercase;
-    font-size: 1.25rem;
-  }
-}
-
-@mixin focus() {
-  &:focus {
-    border: 2px solid black;
-    border-radius: 5px;
-  }
-}
-
-ul.menu-list > li,
-p {
-  @include focus;
-}
-.navbar-item {
-  @include focus;
-}
-
-.navbar-dropdown span.navbar-item:hover {
-  background-color: whitesmoke;
-  color: #0a0a0a;
-}
-
-/**
- * Bulma/Buefy fixes
- */
-.icon {
-  vertical-align: middle;
-}
-
-.tags .tag:not(:last-child) {
-  margin-right: unset;
-  @include margin-right(0.5rem);
-}
-
-.button .icon {
-  &:first-child:not(:last-child) {
-    @include margin-left(calc(-0.5em - 1px));
-    @include margin-right(0.25em);
-  }
-  &:last-child:not(:first-child) {
-    @include margin-right(calc(-0.5em - 1px));
-    @include margin-left(0.25em);
-  }
-}
-
-.buttons .button:not(:last-child):not(.is-fullwidth) {
-  margin-right: unset;
-  @include margin-right(0.5rem);
-}
-
-.breadcrumb li:first-child a {
-  padding-left: unset;
-  @include padding-left(0);
-  @include padding-right(0.75em);
-}
-.media-left {
-  @include margin-left(1rem);
-}
-a.dropdown-item {
-  @include padding-right(3rem);
-}

js/src/components/About/InstanceContactLink.vue

@@ -1,52 +0,0 @@
-<template>
-  <p>
-    <a dir="auto" :title="contact" v-if="configLink" :href="configLink.uri">{{
-      configLink.text
-    }}</a>
-    <span dir="auto" v-else-if="contact">{{ contact }}</span>
-    <span v-else>{{ $t("contact uninformed") }}</span>
-  </p>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class InstanceContactLink extends Vue {
-  @Prop({ required: true, type: String }) contact!: string;
-
-  get configLink(): { uri: string; text: string } | null {
-    if (!this.contact) return null;
-    if (this.isContactEmail) {
-      return {
-        uri: `mailto:${this.contact}`,
-        text: this.contact,
-      };
-    }
-    if (this.isContactURL) {
-      return {
-        uri: this.contact,
-        text:
-          InstanceContactLink.urlToHostname(this.contact) ||
-          (this.$t("Contact") as string),
-      };
-    }
-    return null;
-  }
-
-  get isContactEmail(): boolean {
-    return this.contact.includes("@");
-  }
-
-  get isContactURL(): boolean {
-    return this.contact.match(/^https?:\/\//g) !== null;
-  }
-
-  static urlToHostname(url: string): string | null {
-    try {
-      return new URL(url).hostname;
-    } catch (e) {
-      return null;
-    }
-  }
-}
-</script>

js/src/components/Account/ActorInline.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="inline-flex items-start">
-    <div class="flex-none mr-2">
-      <figure class="image is-48x48" v-if="actor.avatar">
-        <img class="is-rounded" :src="actor.avatar.url" alt="" />
-      </figure>
-      <b-icon v-else size="is-large" icon="account-circle" />
-    </div>
-
-    <div class="flex-auto">
-      <p class="text-base line-clamp-3 md:line-clamp-2 max-w-xl">
-        {{ displayName(actor) }}
-      </p>
-      <p class="text-sm text-gray-500 truncate">
-        @{{ usernameWithDomain(actor) }}
-      </p>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-import { displayName, IActor, usernameWithDomain } from "../../types/actor";
-
-@Component
-export default class ActorInline extends Vue {
-  @Prop({ required: true, type: Object }) actor!: IActor;
-
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-div.actor-inline {
-  align-items: flex-start;
-  display: inline-flex;
-  text-align: inherit;
-  align-items: top;
-
-  div.actor-avatar {
-    flex-basis: auto;
-    flex-grow: 0;
-    flex-shrink: 0;
-    @include margin-right(0.5rem);
-  }
-  div.actor-name {
-    flex-basis: auto;
-    flex-grow: 1;
-    flex-shrink: 1;
-    text-align: inherit;
-  }
-}
-</style>

js/src/components/Account/Identities.vue

@@ -1,90 +0,0 @@
-<template>
-  <section>
-    <h1 class="title">
-      {{ $t("My identities") }}
-    </h1>
-
-    <ul class="identities">
-      <li v-for="identity in identities" :key="identity.id">
-        <router-link
-          :to="{
-            name: 'UpdateIdentity',
-            params: { identityName: identity.preferredUsername },
-          }"
-          class="media identity"
-          v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }"
-        >
-          <div class="media-left">
-            <figure class="image is-48x48" v-if="identity.avatar">
-              <img class="is-rounded" :src="identity.avatar.url" />
-            </figure>
-          </div>
-
-          <div class="media-content">
-            {{ identity.displayName() }}
-          </div>
-        </router-link>
-      </li>
-    </ul>
-
-    <router-link
-      :to="{ name: 'CreateIdentity' }"
-      class="button create-identity is-primary"
-    >
-      {{ $t("Create a new identity") }}
-    </router-link>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { IDENTITIES } from "../../graphql/actor";
-import { IPerson, Person } from "../../types/actor";
-
-@Component({
-  apollo: {
-    identities: {
-      query: IDENTITIES,
-
-      update(result) {
-        return result.identities.map((i: IPerson) => new Person(i));
-      },
-    },
-  },
-})
-export default class Identities extends Vue {
-  @Prop({ type: String }) currentIdentityName!: string;
-
-  identities: Person[] = [];
-
-  errors: string[] = [];
-
-  isCurrentIdentity(identity: IPerson): boolean {
-    return identity.preferredUsername === this.currentIdentityName;
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.identities {
-  border-right: 1px solid grey;
-
-  padding: 15px 0;
-}
-
-.media.identity {
-  align-items: center;
-  font-size: 1.3rem;
-  padding-bottom: 0;
-  margin-bottom: 15px;
-  color: #000;
-
-  &.is-current-identity {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-}
-
-.title {
-  margin-bottom: 30px;
-}
-</style>

js/src/components/Account/PopoverActorCard.vue

@@ -1,44 +0,0 @@
-<template>
-  <v-popover
-    offset="16"
-    trigger="hover"
-    class="popover"
-    :class="{ inline, clickable: actor && actor.type === ActorType.GROUP }"
-  >
-    <slot></slot>
-    <template slot="popover">
-      <actor-card :full="true" :actor="actor" :popover="true" />
-    </template>
-  </v-popover>
-</template>
-<script lang="ts">
-import { ActorType } from "@/types/enums";
-import { Component, Vue, Prop } from "vue-property-decorator";
-import { IActor } from "../../types/actor";
-import ActorCard from "./ActorCard.vue";
-
-@Component({
-  components: {
-    ActorCard,
-  },
-})
-export default class PopoverActorCard extends Vue {
-  @Prop({ required: true, type: Object }) actor!: IActor;
-
-  @Prop({ required: false, type: Boolean, default: false }) inline!: boolean;
-
-  ActorType = ActorType;
-}
-</script>
-
-<style lang="scss" scoped>
-.inline {
-  display: inline;
-}
-.popover {
-  cursor: default;
-}
-.clickable {
-  cursor: pointer;
-}
-</style>

js/src/components/Account/ProfileOnboarding.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="section container">
-    <div class="setting-title">
-      <h2>{{ $t("Profiles and federation") }}</h2>
-    </div>
-    <div>
-      <p class="content">
-        {{
-          $t(
-            "Mobilizon uses a system of profiles to compartiment your activities. You will be able to create as many profiles as you want."
-          )
-        }}
-      </p>
-      <hr role="presentation" />
-      <p class="content">
-        <span>
-          {{
-            $t(
-              "Mobilizon is a federated software, meaning you can interact - depending on your admin's federation settings - with content from other instances, such as joining groups or events that were created elsewhere."
-            )
-          }}
-        </span>
-        <span
-          v-if="config"
-          v-html="
-            $t(
-              'This instance, <b>{instanceName} ({domain})</b>, hosts your profile, so remember its name.',
-              {
-                domain,
-                instanceName: config.name,
-              }
-            )
-          "
-        />
-      </p>
-      <hr role="presentation" />
-      <p class="content">
-        {{
-          $t(
-            "If you are being asked for your federated indentity, it's composed of your username and your instance. For instance, the federated identity for your first profile is:"
-          )
-        }}
-      </p>
-      <div class="has-text-centered">
-        <code>{{ `${currentActor.preferredUsername}@${domain}` }}</code>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import { CONFIG } from "@/graphql/config";
-import { IPerson } from "@/types/actor";
-import { IConfig } from "@/types/config.model";
-import { Component, Vue } from "vue-property-decorator";
-
-@Component({
-  apollo: {
-    config: CONFIG,
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-})
-export default class ProfileOnboarding extends Vue {
-  config!: IConfig;
-
-  currentActor!: IPerson;
-
-  domain = window.location.hostname;
-}
-</script>

js/src/components/Activity/DiscussionActivityItem.vue

@@ -1,119 +0,0 @@
-<template>
-  <div class="activity-item">
-    <b-icon :icon="'chat'" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <router-link
-          v-if="activity.object"
-          slot="discussion"
-          :to="{
-            name: RouteName.DISCUSSION,
-            params: { slug: subjectParams.discussion_slug },
-          }"
-          >{{ subjectParams.discussion_title }}</router-link
-        >
-        <b v-else slot="discussion">{{ subjectParams.discussion_title }}</b>
-        <router-link
-          v-if="activity.object && subjectParams.old_discussion_title"
-          slot="old_discussion"
-          :to="{
-            name: RouteName.DISCUSSION,
-            params: { slug: subjectParams.discussion_slug },
-          }"
-          >{{ subjectParams.old_discussion_title }}</router-link
-        >
-        <b
-          v-else-if="subjectParams.old_discussion_title"
-          slot="old_discussion"
-          >{{ subjectParams.old_discussion_title }}</b
-        >
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        ></i18n
-      >
-      <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
-      }}</small>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { usernameWithDomain } from "@/types/actor";
-import { ActivityDiscussionSubject } from "@/types/enums";
-import { Component } from "vue-property-decorator";
-import RouteName from "../../router/name";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
-import { mixins } from "vue-class-component";
-
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class DiscussionActivityItem extends mixins(ActivityMixin) {
-  usernameWithDomain = usernameWithDomain;
-  RouteName = RouteName;
-  ActivityDiscussionSubject = ActivityDiscussionSubject;
-
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityDiscussionSubject.DISCUSSION_CREATED:
-        if (this.isAuthorCurrentActor) {
-          return "You created the discussion {discussion}.";
-        }
-        return "{profile} created the discussion {discussion}.";
-      case ActivityDiscussionSubject.DISCUSSION_REPLIED:
-        if (this.isAuthorCurrentActor) {
-          return "You replied to the discussion {discussion}.";
-        }
-        return "{profile} replied to the discussion {discussion}.";
-      case ActivityDiscussionSubject.DISCUSSION_RENAMED:
-        if (this.isAuthorCurrentActor) {
-          return "You renamed the discussion from {old_discussion} to {discussion}.";
-        }
-        return "{profile} renamed the discussion from {old_discussion} to {discussion}.";
-      case ActivityDiscussionSubject.DISCUSSION_ARCHIVED:
-        if (this.isAuthorCurrentActor) {
-          return "You archived the discussion {discussion}.";
-        }
-        return "{profile} archived the discussion {discussion}.";
-      case ActivityDiscussionSubject.DISCUSSION_DELETED:
-        if (this.isAuthorCurrentActor) {
-          return "You deleted the discussion {discussion}.";
-        }
-        return "{profile} deleted the discussion {discussion}.";
-      default:
-        return undefined;
-    }
-  }
-
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityDiscussionSubject.DISCUSSION_CREATED:
-      case ActivityDiscussionSubject.DISCUSSION_REPLIED:
-        return "is-success";
-      case ActivityDiscussionSubject.DISCUSSION_RENAMED:
-      case ActivityDiscussionSubject.DISCUSSION_ARCHIVED:
-        return "is-grey";
-      case ActivityDiscussionSubject.DISCUSSION_DELETED:
-        return "is-danger";
-      default:
-        return undefined;
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import "./activity.scss";
-</style>

js/src/components/Activity/EventActivityItem.vue

@@ -1,108 +0,0 @@
-<template>
-  <div class="activity-item">
-    <b-icon :icon="'calendar'" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <router-link
-          slot="event"
-          v-if="activity.object"
-          :to="{
-            name: RouteName.EVENT,
-            params: { uuid: subjectParams.event_uuid },
-          }"
-          >{{ subjectParams.event_title }}</router-link
-        >
-        <b v-else slot="event">{{ subjectParams.event_title }}</b>
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        ></i18n
-      >
-      <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
-      }}</small>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { usernameWithDomain } from "@/types/actor";
-import {
-  ActivityEventCommentSubject,
-  ActivityEventSubject,
-} from "@/types/enums";
-import { mixins } from "vue-class-component";
-import { Component } from "vue-property-decorator";
-import RouteName from "../../router/name";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
-
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class EventActivityItem extends mixins(ActivityMixin) {
-  ActivityEventSubject = ActivityEventSubject;
-  usernameWithDomain = usernameWithDomain;
-  RouteName = RouteName;
-
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityEventSubject.EVENT_CREATED:
-        if (this.isAuthorCurrentActor) {
-          return "You created the event {event}.";
-        }
-        return "The event {event} was created by {profile}.";
-      case ActivityEventSubject.EVENT_UPDATED:
-        if (this.isAuthorCurrentActor) {
-          return "You updated the event {event}.";
-        }
-        return "The event {event} was updated by {profile}.";
-      case ActivityEventSubject.EVENT_DELETED:
-        if (this.isAuthorCurrentActor) {
-          return "You deleted the event {event}.";
-        }
-        return "The event {event} was deleted by {profile}.";
-      case ActivityEventCommentSubject.COMMENT_POSTED:
-        if (this.subjectParams.comment_reply_to) {
-          if (this.isAuthorCurrentActor) {
-            return "You replied to a comment on the event {event}.";
-          }
-          return "{profile} replied to a comment on the event {event}.";
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You posted a comment on the event {event}.";
-        }
-        return "{profile} posted a comment on the event {event}.";
-      default:
-        return undefined;
-    }
-  }
-
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityEventSubject.EVENT_CREATED:
-      case ActivityEventCommentSubject.COMMENT_POSTED:
-        return "is-success";
-      case ActivityEventSubject.EVENT_UPDATED:
-        return "is-grey";
-      case ActivityEventSubject.EVENT_DELETED:
-        return "is-danger";
-      default:
-        return undefined;
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import "./activity.scss";
-</style>

js/src/components/Activity/GroupActivityItem.vue

@@ -1,190 +0,0 @@
-<template>
-  <div class="activity-item">
-    <b-icon :icon="'cog'" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <router-link
-          v-if="activity.object"
-          slot="group"
-          :to="{
-            name: RouteName.GROUP,
-            params: {
-              preferredUsername: subjectParams.group_federated_username,
-            },
-          }"
-          >{{ subjectParams.group_name }}</router-link
-        >
-        <b v-else slot="post">{{ subjectParams.group_name }}</b>
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        ></i18n
-      >
-      <i18n
-        :path="detail"
-        v-for="detail in details"
-        :key="detail"
-        tag="p"
-        class="has-text-grey-dark"
-      >
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        >
-        <router-link
-          v-if="activity.object"
-          slot="group"
-          :to="{
-            name: RouteName.GROUP,
-            params: { preferredUsername: usernameWithDomain(activity.object) },
-          }"
-          >{{ subjectParams.group_name }}</router-link
-        >
-        <b v-else slot="post">{{ subjectParams.group_name }}</b>
-        <b v-if="subjectParams.old_group_name" slot="old_group_name">{{
-          subjectParams.old_group_name
-        }}</b>
-      </i18n>
-      <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
-      }}</small>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { usernameWithDomain } from "@/types/actor";
-import { ActivityGroupSubject, GroupVisibility, Openness } from "@/types/enums";
-import { Component } from "vue-property-decorator";
-import RouteName from "../../router/name";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
-import { mixins } from "vue-class-component";
-
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class GroupActivityItem extends mixins(ActivityMixin) {
-  usernameWithDomain = usernameWithDomain;
-  RouteName = RouteName;
-  ActivityGroupSubject = ActivityGroupSubject;
-
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityGroupSubject.GROUP_CREATED:
-        if (this.isAuthorCurrentActor) {
-          return "You created the group {group}.";
-        }
-        return "{profile} created the group {group}.";
-      case ActivityGroupSubject.GROUP_UPDATED:
-        if (this.isAuthorCurrentActor) {
-          return "You updated the group {group}.";
-        }
-        return "{profile} updated the group {group}.";
-      default:
-        return undefined;
-    }
-  }
-
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityGroupSubject.GROUP_CREATED:
-        return "is-success";
-      case ActivityGroupSubject.GROUP_UPDATED:
-        return "is-grey";
-      default:
-        return undefined;
-    }
-  }
-
-  get details(): string[] {
-    let details = [];
-    const changes = this.subjectParams.group_changes.split(",");
-    if (changes.includes("name") && this.subjectParams.old_group_name) {
-      details.push("{old_group_name} was renamed to {group}.");
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("visibility") && this.activity.object.visibility) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      switch (this.activity.object.visibility) {
-        case GroupVisibility.PRIVATE:
-          details.push("Visibility was set to private.");
-          break;
-        case GroupVisibility.PUBLIC:
-          details.push("Visibility was set to public.");
-          break;
-        default:
-          details.push("Visibility was set to an unknown value.");
-          break;
-      }
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("openness") && this.activity.object.openness) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      switch (this.activity.object.openness) {
-        case Openness.INVITE_ONLY:
-          details.push("The group can now only be joined with an invite.");
-          break;
-        case Openness.MODERATED:
-          details.push(
-            "The group can now be joined by anyone, but new members need to be approved by an administrator."
-          );
-          break;
-        case Openness.OPEN:
-          details.push("The group can now be joined by anyone.");
-          break;
-        default:
-          details.push("Unknown value for the openness setting.");
-          break;
-      }
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("address") && this.activity.object.physicalAddress) {
-      details.push("The group's physical address was changed.");
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("avatar") && this.activity.object.avatar) {
-      details.push("The group's avatar was changed.");
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("banner") && this.activity.object.banner) {
-      details.push("The group's banner was changed.");
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("summary") && this.activity.object.summary) {
-      details.push("The group's short description was changed.");
-    }
-    return details;
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import "./activity.scss";
-</style>

js/src/components/Activity/MemberActivityItem.vue

@@ -1,237 +0,0 @@
-<template>
-  <div class="activity-item">
-    <b-icon :icon="icon" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <popover-actor-card
-          v-if="activity.object"
-          :actor="activity.object.actor"
-          :inline="true"
-          slot="member"
-        >
-          <b> {{ displayName(activity.object.actor) }}</b></popover-actor-card
-        >
-        <b slot="member" v-else>{{
-          subjectParams.member_actor_federated_username
-        }}</b>
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b> {{ displayName(activity.author) }}</b></popover-actor-card
-        ></i18n
-      >
-      <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
-      }}</small>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { displayName } from "@/types/actor";
-import { ActivityMemberSubject, MemberRole } from "@/types/enums";
-import { Component } from "vue-property-decorator";
-import RouteName from "../../router/name";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
-import { mixins } from "vue-class-component";
-
-export const MEMBER_ROLE_VALUE: Record<string, number> = {
-  [MemberRole.MEMBER]: 20,
-  [MemberRole.MODERATOR]: 50,
-  [MemberRole.ADMINISTRATOR]: 90,
-  [MemberRole.CREATOR]: 100,
-};
-
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class MemberActivityItem extends mixins(ActivityMixin) {
-  displayName = displayName;
-  RouteName = RouteName;
-  ActivityMemberSubject = ActivityMemberSubject;
-
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityMemberSubject.MEMBER_REQUEST:
-        if (this.isAuthorCurrentActor) {
-          return "You requested to join the group.";
-        }
-        return "{member} requested to join the group.";
-      case ActivityMemberSubject.MEMBER_INVITED:
-        if (this.isAuthorCurrentActor) {
-          return "You invited {member}.";
-        }
-        return "{member} was invited by {profile}.";
-      case ActivityMemberSubject.MEMBER_ADDED:
-        if (this.isAuthorCurrentActor) {
-          return "You added the member {member}.";
-        }
-        return "{profile} added the member {member}.";
-      case ActivityMemberSubject.MEMBER_APPROVED:
-        if (this.isAuthorCurrentActor) {
-          return "You approved {member}'s membership.";
-        }
-        if (this.isObjectMemberCurrentActor) {
-          return "Your membership was approved by {profile}.";
-        }
-        return "{profile} approved {member}'s membership.";
-      case ActivityMemberSubject.MEMBER_JOINED:
-        return "{member} joined the group.";
-      case ActivityMemberSubject.MEMBER_UPDATED:
-        if (this.subjectParams.member_role && this.subjectParams.old_role) {
-          return this.roleUpdate;
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You updated the member {member}.";
-        }
-        return "{profile} updated the member {member}.";
-      case ActivityMemberSubject.MEMBER_REMOVED:
-        if (this.subjectParams.member_role === MemberRole.NOT_APPROVED) {
-          if (this.isAuthorCurrentActor) {
-            return "You rejected {member}'s membership request.";
-          }
-          return "{profile} rejected {member}'s membership request.";
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You excluded member {member}.";
-        }
-        return "{profile} excluded member {member}.";
-      case ActivityMemberSubject.MEMBER_QUIT:
-        return "{profile} quit the group.";
-      case ActivityMemberSubject.MEMBER_REJECTED_INVITATION:
-        return "{member} rejected the invitation to join the group.";
-      case ActivityMemberSubject.MEMBER_ACCEPTED_INVITATION:
-        if (this.isAuthorCurrentActor) {
-          return "You accepted the invitation to join the group.";
-        }
-        return "{member} accepted the invitation to join the group.";
-      default:
-        return undefined;
-    }
-  }
-
-  get icon(): string {
-    switch (this.activity.subject) {
-      case ActivityMemberSubject.MEMBER_REQUEST:
-      case ActivityMemberSubject.MEMBER_ADDED:
-      case ActivityMemberSubject.MEMBER_INVITED:
-      case ActivityMemberSubject.MEMBER_ACCEPTED_INVITATION:
-        return "account-multiple-plus";
-      case ActivityMemberSubject.MEMBER_REMOVED:
-      case ActivityMemberSubject.MEMBER_REJECTED_INVITATION:
-      case ActivityMemberSubject.MEMBER_QUIT:
-        return "account-multiple-minus";
-      case ActivityMemberSubject.MEMBER_UPDATED:
-      default:
-        return "account-multiple";
-    }
-  }
-
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityMemberSubject.MEMBER_ADDED:
-      case ActivityMemberSubject.MEMBER_INVITED:
-      case ActivityMemberSubject.MEMBER_JOINED:
-      case ActivityMemberSubject.MEMBER_APPROVED:
-      case ActivityMemberSubject.MEMBER_ACCEPTED_INVITATION:
-        return "is-success";
-      case ActivityMemberSubject.MEMBER_REQUEST:
-      case ActivityMemberSubject.MEMBER_UPDATED:
-        return "is-grey";
-      case ActivityMemberSubject.MEMBER_REMOVED:
-      case ActivityMemberSubject.MEMBER_REJECTED_INVITATION:
-      case ActivityMemberSubject.MEMBER_QUIT:
-        return "is-danger";
-      default:
-        return undefined;
-    }
-  }
-
-  get roleUpdate(): string | undefined {
-    if (
-      Object.keys(MEMBER_ROLE_VALUE).includes(this.subjectParams.member_role) &&
-      Object.keys(MEMBER_ROLE_VALUE).includes(this.subjectParams.old_role)
-    ) {
-      if (
-        MEMBER_ROLE_VALUE[this.subjectParams.member_role] >
-        MEMBER_ROLE_VALUE[this.subjectParams.old_role]
-      ) {
-        switch (this.subjectParams.member_role) {
-          case MemberRole.MODERATOR:
-            if (this.isAuthorCurrentActor) {
-              return "You promoted {member} to moderator.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were promoted to moderator by {profile}.";
-            }
-            return "{profile} promoted {member} to moderator.";
-          case MemberRole.ADMINISTRATOR:
-            if (this.isAuthorCurrentActor) {
-              return "You promoted {member} to administrator.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were promoted to administrator by {profile}.";
-            }
-            return "{profile} promoted {member} to administrator.";
-          default:
-            if (this.isAuthorCurrentActor) {
-              return "You promoted the member {member} to an unknown role.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were promoted to an unknown role by {profile}.";
-            }
-            return "{profile} promoted {member} to an unknown role.";
-        }
-      } else {
-        switch (this.subjectParams.member_role) {
-          case MemberRole.MODERATOR:
-            if (this.isAuthorCurrentActor) {
-              return "You demoted {member} to moderator.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were demoted to moderator by {profile}.";
-            }
-            return "{profile} demoted {member} to moderator.";
-          case MemberRole.MEMBER:
-            if (this.isAuthorCurrentActor) {
-              return "You demoted {member} to simple member.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were demoted to simple member by {profile}.";
-            }
-            return "{profile} demoted {member} to simple member.";
-          default:
-            if (this.isAuthorCurrentActor) {
-              return "You demoted the member {member} to an unknown role.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were demoted to an unknown role by {profile}.";
-            }
-            return "{profile} demoted {member} to an unknown role.";
-        }
-      }
-    } else {
-      if (this.isAuthorCurrentActor) {
-        return "You updated the member {member}.";
-      }
-      return "{profile} updated the member {member}";
-    }
-  }
-
-  get isObjectMemberCurrentActor(): boolean {
-    return (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      this.activity?.object?.actor?.id === this.currentActor?.id &&
-      this.currentActor?.id !== undefined
-    );
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import "./activity.scss";
-</style>

js/src/components/Activity/PostActivityItem.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="activity-item">
-    <b-icon :icon="'bullhorn'" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <router-link
-          v-if="activity.object"
-          slot="post"
-          :to="{
-            name: RouteName.POST,
-            params: { slug: subjectParams.post_slug },
-          }"
-          >{{ subjectParams.post_title }}</router-link
-        >
-        <b v-else slot="post">{{ subjectParams.post_title }}</b>
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        ></i18n
-      >
-      <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
-      }}</small>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { usernameWithDomain } from "@/types/actor";
-import { ActivityPostSubject } from "@/types/enums";
-import { Component } from "vue-property-decorator";
-import RouteName from "../../router/name";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
-import { mixins } from "vue-class-component";
-
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class PostActivityItem extends mixins(ActivityMixin) {
-  usernameWithDomain = usernameWithDomain;
-  RouteName = RouteName;
-  ActivityPostSubject = ActivityPostSubject;
-
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityPostSubject.POST_CREATED:
-        if (this.isAuthorCurrentActor) {
-          return "You created the post {post}.";
-        }
-        return "The post {post} was created by {profile}.";
-      case ActivityPostSubject.POST_UPDATED:
-        if (this.isAuthorCurrentActor) {
-          return "You updated the post {post}.";
-        }
-        return "The post {post} was updated by {profile}.";
-      case ActivityPostSubject.POST_DELETED:
-        if (this.isAuthorCurrentActor) {
-          return "You deleted the post {post}.";
-        }
-        return "The post {post} was deleted by {profile}.";
-      default:
-        return undefined;
-    }
-  }
-
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityPostSubject.POST_CREATED:
-        return "is-success";
-      case ActivityPostSubject.POST_UPDATED:
-        return "is-grey";
-      case ActivityPostSubject.POST_DELETED:
-        return "is-danger";
-      default:
-        return undefined;
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import "./activity.scss";
-</style>

js/src/components/Activity/ResourceActivityItem.vue

@@ -1,190 +0,0 @@
-<template>
-  <div class="activity-item">
-    <b-icon :icon="'link'" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <router-link v-if="activity.object" slot="resource" :to="path">{{
-          subjectParams.resource_title
-        }}</router-link>
-        <b v-else slot="resource">{{ subjectParams.resource_title }}</b>
-        <router-link v-if="activity.object" slot="new_path" :to="path">{{
-          parentDirectory
-        }}</router-link>
-        <b v-else slot="new_path">{{ parentDirectory }}</b>
-        <router-link
-          v-if="activity.object && subjectParams.old_resource_title"
-          slot="old_resource_title"
-          :to="path"
-          >{{ subjectParams.old_resource_title }}</router-link
-        >
-        <b
-          v-else-if="subjectParams.old_resource_title"
-          slot="old_resource_title"
-          >{{ subjectParams.old_resource_title }}</b
-        >
-
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        ></i18n
-      >
-      <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
-      }}</small>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { usernameWithDomain } from "@/types/actor";
-import { ActivityResourceSubject } from "@/types/enums";
-import { Component } from "vue-property-decorator";
-import RouteName from "../../router/name";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
-import { mixins } from "vue-class-component";
-import { Location } from "vue-router";
-
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class ResourceActivityItem extends mixins(ActivityMixin) {
-  usernameWithDomain = usernameWithDomain;
-  RouteName = RouteName;
-
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityResourceSubject.RESOURCE_CREATED:
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (this.activity?.object?.type === "folder") {
-          if (this.isAuthorCurrentActor) {
-            return "You created the folder {resource}.";
-          }
-          return "{profile} created the folder {resource}.";
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You created the resource {resource}.";
-        }
-        return "{profile} created the resource {resource}.";
-      case ActivityResourceSubject.RESOURCE_MOVED:
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (this.activity?.object?.type === "folder") {
-          if (this.parentDirectory === null) {
-            if (this.isAuthorCurrentActor) {
-              return "You moved the folder {resource} to the root folder.";
-            }
-            return "{profile} moved the folder {resource} to the root folder.";
-          }
-          if (this.isAuthorCurrentActor) {
-            return "You moved the folder {resource} into {new_path}.";
-          }
-          return "{profile} moved the folder {resource} into {new_path}.";
-        }
-        if (this.parentDirectory === null) {
-          if (this.isAuthorCurrentActor) {
-            return "You moved the resource {resource} to the root folder.";
-          }
-          return "{profile} moved the resource {resource} to the root folder.";
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You moved the resource {resource} into {new_path}.";
-        }
-        return "{profile} moved the resource {resource} into {new_path}.";
-      case ActivityResourceSubject.RESOURCE_UPDATED:
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (this.activity?.object?.type === "folder") {
-          if (this.isAuthorCurrentActor) {
-            return "You renamed the folder from {old_resource_title} to {resource}.";
-          }
-          return "{profile} renamed the folder from {old_resource_title} to {resource}.";
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You renamed the resource from {old_resource_title} to {resource}.";
-        }
-        return "{profile} renamed the resource from {old_resource_title} to {resource}.";
-      case ActivityResourceSubject.RESOURCE_DELETED:
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (this.activity?.object?.type === "folder") {
-          if (this.isAuthorCurrentActor) {
-            return "You deleted the folder {resource}.";
-          }
-          return "{profile} deleted the folder {resource}.";
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You deleted the resource {resource}.";
-        }
-        return "{profile} deleted the resource {resource}.";
-      default:
-        return undefined;
-    }
-  }
-
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityResourceSubject.RESOURCE_CREATED:
-        return "is-success";
-      case ActivityResourceSubject.RESOURCE_MOVED:
-      case ActivityResourceSubject.RESOURCE_UPDATED:
-        return "is-grey";
-      case ActivityResourceSubject.RESOURCE_DELETED:
-        return "is-danger";
-      default:
-        return undefined;
-    }
-  }
-
-  get path(): Location {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    let path = this.parentPath(this.activity?.object?.path);
-    if (path === "") {
-      return {
-        name: RouteName.RESOURCE_FOLDER_ROOT,
-        params: {
-          preferredUsername: usernameWithDomain(this.activity.group),
-        },
-      };
-    }
-    return {
-      name: RouteName.RESOURCE_FOLDER,
-      params: {
-        path,
-        preferredUsername: usernameWithDomain(this.activity.group),
-      },
-    };
-  }
-
-  get parentDirectory(): string | undefined | null {
-    if (this.subjectParams.resource_path) {
-      const parentPath = this.parentPath(this.subjectParams.resource_path);
-      const directory = parentPath.split("/");
-      const res = directory.pop();
-      res === "" ? null : res;
-    }
-    return null;
-  }
-
-  parentPath(parent: string): string {
-    let path = parent.split("/");
-    path.pop();
-    return path.join("/").replace(/^\//, "");
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import "./activity.scss";
-</style>

js/src/components/Address/AddressInfo.vue

@@ -1,125 +0,0 @@
-<template>
-  <address dir="auto">
-    <b-icon
-      v-if="showIcon"
-      :icon="address.poiInfos.poiIcon.icon"
-      size="is-medium"
-      class="icon"
-    />
-    <p>
-      <span
-        class="addressDescription"
-        :title="address.poiInfos.name"
-        v-if="address.poiInfos.name"
-      >
-        {{ address.poiInfos.name }}
-      </span>
-      <br v-if="address.poiInfos.name" />
-      <span class="has-text-grey-dark">
-        {{ address.poiInfos.alternativeName }}
-      </span>
-      <br />
-      <small
-        v-if="
-          userTimezoneDifferent &&
-          longShortTimezoneNamesDifferent &&
-          timezoneLongNameValid
-        "
-        class="has-text-grey-dark"
-      >
-        🌐
-        {{
-          $t("{timezoneLongName} ({timezoneShortName})", {
-            timezoneLongName,
-            timezoneShortName,
-          })
-        }}
-      </small>
-      <small v-else-if="userTimezoneDifferent" class="has-text-grey-dark">
-        🌐 {{ timezoneShortName }}
-      </small>
-    </p>
-  </address>
-</template>
-<script lang="ts">
-import { IAddress } from "@/types/address.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class AddressInfo extends Vue {
-  @Prop({ required: true, type: Object as PropType<IAddress> })
-  address!: IAddress;
-
-  @Prop({ required: false, default: false, type: Boolean }) showIcon!: boolean;
-  @Prop({ required: false, default: false, type: Boolean })
-  showTimezone!: boolean;
-  @Prop({ required: false, type: String }) userTimezone!: string;
-
-  get userTimezoneDifferent(): boolean {
-    return (
-      this.userTimezone != undefined &&
-      this.address.timezone != undefined &&
-      this.userTimezone !== this.address.timezone
-    );
-  }
-
-  get longShortTimezoneNamesDifferent(): boolean {
-    return (
-      this.timezoneLongName != undefined &&
-      this.timezoneShortName != undefined &&
-      this.timezoneLongName !== this.timezoneShortName
-    );
-  }
-
-  get timezoneLongName(): string | undefined {
-    return this.timezoneName("long");
-  }
-
-  get timezoneShortName(): string | undefined {
-    return this.timezoneName("short");
-  }
-
-  get timezoneLongNameValid(): boolean {
-    return (
-      this.timezoneLongName != undefined && !this.timezoneLongName.match(/UTC/)
-    );
-  }
-
-  private timezoneName(format: "long" | "short"): string | undefined {
-    return this.extractTimezone(
-      new Intl.DateTimeFormat(undefined, {
-        timeZoneName: format,
-        timeZone: this.address.timezone,
-      }).formatToParts()
-    );
-  }
-
-  private extractTimezone(
-    parts: Intl.DateTimeFormatPart[]
-  ): string | undefined {
-    return parts.find((part) => part.type === "timeZoneName")?.value;
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-address {
-  font-style: normal;
-  display: flex;
-  justify-content: flex-start;
-
-  span.addressDescription {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1 0 auto;
-    min-width: 100%;
-    max-width: 4rem;
-    overflow: hidden;
-  }
-
-  span.icon {
-    @include padding-right(1rem);
-  }
-}
-</style>

js/src/components/Address/InlineAddress.vue

@@ -1,36 +0,0 @@
-<template>
-  <div
-    class="truncate"
-    :title="
-      isDescriptionDifferentFromLocality
-        ? `${physicalAddress.description}, ${physicalAddress.locality}`
-        : physicalAddress.description
-    "
-  >
-    <b-icon icon="map-marker" />
-    <span v-if="physicalAddress.locality">
-      {{ physicalAddress.locality }}
-    </span>
-    <span v-else>
-      {{ physicalAddress.description }}
-    </span>
-  </div>
-</template>
-<script lang="ts">
-import { IAddress } from "@/types/address.model";
-import { PropType } from "vue";
-import { Prop, Vue, Component } from "vue-property-decorator";
-
-@Component
-export default class InlineAddress extends Vue {
-  @Prop({ required: true, type: Object as PropType<IAddress> })
-  physicalAddress!: IAddress;
-
-  get isDescriptionDifferentFromLocality(): boolean {
-    return (
-      this.physicalAddress?.description !== this.physicalAddress?.locality &&
-      this.physicalAddress?.description !== undefined
-    );
-  }
-}
-</script>

js/src/components/Comment/Comment.vue

@@ -1,538 +0,0 @@
-<template>
-  <li
-    :class="{
-      reply: comment.inReplyToComment,
-      announcement: comment.isAnnouncement,
-      selected: commentSelected,
-    }"
-    class="comment-element"
-  >
-    <article class="media" :id="commentId" dir="auto">
-      <popover-actor-card
-        :actor="comment.actor"
-        :inline="true"
-        v-if="comment.actor"
-      >
-        <figure
-          class="image is-32x32 media-left"
-          v-if="!comment.deletedAt && comment.actor.avatar"
-        >
-          <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
-        </figure>
-        <b-icon class="media-left" v-else icon="account-circle" />
-      </popover-actor-card>
-      <div v-else class="media-left">
-        <figure
-          class="image is-32x32"
-          v-if="!comment.deletedAt && comment.actor.avatar"
-        >
-          <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
-        </figure>
-        <b-icon v-else icon="account-circle" />
-      </div>
-      <div class="media-content">
-        <div class="content">
-          <span class="first-line" v-if="!comment.deletedAt" dir="auto">
-            <strong :class="{ organizer: commentFromOrganizer }">{{
-              comment.actor.name
-            }}</strong>
-            <small dir="ltr">@{{ usernameWithDomain(comment.actor) }}</small>
-          </span>
-          <a v-else class="comment-link" :href="commentURL">
-            <span>{{ $t("[deleted]") }}</span>
-          </a>
-          <a class="comment-link" :href="commentURL">
-            <small>{{
-              formatDistanceToNow(new Date(comment.updatedAt), {
-                locale: $dateFnsLocale,
-                addSuffix: true,
-              })
-            }}</small>
-          </a>
-          <span class="icons" v-if="!comment.deletedAt">
-            <button
-              v-if="comment.actor.id === currentActor.id"
-              @click="deleteComment"
-            >
-              <b-icon icon="delete" size="is-small" aria-hidden="true" />
-              <span class="visually-hidden">{{ $t("Delete") }}</span>
-            </button>
-            <button @click="reportModal()">
-              <b-icon icon="alert" size="is-small" />
-              <span class="visually-hidden">{{ $t("Report") }}</span>
-            </button>
-          </span>
-          <br />
-          <div
-            v-if="!comment.deletedAt"
-            v-html="comment.text"
-            dir="auto"
-            :lang="comment.language"
-          />
-          <div v-else>{{ $t("[This comment has been deleted]") }}</div>
-          <div class="load-replies" v-if="comment.totalReplies">
-            <p v-if="!showReplies" @click="fetchReplies">
-              <b-icon icon="chevron-down" class="reply-btn" />
-              <span class="reply-btn">{{
-                $tc("View a reply", comment.totalReplies, {
-                  totalReplies: comment.totalReplies,
-                })
-              }}</span>
-            </p>
-            <p
-              v-else-if="comment.totalReplies && showReplies"
-              @click="showReplies = false"
-            >
-              <b-icon icon="chevron-up" class="reply-btn" />
-              <span class="reply-btn">{{ $t("Hide replies") }}</span>
-            </p>
-          </div>
-        </div>
-        <nav
-          class="reply-action level is-mobile"
-          v-if="
-            currentActor.id &&
-            event.options.commentModeration !== CommentModeration.CLOSED &&
-            !comment.deletedAt
-          "
-        >
-          <div class="level-left">
-            <span
-              style="cursor: pointer"
-              class="level-item reply-btn"
-              @click="createReplyToComment()"
-            >
-              <span class="icon is-small">
-                <b-icon icon="reply" />
-              </span>
-              <span>{{ $t("Reply") }}</span>
-            </span>
-          </div>
-        </nav>
-      </div>
-    </article>
-    <form
-      class="reply"
-      @submit.prevent="replyToComment"
-      v-if="currentActor.id"
-      v-show="replyTo"
-    >
-      <article class="media reply">
-        <figure class="media-left" v-if="currentActor.avatar">
-          <p class="image is-48x48">
-            <img :src="currentActor.avatar.url" alt="" />
-          </p>
-        </figure>
-        <b-icon
-          class="media-left"
-          v-else
-          size="is-large"
-          icon="account-circle"
-        />
-        <div class="media-content">
-          <div class="content">
-            <span class="first-line">
-              <strong>{{ currentActor.name }}</strong>
-              <small dir="ltr">@{{ currentActor.preferredUsername }}</small>
-            </span>
-            <br />
-            <span class="editor-line">
-              <editor
-                class="editor"
-                ref="commentEditor"
-                v-model="newComment.text"
-                mode="comment"
-                :aria-label="$t('Comment body')"
-              />
-              <b-button
-                :disabled="newComment.text.trim().length === 0"
-                native-type="submit"
-                type="is-primary"
-                >{{ $t("Post a reply") }}</b-button
-              >
-            </span>
-          </div>
-        </div>
-      </article>
-    </form>
-    <div class="replies">
-      <div class="left">
-        <div class="vertical-border" @click="showReplies = false" />
-      </div>
-      <transition-group
-        name="comment-replies"
-        v-if="showReplies"
-        class="comment-replies"
-        tag="ul"
-      >
-        <comment
-          class="reply"
-          v-for="reply in comment.replies"
-          :key="reply.id"
-          :comment="reply"
-          :event="event"
-          @create-comment="$emit('create-comment', $event)"
-          @delete-comment="$emit('delete-comment', $event)"
-        />
-      </transition-group>
-    </div>
-  </li>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue, Ref } from "vue-property-decorator";
-import EditorComponent from "@/components/Editor.vue";
-import { SnackbarProgrammatic as Snackbar } from "buefy";
-import { formatDistanceToNow } from "date-fns";
-import { CommentModeration } from "@/types/enums";
-import { CommentModel, IComment } from "../../types/comment.model";
-import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
-import { IPerson, usernameWithDomain } from "../../types/actor";
-import { IEvent } from "../../types/event.model";
-import ReportModal from "../Report/ReportModal.vue";
-import { IReport } from "../../types/report.model";
-import { CREATE_REPORT } from "../../graphql/report";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
-
-@Component({
-  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
-  },
-  components: {
-    editor: () =>
-      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
-    comment: () => import(/* webpackChunkName: "comment" */ "./Comment.vue"),
-    PopoverActorCard,
-  },
-})
-export default class Comment extends Vue {
-  @Prop({ required: true, type: Object }) comment!: IComment;
-
-  @Prop({ required: true, type: Object }) event!: IEvent;
-
-  // Hack because Vue only exports it's own interface.
-  // See https://github.com/kaorun343/vue-property-decorator/issues/257
-  @Ref() readonly commentEditor!: EditorComponent & {
-    replyToComment: (comment: IComment) => void;
-    focus: () => void;
-  };
-
-  currentActor!: IPerson;
-
-  newComment: IComment = new CommentModel();
-
-  replyTo = false;
-
-  showReplies = false;
-
-  CommentModeration = CommentModeration;
-
-  usernameWithDomain = usernameWithDomain;
-
-  formatDistanceToNow = formatDistanceToNow;
-
-  async mounted(): Promise<void> {
-    const { hash } = this.$route;
-    if (hash.includes(`#comment-${this.comment.uuid}`)) {
-      this.fetchReplies();
-    }
-  }
-
-  async createReplyToComment(): Promise<void> {
-    if (this.replyTo) {
-      this.replyTo = false;
-      this.newComment = new CommentModel();
-      return;
-    }
-    this.replyTo = true;
-    if (this.comment.actor) {
-      this.commentEditor.replyToComment(this.comment.actor);
-      await this.$nextTick; // wait for the mention to be injected
-      this.commentEditor.focus();
-    }
-  }
-
-  replyToComment(): void {
-    this.newComment.inReplyToComment = this.comment;
-    this.newComment.originComment = this.comment.originComment || this.comment;
-    this.newComment.actor = this.currentActor;
-    this.$emit("create-comment", this.newComment);
-    this.newComment = new CommentModel();
-    this.replyTo = false;
-    this.showReplies = true;
-  }
-
-  deleteComment(): void {
-    this.$emit("delete-comment", this.comment);
-    this.showReplies = false;
-  }
-
-  fetchReplies(): void {
-    this.showReplies = true;
-  }
-
-  get commentSelected(): boolean {
-    return `#${this.commentId}` === this.$route.hash;
-  }
-
-  get commentFromOrganizer(): boolean {
-    const organizerId =
-      this.event?.organizerActor?.id || this.event?.attributedTo?.id;
-    return organizerId !== undefined && this.comment?.actor?.id === organizerId;
-  }
-
-  get commentId(): string {
-    if (this.comment.originComment)
-      return `comment-${this.comment.originComment.uuid}-${this.comment.uuid}`;
-    return `comment-${this.comment.uuid}`;
-  }
-
-  get commentURL(): string {
-    if (!this.comment.local && this.comment.url) return this.comment.url;
-    return `#${this.commentId}`;
-  }
-
-  reportModal(): void {
-    if (!this.comment.actor) return;
-    this.$buefy.modal.open({
-      parent: this,
-      component: ReportModal,
-      props: {
-        title: this.$t("Report this comment"),
-        comment: this.comment,
-        onConfirm: this.reportComment,
-        outsideDomain: this.comment.actor.domain,
-      },
-      // https://github.com/buefy/buefy/pull/3589
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      closeButtonAriaLabel: this.$t("Close"),
-    });
-  }
-
-  async reportComment(content: string, forward: boolean): Promise<void> {
-    try {
-      if (!this.comment.actor) return;
-      await this.$apollo.mutate<IReport>({
-        mutation: CREATE_REPORT,
-        variables: {
-          eventId: this.event.id,
-          reportedId: this.comment.actor.id,
-          commentsIds: [this.comment.id],
-          content,
-          forward,
-        },
-      });
-      this.$buefy.notification.open({
-        message: this.$t("Comment from @{username} reported", {
-          username: this.comment.actor.preferredUsername,
-        }) as string,
-        type: "is-success",
-        position: "is-bottom-right",
-        duration: 5000,
-      });
-    } catch (e: any) {
-      if (e.message) {
-        Snackbar.open({
-          message: e.message,
-          type: "is-danger",
-          position: "is-bottom",
-        });
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-form.reply {
-  padding-bottom: 1rem;
-}
-
-.first-line {
-  margin-bottom: 3px;
-
-  * {
-    padding: 0 5px 0 0;
-  }
-
-  strong.organizer {
-    background: $background-color;
-    border-radius: 12px;
-    color: white;
-    padding: 0 6px;
-  }
-
-  & > small {
-    @include margin-left(0.3rem);
-  }
-}
-
-.editor-line {
-  display: flex;
-  max-width: calc(80rem - 64px);
-
-  .editor {
-    flex: 1;
-    @include padding-right(10px);
-    margin-bottom: 0;
-  }
-}
-
-a.comment-link {
-  text-decoration: none;
-  @include margin-left(5px);
-  color: $text;
-  &:hover {
-    text-decoration: underline;
-  }
-  small {
-    &:hover {
-      color: hsl(0, 0%, 21%);
-    }
-  }
-}
-
-.comment-element {
-  padding: 0.25rem;
-  border-radius: 5px;
-
-  &.announcement {
-    background: $purple-2;
-
-    small {
-      color: hsl(0, 0%, 21%);
-    }
-  }
-
-  &.selected {
-    background-color: $violet-1;
-    color: $white;
-    .reply-btn,
-    small,
-    span,
-    strong,
-    .icons button {
-      color: $white;
-    }
-    a.comment-link:hover {
-      text-decoration: underline;
-      text-decoration-color: $white;
-      small {
-        color: $purple-3;
-      }
-    }
-  }
-
-  .media-left {
-    @include margin-right(5px);
-  }
-}
-
-.root-comment .replies {
-  display: flex;
-
-  .left {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    @include margin-right(10px);
-
-    .vertical-border {
-      width: 3px;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.05);
-      margin: 10px calc(1rem + 1px);
-      cursor: pointer;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.1);
-      }
-    }
-  }
-}
-
-.media .media-content {
-  overflow-x: initial;
-  .content {
-    text-align: start;
-    .editor-line {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .icons {
-    display: none;
-  }
-}
-
-.media:hover .media-content .icons {
-  display: inline;
-
-  button {
-    cursor: pointer;
-    border: none;
-    background: none;
-  }
-}
-
-.load-replies {
-  cursor: pointer;
-
-  & > p > span {
-    font-weight: bold;
-    color: $violet-2;
-  }
-}
-
-.level-item.reply-btn {
-  font-weight: bold;
-  color: $violet-2;
-}
-
-article {
-  border-radius: 4px;
-  margin-bottom: 5px;
-}
-
-.comment-replies {
-  flex-grow: 1;
-}
-
-.comment-replies-enter-active,
-.comment-replies-leave-active,
-.comment-replies-move {
-  transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
-  transition-property: opacity, transform;
-}
-
-.comment-replies-enter {
-  opacity: 0;
-  transform: translateX(50px) scaleY(0.5);
-}
-
-.comment-replies-enter-to {
-  opacity: 1;
-  transform: translateX(0) scaleY(1);
-}
-
-.comment-replies-leave-active {
-  position: absolute;
-}
-
-.comment-replies-leave-to {
-  opacity: 0;
-  transform: scaleY(0);
-  transform-origin: center top;
-}
-
-.reply-action .icon {
-  @include padding-right(0.4rem);
-}
-
-.visually-hidden {
-  display: none;
-}
-</style>

js/src/components/Comment/CommentTree.vue

@@ -1,457 +0,0 @@
-<template>
-  <div>
-    <form
-      class="new-comment"
-      v-if="isAbleToComment"
-      @submit.prevent="createCommentForEvent(newComment)"
-      @keyup.ctrl.enter="createCommentForEvent(newComment)"
-    >
-      <b-notification
-        v-if="isEventOrganiser && !areCommentsClosed"
-        :closable="false"
-        >{{ $t("Comments are closed for everybody else.") }}</b-notification
-      >
-      <article class="media">
-        <figure class="media-left" v-if="newComment.actor">
-          <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
-        </figure>
-        <div class="media-content">
-          <div class="field">
-            <div class="field">
-              <p class="control">
-                <editor
-                  ref="commenteditor"
-                  mode="comment"
-                  v-model="newComment.text"
-                  :aria-label="$t('Comment body')"
-                />
-              </p>
-              <p class="help is-danger" v-if="emptyCommentError">
-                {{ $t("Comment text can't be empty") }}
-              </p>
-            </div>
-            <div class="field notify-participants" v-if="isEventOrganiser">
-              <b-switch
-                aria-labelledby="notify-participants-toggle"
-                v-model="newComment.isAnnouncement"
-                >{{ $t("Notify participants") }}</b-switch
-              >
-            </div>
-          </div>
-        </div>
-        <div class="send-comment">
-          <b-button
-            native-type="submit"
-            type="is-primary"
-            class="comment-button-submit"
-            icon-left="send"
-            >{{ $t("Send") }}</b-button
-          >
-        </div>
-      </article>
-    </form>
-    <b-notification v-else-if="isConnected" :closable="false">{{
-      $t("The organiser has chosen to close comments.")
-    }}</b-notification>
-    <p
-      v-if="$apollo.queries.comments.loading"
-      class="loading has-text-centered"
-    >
-      {{ $t("Loading comments…") }}
-    </p>
-    <transition-group tag="div" name="comment-empty-list" v-else>
-      <transition-group
-        key="list"
-        name="comment-list"
-        v-if="filteredOrderedComments.length"
-        class="comment-list"
-        tag="ul"
-      >
-        <comment
-          class="root-comment"
-          :comment="comment"
-          :event="event"
-          v-for="comment in filteredOrderedComments"
-          :key="comment.id"
-          @create-comment="createCommentForEvent"
-          @delete-comment="deleteComment"
-        />
-      </transition-group>
-      <empty-content v-else icon="comment" key="no-comments" :inline="true">
-        <span>{{ $t("No comments yet") }}</span>
-      </empty-content>
-    </transition-group>
-  </div>
-</template>
-
-<script lang="ts">
-import { Prop, Vue, Component, Watch } from "vue-property-decorator";
-import Comment from "@/components/Comment/Comment.vue";
-import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
-import { CommentModeration } from "@/types/enums";
-import { CommentModel, IComment } from "../../types/comment.model";
-import {
-  CREATE_COMMENT_FROM_EVENT,
-  DELETE_COMMENT,
-  COMMENTS_THREADS_WITH_REPLIES,
-} from "../../graphql/comment";
-import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
-import { IPerson } from "../../types/actor";
-import { IEvent } from "../../types/event.model";
-import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
-import EmptyContent from "@/components/Utils/EmptyContent.vue";
-
-@Component({
-  apollo: {
-    currentActor: CURRENT_ACTOR_CLIENT,
-    comments: {
-      query: COMMENTS_THREADS_WITH_REPLIES,
-      variables() {
-        return {
-          eventUUID: this.event.uuid,
-        };
-      },
-      update: (data) => data.event.comments,
-      skip() {
-        return !this.event.uuid;
-      },
-    },
-  },
-  components: {
-    Comment,
-    IdentityPickerWrapper,
-    EmptyContent,
-    editor: () =>
-      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
-  },
-})
-export default class CommentTree extends Vue {
-  @Prop({ required: false, type: Object }) event!: IEvent;
-
-  newComment: IComment = new CommentModel();
-
-  currentActor!: IPerson;
-
-  comments: IComment[] = [];
-
-  CommentModeration = CommentModeration;
-
-  emptyCommentError = false;
-
-  @Watch("currentActor")
-  watchCurrentActor(currentActor: IPerson): void {
-    this.newComment.actor = currentActor;
-  }
-
-  @Watch("newComment", { deep: true })
-  resetEmptyCommentError(newComment: IComment): void {
-    if (this.emptyCommentError) {
-      this.emptyCommentError = ["", "<p></p>"].includes(newComment.text);
-    }
-  }
-
-  async createCommentForEvent(comment: IComment): Promise<void> {
-    this.emptyCommentError = ["", "<p></p>"].includes(comment.text);
-    if (this.emptyCommentError) return;
-    try {
-      if (!comment.actor) return;
-      await this.$apollo.mutate({
-        mutation: CREATE_COMMENT_FROM_EVENT,
-        variables: {
-          eventId: this.event.id,
-          text: comment.text,
-          inReplyToCommentId: comment.inReplyToComment
-            ? comment.inReplyToComment.id
-            : null,
-          isAnnouncement: comment.isAnnouncement,
-        },
-        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
-          if (data == null) return;
-          // comments are attached to the event, so we can pass it to replies later
-          const newComment = { ...data.createComment, event: this.event };
-
-          // we load all existing threads
-          const commentThreadsData = store.readQuery<{ event: IEvent }>({
-            query: COMMENTS_THREADS_WITH_REPLIES,
-            variables: {
-              eventUUID: this.event.uuid,
-            },
-          });
-          if (!commentThreadsData) return;
-          const { event } = commentThreadsData;
-          const oldComments = [...event.comments];
-
-          // if it's no a root comment, we first need to find
-          // existing replies and add the new reply to it
-          if (comment.originComment !== undefined) {
-            const { originComment } = comment;
-            const parentCommentIndex = oldComments.findIndex(
-              (oldComment) => oldComment.id === originComment.id
-            );
-            const parentComment = oldComments[parentCommentIndex];
-
-            // replace the root comment with has the updated list of replies in the thread list
-            oldComments.splice(parentCommentIndex, 1, {
-              ...parentComment,
-              replies: [...parentComment.replies, newComment],
-            });
-          } else {
-            // otherwise it's simply a new thread and we add it to the list
-            oldComments.push(newComment);
-          }
-
-          // finally we save the thread list
-          store.writeQuery({
-            query: COMMENTS_THREADS_WITH_REPLIES,
-            data: {
-              event: {
-                ...event,
-                comments: oldComments,
-              },
-            },
-            variables: {
-              eventUUID: this.event.uuid,
-            },
-          });
-        },
-      });
-
-      // and reset the new comment field
-      this.newComment = new CommentModel();
-    } catch (errors: any) {
-      console.error(errors);
-      if (errors.graphQLErrors && errors.graphQLErrors.length > 0) {
-        const error = errors.graphQLErrors[0];
-        if (error.field !== "text" && error.message[0] !== "can't be blank") {
-          this.$notifier.error(error.message);
-        }
-      }
-    }
-  }
-
-  async deleteComment(comment: IComment): Promise<void> {
-    try {
-      await this.$apollo.mutate({
-        mutation: DELETE_COMMENT,
-        variables: {
-          commentId: comment.id,
-        },
-        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
-          if (data == null) return;
-          const deletedCommentId = data.deleteComment.id;
-
-          const commentsData = store.readQuery<{ event: IEvent }>({
-            query: COMMENTS_THREADS_WITH_REPLIES,
-            variables: {
-              eventUUID: this.event.uuid,
-            },
-          });
-          if (!commentsData) return;
-          const { event } = commentsData;
-          let updatedComments: IComment[] = [...event.comments];
-
-          if (comment.originComment) {
-            // we have deleted a reply to a thread
-            const { originComment } = comment;
-
-            const parentCommentIndex = updatedComments.findIndex(
-              (oldComment) => oldComment.id === originComment.id
-            );
-            const parentComment = updatedComments[parentCommentIndex];
-            const updatedReplies = parentComment.replies.map((reply) => {
-              if (reply.id === deletedCommentId) {
-                return {
-                  ...reply,
-                  deletedAt: new Date().toString(),
-                };
-              }
-              return reply;
-            });
-            updatedComments.splice(parentCommentIndex, 1, {
-              ...parentComment,
-              replies: updatedReplies,
-              totalReplies: parentComment.totalReplies - 1,
-            });
-            console.log("updatedComments", updatedComments);
-          } else {
-            // we have deleted a thread itself
-            updatedComments = updatedComments.map((reply) => {
-              if (reply.id === deletedCommentId) {
-                return {
-                  ...reply,
-                  deletedAt: new Date().toString(),
-                };
-              }
-              return reply;
-            });
-          }
-          store.writeQuery({
-            query: COMMENTS_THREADS_WITH_REPLIES,
-            variables: {
-              eventUUID: this.event.uuid,
-            },
-            data: {
-              event: {
-                ...event,
-                comments: updatedComments,
-              },
-            },
-          });
-        },
-      });
-      // this.comments = this.comments.filter(commentItem => commentItem.id !== comment.id);
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-
-  get orderedComments(): IComment[] {
-    return this.comments
-      .filter((comment) => comment.inReplyToComment == null)
-      .sort((a, b) => {
-        if (a.isAnnouncement !== b.isAnnouncement) {
-          return (
-            (b.isAnnouncement === true ? 1 : 0) -
-            (a.isAnnouncement === true ? 1 : 0)
-          );
-        }
-        if (a.publishedAt && b.publishedAt) {
-          return (
-            new Date(b.publishedAt).getTime() -
-            new Date(a.publishedAt).getTime()
-          );
-        } else if (a.updatedAt && b.updatedAt) {
-          return (
-            new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
-          );
-        }
-        return 0;
-      });
-  }
-
-  get filteredOrderedComments(): IComment[] {
-    return this.orderedComments.filter(
-      (comment) => !comment.deletedAt || comment.totalReplies > 0
-    );
-  }
-
-  get isEventOrganiser(): boolean {
-    const organizerId =
-      this.event?.organizerActor?.id || this.event?.attributedTo?.id;
-    return organizerId !== undefined && this.currentActor?.id === organizerId;
-  }
-
-  get areCommentsClosed(): boolean {
-    return (
-      this.currentActor.id !== undefined &&
-      this.event.options.commentModeration !== CommentModeration.CLOSED
-    );
-  }
-
-  get isAbleToComment(): boolean {
-    if (this.isConnected) {
-      return this.areCommentsClosed || this.isEventOrganiser;
-    }
-    return false;
-  }
-
-  get isConnected(): boolean {
-    return this.currentActor?.id != undefined;
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-@import "~bulma/sass/utilities/mixins.sass";
-form.new-comment {
-  padding-bottom: 1rem;
-
-  .media {
-    flex-wrap: wrap;
-    justify-content: center;
-    .media-left {
-      @include mobile {
-        @include margin-right(0.5rem);
-        @include margin-left(0.5rem);
-      }
-    }
-
-    .media-content {
-      display: flex;
-      align-items: center;
-      align-content: center;
-      width: min-content;
-
-      .field {
-        flex: 1;
-        @include padding-right(10px);
-        margin-bottom: 0;
-
-        &.notify-participants {
-          margin-top: 0.5rem;
-        }
-      }
-    }
-  }
-}
-
-.no-comments {
-  display: flex;
-  flex-direction: column;
-
-  span {
-    text-align: center;
-    margin-bottom: 10px;
-  }
-
-  img {
-    max-width: 250px;
-    align-self: center;
-  }
-}
-
-ul.comment-list li {
-  margin-bottom: 16px;
-}
-
-.comment-list-enter-active,
-.comment-list-leave-active,
-.comment-list-move {
-  transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
-  transition-property: opacity, transform;
-}
-
-.comment-list-enter {
-  opacity: 0;
-  transform: translateX(50px) scaleY(0.5);
-}
-
-.comment-list-enter-to {
-  opacity: 1;
-  transform: translateX(0) scaleY(1);
-}
-
-.comment-list-leave-active,
-.comment-empty-list-active {
-  position: absolute;
-}
-
-.comment-list-leave-to,
-.comment-empty-list-leave-to {
-  opacity: 0;
-  transform: scaleY(0);
-  transform-origin: center top;
-}
-
-/*.comment-empty-list-enter-active {*/
-/*    transition: opacity .5s;*/
-/*}*/
-
-/*.comment-empty-list-enter {*/
-/*    opacity: 0;*/
-/*}*/
-</style>

js/src/components/Discussion/DiscussionComment.vue

@@ -1,258 +0,0 @@
-<template>
-  <article class="comment">
-    <div class="avatar">
-      <figure
-        class="image is-48x48"
-        v-if="comment.actor && comment.actor.avatar"
-      >
-        <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
-      </figure>
-      <b-icon v-else size="is-large" icon="account-circle" />
-    </div>
-    <div class="body">
-      <div class="meta" dir="auto">
-        <span
-          class="first-line name"
-          v-if="comment.actor && !comment.deletedAt"
-        >
-          <strong>{{ comment.actor.name }}</strong>
-          <small>@{{ usernameWithDomain(comment.actor) }}</small>
-        </span>
-        <span v-else class="name comment-link has-text-grey">
-          {{ $t("[deleted]") }}
-        </span>
-        <span
-          class="icons"
-          v-if="
-            comment.actor &&
-            !comment.deletedAt &&
-            comment.actor.id === currentActor.id
-          "
-        >
-          <b-dropdown aria-role="list">
-            <b-icon slot="trigger" role="button" icon="dots-horizontal" />
-
-            <b-dropdown-item
-              v-if="comment.actor.id === currentActor.id"
-              @click="toggleEditMode"
-              aria-role="menuitem"
-            >
-              <b-icon icon="pencil"></b-icon>
-              {{ $t("Edit") }}
-            </b-dropdown-item>
-            <b-dropdown-item
-              v-if="comment.actor.id === currentActor.id"
-              @click="$emit('delete-comment', comment)"
-              aria-role="menuitem"
-            >
-              <b-icon icon="delete"></b-icon>
-              {{ $t("Delete") }}
-            </b-dropdown-item>
-            <!-- <b-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
-              <b-icon icon="flag" />
-              {{ $t("Report") }}
-            </b-dropdown-item> -->
-          </b-dropdown>
-        </span>
-        <div class="post-infos">
-          <span :title="comment.insertedAt | formatDateTimeString">
-            {{
-              formatDistanceToNow(new Date(comment.updatedAt), {
-                locale: $dateFnsLocale,
-              }) || $t("Right now")
-            }}</span
-          >
-        </div>
-      </div>
-      <div
-        v-if="!editMode && !comment.deletedAt"
-        class="text-wrapper"
-        dir="auto"
-      >
-        <div class="description-content" v-html="comment.text"></div>
-        <p
-          v-if="
-            comment.insertedAt &&
-            comment.updatedAt &&
-            new Date(comment.insertedAt).getTime() !==
-              new Date(comment.updatedAt).getTime()
-          "
-          :title="comment.updatedAt | formatDateTimeString"
-        >
-          {{
-            $t("Edited {ago}", {
-              ago: formatDistanceToNow(new Date(comment.updatedAt), {
-                locale: $dateFnsLocale,
-              }),
-            })
-          }}
-        </p>
-      </div>
-      <div class="comment-deleted" v-else-if="!editMode">
-        {{ $t("[This comment has been deleted by it's author]") }}
-      </div>
-      <form v-else class="edition" @submit.prevent="updateComment">
-        <editor v-model="updatedComment" :aria-label="$t('Comment body')" />
-        <div class="buttons">
-          <b-button
-            native-type="submit"
-            :disabled="['<p></p>', '', comment.text].includes(updatedComment)"
-            type="is-primary"
-            >{{ $t("Update") }}</b-button
-          >
-          <b-button native-type="button" @click="toggleEditMode">{{
-            $t("Cancel")
-          }}</b-button>
-        </div>
-      </form>
-    </div>
-  </article>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { formatDistanceToNow } from "date-fns";
-import { IComment } from "../../types/comment.model";
-import { usernameWithDomain, IPerson } from "../../types/actor";
-import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
-
-@Component({
-  apollo: {
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-  components: {
-    editor: () =>
-      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
-  },
-})
-export default class DiscussionComment extends Vue {
-  @Prop({ required: true, type: Object }) comment!: IComment;
-
-  editMode = false;
-
-  updatedComment = "";
-
-  currentActor!: IPerson;
-
-  usernameWithDomain = usernameWithDomain;
-
-  formatDistanceToNow = formatDistanceToNow;
-
-  // isReportModalActive: boolean = false;
-
-  toggleEditMode(): void {
-    this.updatedComment = this.comment.text;
-    this.editMode = !this.editMode;
-  }
-
-  updateComment(): void {
-    this.$emit("update-comment", {
-      ...this.comment,
-      text: this.updatedComment,
-    });
-    this.toggleEditMode();
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-article.comment {
-  display: flex;
-  border-top: 1px solid #e9e9e9;
-
-  div.body {
-    flex: 2;
-    margin-bottom: 2rem;
-    padding-top: 1rem;
-
-    .meta {
-      display: flex;
-      align-items: center;
-      padding: 0 1rem 0.3em;
-
-      .name {
-        @include margin-right(auto);
-        flex: 1 1 auto;
-        overflow: hidden;
-
-        strong {
-          display: block;
-          line-height: 1rem;
-        }
-
-        color: #3c376e;
-      }
-
-      .icons {
-        display: inline;
-        cursor: pointer;
-      }
-    }
-
-    .text-wrapper,
-    .comment-deleted {
-      padding: 0 1rem;
-
-      & > p {
-        font-size: 0.85rem;
-        font-style: italic;
-      }
-
-      div.description-content {
-        padding-bottom: 0.3rem;
-
-        ::v-deep h1 {
-          font-size: 2rem;
-        }
-
-        ::v-deep h2 {
-          font-size: 1.5rem;
-        }
-
-        ::v-deep h3 {
-          font-size: 1.25rem;
-        }
-
-        ::v-deep ul {
-          list-style-type: disc;
-        }
-
-        ::v-deep li {
-          margin: 10px auto 10px 2rem;
-        }
-
-        ::v-deep blockquote {
-          border-left: 0.2em solid #333;
-          display: block;
-          @include padding-left(1em);
-        }
-
-        ::v-deep p {
-          margin: 10px auto;
-
-          a {
-            display: inline-block;
-            padding: 0.3rem;
-            background: $secondary;
-            color: #111;
-
-            &:empty {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  div.avatar {
-    padding-top: 1rem;
-    flex: 0;
-  }
-
-  .edition {
-    .button {
-      margin-top: 0.75rem;
-    }
-  }
-}
-</style>

js/src/components/Discussion/DiscussionListItem.vue

@@ -1,126 +0,0 @@
-<template>
-  <router-link
-    class="discussion-minimalist-card-wrapper"
-    dir="auto"
-    :to="{
-      name: RouteName.DISCUSSION,
-      params: { slug: discussion.slug, id: discussion.id },
-    }"
-  >
-    <div class="media-left">
-      <figure
-        class="image is-32x32"
-        v-if="
-          discussion.lastComment.actor && discussion.lastComment.actor.avatar
-        "
-      >
-        <img
-          class="is-rounded"
-          :src="discussion.lastComment.actor.avatar.url"
-          alt
-        />
-      </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
-    </div>
-    <div class="title-info-wrapper">
-      <div class="title-and-date">
-        <p class="discussion-minimalist-title">{{ discussion.title }}</p>
-        <span
-          class="has-text-grey-dark"
-          :title="actualDate | formatDateTimeString"
-        >
-          {{
-            formatDistanceToNowStrict(new Date(actualDate), {
-              locale: $dateFnsLocale,
-            }) || $t("Right now")
-          }}</span
-        >
-      </div>
-      <div
-        class="ellipsis has-text-grey-dark"
-        dir="auto"
-        v-if="!discussion.lastComment.deletedAt"
-      >
-        {{ htmlTextEllipsis }}
-      </div>
-      <div v-else class="has-text-grey-dark">
-        {{ $t("[This comment has been deleted]") }}
-      </div>
-    </div>
-  </router-link>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { formatDistanceToNowStrict } from "date-fns";
-import { IDiscussion } from "../../types/discussions";
-import RouteName from "../../router/name";
-
-@Component
-export default class DiscussionListItem extends Vue {
-  @Prop({ required: true, type: Object }) discussion!: IDiscussion;
-
-  RouteName = RouteName;
-
-  formatDistanceToNowStrict = formatDistanceToNowStrict;
-
-  get htmlTextEllipsis(): string {
-    const element = document.createElement("div");
-    if (this.discussion.lastComment && this.discussion.lastComment.text) {
-      element.innerHTML = this.discussion.lastComment.text
-        .replace(/<br\s*\/?>/gi, " ")
-        .replace(/<p>/gi, " ");
-    }
-    return element.innerText;
-  }
-
-  get actualDate(): string | Date | undefined {
-    if (
-      this.discussion.updatedAt === this.discussion.insertedAt &&
-      this.discussion.lastComment
-    ) {
-      return this.discussion.lastComment.publishedAt;
-    }
-    return this.discussion.updatedAt;
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-.discussion-minimalist-card-wrapper {
-  text-decoration: none;
-  display: flex;
-  width: 100%;
-  color: initial;
-  border-bottom: 1px solid #e9e9e9;
-  align-items: center;
-
-  .calendar-icon {
-    @include margin-right(1rem);
-  }
-
-  .title-info-wrapper {
-    flex: 2;
-
-    .title-and-date {
-      display: flex;
-      align-items: center;
-
-      .discussion-minimalist-title {
-        color: #3c376e;
-        font-family: Roboto, Helvetica, Arial, serif;
-        font-size: 19px;
-        font-weight: 600;
-        flex: 1;
-      }
-    }
-
-    div.ellipsis {
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      font-size: 15px;
-    }
-  }
-}
-</style>

js/src/components/Editor.vue

@@ -1,593 +0,0 @@
-<template>
-  <div v-if="editor">
-    <div
-      class="editor"
-      :class="{ short_mode: isShortMode, comment_mode: isCommentMode }"
-      id="tiptab-editor"
-      :data-actor-id="currentActor && currentActor.id"
-    >
-      <div
-        class="menubar bar-is-hidden"
-        v-if="isDescriptionMode"
-        :editor="editor"
-      >
-        <button
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('bold') }"
-          @click="editor.chain().focus().toggleBold().run()"
-          type="button"
-          :title="$t('Bold')"
-        >
-          <b-icon icon="format-bold" />
-        </button>
-
-        <button
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('italic') }"
-          @click="editor.chain().focus().toggleItalic().run()"
-          type="button"
-          :title="$t('Italic')"
-        >
-          <b-icon icon="format-italic" />
-        </button>
-
-        <button
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('underline') }"
-          @click="editor.chain().focus().toggleUnderline().run()"
-          type="button"
-          :title="$t('Underline')"
-        >
-          <b-icon icon="format-underline" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
-          @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-          type="button"
-          :title="$t('Heading Level 1')"
-        >
-          <b-icon icon="format-header-1" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
-          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-          type="button"
-          :title="$t('Heading Level 2')"
-        >
-          <b-icon icon="format-header-2" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
-          @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-          type="button"
-          :title="$t('Heading Level 3')"
-        >
-          <b-icon icon="format-header-3" />
-        </button>
-
-        <button
-          class="menubar__button"
-          @click="showLinkMenu()"
-          :class="{ 'is-active': editor.isActive('link') }"
-          type="button"
-          :title="$t('Add link')"
-        >
-          <b-icon icon="link" />
-        </button>
-
-        <button
-          v-if="editor.isActive('link')"
-          class="menubar__button"
-          @click="editor.chain().focus().unsetLink().run()"
-          type="button"
-          :title="$t('Remove link')"
-        >
-          <b-icon icon="link-off" />
-        </button>
-
-        <button
-          class="menubar__button"
-          v-if="!isBasicMode"
-          @click="showImagePrompt()"
-          type="button"
-          :title="$t('Add picture')"
-        >
-          <b-icon icon="image" />
-        </button>
-
-        <button
-          class="menubar__button"
-          v-if="!isBasicMode"
-          :class="{ 'is-active': editor.isActive('bulletList') }"
-          @click="editor.chain().focus().toggleBulletList().run()"
-          type="button"
-          :title="$t('Bullet list')"
-        >
-          <b-icon icon="format-list-bulleted" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('orderedList') }"
-          @click="editor.chain().focus().toggleOrderedList().run()"
-          type="button"
-          :title="$t('Ordered list')"
-        >
-          <b-icon icon="format-list-numbered" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('blockquote') }"
-          @click="editor.chain().focus().toggleBlockquote().run()"
-          type="button"
-          :title="$t('Quote')"
-        >
-          <b-icon icon="format-quote-close" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          @click="editor.chain().focus().undo().run()"
-          type="button"
-          :title="$t('Undo')"
-        >
-          <b-icon icon="undo" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          @click="editor.chain().focus().redo().run()"
-          type="button"
-          :title="$t('Redo')"
-        >
-          <b-icon icon="redo" />
-        </button>
-      </div>
-
-      <bubble-menu
-        v-if="editor && isCommentMode"
-        class="bubble-menu"
-        :editor="editor"
-        :tippy-options="{ duration: 100 }"
-      >
-        <button
-          class="menububble__button"
-          :class="{ 'is-active': editor.isActive('bold') }"
-          @click="editor.chain().focus().toggleBold().run()"
-          type="button"
-          :title="$t('Bold')"
-        >
-          <b-icon icon="format-bold" />
-          <span class="visually-hidden">{{ $t("Bold") }}</span>
-        </button>
-
-        <button
-          class="menububble__button"
-          :class="{ 'is-active': editor.isActive('italic') }"
-          @click="editor.chain().focus().toggleItalic().run()"
-          type="button"
-          :title="$t('Italic')"
-        >
-          <b-icon icon="format-italic" />
-          <span class="visually-hidden">{{ $t("Italic") }}</span>
-        </button>
-      </bubble-menu>
-
-      <editor-content class="editor__content" :editor="editor" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-2";
-import Blockquote from "@tiptap/extension-blockquote";
-import BulletList from "@tiptap/extension-bullet-list";
-import Heading from "@tiptap/extension-heading";
-import Document from "@tiptap/extension-document";
-import Paragraph from "@tiptap/extension-paragraph";
-import Bold from "@tiptap/extension-bold";
-import Italic from "@tiptap/extension-italic";
-import Strike from "@tiptap/extension-strike";
-import Text from "@tiptap/extension-text";
-import Dropcursor from "@tiptap/extension-dropcursor";
-import Gapcursor from "@tiptap/extension-gapcursor";
-import History from "@tiptap/extension-history";
-import { IActor, IPerson, usernameWithDomain } from "../types/actor";
-import CustomImage from "./Editor/Image";
-import { UPLOAD_MEDIA } from "../graphql/upload";
-import { listenFileUpload } from "../utils/upload";
-import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
-import Mention from "@tiptap/extension-mention";
-import MentionOptions from "./Editor/Mention";
-import OrderedList from "@tiptap/extension-ordered-list";
-import ListItem from "@tiptap/extension-list-item";
-import Underline from "@tiptap/extension-underline";
-import Link from "@tiptap/extension-link";
-import { AutoDir } from "./Editor/Autodir";
-import sanitizeHtml from "sanitize-html";
-
-@Component({
-  components: { EditorContent, BubbleMenu },
-  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
-  },
-})
-export default class EditorComponent extends Vue {
-  @Prop({ required: true }) value!: string;
-
-  @Prop({ required: false, default: "description" }) mode!: string;
-
-  @Prop({ required: false, default: 100_000_000 }) maxSize!: number;
-
-  @Prop({ required: false }) ariaLabel!: string;
-
-  currentActor!: IPerson;
-
-  editor: Editor | null = null;
-
-  get isDescriptionMode(): boolean {
-    return this.mode === "description" || this.isBasicMode;
-  }
-
-  get isCommentMode(): boolean {
-    return this.mode === "comment";
-  }
-
-  get isShortMode(): boolean {
-    return this.isBasicMode;
-  }
-
-  get isBasicMode(): boolean {
-    return this.mode === "basic";
-  }
-
-  // eslint-disable-next-line
-  insertMention(obj: { range: any; attrs: any }) {
-    console.log("initialize Mention");
-  }
-
-  observer!: MutationObserver | null;
-
-  mounted(): void {
-    this.editor = new Editor({
-      editorProps: {
-        attributes: {
-          "aria-multiline": this.isShortMode.toString(),
-          "aria-label": this.ariaLabel,
-          role: "textbox",
-        },
-        transformPastedHTML: this.transformPastedHTML,
-      },
-      extensions: [
-        Blockquote,
-        BulletList,
-        Heading,
-        Document,
-        Paragraph,
-        Text,
-        OrderedList,
-        ListItem,
-        Mention.configure(MentionOptions),
-        CustomImage,
-        AutoDir,
-        Underline,
-        Bold,
-        Italic,
-        Strike,
-        Dropcursor,
-        Gapcursor,
-        History,
-        Link.configure({
-          HTMLAttributes: { target: "_blank", rel: "noopener noreferrer ugc" },
-        }),
-      ],
-      injectCSS: false,
-      content: this.value,
-      onUpdate: () => {
-        this.$emit("input", this.editor?.getHTML());
-      },
-    });
-  }
-
-  transformPastedHTML(html: string): string {
-    // When using comment mode, limit to acceptable tags
-    if (this.isCommentMode) {
-      return sanitizeHtml(html, {
-        allowedTags: ["b", "i", "em", "strong", "a"],
-        allowedAttributes: {
-          a: ["href", "rel", "target"],
-        },
-      });
-    }
-    return html;
-  }
-
-  @Watch("value")
-  onValueChanged(val: string): void {
-    if (!this.editor) return;
-    if (val !== this.editor.getHTML()) {
-      this.editor.commands.setContent(val, false);
-    }
-  }
-
-  /**
-   * Show a popup to get the link from the URL
-   */
-  showLinkMenu(): void {
-    this.$buefy.dialog.prompt({
-      message: this.$t("Enter the link URL") as string,
-      inputAttrs: {
-        type: "url",
-      },
-      trapFocus: true,
-      onConfirm: (value) => {
-        if (!this.editor) return undefined;
-        this.editor.chain().focus().setLink({ href: value }).run();
-      },
-    });
-  }
-
-  /**
-   * Show a file prompt, upload picture and insert it into editor
-   */
-  async showImagePrompt(): Promise<void> {
-    const image = await listenFileUpload();
-    try {
-      const { data } = await this.$apollo.mutate({
-        mutation: UPLOAD_MEDIA,
-        variables: {
-          file: image,
-          name: image.name,
-        },
-      });
-      if (data.uploadMedia && data.uploadMedia.url && this.editor) {
-        this.editor
-          .chain()
-          .focus()
-          .setImage({
-            src: data.uploadMedia.url,
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            "data-media-id": data.uploadMedia.id,
-          })
-          .run();
-      }
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-
-  /**
-   * We use this to programatically insert an actor mention when creating a reply to comment
-   */
-  replyToComment(actor: IActor): void {
-    if (!this.editor) return;
-    this.editor
-      .chain()
-      .focus()
-      .insertContent({
-        type: "mention",
-        attrs: {
-          id: usernameWithDomain(actor),
-        },
-      })
-      .insertContent(" ")
-      .run();
-  }
-
-  focus(): void {
-    this.editor?.chain().focus("end");
-  }
-
-  beforeDestroy(): void {
-    this.editor?.destroy();
-  }
-}
-</script>
-<style lang="scss">
-@use "@/styles/_mixins" as *;
-@import "./Editor/style.scss";
-
-$color-black: #000;
-$color-white: #eee;
-
-.menubar {
-  margin-bottom: 1rem;
-  transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
-
-  &__button {
-    font-weight: bold;
-    display: inline-flex;
-    background: transparent;
-    border: 0;
-    color: $color-black;
-    padding: 0.2rem 0.5rem;
-    @include margin-right(0.2rem);
-    border-radius: 3px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: rgba($color-black, 0.05);
-    }
-
-    &.is-active {
-      background-color: rgba($color-black, 0.1);
-    }
-  }
-}
-
-.editor {
-  position: relative;
-
-  p.is-empty:first-child::before {
-    content: attr(data-empty-text);
-    float: left;
-    color: #aaa;
-    pointer-events: none;
-    height: 0;
-    font-style: italic;
-  }
-
-  .editor__content div.ProseMirror {
-    min-height: 10rem;
-  }
-
-  &.short_mode {
-    div.ProseMirror {
-      min-height: 5rem;
-    }
-  }
-
-  &.comment_mode {
-    div.ProseMirror {
-      min-height: 2rem;
-    }
-  }
-
-  &__content {
-    div.ProseMirror {
-      min-height: 2.5rem;
-      box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
-      background-color: white;
-      border-radius: 4px;
-      color: #363636;
-      border: 1px solid #dbdbdb;
-      padding: 12px 6px;
-
-      &:focus {
-        border-color: $background-color;
-        outline: none;
-      }
-    }
-
-    h1 {
-      font-size: 2em;
-    }
-
-    h2 {
-      font-size: 1.5em;
-    }
-
-    h3 {
-      font-size: 1.25em;
-    }
-
-    ul,
-    ol {
-      @include padding-left(1rem);
-    }
-
-    ul {
-      list-style-type: disc;
-    }
-
-    li > p,
-    li > ol,
-    li > ul {
-      margin: 0;
-    }
-
-    blockquote {
-      border-left: 3px solid rgba($color-black, 0.1);
-      color: rgba($color-black, 0.8);
-      @include padding-left(0.8rem);
-      font-style: italic;
-
-      p {
-        margin: 0;
-      }
-    }
-
-    img {
-      max-width: 100%;
-      border-radius: 3px;
-    }
-  }
-}
-
-.bubble-menu {
-  display: flex;
-  background-color: #0d0d0d;
-  padding: 0.2rem;
-  border-radius: 0.5rem;
-
-  button {
-    border: none;
-    background: none;
-    color: #fff;
-    font-size: 0.85rem;
-    font-weight: 500;
-    padding: 0 0.2rem;
-    opacity: 0.6;
-    cursor: pointer;
-
-    &:hover,
-    &.is-active {
-      opacity: 1;
-    }
-  }
-}
-
-.suggestion-list {
-  padding: 0.2rem;
-  border: 2px solid rgba($color-black, 0.1);
-  font-size: 0.8rem;
-  font-weight: bold;
-  &__no-results {
-    padding: 0.2rem 0.5rem;
-  }
-  &__item {
-    border-radius: 5px;
-    padding: 0.2rem 0.5rem;
-    margin-bottom: 0.2rem;
-    cursor: pointer;
-    &:last-child {
-      margin-bottom: 0;
-    }
-    &.is-selected,
-    &:hover {
-      background-color: rgba($color-white, 0.2);
-    }
-    &.is-empty {
-      opacity: 0.5;
-    }
-  }
-
-  .media + .media {
-    margin-top: 0;
-    padding-top: 0;
-  }
-}
-.tippy-box[data-theme~="dark"] {
-  background-color: $color-black;
-  padding: 0;
-  font-size: 1rem;
-  text-align: inherit;
-  color: $color-white;
-  border-radius: 5px;
-}
-
-.visually-hidden {
-  display: none;
-}
-</style>

js/src/components/Editor/MentionList.vue

@@ -1,106 +0,0 @@
-<template>
-  <div class="items">
-    <button
-      class="item"
-      :class="{ 'is-selected': index === selectedIndex }"
-      v-for="(item, index) in items"
-      :key="index"
-      @click="selectItem(index)"
-    >
-      <actor-inline :actor="item" />
-    </button>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop, Watch } from "vue-property-decorator";
-import { displayName, usernameWithDomain } from "@/types/actor/actor.model";
-import { IPerson } from "@/types/actor";
-import ActorInline from "../../components/Account/ActorInline.vue";
-
-@Component({
-  components: {
-    ActorInline,
-  },
-})
-export default class MentionList extends Vue {
-  @Prop({ type: Array, required: true }) items!: Array<IPerson>;
-  @Prop({ type: Function, required: true }) command!: any;
-
-  selectedIndex = 0;
-
-  displayName = displayName;
-
-  @Watch("items")
-  watchItems(): void {
-    this.selectedIndex = 0;
-  }
-
-  onKeyDown({ event }: { event: KeyboardEvent }): boolean {
-    if (event.key === "ArrowUp") {
-      this.upHandler();
-      return true;
-    }
-
-    if (event.key === "ArrowDown") {
-      this.downHandler();
-      return true;
-    }
-
-    if (event.key === "Enter") {
-      this.enterHandler();
-      return true;
-    }
-
-    return false;
-  }
-
-  upHandler(): void {
-    this.selectedIndex =
-      (this.selectedIndex + this.items.length - 1) % this.items.length;
-  }
-
-  downHandler(): void {
-    this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
-  }
-
-  enterHandler(): void {
-    this.selectItem(this.selectedIndex);
-  }
-
-  selectItem(index: number): void {
-    const item = this.items[index];
-
-    if (item) {
-      this.command({ id: usernameWithDomain(item) });
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.items {
-  position: relative;
-  border-radius: 0.25rem;
-  background: white;
-  color: rgba(black, 0.8);
-  overflow: hidden;
-  font-size: 0.9rem;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1);
-}
-
-.item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  background: transparent;
-  border: none;
-  padding: 0.5rem 0.75rem;
-
-  &.is-selected,
-  &:hover {
-    color: $background-color;
-    background: rgba($background-color, 0.1);
-  }
-}
-</style>

js/src/components/Error.vue

@@ -1,345 +0,0 @@
-<template>
-  <div class="container section" id="error-wrapper">
-    <div class="column">
-      <section>
-        <div class="picture-wrapper">
-          <picture>
-            <source
-              srcset="
-                /img/pics/error-480w.webp  1x,
-                /img/pics/error-1024w.webp 2x
-              "
-              type="image/webp"
-            />
-            <source
-              srcset="/img/pics/error-480w.jpg 1x, /img/pics/error-1024w.jpg 2x"
-              type="image/jpeg"
-            />
-
-            <img
-              :src="`/img/pics/error-480w.jpg`"
-              alt=""
-              width="480"
-              height="312"
-              loading="lazy"
-            />
-          </picture>
-        </div>
-        <b-message type="is-danger" class="is-size-5">
-          <h1>
-            {{
-              $t(
-                "An error has occured. Sorry about that. You may try to reload the page."
-              )
-            }}
-          </h1>
-        </b-message>
-      </section>
-      <b-loading v-if="$apollo.loading" :active.sync="$apollo.loading" />
-      <section v-else>
-        <h2 class="is-size-5">{{ $t("What can I do to help?") }}</h2>
-        <p class="content">
-          <i18n
-            tag="span"
-            path="{instanceName} is an instance of {mobilizon_link}, a free software built with the community."
-          >
-            <b slot="instanceName">{{ config.name }}</b>
-            <a slot="mobilizon_link" href="https://joinmobilizon.org">{{
-              $t("Mobilizon")
-            }}</a>
-          </i18n>
-          <span v-if="sentryEnabled && sentryReady">
-            {{
-              $t(
-                "We collect your feedback and the error information in order to improve this service."
-              )
-            }}</span
-          >
-          <span v-else>
-            {{
-              $t(
-                "We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):"
-              )
-            }}
-          </span>
-        </p>
-        <form
-          v-if="sentryEnabled && sentryReady && !submittedFeedback"
-          @submit.prevent="sendErrorToSentry"
-        >
-          <b-field :label="$t('What happened?')" label-for="what-happened">
-            <b-input
-              v-model="feedback"
-              type="textarea"
-              id="what-happened"
-              :placeholder="$t(`I've clicked on X, then on Y`)"
-            />
-          </b-field>
-          <b-button icon-left="send" native-type="submit" type="is-primary">{{
-            $t("Send feedback")
-          }}</b-button>
-          <p class="content">
-            {{
-              $t(
-                "Please add as many details as possible to help identify the problem."
-              )
-            }}
-          </p>
-        </form>
-        <b-message type="is-danger" v-else-if="feedbackError">
-          <p>
-            {{
-              $t(
-                "Sorry, we wen't able to save your feedback. Don't worry, we'll try to fix this issue anyway."
-              )
-            }}
-          </p>
-          <i18n path="You may now close this page or {return_to_the_homepage}.">
-            <template #return_to_the_homepage>
-              <router-link :to="{ name: RouteName.HOME }">{{
-                $t("return to the homepage")
-              }}</router-link>
-            </template>
-          </i18n>
-        </b-message>
-        <b-message type="is-success" v-else-if="submittedFeedback">
-          <p>{{ $t("Thanks a lot, your feedback was submitted!") }}</p>
-          <i18n path="You may now close this page or {return_to_the_homepage}.">
-            <template #return_to_the_homepage>
-              <router-link :to="{ name: RouteName.HOME }">{{
-                $t("return to the homepage")
-              }}</router-link>
-            </template>
-          </i18n>
-        </b-message>
-        <div
-          class="content"
-          v-if="!(sentryEnabled && sentryReady) || submittedFeedback"
-        >
-          <p v-if="submittedFeedback">{{ $t("You may also:") }}</p>
-          <ul>
-            <li>
-              <a
-                href="https://framacolibri.org/c/mobilizon/39"
-                target="_blank"
-                >{{ $t("Open a topic on our forum") }}</a
-              >
-            </li>
-            <li>
-              <a
-                href="https://framagit.org/framasoft/mobilizon/-/issues/"
-                target="_blank"
-                >{{
-                  $t("Open an issue on our bug tracker (advanced users)")
-                }}</a
-              >
-            </li>
-          </ul>
-        </div>
-        <p class="content" v-if="!sentryEnabled">
-          {{
-            $t(
-              "Please add as many details as possible to help identify the problem."
-            )
-          }}
-        </p>
-
-        <details>
-          <summary class="is-size-5">{{ $t("Technical details") }}</summary>
-          <p>{{ $t("Error message") }}</p>
-          <pre>{{ error }}</pre>
-          <p>{{ $t("Error stacktrace") }}</p>
-          <pre>{{ error.stack }}</pre>
-        </details>
-        <p v-if="!sentryEnabled">
-          {{
-            $t(
-              "The technical details of the error can help developers solve the problem more easily. Please add them to your feedback."
-            )
-          }}
-        </p>
-        <div class="buttons" v-if="!sentryEnabled">
-          <b-tooltip
-            :label="tooltipConfig.label"
-            :type="tooltipConfig.type"
-            :active="copied !== false"
-            always
-          >
-            <b-button
-              @click="copyErrorToClipboard"
-              @keyup.enter="copyErrorToClipboard"
-              >{{ $t("Copy details to clipboard") }}</b-button
-            >
-          </b-tooltip>
-        </div>
-      </section>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { CONFIG } from "@/graphql/config";
-import { checkProviderConfig, convertConfig } from "@/services/statistics";
-import { IAnalyticsConfig, IConfig } from "@/types/config.model";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { LOGGED_USER } from "@/graphql/user";
-import { IUser } from "@/types/current-user.model";
-import { ISentryConfiguration } from "@/types/analytics/sentry.model";
-import { submitFeedback } from "@/services/statistics/sentry";
-import RouteName from "@/router/name";
-
-@Component({
-  apollo: {
-    config: CONFIG,
-    loggedUser: LOGGED_USER,
-  },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: this.$t("Error") as string,
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class ErrorComponent extends Vue {
-  @Prop({ required: true, type: Error }) error!: Error;
-
-  copied: "success" | "error" | false = false;
-
-  config!: IConfig;
-
-  feedback = "";
-
-  submittedFeedback = false;
-
-  feedbackError = false;
-
-  loggedUser!: IUser;
-
-  RouteName = RouteName;
-
-  async copyErrorToClipboard(): Promise<void> {
-    try {
-      if (window.isSecureContext && navigator.clipboard) {
-        await navigator.clipboard.writeText(this.fullErrorString);
-      } else {
-        this.fallbackCopyTextToClipboard(this.fullErrorString);
-      }
-      this.copied = "success";
-      setTimeout(() => {
-        this.copied = false;
-      }, 2000);
-    } catch (e) {
-      this.copied = "error";
-      console.error("Unable to copy to clipboard");
-      console.error(e);
-    }
-  }
-
-  get fullErrorString(): string {
-    return `${this.error.name}: ${this.error.message}\n\n${this.error.stack}`;
-  }
-
-  get tooltipConfig(): { label: string | null; type: string | null } {
-    if (this.copied === "success")
-      return {
-        label: this.$t("Error details copied!") as string,
-        type: "is-success",
-      };
-    if (this.copied === "error")
-      return {
-        label: this.$t("Unable to copy to clipboard") as string,
-        type: "is-danger",
-      };
-    return { label: null, type: "is-primary" };
-  }
-
-  private fallbackCopyTextToClipboard(text: string): void {
-    const textArea = document.createElement("textarea");
-    textArea.value = text;
-
-    // Avoid scrolling to bottom
-    textArea.style.top = "0";
-    textArea.style.left = "0";
-    textArea.style.position = "fixed";
-
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-
-    document.execCommand("copy");
-
-    document.body.removeChild(textArea);
-  }
-
-  get sentryEnabled(): boolean {
-    return this.sentryProvider?.enabled === true;
-  }
-
-  get sentryProvider(): IAnalyticsConfig | undefined {
-    return this.config && checkProviderConfig(this.config, "sentry");
-  }
-
-  get sentryConfig(): ISentryConfiguration | undefined {
-    if (this.sentryProvider?.configuration) {
-      return convertConfig(
-        this.sentryProvider?.configuration
-      ) as ISentryConfiguration;
-    }
-    return undefined;
-  }
-
-  get sentryReady() {
-    const eventId = window.sessionStorage.getItem("lastEventId");
-    const dsn = this.sentryConfig?.dsn;
-    const organization = this.sentryConfig?.organization;
-    const project = this.sentryConfig?.project;
-    const host = this.sentryConfig?.host;
-    return eventId && dsn && organization && project && host;
-  }
-
-  async sendErrorToSentry() {
-    try {
-      const eventId = window.sessionStorage.getItem("lastEventId");
-      const dsn = this.sentryConfig?.dsn;
-      const organization = this.sentryConfig?.organization;
-      const project = this.sentryConfig?.project;
-      const host = this.sentryConfig?.host;
-      const endpoint = `https://${host}/api/0/projects/${organization}/${project}/user-feedback/`;
-      if (eventId && dsn && this.sentryReady) {
-        await submitFeedback(endpoint, dsn, {
-          event_id: eventId,
-          name:
-            this.loggedUser?.defaultActor?.preferredUsername || "Unknown user",
-          email: this.loggedUser?.email || "unknown@email.org",
-          comments: this.feedback,
-        });
-        this.submittedFeedback = true;
-      }
-    } catch (error) {
-      console.error(error);
-      this.feedbackError = true;
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-#error-wrapper {
-  width: 100%;
-  background: $white;
-
-  section {
-    margin-bottom: 2rem;
-  }
-
-  .picture-wrapper {
-    text-align: center;
-  }
-
-  details {
-    summary:hover {
-      cursor: pointer;
-    }
-  }
-}
-</style>

js/src/components/Event/AddressAutoComplete.vue

@@ -1,151 +0,0 @@
-<template>
-  <div class="address-autocomplete">
-    <b-field expanded>
-      <b-autocomplete
-        :data="addressData"
-        v-model="queryText"
-        :placeholder="$t('e.g. 10 Rue Jangot')"
-        field="fullName"
-        :loading="isFetching"
-        @typing="fetchAsyncData"
-        icon="map-marker"
-        expanded
-        @select="updateSelected"
-        v-bind="$attrs"
-        dir="auto"
-      >
-        <template #default="{ option }">
-          <b-icon :icon="option.poiInfos.poiIcon.icon" />
-          <b>{{ option.poiInfos.name }}</b
-          ><br />
-          <small>{{ option.poiInfos.alternativeName }}</small>
-        </template>
-      </b-autocomplete>
-    </b-field>
-    <b-field
-      v-if="canDoGeoLocation"
-      :message="fieldErrors"
-      :type="{ 'is-danger': fieldErrors.length }"
-    >
-      <b-button
-        type="is-text"
-        v-if="!gettingLocation"
-        icon-right="target"
-        @click="locateMe"
-        @keyup.enter="locateMe"
-        >{{ $t("Use my location") }}</b-button
-      >
-      <span v-else>{{ $t("Getting location") }}</span>
-    </b-field>
-    <!--
-    <div v-if="selected && selected.geom" class="control">
-      <b-checkbox  @input="togglemap" />
-      <label class="label">{{ $t("Show map") }}</label>
-    </div>
-
-    <div class="map" v-if="showmap && selected && selected.geom">
-      <map-leaflet
-        :coords="selected.geom"
-        :marker="{
-          text: [selected.poiInfos.name, selected.poiInfos.alternativeName],
-          icon: selected.poiInfos.poiIcon.icon,
-        }"
-        :updateDraggableMarkerCallback="reverseGeoCode"
-        :options="{ zoom: mapDefaultZoom }"
-        :readOnly="false"
-      />
-    </div>
-    -->
-  </div>
-</template>
-<script lang="ts">
-import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
-import { Address, IAddress } from "../../types/address.model";
-import AddressAutoCompleteMixin from "@/mixins/AddressAutoCompleteMixin";
-
-@Component({
-  inheritAttrs: false,
-})
-export default class AddressAutoComplete extends Mixins(
-  AddressAutoCompleteMixin
-) {
-  @Prop({ required: false, default: false }) type!: string | false;
-  @Prop({ required: false, default: true, type: Boolean })
-  doGeoLocation!: boolean;
-
-  addressData: IAddress[] = [];
-
-  selected: IAddress = new Address();
-
-  initialQueryText = "";
-
-  addressModalActive = false;
-
-  showmap = false;
-
-  get queryText2(): string {
-    if (this.value !== undefined) {
-      return new Address(this.value).fullName;
-    }
-    return this.initialQueryText;
-  }
-
-  set queryText2(queryText: string) {
-    this.initialQueryText = queryText;
-  }
-
-  @Watch("value")
-  updateEditing(): void {
-    if (!this.value?.id) return;
-    this.selected = this.value;
-  }
-
-  updateSelected(option: IAddress): void {
-    if (option == null) return;
-    this.selected = option;
-    this.$emit("input", this.selected);
-  }
-
-  resetPopup(): void {
-    this.selected = new Address();
-  }
-
-  openNewAddressModal(): void {
-    this.resetPopup();
-    this.addressModalActive = true;
-  }
-
-  togglemap(): void {
-    this.showmap = !this.showmap;
-  }
-
-  get canDoGeoLocation(): boolean {
-    return this.isSecureContext && this.doGeoLocation;
-  }
-}
-</script>
-<style lang="scss">
-.address-autocomplete {
-  margin-bottom: 0.75rem;
-}
-
-.autocomplete {
-  .dropdown-menu {
-    z-index: 2000;
-  }
-
-  .dropdown-item.is-disabled {
-    opacity: 1 !important;
-    cursor: auto;
-  }
-}
-
-.read-only {
-  cursor: pointer;
-}
-
-.map {
-  height: 400px;
-  width: 100%;
-}
-</style>

js/src/components/Event/DateCalendarIcon.vue

@@ -1,96 +0,0 @@
-<docs>
-### Example
-```vue
-  <DateCalendarIcon date="2019-10-05T18:41:11.720Z" />
-```
-
-```vue
-  <DateCalendarIcon
-    :date="new Date()"
-  />
-```
-</docs>
-
-<template>
-  <div
-    class="datetime-container"
-    :class="{ small }"
-    :style="`--small: ${smallStyle}`"
-  >
-    <div class="datetime-container-header" />
-    <div class="datetime-container-content">
-      <time :datetime="dateObj.toISOString()" class="day">{{ day }}</time>
-      <time :datetime="dateObj.toISOString()" class="month">{{ month }}</time>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class DateCalendarIcon extends Vue {
-  /**
-   * `date` can be a string or an actual date object.
-   */
-  @Prop({ required: true }) date!: string;
-  @Prop({ required: false, default: false }) small!: boolean;
-
-  get dateObj(): Date {
-    return new Date(this.$props.date);
-  }
-
-  get month(): string {
-    return this.dateObj.toLocaleString(undefined, { month: "short" });
-  }
-
-  get day(): string {
-    return this.dateObj.toLocaleString(undefined, { day: "numeric" });
-  }
-  get smallStyle(): string {
-    return this.small ? "1.2" : "2";
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-div.datetime-container {
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  align-items: stretch;
-  width: calc(40px * var(--small));
-  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
-  height: calc(40px * var(--small));
-  background: #fff;
-
-  .datetime-container-header {
-    height: calc(10px * var(--small));
-    background: #f3425f;
-  }
-  .datetime-container-content {
-    height: calc(30px * var(--small));
-  }
-
-  time {
-    display: block;
-    font-weight: 600;
-    color: $violet-3;
-
-    &.month {
-      padding: 2px 0;
-      font-size: 12px;
-      line-height: 12px;
-      text-transform: uppercase;
-    }
-
-    &.day {
-      font-size: calc(1rem * var(--small));
-      line-height: calc(1rem * var(--small));
-    }
-  }
-}
-</style>

js/src/components/Event/EventBanner.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="banner-container">
-    <lazy-image-wrapper :picture="picture" />
-  </div>
-</template>
-<script lang="ts">
-import { IMedia } from "@/types/media.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import LazyImageWrapper from "../Image/LazyImageWrapper.vue";
-
-@Component({
-  components: {
-    LazyImageWrapper,
-  },
-})
-export default class EventBanner extends Vue {
-  @Prop({ default: null, type: Object as PropType<IMedia> })
-  picture!: IMedia | null;
-}
-</script>
-<style lang="scss" scoped>
-.banner-container {
-  display: flex;
-  justify-content: center;
-  height: 30vh;
-}
-::v-deep img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: 50% 50%;
-}
-</style>

js/src/components/Event/EventCard.vue

@@ -1,272 +0,0 @@
-<template>
-  <router-link
-    class="card"
-    :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
-  >
-    <div class="card-image">
-      <figure class="image is-16by9">
-        <lazy-image-wrapper
-          :picture="event.picture"
-          style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
-        />
-        <div
-          class="tag-container"
-          v-if="event.tags || event.status !== EventStatus.CONFIRMED"
-        >
-          <b-tag type="is-info" v-if="event.status === EventStatus.TENTATIVE">
-            {{ $t("Tentative") }}
-          </b-tag>
-          <b-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">
-            {{ $t("Cancelled") }}
-          </b-tag>
-          <router-link
-            :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
-            v-for="tag in (event.tags || []).slice(0, 3)"
-            :key="tag.slug"
-          >
-            <b-tag type="is-light" dir="auto">{{ tag.title }}</b-tag>
-          </router-link>
-        </div>
-      </figure>
-    </div>
-    <div class="card-content">
-      <div class="media">
-        <div class="media-left">
-          <date-calendar-icon
-            :small="true"
-            v-if="!mergedOptions.hideDate"
-            :date="event.beginsOn"
-          />
-        </div>
-        <div class="media-content">
-          <h3
-            class="event-title"
-            :title="event.title"
-            dir="auto"
-            :lang="event.language"
-          >
-            {{ event.title }}
-          </h3>
-          <div class="content-end">
-            <div class="event-organizer" dir="auto">
-              <figure
-                class="image is-24x24"
-                v-if="organizer(event) && organizer(event).avatar"
-              >
-                <img
-                  class="is-rounded"
-                  :src="organizer(event).avatar.url"
-                  alt=""
-                />
-              </figure>
-              <b-icon v-else icon="account-circle" />
-              <span class="organizer-name">
-                {{ organizerDisplayName(event) }}
-              </span>
-            </div>
-            <inline-address
-              dir="auto"
-              v-if="event.physicalAddress"
-              :physical-address="event.physicalAddress"
-            />
-            <div
-              class="event-subtitle"
-              dir="auto"
-              v-else-if="event.options && event.options.isOnline"
-            >
-              <b-icon icon="video" />
-              <span>{{ $t("Online") }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </router-link>
-</template>
-
-<script lang="ts">
-import {
-  IEvent,
-  IEventCardOptions,
-  organizerDisplayName,
-  organizer,
-} from "@/types/event.model";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
-import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
-import { Actor, Person } from "@/types/actor";
-import { EventStatus, ParticipantRole } from "@/types/enums";
-import RouteName from "../../router/name";
-import InlineAddress from "@/components/Address/InlineAddress.vue";
-
-@Component({
-  components: {
-    DateCalendarIcon,
-    LazyImageWrapper,
-    InlineAddress,
-  },
-})
-export default class EventCard extends Vue {
-  @Prop({ required: true }) event!: IEvent;
-
-  @Prop({ required: false }) options!: IEventCardOptions;
-
-  ParticipantRole = ParticipantRole;
-
-  EventStatus = EventStatus;
-
-  RouteName = RouteName;
-
-  organizerDisplayName = organizerDisplayName;
-
-  organizer = organizer;
-
-  defaultOptions: IEventCardOptions = {
-    hideDate: false,
-    loggedPerson: false,
-    hideDetails: false,
-    organizerActor: null,
-    memberofGroup: false,
-  };
-
-  get mergedOptions(): IEventCardOptions {
-    return { ...this.defaultOptions, ...this.options };
-  }
-
-  get actor(): Actor {
-    return Object.assign(
-      new Person(),
-      this.event.organizerActor || this.mergedOptions.organizerActor
-    );
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-@use "@/styles/_event-card";
-
-a.card {
-  display: block;
-  background: $secondary;
-  color: #3c376e;
-
-  &:hover {
-    // box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
-    transform: scale(1.01, 1.01);
-    &:after {
-      opacity: 1;
-    }
-  }
-
-  border-radius: 5px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-
-  &:after {
-    content: "";
-    border-radius: 5px;
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    opacity: 0;
-    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-  }
-
-  div.tag-container {
-    position: absolute;
-    top: 10px;
-    right: 0;
-    @include margin-right(-3px);
-    z-index: 10;
-    max-width: 40%;
-
-    a {
-      text-decoration: none;
-    }
-
-    span.tag {
-      margin: 5px auto;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: block;
-      font-size: 0.9em;
-      line-height: 1.75em;
-
-      &:not(.is-info, .is-danger) {
-        background-color: #e6e4f4;
-        color: $violet-3;
-      }
-      &.is-info {
-        color: $violet-3;
-      }
-    }
-  }
-
-  div.card-image {
-    background: $secondary;
-
-    figure.image {
-      background-size: cover;
-      background-position: center;
-    }
-  }
-
-  .card-content {
-    height: 100%;
-    padding: 0.5rem;
-
-    & > .media {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-
-      & > .media-left {
-        margin-top: -15px;
-        height: 0;
-        display: flex;
-        align-items: flex-end;
-        align-self: flex-start;
-        margin-bottom: 15px;
-        @include margin-left(0);
-      }
-
-      & > .media-content {
-        flex: 1;
-        width: 100%;
-        overflow-x: inherit;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-      }
-    }
-
-    .event-title {
-      font-size: 18px;
-      line-height: 24px;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      font-weight: bold;
-    }
-
-    .content-end {
-      padding-top: 8px;
-    }
-
-    .event-subtitle {
-      font-size: 0.85rem;
-    }
-
-    .organizer-name {
-      font-size: 14px;
-    }
-  }
-}
-</style>