From fb8e94c4e3990acae56b8497f506bd5e3bd9efc8 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 20 Oct 2020 10:36:43 +0200
Subject: [PATCH] Show languages on instance about

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/graphql/config.ts             |  2 ++
 js/src/types/config.model.ts         |  1 +
 js/src/views/About/AboutInstance.vue | 14 ++++++++++++++
 3 files changed, 17 insertions(+)

diff --git a/js/src/graphql/config.ts b/js/src/graphql/config.ts
index a163d438b..f8c2e5d6b 100644
--- a/js/src/graphql/config.ts
+++ b/js/src/graphql/config.ts
@@ -9,6 +9,7 @@ export const CONFIG = gql`
       registrationsAllowlist
       demoMode
       countryCode
+      languages
       anonymous {
         participation {
           allowed
@@ -93,6 +94,7 @@ export const ABOUT = gql`
       description
       longDescription
       contact
+      languages
       registrationsOpen
       registrationsAllowlist
       anonymous {
diff --git a/js/src/types/config.model.ts b/js/src/types/config.model.ts
index 43a1177e5..30a79b82f 100644
--- a/js/src/types/config.model.ts
+++ b/js/src/types/config.model.ts
@@ -11,6 +11,7 @@ export interface IConfig {
   registrationsAllowlist: boolean;
   demoMode: boolean;
   countryCode: string;
+  languages: string[];
   location: {
     latitude: number;
     longitude: number;
diff --git a/js/src/views/About/AboutInstance.vue b/js/src/views/About/AboutInstance.vue
index 13416dec4..fdad1e4d8 100644
--- a/js/src/views/About/AboutInstance.vue
+++ b/js/src/views/About/AboutInstance.vue
@@ -42,6 +42,10 @@
     <section class="config">
       <h3 class="subtitle">{{ $t("Instance configuration") }}</h3>
       <table class="table is-fullwidth">
+        <tr>
+          <td>{{ $t("Instance languages") }}</td>
+          <td>{{ formatList(config.languages.map((lang) => getLanguageNameForCode(lang))) }}</td>
+        </tr>
         <tr>
           <td>{{ $t("Mobilizon version") }}</td>
           <td>{{ config.version }}</td>
@@ -73,10 +77,12 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { formatList } from "@/utils/i18n";
 import { ABOUT } from "../../graphql/config";
 import { STATISTICS } from "../../graphql/statistics";
 import { IConfig } from "../../types/config.model";
 import { IStatistics } from "../../types/statistics.model";
+import langs from "../../i18n/langs.json";
 
 @Component({
   apollo: {
@@ -89,6 +95,8 @@ export default class AboutInstance extends Vue {
 
   statistics!: IStatistics;
 
+  formatList = formatList;
+
   get isContactEmail(): boolean {
     return this.config && this.config.contact.includes("@");
   }
@@ -97,6 +105,12 @@ export default class AboutInstance extends Vue {
     return this.config && this.config.contact.match(/^https?:\/\//g) !== null;
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  getLanguageNameForCode(code: string): string {
+    const languageMaps = langs as Record<string, any>;
+    return languageMaps[code];
+  }
+
   generateConfigLink(): { uri: string; text: string } | null {
     if (!this.config.contact) return null;
     if (this.isContactEmail) {