Show languages on instance about

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

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 {

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;

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) {