Interface translation test

app/frontend/package-lock.json

@@ -1806,16 +1806,6 @@
           "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1842,34 +1832,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1891,25 +1853,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1974,16 +1917,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -2000,18 +1933,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.1.2",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
-          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -11336,6 +11257,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.1.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+      "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",

app/frontend/src/App.vue

@@ -28,13 +28,25 @@
 </style>
 
 <script>
+  import axios from 'axios'
   document.title = 'TinyCheck Frontend'
   import Controls from "@/components/Controls.vue"
-
+  
   export default {
     name: 'app',
     components: {
         Controls
+    },
+    methods: {
+        get_lang: function() {
+            axios.get(`/api/misc/get-lang`, { timeout: 60000 })
+                .then(response => { window.translation = response.data; })
+                .catch(error => { console.log(error) });
+        }
+    },
+    created: function() {
+        window.translation = {}
+        this.get_lang()
     }
   }
 </script>

app/frontend/src/router/index.js

@@ -41,12 +41,14 @@ const routes = [
     component: () => import('../views/save-capture.vue'),
     props: true
   },
-  { path: '/analysis',
+  {
+    path: '/analysis',
     name: 'analysis',
     component: () => import('../views/analysis.vue'),
     props: true
   },
-  { path: '/report',
+  {
+    path: '/report',
     name: 'report',
     component: () => import('../views/report.vue'),
     props: true

app/frontend/src/views/analysis.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="center">
         <div v-if="question">
-            <p>Do you want to analyze the captured communications?</p>
+            <p>{{ translation.question }}</p>
             <div class="empty-action">
-                <button class="btn" v-on:click="save_capture()">No, just save them</button>  <button class="btn btn-primary" v-on:click="start_analysis()">Yes, let's do it</button>
+                <button class="btn" v-on:click="save_capture()">{{ translation.no_btn }}</button> <button class="btn btn-primary" v-on:click="start_analysis()">{{ translation.yes_btn }}</button>
             </div>
         </div>
         <div v-else-if="running">
             <img src="@/assets/loading.svg"/>
-            <p class="legend" v-if="!long_waiting">Please wait during the analysis...</p>
+            <p class="legend" v-if="!long_waiting">{{ translation.please_wait_msg }}</p>
-            <p class="legend fade-in" v-if="long_waiting">Yes, it can take some time...</p>
+            <p class="legend fade-in" v-if="long_waiting">{{ translation.some_time_msg }}</p>
         </div>
     </div>
 </template>
@@ -25,7 +25,8 @@ export default {
             question: true,
             running: false,
             check_alerts: false,
-            long_waiting: false
+            long_waiting: false,
+            translation: {}
         }
     },
     props: {
@@ -65,6 +66,9 @@ export default {
             var capture_token = this.capture_token
             router.replace({ name: 'save-capture', params: { capture_token: capture_token } });
         }
+    },
+    created: function() {
+        this.translation  = window.translation[this.$route.name]
     }
 }
 </script>

app/frontend/src/views/capture.vue

@@ -3,10 +3,10 @@
         <svg id="sparkline" stroke-width="3" :width="sparkwidth" :height="sparkheight" v-if="sparklines"></svg>
         <div class="center">
             <div class="footer">
-                <h3 class="timer">{{timer_hours}}:{{timer_minutes}}:{{timer_seconds}}</h3>
+                <h3 class="timer">{{ timer_hours }}:{{ timer_minutes }}:{{ timer_seconds }}</h3>
-                <p>Intercepting the communications of {{device_name}}.</p>
+                <p>{{ translation.intercept_coms_msg }} {{ device_name }}.</p>
                 <div class="empty-action">
-                    <button class="btn" :class="[ loading ? 'loading' : 'btn-primary', ]" v-on:click="stop_capture()">Stop the capture</button>
+                    <button class="btn" :class="[ loading ? 'loading' : 'btn-primary', ]" v-on:click="stop_capture()">{{ translation.stop_btn }}</button>
                 </div>
             </div>
         </div>
@@ -29,7 +29,8 @@ export default {
             loading: false,
             stats_interval: false,
             chrono_interval: false,
-            sparklines: false
+            sparklines: false,
+            translation: {}
         }
     },
     props: {
@@ -86,12 +87,14 @@ export default {
                 .catch(error => {
                     console.log(error)
             });
-        }
+        },
     },
     created: function() {
+        this.translation  = window.translation[this.$route.name]
+
         // Get the config for the sparklines.
         this.setup_sparklines()
-
+        
         // Start the chrono and get the first stats.
         this.capture_start = Date.now()
         this.set_chrono();

app/frontend/src/views/generate-ap.vue

@@ -9,29 +9,29 @@
                         </div>
                         <div class="divider-vert white-bg" data-content="OR"></div>
                         <div class="column col-5"><br />
-                            <span class="light-grey">Network name: </span><br />
+                            <span class="light-grey">{{ translation.network_name }}</span><br />
                             <h4>{{ ssid_name }}</h4>
-                            <span class="light-grey">Network password: </span><br />
+                            <span class="light-grey">{{ translation.network_password }}</span><br />
                             <h4>{{ ssid_password }}</h4>
                         </div>
                     </div>
                 </div>
                 <br /><br /><br /><br /> <br /><br /><br /><br /><br /><br />
                 <!-- Requite a CSS MEME for that shit :) -->
-                <span class="legend">Tap the white frame to generate a new network.</span>
+                <span class="legend">{{ translation.tap_msg }}</span>
             </div>
             <div v-else>
                 <img src="@/assets/loading.svg"/>
-                <p class="legend">We generate an ephemeral network for you.</p>
+                <p class="legend">{{ translation.generate_ap_msg }}</p>
             </div>
         </div>
         <div v-else>
             <p>
-                <strong>Unfortunately, we got some issues <br />during the AP creation.</strong>
+                <strong v-html="translation.error_msg1"></strong>
                 <br /><br />
-                Please verify that you've two WiFi interfaces on your device<br /> and try again by restarting it.<br /><br /> 
+                <span v-html="translation.error_msg2"></span><br /><br /> 
             </p>
-            <button v-if="reboot_option" class="btn" v-on:click="reboot()">Restart the device</button>
+            <button v-if="reboot_option" class="btn" v-on:click="reboot()">{{ translation.restart_btn }}</button>
         </div>
     </div>
     
@@ -54,7 +54,8 @@ export default {
             interval: false,
             error: false,
             reboot_option: false,
-            attempts: 3
+            attempts: 3,
+            translation: {}
         }
     },
     methods: {
@@ -116,7 +117,7 @@ export default {
                 });
             }
         },
-        load_config: function() {
+        get_config: function() {
             axios.get(`/api/misc/config`, { timeout: 60000 })
                 .then(response => {
                     this.reboot_option = response.data.reboot_option
@@ -127,7 +128,8 @@ export default {
         },
     },
     created: function() {
-        this.load_config()
+        this.translation  = window.translation[this.$route.name]
+        this.get_config();
         this.generate_ap();
     }
 }

app/frontend/src/views/home.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="center">
-        <h3 class="lobster">Welcome to TinyCheck.</h3>
+        <h3 class="lobster">{{ translation.welcome_msg }}</h3>
-        <p>We are going to help you to check your device.</p>
+        <p>{{ translation.help_msg }}</p>
-        <button class="btn btn-primary" v-on:click="next()">Let's start!</button>
+        <button class="btn btn-primary" v-on:click="next()">{{ translation.start_btn }}</button>
     </div>
 </template>
 
@@ -12,12 +12,16 @@ import router from '../router'
 export default {
     name: 'home',
     props: { saved_ssid: String, iface_out: String, list_ssids: Array, internet: Boolean },
+     data() {
+        return {
+            translation: {},
+        }
+    },
     methods: {
         next: function() {
             var saved_ssid = this.saved_ssid
             var list_ssids = this.list_ssids
             var internet = this.internet
-            console.log(this.iface_out)
             if (this.iface_out.charAt(0) == "e"){
                 router.push({ name: 'generate-ap' });
             } else {
@@ -26,7 +30,10 @@ export default {
                                         list_ssids: list_ssids, 
                                         internet:internet } });
             }
-               }
+        }
+    },
+    created: function() {
+        this.translation  = window.translation[this.$route.name]
     }
 }
 </script>

app/frontend/src/views/report.vue

@@ -3,69 +3,69 @@
         <div v-if="results">
             <div v-if="grep_keyword('STALKERWARE', 'high')" class="high-wrapper">
                 <div class="center">
-                    <h1 class="warning-title">Your device is compromised by<br />a Stalkerware, please check the report.</h1>
+                    <h1 class="warning-title" v-html="translation.stalkerware_msg"></h1>
-                    <button class="btn btn-report-low-light" v-on:click="new_capture()">Start a new capture</button>
+                    <button class="btn btn-report-low-light" v-on:click="new_capture()">{{ translation.start_new_capture }}</button>
-                    <button class="btn btn-report-high" @click="show_report=true;results=false;">Show the full report</button>
+                    <button class="btn btn-report-high" @click="show_report=true;results=false;">{{ translation.show_full_report }}</button>
                 </div>
             </div>
             <div v-else-if="alerts.high.length >= 1" class="high-wrapper">
                 <div class="center">
-                    <h1 class="warning-title">You have {{ nb_translate(alerts.high.length) }} high alert,<br />your device seems to be compromised.</h1>
+                    <h1 class="warning-title" v-html="translation.high_msg"></h1>
-                    <button class="btn btn-report-low-light" v-on:click="new_capture()">Start a new capture</button>
+                    <button class="btn btn-report-low-light" v-on:click="new_capture()">{{ translation.start_new_capture }}</button>
-                    <button class="btn btn-report-high" @click="show_report=true;results=false;">Show the full report</button>
+                    <button class="btn btn-report-high" @click="show_report=true;results=false;">{{ translation.show_full_report }}</button>
                 </div>
             </div>
             <div v-else-if="grep_keyword('TRACKER', 'moderate')" class="med-wrapper">
                 <div class="center">
-                    <h1 class="warning-title">An application is sharing your<br /> current geolocation with a third party.</h1>
+                    <h1 class="warning-title" v-html="translation.location_msg"></h1>
-                    <button class="btn btn-report-low-light" v-on:click="new_capture()">Start a new capture</button>
+                    <button class="btn btn-report-low-light" v-on:click="new_capture()">{{ translation.start_new_capture }}</button>
-                    <button class="btn btn-report-moderate" @click="show_report=true;results=false;">Show the full report</button>
+                    <button class="btn btn-report-moderate" @click="show_report=true;results=false;">{{ translation.show_full_report }}</button>
                 </div>
             </div>
             <div v-else-if="alerts.moderate.length >= 1" class="med-wrapper">
                 <div class="center">
-                    <h1 class="warning-title">You have {{ nb_translate(alerts.moderate.length) }} moderate alerts,<br />your device might be compromised.</h1>
+                    <h1 class="warning-title" v-html="translation.moderate_msg"></h1>
-                    <button class="btn btn-report-low-light" v-on:click="new_capture()">Start a new capture</button>
+                    <button class="btn btn-report-low-light" v-on:click="new_capture()">{{ translation.start_new_capture }}</button>
-                    <button class="btn btn-report-moderate" @click="show_report=true;results=false;">Show the full report</button>
+                    <button class="btn btn-report-moderate" @click="show_report=true;results=false;">{{ translation.show_full_report }}</button>
                 </div>
             </div>
             <div v-else-if="alerts.low.length >= 1" class="low-wrapper">
                 <div class="center">
-                    <h1 class="warning-title">You have only {{ nb_translate(alerts.moderate.low) }} low alerts,<br /> don't hesitate to check them.</h1>
+                    <h1 class="warning-title" v-html="translation.low_msg"></h1>
-                    <button class="btn btn-report-low-light" v-on:click="new_capture()">Start a new capture</button>
+                    <button class="btn btn-report-low-light" v-on:click="new_capture()">{{ translation.start_new_capture }}</button>
-                    <button class="btn btn-report-low" @click="show_report=true;results=false;">Show the full report</button>
+                    <button class="btn btn-report-low" @click="show_report=true;results=false;">{{ translation.show_full_report }}</button>
                 </div>
             </div>
             <div v-else  class="none-wrapper">
                 <div class="center">
-                    <h1 class="warning-title">Everything looks fine, zero alerts.</h1>
+                    <h1 class="warning-title" v-html="translation.fine_msg">
-                    <button class="btn btn-report-low-light" v-on:click="save_capture()">Save the capture</button>
+                    <button class="btn btn-report-low-light" v-on:click="save_capture()">{{ translation.save_capture }}</button>
-                    <button class="btn btn-report-low" v-on:click="new_capture()">Start a new capture</button>
+                    <button class="btn btn-report-low" v-on:click="new_capture()">{{ translation.start_new_capture }}</button>
                 </div>
             </div>
         </div>
         <div v-else-if="show_report" class="report-wrapper">
             <div class="device-ctx">
-                <h3 style="margin: 0;">Report for {{device.name}}</h3>
+                <h3 style="margin: 0;">{{ translation.report_of }} {{ device.name }}</h3>
-                IP Address: {{device.ip_address}}<br />Mac Address: {{device.mac_address}}
+                {{ translation.ip_address }} {{device.ip_address}}<br />{{ translation.mac_address }} {{device.mac_address}}
             </div>
             <ul class="alerts">
                 <li class="alert" v-for="alert in alerts.high" :key="alert.message">
-                    <span class="high-label">High</span><span class="alert-id">{{ alert.id }}</span> 
+                    <span class="high-label">{{ translation.high }}</span><span class="alert-id">{{ alert.id }}</span> 
                     <div class="alert-body">
                         <span class="title">{{ alert.title }}</span>
                         <p class="description">{{ alert.description }}</p>
                     </div>
                 </li>
                 <li class="alert" v-for="alert in alerts.moderate" :key="alert.message">
-                    <span class="moderate-label">Moderate</span><span class="alert-id">{{ alert.id }}</span> 
+                    <span class="moderate-label">{{ translation.moderate }}</span><span class="alert-id">{{ alert.id }}</span> 
                     <div class="alert-body">
                         <span class="title">{{ alert.title }}</span>
                         <p class="description">{{ alert.description }}</p>
                     </div>
                 </li>
                 <li class="alert" v-for="alert in alerts.low" :key="alert.message">
-                    <span class="low-label">Low</span><span class="alert-id">{{ alert.id }}</span> 
+                    <span class="low-label">{{ translation.low }}</span><span class="alert-id">{{ alert.id }}</span> 
                     <div class="alert-body">
                         <span class="title">{{ alert.title }}</span>
                         <p class="description">{{ alert.description }}</p>
@@ -74,11 +74,11 @@
             </ul>
             <div class="columns" id="controls-analysis">
                     <div class="column col-5">
-                        <button class="btn width-100" @click="$router.push('generate-ap')">Start a capture</button>
+                        <button class="btn width-100" @click="$router.push('generate-ap')">{{ translation.start_new_capture }}</button>
                     </div>
                     <div class="divider-vert column col-2" data-content="OR"></div>
                     <div class="column col-5">
-                        <button class="btn btn btn-primary width-100" v-on:click="save_capture()">Save the report</button>
+                        <button class="btn btn btn-primary width-100" v-on:click="save_capture()">{{ translation.save_report }}</button>
                     </div>
             </div>
         </div>
@@ -100,6 +100,7 @@ export default {
     data() {
         return {
             results: true,
+            translation: {}
         }
     },
     props: {
@@ -116,7 +117,7 @@ export default {
             router.push({ name: 'generate-ap' })
         },
         nb_translate: function(x) {
-            var nbs = ['zero','one','two','three','four', 'five','six','seven','eight','nine', 'ten', 'eleven']
+            var nbs = this.translation["numbers"]
             try {
                 return nbs[x];
             } catch (error)
@@ -142,6 +143,12 @@ export default {
                 return false;
             }
         }
+    },
+    created: function() {
+        this.translation = window.translation[this.$route.name]
+        this.translation["high_msg"] = this.translation["high_msg"].replace("{nb}", this.nb_translate(this.alerts.high.length))
+        this.translation["moderate_msg"] = this.translation["moderate_msg"].replace("{nb}", this.nb_translate(this.alerts.moderate.length))
+        this.translation["low_msg"] = this.translation["low_msg"].replace("{nb}", this.nb_translate(this.alerts.low.length))
     }
 }
 </script>

app/frontend/src/views/save-capture.vue

@@ -6,14 +6,14 @@
             <div class="icon-usb"></div>
             <div class="icon-usb-plug"></div> 
         </div>
-        <p class="legend" v-if="!saved && !usb"><br />Please connect a USB key to save your capture.</p>
+        <p class="legend" v-if="!saved && !usb"><br />{{ translation.please_connect }}</p>
-        <p class="legend" v-if="!saved && usb"><br />We are saving your capture.</p>
+        <p class="legend" v-if="!saved && usb"><br />{{ translation.we_are_saving }}</p>
-        <p class="legend" v-if="saved"><br />You can tap the USB key to start a new capture.</p>
+        <p class="legend" v-if="saved"><br />{{ translation.tap_msg }}</p>
     </div>
     <div class="center" v-else-if="!save_usb && init">
         <div>
-            <p class="legend">The capture download is going to start...<br /><br /><br /></p>
+            <p class="legend">{{ translation.catpure_download }}<br /><br /><br /></p>
-            <button class="btn btn-primary" v-on:click="new_capture()">Start another capture</button>
+            <button class="btn btn-primary" v-on:click="new_capture()">{{ translation.start_capture_btn }}</button>
             <iframe :src="download_url" class="frame-download"></iframe>
         </div>
     </div>
@@ -144,7 +144,8 @@ export default {
             usb: false,
             saved: false,
             save_usb: false,
-            init: false
+            init: false,
+            translation: {}
         }
     },
     props: {
@@ -194,6 +195,7 @@ export default {
         }
     },
     created: function() {
+        this.translation = window.translation[this.$route.name]
         this.load_config()
     }
 }

app/frontend/src/views/wifi-select.vue

@@ -2,41 +2,41 @@
     <div :class="[ keyboard == false ? 'center' : '' ]">
         <div v-if="keyboard == false">
             <div v-if="have_internet">
-                <p>You seem to be already connected to a network.<br />Do you want to use the current connection?</p>
+                <p v-html="translation.already_connected_question"></p>
                 <div class="empty-action">
-                    <button class="btn" @click="have_internet = false">No, use another</button> <button class="btn" :class="[ connecting ? 'loading' : '', success ? 'btn-success' : 'btn-primary', ]" @click="$router.push({ name: 'generate-ap' })">Yes, use it.</button>
+                    <button class="btn" @click="have_internet = false">{{ translation.no_btn }}</button> <button class="btn" :class="[ connecting ? 'loading' : '', success ? 'btn-success' : 'btn-primary', ]" @click="$router.push({ name: 'generate-ap' })">{{ translation.yes_btn }}</button>
                 </div>
             </div>
             <div v-else>
                 <div v-if="enter_creds" class="wifi-login">
                     <div class="form-group">
                         <select class="form-select" id="ssid-select" v-model="ssid">
-                            <option value="" selected>Wifi name</option>
+                            <option value="" selected>{{ translation.wifi_name }}</option>
                             <option v-for="ssid in ssids" v-bind:key="ssid.ssid">
                                 {{ ssid.ssid }}
                             </option>
                         </select>
                     </div>
                     <div class="form-group">
-                        <input class="form-input" type="password" id="password" v-model="password" placeholder="Wifi password" v-on:click="keyboard = (virtual_keyboard)? true : false">
+                        <input class="form-input" type="password" id="password" v-model="password" :placeholder="translation.wifi_password" v-on:click="keyboard = (virtual_keyboard)? true : false">
                     </div>
                     <div class="form-group">
                         <button class="btn width-100" :class="[ connecting ? 'loading' : '', success ? 'btn-success' : 'btn-primary', ]" v-on:click="wifi_setup()">{{ btnval }}</button>
                     </div>
                     <div class="form-group">
-                        <button class="btn width-100" :class="[ refreshing ? 'loading' : '' ]" v-on:click="refresh_wifi_list()">Refresh networks list</button>
+                        <button class="btn width-100" :class="[ refreshing ? 'loading' : '' ]" v-on:click="refresh_wifi_list()">{{ translation.refresh_btn }}</button>
                     </div>
                 </div>
                 <div v-else>
-                    <p><strong>You seem to not be connected to Internet.</strong><br />Please configure the Wi-Fi connection.</p>
+                    <p><strong>{{ translation.not_connected }}</strong><br />{{ translation.please_config }}</p>
                     <div class="empty-action">
-                        <button class="btn btn-primary" @click="enter_creds = true">Ok, let's do that.</button>
+                        <button class="btn btn-primary" @click="enter_creds = true">{{ translation.lets_do_btn }}</button>
                     </div>
                 </div>
             </div>
         </div>
         <div v-else>
-            <input :value="input" class="keyboardinput" @input="onInputChange" placeholder="Tap on the virtual keyboard to start">
+            <input :value="input" class="keyboardinput" @input="onInputChange" :placeholder="translation.tap_keyboard">
             <SimpleKeyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input" />
         </div>
     </div>
@@ -63,7 +63,7 @@ export default {
             connecting: false,
             error: false,
             success: false,
-            btnval: "Connect to it.",
+            btnval: "",
             ssid: "",
             selected_ssid: false,
             password: "",
@@ -73,7 +73,8 @@ export default {
             have_internet: false,
             enter_creds: false,
             virtual_keyboard: false,
-            refreshing: false
+            refreshing: false,
+            translation: {}
         }
     },
     props: {
@@ -88,10 +89,10 @@ export default {
                     if (response.data.status) {
                         this.success = true
                         this.connecting = false
-                        this.btnval = "Wifi connected!"
+                        this.btnval = this.translation.wifi_connected
                         setTimeout(() => router.push('generate-ap'), 1000);
                     } else {
-                        this.btnval = "Wifi not connected. Please retry."
+                        this.btnval = this.translation["wifi_not_connected"]
                         this.connecting = false
                     }
                 })
@@ -115,7 +116,7 @@ export default {
                     });
             }
         },
-        load_config: function() {
+        get_config: function() {
             axios.get(`/api/misc/config`, { timeout: 60000 })
                 .then(response => {
                     this.virtual_keyboard = response.data.virtual_keyboard
@@ -146,12 +147,14 @@ export default {
                      this.append_ssids(response.data.networks)
                  }).catch(error => {
                      this.refreshing = false
-                    console.log(error)
+                     console.log(error)
             });
         }
     },
     created: function() {
-        this.load_config()
+        this.translation = window.translation[this.$route.name]
+        this.btnval = this.translation.connect_to_it
+        this.get_config()
 
         this.have_internet = (this.internet) ? true : false
         this.keyboard = false

config.yaml

@@ -48,6 +48,7 @@ frontend:
   remote_access: true
   sparklines: true
   virtual_keyboard: true
+  user_lang: en
 
 # NETWORK -
 # Some elements related to the network configuration, such as

server/frontend/app/assets/lang/en.json

@@ -0,0 +1,81 @@
+{
+    "home": {
+        "welcome_msg": "Welcome to TinyCheck.",
+        "help_msg": "We are going to help you to check your device.",
+        "start_btn": "Let's start!"
+    },
+    "analysis": {
+        "question": "Do you want to analyze the captured communications?",
+        "no_btn": "No, just save them",
+        "yes_btn": "Yes, let's do it",
+        "please_wait_msg": "Please wait during the analysis...",
+        "some_time_msg": "Yes, it can take some time..."
+    },
+    "capture": {
+        "intercept_coms_msg": "Intercepting the communications of ",
+        "stop_btn": "Stop the capture"
+    },
+    "generate-ap": {
+        "network_name": "Network name",
+        "network_password": "Network password",
+        "tap_msg": "Tap the white frame to generate a new network.",
+        "generate_ap_msg": "We generate an ephemeral network for you.",
+        "error_msg1": "Unfortunately, we got some issues <br />during the AP creation.",
+        "error_msg2": "Please verify that you've two WiFi interfaces on your device<br /> and try again by restarting it.",
+        "restart_btn": "Restart the device"
+    },
+    "report": {
+        "show_full_report": "Show the full report",
+        "start_new_capture": "Start a new capture",
+        "save_capture": "Save the capture",
+        "numbers": [
+            "zero",
+            "one",
+            "two",
+            "three",
+            "four",
+            "five",
+            "six",
+            "seven",
+            "eight",
+            "nine",
+            "ten",
+            "eleven"
+        ],
+        "stalkerware_msg": "Your device is compromised by<br />a Stalkerware, please check the report.",
+        "location_msg": "An application is sharing your<br /> current geolocation with a third party.",
+        "fine_msg": "Everything looks fine, zero alerts.",
+        "high_msg": "You have {nb} high alert,<br />your device seems to be compromised.",
+        "moderate_msg": "You have {nb} moderate alerts,<br />your device might be compromised.",
+        "low_msg": "You have only {nb} low alerts,<br /> don't hesitate to check them.",
+        "save_report": "Save the report",
+        "report_of": "Report of",
+        "ip_address": "IP address",
+        "mac_address": "MAC address",
+        "high": "high",
+        "moderate": "moderate",
+        "low": "low"
+    },
+    "wifi-select": {
+        "already_connected_question": "You seem to be already connected to a network.<br />Do you want to use the current connection?",
+        "no_btn": "No, use another",
+        "yes_btn": "Yes, use it.",
+        "wifi_name": "Wi-Fi name",
+        "refresh_btn": "Refresh networks list",
+        "not_connected": "You seem to not be connected to Internet.",
+        "please_config": "Please configure the Wi-Fi connection.",
+        "lets_do_btn": "Ok, let's do that.",
+        "wifi_connected": "Wi-Fi connected",
+        "wifi_not_connected": "Wi-Fi not connected. Please retry.",
+        "tap_keyboard": "Tap on the virtual keyboard to start",
+        "wifi_password": "Wi-Fi password",
+        "connect_to_it": "Connect to it"
+    },
+    "save-capture": {
+        "please_connect": "Please connect a USB key to save your capture.",
+        "we_are_saving": "We are saving your capture.",
+        "tap_msg": "You can tap the USB key to start a new capture.",
+        "capture_download": "The capture download is going to start...",
+        "start_capture_btn": "Start another capture"
+    }
+}

server/frontend/app/assets/lang/fr.json

@@ -0,0 +1,81 @@
+{
+    "home": {
+        "welcome_msg": "Bienvenue sur TinyCheck.",
+        "help_msg": "Nous allons vous accompagner pour analyser votre appareil.",
+        "start_btn": "Allons-y !"
+    },
+    "analysis": {
+        "question": "Voulez-vous analyser les communications capturées ?",
+        "no_btn": "Non, enregistrez-les directement.",
+        "yes_btn": "Oui, allons-y !",
+        "please_wait_msg": "Merci d'attendre pendant l'analyse...",
+        "some_time_msg": "Oui, cela peut prendre du temps..."
+    },
+    "capture": {
+        "intercept_coms_msg": "Interception des communications de ",
+        "stop_btn": "Arrêter la capture"
+    },
+    "generate-ap": {
+        "network_name": "Nom du réseau",
+        "network_password": "Mot de passe du réseau",
+        "tap_msg": "Appuyez sur le cadre blanc pour générer un nouveau réseau.",
+        "generate_ap_msg": "Nous générons pour vous un réseau Wi-Fi éphémère.",
+        "error_msg1": "Malheureusement, nous rencontrons des problèmes <br />lors de la création du point d'accès.",
+        "error_msg2": "Veuillez vérifier que vous disposez de <br /> deux interfaces WiFi sur votre appareil.",
+        "restart_btn": "Restart the device"
+    },
+    "report": {
+        "show_full_report": "Afficher le rapport complet",
+        "start_new_capture": "Lancer une nouvelle capture",
+        "save_capture": "Sauvegarder la capture",
+        "numbers": [
+            "zéro",
+            "une",
+            "deux",
+            "trois",
+            "quatre",
+            "cinq",
+            "six",
+            "sept",
+            "huit",
+            "neuf",
+            "dix",
+            "onze"
+        ],
+        "stalkerware_msg": "Votre smartphone est compromis<br /> par un Stalkerware, merci de regarder le rapport.",
+        "location_msg": "Une application dévoile votre<br /> géo-localisation actelle.",
+        "fine_msg": "Tout semble OK, vous avez aucue alerte.",
+        "high_msg": "Vous avez {nb} alerte(s) élevée(s),<br />votre appareil semble être compromis.",
+        "moderate_msg": "Vous avez {nb} alerte(s) moyenne(s),<br />votre appareil peut être compromis.",
+        "low_msg": "Vous avez uniquement {nb} alerte(s) basse(s)<br /> n'hésitez pas à les lire.",
+        "save_report": "Sauvegarder le rapport",
+        "report_of": "Rapport de",
+        "ip_address": "Adresse IP ",
+        "mac_address": "Adresse MAC",
+        "high": "elevee",
+        "moderate": "moyenne",
+        "low": "base"
+    },
+    "wifi-select": {
+        "already_connected_question": "Vous semblez être connecté à un réseau.<br />Voulez-vous utiliser cette connexion ?",
+        "no_btn": "Non, une autre",
+        "yes_btn": "Oui, utilisez celle-là",
+        "wifi_name": "Nom du réseau",
+        "refresh_btn": "Rafraichir la liste des réseaux",
+        "not_connected": "Vous semblez ne pas être connecté à Internet.",
+        "please_config": "Configurez la connexion Wi-Fi.",
+        "lets_do_btn": "Oui, allons-y.",
+        "wifi_connected": "Wi-Fi connecté",
+        "wifi_not_connected": "Wi-Fi non connecté. Ressayez.",
+        "tap_keyboard": "Appuez sur cet espace pour écrire",
+        "wifi_password": "Mot de passe",
+        "connect_to_it": "Se connecter"
+    },
+    "save-capture": {
+        "please_connect": "Connectez une clé USB pour enregistrer votre capture.",
+        "we_are_saving": "Nous enregistrons votre capture.",
+        "tap_msg": "Vous pouvez appuyer sur l'animation pour lancer une nouvelle capture.",
+        "capture_download": "Le téléchargement de la capture va se lancer...",
+        "start_capture_btn": "Lancer une nouvelle capture"
+    }
+}

server/frontend/app/blueprints/misc.py

@@ -4,6 +4,7 @@
 import subprocess as sp
 from flask import Blueprint, jsonify
 from app.utils import read_config
+import re
 
 misc_bp = Blueprint("misc", __name__)
 
@@ -59,3 +60,18 @@ def get_config():
         "reboot_option": read_config(("frontend", "reboot_option")),
         "iface_out": read_config(("network", "out"))
     })
+
+
+@app.route("/get-lang", methods=["GET"])
+def get_lang():
+    """
+        Get the user lang defined in the config.yaml
+        and retrieve the interface translation.
+    """
+    lang = read_config(("frontend", "user_lang"))
+    if re.match("^[a-z]{2,3}$", lang):
+        with open("app/assets/lang/{}.json".format(lang), "r") as f:
+            return(f.read())
+    else:
+        with open("app/assets/lang/en.json", "r") as f:
+            return(f.read())