c_meyer/KasperskyLab-TinyCheck
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Interface translation test

Browse Source
This commit is contained in:
Félix Aime
2021-02-04 11:11:43 +01:00
parent a6c88b7cea
commit 30d08c544b
14 changed files with 378 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/frontend/src/App.vue
View File

@ -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>

6
app/frontend/src/router/index.js
View File

@ -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

14
app/frontend/src/views/analysis.vue
View File

@ -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 fade-in" v-if="long_waiting">Yes, it can take some time...</p>
<p class="legend" v-if="!long_waiting">{{ translation.please_wait_msg }}</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>

15
app/frontend/src/views/capture.vue
View File

@ -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>
<p>Intercepting the communications of {{device_name}}.</p>
<h3 class="timer">{{ timer_hours }}:{{ timer_minutes }}:{{ timer_seconds }}</h3>
<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();

22
app/frontend/src/views/generate-ap.vue
View File

@ -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();
}
}

17
app/frontend/src/views/home.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="center">
<h3 class="lobster">Welcome to TinyCheck.</h3>
<p>We are going to help you to check your device.</p>
<button class="btn btn-primary" v-on:click="next()">Let's start!</button>
<h3 class="lobster">{{ translation.welcome_msg }}</h3>
<p>{{ translation.help_msg }}</p>
<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>

59
app/frontend/src/views/report.vue
View File

@ -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>
<button class="btn btn-report-low-light" v-on:click="new_capture()">Start a new capture</button>
<button class="btn btn-report-high" @click="show_report=true;results=false;">Show the full report</button>
<h1 class="warning-title" v-html="translation.stalkerware_msg"></h1>
<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;">{{ 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>
<button class="btn btn-report-low-light" v-on:click="new_capture()">Start a new capture</button>
<button class="btn btn-report-high" @click="show_report=true;results=false;">Show the full report</button>
<h1 class="warning-title" v-html="translation.high_msg"></h1>
<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;">{{ 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>
<button class="btn btn-report-low-light" v-on:click="new_capture()">Start a new capture</button>
<button class="btn btn-report-moderate" @click="show_report=true;results=false;">Show the full report</button>
<h1 class="warning-title" v-html="translation.location_msg"></h1>
<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;">{{ 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>
<button class="btn btn-report-low-light" v-on:click="new_capture()">Start a new capture</button>
<button class="btn btn-report-moderate" @click="show_report=true;results=false;">Show the full report</button>
<h1 class="warning-title" v-html="translation.moderate_msg"></h1>
<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;">{{ 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>
<button class="btn btn-report-low-light" v-on:click="new_capture()">Start a new capture</button>
<button class="btn btn-report-low" @click="show_report=true;results=false;">Show the full report</button>
<h1 class="warning-title" v-html="translation.low_msg"></h1>
<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;">{{ 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>
<button class="btn btn-report-low-light" v-on:click="save_capture()">Save the capture</button>
<button class="btn btn-report-low" v-on:click="new_capture()">Start a new capture</button>
<h1 class="warning-title" v-html="translation.fine_msg">
<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()">{{ 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>
IP Address: {{device.ip_address}}<br />Mac Address: {{device.mac_address}}
<h3 style="margin: 0;">{{ translation.report_of }} {{ device.name }}</h3>
{{ 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>

14
app/frontend/src/views/save-capture.vue
View File

@ -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 />We are saving your capture.</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 && !usb"><br />{{ translation.please_connect }}</p>
<p class="legend" v-if="!saved && usb"><br />{{ translation.we_are_saving }}</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>
<button class="btn btn-primary" v-on:click="new_capture()">Start another capture</button>
<p class="legend">{{ translation.catpure_download }}<br /><br /><br /></p>
<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()
}
}

33
app/frontend/src/views/wifi-select.vue
View File

@ -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