.devcontainer/Dockerfile

@@ -1,66 +0,0 @@
-# Update the VARIANT arg in docker-compose.yml to pick an Elixir version: 1.9, 1.10, 1.10.4
-ARG VARIANT="1.12.3"
-FROM elixir:${VARIANT}
-
-# This Dockerfile adds a non-root user with sudo access. Update the “remoteUser” property in
-# devcontainer.json to use it. More info: https://aka.ms/vscode-remote/containers/non-root-user.
-ARG USERNAME=vscode
-ARG USER_UID=1000
-ARG USER_GID=$USER_UID
-
-# Options for common package install script
-ARG INSTALL_ZSH="true"
-ARG UPGRADE_PACKAGES="true"
-ARG COMMON_SCRIPT_SOURCE="https://raw.githubusercontent.com/microsoft/vscode-dev-containers/v0.209.6/script-library/common-debian.sh"
-ARG COMMON_SCRIPT_SHA="d35dd1711454156c9a59cc41ebe04fbff681ca0bd304f10fd5b13285d0de13b2"
-
-# Optional Settings for Phoenix
-ARG PHOENIX_VERSION="1.6.2"
-
-# [Optional] Setup nodejs
-ARG NODE_SCRIPT_SOURCE="https://raw.githubusercontent.com/microsoft/vscode-dev-containers/main/script-library/node-debian.sh"
-ARG NODE_SCRIPT_SHA="dev-mode"
-ARG NODE_VERSION="none"
-ENV NVM_DIR=/usr/local/share/nvm
-ENV NVM_SYMLINK_CURRENT=true
-ENV PATH=${NVM_DIR}/current/bin:${PATH}
-
-# [Optional, Choice] Node.js version: none, lts/*, 16, 14, 12, 10
-ARG NODE_VERSION="none"
-
-# Install needed packages and setup non-root user. Use a separate RUN statement to add your own dependencies.
-RUN apt-get update \
-  && export DEBIAN_FRONTEND=noninteractive \
-  && apt-get -y install --no-install-recommends curl ca-certificates 2>&1 \
-  && curl -sSL ${COMMON_SCRIPT_SOURCE} -o /tmp/common-setup.sh \
-  && ([ "${COMMON_SCRIPT_SHA}" = "dev-mode" ] || (echo "${COMMON_SCRIPT_SHA} */tmp/common-setup.sh" | sha256sum -c -)) \
-  && /bin/bash /tmp/common-setup.sh "${INSTALL_ZSH}" "${USERNAME}" "${USER_UID}" "${USER_GID}" "${UPGRADE_PACKAGES}" \
-  #
-  # [Optional] Install Node.js for use with web applications
-  && if [ "$NODE_VERSION" != "none" ]; then \
-  curl -sSL ${NODE_SCRIPT_SOURCE} -o /tmp/node-setup.sh \
-  && ([ "${NODE_SCRIPT_SHA}" = "dev-mode" ] || (echo "${NODE_SCRIPT_SHA} */tmp/node-setup.sh" | sha256sum -c -)) \
-  && /bin/bash /tmp/node-setup.sh "${NVM_DIR}" "${NODE_VERSION}" "${USERNAME}"; \
-  fi \
-  #
-  # Install dependencies
-  && apt-get install -y build-essential \
-  #
-  # Clean up
-  && apt-get autoremove -y \
-  && apt-get clean -y \
-  && rm -rf /var/lib/apt/lists/* /tmp/common-setup.sh /tmp/node-setup.sh
-
-RUN su ${USERNAME} -c "mix local.hex --force \
-  && mix local.rebar --force \
-  && mix archive.install --force hex phx_new ${PHOENIX_VERSION}"
-
-RUN apt-get update \
-  && export DEBIAN_FRONTEND=noninteractive \
-  && apt-get -y install --no-install-recommends cmake webp bash libncurses6 git python3 inotify-tools \
-  && apt-get autoremove -y \
-  && apt-get clean -y \
-  && rm -rf /var/lib/apt/lists/*
-
-# [Optional] Uncomment this line to install additional package.
-# RUN  mix ...

.devcontainer/devcontainer.json

@@ -1,44 +0,0 @@
-// 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",
-
-	// 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"
-	],
-
-	// 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",
-
-	// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "vscode"
-}

.devcontainer/docker-compose.yml

@@ -1,46 +0,0 @@
-version: "3.8"
-
-services:
-  elixir:
-    build:
-      context: .
-      dockerfile: Dockerfile
-      args:
-        # Elixir Version: 1.9, 1.10, 1.10.4, ...
-        VARIANT: "1.13.1"
-        # Phoenix Version: 1.4.17, 1.5.4, ...
-        PHOENIX_VERSION: "1.6.6"
-        # Node Version: 10, 11, ...
-        NODE_VERSION: "16"
-
-    volumes:
-      - ..:/workspace:z
-    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
-    network_mode: service:db
-
-    # Overrides default command so things don't shut down after the process ends.
-    command: sleep infinity
-    environment:
-      MOBILIZON_INSTANCE_NAME: My Mobilizon Instance
-      MOBILIZON_INSTANCE_HOST: localhost
-      MOBILIZON_INSTANCE_HOST_PORT: 4000
-      MOBILIZON_INSTANCE_PORT: 4000
-      MOBILIZON_INSTANCE_EMAIL: noreply@mobilizon.me
-      MOBILIZON_INSTANCE_REGISTRATIONS_OPEN: "true"
-      MOBILIZON_DATABASE_PASSWORD: postgres
-      MOBILIZON_DATABASE_USERNAME: postgres
-      MOBILIZON_DATABASE_DBNAME: mobilizon
-      MOBILIZON_DATABASE_HOST: db
-
-  db:
-    image: postgis/postgis:latest
-    restart: unless-stopped
-    volumes:
-      - postgres-data:/var/lib/postgresql/data
-    environment:
-      POSTGRES_USER: postgres
-      POSTGRES_PASSWORD: postgres
-      POSTGRES_DB: app
-
-volumes:
-  postgres-data: null

.doctor.exs

@@ -1,15 +0,0 @@
-%Doctor.Config{
-  exception_moduledoc_required: true,
-  failed: false,
-  ignore_modules: [Mobilizon.Web, Mobilizon.GraphQL.Schema, Mobilizon.Service.Activity.Renderer, Mobilizon.Service.Workers.Helper],
-  ignore_paths: [],
-  min_module_doc_coverage: 100,
-  min_module_spec_coverage: 50,
-  min_overall_doc_coverage: 100,
-  min_overall_spec_coverage: 90,
-  moduledoc_required: true,
-  raise: false,
-  reporter: Doctor.Reporters.Full,
-  struct_type_spec_required: true,
-  umbrella: false
-}

.env.template

@@ -1,24 +0,0 @@
-# Database settings
-POSTGRES_USER=mobilizon
-POSTGRES_PASSWORD=changethis
-POSTGRES_DB=mobilizon
-POSTGRES_PORT=5432
-
-# Instance configuration
-MOBILIZON_INSTANCE_REGISTRATIONS_OPEN=false
-MOBILIZON_INSTANCE_NAME=My Mobilizon Instance
-MOBILIZON_INSTANCE_HOST=mobilizon.lan
-MOBILIZON_INSTANCE_PORT=4000
-
-MOBILIZON_INSTANCE_SECRET_KEY_BASE=changethis
-MOBILIZON_INSTANCE_SECRET_KEY=changethis
-
-MOBILIZON_INSTANCE_EMAIL=noreply@mobilizon.lan
-MOBILIZON_REPLY_EMAIL=contact@mobilizon.lan
-
-# Email settings
-MOBILIZON_SMTP_SERVER=localhost
-MOBILIZON_SMTP_PORT=25
-MOBILIZON_SMTP_USERNAME=noreply@mobilizon.lan
-MOBILIZON_SMTP_PASSWORD=password
-MOBILIZON_SMTP_SSL=false

.formatter.exs

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

.gitignore

@@ -27,19 +27,15 @@ priv/data/*
 priv/errors/*
 !priv/errors/.gitkeep
 priv/cert/
-priv/python/__pycache__/
 .vscode/
 cover/
 site/
 test/fixtures/image_tmp.jpg
-test/fixtures/picture_tmp.png
 test/fixtures/DSCN0010_tmp.jpg
 test/uploads/
 uploads/*
 release/
 !uploads/.gitkeep
-!uploads/exports/.gitkeep
-!uploads/exports/**/.gitkeep
 .idea
 *.mo
 *.po~
@@ -47,5 +43,3 @@ release/
 docker/production/.env
 test-junit-report.xml
 js/junit.xml
-.env
-demo/

.gitlab-ci.yml

@@ -28,10 +28,6 @@ variables:
   # Release elements
   PACKAGE_REGISTRY_URL: "${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/${CI_PROJECT_NAME}"
   ARCH: "amd64"
-  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}"
@@ -59,11 +55,8 @@ lint-elixir:
     - mix deps.get
   script:
     - export EXITVALUE=0
-    - git fetch origin ${CI_DEFAULT_BRANCH}
-    - TARGET_SHA1=$(git show-ref -s ${CI_DEFAULT_BRANCH})
-    - echo "$TARGET_SHA1"
     - mix format --check-formatted --dry-run || export EXITVALUE=1
-    - mix credo diff --from-git-merge-base $TARGET_SHA1 --strict -a || export EXITVALUE=1
+    - mix credo --strict -a || export EXITVALUE=1
     - mix sobelow --config || export EXITVALUE=1
     - exit $EXITVALUE
 
@@ -107,15 +100,32 @@ deps:
   needs:
     - install
 
-exunit:
+exunit-1.11:
   stage: test
+  image: tcitworld/mobilizon-ci:legacy
   services:
-    - name: postgis/postgis:14-3.2
+    - name: postgis/postgis:11-3.0
       alias: postgres
   variables:
     MIX_ENV: test
   before_script:
-    - mix deps.get && mix tz_world.update
+    - mix deps.clean --all
+    - mix deps.get
+    - mix ecto.create
+    - mix ecto.migrate
+  script:
+    - mix coveralls
+  allow_failure: true
+
+exunit:
+  stage: test
+  services:
+    - name: postgis/postgis:13-3.1
+      alias: postgres
+  variables:
+    MIX_ENV: test
+  before_script:
+    - mix deps.get
     - mix ecto.create
     - mix ecto.migrate
   script:
@@ -175,7 +185,7 @@ pages:
   #     #- yarn run --cwd "js" styleguide:build
   #     #- mv js/styleguide public/frontend
   rules:
-    - if: '$CI_COMMIT_BRANCH == "main"'
+    - if: '$CI_COMMIT_BRANCH == "master"'
   artifacts:
     expire_in: 1 hour
     paths:
@@ -183,42 +193,24 @@ pages:
 
 .docker: &docker
   stage: docker
-  image: docker:20.10.12
-  variables:
-    DOCKER_TLS_CERTDIR: "/certs"
-    DOCKER_HOST: tcp://docker:2376
-    DOCKER_TLS_VERIFY: 1
-    DOCKER_CERT_PATH: "$DOCKER_TLS_CERTDIR/client"
-    DOCKER_DRIVER: overlay2
-  services:
-    - docker:20.10.12-dind
   cache: {}
+  image:
+    name: gcr.io/kaniko-project/executor:debug
+    entrypoint: [""]
   before_script:
-    # Install buildx
-    - wget https://github.com/docker/buildx/releases/download/v0.8.1/buildx-v0.8.1.linux-amd64
-    - mkdir -p ~/.docker/cli-plugins/
-    - mv buildx-v0.8.1.linux-amd64 ~/.docker/cli-plugins/docker-buildx
-    - chmod a+x ~/.docker/cli-plugins/docker-buildx
-    # Create env
-    - docker context create tls-environment
-    - docker buildx create --use tls-environment
-    # Install qemu/binfmt
-    - docker pull tonistiigi/binfmt:latest
-    - docker run --rm --privileged tonistiigi/binfmt:latest --install all
-    # Login to DockerHub
-    - mkdir -p ~/.docker
-    - echo "{\"auths\":{\"$CI_REGISTRY\":{\"auth\":\"$CI_REGISTRY_AUTH\",\"email\":\"$CI_REGISTRY_EMAIL\"}}}" > ~/.docker/config.json
-  tags:
-    - "privileged"
+    - mkdir -p /kaniko/.docker
+    - echo "{\"auths\":{\"$CI_REGISTRY\":{\"auth\":\"$CI_REGISTRY_AUTH\",\"email\":\"$CI_REGISTRY_EMAIL\"}}}" > /kaniko/.docker/config.json
+  script:
+    - /kaniko/executor --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/docker/production/Dockerfile --destination $DOCKER_IMAGE_NAME --build-arg VCS_REF=$CI_VCS_REF --build-arg BUILD_DATE=$CI_JOB_TIMESTAMP
 
-build-docker-main:
+build-docker-master:
   <<: *docker
   rules:
     - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
       when: never
     - if: '$CI_PIPELINE_SOURCE == "schedule"'
-  script:
-    - docker buildx build --push --platform linux/amd64 -t framasoft/mobilizon:main -f docker/production/Dockerfile .
+  variables:
+    DOCKER_IMAGE_NAME: framasoft/mobilizon:master
 
 build-docker-tag:
   <<: *docker
@@ -226,43 +218,26 @@ build-docker-tag:
     - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
       when: never
     - if: $CI_COMMIT_TAG
-  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
-      -f docker/production/Dockerfile .
+  variables:
+    DOCKER_IMAGE_NAME: framasoft/mobilizon:$CI_COMMIT_TAG
 
-# Packaging app for amd64
 package-app:
-  image: mobilizon/buildpack:1.13.4-erlang-24.3.3-debian-buster
   stage: package
   variables: &release-variables
     MIX_ENV: "prod"
-    DEBIAN_FRONTEND: noninteractive
-    TZ: Etc/UTC
-    APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
   script: &release-script
     - mix local.hex --force
     - mix local.rebar --force
-    - mix deps.get --only-prod
-    - mix compile
-    - mix phx.digest.clean --all && \
+    - mix deps.get
+    - mix phx.digest
     - mix release --path release/mobilizon
-    - cd release/mobilizon && ln -s lib/mobilizon-*/priv priv && cd ../../
-    - du -sh release/
-    - 'echo "Artifact: ${APP_ASSET}"'
-    - tar czf ${APP_ASSET} -C release mobilizon
-    - du -sh ${APP_ASSET}
+    - cd release/mobilizon && ln -s lib/mobilizon-*/priv priv
   only:
     - tags@framasoft/mobilizon
   artifacts:
-    expire_in: 2 days
+    expire_in: never
     paths:
-      - ${APP_ASSET}
+      - release
 
 package-app-dev:
   stage: package
@@ -273,64 +248,20 @@ package-app-dev:
   artifacts:
     expire_in: 2 days
     paths:
-      - ${APP_ASSET}
+      - release
 
-# Packaging app for multi-arch
-multi-arch-release:
-  stage: package
-  image: docker:20.10.12
-  variables:
-    DOCKER_TLS_CERTDIR: "/certs"
-    DOCKER_HOST: tcp://docker:2376
-    DOCKER_TLS_VERIFY: 1
-    DOCKER_CERT_PATH: "$DOCKER_TLS_CERTDIR/client"
-    DOCKER_DRIVER: overlay2
-    APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
-    OS: debian-buster
-  services:
-    - docker:20.10.12-dind
-  cache: {}
-  before_script:
-    # Install buildx
-    - wget https://github.com/docker/buildx/releases/download/v0.8.1/buildx-v0.8.1.linux-amd64
-    - mkdir -p ~/.docker/cli-plugins/
-    - mv buildx-v0.8.1.linux-amd64 ~/.docker/cli-plugins/docker-buildx
-    - chmod a+x ~/.docker/cli-plugins/docker-buildx
-    # Create env
-    - docker context create tls-environment
-    - docker buildx create --use tls-environment
-    # Install qemu/binfmt
-    - 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 .
-    - ls -alh releases/mobilizon/
-    - du -sh releases/mobilizon/${APP_ASSET}
-    - mv releases/mobilizon/${APP_ASSET} .
-  tags:
-    - "privileged"
-  artifacts:
-    expire_in: 2 days
-    paths:
-      - ${APP_ASSET}
-  parallel:
-    matrix:
-      - ARCH: ["arm", "arm64"]
-  rules:
-    - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
-      when: never
-    - if: '$CI_PIPELINE_SOURCE == "schedule"'
-    - if: $CI_COMMIT_TAG
-  timeout: 3h
-
-# Release
 release-upload:
   stage: upload
-  image: framasoft/upload-packages:latest
-  variables:
-    APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
+  image: framasoft/yakforms-assets-deploy:latest
   rules: *tag-rules
   script:
+    - APP_VERSION="${CI_COMMIT_TAG}"
+    - APP_ASSET="${CI_PROJECT_NAME}_${APP_VERSION}_${ARCH}.tar.gz"
+
+    - 'echo "Artifact: ${APP_ASSET}"'
+    - tar czf ${APP_ASSET} -C release mobilizon
+    - ls -al ${APP_ASSET}
+
     - eval `ssh-agent -s`
     - ssh-add <(echo "${DEPLOYEMENT_KEY}" | base64 --decode -i)
     - echo "put -r ${APP_ASSET}" | sftp -o "VerifyHostKeyDNS yes" ${DEPLOYEMENT_USER}@${DEPLOYEMENT_HOST}:public/
@@ -339,27 +270,20 @@ release-upload:
     when: on_success
     paths:
       - mobilizon_*.tar.gz
-  parallel:
-    matrix:
-      - ARCH: ["amd64", "arm", "arm64"]
 
 release-create:
   stage: deploy
   image: registry.gitlab.com/gitlab-org/release-cli:latest
   rules: *tag-rules
-  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"
-    APP_ASSET_ARM64: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_arm64.tar.gz"
   before_script:
     - apk --no-cache add gawk sed grep
   script: |
+    APP_VERSION="${CI_COMMIT_TAG}"
+    APP_ASSET="${CI_PROJECT_NAME}_${APP_VERSION}_${ARCH}.tar.gz"
     CHANGELOG=$(awk -v version="$APP_VERSION" '/^## / { printit = $2 == version }; printit' CHANGELOG.md | grep -v "## $APP_VERSION" | sed '1{/^$/d}')
     ENDPOINT="https://packages.joinmobilizon.org"
 
     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}\",\"url\":\"${ENDPOINT}/${APP_ASSET}\"}"

.ncignore

@@ -1 +0,0 @@
-deps

.sobelow-conf

@@ -8,5 +8,5 @@
   out: "",
   threshold: "medium",
   ignore: ["Config.HTTPS", "Config.CSP"],
-  ignore_files: ["config/runtime.exs"]
+  ignore_files: ["config/dev.1.secret.exs", "config/dev.2.secret.exs", "config/dev.3.secret.exs", "config/dev.secret.exs", "config/e2e.secret.exs", "config/prod.secret.exs", "config/test.secret.exs", "config/runtime.1.secret.exs", "config/runtime.2.secret.exs", "config/runtime.3.secret.exs", "config/runtime.exs"]
 ]

.sobelow-skips

@@ -1,16 +1,10 @@
 
-02CE4963DFD1B0D6D5C567357CAFFE97
+5048AE33D6269B15E21CF28C6F545AB6
+
+752C0E897CA81ACD81F4BB215FA5F8E4
+23412CF16549E4E88366DC9DECF39071
+81C1F600C5809C7029EE32DE4818CD7D
 155A1FB53DE39EC8EFCFD7FB94EA823D
-2262742E5C8944D5BF6698EC61F5DE50
-25BEE162A99754480967216281E9EF33
-2A6F71CD6F1246F0B152C2376E2E398A
-30552A09D485A6AA73401C1D54F63C21
-52900CE4EE3598F6F178A651FB256770
-6151F44368FC19F2394274F513C29151
-765526195D4C6D770EAF4DC944A8CBF4
-B2FF1A12F13B873507C85091688C1D6D
-B9AF8A342CD7FF39E10CC10A408C28E1
-C042E87389F7BDCFF4E076E95731AE69
-C42BFAEF7100F57BED75998B217C857A
-D11958E86F1B6D37EF656B63405CA8A4
-F16F054F2628609A726B9FF2F089D484
+73B351E4CB3AF715AD450A085F5E6304
+BBACD7F0BACD4A6D3010C26604671692
+6D4D4A4821B93BCFAC9CDBB367B34C4B

.tool-versions

@@ -1,2 +0,0 @@
-elixir 1.13.4-otp-24
-erlang 24.3.3

Dockerfile

@@ -1,6 +1,6 @@
-FROM elixir:alpine
+FROM bitwalker/alpine-elixir:latest
 
-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 yarn file make gcc libc-dev argon2 imagemagick cmake build-base libwebp-tools bash ncurses
 
 RUN mix local.hex --force && mix local.rebar --force
 

Makefile

@@ -1,27 +1,18 @@
 init:
-	@bash docker/message.sh "Start"
+	@bash docker/message.sh "start"
 	make start
 
-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'
-migrate:
-	docker-compose run --rm api mix ecto.migrate
-logs:
-	docker-compose logs -f
 start: stop
-	@bash docker/message.sh "Starting Mobilizon with Docker"
+	@bash docker/message.sh "starting Mobilizon with docker"
 	docker-compose up -d api
-	@bash docker/message.sh "Docker server started"
+	@bash docker/message.sh "Docker server started."
 stop:
-	@bash docker/message.sh "Stopping Mobilizon"
+	@bash docker/message.sh "stopping Mobilizon"
 	docker-compose down
-	@bash docker/message.sh "Mobilizon is stopped"
+	@bash docker/message.sh "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)
-	@bash docker/message.sh "Done running tests"
-format: 
-	docker-compose run --rm api bash -c "mix format && mix credo --strict"
-	@bash docker/message.sh "Code is now ready to commit :)"
+	docker-compose -f docker-compose.yml -f docker-compose.test.yml run api mix test
+	@bash docker/message.sh "Tests runned"
+
 target: init

README.md

@@ -20,7 +20,7 @@ Mobilizon is your federated organization and mobilization platform. Gather peopl
 
 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.
 
-The Mobilizon software is under a Free licence, so anyone can host a Mobilizon server, called an instance. These instances may federate with each other, so any person with an account on _ExampleMeet_ will be able to register to an event created on _SpecimenEvent_.
+The Mobilizon software is under a Free licence, so anyone can host a Mobilizon server, called an instance. These instances may federate with each other, so any person with an account on *ExampleMeet* will be able to register to an event created on *SpecimenEvent*.
 
 ## ✨ Features
 
@@ -33,7 +33,7 @@ You will have the power to create multiple identities from the same account, lik
 
 ### 📅 Events and groups
 
-Create your events and make sure they will appeal to everybody.
+Create your events and make sure they will appeal to everybody. 
 Privacy settings and participants roles are supported.
 There's no lock-in, you can interact with the event without registration.
 
@@ -46,26 +46,23 @@ We appreciate any contribution to Mobilizon. Check our [CONTRIBUTING](CONTRIBUTI
 ## Links
 
 ### Learn more
-
-- 🌐 Official website: [https://joinmobilizon.org](https://joinmobilizon.org)
-- 🔢 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)
-
+  * 🌐 Official website: [https://joinmobilizon.org](https://joinmobilizon.org)
+  * 🔢 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)
+  
 ### Discuss
-
-- 💬 Element/Matrix: [https://matrix.to/#/#Mobilizon:matrix.org](https://matrix.to/#/#Mobilizon:matrix.org)
-- 🗣️ Forum: [https://framacolibri.org/c/mobilizon](https://framacolibri.org/c/mobilizon)
+  * 💬 Element/Matrix: [https://matrix.to/#/#Mobilizon:matrix.org](https://matrix.to/#/#Mobilizon:matrix.org)
+  * 🗣️ Forum: [https://framacolibri.org/c/mobilizon](https://framacolibri.org/c/mobilizon)
 
 ### Follow
-
-- 🐘 Mastodon: [https://framapiaf.org/@mobilizon](https://framapiaf.org/@mobilizon)
-- 🐦 Twitter [https://twitter.com/@joinmobilizon](https://twitter.com/@joinmobilizon)
-
+  * 🐘 Mastodon: [https://framapiaf.org/@mobilizon](https://framapiaf.org/@mobilizon)
+  * 🐦 Twitter [https://twitter.com/@joinmobilizon](https://twitter.com/@joinmobilizon)
+  
 Note: Most federation code comes from [Pleroma](https://pleroma.social), which is `Copyright © 2017-2018 Pleroma Authors - AGPL-3.0`.
 
-## ❤️ Supports of our crowdfunding
 
+## ❤️ Supports of our crowdfunding
 ---
 
 We have run [a crowdfunding campaign](https://framablog.org/2019/05/14/mobilizon-lets-finance-a-software-to-free-our-events-from-facebook/) to pave the road to the version 1.0.0 of Mobilizon. Thanks to everyone who pitched in and shared the news around! The list of [everyone who donated is available here](https://joinmobilizon.org/hall-of-fame).

SECURITY.md

@@ -5,15 +5,15 @@ Framasoft, the Mobilizon maintainer team and community take all security bugs in
 
 ### Goals
 
-- Mobilizon users can understand the distinctions between public data and private data/metadata on Mobilizon.
+* Mobilizon users can understand the distinctions between public data and private data/metadata on Mobilizon.
 
-- Users always know where their private data/metadata resides, who has access to it, and are able to access, export, and delete it.
+* Users always know where their private data/metadata resides, who has access to it, and are able to access, export, and delete it.
 
-- Protect private user data/metadata, not just from hackers but also (as much as is possible) from other users, instance admins, community moderators, and external applications.
+* Protect private user data/metadata, not just from hackers but also (as much as is possible) from other users, instance admins, community moderators, and external applications.
 
-- Secure from malicious creation, alteration or deletion of public data.
+* Secure from malicious creation, alteration or deletion of public data.
 
-- GDPR compliance.
+* 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.
 
@@ -21,11 +21,11 @@ Framasoft is both a developer of open-source/free/libre self-hosted software, an
 
 [Mobilizon](https://joinmobilizon.org) will be challenging to keep secure, as it is:
 
-- open source, both back-end and front-end
+* open source, both back-end and front-end
 
-- self-hosted by diverse organisations and individuals
+* self-hosted by diverse organisations and individuals
 
-- federated (data is transmitted between different hosted instances)
+* federated (data is transmitted between different hosted instances)
 
 This means there are more attack surfaces compared to typical proprietary, centralised platforms, but also means that hackers and even users can review every part of Mobilizon and make sure that it works as expected. This should result in more secure software, and higher trust in the application and its ecosystem.
 
@@ -33,14 +33,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.
-- 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;
-- 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
+* Alert us about the vulnerability as soon as you become aware of it by emailing the lead maintainer at tcit+mobilizon@framasoft.org.
+* 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;
+* 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
 
 Note : Please report security bugs in third-party modules to the person or team maintaining the module.
 

UPGRADE.md

@@ -1,182 +1,37 @@
-# Upgrading from 2.0 to 2.1
-
-## Mailer library change
-
-### Docker
-
-The change is already applied. You may remove the `MOBILIZON_SMTP_HOSTNAME` environment key which is not used anymore.
-
-### Release and source mode
-
-In your configuration file under `config :mobilizon, Mobilizon.Web.Email.Mailer`,
-
-- Change `Bamboo.SMTPAdapter` to `Swoosh.Adapters.SMTP`,
-- rename the `server` key to `relay`
-- remove the `hostname` key,
-- the default value of the username and password fields is an empty string and no longer `nil`.
-
-```diff
- config :mobilizon, Mobilizon.Web.Email.Mailer,
--   adapter: Bamboo.SMTPAdapter,
-+   adapter: Swoosh.Adapters.SMTP,
--   server: "localhost",
-+   relay: "localhost",
--   hostname: "localhost",
-   # usually 25, 465 or 587
-   port: 25,
--   username: nil,
-+   username: "",
--   password: nil,
-+   password: "",
-   # can be `:always` or `:never`
-   tls: :if_available,
-   allowed_tls_versions: [:tlsv1, :"tlsv1.1", :"tlsv1.2"],
-   retries: 1,
-   # can be `true`
-   no_mx_lookups: false,
-   # can be `:always`. If your smtp relay requires authentication set it to `:always`.
-   auth: :if_available
-```
-
-# Upgrading from 1.3 to 2.0
-
-Requirements dependencies depend on the way Mobilizon is installed.
-
-## New Elixir version requirement
-
-### Docker and Release install
-
-You are already using latest Elixir version in the release tarball and Docker images.
-
-### Source install
-
-**Elixir 1.12 and Erlang OTP 22 are now required**. If your distribution or the repositories from Erlang Solutions don't provide these versions, you need to uninstall the current versions and install [Elixir](https://github.com/asdf-vm/asdf-elixir) through the [ASDF tool](https://asdf-vm.com/).
-
-## Geographic timezone data
-
-Mobilizon 2.0 uses data based on [timezone-boundary-builder](https://github.com/evansiroky/timezone-boundary-builder) (which is based itself on OpenStreetMap data) to determine the timezone of an event automatically, based on it's geocoordinates. However, this needs ~700Mio of disk, so we don't redistribute data directly, depending on the case. It's possible to skip this part, but users will need to manually pick the timezone for every event they created when it has a different timezone from their own.
-
-### Docker install
-
-The geographic timezone data is already bundled into the image, you have nothing to do.
-
-### Release install
-
-In order to keep the release tarballs light, the geographic timezone data is not bundled directly. You need to download the data :
-
-- either raw from Github, but **requires an extra ~1Gio of memory** to process the data
-
-  ```sh
-  sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
-  sudo -u mobilizon ./bin/mobilizon_ctl tz_world.update
-  ```
-
-- either already processed from our own distribution server
-
-  ```sh
-  sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
-  sudo -u mobilizon curl -L 'https://packages.joinmobilizon.org/tz_world/timezones-geodata.dets' -o /var/lib/mobilizon/timezones/timezones-geodata.dets
-  ```
-
-In both cases, ~700Mio of disk will be used. You may use the following configuration to specify where the data is expected if you decide to change it from the default location (`/var/lib/mobilizon/timezones`) :
-
-```elixir
-config :tz_world, data_dir: "/some/place"
-```
-
-### Source install
-
-You need to download the data :
-
-- either raw from Github, but **requires an extra ~1Gio of memory** to process the data
-
-  ```sh
-  sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
-  sudo -u mobilizon mix mobilizon.tz_world.update
-  ```
-
-- either already processed from our own distribution server
-
-  ```sh
-  sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
-  sudo -u mobilizon curl -L 'https://packages.joinmobilizon.org/tz_world/timezones-geodata.dets' -o /var/lib/mobilizon/timezones/timezones-geodata.dets
-  ```
-
-In both cases, ~700Mio of disk will be used. You may use the following configuration to specify where the data is expected:
-
-```elixir
-config :tz_world, data_dir: "/some/place"
-```
-
-## Exports folder
-
-Create the folder for default CSV export:
-
-```sh
-sudo -u mobilizon mkdir -p /var/lib/mobilizon/uploads/exports/csv
-```
-
-This path can be configured, see [the dedicated docs page about this](https://docs.joinmobilizon.org/administration/configure/exports/).
-Files in this folder are temporary and are cleaned once an hour.
-
-## New optional dependencies
-
-These are optional, installing them will allow Mobilizon to export to PDF and ODS as well. Mobilizon 2.0 allows to export the participant list, but more is planned.
-
-### Docker
-
-Everything is included in our Docker image.
-
-### Release and source install
-
-New optional Python dependencies:
-
-- `Python` >= 3.6
-- `weasyprint` for PDF export (with [a few extra dependencies](https://doc.courtbouillon.org/weasyprint/stable/first_steps.html))
-- `pyexcel-ods3` for ODS export (no extra dependencies)
-
-Both can be installed through pip. You need to enable and configure exports for PDF and ODS in the configuration afterwards. Read [the dedicated docs page about this](https://docs.joinmobilizon.org/administration/configure/exports/).
-
 # Upgrading from 1.0 to 1.1
 
 The 1.1 version of Mobilizon brings Elixir releases support. An Elixir release is a self-contained directory that contains all of Mobilizon's code (front-end and backend), it's dependencies, as well as the Erlang Virtual Machine and runtime (only the parts you need). As long as the release has been assembled on the same OS and architecture, it can be deploy and run straight away. [Read more about releases](https://elixir-lang.org/getting-started/mix-otp/config-and-releases.html#releases).
 
 ## Comparison
-
 Migrating to releases means:
-
-- You only get a precompiled binary, so you avoid compilation times when updating
-- No need to have Elixir/NodeJS installed on the system
-- Code/data/config location is more common (/opt, /var/lib, /etc)
-- More efficient, as only what you need from the Elixir/Erlang standard libraries is included and all of the code is directly preloaded
-- You can't hardcode modifications in Mobilizon's code
+* You only get a precompiled binary, so you avoid compilation times when updating
+* No need to have Elixir/NodeJS installed on the system
+* Code/data/config location is more common (/opt, /var/lib, /etc)
+* More efficient, as only what you need from the Elixir/Erlang standard libraries is included and all of the code is directly preloaded
+* You can't hardcode modifications in Mobilizon's code
 
 Staying on source releases means:
-
-- You need to recompile everything with each update
-- Compiling frontend and backend has higher system requirements than just running Mobilizon
-- You can change things in Mobilizon's code and recompile right away to test changes
+* You need to recompile everything with each update
+* Compiling frontend and backend has higher system requirements than just running Mobilizon
+* You can change things in Mobilizon's code and recompile right away to test changes
 
 ## Releases
-
 If you want to migrate to releases, [we provide a full guide](https://docs.joinmobilizon.org/administration/upgrading/source_to_release/). You may do this at any time.
 
 ## Source install
-
 To stay on a source release, you just need to check the following things:
-
-- Rename your configuration file `config/prod.secret.exs` to `config/runtime.exs`.
-- If your config file includes `server: true` under `Mobilizon.Web.Endpoint`, remove it.
-  ```diff
-  config :mobilizon, Mobilizon.Web.Endpoint,
-  - server: true,
-  ```
-- The uploads default directory is now `/var/lib/mobilizon/uploads`. To keep it in the previous `uploads/` directory, just add the following line to `config/runtime.exs`:
+* Rename your configuration file `config/prod.secret.exs` to `config/runtime.exs`.
+* If your config file includes `server: true` under `Mobilizon.Web.Endpoint`, remove it.
+    ```diff
+    config :mobilizon, Mobilizon.Web.Endpoint,
+    - server: true,
+    ```
+* The uploads default directory is now `/var/lib/mobilizon/uploads`. To keep it in the previous `uploads/` directory, just add the following line to `config/runtime.exs`:
   ```elixir
   config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "uploads"
   ```
   Or you may use any other directory where the `mobilizon` user has write permissions.
-- The GeoIP database default directory is now `/var/lib/mobilizon/geo/GeoLite2-City.mmdb`. To keep it in the previous `priv/data/GeoLite2-City.mmdb` directory, just add the following line to `config/runtime.exs`:
+* The GeoIP database default directory is now `/var/lib/mobilizon/geo/GeoLite2-City.mmdb`. To keep it in the previous `priv/data/GeoLite2-City.mmdb` directory, just add the following line to `config/runtime.exs`:
   ```elixir
   config :geolix, databases: [
     %{
@@ -186,4 +41,4 @@ To stay on a source release, you just need to check the following things:
     }
   ]
   ```
-  Or you may use any other directory where the `mobilizon` user has read permissions.
+  Or you may use any other directory where the `mobilizon` user has read permissions.

config/config.exs

@@ -13,14 +13,13 @@ config :mobilizon,
 config :mobilizon, Mobilizon.Storage.Repo, types: Mobilizon.Storage.PostgresTypes
 
 config :mobilizon, :instance,
-  name: "Mobilizon du Chapril",
-  description: "Instance du Chapril",
+  name: "My Mobilizon Instance",
+  description: "Change this to a proper description of your instance",
   hostname: "localhost",
-  registrations_open: true,
+  registrations_open: false,
   registration_email_allowlist: [],
-  registration_email_denylist: [],
   languages: [],
-  default_language: "fr",
+  default_language: "en",
   demo: false,
   repository: Mix.Project.config()[:source_url],
   allow_relay: true,
@@ -35,15 +34,13 @@ config :mobilizon, :instance,
   unconfirmed_user_grace_period_hours: 48,
   activity_expire_days: 365,
   activity_keep_number: 100,
-  enable_instance_feeds: true,
-  email_from: "noreply@mobilizon.chapril.org",
-  email_reply_to: "noreply@mobilizon.chapril.org"
+  enable_instance_feeds: false,
+  email_from: "noreply@localhost",
+  email_reply_to: "noreply@localhost"
 
 config :mobilizon, :groups, enabled: true
-config :mobilizon, :events, creation: true
 
-config :mobilizon, :restrictions, only_admin_can_create_groups: false
-config :mobilizon, :restrictions, only_groups_can_create_events: false
+config :mobilizon, :events, creation: true
 
 # Configures the endpoint
 config :mobilizon, Mobilizon.Web.Endpoint,
@@ -68,11 +65,9 @@ config :mime, :types, %{
 config :mobilizon, Mobilizon.Web.Upload,
   uploader: Mobilizon.Web.Upload.Uploader.Local,
   filters: [
+    Mobilizon.Web.Upload.Filter.Dedupe,
     Mobilizon.Web.Upload.Filter.AnalyzeMetadata,
-    Mobilizon.Web.Upload.Filter.Resize,
-    Mobilizon.Web.Upload.Filter.Optimize,
-    Mobilizon.Web.Upload.Filter.BlurHash,
-    Mobilizon.Web.Upload.Filter.Dedupe
+    Mobilizon.Web.Upload.Filter.Optimize
   ],
   allow_list_mime_types: ["image/gif", "image/jpeg", "image/png", "image/webp"],
   link_name: true,
@@ -88,10 +83,6 @@ config :mobilizon, Mobilizon.Web.Upload,
 
 config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "/var/lib/mobilizon/uploads"
 
-config :tz_world, data_dir: "/var/lib/mobilizon/timezones"
-
-config :mobilizon, Timex.Gettext, default_locale: "fr"
-
 config :mobilizon, :media_proxy,
   enabled: true,
   proxy_opts: [
@@ -106,16 +97,13 @@ config :mobilizon, :media_proxy,
   ]
 
 config :mobilizon, Mobilizon.Web.Email.Mailer,
-  adapter: Swoosh.Adapters.SMTP,
-  relay: "localhost",
+  adapter: Bamboo.SMTPAdapter,
+  server: "localhost",
+  hostname: "localhost",
   # usually 25, 465 or 587
   port: 25,
-  username: "",
-  password: "",
-  # can be `:always` or `:never`
-  auth: :if_available,
-  # can be `true`
-  ssl: false,
+  username: nil,
+  password: nil,
   # can be `:always` or `:never`
   tls: :if_available,
   allowed_tls_versions: [:tlsv1, :"tlsv1.1", :"tlsv1.2"],
@@ -188,14 +176,6 @@ config :phoenix, :filter_parameters, ["password", "token"]
 config :absinthe, schema: Mobilizon.GraphQL.Schema
 config :absinthe, Absinthe.Logger, filter_variables: ["token", "password", "secret"]
 
-config :codepagex, :encodings, [
-  :ascii,
-  ~r[iso8859]i,
-  :"VENDORS/MICSFT/WINDOWS/CP1252"
-]
-
-config :mobilizon, Mobilizon.Web.Gettext, split_module_by: [:locale, :domain]
-
 config :ex_cldr,
   default_locale: "en",
   default_backend: Mobilizon.Cldr
@@ -206,17 +186,14 @@ config :http_signatures,
 config :mobilizon, :cldr,
   locales: [
     "fr",
-    "en",
-    "ru",
-    "ar"
+    "en"
   ]
 
 config :mobilizon, :activitypub,
   # One day
   actor_stale_period: 3_600 * 48,
   actor_key_rotation_delay: 3_600 * 48,
-  sign_object_fetches: true,
-  stale_actor_search_exclusion_after: 3_600 * 24 * 7
+  sign_object_fetches: true
 
 config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Nominatim
 
@@ -300,10 +277,8 @@ 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},
        {"@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}
      ]},
@@ -339,16 +314,6 @@ config :mobilizon, Mobilizon.Service.Notifier.Email, enabled: true
 
 config :mobilizon, Mobilizon.Service.Notifier.Push, enabled: true
 
-config :mobilizon, :exports,
-  path: "/var/lib/mobilizon/uploads/exports",
-  formats: [
-    Mobilizon.Service.Export.Participants.CSV,
-    Mobilizon.Service.Export.Participants.PDF,
-    Mobilizon.Service.Export.Participants.ODS
-  ]
-
-config :mobilizon, :analytics, providers: []
-
 # 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

@@ -1,15 +1,21 @@
 import Config
 
+# For development, we disable any cache and enable
+# debugging and code reloading.
+#
+# The watchers configuration can be used to run external
+# watchers to your application. For example, we use it
+# with brunch.io to recompile .js and .css sources.
 config :mobilizon, Mobilizon.Web.Endpoint,
   http: [
-    port: String.to_integer(System.get_env("MOBILIZON_INSTANCE_HOST_PORT", "4000"))
+    ip: {127, 0, 0, 1},
+    port: 4000
   ],
   url: [
     host: System.get_env("MOBILIZON_INSTANCE_HOST", "mobilizon.local"),
-    port: String.to_integer(System.get_env("MOBILIZON_INSTANCE_HOST_PORT", "80")),
+    port: 80,
     scheme: "http"
   ],
-  secret_key_base: System.get_env("MOBILIZON_INSTANCE_SECRET_KEY_BASE", "changethis"),
   debug_errors: true,
   code_reloader: true,
   check_origin: false,
@@ -58,8 +64,6 @@ config :logger, :console, format: "[$level] $message\n", level: :debug
 
 config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Nominatim
 
-config :mobilizon, Mobilizon.Web.Gettext, allowed_locales: ["fr", "en", "ru", "ar"]
-
 # Set a higher stacktrace during development. Avoid configuring such
 # in production as building large stacktraces may be expensive.
 config :phoenix, :stacktrace_depth, 20
@@ -67,7 +71,7 @@ config :phoenix, :stacktrace_depth, 20
 # Initialize plugs at runtime for faster development compilation
 config :phoenix, :plug_init_mode, :runtime
 
-config :mobilizon, Mobilizon.Web.Email.Mailer, adapter: Swoosh.Adapters.Local
+config :mobilizon, Mobilizon.Web.Email.Mailer, adapter: Bamboo.LocalAdapter
 
 # Configure your database
 config :mobilizon, Mobilizon.Storage.Repo,
@@ -87,17 +91,10 @@ config :mobilizon, :instance,
   registrations_open: System.get_env("MOBILIZON_INSTANCE_REGISTRATIONS_OPEN") == "true",
   groups: true
 
-config :mobilizon, Mobilizon.Web.Auth.Guardian,
-  secret_key: System.get_env("MOBILIZON_INSTANCE_SECRET_KEY", "changethis")
-
 # config :mobilizon, :activitypub, sign_object_fetches: false
 
 config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "uploads"
 
-config :mobilizon, :exports, path: "uploads/exports"
-
-config :tz_world, data_dir: "_build/dev/lib/tz_world/priv"
-
 config :mobilizon, :anonymous,
   reports: [
     allowed: true

config/docker.exs

@@ -2,7 +2,7 @@
 
 import Config
 
-listen_ip = System.get_env("MOBILIZON_INSTANCE_LISTEN_IP", "0.0.0.0")
+listen_ip = System.get_env("MOBILIZON_INSTANCE_LISTEN_IP", "::")
 
 listen_ip =
   case listen_ip |> to_charlist() |> :inet.parse_address() do
@@ -14,7 +14,7 @@ config :mobilizon, Mobilizon.Web.Endpoint,
   server: true,
   url: [host: System.get_env("MOBILIZON_INSTANCE_HOST", "mobilizon.lan")],
   http: [
-    port: String.to_integer(System.get_env("MOBILIZON_INSTANCE_PORT", "4000")),
+    port: System.get_env("MOBILIZON_INSTANCE_PORT", "4000"),
     ip: listen_ip
   ],
   secret_key_base: System.get_env("MOBILIZON_INSTANCE_SECRET_KEY_BASE", "changethis")
@@ -33,6 +33,9 @@ config :mobilizon, :instance,
   email_from: System.get_env("MOBILIZON_INSTANCE_EMAIL", "noreply@mobilizon.lan"),
   email_reply_to: System.get_env("MOBILIZON_REPLY_EMAIL", "noreply@mobilizon.lan")
 
+config :mobilizon, Mobilizon.Web.Upload.Uploader.Local,
+  uploads: System.get_env("MOBILIZON_UPLOADS", "/app/uploads")
+
 config :mobilizon, Mobilizon.Storage.Repo,
   adapter: Ecto.Adapters.Postgres,
   username: System.get_env("MOBILIZON_DATABASE_USERNAME", "username"),
@@ -43,8 +46,9 @@ config :mobilizon, Mobilizon.Storage.Repo,
   pool_size: 10
 
 config :mobilizon, Mobilizon.Web.Email.Mailer,
-  adapter: Swoosh.Adapters.SMTP,
-  relay: System.get_env("MOBILIZON_SMTP_SERVER", "localhost"),
+  adapter: Bamboo.SMTPAdapter,
+  server: System.get_env("MOBILIZON_SMTP_SERVER", "localhost"),
+  hostname: System.get_env("MOBILIZON_SMTP_HOSTNAME", "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),
@@ -64,16 +68,4 @@ config :geolix,
     }
   ]
 
-config :mobilizon, Mobilizon.Web.Upload.Uploader.Local,
-  uploads: System.get_env("MOBILIZON_UPLOADS", "/var/lib/mobilizon/uploads")
-
-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
-  ]
-
-config :tz_world,
-  data_dir: System.get_env("MOBILIZON_TIMEZONES_DIR", "/var/lib/mobilizon/timezones")
+config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "/var/lib/mobilizon/uploads"

config/prod.exs

@@ -16,29 +16,33 @@ config :logger, level: :info
 # Load all locales in production
 config :mobilizon, :cldr,
   locales: [
-#    "ar",
-#    "be",
-#    "bn",
-#    "ca",
-#    "cs",
-#    "cy",
-#    "de",
+    "ar",
+    "be",
+    "ca",
+    "cs",
+    "de",
     "en",
-#    "es",
-#    "fa",
-#    "fi",
+    "es",
+    "fi",
     "fr",
-#    "gd",
-#    "gl",
-#    "hu",
-#    "id",
-#    "it",
-#    "ja",
-#    "nl",
-#    "nn",
-#    "pl",
-#    "pt",
-#    "ru",
-#    "sv",
-#    "zh_Hant"
+    "gl",
+    "hu",
+    "it",
+    "ja",
+    "nl",
+    "nn",
+    "oc",
+    "pl",
+    "pt",
+    "ru",
+    "sv"
   ]
+
+cond do
+  System.get_env("INSTANCE_CONFIG") &&
+      File.exists?("./config/#{System.get_env("INSTANCE_CONFIG")}") ->
+    import_config System.get_env("INSTANCE_CONFIG")
+
+  true ->
+    :ok
+end

config/test.exs

@@ -54,28 +54,21 @@ config :mobilizon, :ldap,
   bind_uid: System.get_env("LDAP_BIND_UID"),
   bind_password: System.get_env("LDAP_BIND_PASSWORD")
 
-config :mobilizon, Mobilizon.Web.Email.Mailer, adapter: Swoosh.Adapters.Test
+config :mobilizon, Mobilizon.Web.Email.Mailer, adapter: Bamboo.TestAdapter
 
 config :mobilizon, Mobilizon.Web.Upload, filters: [], link_name: false
 
 config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "test/uploads"
 
-config :mobilizon, :exports, path: "test/uploads/exports"
-
-config :tz_world, data_dir: "_build/test/lib/tz_world/priv"
+config :exvcr,
+  vcr_cassette_library_dir: "test/fixtures/vcr_cassettes"
 
 config :tesla, Mobilizon.Service.HTTP.ActivityPub,
   adapter: Mobilizon.Service.HTTP.ActivityPub.Mock
 
-config :tesla, Mobilizon.Service.HTTP.WebfingerClient,
-  adapter: Mobilizon.Service.HTTP.WebfingerClient.Mock
-
 config :tesla, Mobilizon.Service.HTTP.GeospatialClient,
   adapter: Mobilizon.Service.HTTP.GeospatialClient.Mock
 
-config :tesla, Mobilizon.Service.HTTP.HostMetaClient,
-  adapter: Mobilizon.Service.HTTP.HostMetaClient.Mock
-
 config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Mock
 
 config :mobilizon, Oban, queues: false, plugins: false
@@ -84,8 +77,6 @@ config :mobilizon, Mobilizon.Web.Auth.Guardian, secret_key: "some secret"
 
 config :mobilizon, :activitypub, sign_object_fetches: false
 
-config :mobilizon, Mobilizon.Web.Gettext, allowed_locales: ["fr", "en", "es", "ru"]
-
 config :junit_formatter, report_dir: "."
 
 if System.get_env("DOCKER", "false") == "false" && File.exists?("./config/test.secret.exs") do

docker-compose.test.yml

@@ -1,4 +1,4 @@
-version: "3.2"
+version: '3'
 
 services:
   postgres:

docker-compose.yml

@@ -1,14 +1,13 @@
-version: "3.2"
+version: "3"
+
 services:
   postgres:
     container_name: mobilizon_db
     restart: unless-stopped
-    image: postgis/postgis
+    image: postgis/postgis:13-3.0
     environment:
-      - POSTGRES_USER
-      - POSTGRES_PASSWORD
-      - POSTGRES_DB
-      - POSTGRES_PORT
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: mobilizon_dev
     volumes:
       - pgdata:/var/lib/postgresql/data
   api:
@@ -18,24 +17,29 @@ services:
     volumes:
       - ".:/app"
     ports:
-      - 4000:4000
+      - "4000:4000"
     depends_on:
       - postgres
     environment:
       MIX_ENV: "dev"
       DOCKER: "true"
       MOBILIZON_INSTANCE_NAME: My Mobilizon Instance
-      MOBILIZON_INSTANCE_HOST: localhost
-      MOBILIZON_INSTANCE_HOST_PORT: 4000
-      MOBILIZON_INSTANCE_PORT: 4000
+      MOBILIZON_INSTANCE_HOST: mobilizon.me
       MOBILIZON_INSTANCE_EMAIL: noreply@mobilizon.me
       MOBILIZON_INSTANCE_REGISTRATIONS_OPEN: "true"
-      MOBILIZON_DATABASE_PASSWORD: ${POSTGRES_PASSWORD}
-      MOBILIZON_DATABASE_USERNAME: ${POSTGRES_USER}
-      MOBILIZON_DATABASE_DBNAME: ${POSTGRES_DB}
+      MOBILIZON_DATABASE_PASSWORD: postgres
+      MOBILIZON_DATABASE_USERNAME: postgres
+      MOBILIZON_DATABASE_DBNAME: mobilizon_dev
       MOBILIZON_DATABASE_HOST: postgres
-      MOBILIZON_DATABASE_PORT: ${POSTGRES_PORT}
-    command: sh -c "mix phx.server"
+    command: >
+      sh -c "cd js &&
+      yarn install &&
+      cd ../ &&
+      mix deps.get &&
+      mix compile &&
+      mix ecto.create &&
+      mix ecto.migrate &&
+      mix phx.server"
 volumes:
   pgdata:
   .:

docker/multiarch/Dockerfile

@@ -1,44 +0,0 @@
-FROM elixir as build
-SHELL ["/bin/bash", "-c"]
-ENV MIX_ENV prod
-# ENV LANG en_US.UTF-8
-ARG APP_ASSET
-
-# Set the right versions
-ENV ELIXIR_VERSION latest
-ENV ERLANG_VERSION latest
-ENV NODE_VERSION 16
-
-# 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
-# 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 && \
-    mix local.rebar --force && \
-    mix local.hex -if-missing --force
-
-RUN mkdir /mobilizon
-COPY ./ /mobilizon
-WORKDIR /mobilizon
-
-# # Build front-end
-# RUN yarn --cwd "js" install --frozen-lockfile
-# RUN yarn --cwd "js" run build
-
-# Elixir release
-RUN source /root/.bashrc && \
-    mix deps.get --only prod && \
-    mix compile  && \
-    mix phx.digest.clean --all && \
-    mix release --path release/mobilizon && \
-    cd release/mobilizon && \
-    ln -s lib/mobilizon-*/priv priv && \
-    cd ../../
-
-# Make a release archive
-RUN tar -zcf /mobilizon/${APP_ASSET} -C release mobilizon

docker/multiarch/README.md

@@ -1 +0,0 @@
-Contains the Dockerfile used to generate multi-arch Elixir releases

docker/production/Dockerfile

@@ -4,15 +4,11 @@ FROM node:16-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
-
-# Network timeout because it's slow when cross-compiling
-RUN yarn install --network-timeout 100000 \
+RUN yarn install \
     && yarn run build
 
 # Then, build the application binary
-FROM elixir:1.13-alpine AS builder
+FROM elixir:1.12-alpine AS builder
 
 RUN apk add --no-cache build-base git cmake
 
@@ -30,7 +26,7 @@ COPY rel ./rel
 COPY support ./support
 COPY --from=assets ./priv/static ./priv/static
 
-RUN mix phx.digest.clean --all \
+RUN mix phx.digest \
     && mix release
 
 # Finally setup the app
@@ -49,14 +45,9 @@ LABEL org.opencontainers.image.title="mobilizon" \
     org.opencontainers.image.revision=$VCS_REF \
     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 apk add --no-cache openssl ncurses-libs file postgresql-client libgcc libstdc++ imagemagick
 
-RUN mkdir -p /var/lib/mobilizon/uploads && chown nobody:nobody /var/lib/mobilizon/uploads
-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
+RUN mkdir -p /app/uploads && chown nobody:nobody /app/uploads
 RUN mkdir -p /etc/mobilizon && chown nobody:nobody /etc/mobilizon
 
 USER nobody

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
+ENV REFRESHED_AT=2021-06-07
+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
 RUN curl -sL https://deb.nodesource.com/setup_16.x | bash && apt-get install nodejs -yq
 RUN npm install -g yarn 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 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/

docker/tests/Dockerfile-legacy

@@ -0,0 +1,28 @@
+# We build Elixir manually to have the oldest acceptable version of OTP
+FROM erlang:21
+LABEL maintainer="Thomas Citharel <tcit@tcit.fr>"
+
+# elixir expects utf8.
+ENV ELIXIR_VERSION="v1.11.4" \
+    LANG=C.UTF-8
+
+RUN set -xe \
+    && ELIXIR_DOWNLOAD_URL="https://github.com/elixir-lang/elixir/archive/${ELIXIR_VERSION}.tar.gz" \
+    && ELIXIR_DOWNLOAD_SHA256="85c7118a0db6007507313db5bddf370216d9394ed7911fe80f21e2fbf7f54d29" \
+    && curl -fSL -o elixir-src.tar.gz $ELIXIR_DOWNLOAD_URL \
+    && echo "$ELIXIR_DOWNLOAD_SHA256  elixir-src.tar.gz" | sha256sum -c - \
+    && mkdir -p /usr/local/src/elixir \
+    && tar -xzC /usr/local/src/elixir --strip-components=1 -f elixir-src.tar.gz \
+    && rm elixir-src.tar.gz \
+    && cd /usr/local/src/elixir \
+    && make install clean
+
+CMD ["iex"]
+
+ENV REFRESHED_AT=2021-06-07
+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
+RUN curl -sL https://deb.nodesource.com/setup_12.x | bash && apt-get install nodejs -yq
+RUN npm install -g yarn 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 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/

docker/tests/README.md

@@ -1 +0,0 @@
-Contains the Dockerfile for the image used to run the tests

js/.eslintrc.js

@@ -9,7 +9,8 @@ module.exports = {
     "plugin:vue/essential",
     "eslint:recommended",
     "@vue/typescript/recommended",
-    "plugin:prettier/recommended",
+    "@vue/prettier",
+    "@vue/prettier/@typescript-eslint",
   ],
 
   plugins: ["prettier"],
@@ -29,6 +30,7 @@ module.exports = {
       },
     ],
     "@typescript-eslint/no-explicit-any": "off",
+    "cypress/no-unnecessary-waiting": "off",
     "vue/max-len": [
       "off",
       {

js/.gitignore

@@ -23,4 +23,3 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
-.yarn

js/.prettierrc.json

@@ -1,6 +1 @@
-{
-  "trailingComma": "es5",
-  "semi": true,
-  "singleQuote": false,
-  "bracketSpacing": true
-}
+{}

js/.yarnrc.yml

@@ -1,3 +0,0 @@
-nodeLinker: node-modules
-
-#yarnPath: .yarn/releases/yarn-3.1.1.cjs

js/fragmentTypes.json

@@ -5,41 +5,79 @@
         "kind": "INTERFACE",
         "name": "ActionLogObject",
         "possibleTypes": [
-          { "name": "Comment" },
-          { "name": "Event" },
-          { "name": "Group" },
-          { "name": "Person" },
-          { "name": "Report" },
-          { "name": "ReportNote" },
-          { "name": "User" }
+          {
+            "name": "Comment"
+          },
+          {
+            "name": "Event"
+          },
+          {
+            "name": "Person"
+          },
+          {
+            "name": "Report"
+          },
+          {
+            "name": "ReportNote"
+          },
+          {
+            "name": "User"
+          }
         ]
       },
       {
         "kind": "INTERFACE",
         "name": "ActivityObject",
         "possibleTypes": [
-          { "name": "Comment" },
-          { "name": "Discussion" },
-          { "name": "Event" },
-          { "name": "Group" },
-          { "name": "Member" },
-          { "name": "Post" },
-          { "name": "Resource" }
+          {
+            "name": "Comment"
+          },
+          {
+            "name": "Discussion"
+          },
+          {
+            "name": "Event"
+          },
+          {
+            "name": "Group"
+          },
+          {
+            "name": "Member"
+          },
+          {
+            "name": "Post"
+          },
+          {
+            "name": "Resource"
+          }
         ]
       },
       {
         "kind": "INTERFACE",
         "name": "Actor",
         "possibleTypes": [
-          { "name": "Application" },
-          { "name": "Group" },
-          { "name": "Person" }
+          {
+            "name": "Person"
+          },
+          {
+            "name": "Group"
+          },
+          {
+            "name": "Application"
+          }
         ]
       },
       {
         "kind": "INTERFACE",
         "name": "Interactable",
-        "possibleTypes": [{ "name": "Event" }, { "name": "Group" }]
+        "possibleTypes": [
+          {
+            "name": "Event"
+          },
+          {
+            "name": "Group"
+          }
+        ]
       }
     ]
   }

js/package.json

@@ -1,79 +1,59 @@
 {
   "name": "mobilizon",
-  "version": "2.1.0",
+  "version": "1.2.3",
   "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:unit": "LANG=en_US.UTF-8 LANGUAGE=en_US:en LC_ALL=en_US.UTF-8 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:assets": "vue-cli-service build",
     "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",
+    "@mdi/font": "^5.0.45",
     "@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-blockquote": "^2.0.0-beta.6",
     "@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-character-count": "^2.0.0-beta.5",
+    "@tiptap/extension-history": "^2.0.0-beta.5",
     "@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-list-item": "^2.0.0-beta.6",
     "@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-ordered-list": "^2.0.0-beta.6",
     "@tiptap/extension-underline": "^2.0.0-beta.7",
+    "@tiptap/starter-kit": "^2.0.0-beta.37",
     "@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",
+    "@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": "^15.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",
+    "leaflet.locatecontrol": "^0.74.0",
     "lodash": "^4.17.11",
     "ngeohash": "^0.6.3",
     "p-debounce": "^4.0.0",
-    "phoenix": "^1.6",
-    "postcss": "^8",
+    "phoenix": "^1.4.11",
     "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",
@@ -81,50 +61,45 @@
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.0",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^26.0.18",
     "@types/leaflet": "^1.5.2",
-    "@types/leaflet.locatecontrol": "^0.74",
+    "@types/leaflet.locatecontrol": "^0.60.7",
     "@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",
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-babel": "~5.0.0-beta.2",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.0-beta.2",
+    "@vue/cli-plugin-eslint": "~5.0.0-beta.2",
+    "@vue/cli-plugin-pwa": "~5.0.0-beta.2",
+    "@vue/cli-plugin-router": "~5.0.0-beta.2",
+    "@vue/cli-plugin-typescript": "~5.0.0-beta.2",
+    "@vue/cli-plugin-unit-jest": "~5.0.0-beta.2",
+    "@vue/cli-service": "~5.0.0-beta.2",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.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": "^7.20.0",
+    "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.6.0",
     "flush-promises": "^1.0.2",
-    "jest": "^27.1.0",
-    "jest-junit": "^13.0.0",
+    "jest-junit": "^12.0.0",
     "mock-apollo-client": "^1.1.0",
     "prettier": "^2.2.1",
-    "prettier-eslint": "^14.0.0",
+    "prettier-eslint": "^12.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",
+    "ts-jest": "^26.5.3",
+    "typescript": "~4.1.5",
+    "vue-i18n-extract": "^1.0.2",
+    "vue-jest": "^4.0.1",
     "vue-template-compiler": "^2.6.11",
     "webpack-cli": "^4.7.0"
-  },
-  "packageManager": "yarn@3.1.1"
+  }
 }

js/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

js/public/img/fediverse_monochrome.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="742.753" height="742.753" viewBox="0 0 557.065 557.065"><path style="stroke:none;fill-rule:nonzero;fill:#636363;fill-opacity:1" d="M135.848 206.352c-4.887 9.359-12.715 17.152-22.098 21.996L235.066 350.14l29.25-14.825zm160.023 160.64-29.25 14.824 61.473 61.711c4.886-9.359 12.719-17.156 22.105-21.996zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#878787;fill-opacity:1" d="m436.234 254.543-68.68 34.809 5.063 32.39 77.711-39.383c-7.39-7.543-12.387-17.398-14.094-27.816zM327.68 309.559l-162.39 82.3c7.39 7.54 12.386 17.395 14.093 27.817l153.363-77.727zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#636363;fill-opacity:1" d="m275.457 106.828-78.36 152.977 23.133 23.226 82.97-161.969c-10.41-1.761-20.243-6.804-27.743-14.234zm-98.742 192.766-39.692 77.488c10.41 1.758 20.239 6.805 27.743 14.23l35.086-68.496zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#5c5c5c;fill-opacity:1" d="M113.074 228.688a51.922 51.922 0 0 1-25.808 5.398 52.012 52.012 0 0 1-4.989-.524l23.176 148.247a51.976 51.976 0 0 1 25.813-5.395c1.668.094 3.332.266 4.984.52zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#575757;fill-opacity:1" d="M179.508 420.41c.527 3.438.71 6.93.539 10.406a51.888 51.888 0 0 1-5.45 20.387l148.22 23.781a51.814 51.814 0 0 1-.54-10.406 51.852 51.852 0 0 1 5.45-20.383zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#878787;fill-opacity:1" d="m450.852 282.898-68.414 133.563c10.41 1.762 20.242 6.805 27.742 14.238l68.414-133.562c-10.41-1.762-20.242-6.805-27.742-14.239zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#ccc;fill-opacity:1" d="M357.543 93.996c-4.887 9.363-12.719 17.156-22.106 22l105.95 106.36c4.886-9.36 12.718-17.157 22.101-22zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#8f8f8f;fill-opacity:1" d="m260.84 78.473-133.93 67.875c7.39 7.539 12.383 17.394 14.094 27.812l133.93-67.875c-7.391-7.539-12.387-17.394-14.094-27.812zm74.355 37.648a52.01 52.01 0 0 1-26.238 5.61 51.5 51.5 0 0 1-4.52-.473l11.864 75.969 32.37 5.191zm-12 125.27 28.051 179.613a51.909 51.909 0 0 1 25.434-5.211c1.812.105 3.617.3 5.406.594l-26.52-169.805zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#ababab;fill-opacity:1" d="M141.098 174.73a51.84 51.84 0 0 1 .57 10.575 51.878 51.878 0 0 1-5.371 20.234l76.027 12.211 14.942-29.18zm130.304 20.926-14.945 29.184 179.633 28.85a51.828 51.828 0 0 1-.52-10.289 51.863 51.863 0 0 1 5.512-20.492zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#c2c2c2;fill-opacity:.995968" d="M358.672 72.691c-1.414 25.907-23.555 45.762-49.461 44.348-25.902-1.41-45.758-23.55-44.348-49.457 1.414-25.902 23.555-45.758 49.461-44.348 25.903 1.414 45.758 23.555 44.348 49.457zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#b3b3b3;fill-opacity:.995968" d="M534.066 248.766c-1.41 25.906-23.554 45.761-49.457 44.347-25.906-1.41-45.761-23.55-44.347-49.457 1.41-25.902 23.55-45.758 49.457-44.347 25.902 1.41 45.758 23.554 44.347 49.457zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#7d7d7d;fill-opacity:.995968" d="M420.773 469.941c-1.414 25.903-23.554 45.758-49.457 44.348-25.906-1.41-45.761-23.555-44.351-49.457 1.414-25.902 23.555-45.758 49.46-44.348 25.903 1.41 45.759 23.555 44.348 49.457zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#4a4a4a;fill-opacity:.995968" d="M175.355 430.563c-1.41 25.902-23.55 45.757-49.457 44.347-25.902-1.414-45.757-23.555-44.347-49.457 1.414-25.906 23.554-45.762 49.457-44.351 25.906 1.414 45.762 23.554 44.347 49.46zm0 0"/><path style="stroke:none;fill-rule:nonzero;fill:#4d4d4d;fill-opacity:.995968" d="M136.977 185.047c-1.41 25.902-23.555 45.758-49.457 44.348-25.907-1.41-45.758-23.555-44.348-49.458 1.41-25.902 23.555-45.757 49.457-44.347 25.902 1.41 45.758 23.555 44.348 49.457zm0 0"/></svg>

js/public/img/mobilizon_logo.svg

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
-    <title>Mobilizon Logo</title>
-    <g data-name="header">
-        <path d="M0 45.82l3.18-40.8a29.88 29.88 0 015.07-.36 27.74 27.74 0 014.95.36l4.86 17.16a92.19 92.19 0 012.34 10.08h.36a92.19 92.19 0 012.34-10.08L28 5.02a29.23 29.23 0 015-.36 29.23 29.23 0 015 .36l3.18 40.8a13.61 13.61 0 01-3.63.42 23.41 23.41 0 01-3.63-.24l-1.2-19.92q-.36-5.52-.48-12.84h-.44l-7.32 26.51a25.62 25.62 0 01-4 .3 23.36 23.36 0 01-3.84-.3L9.36 13.24H9q-.3 8.94-.48 12.84L7.26 46a22.47 22.47 0 01-3.6.24A13.75 13.75 0 010 45.82zM74 31.06q0 8-4.26 12.3a12.21 12.21 0 01-9 3.42 12.21 12.21 0 01-9-3.42q-4.26-4.26-4.26-12.3t4.24-12.31a12.21 12.21 0 019-3.42 12.21 12.21 0 019 3.42Q74 23.02 74 31.06zM60.75 20.98q-5.67 0-5.67 10.08t5.67 10.08q5.67 0 5.67-10.08t-5.67-10.08zM103.2 19.75q2.7 4.11 2.7 11.28T102 42.31a13.18 13.18 0 01-10 4.11 31.41 31.41 0 01-11.34-2V2.2l.4-.45h2.76A4 4 0 0187 2.83a5.38 5.38 0 01.93 3.57v11.94a12.08 12.08 0 017.56-2.7 8.71 8.71 0 017.71 4.11zm-9.72 2a7.28 7.28 0 00-5.58 2.82v16a15 15 0 004.08.54 5.25 5.25 0 004.68-2.67q1.68-2.67 1.68-7.59 0-9.03-4.86-9.1zM121 22v23.94a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3V24.75q0-3.24-2.7-3.24h-.72a9.32 9.32 0 01-.3-2.58 10.7 10.7 0 01.3-2.7 39.63 39.63 0 014.38-.24h1a5.19 5.19 0 014 1.62A6.27 6.27 0 01121 22z" />
-        <path d="M119.82.84a7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.93 7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.93z" fill="#fff" />
-        <path d="M139.08 40.42h2a10.23 10.23 0 01.6 3.18 9.24 9.24 0 01-.18 2.1 38.47 38.47 0 01-5.64.54q-6.48 0-6.48-7v-37l.36-.42h2.88a3.94 3.94 0 013.12 1.05 5.52 5.52 0 01.9 3.57v31.31q-.02 2.67 2.44 2.67zM155.94 22v23.94a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3V24.75q0-3.24-2.7-3.24h-.72a9.32 9.32 0 01-.3-2.58 10.7 10.7 0 01.3-2.7 39.63 39.63 0 014.38-.24h1a5.19 5.19 0 014.05 1.62 6.27 6.27 0 011.43 4.39z" />
-        <path d="M154.8 2.84a7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.93 7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.93z" fill="#fff" />
-        <path d="M163.08 39.22l8.76-11.82q1.32-1.8 4.8-5.7l-.18-.3a63.09 63.09 0 01-7.74.42H163a9.79 9.79 0 01-.24-2.34 15.8 15.8 0 01.42-3.3h20.4a16.31 16.31 0 011 4.26 4.1 4.1 0 01-.78 2.34L175 34.66a64.65 64.65 0 01-4.56 5.7l.18.24q3.12-.3 5.22-.3h2.58a15.35 15.35 0 006.12-.9 9.4 9.4 0 01.72 3.12q0 3.42-4.32 3.42h-18a14.27 14.27 0 01-.9-3.93 5.08 5.08 0 011.04-2.79zM215.88 31.06q0 8-4.26 12.3a13.63 13.63 0 01-18.06 0q-4.26-4.26-4.26-12.3t4.26-12.31a13.63 13.63 0 0118.06 0q4.26 4.27 4.26 12.31zm-13.29-10.08q-5.67 0-5.67 10.08t5.67 10.08q5.67 0 5.67-10.08t-5.67-10.08zM247 25.84v13.32a11 11 0 001.2 5.64 7 7 0 01-4.41 1.56q-2.43 0-3.33-1.14a5.69 5.69 0 01-.9-3.54V27.4a7.74 7.74 0 00-.72-3.87 2.78 2.78 0 00-2.58-1.17 8.62 8.62 0 00-6.3 3v20.58a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3v-29.7l.42-.36h2.76q3.42 0 4.08 3.6 4.38-3.84 8.73-3.84t6.42 2.82a12.17 12.17 0 012.07 7.38z" />
-        <path d="M57.26 10.75a7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.84 7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.84zM198.26 10.75a7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.84 7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.84z" fill="#fff" />
-    </g>
-</svg>

js/public/img/peertube_monochrome.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="2799 -911 16 22"><g data-name="Artboard – 1"><g data-name="Symbol 3 – 1"><g data-name="Group 44"><path d="M2799-911v11l8-5" data-name="Path 4"/><path d="M2799-900v11l8-6" data-name="Path 5"/><path d="M2807-905v10l8-5" data-name="Path 6"/><path fill="transparent" d="M2807-895v-10l-8 5z" data-name="Path 7"/></g></g></g></svg>

js/public/img/sign_language_monochrome.svg

@@ -1 +0,0 @@
-<svg height="100px" width="100px" fill="#000000" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 84.922" enable-background="new 0 0 100 84.922" xml:space="preserve"><path d="M50.29,42.212"/><path d="M50.29,42.212"/><path d="M50.29,42.212"/><path d="M95.223,22.145c-5.377,3.135-8.271,4.414-13.844,4.125c-2.098-0.024-3.207-0.917-5.281-0.724  c-1.93,0.072-2.918,0.796-4.849,1.447c-2.966,0.917-4.583,1.737-7.694,2.702c-1.977,0.555-3.23,0.579-5.281,1.278  c-1.76,0.748-0.916,0.145-2.146,1.567c-1.592,1.761-1.206,3.136-2.701,6.15c-1.856,3.956-1.641,4.486-0.579,4.969  c-0.699,2.025-0.867,3.377-0.699,5.571c0.192,1.664-0.506,2.821,1.278,4.147c2.437,1.81,7.55,6.054,8.853,6.125  c1.953-0.071,7.646,0.146,10.539-1.855c0.652-0.41,0.845-0.82,0.289,0.725c-0.119,0.192-7.211,5.715-7.982,5.69  c-5.463,0.176-6.511,0.431-6.611,0.556c-0.628-0.243-4.812-5.237-7.377-3.402c-0.99,0.604-1.448,1.183-1.835,2.269  c0.338,0.699,1.931,1.81,3.4,2.726c2.123,1.352,2.315,2.772,4.438,3.281c2.58,0.577,5.33,0.191,6.969,0.408  c0.629,0.169,6.32-1.495,9.865-3.4c3.28-1.688-4.51,3.256-6.416,5.692c-5.74,1.81-4.123,1.882-6.85,2.437  c-2.532,0.578-2.412,0.434-4.148,0.988c-1.785,0.434-3.256,2.87-1.566,4.147c1.013,0.845,4.173-0.337,7.283-0.435  c1.375-0.022,6.994-2.604,8.272-3.279c3.185-1.713,5.522-4.076,7.404-5.428c2.604-1.807-2.942,4.994-5.282,7.84  c-0.675,0.918-0.988,1.109-1.832,2.291c-1.398,1.811,0.385,4.56,1.277,4.125c1.037-0.385,1.713-2.459,2.846-3.135  c0.58-0.314,2.123-2.582,3.57-4.125c1.061-1.205,1.833-1.736,2.846-2.99c1.713-2.123,2.074-3.738,3.57-6.006  c0.916-1.183,1.566-1.543,2.41-2.99c4.463-8.441,3.16-12.229,7.43-18.258c1.303-1.785,2.773-2.22,4.848-3.281  C101.566,30.031,95.175,22.169,95.223,22.145z M74.529,44.528c-1.014,3.545-0.916,3.955-2.846,5.281  c-2.34,1.785-2.461,0.434-7.838,3.425c0,0-2.22-2.315-5.717-3.425c0.023,0.049-0.941-4.486-2.846-6.006  c4.533-3.449,4.412-6.366,5.137-6.27c1.616,0.145,4.198,0.965,8.973-0.844C72.143,41.923,75.471,41.657,74.529,44.528z"/><path d="M47.3,18.863c-2.122-1.423-2.339-2.846-4.438-3.304c-2.58-0.627-5.354-0.241-6.971-0.555  c-0.627-0.072-6.318,1.592-9.84,3.425c-3.328,1.761,4.486-3.184,6.416-5.716c5.716-1.712,4.076-1.785,6.85-2.412  c2.508-0.506,2.387-0.362,4.124-0.868c1.761-0.482,3.256-2.895,1.567-4.269c-1.037-0.772-4.172,0.41-7.26,0.434  C36.35,5.696,30.729,8.277,29.451,9c-3.184,1.664-5.523,4.028-7.404,5.282c-2.629,1.906,2.942-4.872,5.282-7.694  c0.675-0.965,0.989-1.158,1.856-2.291c1.352-1.857-0.41-4.607-1.277-4.269c-1.062,0.482-1.736,2.556-3.016,3.28  c-0.458,0.266-2.002,2.533-3.424,4.125c-1.062,1.158-1.834,1.688-2.847,3.015c-1.736,2.05-2.074,3.666-3.569,5.837  c-0.916,1.302-1.592,1.64-2.412,3.135C8.179,27.813,9.457,31.6,5.212,37.533c-1.302,1.905-2.773,2.315-4.848,3.425  c-1.93,14.037,4.438,21.876,4.413,21.828c5.379-3.062,8.249-4.342,13.845-4.147c2.099,0.12,3.208,1.012,5.282,0.866  c1.93-0.119,2.918-0.844,4.848-1.422c2.967-0.988,4.582-1.81,7.549-2.727c2.123-0.604,3.377-0.627,5.428-1.422  c1.76-0.652,0.916-0.049,2.146-1.424c1.567-1.809,1.205-3.184,2.557-6.127c2.002-4.027,1.784-4.558,0.723-4.992  c0.676-2.074,0.869-3.4,0.699-5.571c-0.217-1.688,0.507-2.87-1.277-4.125c-2.437-1.881-7.55-6.126-8.828-6.15  c-1.978,0.024-7.67-0.193-10.564,1.712c-0.65,0.506-0.844,0.917-0.289-0.555c0.121-0.266,7.212-5.789,7.983-5.861  c5.059-0.108,6.332-0.315,6.573-0.429c0.5,0.013,4.804,5.243,7.417,3.42c0.965-0.651,1.447-1.23,1.857-2.267  C50.364,20.817,48.772,19.708,47.3,18.863z M28.318,35.121c2.315-1.712,2.459-0.362,7.838-3.28c0-0.073,2.219,2.243,5.717,3.28  c-0.024,0.024,0.94,4.558,2.846,6.126c-4.535,3.401-4.414,6.32-5.138,6.271c-1.617-0.193-4.197-1.014-8.972,0.725  c-2.774-5.162-6.078-4.873-5.138-7.864C26.484,36.954,26.364,36.52,28.318,35.121z"/></svg>

js/public/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" dir="auto">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />

js/src/App.vue

@@ -1,7 +1,5 @@
 <template>
   <div id="mobilizon">
-    <VueAnnouncer />
-    <VueSkipTo to="#main" :label="$t('Skip to main content')" />
     <NavBar />
     <div v-if="config && config.demoMode">
       <b-message
@@ -9,7 +7,7 @@
         type="is-danger"
         :title="$t('Warning').toLocaleUpperCase()"
         closable
-        :aria-close-label="$t('Close')"
+        aria-close-label="Close"
       >
         <p>
           {{ $t("This is a demonstration site to test Mobilizon.") }}
@@ -24,9 +22,9 @@
     </div>
     <error v-if="error" :error="error" />
 
-    <main id="main" v-else>
+    <main v-else>
       <transition name="fade" mode="out-in">
-        <router-view ref="routerView" />
+        <router-view />
       </transition>
     </main>
     <mobilizon-footer />
@@ -34,7 +32,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 import NavBar from "./components/NavBar.vue";
 import {
   AUTH_ACCESS_TOKEN,
@@ -54,7 +52,6 @@ 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: {
@@ -85,8 +82,6 @@ export default class App extends Vue {
 
   interval: number | undefined = undefined;
 
-  @Ref("routerView") routerView!: Vue;
-
   async created(): Promise<void> {
     if (await this.initializeCurrentUser()) {
       await initializeCurrentActor(this.$apollo.provider.defaultClient);
@@ -202,55 +197,6 @@ export default class App extends Vue {
     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>
 
@@ -260,6 +206,7 @@ export default class App extends Vue {
 /* Icons */
 $mdi-font-path: "~@mdi/font/fonts";
 @import "~@mdi/font/scss/materialdesignicons";
+
 @import "common";
 
 #mobilizon {
@@ -271,8 +218,4 @@ $mdi-font-path: "~@mdi/font/fonts";
     flex-grow: 1;
   }
 }
-
-.vue-skip-to {
-  z-index: 40;
-}
 </style>

js/src/apollo/utils.ts

@@ -56,7 +56,7 @@ export const typePolicies: TypePolicies = {
   },
   Person: {
     fields: {
-      organizedEvents: paginatedLimitPagination<IEvent>(),
+      organizedEvents: pageLimitPagination(),
       participations: paginatedLimitPagination<IParticipant>(["eventId"]),
       memberships: paginatedLimitPagination<IMember>(["group"]),
     },
@@ -70,9 +70,6 @@ export const typePolicies: TypePolicies = {
       participantStats: { merge: replaceMergePolicy },
     },
   },
-  Instance: {
-    keyFields: ["domain"],
-  },
   RootQueryType: {
     fields: {
       relayFollowers: paginatedLimitPagination<IFollower>(),
@@ -107,11 +104,6 @@ export async function refreshAccessToken(
 
   const refreshToken = localStorage.getItem(AUTH_REFRESH_TOKEN);
 
-  if (!refreshToken) {
-    console.debug("Refresh token not found");
-    return false;
-  }
-
   console.log("Refreshing access token.");
 
   try {
@@ -126,7 +118,6 @@ export async function refreshAccessToken(
 
     return true;
   } catch (err) {
-    console.debug("Failed to refresh token");
     return false;
   }
 }
@@ -174,13 +165,12 @@ function doMerge<T = any>(
   args: Record<string, any> | null
 ): Array<T> {
   const merged = existing && Array.isArray(existing) ? existing.slice(0) : [];
-  const previous = incoming && Array.isArray(incoming) ? incoming.slice(0) : [];
   let res;
   if (args) {
     // Assume an page of 1 if args.page omitted.
     const { page = 1, limit = 10 } = args;
-    for (let i = 0; i < previous.length; ++i) {
-      merged[(page - 1) * limit + i] = previous[i];
+    for (let i = 0; i < incoming.length; ++i) {
+      merged[(page - 1) * limit + i] = incoming[i];
     }
     res = merged;
   } else {
@@ -188,7 +178,7 @@ function doMerge<T = any>(
     // to receive any arguments, so you might prefer to throw an
     // exception here, instead of recovering by appending incoming
     // onto the existing array.
-    res = [...merged, ...previous];
+    res = [...merged, ...incoming];
     // eslint-disable-next-line no-underscore-dangle
     res = uniqBy(res, (elem: any) => elem.__ref);
   }

js/src/assets/logo.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60">
-    <path style="opacity:0;fill:#fea72b;fill-opacity:1;stroke:none;stroke-opacity:0" d="M-5.801-6.164h72.69v72.871h-72.69z" />
-    <g data-name="Calque 2">
-        <g data-name="header">
-            <path d="M26.58 27.06q0 8-4.26 12.3a12.21 12.21 0 0 1-9 3.42 12.21 12.21 0 0 1-9-3.42Q0 35.1 0 27.06q0-8.04 4.26-12.3a12.21 12.21 0 0 1 9-3.42 12.21 12.21 0 0 1 9 3.42q4.32 4.24 4.32 12.3zM13.29 17q-5.67 0-5.67 10.06t5.67 10.08q5.71 0 5.71-10.08T13.29 17z" style="fill:#3a384c;fill-opacity:1" transform="translate(14.627 5.256) scale(1.15671)" />
-            <path d="M9 6.78a7.37 7.37 0 0 1-.6-3 7.37 7.37 0 0 1 .6-3A8.09 8.09 0 0 1 12.83 0a7.05 7.05 0 0 1 3.69.84 7.37 7.37 0 0 1 .6 3 7.37 7.37 0 0 1-.6 3 7.46 7.46 0 0 1-3.87.84A6.49 6.49 0 0 1 9 6.78z" style="fill:#fff" transform="translate(14.627 5.256) scale(1.15671)" />
-        </g>
-    </g>
-</svg>

js/src/assets/mobilizon_logo_original.svg

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
-    <title>Mobilizon Logo</title>
-    <g data-name="header">
-        <path d="M0 45.82l3.18-40.8a29.88 29.88 0 015.07-.36 27.74 27.74 0 014.95.36l4.86 17.16a92.19 92.19 0 012.34 10.08h.36a92.19 92.19 0 012.34-10.08L28 5.02a29.23 29.23 0 015-.36 29.23 29.23 0 015 .36l3.18 40.8a13.61 13.61 0 01-3.63.42 23.41 23.41 0 01-3.63-.24l-1.2-19.92q-.36-5.52-.48-12.84h-.44l-7.32 26.51a25.62 25.62 0 01-4 .3 23.36 23.36 0 01-3.84-.3L9.36 13.24H9q-.3 8.94-.48 12.84L7.26 46a22.47 22.47 0 01-3.6.24A13.75 13.75 0 010 45.82zM74 31.06q0 8-4.26 12.3a12.21 12.21 0 01-9 3.42 12.21 12.21 0 01-9-3.42q-4.26-4.26-4.26-12.3t4.24-12.31a12.21 12.21 0 019-3.42 12.21 12.21 0 019 3.42Q74 23.02 74 31.06zM60.75 20.98q-5.67 0-5.67 10.08t5.67 10.08q5.67 0 5.67-10.08t-5.67-10.08zM103.2 19.75q2.7 4.11 2.7 11.28T102 42.31a13.18 13.18 0 01-10 4.11 31.41 31.41 0 01-11.34-2V2.2l.4-.45h2.76A4 4 0 0187 2.83a5.38 5.38 0 01.93 3.57v11.94a12.08 12.08 0 017.56-2.7 8.71 8.71 0 017.71 4.11zm-9.72 2a7.28 7.28 0 00-5.58 2.82v16a15 15 0 004.08.54 5.25 5.25 0 004.68-2.67q1.68-2.67 1.68-7.59 0-9.03-4.86-9.1zM121 22v23.94a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3V24.75q0-3.24-2.7-3.24h-.72a9.32 9.32 0 01-.3-2.58 10.7 10.7 0 01.3-2.7 39.63 39.63 0 014.38-.24h1a5.19 5.19 0 014 1.62A6.27 6.27 0 01121 22z" />
-        <path d="M119.82.84a7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.93 7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.93z" fill="#fff" />
-        <path d="M139.08 40.42h2a10.23 10.23 0 01.6 3.18 9.24 9.24 0 01-.18 2.1 38.47 38.47 0 01-5.64.54q-6.48 0-6.48-7v-37l.36-.42h2.88a3.94 3.94 0 013.12 1.05 5.52 5.52 0 01.9 3.57v31.31q-.02 2.67 2.44 2.67zM155.94 22v23.94a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3V24.75q0-3.24-2.7-3.24h-.72a9.32 9.32 0 01-.3-2.58 10.7 10.7 0 01.3-2.7 39.63 39.63 0 014.38-.24h1a5.19 5.19 0 014.05 1.62 6.27 6.27 0 011.43 4.39z" />
-        <path d="M154.8 2.84a7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.93 7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.93z" fill="#fff" />
-        <path d="M163.08 39.22l8.76-11.82q1.32-1.8 4.8-5.7l-.18-.3a63.09 63.09 0 01-7.74.42H163a9.79 9.79 0 01-.24-2.34 15.8 15.8 0 01.42-3.3h20.4a16.31 16.31 0 011 4.26 4.1 4.1 0 01-.78 2.34L175 34.66a64.65 64.65 0 01-4.56 5.7l.18.24q3.12-.3 5.22-.3h2.58a15.35 15.35 0 006.12-.9 9.4 9.4 0 01.72 3.12q0 3.42-4.32 3.42h-18a14.27 14.27 0 01-.9-3.93 5.08 5.08 0 011.04-2.79zM215.88 31.06q0 8-4.26 12.3a13.63 13.63 0 01-18.06 0q-4.26-4.26-4.26-12.3t4.26-12.31a13.63 13.63 0 0118.06 0q4.26 4.27 4.26 12.31zm-13.29-10.08q-5.67 0-5.67 10.08t5.67 10.08q5.67 0 5.67-10.08t-5.67-10.08zM247 25.84v13.32a11 11 0 001.2 5.64 7 7 0 01-4.41 1.56q-2.43 0-3.33-1.14a5.69 5.69 0 01-.9-3.54V27.4a7.74 7.74 0 00-.72-3.87 2.78 2.78 0 00-2.58-1.17 8.62 8.62 0 00-6.3 3v20.58a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3v-29.7l.42-.36h2.76q3.42 0 4.08 3.6 4.38-3.84 8.73-3.84t6.42 2.82a12.17 12.17 0 012.07 7.38z" />
-        <path d="M57.26 10.75a7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.84 7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.84zM198.26 10.75a7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.84 7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.84z" fill="#fff" />
-    </g>
-</svg>

js/src/assets/tailwind.css

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

js/src/common.scss

@@ -1,11 +1,12 @@
-@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 {
+//   color: $violet-2;
+// }
 
 a.out,
 .content a,
@@ -15,10 +16,18 @@ a.out,
   text-decoration-thickness: 2px;
 }
 
+// input.input {
+//   border-color: $input-border-color !important;
+// }
+
 .section {
   padding: 1rem 1% 4rem;
 }
 
+figure img.is-rounded {
+  border: 1px solid #cdcaea;
+}
+
 $color-black: #000;
 
 .mention {
@@ -28,7 +37,7 @@ $color-black: #000;
   border-radius: 5px;
   padding: 0.2rem;
   white-space: nowrap;
-  @include margin-right(0.2rem);
+  margin-right: 0.2rem;
 }
 
 .mention-suggestion {
@@ -37,7 +46,7 @@ $color-black: #000;
 
 .mention .mention {
   background: initial;
-  @include margin-right(0);
+  margin-right: 0;
 }
 
 .select select {
@@ -126,63 +135,3 @@ a.list-item {
     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,9 +1,9 @@
 <template>
   <p>
-    <a dir="auto" :title="contact" v-if="configLink" :href="configLink.uri">{{
+    <a :title="contact" v-if="configLink" :href="configLink.uri">{{
       configLink.text
     }}</a>
-    <span dir="auto" v-else-if="contact">{{ contact }}</span>
+    <span v-else-if="contact">{{ contact }}</span>
     <span v-else>{{ $t("contact uninformed") }}</span>
   </p>
 </template>

js/src/components/Account/ActorAutoComplete.vue

@@ -0,0 +1,118 @@
+<template>
+  <b-autocomplete
+    :data="baseData"
+    :placeholder="$t('Actor')"
+    v-model="name"
+    field="preferredUsername"
+    :loading="$apollo.loading"
+    check-infinite-scroll
+    @typing="getAsyncData"
+    @select="handleSelect"
+    @infinite-scroll="getAsyncData"
+  >
+    <template #default="props">
+      <div class="media">
+        <div class="media-left">
+          <img
+            width="32"
+            :src="props.option.avatar.url"
+            v-if="props.option.avatar"
+            alt=""
+          />
+          <b-icon v-else icon="account-circle" />
+        </div>
+        <div class="media-content">
+          <span v-if="props.option.name">
+            {{ props.option.name }}
+            <br />
+            <small>{{ `@${props.option.preferredUsername}` }}</small>
+            <small v-if="props.option.domain">{{
+              `@${props.option.domain}`
+            }}</small>
+          </span>
+          <span v-else>
+            {{ `@${props.option.preferredUsername}` }}
+          </span>
+        </div>
+      </div>
+    </template>
+    <template slot="footer">
+      <span class="has-text-grey" v-show="page > totalPages">
+        Thats it! No more movies found.
+      </span>
+    </template>
+  </b-autocomplete>
+</template>
+<script lang="ts">
+import { Component, Model, Vue, Watch } from "vue-property-decorator";
+import debounce from "lodash/debounce";
+import { IPerson } from "@/types/actor";
+import { SEARCH_PERSONS } from "@/graphql/search";
+import { Paginate } from "@/types/paginate";
+
+const SEARCH_PERSON_LIMIT = 10;
+
+@Component
+export default class ActorAutoComplete extends Vue {
+  @Model("change", { type: Object }) readonly defaultSelected!: IPerson | null;
+
+  baseData: IPerson[] = [];
+
+  selected: IPerson | null = this.defaultSelected;
+
+  name: string = this.defaultSelected
+    ? this.defaultSelected.preferredUsername
+    : "";
+
+  page = 1;
+
+  totalPages = 1;
+
+  mounted(): void {
+    this.selected = this.defaultSelected;
+  }
+
+  data(): Record<string, unknown> {
+    return {
+      getAsyncData: debounce(this.doGetAsyncData, 500),
+    };
+  }
+
+  @Watch("defaultSelected")
+  updateDefaultSelected(defaultSelected: IPerson): void {
+    console.log("update defaultSelected", defaultSelected);
+    this.selected = defaultSelected;
+    this.name = defaultSelected.preferredUsername;
+  }
+
+  handleSelect(selected: IPerson): void {
+    this.selected = selected;
+    this.$emit("change", selected);
+  }
+
+  async doGetAsyncData(name: string): Promise<void> {
+    this.baseData = [];
+    if (this.name !== name) {
+      this.name = name;
+      this.page = 1;
+    }
+    if (!name.length) {
+      this.page = 1;
+      this.totalPages = 1;
+      return;
+    }
+    const {
+      data: { searchPersons },
+    } = await this.$apollo.query<{ searchPersons: Paginate<IPerson> }>({
+      query: SEARCH_PERSONS,
+      variables: {
+        searchText: this.name,
+        page: this.page,
+        limit: SEARCH_PERSON_LIMIT,
+      },
+    });
+    this.totalPages = Math.ceil(searchPersons.total / SEARCH_PERSON_LIMIT);
+    this.baseData.push(...searchPersons.elements);
+  }
+}
+</script>

js/src/components/Account/ActorCard.vue

@@ -1,86 +1,33 @@
 <template>
-  <div
-    class="bg-white rounded-lg flex space-x-4 items-center"
-    :class="{ 'flex-col p-4 shadow-md sm:p-8 pb-10 w-80': !inline }"
-  >
-    <div>
-      <figure class="w-12 h-12" v-if="actor.avatar">
-        <img
-          class="rounded-lg"
-          :src="actor.avatar.url"
-          alt=""
-          width="48"
-          height="48"
+  <div>
+    <div class="media" style="align-items: top">
+      <div class="media-left">
+        <figure class="image is-32x32" v-if="actor.avatar">
+          <img class="is-rounded" :src="actor.avatar.url" alt="" />
+        </figure>
+        <b-icon v-else size="is-medium" icon="account-circle" />
+      </div>
+
+      <div class="media-content">
+        <p>
+          {{ actor.name || `@${usernameWithDomain(actor)}` }}
+        </p>
+        <p class="has-text-grey-dark" v-if="actor.name">
+          @{{ usernameWithDomain(actor) }}
+        </p>
+        <div
+          v-if="full"
+          class="summary"
+          :class="{ limit: limit }"
+          v-html="actor.summary"
         />
-      </figure>
-      <b-icon
-        v-else
-        :size="inline ? 'is-medium' : 'is-large'"
-        icon="account-circle"
-        class="ltr:-mr-0.5 rtl:-ml-0.5"
-      />
-    </div>
-    <div :class="{ 'text-center': !inline }" class="overflow-hidden w-full">
-      <h5
-        class="text-xl font-medium violet-title tracking-tight text-gray-900 whitespace-pre-line line-clamp-2"
-      >
-        {{ displayName(actor) }}
-      </h5>
-      <p class="text-gray-500 truncate" v-if="actor.name">
-        <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
-      </p>
-      <div
-        v-if="full"
-        class="only-first-child"
-        :class="{
-          'line-clamp-3': limit,
-          'line-clamp-10': !limit,
-        }"
-        v-html="actor.summary"
-      />
+      </div>
     </div>
   </div>
-  <!-- <div
-    class="p-4 bg-white rounded-lg shadow-md sm:p-8 flex items-center space-x-4"
-    dir="auto"
-  >
-    <div class="flex-shrink-0">
-      <figure class="w-12 h-12" v-if="actor.avatar">
-        <img
-          class="rounded-lg"
-          :src="actor.avatar.url"
-          alt=""
-          width="48"
-          height="48"
-        />
-      </figure>
-      <b-icon
-        v-else
-        size="is-large"
-        icon="account-circle"
-        class="ltr:-mr-0.5 rtl:-ml-0.5"
-      />
-    </div>
-
-    <div class="flex-1 min-w-0">
-      <h5 class="text-xl font-medium violet-title tracking-tight text-gray-900">
-        {{ displayName(actor) }}
-      </h5>
-      <p class="text-gray-500 truncate" v-if="actor.name">
-        <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
-      </p>
-      <div
-        v-if="full"
-        class="line-clamp-3"
-        :class="{ limit: limit }"
-        v-html="actor.summary"
-      />
-    </div>
-  </div> -->
 </template>
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import { displayName, IActor, usernameWithDomain } from "../../types/actor";
+import { IActor, usernameWithDomain } from "../../types/actor";
 
 @Component
 export default class ActorCard extends Vue {
@@ -88,19 +35,131 @@ export default class ActorCard extends Vue {
 
   @Prop({ required: false, type: Boolean, default: false }) full!: boolean;
 
-  @Prop({ required: false, type: Boolean, default: false }) inline!: boolean;
-
   @Prop({ required: false, type: Boolean, default: false }) popover!: boolean;
 
   @Prop({ required: false, type: Boolean, default: true }) limit!: boolean;
 
   usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
 }
 </script>
-<style scoped>
-.only-first-child ::v-deep :not(:first-child) {
-  display: none;
+<style lang="scss" scoped>
+.summary.limit {
+  max-width: 25rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+</style>
+
+<style lang="scss">
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+
+  .tooltip-inner {
+    background: black;
+    color: white;
+    border-radius: 16px;
+    padding: 5px 10px 4px;
+  }
+
+  .tooltip-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+    border-color: black;
+    z-index: 1;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &.popover {
+    $color: #f9f9f9;
+
+    .popover-inner {
+      background: lighten($background-color, 65%);
+      color: black;
+      padding: 24px;
+      border-radius: 5px;
+      box-shadow: 0 5px 30px rgba(black, 0.1);
+    }
+
+    .popover-arrow {
+      border-color: $color;
+    }
+  }
+
+  &[aria-hidden="true"] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.15s, visibility 0.15s;
+  }
+
+  &[aria-hidden="false"] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.15s;
+  }
 }
 </style>

js/src/components/Account/ActorInline.vue

@@ -1,37 +1,31 @@
 <template>
-  <div class="inline-flex items-start">
-    <div class="flex-none mr-2">
-      <figure class="image is-48x48" v-if="actor.avatar">
+  <div class="actor-inline">
+    <div class="actor-avatar">
+      <figure class="image is-24x24" v-if="actor.avatar">
         <img class="is-rounded" :src="actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-large" icon="account-circle" />
+      <b-icon v-else size="is-medium" 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) }}
+    <div class="actor-name">
+      <p>
+        {{ actor.name || `@${usernameWithDomain(actor)}` }}
       </p>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import { displayName, IActor, usernameWithDomain } from "../../types/actor";
+import { 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;
@@ -42,7 +36,7 @@ div.actor-inline {
     flex-basis: auto;
     flex-grow: 0;
     flex-shrink: 0;
-    @include margin-right(0.5rem);
+    margin-right: 0.5rem;
   }
   div.actor-name {
     flex-basis: auto;

js/src/components/Account/PopoverActorCard.vue

@@ -6,7 +6,7 @@
     :class="{ inline, clickable: actor && actor.type === ActorType.GROUP }"
   >
     <slot></slot>
-    <template slot="popover">
+    <template slot="popover" class="popover">
       <actor-card :full="true" :actor="actor" :popover="true" />
     </template>
   </v-popover>

js/src/components/Account/ProfileOnboarding.vue

@@ -11,7 +11,7 @@
           )
         }}
       </p>
-      <hr role="presentation" />
+      <hr />
       <p class="content">
         <span>
           {{
@@ -21,7 +21,6 @@
           }}
         </span>
         <span
-          v-if="config"
           v-html="
             $t(
               'This instance, <b>{instanceName} ({domain})</b>, hosts your profile, so remember its name.',
@@ -33,7 +32,7 @@
           "
         />
       </p>
-      <hr role="presentation" />
+      <hr />
       <p class="content">
         {{
           $t(
@@ -41,8 +40,8 @@
           )
         }}
       </p>
-      <div class="has-text-centered has-text-primary has-background-success">
-        <pre>{{ `${currentActor.preferredUsername}@${domain}` }}</pre>
+      <div class="has-text-centered">
+        <code>{{ `${currentActor.preferredUsername}@${domain}` }}</code>
       </div>
     </div>
   </div>

js/src/components/Activity/GroupActivityItem.vue

@@ -148,11 +148,6 @@ export default class GroupActivityItem extends mixins(ActivityMixin) {
         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;

js/src/components/Activity/MemberActivityItem.vue

@@ -9,7 +9,13 @@
           :inline="true"
           slot="member"
         >
-          <b> {{ displayName(activity.object.actor) }}</b></popover-actor-card
+          <b>
+            {{
+              $t("@{username}", {
+                username: usernameWithDomain(activity.object.actor),
+              })
+            }}</b
+          ></popover-actor-card
         >
         <b slot="member" v-else>{{
           subjectParams.member_actor_federated_username
@@ -19,7 +25,13 @@
           :inline="true"
           slot="profile"
         >
-          <b> {{ displayName(activity.author) }}</b></popover-actor-card
+          <b>
+            {{
+              $t("@{username}", {
+                username: usernameWithDomain(activity.author),
+              })
+            }}</b
+          ></popover-actor-card
         ></i18n
       >
       <small class="has-text-grey-dark activity-date">{{
@@ -29,7 +41,7 @@
   </div>
 </template>
 <script lang="ts">
-import { displayName } from "@/types/actor";
+import { usernameWithDomain } from "@/types/actor";
 import { ActivityMemberSubject, MemberRole } from "@/types/enums";
 import { Component } from "vue-property-decorator";
 import RouteName from "../../router/name";
@@ -50,7 +62,7 @@ export const MEMBER_ROLE_VALUE: Record<string, number> = {
   },
 })
 export default class MemberActivityItem extends mixins(ActivityMixin) {
-  displayName = displayName;
+  usernameWithDomain = usernameWithDomain;
   RouteName = RouteName;
   ActivityMemberSubject = ActivityMemberSubject;
 
@@ -71,14 +83,6 @@ export default class MemberActivityItem extends mixins(ActivityMixin) {
           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:
@@ -90,12 +94,6 @@ export default class MemberActivityItem extends mixins(ActivityMixin) {
         }
         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}.";
         }

js/src/components/Activity/ResourceActivityItem.vue

@@ -172,8 +172,7 @@ export default class ResourceActivityItem extends mixins(ActivityMixin) {
     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 directory.pop();
     }
     return null;
   }

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/Admin/Followers.vue

@@ -0,0 +1,260 @@
+<template>
+  <div>
+    <b-table
+      v-show="relayFollowers.elements.length > 0"
+      :data="relayFollowers.elements"
+      :loading="$apollo.queries.relayFollowers.loading"
+      ref="table"
+      :checked-rows.sync="checkedRows"
+      detailed
+      :show-detail-icon="false"
+      paginated
+      backend-pagination
+      :current-page.sync="page"
+      :aria-next-label="$t('Next page')"
+      :aria-previous-label="$t('Previous page')"
+      :aria-page-label="$t('Page')"
+      :aria-current-label="$t('Current page')"
+      :total="relayFollowers.total"
+      :per-page="FOLLOWERS_PER_PAGE"
+      @page-change="onFollowersPageChange"
+      checkable
+      checkbox-position="left"
+    >
+      <b-table-column
+        field="actor.id"
+        label="ID"
+        width="40"
+        numeric
+        v-slot="props"
+        >{{ props.row.actor.id }}</b-table-column
+      >
+
+      <b-table-column
+        field="actor.type"
+        :label="$t('Type')"
+        width="80"
+        v-slot="props"
+      >
+        <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
+        <b-icon icon="account-circle" v-else />
+      </b-table-column>
+
+      <b-table-column
+        field="approved"
+        :label="$t('Status')"
+        width="100"
+        sortable
+        centered
+        v-slot="props"
+      >
+        <span
+          :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
+          >{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
+        >
+      </b-table-column>
+
+      <b-table-column field="actor.domain" :label="$t('Domain')" sortable>
+        <template v-slot:default="props">
+          <a
+            @click="toggle(props.row)"
+            v-if="RelayMixin.isInstance(props.row.actor)"
+            >{{ props.row.actor.domain }}</a
+          >
+          <a @click="toggle(props.row)" v-else>{{
+            `${props.row.actor.preferredUsername}@${props.row.actor.domain}`
+          }}</a>
+        </template>
+      </b-table-column>
+
+      <b-table-column
+        field="targetActor.updatedAt"
+        :label="$t('Date')"
+        sortable
+        v-slot="props"
+      >
+        <span
+          :title="$options.filters.formatDateTimeString(props.row.updatedAt)"
+          >{{
+            formatDistanceToNow(new Date(props.row.updatedAt), {
+              locale: $dateFnsLocale,
+            })
+          }}</span
+        ></b-table-column
+      >
+
+      <template #detail="props">
+        <article>
+          <div class="content">
+            <strong>{{ props.row.actor.name }}</strong>
+            <small v-if="props.row.actor.preferredUsername !== 'relay'"
+              >@{{ props.row.actor.preferredUsername }}</small
+            >
+            <p v-html="props.row.actor.summary" />
+          </div>
+        </article>
+      </template>
+
+      <template slot="bottom-left" v-if="checkedRows.length > 0">
+        <div class="buttons">
+          <b-button
+            @click="acceptRelays"
+            type="is-success"
+            v-if="checkedRowsHaveAtLeastOneToApprove"
+          >
+            {{
+              $tc(
+                "No instance to approve|Approve instance|Approve {number} instances",
+                checkedRows.length,
+                { number: checkedRows.length }
+              )
+            }}
+          </b-button>
+          <b-button @click="rejectRelays" type="is-danger">
+            {{
+              $tc(
+                "No instance to reject|Reject instance|Reject {number} instances",
+                checkedRows.length,
+                { number: checkedRows.length }
+              )
+            }}
+          </b-button>
+        </div>
+      </template>
+    </b-table>
+    <b-message type="is-danger" v-if="relayFollowers.elements.length === 0">{{
+      $t("No instance follows your instance yet.")
+    }}</b-message>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Mixins, Ref } from "vue-property-decorator";
+import { SnackbarProgrammatic as Snackbar } from "buefy";
+import { formatDistanceToNow } from "date-fns";
+import {
+  ACCEPT_RELAY,
+  REJECT_RELAY,
+  RELAY_FOLLOWERS,
+} from "../../graphql/admin";
+import { IFollower } from "../../types/actor/follower.model";
+import RelayMixin from "../../mixins/relay";
+import RouteName from "@/router/name";
+import { Paginate } from "@/types/paginate";
+
+const FOLLOWERS_PER_PAGE = 10;
+
+@Component({
+  apollo: {
+    relayFollowers: {
+      query: RELAY_FOLLOWERS,
+      variables() {
+        return {
+          page: this.page,
+          limit: FOLLOWERS_PER_PAGE,
+        };
+      },
+    },
+  },
+  metaInfo() {
+    return {
+      title: this.$t("Followers") as string,
+      titleTemplate: "%s | Mobilizon",
+    };
+  },
+})
+export default class Followers extends Mixins(RelayMixin) {
+  RelayMixin = RelayMixin;
+
+  formatDistanceToNow = formatDistanceToNow;
+
+  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
+
+  checkedRows: IFollower[] = [];
+
+  FOLLOWERS_PER_PAGE = FOLLOWERS_PER_PAGE;
+
+  @Ref("table") readonly table!: any;
+
+  toggle(row: Record<string, unknown>): void {
+    this.table.toggleDetails(row);
+  }
+
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter(RouteName.RELAY_FOLLOWERS, {
+      page: page.toString(),
+    });
+  }
+
+  acceptRelays(): void {
+    this.checkedRows.forEach((row: IFollower) => {
+      this.acceptRelay(`${row.actor.preferredUsername}@${row.actor.domain}`);
+    });
+  }
+
+  rejectRelays(): void {
+    this.checkedRows.forEach((row: IFollower) => {
+      this.rejectRelay(`${row.actor.preferredUsername}@${row.actor.domain}`);
+    });
+  }
+
+  async acceptRelay(address: string): Promise<void> {
+    try {
+      await this.$apollo.mutate({
+        mutation: ACCEPT_RELAY,
+        variables: {
+          address,
+        },
+      });
+      await this.$apollo.queries.relayFollowers.refetch();
+      this.checkedRows = [];
+    } catch (e) {
+      Snackbar.open({
+        message: e.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
+    }
+  }
+
+  async rejectRelay(address: string): Promise<void> {
+    try {
+      await this.$apollo.mutate({
+        mutation: REJECT_RELAY,
+        variables: {
+          address,
+        },
+      });
+      await this.$apollo.queries.relayFollowers.refetch();
+      this.checkedRows = [];
+    } catch (e) {
+      Snackbar.open({
+        message: e.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
+    }
+  }
+
+  get checkedRowsHaveAtLeastOneToApprove(): boolean {
+    return this.checkedRows.some((checkedRow) => !checkedRow.approved);
+  }
+
+  async onFollowersPageChange(page: number): Promise<void> {
+    this.page = page;
+    try {
+      await this.$apollo.queries.relayFollowers.fetchMore({
+        variables: {
+          page: this.page,
+          limit: FOLLOWERS_PER_PAGE,
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}
+</script>

js/src/components/Admin/Followings.vue

@@ -0,0 +1,307 @@
+<template>
+  <div>
+    <form @submit="followRelay">
+      <b-field
+        :label="$t('Add an instance')"
+        custom-class="add-relay"
+        horizontal
+      >
+        <b-field grouped expanded size="is-large">
+          <p class="control">
+            <b-input
+              v-model="newRelayAddress"
+              :placeholder="$t('Ex: mobilizon.fr')"
+            />
+          </p>
+          <p class="control">
+            <b-button type="is-primary" native-type="submit">{{
+              $t("Add an instance")
+            }}</b-button>
+          </p>
+        </b-field>
+      </b-field>
+    </form>
+    <b-table
+      v-show="relayFollowings.elements.length > 0"
+      :data="relayFollowings.elements"
+      :loading="$apollo.queries.relayFollowings.loading"
+      ref="table"
+      :checked-rows.sync="checkedRows"
+      :is-row-checkable="(row) => row.id !== 3"
+      detailed
+      :show-detail-icon="false"
+      paginated
+      backend-pagination
+      :current-page.sync="page"
+      :aria-next-label="$t('Next page')"
+      :aria-previous-label="$t('Previous page')"
+      :aria-page-label="$t('Page')"
+      :aria-current-label="$t('Current page')"
+      :total="relayFollowings.total"
+      :per-page="FOLLOWINGS_PER_PAGE"
+      @page-change="onFollowingsPageChange"
+      checkable
+      checkbox-position="left"
+    >
+      <b-table-column
+        field="targetActor.id"
+        label="ID"
+        width="40"
+        numeric
+        v-slot="props"
+        >{{ props.row.targetActor.id }}</b-table-column
+      >
+
+      <b-table-column
+        field="targetActor.type"
+        :label="$t('Type')"
+        width="80"
+        v-slot="props"
+      >
+        <b-icon
+          icon="lan"
+          v-if="RelayMixin.isInstance(props.row.targetActor)"
+        />
+        <b-icon icon="account-circle" v-else />
+      </b-table-column>
+
+      <b-table-column
+        field="approved"
+        :label="$t('Status')"
+        width="100"
+        sortable
+        centered
+        v-slot="props"
+      >
+        <span
+          :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
+          >{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
+        >
+      </b-table-column>
+
+      <b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
+        <template v-slot:default="props">
+          <a
+            @click="toggle(props.row)"
+            v-if="RelayMixin.isInstance(props.row.targetActor)"
+            >{{ props.row.targetActor.domain }}</a
+          >
+          <a @click="toggle(props.row)" v-else>{{
+            `${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
+          }}</a>
+        </template>
+      </b-table-column>
+
+      <b-table-column
+        field="targetActor.updatedAt"
+        :label="$t('Date')"
+        sortable
+        v-slot="props"
+      >
+        <span
+          :title="$options.filters.formatDateTimeString(props.row.updatedAt)"
+          >{{
+            formatDistanceToNow(new Date(props.row.updatedAt), {
+              locale: $dateFnsLocale,
+            })
+          }}</span
+        ></b-table-column
+      >
+
+      <template #detail="props">
+        <article>
+          <div class="content">
+            <strong>{{ props.row.targetActor.name }}</strong>
+            <small v-if="props.row.actor.preferredUsername !== 'relay'"
+              >@{{ props.row.targetActor.preferredUsername }}</small
+            >
+            <p v-html="props.row.targetActor.summary" />
+          </div>
+        </article>
+      </template>
+
+      <template slot="bottom-left" v-if="checkedRows.length > 0">
+        <b-button @click="removeRelays" type="is-danger">
+          {{
+            $tc(
+              "No instance to remove|Remove instance|Remove {number} instances",
+              checkedRows.length,
+              { number: checkedRows.length }
+            )
+          }}
+        </b-button>
+      </template>
+    </b-table>
+    <b-message type="is-danger" v-if="relayFollowings.total === 0">{{
+      $t("You don't follow any instances yet.")
+    }}</b-message>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Mixins } from "vue-property-decorator";
+import { SnackbarProgrammatic as Snackbar } from "buefy";
+import { formatDistanceToNow } from "date-fns";
+import { ADD_RELAY, REMOVE_RELAY } from "../../graphql/admin";
+import { IFollower } from "../../types/actor/follower.model";
+import RelayMixin from "../../mixins/relay";
+import { RELAY_FOLLOWINGS } from "@/graphql/admin";
+import { Paginate } from "@/types/paginate";
+import RouteName from "@/router/name";
+import { ApolloCache, FetchResult, Reference } from "@apollo/client/core";
+import gql from "graphql-tag";
+
+const FOLLOWINGS_PER_PAGE = 10;
+
+@Component({
+  apollo: {
+    relayFollowings: {
+      query: RELAY_FOLLOWINGS,
+      variables() {
+        return {
+          page: this.page,
+          limit: FOLLOWINGS_PER_PAGE,
+        };
+      },
+    },
+  },
+  metaInfo() {
+    return {
+      title: this.$t("Followings") as string,
+      titleTemplate: "%s | Mobilizon",
+    };
+  },
+})
+export default class Followings extends Mixins(RelayMixin) {
+  newRelayAddress = "";
+
+  RelayMixin = RelayMixin;
+
+  formatDistanceToNow = formatDistanceToNow;
+
+  relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
+
+  FOLLOWINGS_PER_PAGE = FOLLOWINGS_PER_PAGE;
+
+  checkedRows: IFollower[] = [];
+
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter(RouteName.RELAY_FOLLOWINGS, {
+      page: page.toString(),
+    });
+  }
+
+  async onFollowingsPageChange(page: number): Promise<void> {
+    this.page = page;
+    try {
+      await this.$apollo.queries.relayFollowings.fetchMore({
+        variables: {
+          page: this.page,
+          limit: FOLLOWINGS_PER_PAGE,
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  async followRelay(e: Event): Promise<void> {
+    e.preventDefault();
+    try {
+      await this.$apollo.mutate<{ relayFollowings: Paginate<IFollower> }>({
+        mutation: ADD_RELAY,
+        variables: {
+          address: this.newRelayAddress.trim(), // trim to fix copy and paste domain name spaces and tabs
+        },
+        update(
+          cache: ApolloCache<{ relayFollowings: Paginate<IFollower> }>,
+          { data }: FetchResult
+        ) {
+          cache.modify({
+            fields: {
+              relayFollowings(
+                existingFollowings = { elements: [], total: 0 },
+                { readField }
+              ) {
+                const newFollowingRef = cache.writeFragment({
+                  id: `${data?.addRelay.__typename}:${data?.addRelay.id}`,
+                  data: data?.addRelay,
+                  fragment: gql`
+                    fragment NewFollowing on Follower {
+                      id
+                    }
+                  `,
+                });
+                if (
+                  existingFollowings.elements.some(
+                    (ref: Reference) =>
+                      readField("id", ref) === data?.addRelay.id
+                  )
+                ) {
+                  return existingFollowings;
+                }
+                return {
+                  total: existingFollowings.total + 1,
+                  elements: [newFollowingRef, ...existingFollowings.elements],
+                };
+              },
+            },
+            broadcast: false,
+          });
+        },
+      });
+      this.newRelayAddress = "";
+    } catch (err) {
+      Snackbar.open({
+        message: err.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
+    }
+  }
+
+  removeRelays(): void {
+    this.checkedRows.forEach((row: IFollower) => {
+      this.removeRelay(row);
+    });
+  }
+
+  async removeRelay(follower: IFollower): Promise<void> {
+    const address = `${follower.targetActor.preferredUsername}@${follower.targetActor.domain}`;
+    try {
+      await this.$apollo.mutate<{ removeRelay: IFollower }>({
+        mutation: REMOVE_RELAY,
+        variables: {
+          address,
+        },
+        update(cache: ApolloCache<{ removeRelay: IFollower }>) {
+          cache.modify({
+            fields: {
+              relayFollowings(existingFollowingRefs, { readField }) {
+                return {
+                  total: existingFollowingRefs.total - 1,
+                  elements: existingFollowingRefs.elements.filter(
+                    (followingRef: Reference) =>
+                      follower.id !== readField("id", followingRef)
+                  ),
+                };
+              },
+            },
+          });
+        },
+      });
+      await this.$apollo.queries.relayFollowings.refetch();
+      this.checkedRows = [];
+    } catch (e) {
+      Snackbar.open({
+        message: e.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
+    }
+  }
+}
+</script>

js/src/components/Comment/Comment.vue

@@ -7,7 +7,7 @@
     }"
     class="comment-element"
   >
-    <article class="media" :id="commentId" dir="auto">
+    <article class="media" :id="commentId">
       <popover-actor-card
         :actor="comment.actor"
         :inline="true"
@@ -32,11 +32,11 @@
       </div>
       <div class="media-content">
         <div class="content">
-          <span class="first-line" v-if="!comment.deletedAt" dir="auto">
+          <span class="first-line" v-if="!comment.deletedAt">
             <strong :class="{ organizer: commentFromOrganizer }">{{
               comment.actor.name
             }}</strong>
-            <small dir="ltr">@{{ usernameWithDomain(comment.actor) }}</small>
+            <small>{{ usernameWithDomain(comment.actor) }}</small>
           </span>
           <a v-else class="comment-link" :href="commentURL">
             <span>{{ $t("[deleted]") }}</span>
@@ -63,12 +63,7 @@
             </button>
           </span>
           <br />
-          <div
-            v-if="!comment.deletedAt"
-            v-html="comment.text"
-            dir="auto"
-            :lang="comment.language"
-          />
+          <div v-if="!comment.deletedAt" v-html="comment.text" />
           <div v-else>{{ $t("[This comment has been deleted]") }}</div>
           <div class="load-replies" v-if="comment.totalReplies">
             <p v-if="!showReplies" @click="fetchReplies">
@@ -133,7 +128,7 @@
           <div class="content">
             <span class="first-line">
               <strong>{{ currentActor.name }}</strong>
-              <small dir="ltr">@{{ currentActor.preferredUsername }}</small>
+              <small>@{{ currentActor.preferredUsername }}</small>
             </span>
             <br />
             <span class="editor-line">
@@ -142,7 +137,6 @@
                 ref="commentEditor"
                 v-model="newComment.text"
                 mode="comment"
-                :aria-label="$t('Comment body')"
               />
               <b-button
                 :disabled="newComment.text.trim().length === 0"
@@ -304,10 +298,6 @@ export default class Comment extends Vue {
         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"),
     });
   }
 
@@ -332,20 +322,17 @@ export default class Comment extends Vue {
         position: "is-bottom-right",
         duration: 5000,
       });
-    } catch (e: any) {
-      if (e.message) {
-        Snackbar.open({
-          message: e.message,
-          type: "is-danger",
-          position: "is-bottom",
-        });
-      }
+    } catch (e) {
+      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;
 }
@@ -365,7 +352,7 @@ form.reply {
   }
 
   & > small {
-    @include margin-left(0.3rem);
+    margin-left: 0.3rem;
   }
 }
 
@@ -375,14 +362,14 @@ form.reply {
 
   .editor {
     flex: 1;
-    @include padding-right(10px);
+    padding-right: 10px;
     margin-bottom: 0;
   }
 }
 
 a.comment-link {
   text-decoration: none;
-  @include margin-left(5px);
+  margin-left: 5px;
   color: $text;
   &:hover {
     text-decoration: underline;
@@ -411,7 +398,6 @@ a.comment-link {
     color: $white;
     .reply-btn,
     small,
-    span,
     strong,
     .icons button {
       color: $white;
@@ -426,7 +412,7 @@ a.comment-link {
   }
 
   .media-left {
-    @include margin-right(5px);
+    margin-right: 0.5rem;
   }
 }
 
@@ -437,7 +423,7 @@ a.comment-link {
     display: flex;
     flex-direction: column;
     align-items: center;
-    @include margin-right(10px);
+    margin-right: 10px;
 
     .vertical-border {
       width: 3px;
@@ -455,12 +441,9 @@ a.comment-link {
 
 .media .media-content {
   overflow-x: initial;
-  .content {
-    text-align: start;
-    .editor-line {
-      display: flex;
-      align-items: center;
-    }
+  .content .editor-line {
+    display: flex;
+    align-items: center;
   }
 
   .icons {
@@ -529,7 +512,7 @@ article {
 }
 
 .reply-action .icon {
-  @include padding-right(0.4rem);
+  padding-right: 0.4rem;
 }
 
 .visually-hidden {

js/src/components/Comment/CommentTree.vue

@@ -12,7 +12,7 @@
         >{{ $t("Comments are closed for everybody else.") }}</b-notification
       >
       <article class="media">
-        <figure class="media-left" v-if="newComment.actor">
+        <figure class="media-left">
           <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
         </figure>
         <div class="media-content">
@@ -23,7 +23,6 @@
                   ref="commenteditor"
                   mode="comment"
                   v-model="newComment.text"
-                  :aria-label="$t('Comment body')"
                 />
               </p>
               <p class="help is-danger" v-if="emptyCommentError">
@@ -31,11 +30,9 @@
               </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
-              >
+              <b-switch v-model="newComment.isAnnouncement">{{
+                $t("Notify participants")
+              }}</b-switch>
             </div>
           </div>
         </div>
@@ -45,8 +42,8 @@
             type="is-primary"
             class="comment-button-submit"
             icon-left="send"
-            >{{ $t("Send") }}</b-button
-          >
+            :aria-label="$t('Post a comment')"
+          />
         </div>
       </article>
     </form>
@@ -59,11 +56,11 @@
     >
       {{ $t("Loading comments…") }}
     </p>
-    <transition-group tag="div" name="comment-empty-list" v-else>
+    <transition-group name="comment-empty-list" mode="out-in" v-else>
       <transition-group
         key="list"
         name="comment-list"
-        v-if="filteredOrderedComments.length"
+        v-if="comments.length"
         class="comment-list"
         tag="ul"
       >
@@ -77,9 +74,9 @@
           @delete-comment="deleteComment"
         />
       </transition-group>
-      <empty-content v-else icon="comment" key="no-comments" :inline="true">
+      <div v-else class="no-comments" key="no-comments">
         <span>{{ $t("No comments yet") }}</span>
-      </empty-content>
+      </div>
     </transition-group>
   </div>
 </template>
@@ -99,7 +96,6 @@ 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: {
@@ -120,7 +116,6 @@ import EmptyContent from "@/components/Utils/EmptyContent.vue";
   components: {
     Comment,
     IdentityPickerWrapper,
-    EmptyContent,
     editor: () =>
       import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
   },
@@ -218,7 +213,7 @@ export default class CommentTree extends Vue {
 
       // and reset the new comment field
       this.newComment = new CommentModel();
-    } catch (errors: any) {
+    } catch (errors) {
       console.error(errors);
       if (errors.graphQLErrors && errors.graphQLErrors.length > 0) {
         const error = errors.graphQLErrors[0];
@@ -300,7 +295,7 @@ export default class CommentTree extends Vue {
         },
       });
       // this.comments = this.comments.filter(commentItem => commentItem.id !== comment.id);
-    } catch (error: any) {
+    } catch (error) {
       console.error(error);
       if (error.graphQLErrors && error.graphQLErrors.length > 0) {
         this.$notifier.error(error.graphQLErrors[0].message);
@@ -365,35 +360,21 @@ export default class CommentTree extends Vue {
 </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;
 
-    .media-content {
-      display: flex;
-      align-items: center;
-      align-content: center;
-      width: min-content;
+    .field {
+      flex: 1;
+      padding-right: 10px;
+      margin-bottom: 0;
 
-      .field {
-        flex: 1;
-        @include padding-right(10px);
-        margin-bottom: 0;
-
-        &.notify-participants {
-          margin-top: 0.5rem;
-        }
+      &.notify-participants {
+        margin-top: 0.5rem;
       }
     }
   }

js/src/components/Discussion/DiscussionComment.vue

@@ -10,7 +10,7 @@
       <b-icon v-else size="is-large" icon="account-circle" />
     </div>
     <div class="body">
-      <div class="meta" dir="auto">
+      <div class="meta">
         <span
           class="first-line name"
           v-if="comment.actor && !comment.deletedAt"
@@ -64,11 +64,7 @@
           >
         </div>
       </div>
-      <div
-        v-if="!editMode && !comment.deletedAt"
-        class="text-wrapper"
-        dir="auto"
-      >
+      <div v-if="!editMode && !comment.deletedAt" class="text-wrapper">
         <div class="description-content" v-html="comment.text"></div>
         <p
           v-if="
@@ -92,7 +88,7 @@
         {{ $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')" />
+        <editor v-model="updatedComment" />
         <div class="buttons">
           <b-button
             native-type="submit"
@@ -145,16 +141,13 @@ export default class DiscussionComment extends Vue {
   }
 
   updateComment(): void {
-    this.$emit("update-comment", {
-      ...this.comment,
-      text: this.updatedComment,
-    });
+    this.comment.text = this.updatedComment;
+    this.$emit("update-comment", this.comment);
     this.toggleEditMode();
   }
 }
 </script>
 <style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
 article.comment {
   display: flex;
   border-top: 1px solid #e9e9e9;
@@ -170,7 +163,7 @@ article.comment {
       padding: 0 1rem 0.3em;
 
       .name {
-        @include margin-right(auto);
+        margin-right: auto;
         flex: 1 1 auto;
         overflow: hidden;
 
@@ -223,7 +216,7 @@ article.comment {
         ::v-deep blockquote {
           border-left: 0.2em solid #333;
           display: block;
-          @include padding-left(1em);
+          padding-left: 1em;
         }
 
         ::v-deep p {

js/src/components/Discussion/DiscussionListItem.vue

@@ -1,7 +1,6 @@
 <template>
   <router-link
     class="discussion-minimalist-card-wrapper"
-    dir="auto"
     :to="{
       name: RouteName.DISCUSSION,
       params: { slug: discussion.slug, id: discussion.id },
@@ -38,7 +37,6 @@
       </div>
       <div
         class="ellipsis has-text-grey-dark"
-        dir="auto"
         v-if="!discussion.lastComment.deletedAt"
       >
         {{ htmlTextEllipsis }}
@@ -85,7 +83,6 @@ export default class DiscussionListItem extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
 .discussion-minimalist-card-wrapper {
   text-decoration: none;
   display: flex;
@@ -95,7 +92,7 @@ export default class DiscussionListItem extends Vue {
   align-items: center;
 
   .calendar-icon {
-    @include margin-right(1rem);
+    margin-right: 1rem;
   }
 
   .title-info-wrapper {

js/src/components/Editor.vue

@@ -16,7 +16,6 @@
           :class="{ 'is-active': editor.isActive('bold') }"
           @click="editor.chain().focus().toggleBold().run()"
           type="button"
-          :title="$t('Bold')"
         >
           <b-icon icon="format-bold" />
         </button>
@@ -26,7 +25,6 @@
           :class="{ 'is-active': editor.isActive('italic') }"
           @click="editor.chain().focus().toggleItalic().run()"
           type="button"
-          :title="$t('Italic')"
         >
           <b-icon icon="format-italic" />
         </button>
@@ -36,7 +34,6 @@
           :class="{ 'is-active': editor.isActive('underline') }"
           @click="editor.chain().focus().toggleUnderline().run()"
           type="button"
-          :title="$t('Underline')"
         >
           <b-icon icon="format-underline" />
         </button>
@@ -47,7 +44,6 @@
           :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>
@@ -58,7 +54,6 @@
           :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>
@@ -69,7 +64,6 @@
           :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>
@@ -79,7 +73,6 @@
           @click="showLinkMenu()"
           :class="{ 'is-active': editor.isActive('link') }"
           type="button"
-          :title="$t('Add link')"
         >
           <b-icon icon="link" />
         </button>
@@ -89,7 +82,6 @@
           class="menubar__button"
           @click="editor.chain().focus().unsetLink().run()"
           type="button"
-          :title="$t('Remove link')"
         >
           <b-icon icon="link-off" />
         </button>
@@ -99,7 +91,6 @@
           v-if="!isBasicMode"
           @click="showImagePrompt()"
           type="button"
-          :title="$t('Add picture')"
         >
           <b-icon icon="image" />
         </button>
@@ -110,7 +101,6 @@
           :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>
@@ -121,7 +111,6 @@
           :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>
@@ -132,7 +121,6 @@
           :class="{ 'is-active': editor.isActive('blockquote') }"
           @click="editor.chain().focus().toggleBlockquote().run()"
           type="button"
-          :title="$t('Quote')"
         >
           <b-icon icon="format-quote-close" />
         </button>
@@ -142,7 +130,6 @@
           class="menubar__button"
           @click="editor.chain().focus().undo().run()"
           type="button"
-          :title="$t('Undo')"
         >
           <b-icon icon="undo" />
         </button>
@@ -152,7 +139,6 @@
           class="menubar__button"
           @click="editor.chain().focus().redo().run()"
           type="button"
-          :title="$t('Redo')"
         >
           <b-icon icon="redo" />
         </button>
@@ -169,7 +155,6 @@
           :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>
@@ -180,7 +165,6 @@
           :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>
@@ -195,18 +179,10 @@
 <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 StarterKit from "@tiptap/starter-kit";
 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";
@@ -218,8 +194,7 @@ 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";
+import CharacterCount from "@tiptap/extension-character-count";
 
 @Component({
   components: { EditorContent, BubbleMenu },
@@ -236,8 +211,6 @@ export default class EditorComponent extends Vue {
 
   @Prop({ required: false, default: 100_000_000 }) maxSize!: number;
 
-  @Prop({ required: false }) ariaLabel!: string;
-
   currentActor!: IPerson;
 
   editor: Editor | null = null;
@@ -267,18 +240,8 @@ export default class EditorComponent extends Vue {
 
   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,
+        StarterKit,
         Document,
         Paragraph,
         Text,
@@ -286,16 +249,10 @@ export default class EditorComponent extends Vue {
         ListItem,
         Mention.configure(MentionOptions),
         CustomImage,
-        AutoDir,
         Underline,
-        Bold,
-        Italic,
-        Strike,
-        Dropcursor,
-        Gapcursor,
-        History,
-        Link.configure({
-          HTMLAttributes: { target: "_blank", rel: "noopener noreferrer ugc" },
+        Link,
+        CharacterCount.configure({
+          limit: this.maxSize,
         }),
       ],
       injectCSS: false,
@@ -306,19 +263,6 @@ export default class EditorComponent extends Vue {
     });
   }
 
-  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;
@@ -369,7 +313,7 @@ export default class EditorComponent extends Vue {
           })
           .run();
       }
-    } catch (error: any) {
+    } catch (error) {
       console.error(error);
       if (error.graphQLErrors && error.graphQLErrors.length > 0) {
         this.$notifier.error(error.graphQLErrors[0].message);
@@ -405,7 +349,6 @@ export default class EditorComponent extends Vue {
 }
 </script>
 <style lang="scss">
-@use "@/styles/_mixins" as *;
 @import "./Editor/style.scss";
 
 $color-black: #000;
@@ -422,7 +365,7 @@ $color-white: #eee;
     border: 0;
     color: $color-black;
     padding: 0.2rem 0.5rem;
-    @include margin-right(0.2rem);
+    margin-right: 0.2rem;
     border-radius: 3px;
     cursor: pointer;
 
@@ -494,7 +437,7 @@ $color-white: #eee;
 
     ul,
     ol {
-      @include padding-left(1rem);
+      padding-left: 1rem;
     }
 
     ul {
@@ -510,7 +453,7 @@ $color-white: #eee;
     blockquote {
       border-left: 3px solid rgba($color-black, 0.1);
       color: rgba($color-black, 0.8);
-      @include padding-left(0.8rem);
+      padding-left: 0.8rem;
       font-style: italic;
 
       p {
@@ -566,7 +509,7 @@ $color-white: #eee;
     }
     &.is-selected,
     &:hover {
-      background-color: rgba(#eee, 0.2);
+      background-color: rgba($color-white, 0.2);
     }
     &.is-empty {
       opacity: 0.5;
@@ -583,7 +526,7 @@ $color-white: #eee;
   padding: 0;
   font-size: 1rem;
   text-align: inherit;
-  color: #eee;
+  color: $color-white;
   border-radius: 5px;
 }
 

js/src/components/Editor/Autodir.ts

@@ -1,30 +0,0 @@
-import { Extension } from "@tiptap/core";
-
-/**
- * Allows to set dir="auto" on top nodes
- * Taken from https://github.com/ueberdosis/tiptap/issues/1621#issuecomment-918990408
- */
-export const AutoDir = Extension.create({
-  name: "AutoDir",
-  addGlobalAttributes() {
-    return [
-      {
-        types: [
-          "heading",
-          "paragraph",
-          "bulletList",
-          "orderedList",
-          "blockquote",
-        ],
-        attributes: {
-          autoDir: {
-            renderHTML: () => ({
-              dir: "auto",
-            }),
-            parseHTML: (element) => element.dir || "auto",
-          },
-        },
-      },
-    ];
-  },
-});

js/src/components/Editor/Mention.ts

@@ -7,8 +7,6 @@ import apolloProvider from "@/vue-apollo";
 import { IPerson } from "@/types/actor";
 import pDebounce from "p-debounce";
 import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
-import { MentionOptions } from "@tiptap/extension-mention";
-import { Editor } from "@tiptap/core";
 
 const client =
   apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
@@ -26,21 +24,12 @@ const fetchItems = async (query: string): Promise<IPerson[]> => {
 
 const debouncedFetchItems = pDebounce(fetchItems, 200);
 
-const mentionOptions: MentionOptions = {
+const mentionOptions: Partial<any> = {
   HTMLAttributes: {
     class: "mention",
-    dir: "ltr",
-  },
-  renderLabel({ options, node }) {
-    return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
   },
   suggestion: {
-    items: async ({
-      query,
-    }: {
-      query: string;
-      editor: Editor;
-    }): Promise<IPerson[]> => {
+    items: async (query: string): Promise<IPerson[]> => {
       if (query === "") {
         return [];
       }
@@ -80,12 +69,8 @@ const mentionOptions: MentionOptions = {
           return component.ref?.onKeyDown(props);
         },
         onExit() {
-          if (popup && popup[0]) {
-            popup[0].destroy();
-          }
-          if (component) {
-            component.destroy();
-          }
+          popup[0].destroy();
+          component.destroy();
         },
       };
     },

js/src/components/Editor/MentionList.vue

@@ -7,7 +7,7 @@
       :key="index"
       @click="selectItem(index)"
     >
-      <actor-inline :actor="item" />
+      <actor-card :actor="item" />
     </button>
   </div>
 </template>
@@ -16,11 +16,11 @@
 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";
+import ActorCard from "../../components/Account/ActorCard.vue";
 
 @Component({
   components: {
-    ActorInline,
+    ActorCard,
   },
 })
 export default class MentionList extends Vue {

js/src/components/Editor/style.scss

@@ -5,14 +5,10 @@
 
 .ProseMirror {
   position: relative;
-}
-.ProseMirror {
   word-wrap: break-word;
   white-space: pre-wrap;
-  white-space: break-spaces;
   -webkit-font-variant-ligatures: none;
   font-variant-ligatures: none;
-  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
 
   & [contenteditable="false"] {
     white-space: normal;
@@ -20,22 +16,14 @@
   & [contenteditable="false"] [contenteditable="true"] {
     white-space: pre-wrap;
   }
-  & pre {
+  pre {
     white-space: pre-wrap;
   }
 }
-img.ProseMirror-separator {
-  display: inline !important;
-  border: none !important;
-  margin: 0 !important;
-  width: 1px !important;
-  height: 1px !important;
-}
 .ProseMirror-gapcursor {
   display: none;
   pointer-events: none;
   position: absolute;
-  margin: 0;
 
   &:after {
     content: "";
@@ -52,17 +40,16 @@ img.ProseMirror-separator {
     visibility: hidden;
   }
 }
-.ProseMirror-hideselection {
-  *::selection {
+.ProseMirror-hideselection * {
+  &::selection {
     background: transparent;
   }
-  *::-moz-selection {
+  &::-moz-selection {
     background: transparent;
   }
-  * {
-    caret-color: transparent;
-  }
+  caret-color: transparent;
 }
+
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
 }

js/src/components/Error.vue

@@ -48,75 +48,13 @@
               $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>
+          {{
+            $t(
+              "We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):"
+            )
+          }}
         </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>
+        <div class="content">
           <ul>
             <li>
               <a
@@ -127,7 +65,7 @@
             </li>
             <li>
               <a
-                href="https://framagit.org/framasoft/mobilizon/-/issues/"
+                href="https://framagit.org/framasoft/mobilizon/-/issues/new?issuable_template=Bug"
                 target="_blank"
                 >{{
                   $t("Open an issue on our bug tracker (advanced users)")
@@ -136,7 +74,7 @@
             </li>
           </ul>
         </div>
-        <p class="content" v-if="!sentryEnabled">
+        <p class="content">
           {{
             $t(
               "Please add as many details as possible to help identify the problem."
@@ -151,25 +89,23 @@
           <p>{{ $t("Error stacktrace") }}</p>
           <pre>{{ error.stack }}</pre>
         </details>
-        <p v-if="!sentryEnabled">
+        <p>
           {{
             $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">
+        <div class="buttons">
           <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-button @click="copyErrorToClipboard">{{
+              $t("Copy details to clipboard")
+            }}</b-button>
           </b-tooltip>
         </div>
       </section>
@@ -177,20 +113,14 @@
   </div>
 </template>
 <script lang="ts">
-import { CONFIG } from "@/graphql/config";
-import { checkProviderConfig, convertConfig } from "@/services/statistics";
-import { IAnalyticsConfig, IConfig } from "@/types/config.model";
+import { CONTACT } from "@/graphql/config";
 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,
+    config: {
+      query: CONTACT,
+    },
   },
   metaInfo() {
     return {
@@ -206,17 +136,7 @@ export default class ErrorComponent extends Vue {
 
   copied: "success" | "error" | false = false;
 
-  config!: IConfig;
-
-  feedback = "";
-
-  submittedFeedback = false;
-
-  feedbackError = false;
-
-  loggedUser!: IUser;
-
-  RouteName = RouteName;
+  config!: { contact: string | null; name: string };
 
   async copyErrorToClipboard(): Promise<void> {
     try {
@@ -271,56 +191,6 @@ export default class ErrorComponent extends Vue {
 
     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>

js/src/components/Event/AddressAutoComplete.vue

@@ -11,8 +11,6 @@
         icon="map-marker"
         expanded
         @select="updateSelected"
-        v-bind="$attrs"
-        dir="auto"
       >
         <template #default="{ option }">
           <b-icon :icon="option.poiInfos.poiIcon.icon" />
@@ -22,17 +20,12 @@
         </template>
       </b-autocomplete>
     </b-field>
-    <b-field
-      v-if="canDoGeoLocation"
-      :message="fieldErrors"
-      :type="{ 'is-danger': fieldErrors.length }"
-    >
+    <b-field v-if="canDoGeoLocation">
       <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>
@@ -59,16 +52,26 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { LatLng } from "leaflet";
+import debounce from "lodash/debounce";
+import { DebouncedFunc } from "lodash";
 import { Address, IAddress } from "../../types/address.model";
-import AddressAutoCompleteMixin from "@/mixins/AddressAutoCompleteMixin";
+import { ADDRESS, REVERSE_GEOCODE } from "../../graphql/address";
+import { CONFIG } from "../../graphql/config";
+import { IConfig } from "../../types/config.model";
 
 @Component({
-  inheritAttrs: false,
+  components: {
+    "map-leaflet": () =>
+      import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
+  },
+  apollo: {
+    config: CONFIG,
+  },
 })
-export default class AddressAutoComplete extends Mixins(
-  AddressAutoCompleteMixin
-) {
+export default class AddressAutoComplete extends Vue {
+  @Prop({ required: true }) value!: IAddress;
   @Prop({ required: false, default: false }) type!: string | false;
   @Prop({ required: false, default: true, type: Boolean })
   doGeoLocation!: boolean;
@@ -77,20 +80,84 @@ export default class AddressAutoComplete extends Mixins(
 
   selected: IAddress = new Address();
 
+  isFetching = false;
+
   initialQueryText = "";
 
   addressModalActive = false;
 
   showmap = false;
 
-  get queryText2(): string {
+  private gettingLocation = false;
+
+  // eslint-disable-next-line no-undef
+  private location!: GeolocationPosition;
+
+  private gettingLocationError: any;
+
+  private mapDefaultZoom = 15;
+
+  config!: IConfig;
+
+  fetchAsyncData!: DebouncedFunc<(query: string) => Promise<void>>;
+
+  // We put this in data because of issues like
+  // https://github.com/vuejs/vue-class-component/issues/263
+  data(): Record<string, unknown> {
+    return {
+      fetchAsyncData: debounce(this.asyncData, 200),
+    };
+  }
+
+  async asyncData(query: string): Promise<void> {
+    if (!query.length) {
+      this.addressData = [];
+      this.selected = new Address();
+      return;
+    }
+
+    if (query.length < 3) {
+      this.addressData = [];
+      return;
+    }
+
+    this.isFetching = true;
+    const variables: { query: string; locale: string; type?: string } = {
+      query,
+      locale: this.$i18n.locale,
+    };
+    if (this.type) {
+      variables.type = this.type;
+    }
+    const result = await this.$apollo.query({
+      query: ADDRESS,
+      fetchPolicy: "network-only",
+      variables,
+    });
+
+    this.addressData = result.data.searchAddress.map(
+      (address: IAddress) => new Address(address)
+    );
+    this.isFetching = false;
+  }
+
+  @Watch("config")
+  watchConfig(config: IConfig): void {
+    if (!config.geocoding.autocomplete) {
+      // If autocomplete is disabled, we put a larger debounce value
+      // so that we don't request with incomplete address
+      this.fetchAsyncData = debounce(this.asyncData, 2000);
+    }
+  }
+
+  get queryText(): string {
     if (this.value !== undefined) {
       return new Address(this.value).fullName;
     }
     return this.initialQueryText;
   }
 
-  set queryText2(queryText: string) {
+  set queryText(queryText: string) {
     this.initialQueryText = queryText;
   }
 
@@ -119,6 +186,80 @@ export default class AddressAutoComplete extends Mixins(
     this.showmap = !this.showmap;
   }
 
+  async reverseGeoCode(e: LatLng, zoom: number): Promise<void> {
+    // If the position has been updated through autocomplete selection, no need to geocode it!
+    if (this.checkCurrentPosition(e)) return;
+    const result = await this.$apollo.query({
+      query: REVERSE_GEOCODE,
+      variables: {
+        latitude: e.lat,
+        longitude: e.lng,
+        zoom,
+        locale: this.$i18n.locale,
+      },
+    });
+
+    this.addressData = result.data.reverseGeocode.map(
+      (address: IAddress) => new Address(address)
+    );
+    if (this.addressData.length > 0) {
+      const defaultAddress = new Address(this.addressData[0]);
+      this.selected = defaultAddress;
+      this.$emit("input", this.selected);
+      this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`;
+    }
+  }
+
+  checkCurrentPosition(e: LatLng): boolean {
+    if (!this.selected || !this.selected.geom) return false;
+    const lat = parseFloat(this.selected.geom.split(";")[1]);
+    const lon = parseFloat(this.selected.geom.split(";")[0]);
+
+    return e.lat === lat && e.lng === lon;
+  }
+
+  async locateMe(): Promise<void> {
+    this.gettingLocation = true;
+    try {
+      this.location = await AddressAutoComplete.getLocation();
+      this.mapDefaultZoom = 12;
+      this.reverseGeoCode(
+        new LatLng(
+          this.location.coords.latitude,
+          this.location.coords.longitude
+        ),
+        12
+      );
+    } catch (e) {
+      console.error(e);
+      this.gettingLocationError = e.message;
+    }
+    this.gettingLocation = false;
+  }
+
+  // eslint-disable-next-line no-undef
+  static async getLocation(): Promise<GeolocationPosition> {
+    return new Promise((resolve, reject) => {
+      if (!("geolocation" in navigator)) {
+        reject(new Error("Geolocation is not available."));
+      }
+
+      navigator.geolocation.getCurrentPosition(
+        (pos) => {
+          resolve(pos);
+        },
+        (err) => {
+          reject(err);
+        }
+      );
+    });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get isSecureContext(): boolean {
+    return window.isSecureContext;
+  }
+
   get canDoGeoLocation(): boolean {
     return this.isSecureContext && this.doGeoLocation;
   }

js/src/components/Event/DateCalendarIcon.vue

@@ -12,17 +12,18 @@
 </docs>
 
 <template>
-  <div
+  <time
     class="datetime-container"
     :class="{ small }"
+    :datetime="dateObj.getUTCSeconds()"
     :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>
+      <span class="day">{{ day }}</span>
+      <span class="month">{{ month }}</span>
     </div>
-  </div>
+  </time>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
@@ -53,14 +54,11 @@ export default class DateCalendarIcon extends Vue {
 </script>
 
 <style lang="scss" scoped>
-div.datetime-container {
-  background: #fff;
-  border: 1px solid $borders;
+time.datetime-container {
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 8px;
   text-align: center;
   overflow-y: hidden;
   overflow-x: hidden;
@@ -78,7 +76,7 @@ div.datetime-container {
     height: calc(30px * var(--small));
   }
 
-  time {
+  span {
     display: block;
     font-weight: 600;
     color: $violet-3;

js/src/components/Event/EventBanner.vue

@@ -5,7 +5,6 @@
 </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";
 
@@ -15,7 +14,7 @@ import LazyImageWrapper from "../Image/LazyImageWrapper.vue";
   },
 })
 export default class EventBanner extends Vue {
-  @Prop({ default: null, type: Object as PropType<IMedia> })
+  @Prop({ required: true, default: null })
   picture!: IMedia | null;
 }
 </script>

js/src/components/Event/EventCard.vue

@@ -1,7 +1,7 @@
 <template>
   <router-link
     class="card"
-    :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
+    :to="{ name: 'Event', params: { uuid: event.uuid } }"
   >
     <div class="card-image">
       <figure class="image is-16by9">
@@ -24,7 +24,7 @@
             v-for="tag in (event.tags || []).slice(0, 3)"
             :key="tag.slug"
           >
-            <b-tag type="is-light" dir="auto">{{ tag.title }}</b-tag>
+            <b-tag type="is-light">{{ tag.title }}</b-tag>
           </router-link>
         </div>
       </figure>
@@ -39,71 +39,79 @@
           />
         </div>
         <div class="media-content">
-          <h3
-            class="event-title"
-            :title="event.title"
-            dir="auto"
-            :lang="event.language"
+          <p class="event-title" :title="event.title">{{ event.title }}</p>
+          <div
+            class="event-subtitle"
+            v-if="event.physicalAddress"
+            :title="
+              isDescriptionDifferentFromLocality
+                ? `${event.physicalAddress.description}, ${event.physicalAddress.locality}`
+                : event.physicalAddress.description
+            "
           >
-            {{ 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>
+            <!--            <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>-->
+            <span v-if="isDescriptionDifferentFromLocality">
+              {{ event.physicalAddress.description }},
+              {{ event.physicalAddress.locality }}
+            </span>
+            <span v-else>
+              {{ event.physicalAddress.description }}
+            </span>
           </div>
         </div>
       </div>
     </div>
+    <!--    <div class="date-and-title">-->
+    <!--      <div class="date-component">-->
+    <!--        <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />-->
+    <!--      </div>-->
+    <!--      <div class="title-wrapper">-->
+    <!--        <h4>{{ event.title }}</h4>-->
+    <!--        <div class="organizer-place-wrapper has-text-grey">-->
+    <!--          <span>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</span>-->
+    <!--           ·-->
+    <!--          <span v-if="event.physicalAddress">-->
+    <!--            {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}-->
+    <!--          </span>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </div>-->
+    <!--    <div v-if="!mergedOptions.hideDetails" class="details">-->
+    <!--      <div v-if="event.participants.length > 0 &&-->
+    <!--      mergedOptions.loggedPerson &&-->
+    <!--      event.participants[0].actor.id === mergedOptions.loggedPerson.id">-->
+    <!--        <b-tag type="is-info"><translate>Organizer</translate></b-tag>-->
+    <!--      </div>-->
+    <!--      <div v-else-if="event.participants.length === 1">-->
+    <!--        <translate-->
+    <!--                :translate-params="{name: event.participants[0].actor.preferredUsername}"-->
+    <!--        >{name} organizes this event</translate>-->
+    <!--      </div>-->
+    <!--      <div v-else>-->
+    <!--        <span v-for="participant in event.participants" :key="participant.actor.uuid">-->
+    <!--          {{ participant.actor.preferredUsername }}-->
+    <!--          <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,-->
+    <!--          &lt;!&ndash; <translate-->
+    <!--            :translate-params="{name: participant.actor.preferredUsername}"-->
+    <!--          >&nbsp;{name} is in,</translate>&ndash;&gt;-->
+    <!--        </span>-->
+    <!--      </div>-->
   </router-link>
 </template>
 
 <script lang="ts">
-import {
-  IEvent,
-  IEventCardOptions,
-  organizerDisplayName,
-  organizer,
-} from "@/types/event.model";
+import { IEvent, IEventCardOptions } 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 {
@@ -117,10 +125,6 @@ export default class EventCard extends Vue {
 
   RouteName = RouteName;
 
-  organizerDisplayName = organizerDisplayName;
-
-  organizer = organizer;
-
   defaultOptions: IEventCardOptions = {
     hideDate: false,
     loggedPerson: false,
@@ -139,13 +143,18 @@ export default class EventCard extends Vue {
       this.event.organizerActor || this.mergedOptions.organizerActor
     );
   }
+
+  get isDescriptionDifferentFromLocality(): boolean {
+    return (
+      this.event?.physicalAddress?.description !==
+        this.event?.physicalAddress?.locality &&
+      this.event?.physicalAddress?.description !== undefined
+    );
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-@use "@/styles/_event-card";
-
 a.card {
   display: block;
   background: $secondary;
@@ -181,28 +190,22 @@ a.card {
     position: absolute;
     top: 10px;
     right: 0;
-    @include margin-right(-3px);
+    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) {
+      span.tag {
+        margin: 5px auto;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: block;
+        font-size: 0.9em;
+        line-height: 1.75em;
         background-color: #e6e4f4;
-        color: $violet-3;
-      }
-      &.is-info {
-        color: $violet-3;
+        color: #3c376e;
       }
     }
   }
@@ -217,14 +220,12 @@ a.card {
   }
 
   .card-content {
-    height: 100%;
     padding: 0.5rem;
 
     & > .media {
       position: relative;
       display: flex;
       flex-direction: column;
-      height: 100%;
 
       & > .media-left {
         margin-top: -15px;
@@ -233,39 +234,37 @@ a.card {
         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;
+        margin-left: 0rem;
       }
     }
 
     .event-title {
-      font-size: 18px;
-      line-height: 24px;
+      font-size: 1.2rem;
+      line-height: 1.25rem;
       display: -webkit-box;
-      -webkit-line-clamp: 3;
+      -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
+      min-height: 2.4rem;
       font-weight: bold;
     }
 
-    .content-end {
-      padding-top: 8px;
-    }
-
     .event-subtitle {
       font-size: 0.85rem;
-    }
+      display: inline-flex;
+      flex-wrap: wrap;
+      color: #3c376e;
 
-    .organizer-name {
-      font-size: 14px;
+      span {
+        width: 14rem;
+        display: block;
+        overflow: hidden;
+
+        flex-grow: 1;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 }

js/src/components/Event/EventFullDate.vue

@@ -18,100 +18,66 @@
 </docs>
 
 <template>
-  <p v-if="!endsOn">
-    <span>{{
-      formatDateTimeString(beginsOn, timezoneToShow, showStartTime)
-    }}</span>
-    <br />
-    <b-switch
-      size="is-small"
-      v-model="showLocalTimezone"
-      v-if="differentFromUserTimezone"
-    >
-      {{ singleTimeZone }}
-    </b-switch>
-  </p>
-  <p v-else-if="isSameDay() && showStartTime && showEndTime">
-    <span>{{
+  <span v-if="!endsOn">{{
+    beginsOn | formatDateTimeString(showStartTime)
+  }}</span>
+  <span v-else-if="isSameDay() && showStartTime && showEndTime">
+    {{
       $t("On {date} from {startTime} to {endTime}", {
         date: formatDate(beginsOn),
-        startTime: formatTime(beginsOn, timezoneToShow),
-        endTime: formatTime(endsOn, timezoneToShow),
+        startTime: formatTime(beginsOn),
+        endTime: formatTime(endsOn),
       })
-    }}</span>
-    <br />
-    <b-switch
-      size="is-small"
-      v-model="showLocalTimezone"
-      v-if="differentFromUserTimezone"
-    >
-      {{ singleTimeZone }}
-    </b-switch>
-  </p>
-  <p v-else-if="isSameDay() && showStartTime && !showEndTime">
+    }}
+  </span>
+  <span v-else-if="isSameDay() && !showStartTime && showEndTime">
+    {{
+      $t("On {date} ending at {endTime}", {
+        date: formatDate(beginsOn),
+        endTime: formatTime(endsOn),
+      })
+    }}
+  </span>
+  <span v-else-if="isSameDay() && showStartTime && !showEndTime">
     {{
       $t("On {date} starting at {startTime}", {
         date: formatDate(beginsOn),
         startTime: formatTime(beginsOn),
       })
     }}
-  </p>
-  <p v-else-if="isSameDay()">
-    {{ $t("On {date}", { date: formatDate(beginsOn) }) }}
-  </p>
-  <p v-else-if="endsOn && showStartTime && showEndTime">
-    <span>
-      {{
-        $t(
-          "From the {startDate} at {startTime} to the {endDate} at {endTime}",
-          {
-            startDate: formatDate(beginsOn),
-            startTime: formatTime(beginsOn, timezoneToShow),
-            endDate: formatDate(endsOn),
-            endTime: formatTime(endsOn, timezoneToShow),
-          }
-        )
-      }}
-    </span>
-    <br />
-    <b-switch
-      size="is-small"
-      v-model="showLocalTimezone"
-      v-if="differentFromUserTimezone"
-    >
-      {{ multipleTimeZones }}
-    </b-switch>
-  </p>
-  <p v-else-if="endsOn && showStartTime">
-    <span>
-      {{
-        $t("From the {startDate} at {startTime} to the {endDate}", {
-          startDate: formatDate(beginsOn),
-          startTime: formatTime(beginsOn, timezoneToShow),
-          endDate: formatDate(endsOn),
-        })
-      }}
-    </span>
-    <br />
-    <b-switch
-      size="is-small"
-      v-model="showLocalTimezone"
-      v-if="differentFromUserTimezone"
-    >
-      {{ singleTimeZone }}
-    </b-switch>
-  </p>
-  <p v-else-if="endsOn">
+  </span>
+  <span v-else-if="isSameDay()">{{
+    $t("On {date}", { date: formatDate(beginsOn) })
+  }}</span>
+  <span v-else-if="endsOn && showStartTime && showEndTime">
+    {{
+      $t("From the {startDate} at {startTime} to the {endDate} at {endTime}", {
+        startDate: formatDate(beginsOn),
+        startTime: formatTime(beginsOn),
+        endDate: formatDate(endsOn),
+        endTime: formatTime(endsOn),
+      })
+    }}
+  </span>
+  <span v-else-if="endsOn && showStartTime">
+    {{
+      $t("From the {startDate} at {startTime} to the {endDate}", {
+        startDate: formatDate(beginsOn),
+        startTime: formatTime(beginsOn),
+        endDate: formatDate(endsOn),
+      })
+    }}
+  </span>
+  <span v-else-if="endsOn">
     {{
       $t("From the {startDate} to the {endDate}", {
         startDate: formatDate(beginsOn),
         endDate: formatDate(endsOn),
       })
     }}
-  </p>
+  </span>
 </template>
 <script lang="ts">
-import { getTimezoneOffset } from "date-fns-tz";
 import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
@@ -124,89 +90,21 @@ export default class EventFullDate extends Vue {
 
   @Prop({ required: false, default: true }) showEndTime!: boolean;
 
-  @Prop({ required: false }) timezone!: string;
-
-  @Prop({ required: false }) userTimezone!: string;
-
-  showLocalTimezone = true;
-
-  get timezoneToShow(): string {
-    if (this.showLocalTimezone) {
-      return this.timezone;
-    }
-    return this.userActualTimezone;
-  }
-
-  get userActualTimezone(): string {
-    if (this.userTimezone) {
-      return this.userTimezone;
-    }
-    return Intl.DateTimeFormat().resolvedOptions().timeZone;
-  }
-
   formatDate(value: Date): string | undefined {
     if (!this.$options.filters) return undefined;
     return this.$options.filters.formatDateString(value);
   }
 
-  formatTime(value: Date, timezone: string): string | undefined {
+  formatTime(value: Date): string | undefined {
     if (!this.$options.filters) return undefined;
-    return this.$options.filters.formatTimeString(value, timezone || undefined);
-  }
-
-  formatDateTimeString(
-    value: Date,
-    timezone: string,
-    showTime: boolean
-  ): string | undefined {
-    if (!this.$options.filters) return undefined;
-    return this.$options.filters.formatDateTimeString(
-      value,
-      timezone,
-      showTime
-    );
+    return this.$options.filters.formatTimeString(value);
   }
 
   isSameDay(): boolean {
     const sameDay =
-      this.beginsOnDate.toDateString() === new Date(this.endsOn).toDateString();
+      new Date(this.beginsOn).toDateString() ===
+      new Date(this.endsOn).toDateString();
     return this.endsOn !== undefined && sameDay;
   }
-
-  get beginsOnDate(): Date {
-    return new Date(this.beginsOn);
-  }
-
-  get differentFromUserTimezone(): boolean {
-    return (
-      !!this.timezone &&
-      !!this.userActualTimezone &&
-      getTimezoneOffset(this.timezone, this.beginsOnDate) !==
-        getTimezoneOffset(this.userActualTimezone, this.beginsOnDate) &&
-      this.timezone !== this.userActualTimezone
-    );
-  }
-
-  get singleTimeZone(): string {
-    if (this.showLocalTimezone) {
-      return this.$t("Local time ({timezone})", {
-        timezone: this.timezoneToShow,
-      }) as string;
-    }
-    return this.$t("Time in your timezone ({timezone})", {
-      timezone: this.timezoneToShow,
-    }) as string;
-  }
-
-  get multipleTimeZones(): string {
-    if (this.showLocalTimezone) {
-      return this.$t("Local time ({timezone})", {
-        timezone: this.timezoneToShow,
-      }) as string;
-    }
-    return this.$t("Times in your timezone ({timezone})", {
-      timezone: this.timezoneToShow,
-    }) as string;
-  }
 }
 </script>

js/src/components/Event/EventListCard.vue

@@ -1,6 +1,6 @@
 <template>
-  <article class="box mb-5 mt-4">
-    <div class="identity-header" dir="auto">
+  <article class="box">
+    <div class="identity-header">
       <figure class="image is-24x24" v-if="participation.actor.avatar">
         <img
           class="is-rounded"
@@ -10,123 +10,80 @@
           width="24"
         />
       </figure>
-      <b-icon v-else icon="account-circle" />
       {{ displayNameAndUsername(participation.actor) }}
     </div>
     <div class="list-card">
+      <div class="date-component">
+        <date-calendar-icon
+          :date="participation.event.beginsOn"
+          :small="true"
+        />
+      </div>
       <div class="content-and-actions">
-        <div class="event-preview mr-0 ml-0">
-          <div>
-            <div class="date-component">
-              <date-calendar-icon
-                :date="participation.event.beginsOn"
-                :small="true"
-              />
-            </div>
+        <div class="list-card-content">
+          <div class="title-wrapper">
             <router-link
               :to="{
                 name: RouteName.EVENT,
                 params: { uuid: participation.event.uuid },
               }"
             >
-              <lazy-image-wrapper
-                :rounded="true"
-                :picture="participation.event.picture"
-                style="
-                  height: 100%;
-                  position: absolute;
-                  top: 0;
-                  left: 0;
-                  width: 100%;
+              <h3 class="title">{{ participation.event.title }}</h3>
+            </router-link>
+          </div>
+          <div class="participation-actor">
+            <span>
+              <b-icon
+                icon="earth"
+                v-if="participation.event.visibility === EventVisibility.PUBLIC"
+              />
+              <b-icon
+                icon="link"
+                v-else-if="
+                  participation.event.visibility === EventVisibility.UNLISTED
                 "
               />
-            </router-link>
-          </div>
-        </div>
-        <div class="list-card-content">
-          <div class="title-wrapper" dir="auto">
-            <b-tag
-              type="is-info"
-              class="mr-1 mb-1"
-              size="is-medium"
-              v-if="participation.event.status === EventStatus.TENTATIVE"
-            >
-              {{ $t("Tentative") }}
-            </b-tag>
-            <b-tag
-              type="is-danger"
-              class="mr-1 mb-1"
-              size="is-medium"
-              v-if="participation.event.status === EventStatus.CANCELLED"
-            >
-              {{ $t("Cancelled") }}
-            </b-tag>
-            <router-link
-              :to="{
-                name: RouteName.EVENT,
-                params: { uuid: participation.event.uuid },
-              }"
-            >
-              <h3 class="title" :lang="participation.event.language">
-                {{ participation.event.title }}
-              </h3>
-            </router-link>
-          </div>
-          <inline-address
-            v-if="participation.event.physicalAddress"
-            class="event-subtitle"
-            :physical-address="participation.event.physicalAddress"
-          />
-          <div
-            class="event-subtitle"
-            v-else-if="
-              participation.event.options &&
-              participation.event.options.isOnline
-            "
-          >
-            <b-icon icon="video" />
-            <span>{{ $t("Online") }}</span>
-          </div>
-          <div class="event-subtitle event-organizer">
-            <figure
-              class="image is-24x24"
-              v-if="
-                organizer(participation.event) &&
-                organizer(participation.event).avatar
-              "
-            >
-              <img
-                class="is-rounded"
-                :src="organizer(participation.event).avatar.url"
-                alt=""
+              <b-icon
+                icon="lock"
+                v-else-if="
+                  participation.event.visibility === EventVisibility.PRIVATE
+                "
               />
-            </figure>
-            <b-icon v-else icon="account-circle" />
-            <span class="organizer-name">
-              {{ organizerDisplayName(participation.event) }}
             </span>
+            <span
+              v-if="
+                participation.event.physicalAddress &&
+                participation.event.physicalAddress.locality
+              "
+              >{{ participation.event.physicalAddress.locality }} -</span
+            >
+            <i18n
+              tag="span"
+              path="Organized by {name}"
+              v-if="organizerActor.id !== currentActor.id"
+            >
+              <popover-actor-card
+                slot="name"
+                :actor="organizerActor"
+                :inline="true"
+              >
+                {{ organizerActor.displayName() }}
+              </popover-actor-card>
+            </i18n>
+            <span v-else>{{ $t("Organized by you") }}</span>
           </div>
-          <div class="event-subtitle event-participants">
-            <b-icon
-              :class="{ 'has-text-danger': lastSeatsLeft }"
-              icon="account-group"
-            />
+          <div>
             <span
               class="participant-stats"
-              v-if="participation.role !== ParticipantRole.NOT_APPROVED"
+              v-if="
+                ![
+                  ParticipantRole.PARTICIPANT,
+                  ParticipantRole.NOT_APPROVED,
+                ].includes(participation.role)
+              "
             >
-              <!-- Less than 10 seats left -->
-              <span class="has-text-danger" v-if="lastSeatsLeft">
-                {{
-                  $t("{number} seats left", {
-                    number: seatsLeft,
-                  })
-                }}
-              </span>
               <span
-                v-else-if="
-                  participation.event.options.maximumAttendeeCapacity !== 0
-                "
+                v-if="participation.event.options.maximumAttendeeCapacity !== 0"
               >
                 {{
                   $tc(
@@ -154,27 +111,28 @@
                   )
                 }}
               </span>
-              <b-button
-                v-if="participation.event.participantStats.notApproved > 0"
-                type="is-text"
-                @click="
-                  gotToWithCheck(participation, {
-                    name: RouteName.PARTICIPATIONS,
-                    query: { role: ParticipantRole.NOT_APPROVED },
-                    params: { eventId: participation.event.uuid },
-                  })
-                "
-              >
-                {{
-                  $tc(
-                    "{count} requests waiting",
-                    participation.event.participantStats.notApproved,
-                    {
-                      count: participation.event.participantStats.notApproved,
-                    }
-                  )
-                }}
-              </b-button>
+              <span v-if="participation.event.participantStats.notApproved > 0">
+                <b-button
+                  type="is-text"
+                  @click="
+                    gotToWithCheck(participation, {
+                      name: RouteName.PARTICIPATIONS,
+                      query: { role: ParticipantRole.NOT_APPROVED },
+                      params: { eventId: participation.event.uuid },
+                    })
+                  "
+                >
+                  {{
+                    $tc(
+                      "{count} requests waiting",
+                      participation.event.participantStats.notApproved,
+                      {
+                        count: participation.event.participantStats.notApproved,
+                      }
+                    )
+                  }}
+                </b-button>
+              </span>
             </span>
           </div>
         </div>
@@ -273,13 +231,9 @@ import { Component, Prop } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { mixins } from "vue-class-component";
 import { RawLocation, Route } from "vue-router";
-import { EventStatus, EventVisibility, ParticipantRole } from "@/types/enums";
+import { EventVisibility, ParticipantRole } from "@/types/enums";
 import { IParticipant } from "../../types/participant.model";
-import {
-  IEventCardOptions,
-  organizer,
-  organizerDisplayName,
-} from "../../types/event.model";
+import { IEventCardOptions } from "../../types/event.model";
 import { displayNameAndUsername, IActor, IPerson } from "../../types/actor";
 import ActorMixin from "../../mixins/actor";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
@@ -287,9 +241,6 @@ import EventMixin from "../../mixins/event";
 import RouteName from "../../router/name";
 import { changeIdentity } from "../../utils/auth";
 import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
-import InlineAddress from "@/components/Address/InlineAddress.vue";
-import { PropType } from "vue";
 
 const defaultOptions: IEventCardOptions = {
   hideDate: true,
@@ -303,8 +254,6 @@ const defaultOptions: IEventCardOptions = {
   components: {
     DateCalendarIcon,
     PopoverActorCard,
-    LazyImageWrapper,
-    InlineAddress,
   },
   apollo: {
     currentActor: {
@@ -312,15 +261,11 @@ const defaultOptions: IEventCardOptions = {
     },
   },
 })
-export default class EventParticipationCard extends mixins(
-  ActorMixin,
-  EventMixin
-) {
+export default class EventListCard extends mixins(ActorMixin, EventMixin) {
   /**
    * The participation associated
    */
-  @Prop({ required: true, type: Object as PropType<IParticipant> })
-  participation!: IParticipant;
+  @Prop({ required: true }) participation!: IParticipant;
 
   /**
    * Options are merged with default options
@@ -336,14 +281,8 @@ export default class EventParticipationCard extends mixins(
 
   displayNameAndUsername = displayNameAndUsername;
 
-  organizerDisplayName = organizerDisplayName;
-
-  organizer = organizer;
-
   RouteName = RouteName;
 
-  EventStatus = EventStatus;
-
   get mergedOptions(): IEventCardOptions {
     return { ...defaultOptions, ...this.options };
   }
@@ -365,13 +304,13 @@ export default class EventParticipationCard extends mixins(
       participation.actor.id !== this.currentActor.id &&
       participation.event.organizerActor
     ) {
-      const organizerActor = participation.event.organizerActor as IPerson;
-      await changeIdentity(this.$apollo.provider.defaultClient, organizerActor);
+      const organizer = participation.event.organizerActor as IPerson;
+      await changeIdentity(this.$apollo.provider.defaultClient, organizer);
       this.$buefy.notification.open({
         message: this.$t(
           "Current identity has been changed to {identityName} in order to manage this event.",
           {
-            identityName: organizerActor.preferredUsername,
+            identityName: organizer.preferredUsername,
           }
         ) as string,
         type: "is-info",
@@ -391,37 +330,16 @@ export default class EventParticipationCard extends mixins(
     }
     return this.participation.event.organizerActor;
   }
-
-  get seatsLeft(): number | null {
-    if (this.participation.event.options.maximumAttendeeCapacity > 0) {
-      return (
-        this.participation.event.options.maximumAttendeeCapacity -
-        this.participation.event.participantStats.participant
-      );
-    }
-    return null;
-  }
-
-  get lastSeatsLeft(): boolean {
-    if (this.seatsLeft) {
-      return this.seatsLeft < 10;
-    }
-    return false;
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-@use "@/styles/_event-card";
-@import "~bulma/sass/utilities/mixins.sass";
-
 article.box {
   div.tag-container {
     position: absolute;
     top: 10px;
     right: 0;
-    @include margin-left(-5px);
+    margin-right: -5px;
     z-index: 10;
     max-width: 40%;
 
@@ -441,67 +359,49 @@ article.box {
 
   .list-card {
     display: flex;
-    padding: 0 6px 0 0;
+    padding: 0 6px;
     position: relative;
     flex-direction: column;
 
+    div.date-component {
+      align-self: flex-start;
+      padding: 5px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin-top: 1px;
+      height: 0;
+      display: flex;
+      align-items: flex-end;
+      margin-bottom: 15px;
+      margin-left: 0rem;
+    }
+
     .content-and-actions {
-      display: grid;
-      grid-gap: 5px 10px;
-      grid-template-areas: "preview" "body" "actions";
-
-      @include tablet {
-        grid-template-columns: 1fr 3fr;
-        grid-template-areas: "preview body" "actions actions";
-      }
-
-      @include desktop {
-        grid-template-columns: 1fr 3fr 1fr;
-        grid-template-areas: "preview body actions";
-      }
-
-      .event-preview {
-        grid-area: preview;
-
-        & > div {
-          height: 128px;
-          width: 100%;
-          position: relative;
-
-          div.date-component {
-            display: flex;
-            position: absolute;
-            bottom: 5px;
-            left: 5px;
-            z-index: 1;
-          }
-
-          img {
-            width: 100%;
-            object-position: center;
-            object-fit: cover;
-            height: 100%;
-          }
-        }
-      }
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      padding-bottom: 1rem;
 
       .actions {
-        padding: 7px;
+        padding-right: 7.5px;
         cursor: pointer;
-        align-self: center;
-        justify-self: center;
-        grid-area: actions;
       }
 
       div.list-card-content {
         flex: 1;
         padding: 5px;
-        grid-area: body;
+        min-width: 350px;
 
-        .participant-stats {
-          display: flex;
-          align-items: center;
+        .participation-actor span,
+        .participant-stats span {
           padding: 0 5px;
+
+          button {
+            height: auto;
+            padding-top: 0;
+          }
         }
 
         div.title-wrapper {
@@ -519,11 +419,11 @@ article.box {
             -webkit-line-clamp: 3;
             -webkit-box-orient: vertical;
             overflow: hidden;
-            font-size: 18px;
-            line-height: 24px;
+            font-weight: 400;
+            line-height: 1em;
+            font-size: 1.4em;
+            padding-bottom: 5px;
             margin: auto 0;
-            font-weight: bold;
-            color: $title-color;
           }
         }
       }
@@ -534,10 +434,10 @@ article.box {
     background: $yellow-2;
     display: flex;
     padding: 5px;
+    padding-left: calc(48px + 15px);
 
-    figure,
-    span.icon {
-      @include padding-right(3px);
+    figure {
+      padding-right: 3px;
     }
   }
 
@@ -546,11 +446,4 @@ article.box {
   }
   padding: 0;
 }
-.content h3.event-title-card {
-  line-height: 1em;
-  margin-top: 0.5em;
-}
-.participation-actor {
-  margin-top: 1em;
-}
 </style>

js/src/components/Event/EventListViewCard.vue

@@ -12,7 +12,7 @@
             <h2 class="title">{{ event.title }}</h2>
           </router-link>
         </div>
-        <div class="participation-actor has-text-grey-dark">
+        <div class="participation-actor has-text-grey">
           <span v-if="event.physicalAddress && event.physicalAddress.locality">
             {{ event.physicalAddress.locality }}
           </span>
@@ -128,7 +128,6 @@ export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
 </script>
 
 <style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
 article.box {
   div.content {
     padding: 5px;
@@ -149,7 +148,7 @@ article.box {
 
       div.date-component {
         flex: 0;
-        @include margin-right(16px);
+        margin-right: 16px;
       }
 
       .title {

js/src/components/Event/EventMap.vue

@@ -1,176 +0,0 @@
-<template>
-  <div class="modal-card">
-    <header class="modal-card-head">
-      <button type="button" class="delete" @click="$emit('close')" />
-    </header>
-    <div class="modal-card-body">
-      <section class="map">
-        <map-leaflet
-          :coords="physicalAddress.geom"
-          :marker="{
-            text: physicalAddress.fullName,
-            icon: physicalAddress.poiInfos.poiIcon.icon,
-          }"
-        />
-      </section>
-      <section class="columns is-centered map-footer">
-        <div class="column is-half has-text-centered">
-          <p class="address">
-            <i class="mdi mdi-map-marker"></i>
-            {{ physicalAddress.fullName }}
-          </p>
-          <p class="getting-there">{{ $t("Getting there") }}</p>
-          <div
-            class="buttons"
-            v-if="
-              addressLinkToRouteByCar ||
-              addressLinkToRouteByBike ||
-              addressLinkToRouteByFeet
-            "
-          >
-            <a
-              class="button"
-              target="_blank"
-              v-if="addressLinkToRouteByFeet"
-              :href="addressLinkToRouteByFeet"
-            >
-              <i class="mdi mdi-walk"></i
-            ></a>
-            <a
-              class="button"
-              target="_blank"
-              v-if="addressLinkToRouteByBike"
-              :href="addressLinkToRouteByBike"
-            >
-              <i class="mdi mdi-bike"></i
-            ></a>
-            <a
-              class="button"
-              target="_blank"
-              v-if="addressLinkToRouteByTransit"
-              :href="addressLinkToRouteByTransit"
-            >
-              <i class="mdi mdi-bus"></i
-            ></a>
-            <a
-              class="button"
-              target="_blank"
-              v-if="addressLinkToRouteByCar"
-              :href="addressLinkToRouteByCar"
-            >
-              <i class="mdi mdi-car"></i>
-            </a>
-          </div>
-        </div>
-      </section>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Address, IAddress } from "@/types/address.model";
-import { RoutingTransportationType, RoutingType } from "@/types/enums";
-import { PropType } from "vue";
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-const RoutingParamType = {
-  [RoutingType.OPENSTREETMAP]: {
-    [RoutingTransportationType.FOOT]: "engine=fossgis_osrm_foot",
-    [RoutingTransportationType.BIKE]: "engine=fossgis_osrm_bike",
-    [RoutingTransportationType.TRANSIT]: null,
-    [RoutingTransportationType.CAR]: "engine=fossgis_osrm_car",
-  },
-  [RoutingType.GOOGLE_MAPS]: {
-    [RoutingTransportationType.FOOT]: "dirflg=w",
-    [RoutingTransportationType.BIKE]: "dirflg=b",
-    [RoutingTransportationType.TRANSIT]: "dirflg=r",
-    [RoutingTransportationType.CAR]: "driving",
-  },
-};
-
-@Component({
-  components: {
-    "map-leaflet": () =>
-      import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
-  },
-})
-export default class EventMap extends Vue {
-  @Prop({ type: Object as PropType<IAddress> }) address!: IAddress;
-  @Prop({ type: String }) routingType!: RoutingType;
-
-  get physicalAddress(): Address | null {
-    if (!this.address) return null;
-
-    return new Address(this.address);
-  }
-
-  makeNavigationPath(
-    transportationType: RoutingTransportationType
-  ): string | undefined {
-    const geometry = this.physicalAddress?.geom;
-    if (geometry) {
-      /**
-       * build urls to routing map
-       */
-      if (!RoutingParamType[this.routingType][transportationType]) {
-        return;
-      }
-
-      const urlGeometry = geometry.split(";").reverse().join(",");
-
-      switch (this.routingType) {
-        case RoutingType.GOOGLE_MAPS:
-          return `https://maps.google.com/?saddr=Current+Location&daddr=${urlGeometry}&${
-            RoutingParamType[this.routingType][transportationType]
-          }`;
-        case RoutingType.OPENSTREETMAP:
-        default: {
-          const bboxX = geometry.split(";").reverse()[0];
-          const bboxY = geometry.split(";").reverse()[1];
-          return `https://www.openstreetmap.org/directions?from=&to=${urlGeometry}&${
-            RoutingParamType[this.routingType][transportationType]
-          }#map=14/${bboxX}/${bboxY}`;
-        }
-      }
-    }
-  }
-
-  get addressLinkToRouteByCar(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.CAR);
-  }
-
-  get addressLinkToRouteByBike(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.BIKE);
-  }
-
-  get addressLinkToRouteByFeet(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.FOOT);
-  }
-
-  get addressLinkToRouteByTransit(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.TRANSIT);
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-.modal-card-head {
-  justify-content: flex-end;
-  button.delete {
-    @include margin-right(1rem);
-  }
-}
-
-section.map {
-  height: calc(100% - 8rem);
-  width: calc(100% - 20px);
-}
-
-section.map-footer {
-  p.address {
-    margin: 1rem auto;
-  }
-  div.buttons {
-    justify-content: center;
-  }
-}
-</style>

js/src/components/Event/EventMetadataBlock.vue

@@ -2,21 +2,10 @@
   <div>
     <h2>{{ title }}</h2>
     <div class="eventMetadataBlock">
-      <!-- Custom icons -->
-      <span
-        class="icon is-medium"
-        v-if="icon && icon.substring(0, 7) === 'mz:icon'"
-      >
-        <img
-          :src="`/img/${icon.substring(8)}_monochrome.svg`"
-          width="32"
-          height="32"
-        />
-      </span>
-      <b-icon v-else-if="icon" :icon="icon" size="is-medium" />
-      <div class="content-wrapper" :class="{ 'padding-left': icon }">
+      <b-icon v-if="icon" :icon="icon" size="is-medium" />
+      <p :class="{ 'padding-left': icon }">
         <slot></slot>
-      </div>
+      </p>
     </div>
   </div>
 </template>
@@ -42,20 +31,11 @@ div.eventMetadataBlock {
   align-items: center;
   margin-bottom: 1.75rem;
 
-  .content-wrapper {
+  p {
     overflow: hidden;
-    width: 100%;
-    max-width: calc(100vw - 32px - 20px);
 
     &.padding-left {
       padding: 0 20px;
-
-      a {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
     }
   }
 }

js/src/components/Event/EventMetadataItem.vue

@@ -1,142 +0,0 @@
-<template>
-  <div class="card card-content">
-    <div class="media">
-      <div class="media-left">
-        <img
-          v-if="
-            metadataItem.icon && metadataItem.icon.substring(0, 7) === 'mz:icon'
-          "
-          :src="`/img/${metadataItem.icon.substring(8)}_monochrome.svg`"
-          width="24"
-          height="24"
-          alt=""
-        />
-
-        <b-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />
-        <b-icon v-else icon="help-circle" />
-      </div>
-      <div class="media-content">
-        <b>{{ metadataItem.title || metadataItem.label }}</b>
-        <br />
-        <small>
-          {{ metadataItem.description }}
-        </small>
-        <div
-          v-if="
-            metadataItem.type === EventMetadataType.STRING &&
-            metadataItem.keyType === EventMetadataKeyType.CHOICE &&
-            metadataItem.choices
-          "
-        >
-          <b-field v-for="(value, key) in metadataItem.choices" :key="key">
-            <b-radio v-model="metadataItemValue" :native-value="key">{{
-              value
-            }}</b-radio>
-          </b-field>
-        </div>
-        <b-field
-          v-else-if="
-            metadataItem.type === EventMetadataType.STRING &&
-            metadataItem.keyType == EventMetadataKeyType.URL
-          "
-        >
-          <b-input
-            @blur="validatePattern"
-            ref="urlInput"
-            type="url"
-            :pattern="
-              metadataItem.pattern ? metadataItem.pattern.source : undefined
-            "
-            :validation-message="$t(`This URL doesn't seem to be valid`)"
-            required
-            v-model="metadataItemValue"
-            :placeholder="metadataItem.placeholder"
-          />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.STRING">
-          <b-input
-            v-model="metadataItemValue"
-            :placeholder="metadataItem.placeholder"
-          />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.INTEGER">
-          <b-numberinput v-model="metadataItemValue" />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.BOOLEAN">
-          <b-checkbox v-model="metadataItemValue">
-            {{
-              metadataItemValue === "true"
-                ? metadataItem.choices["true"]
-                : metadataItem.choices["false"]
-            }}
-          </b-checkbox>
-        </b-field>
-      </div>
-      <b-button
-        icon-left="close"
-        @click="$emit('removeItem', metadataItem.key)"
-      />
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
-import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Ref, Vue } from "vue-property-decorator";
-
-@Component
-export default class EventMetadataItem extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  value!: IEventMetadataDescription;
-
-  EventMetadataType = EventMetadataType;
-  EventMetadataKeyType = EventMetadataKeyType;
-
-  @Ref("urlInput") readonly urlInput!: any;
-
-  get metadataItem(): IEventMetadataDescription {
-    return this.value;
-  }
-
-  get metadataItemValue(): string {
-    return this.metadataItem.value;
-  }
-
-  set metadataItemValue(value: string) {
-    if (this.validate(value)) {
-      this.$emit("input", { ...this.metadataItem, value: value.toString() });
-    }
-  }
-
-  validatePattern(): void {
-    this.urlInput.checkHtml5Validity();
-  }
-
-  private validate(value: string): boolean {
-    if (this.metadataItem.keyType === EventMetadataKeyType.URL) {
-      try {
-        const url = new URL(value);
-        if (!["http:", "https:", "mailto:"].includes(url.protocol))
-          return false;
-        if (this.metadataItem.pattern) {
-          return value.match(this.metadataItem.pattern) !== null;
-        }
-      } catch {
-        return false;
-      }
-    }
-    return true;
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-.card .media {
-  align-items: center;
-
-  & > button {
-    @include margin-left(1rem);
-  }
-}
-</style>

js/src/components/Event/EventMetadataList.vue

@@ -1,224 +0,0 @@
-<template>
-  <section>
-    <div class="mb-4">
-      <div v-for="(item, index) in metadata" :key="item.key" class="my-2">
-        <event-metadata-item
-          :value="metadata[index]"
-          @input="updateSingleMetadata"
-          @removeItem="removeItem"
-        />
-      </div>
-    </div>
-    <b-field
-      grouped
-      :label="$t('Find or add an element')"
-      label-for="event-metadata-autocomplete"
-    >
-      <b-autocomplete
-        expanded
-        :clear-on-select="true"
-        v-model="search"
-        ref="autocomplete"
-        :data="filteredDataArray"
-        group-field="category"
-        group-options="items"
-        open-on-focus
-        :placeholder="$t('e.g. Accessibility, Twitch, PeerTube')"
-        id="event-metadata-autocomplete"
-        @select="(option) => addElement(option)"
-        dir="auto"
-      >
-        <template slot-scope="props">
-          <div class="media">
-            <div class="media-left">
-              <img
-                v-if="
-                  props.option.icon &&
-                  props.option.icon.substring(0, 7) === 'mz:icon'
-                "
-                :src="`/img/${props.option.icon.substring(8)}_monochrome.svg`"
-                width="24"
-                height="24"
-                alt=""
-              />
-              <b-icon v-else-if="props.option.icon" :icon="props.option.icon" />
-              <b-icon v-else icon="help-circle" />
-            </div>
-            <div class="media-content">
-              <b>{{ props.option.label }}</b>
-              <br />
-              <small>
-                {{ props.option.description }}
-              </small>
-            </div>
-          </div>
-        </template>
-        <template #empty>{{
-          $t("No results for {search}", { search })
-        }}</template>
-      </b-autocomplete>
-      <p class="control">
-        <b-button @click="showNewElementModal = true">
-          {{ $t("Add new…") }}
-        </b-button>
-      </p>
-    </b-field>
-    <b-modal
-      has-modal-card
-      v-model="showNewElementModal"
-      :close-button-aria-label="$t('Close')"
-    >
-      <div class="modal-card">
-        <header class="modal-card-head">
-          <button
-            type="button"
-            class="delete"
-            @click="showNewElementModal = false"
-          />
-        </header>
-        <div class="modal-card-body">
-          <form @submit="addNewElement">
-            <b-field :label="$t('Element title')">
-              <b-input v-model="newElement.title" />
-            </b-field>
-            <b-field :label="$t('Element value')">
-              <b-input v-model="newElement.value" />
-            </b-field>
-            <b-button type="is-primary" native-type="submit">{{
-              $t("Add")
-            }}</b-button>
-          </form>
-        </div>
-      </div>
-    </b-modal>
-  </section>
-</template>
-<script lang="ts">
-import {
-  IEventMetadata,
-  IEventMetadataDescription,
-} from "@/types/event-metadata";
-import cloneDeep from "lodash/cloneDeep";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import EventMetadataItem from "./EventMetadataItem.vue";
-import { eventMetaDataList } from "../../services/EventMetadata";
-import { EventMetadataCategories, EventMetadataType } from "@/types/enums";
-
-type GroupedIEventMetadata = Array<{
-  category: string;
-  items: IEventMetadata[];
-}>;
-
-@Component({
-  components: {
-    EventMetadataItem,
-  },
-})
-export default class EventMetadataList extends Vue {
-  @Prop({ type: Array as PropType<Array<IEventMetadata>>, required: true })
-  value!: IEventMetadata[];
-
-  newElement = {
-    title: "",
-    value: "",
-  };
-
-  search = "";
-
-  data: IEventMetadataDescription[] = eventMetaDataList;
-
-  showNewElementModal = false;
-
-  get metadata(): IEventMetadata[] {
-    return this.value.map((val) => {
-      const def = this.data.find((dat) => dat.key === val.key);
-      return {
-        ...def,
-        ...val,
-      };
-    }) as any[];
-  }
-
-  set metadata(metadata: IEventMetadata[]) {
-    this.$emit(
-      "input",
-      metadata.filter((elem) => elem)
-    );
-  }
-
-  localizedCategories: Record<EventMetadataCategories, string> = {
-    [EventMetadataCategories.ACCESSIBILITY]: this.$t("Accessibility") as string,
-    [EventMetadataCategories.LIVE]: this.$t("Live") as string,
-    [EventMetadataCategories.REPLAY]: this.$t("Replay") as string,
-    [EventMetadataCategories.TOOLS]: this.$t("Tools") as string,
-    [EventMetadataCategories.SOCIAL]: this.$t("Social") as string,
-    [EventMetadataCategories.DETAILS]: this.$t("Details") as string,
-    [EventMetadataCategories.BOOKING]: this.$t("Booking") as string,
-    [EventMetadataCategories.VIDEO_CONFERENCE]: this.$t(
-      "Video Conference"
-    ) as string,
-  };
-
-  get filteredDataArray(): GroupedIEventMetadata {
-    return this.data
-      .filter((option) => {
-        return (
-          option.label
-            .toString()
-            .toLowerCase()
-            .indexOf(this.search.toLowerCase()) >= 0
-        );
-      })
-      .filter(({ key }) => {
-        return !this.metadata.map(({ key: key2 }) => key2).includes(key);
-      })
-      .reduce(
-        (acc: GroupedIEventMetadata, current: IEventMetadataDescription) => {
-          const group = acc.find(
-            (elem) =>
-              elem.category === this.localizedCategories[current.category]
-          );
-          if (group) {
-            group.items.push(current);
-          } else {
-            acc.push({
-              category: this.localizedCategories[current.category],
-              items: [current],
-            });
-          }
-          return acc;
-        },
-        []
-      );
-  }
-
-  updateSingleMetadata(element: IEventMetadataDescription): void {
-    const metadataClone = cloneDeep(this.metadata);
-    const index = metadataClone.findIndex((elem) => elem.key === element.key);
-    metadataClone.splice(index, 1, element);
-    this.$emit("input", metadataClone);
-  }
-
-  removeItem(itemKey: string): void {
-    const metadataClone = cloneDeep(this.metadata);
-    const index = metadataClone.findIndex((elem) => elem.key === itemKey);
-    metadataClone.splice(index, 1);
-    this.$emit("input", metadataClone);
-  }
-
-  addElement(element: IEventMetadata): void {
-    this.metadata = [...this.metadata, element];
-  }
-
-  addNewElement(e: Event): void {
-    e.preventDefault();
-    this.addElement({
-      ...this.newElement,
-      type: EventMetadataType.STRING,
-      key: `mz:plain:${(Math.random() + 1).toString(36).substring(7)}`,
-    });
-    this.showNewElementModal = false;
-  }
-}
-</script>

js/src/components/Event/EventMetadataSidebar.vue

@@ -1,260 +0,0 @@
-<template>
-  <div>
-    <event-metadata-block
-      v-if="!event.options.isOnline"
-      :title="$t('Location')"
-      :icon="physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth'"
-    >
-      <div class="address-wrapper">
-        <span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
-        <div class="address" v-if="physicalAddress">
-          <address-info :address="physicalAddress" />
-          <b-button
-            type="is-text"
-            class="map-show-button"
-            @click="$emit('showMapModal', true)"
-            v-if="physicalAddress.geom"
-          >
-            {{ $t("Show map") }}
-          </b-button>
-        </div>
-      </div>
-    </event-metadata-block>
-    <event-metadata-block :title="$t('Date and time')" icon="calendar">
-      <event-full-date
-        :beginsOn="event.beginsOn"
-        :show-start-time="event.options.showStartTime"
-        :show-end-time="event.options.showEndTime"
-        :timezone="event.options.timezone"
-        :userTimezone="userTimezone"
-        :endsOn="event.endsOn"
-      />
-    </event-metadata-block>
-    <event-metadata-block
-      class="metadata-organized-by"
-      :title="$t('Organized by')"
-    >
-      <router-link
-        v-if="event.attributedTo"
-        class="hover:underline"
-        :to="{
-          name: RouteName.GROUP,
-          params: {
-            preferredUsername: usernameWithDomain(event.attributedTo),
-          },
-        }"
-      >
-        <actor-card
-          v-if="
-            !event.attributedTo || !event.options.hideOrganizerWhenGroupEvent
-          "
-          :actor="event.attributedTo"
-          :inline="true"
-        />
-      </router-link>
-      <actor-card v-else :actor="event.organizerActor" :inline="true" />
-      <actor-card
-        :inline="true"
-        :actor="contact"
-        v-for="contact in event.contacts"
-        :key="contact.id"
-      />
-    </event-metadata-block>
-    <event-metadata-block
-      v-if="event.onlineAddress && urlToHostname(event.onlineAddress)"
-      icon="link"
-      :title="$t('Website')"
-    >
-      <a
-        target="_blank"
-        class="hover:underline"
-        rel="noopener noreferrer ugc"
-        :href="event.onlineAddress"
-        :title="
-          $t('View page on {hostname} (in a new window)', {
-            hostname: urlToHostname(event.onlineAddress),
-          })
-        "
-        >{{ simpleURL(event.onlineAddress) }}</a
-      >
-    </event-metadata-block>
-    <event-metadata-block
-      v-for="extra in extraMetadata"
-      :title="extra.title || extra.label"
-      :icon="extra.icon"
-      :key="extra.key"
-    >
-      <span
-        v-if="
-          ((extra.type == EventMetadataType.STRING &&
-            extra.keyType == EventMetadataKeyType.CHOICE) ||
-            extra.type === EventMetadataType.BOOLEAN) &&
-          extra.choices &&
-          extra.choices[extra.value]
-        "
-      >
-        {{ extra.choices[extra.value] }}
-      </span>
-      <a
-        v-else-if="
-          extra.type == EventMetadataType.STRING &&
-          extra.keyType == EventMetadataKeyType.URL
-        "
-        target="_blank"
-        rel="noopener noreferrer ugc"
-        :href="extra.value"
-        :title="
-          $t('View page on {hostname} (in a new window)', {
-            hostname: urlToHostname(extra.value),
-          })
-        "
-        >{{ simpleURL(extra.value) }}</a
-      >
-      <a
-        v-else-if="
-          extra.type == EventMetadataType.STRING &&
-          extra.keyType == EventMetadataKeyType.HANDLE
-        "
-        target="_blank"
-        rel="noopener noreferrer ugc"
-        :href="accountURL(extra)"
-        :title="
-          $t('View account on {hostname} (in a new window)', {
-            hostname: urlToHostname(accountURL(extra)),
-          })
-        "
-        >{{ extra.value }}</a
-      >
-      <span v-else>{{ extra.value }}</span>
-    </event-metadata-block>
-  </div>
-</template>
-<script lang="ts">
-import { Address } from "@/types/address.model";
-import { IConfig } from "@/types/config.model";
-import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
-import { IEvent } from "@/types/event.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import RouteName from "../../router/name";
-import { usernameWithDomain } from "../../types/actor";
-import EventMetadataBlock from "./EventMetadataBlock.vue";
-import EventFullDate from "./EventFullDate.vue";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActorCard from "../../components/Account/ActorCard.vue";
-import AddressInfo from "../../components/Address/AddressInfo.vue";
-import {
-  IEventMetadata,
-  IEventMetadataDescription,
-} from "@/types/event-metadata";
-import { eventMetaDataList } from "../../services/EventMetadata";
-import { IUser } from "@/types/current-user.model";
-
-@Component({
-  components: {
-    EventMetadataBlock,
-    EventFullDate,
-    PopoverActorCard,
-    ActorCard,
-    AddressInfo,
-  },
-})
-export default class EventMetadataSidebar extends Vue {
-  @Prop({ type: Object as PropType<IEvent>, required: true }) event!: IEvent;
-  @Prop({ type: Object as PropType<IConfig>, required: true }) config!: IConfig;
-  @Prop({ required: true }) user!: IUser | undefined;
-  @Prop({ required: false, default: false }) showMap!: boolean;
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-
-  eventMetaDataList = eventMetaDataList;
-
-  EventMetadataType = EventMetadataType;
-  EventMetadataKeyType = EventMetadataKeyType;
-
-  get physicalAddress(): Address | null {
-    if (!this.event.physicalAddress) return null;
-
-    return new Address(this.event.physicalAddress);
-  }
-
-  get extraMetadata(): IEventMetadata[] {
-    return this.event.metadata.map((val) => {
-      const def = eventMetaDataList.find((dat) => dat.key === val.key);
-      return {
-        ...def,
-        ...val,
-      };
-    });
-  }
-
-  urlToHostname(url: string): string | null {
-    try {
-      return new URL(url).hostname;
-    } catch (e) {
-      return null;
-    }
-  }
-
-  simpleURL(url: string): string | null {
-    try {
-      const uri = new URL(url);
-      return `${this.removeWWW(uri.hostname)}${uri.pathname}${uri.search}${
-        uri.hash
-      }`;
-    } catch (e) {
-      return null;
-    }
-  }
-
-  private removeWWW(string: string): string {
-    return string.replace(/^www./, "");
-  }
-
-  accountURL(extra: IEventMetadataDescription): string | undefined {
-    switch (extra.key) {
-      case "mz:social:twitter:account": {
-        const handle =
-          extra.value[0] === "@" ? extra.value.slice(1) : extra.value;
-        return `https://twitter.com/${handle}`;
-      }
-    }
-  }
-
-  get userTimezone(): string | undefined {
-    return this.user?.settings?.timezone;
-  }
-}
-</script>
-<style lang="scss" scoped>
-::v-deep .metadata-organized-by {
-  .v-popover.popover .trigger {
-    width: 100%;
-    .media-content {
-      width: calc(100% - 32px - 1rem);
-      max-width: 80vw;
-
-      p.has-text-grey-dark {
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-  }
-}
-
-div.address-wrapper {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-
-  div.address {
-    flex: 1;
-
-    .map-show-button {
-      cursor: pointer;
-    }
-  }
-}
-</style>

js/src/components/Event/EventMinimalistCard.vue

@@ -1,72 +1,19 @@
 <template>
   <router-link
-    class="event-minimalist-card-wrapper bg-white rounded-lg shadow-md"
-    dir="auto"
+    class="event-minimalist-card-wrapper"
     :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
   >
-    <div class="event-preview mr-0 ml-0">
-      <div>
-        <div class="date-component">
-          <date-calendar-icon :date="event.beginsOn" :small="true" />
-        </div>
-        <lazy-image-wrapper
-          :picture="event.picture"
-          :rounded="true"
-          style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
-        />
-      </div>
-    </div>
-    <div class="title-info-wrapper has-text-grey-dark">
-      <h3 class="event-minimalist-title" :lang="event.language" dir="auto">
-        <b-tag
-          type="is-info"
-          class="mr-1"
-          v-if="event.status === EventStatus.TENTATIVE"
-        >
-          {{ $t("Tentative") }}
-        </b-tag>
-        <b-tag
-          type="is-danger"
-          class="mr-1"
-          v-if="event.status === EventStatus.CANCELLED"
-        >
-          {{ $t("Cancelled") }}
-        </b-tag>
-        <b-tag
-          class="mr-2"
-          type="is-warning"
-          size="is-medium"
-          v-if="event.draft"
-          >{{ $t("Draft") }}</b-tag
-        >
-        {{ event.title }}
-      </h3>
-      <inline-address
-        v-if="event.physicalAddress"
-        class="event-subtitle"
-        :physical-address="event.physicalAddress"
-      />
-      <div
-        class="event-subtitle"
-        v-else-if="event.options && event.options.isOnline"
-      >
-        <b-icon icon="video" />
-        <span>{{ $t("Online") }}</span>
-      </div>
-      <div class="event-subtitle event-organizer" v-if="showOrganizer">
-        <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>
-      <p class="participant-metadata">
-        <b-icon icon="account-multiple" />
+    <date-calendar-icon
+      class="calendar-icon"
+      :date="event.beginsOn"
+      :small="true"
+    />
+    <div class="title-info-wrapper">
+      <p class="event-minimalist-title">{{ event.title }}</p>
+      <p v-if="event.physicalAddress" class="has-text-grey">
+        {{ event.physicalAddress.description }}
+      </p>
+      <p v-else>
         <span v-if="event.options.maximumAttendeeCapacity !== 0">
           {{
             $tc(
@@ -117,90 +64,44 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IEvent, organizer, organizerDisplayName } from "@/types/event.model";
+import { IEvent } from "@/types/event.model";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
-import { EventStatus, ParticipantRole } from "@/types/enums";
+import { ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
-import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
-import InlineAddress from "@/components/Address/InlineAddress.vue";
 
 @Component({
   components: {
     DateCalendarIcon,
-    LazyImageWrapper,
-    InlineAddress,
   },
 })
 export default class EventMinimalistCard extends Vue {
   @Prop({ required: true, type: Object }) event!: IEvent;
-  @Prop({ required: false, type: Boolean, default: false })
-  showOrganizer!: boolean;
 
   RouteName = RouteName;
 
   ParticipantRole = ParticipantRole;
-
-  organizerDisplayName = organizerDisplayName;
-
-  organizer = organizer;
-
-  EventStatus = EventStatus;
 }
 </script>
 <style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-@use "@/styles/_event-card";
-@import "~bulma/sass/utilities/mixins.sass";
-@import "@/variables.scss";
-
 .event-minimalist-card-wrapper {
-  display: grid;
-  grid-gap: 5px 10px;
-  grid-template-areas: "preview" "body";
+  display: flex;
+  width: 100%;
   color: initial;
-
-  @include desktop {
-    grid-template-columns: 200px 3fr;
-    grid-template-areas: "preview body";
-  }
-
-  .event-preview {
-    & > div {
-      position: relative;
-      height: 120px;
-      width: 100%;
-
-      div.date-component {
-        display: flex;
-        position: absolute;
-        bottom: 5px;
-        left: 5px;
-        z-index: 1;
-      }
-    }
-  }
+  align-items: flex-start;
 
   .calendar-icon {
-    @include margin-right(1rem);
+    margin-right: 1rem;
   }
 
   .title-info-wrapper {
     flex: 2;
 
     .event-minimalist-title {
-      padding-bottom: 5px;
-      font-size: 18px;
-      line-height: 24px;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      font-weight: bold;
-      color: $title-color;
-    }
-
-    ::v-deep .icon {
-      vertical-align: middle;
+      color: #3c376e;
+      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
+        serif;
+      font-size: 1.25rem;
+      font-weight: 700;
     }
   }
 }

js/src/components/Event/FullAddressAutoComplete.vue

@@ -1,94 +1,59 @@
 <template>
-  <div class="address-autocomplete columns is-desktop">
-    <div class="column">
-      <b-field
-        :label-for="id"
-        expanded
-        :message="fieldErrors"
-        :type="{ 'is-danger': fieldErrors.length }"
-      >
-        <template slot="label">
-          {{ actualLabel }}
-          <span
-            class="is-size-6 has-text-weight-normal"
-            v-if="gettingLocation"
-            >{{ $t("Getting location") }}</span
-          >
-        </template>
-        <p class="control" v-if="canShowLocateMeButton && !gettingLocation">
-          <b-button
-            icon-right="map-marker"
-            @click="locateMe"
-            :title="$t('Use my location')"
-          />
-        </p>
-        <b-autocomplete
-          :data="addressData"
-          v-model="queryText"
-          :placeholder="$t('e.g. 10 Rue Jangot')"
-          field="fullName"
-          :loading="isFetching"
-          @typing="fetchAsyncData"
-          :icon="canShowLocateMeButton ? null : 'map-marker'"
-          expanded
-          @select="updateSelected"
-          v-bind="$attrs"
-          :id="id"
-          :disabled="disabled"
-          dir="auto"
-        >
-          <template #default="{ option }">
-            <b-icon :icon="option.poiInfos.poiIcon.icon" />
-            <b>{{ option.poiInfos.name }}</b
-            ><br />
-            <small>{{ option.poiInfos.alternativeName }}</small>
-          </template>
-          <template #empty>
-            <span v-if="isFetching">{{ $t("Searching…") }}</span>
-            <div v-else-if="queryText.length >= 3" class="is-enabled">
-              <span>{{
-                $t('No results for "{queryText}"', { queryText })
-              }}</span>
-              <span>{{
-                $t(
-                  "You can try another search term or drag and drop the marker on the map",
-                  {
-                    queryText,
-                  }
-                )
-              }}</span>
-              <!--                        <p class="control" @click="openNewAddressModal">-->
-              <!--                            <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
-              <!--                        </p>-->
-            </div>
-          </template>
-        </b-autocomplete>
+  <div class="address-autocomplete">
+    <b-field expanded>
+      <template slot="label">
+        {{ actualLabel }}
         <b-button
-          :disabled="!queryText"
-          @click="resetAddress"
-          class="reset-area"
-          icon-left="close"
-          :title="$t('Clear address field')"
+          v-if="canShowLocateMeButton && !gettingLocation"
+          size="is-small"
+          icon-right="map-marker"
+          @click="locateMe"
         />
-      </b-field>
-      <div
-        class="card"
-        v-if="!hideSelected && (selected.originId || selected.url)"
+        <span v-else-if="gettingLocation">{{ $t("Getting location") }}</span>
+      </template>
+      <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"
       >
-        <div class="card-content">
-          <address-info
-            :address="selected"
-            :show-icon="true"
-            :show-timezone="true"
-            :user-timezone="userTimezone"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="map column"
-      v-if="!hideMap && selected && selected.geom && selected.poiInfos"
-    >
+        <template #default="{ option }">
+          <b-icon :icon="option.poiInfos.poiIcon.icon" />
+          <b>{{ option.poiInfos.name }}</b
+          ><br />
+          <small>{{ option.poiInfos.alternativeName }}</small>
+        </template>
+        <template slot="empty">
+          <span v-if="isFetching">{{ $t("Searching…") }}</span>
+          <div v-else-if="queryText.length >= 3" class="is-enabled">
+            <span>{{ $t('No results for "{queryText}"', { queryText }) }}</span>
+            <span>{{
+              $t(
+                "You can try another search term or drag and drop the marker on the map",
+                {
+                  queryText,
+                }
+              )
+            }}</span>
+            <!--                        <p class="control" @click="openNewAddressModal">-->
+            <!--                            <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
+            <!--                        </p>-->
+          </div>
+        </template>
+      </b-autocomplete>
+      <b-button
+        :disabled="!queryText"
+        @click="resetAddress"
+        class="reset-area"
+        icon-left="close"
+      />
+    </b-field>
+    <div class="map" v-if="selected && selected.geom && selected.poiInfos">
       <map-leaflet
         :coords="selected.geom"
         :marker="{
@@ -100,47 +65,149 @@
         :readOnly="false"
       />
     </div>
+    <!--        <b-modal v-if="selected" :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">-->
+    <!--            <div class="modal-card" style="width: auto">-->
+    <!--                <header class="modal-card-head">-->
+    <!--                    <p class="modal-card-title">{{ $t('Add an address') }}</p>-->
+    <!--                </header>-->
+    <!--                <section class="modal-card-body">-->
+    <!--                    <form>-->
+    <!--                        <b-field :label="$t('Name')">-->
+    <!--                            <b-input aria-required="true" required v-model="selected.description" />-->
+    <!--                        </b-field>-->
+
+    <!--                        <b-field :label="$t('Street')">-->
+    <!--                            <b-input v-model="selected.street" />-->
+    <!--                        </b-field>-->
+
+    <!--                        <b-field grouped>-->
+    <!--                            <b-field :label="$t('Postal Code')">-->
+    <!--                                <b-input v-model="selected.postalCode" />-->
+    <!--                            </b-field>-->
+
+    <!--                            <b-field :label="$t('Locality')">-->
+    <!--                                <b-input v-model="selected.locality" />-->
+    <!--                            </b-field>-->
+    <!--                        </b-field>-->
+
+    <!--                        <b-field grouped>-->
+    <!--                            <b-field :label="$t('Region')">-->
+    <!--                                <b-input v-model="selected.region" />-->
+    <!--                            </b-field>-->
+
+    <!--                            <b-field :label="$t('Country')">-->
+    <!--                                <b-input v-model="selected.country" />-->
+    <!--                            </b-field>-->
+    <!--                        </b-field>-->
+    <!--                    </form>-->
+    <!--                </section>-->
+    <!--                <footer class="modal-card-foot">-->
+    <!--                    <button class="button" type="button" @click="resetPopup()">{{ $t('Clear') }}</button>-->
+    <!--                </footer>-->
+    <!--            </div>-->
+    <!--        </b-modal>-->
   </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Watch, Mixins } from "vue-property-decorator";
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { LatLng } from "leaflet";
+import debounce from "lodash/debounce";
+import { DebouncedFunc } from "lodash";
 import { Address, IAddress } from "../../types/address.model";
-import AddressAutoCompleteMixin from "../../mixins/AddressAutoCompleteMixin";
-import AddressInfo from "../../components/Address/AddressInfo.vue";
+import { ADDRESS, REVERSE_GEOCODE } from "../../graphql/address";
+import { CONFIG } from "../../graphql/config";
+import { IConfig } from "../../types/config.model";
 
 @Component({
-  inheritAttrs: false,
   components: {
-    AddressInfo,
+    "map-leaflet": () =>
+      import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
+  },
+  apollo: {
+    config: CONFIG,
   },
 })
-export default class FullAddressAutoComplete extends Mixins(
-  AddressAutoCompleteMixin
-) {
+export default class FullAddressAutoComplete extends Vue {
+  @Prop({ required: true }) value!: IAddress;
+
   @Prop({ required: false, default: "" }) label!: string;
-  @Prop({ required: false }) userTimezone!: string;
-  @Prop({ required: false, default: false, type: Boolean }) disabled!: boolean;
-  @Prop({ required: false, default: false, type: Boolean }) hideMap!: boolean;
-  @Prop({ required: false, default: false, type: Boolean })
-  hideSelected!: boolean;
+
+  addressData: IAddress[] = [];
+
+  selected: IAddress = new Address();
+
+  isFetching = false;
+
+  queryText: string = (this.value && new Address(this.value).fullName) || "";
 
   addressModalActive = false;
 
-  private static componentId = 0;
+  private gettingLocation = false;
 
-  created(): void {
-    FullAddressAutoComplete.componentId += 1;
+  // eslint-disable-next-line no-undef
+  private location!: GeolocationPosition;
+
+  private gettingLocationError: any;
+
+  private mapDefaultZoom = 15;
+
+  config!: IConfig;
+
+  fetchAsyncData!: DebouncedFunc<(query: string) => Promise<void>>;
+
+  // We put this in data because of issues like
+  // https://github.com/vuejs/vue-class-component/issues/263
+  data(): Record<string, unknown> {
+    return {
+      fetchAsyncData: debounce(this.asyncData, 200),
+    };
   }
 
-  get id(): string {
-    return `full-address-autocomplete-${FullAddressAutoComplete.componentId}`;
+  async asyncData(query: string): Promise<void> {
+    if (!query.length) {
+      this.addressData = [];
+      this.selected = new Address();
+      return;
+    }
+
+    if (query.length < 3) {
+      this.addressData = [];
+      return;
+    }
+
+    this.isFetching = true;
+    const result = await this.$apollo.query({
+      query: ADDRESS,
+      fetchPolicy: "network-only",
+      variables: {
+        query,
+        locale: this.$i18n.locale,
+      },
+    });
+
+    this.addressData = result.data.searchAddress.map(
+      (address: IAddress) => new Address(address)
+    );
+    this.isFetching = false;
+  }
+
+  @Watch("config")
+  watchConfig(config: IConfig): void {
+    if (!config.geocoding.autocomplete) {
+      // If autocomplete is disabled, we put a larger debounce value
+      // so that we don't request with incomplete address
+      this.fetchAsyncData = debounce(this.asyncData, 2000);
+    }
   }
 
   @Watch("value")
   updateEditing(): void {
     if (!(this.value && this.value.id)) return;
     this.selected = this.value;
+    const address = new Address(this.selected);
+    if (address.poiInfos) {
+      this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`;
+    }
   }
 
   updateSelected(option: IAddress): void {
@@ -158,6 +225,30 @@ export default class FullAddressAutoComplete extends Mixins(
     this.addressModalActive = true;
   }
 
+  async reverseGeoCode(e: LatLng, zoom: number): Promise<void> {
+    // If the position has been updated through autocomplete selection, no need to geocode it!
+    if (this.checkCurrentPosition(e)) return;
+    const result = await this.$apollo.query({
+      query: REVERSE_GEOCODE,
+      variables: {
+        latitude: e.lat,
+        longitude: e.lng,
+        zoom,
+        locale: this.$i18n.locale,
+      },
+    });
+
+    this.addressData = result.data.reverseGeocode.map(
+      (address: IAddress) => new Address(address)
+    );
+    if (this.addressData.length > 0) {
+      const defaultAddress = new Address(this.addressData[0]);
+      this.selected = defaultAddress;
+      this.$emit("input", this.selected);
+      this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`;
+    }
+  }
+
   checkCurrentPosition(e: LatLng): boolean {
     if (!this.selected || !this.selected.geom) return false;
     const lat = parseFloat(this.selected.geom.split(";")[1]);
@@ -166,6 +257,25 @@ export default class FullAddressAutoComplete extends Mixins(
     return e.lat === lat && e.lng === lon;
   }
 
+  async locateMe(): Promise<void> {
+    this.gettingLocation = true;
+    try {
+      this.gettingLocation = false;
+      this.location = await FullAddressAutoComplete.getLocation();
+      this.mapDefaultZoom = 12;
+      this.reverseGeoCode(
+        new LatLng(
+          this.location.coords.latitude,
+          this.location.coords.longitude
+        ),
+        12
+      );
+    } catch (e) {
+      this.gettingLocation = false;
+      this.gettingLocationError = e.message;
+    }
+  }
+
   get actualLabel(): string {
     return this.label || (this.$t("Find an address") as string);
   }
@@ -174,6 +284,38 @@ export default class FullAddressAutoComplete extends Mixins(
   get canShowLocateMeButton(): boolean {
     return window.isSecureContext;
   }
+
+  // eslint-disable-next-line no-undef
+  static async getLocation(): Promise<GeolocationPosition> {
+    return new Promise((resolve, reject) => {
+      if (!("geolocation" in navigator)) {
+        reject(new Error("Geolocation is not available."));
+      }
+
+      navigator.geolocation.getCurrentPosition(
+        (pos) => {
+          resolve(pos);
+        },
+        (err) => {
+          reject(err);
+        }
+      );
+    });
+  }
+
+  @Watch("queryText")
+  resetAddressOnEmptyField(queryText: string): void {
+    if (queryText === "" && this.selected?.id) {
+      console.log("doing reset");
+      this.resetAddress();
+    }
+  }
+
+  resetAddress(): void {
+    this.$emit("input", null);
+    this.queryText = "";
+    this.selected = new Address();
+  }
 }
 </script>
 <style lang="scss">

js/src/components/Event/GroupedMultiEventMinimalistCard.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="events-wrapper">
-    <div class="month-group" v-for="key of keys" :key="key">
-      <h2 class="is-size-5 month-name">
-        {{ monthName(groupEvents(key)[0]) }}
-      </h2>
-      <event-minimalist-card
-        class="py-4"
-        v-for="event in groupEvents(key)"
-        :key="event.id"
-        :event="event"
-        :isCurrentActorMember="isCurrentActorMember"
-      />
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { IEvent } from "@/types/event.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import EventMinimalistCard from "./EventMinimalistCard.vue";
-
-@Component({
-  components: {
-    EventMinimalistCard,
-  },
-})
-export default class GroupedMultiEventMinimalistCard extends Vue {
-  @Prop({ type: Array as PropType<IEvent[]>, required: true })
-  events!: IEvent[];
-  @Prop({ required: false, type: Boolean, default: false })
-  isCurrentActorMember!: boolean;
-
-  get monthlyGroupedEvents(): Map<string, IEvent[]> {
-    return this.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
-      const beginsOn = new Date(event.beginsOn);
-      const month = `${beginsOn.getUTCMonth()}-${beginsOn.getUTCFullYear()}`;
-      const monthEvents = acc.get(month) || [];
-      acc.set(month, [...monthEvents, event]);
-      return acc;
-    }, new Map());
-  }
-
-  get keys(): string[] {
-    return Array.from(this.monthlyGroupedEvents.keys()).sort((a, b) =>
-      b.localeCompare(a)
-    );
-  }
-
-  groupEvents(key: string): IEvent[] {
-    return this.monthlyGroupedEvents.get(key) || [];
-  }
-
-  monthName(event: IEvent): string {
-    const beginsOn = new Date(event.beginsOn);
-    return new Intl.DateTimeFormat(undefined, {
-      month: "long",
-      year: "numeric",
-    }).format(beginsOn);
-  }
-}
-</script>
-<style lang="scss" scoped>
-.events-wrapper {
-  display: grid;
-  grid-gap: 20px;
-  grid-template: 1fr;
-}
-.month-group {
-  .month-name {
-    text-transform: capitalize;
-    text-transform: capitalize;
-    display: inline-block;
-    position: relative;
-    font-size: 1.3rem;
-
-    &::after {
-      background: $orange-3;
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 100%;
-      content: "";
-      width: calc(100% + 30px);
-      height: 3px;
-      max-width: 150px;
-    }
-  }
-}
-</style>

js/src/components/Event/Integrations/Etherpad.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="etherpad">
-    <div class="etherpad-container" v-if="metadata">
-      <iframe
-        :src="`${metadata.value}?showChat=false&showLineNumbers=false`"
-        width="600"
-        height="400"
-      ></iframe>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class EtherpadIntegration extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  metadata!: IEventMetadataDescription;
-}
-</script>
-<style lang="scss" scoped>
-.etherpad {
-  .etherpad-container {
-    padding-top: 56.25%;
-    position: relative;
-    height: 0;
-
-    iframe {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-    }
-  }
-}
-</style>