Adding translation by using i18n
This commit is contained in:
Félix Aime
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="center">
|
||||
<div v-if="question">
|
||||
<p>{{ translation.question }}</p>
|
||||
<p>{{ $t("analysis.question") }}</p>
|
||||
<div class="empty-action">
|
||||
<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>
|
||||
<button class="btn" v-on:click="save_capture()">{{ $t("analysis.no_btn") }}</button> <button class="btn btn-primary" v-on:click="start_analysis()">{{ $t("analysis.yes_btn") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="running">
|
||||
<img src="@/assets/loading.svg"/>
|
||||
<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>
|
||||
<p class="legend" v-if="!long_waiting">{{ $t("analysis.please_wait_msg") }}</p>
|
||||
<p class="legend fade-in" v-if="long_waiting">{{ $t("analysis.some_time_msg") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
setTimeout(function () { this.long_waiting = true }.bind(this), 15000);
|
||||
axios.get(`/api/analysis/start/${this.capture_token}`, { timeout: 60000 })
|
||||
.then(response => {
|
||||
if(response.data.message == "Analysis started")
|
||||
if(response.data.message == 'Analysis started')
|
||||
this.check_alerts = setInterval(() => { this.get_alerts(); }, 500);
|
||||
})
|
||||
.catch(error => {
|
||||
@ -49,13 +49,14 @@ export default {
|
||||
get_alerts: function() {
|
||||
axios.get(`/api/analysis/report/${this.capture_token}`, { timeout: 60000 })
|
||||
.then(response => {
|
||||
if(response.data.message != "No report yet"){
|
||||
if(response.data.message != 'No report yet'){
|
||||
clearInterval(this.check_alerts);
|
||||
this.long_waiting = false;
|
||||
this.running = false;
|
||||
router.replace({ name: 'report', params: { alerts : response.data.alerts,
|
||||
device : response.data.device,
|
||||
capture_token : this.capture_token } });
|
||||
router.replace({ name: 'report',
|
||||
params: { alerts : response.data.alerts,
|
||||
device : response.data.device,
|
||||
capture_token : this.capture_token } });
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
@ -64,11 +65,9 @@ export default {
|
||||
},
|
||||
save_capture: function() {
|
||||
var capture_token = this.capture_token
|
||||
router.replace({ name: 'save-capture', params: { capture_token: capture_token } });
|
||||
router.replace({ name: 'save-capture',
|
||||
params: { capture_token: capture_token } });
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.translation = window.translation[this.$route.name]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -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>{{ translation.intercept_coms_msg }} {{ device_name }}.</p>
|
||||
<h3 class="timer">{{timer_hours}}:{{timer_minutes}}:{{timer_seconds}}</h3>
|
||||
<p>{{$t("capture.intercept_coms_msg")}} {{device_name}}.</p>
|
||||
<div class="empty-action">
|
||||
<button class="btn" :class="[ loading ? 'loading' : 'btn-primary', ]" v-on:click="stop_capture()">{{ translation.stop_btn }}</button>
|
||||
<button class="btn" :class="[ loading ? 'loading' : 'btn-primary', ]" v-on:click="stop_capture()">{{$t("capture.stop_btn")}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,16 +43,16 @@ export default {
|
||||
},
|
||||
stop_capture: function() {
|
||||
this.loading = true
|
||||
axios.get(`/api/network/ap/stop`, { timeout: 30000 })
|
||||
axios.get(`/api/capture/stop`, { timeout: 30000 })
|
||||
axios.get('/api/network/ap/stop', { timeout: 30000 })
|
||||
axios.get('/api/capture/stop', { timeout: 30000 })
|
||||
.then(response => (this.handle_finish(response.data)))
|
||||
},
|
||||
get_stats: function() {
|
||||
axios.get(`/api/capture/stats`, { timeout: 30000 })
|
||||
axios.get('/api/capture/stats', { timeout: 30000 })
|
||||
.then(response => (this.handle_stats(response.data)))
|
||||
},
|
||||
handle_stats: function(data) {
|
||||
if (data.packets.length) sparkline(document.querySelector("#sparkline"), data.packets);
|
||||
if (data.packets.length) sparkline(document.querySelector('#sparkline'), data.packets);
|
||||
},
|
||||
handle_finish: function(data) {
|
||||
clearInterval(this.chrono_interval);
|
||||
@ -66,32 +66,30 @@ export default {
|
||||
chrono: function() {
|
||||
var time = Date.now() - this.capture_start
|
||||
this.timer_hours = Math.floor(time / (60 * 60 * 1000));
|
||||
this.timer_hours = (this.timer_hours < 10) ? "0" + this.timer_hours : this.timer_hours
|
||||
this.timer_hours = (this.timer_hours < 10) ? '0' + this.timer_hours : this.timer_hours
|
||||
time = time % (60 * 60 * 1000);
|
||||
this.timer_minutes = Math.floor(time / (60 * 1000));
|
||||
this.timer_minutes = (this.timer_minutes < 10) ? "0" + this.timer_minutes : this.timer_minutes
|
||||
this.timer_minutes = (this.timer_minutes < 10) ? '0' + this.timer_minutes : this.timer_minutes
|
||||
time = time % (60 * 1000);
|
||||
this.timer_seconds = Math.floor(time / 1000);
|
||||
this.timer_seconds = (this.timer_seconds < 10) ? "0" + this.timer_seconds : this.timer_seconds
|
||||
this.timer_seconds = (this.timer_seconds < 10) ? '0' + this.timer_seconds : this.timer_seconds
|
||||
},
|
||||
setup_sparklines: function() {
|
||||
axios.get(`/api/misc/config`, { timeout: 60000 })
|
||||
axios.get('/api/misc/config', { timeout: 60000 })
|
||||
.then(response => {
|
||||
if(response.data.sparklines){
|
||||
this.sparklines = true
|
||||
this.sparkwidth = window.screen.width + "px";
|
||||
this.sparkheight = Math.trunc(window.screen.height / 5) + "px";
|
||||
this.sparkwidth = window.screen.width + 'px';
|
||||
this.sparkheight = Math.trunc(window.screen.height / 5) + 'px';
|
||||
this.stats_interval = setInterval(() => { this.get_stats(); }, 500);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
created: function() {
|
||||
this.translation = window.translation[this.$route.name]
|
||||
|
||||
// Get the config for the sparklines.
|
||||
this.setup_sparklines()
|
||||
|
||||
|
||||
@ -9,29 +9,30 @@
|
||||
</div>
|
||||
<div class="divider-vert white-bg" data-content="OR"></div>
|
||||
<div class="column col-5"><br />
|
||||
<span class="light-grey">{{ translation.network_name }}</span><br />
|
||||
<span class="light-grey">{{ $t("generate-ap.network_name") }} </span><br />
|
||||
<h4>{{ ssid_name }}</h4>
|
||||
<span class="light-grey">{{ translation.network_password }}</span><br />
|
||||
<span class="light-grey">{{ $t("generate-ap.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">{{ translation.tap_msg }}</span>
|
||||
<span class="legend">{{ $t("generate-ap.tap_msg") }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<img src="@/assets/loading.svg"/>
|
||||
<p class="legend">{{ translation.generate_ap_msg }}</p>
|
||||
<p class="legend">{{ $t("generate-ap.generate_ap_msg") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>
|
||||
<strong v-html="translation.error_msg1"></strong>
|
||||
<strong v-html="$t('generate-ap.error_msg1')"></strong>
|
||||
<br /><br />
|
||||
<span v-html="translation.error_msg2"></span><br /><br />
|
||||
<span v-html="$t('generate-ap.error_msg2')"></span>
|
||||
<br /><br />
|
||||
</p>
|
||||
<button v-if="reboot_option" class="btn" v-on:click="reboot()">{{ translation.restart_btn }}</button>
|
||||
<button v-if="window.config.reboot_option" class="btn" v-on:click="reboot()">{{ $t("generate-ap.restart_btn") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,7 +63,7 @@ export default {
|
||||
generate_ap: function() {
|
||||
clearInterval(this.interval);
|
||||
this.ssid_name = false
|
||||
axios.get(`/api/network/ap/start`, { timeout: 30000 })
|
||||
axios.get('/api/network/ap/start', { timeout: 30000 })
|
||||
.then(response => (this.show_ap(response.data)))
|
||||
},
|
||||
show_ap: function(data) {
|
||||
@ -81,11 +82,11 @@ export default {
|
||||
}
|
||||
},
|
||||
start_capture: function() {
|
||||
axios.get(`/api/capture/start`, { timeout: 30000 })
|
||||
axios.get('/api/capture/start', { timeout: 30000 })
|
||||
.then(response => (this.get_capture_token(response.data)))
|
||||
},
|
||||
reboot: function() {
|
||||
axios.get(`/api/misc/reboot`, { timeout: 30000 })
|
||||
axios.get('/api/misc/reboot', { timeout: 30000 })
|
||||
.then(response => { console.log(response)})
|
||||
},
|
||||
get_capture_token: function(data) {
|
||||
@ -116,20 +117,9 @@ export default {
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
get_config: function() {
|
||||
axios.get(`/api/misc/config`, { timeout: 60000 })
|
||||
.then(response => {
|
||||
this.reboot_option = response.data.reboot_option
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
});
|
||||
},
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.translation = window.translation[this.$route.name]
|
||||
this.get_config();
|
||||
this.generate_ap();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="center">
|
||||
<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>
|
||||
<h3 class="lobster">{{ $t("home.welcome_msg") }}</h3>
|
||||
<p>{{ $t("home.help_msg") }}</p>
|
||||
<button class="btn btn-primary" v-on:click="next()">{{ $t("home.start_btn") }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -11,7 +11,7 @@ import router from '../router'
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
props: { saved_ssid: String, iface_out: String, list_ssids: Array, internet: Boolean },
|
||||
props: { saved_ssid: String, list_ssids: Array, internet: Boolean },
|
||||
data() {
|
||||
return {
|
||||
translation: {},
|
||||
@ -22,18 +22,15 @@ export default {
|
||||
var saved_ssid = this.saved_ssid
|
||||
var list_ssids = this.list_ssids
|
||||
var internet = this.internet
|
||||
if (this.iface_out.charAt(0) == "e"){
|
||||
if (window.config.iface_out.charAt(0) == "e"){
|
||||
router.push({ name: 'generate-ap' });
|
||||
} else {
|
||||
router.push({ name: 'wifi-select',
|
||||
params: { saved_ssid: saved_ssid,
|
||||
list_ssids: list_ssids,
|
||||
internet:internet } });
|
||||
internet: internet } });
|
||||
}
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.translation = window.translation[this.$route.name]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -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" 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>
|
||||
<h1 class="warning-title" v-html="$t('report.stalkerware_msg')"></h1>
|
||||
<button class="btn btn-report-low-light" v-on:click="new_capture()">{{ $t("report.start_new_capture") }}</button>
|
||||
<button class="btn btn-report-high" @click="show_report=true;results=false;">{{ $t("report.show_full_report") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="alerts.high.length >= 1" class="high-wrapper">
|
||||
<div class="center">
|
||||
<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>
|
||||
<h1 class="warning-title" v-html="$t('report.high_msg', { nb: $i18n.messages[$i18n.locale].report.numbers[alerts.high.length] })"></h1>
|
||||
<button class="btn btn-report-low-light" v-on:click="new_capture()">{{ $t("report.start_new_capture") }}</button>
|
||||
<button class="btn btn-report-high" @click="show_report=true;results=false;">{{ $t("report.show_full_report") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="grep_keyword('TRACKER', 'moderate')" class="med-wrapper">
|
||||
<div class="center">
|
||||
<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>
|
||||
<h1 class="warning-title" v-html="$t('report.location_msg')"></h1>
|
||||
<button class="btn btn-report-low-light" v-on:click="new_capture()">{{ $t("report.start_new_capture") }}</button>
|
||||
<button class="btn btn-report-moderate" @click="show_report=true;results=false;">{{ $t("report.show_full_report") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="alerts.moderate.length >= 1" class="med-wrapper">
|
||||
<div class="center">
|
||||
<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>
|
||||
<h1 class="warning-title" v-html="$t('report.moderate_msg', { nb: $i18n.messages[$i18n.locale].report.numbers[alerts.moderate.length] })"></h1>
|
||||
<button class="btn btn-report-low-light" v-on:click="new_capture()">{{ $t("report.start_new_capture") }}</button>
|
||||
<button class="btn btn-report-moderate" @click="show_report=true;results=false;">{{ $t("report.show_full_report") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="alerts.low.length >= 1" class="low-wrapper">
|
||||
<div class="center">
|
||||
<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>
|
||||
<h1 class="warning-title" v-html="$t('report.low_msg', { nb: $i18n.messages[$i18n.locale].report.numbers[alerts.moderate.low] })"></h1>
|
||||
<button class="btn btn-report-low-light" v-on:click="new_capture()">{{ $t("report.start_new_capture") }}</button>
|
||||
<button class="btn btn-report-low" @click="show_report=true;results=false;">{{ $t("report.show_full_report") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="none-wrapper">
|
||||
<div class="center">
|
||||
<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>
|
||||
<h1 class="warning-title">{{ $t("report.fine_msg") }}</h1>
|
||||
<button class="btn btn-report-low-light" v-on:click="save_capture()">{{ $t("report.save_capture") }}</button>
|
||||
<button class="btn btn-report-low" v-on:click="new_capture()">{{ $t("report.start_new_capture") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="show_report" class="report-wrapper">
|
||||
<div class="device-ctx">
|
||||
<h3 style="margin: 0;">{{ translation.report_of }} {{ device.name }}</h3>
|
||||
{{ translation.ip_address }} {{device.ip_address}}<br />{{ translation.mac_address }} {{device.mac_address}}
|
||||
<h3 style="margin: 0;">{{ $t("report.report_of") }} {{device.name}}</h3>
|
||||
{{ $t("report.ip_address") }} {{device.ip_address}}<br />{{ $t("report.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">{{ translation.high }}</span><span class="alert-id">{{ alert.id }}</span>
|
||||
<span class="high-label">{{ $t("report.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">{{ translation.moderate }}</span><span class="alert-id">{{ alert.id }}</span>
|
||||
<span class="moderate-label">{{ $t("report.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">{{ translation.low }}</span><span class="alert-id">{{ alert.id }}</span>
|
||||
<span class="low-label">{{ $t("report.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')">{{ translation.start_new_capture }}</button>
|
||||
<button class="btn width-100" @click="$router.push('generate-ap')">{{ $t("report.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()">{{ translation.save_report }}</button>
|
||||
<button class="btn btn btn-primary width-100" v-on:click="save_capture()">{{ $t("report.save_report") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -116,15 +116,6 @@ export default {
|
||||
new_capture: function() {
|
||||
router.push({ name: 'generate-ap' })
|
||||
},
|
||||
nb_translate: function(x) {
|
||||
var nbs = this.translation["numbers"]
|
||||
try {
|
||||
return nbs[x];
|
||||
} catch (error)
|
||||
{
|
||||
return x;
|
||||
}
|
||||
},
|
||||
grep_keyword: function(kw, level){
|
||||
try {
|
||||
if(this.alerts[level].length){
|
||||
@ -143,12 +134,6 @@ 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>
|
||||
|
||||
@ -6,14 +6,14 @@
|
||||
<div class="icon-usb"></div>
|
||||
<div class="icon-usb-plug"></div>
|
||||
</div>
|
||||
<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>
|
||||
<p class="legend" v-if="!saved && !usb"><br />{{ $t("save-capture.please_connect") }}</p>
|
||||
<p class="legend" v-if="!saved && usb"><br />{{ $t("save-capture.we_are_saving") }}</p>
|
||||
<p class="legend" v-if="saved"><br />{{ $t("save-capture.tap_msg") }}</p>
|
||||
</div>
|
||||
<div class="center" v-else-if="!save_usb && init">
|
||||
<div>
|
||||
<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>
|
||||
<p class="legend">{{ $t("save-capture.capture_download") }}<br /><br /><br /></p>
|
||||
<button class="btn btn-primary" v-on:click="new_capture()">{{ $t("save-capture.start_capture_btn") }}</button>
|
||||
<iframe :src="download_url" class="frame-download"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
@ -175,28 +175,18 @@ export default {
|
||||
new_capture: function() {
|
||||
clearTimeout(this.timeout);
|
||||
router.push({ name: 'generate-ap' })
|
||||
},
|
||||
load_config: function() {
|
||||
axios.get(`/api/misc/config`, { timeout: 60000 })
|
||||
.then(response => {
|
||||
if(response.data.download_links){
|
||||
this.init = true
|
||||
this.save_usb = false
|
||||
this.download_url = `/api/save/save-capture/${this.capture_token}/url`
|
||||
} else {
|
||||
this.init = true
|
||||
this.save_usb = true
|
||||
this.interval = setInterval(() => { this.check_usb() }, 500);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
});
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.translation = window.translation[this.$route.name]
|
||||
this.load_config()
|
||||
if(window.config.download_links){
|
||||
this.init = true
|
||||
this.save_usb = false
|
||||
this.download_url = `/api/save/save-capture/${this.capture_token}/url`
|
||||
} else {
|
||||
this.init = true
|
||||
this.save_usb = true
|
||||
this.interval = setInterval(() => { this.check_usb() }, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -15,58 +15,34 @@
|
||||
data() {
|
||||
return {
|
||||
list_ssids: [],
|
||||
internet: false,
|
||||
iface_out:""
|
||||
internet: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// Check if the device is connected to internet.
|
||||
internet_check: function() {
|
||||
axios.get(`/api/network/status`, { timeout: 10000 })
|
||||
axios.get('/api/network/status', { timeout: 10000 })
|
||||
.then(response => {
|
||||
if (response.data.internet){
|
||||
this.internet = true
|
||||
}
|
||||
this.load_config()
|
||||
if (response.data.internet) this.internet = true
|
||||
if (window.config.iface_out.charAt(0) == 'e') {
|
||||
setTimeout(function () { this.goto_home(); }.bind(this), 1000);
|
||||
} else {
|
||||
this.get_wifi_networks();
|
||||
}
|
||||
})
|
||||
.catch(err => (console.log(err)))
|
||||
},
|
||||
// Get the WiFi networks around the box.
|
||||
get_wifi_networks: function() {
|
||||
axios.get(`/api/network/wifi/list`, { timeout: 10000 })
|
||||
axios.get('/api/network/wifi/list', { timeout: 10000 })
|
||||
.then(response => {
|
||||
this.list_ssids = response.data.networks
|
||||
this.goto_home();
|
||||
})
|
||||
.catch(err => (console.log(err)))
|
||||
},
|
||||
// Forward the view to home, with some props
|
||||
// such as (SSIDs, internet & interface)
|
||||
goto_home: function() {
|
||||
var list_ssids = this.list_ssids
|
||||
var internet = this.internet
|
||||
var iface_out = this.iface_out
|
||||
router.replace({ name: 'home', params: { list_ssids: list_ssids, internet: internet, iface_out : iface_out } });
|
||||
},
|
||||
// Get the network_out from the config
|
||||
// to determine the next steps.
|
||||
load_config: function() {
|
||||
axios.get(`/api/misc/config`, { timeout: 60000 })
|
||||
.then(response => {
|
||||
if(response.data.iface_out){
|
||||
this.iface_out = response.data.iface_out
|
||||
// If ethernet, just goto the homepage.
|
||||
// Else, get wifi networks and then go to home.
|
||||
if(this.iface_out.charAt(0) == "e"){
|
||||
setTimeout(function () { this.goto_home(); }.bind(this), 1000);
|
||||
} else {
|
||||
this.get_wifi_networks();
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
});
|
||||
router.replace({ name: 'home', params: { list_ssids: list_ssids, internet: internet } });
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
|
||||
@ -2,41 +2,42 @@
|
||||
<div :class="[ keyboard == false ? 'center' : '' ]">
|
||||
<div v-if="keyboard == false">
|
||||
<div v-if="have_internet">
|
||||
<p v-html="translation.already_connected_question"></p>
|
||||
<p v-html="$t('wifi-select.already_connected_question')"></p>
|
||||
<div class="empty-action">
|
||||
<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>
|
||||
<button class="btn" @click="have_internet = false">{{ $t("wifi-select.no_btn") }}</button>
|
||||
<button class="btn" :class="[ connecting ? 'loading' : '', success ? 'btn-success' : 'btn-primary', ]" @click="$router.push({ name: 'generate-ap' })">{{ $t("wifi-select.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>{{ translation.wifi_name }}</option>
|
||||
<option value="" selected>{{ $t("wifi-select.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="translation.wifi_password" v-on:click="keyboard = (virtual_keyboard)? true : false">
|
||||
<input class="form-input" type="password" id="password" v-model="password" :placeholder="$t('wifi-select.wifi_password')" v-on:click="keyboard = (window.config.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()">{{ translation.refresh_btn }}</button>
|
||||
<button class="btn width-100" :class="[ refreshing ? 'loading' : '' ]" v-on:click="refresh_wifi_list()">{{ $t("wifi-select.refresh_btn") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p><strong>{{ translation.not_connected }}</strong><br />{{ translation.please_config }}</p>
|
||||
<p><strong>{{ $t("wifi-select.not_connected") }}</strong><br />{{ $t("wifi-select.please_config") }}</p>
|
||||
<div class="empty-action">
|
||||
<button class="btn btn-primary" @click="enter_creds = true">{{ translation.lets_do_btn }}</button>
|
||||
<button class="btn btn-primary" @click="enter_creds = true">{{ $t("wifi-select.lets_do_btn") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<input :value="input" class="keyboardinput" @input="onInputChange" :placeholder="translation.tap_keyboard">
|
||||
<input :value="input" class="keyboardinput" @input="onInputChange" :placeholder="$t('wifi-select.tap_keyboard')">
|
||||
<SimpleKeyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input" />
|
||||
</div>
|
||||
</div>
|
||||
@ -63,7 +64,7 @@ export default {
|
||||
connecting: false,
|
||||
error: false,
|
||||
success: false,
|
||||
btnval: "",
|
||||
btnval: this.$t("wifi-select.connect_to_it"),
|
||||
ssid: "",
|
||||
selected_ssid: false,
|
||||
password: "",
|
||||
@ -72,7 +73,6 @@ export default {
|
||||
ssids: [],
|
||||
have_internet: false,
|
||||
enter_creds: false,
|
||||
virtual_keyboard: false,
|
||||
refreshing: false,
|
||||
translation: {}
|
||||
}
|
||||
@ -84,15 +84,15 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
wifi_connect: function() {
|
||||
axios.get(`/api/network/wifi/connect`, { timeout: 60000 })
|
||||
axios.get('/api/network/wifi/connect', { timeout: 60000 })
|
||||
.then(response => {
|
||||
if (response.data.status) {
|
||||
this.success = true
|
||||
this.connecting = false
|
||||
this.btnval = this.translation.wifi_connected
|
||||
this.btnval = this.$t('wifi-select.wifi_connected')
|
||||
setTimeout(() => router.push('generate-ap'), 1000);
|
||||
} else {
|
||||
this.btnval = this.translation["wifi_not_connected"]
|
||||
this.btnval = this.$t('wifi-select.wifi_not_connected')
|
||||
this.connecting = false
|
||||
}
|
||||
})
|
||||
@ -102,7 +102,7 @@ export default {
|
||||
},
|
||||
wifi_setup: function() {
|
||||
if (this.ssid.length && this.password.length >= 8 ){
|
||||
axios.post(`/api/network/wifi/setup`, { ssid: this.ssid, password: this.password }, { timeout: 60000 })
|
||||
axios.post('/api/network/wifi/setup', { ssid: this.ssid, password: this.password }, { timeout: 60000 })
|
||||
.then(response => {
|
||||
if(response.data.status) {
|
||||
this.connecting = true
|
||||
@ -116,15 +116,6 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
get_config: function() {
|
||||
axios.get(`/api/misc/config`, { timeout: 60000 })
|
||||
.then(response => {
|
||||
this.virtual_keyboard = response.data.virtual_keyboard
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
});
|
||||
},
|
||||
onChange(input) {
|
||||
this.input = input
|
||||
this.password = this.input;
|
||||
@ -141,25 +132,22 @@ export default {
|
||||
},
|
||||
refresh_wifi_list: function(){
|
||||
this.refreshing = true
|
||||
axios.get(`/api/network/wifi/list`, { timeout: 10000 })
|
||||
.then(response => {
|
||||
this.refreshing = false
|
||||
this.append_ssids(response.data.networks)
|
||||
}).catch(error => {
|
||||
this.refreshing = false
|
||||
console.log(error)
|
||||
axios.get('/api/network/wifi/list', { timeout: 10000 })
|
||||
.then(response => {
|
||||
this.refreshing = false
|
||||
this.append_ssids(response.data.networks)
|
||||
}).catch(error => {
|
||||
this.refreshing = false
|
||||
console.log(error)
|
||||
});
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
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
|
||||
|
||||
if (typeof this.list_ssids == "object" && this.list_ssids.length != 0){
|
||||
if (typeof this.list_ssids == 'object' && this.list_ssids.length != 0){
|
||||
this.ssids = this.list_ssids
|
||||
} else {
|
||||
this.refresh_wifi_list()
|
||||
|
||||
Reference in New Issue
Block a user