120 lines
4.3 KiB
Vue
120 lines
4.3 KiB
Vue
<template>
|
|
<div class="center">
|
|
<div v-if="(error == false)">
|
|
<div v-if="ssid_name">
|
|
<div class="card apcard" v-on:click="generate_ap()">
|
|
<div class="columns">
|
|
<div class="column col-5">
|
|
<center><img :src="ssid_qr" id="qrcode"></center>
|
|
</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 />
|
|
<h4>{{ ssid_name }}</h4>
|
|
<span class="light-grey">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>
|
|
</div>
|
|
<div v-else>
|
|
<img src="@/assets/loading.svg"/>
|
|
<p class="legend">We generate an ephemeral network for you.</p>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<p>
|
|
<strong>Unfortunately, we got some issues.</strong>
|
|
<br /><br />
|
|
Please verify that you've two Wifi interfaces on your device<br />
|
|
and restart it by clicking on the button below.<br />
|
|
</p>
|
|
<button class="btn" v-on:click="reboot()">Reboot the device</button>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
import router from '../router'
|
|
|
|
export default {
|
|
name: 'generate-ap',
|
|
components: {},
|
|
data() {
|
|
return {
|
|
ssid_name: false,
|
|
ssid_qr: false,
|
|
ssid_password: false,
|
|
capture_token: false,
|
|
capture_start: false,
|
|
interval: false,
|
|
error: false
|
|
}
|
|
},
|
|
methods: {
|
|
generate_ap: function() {
|
|
clearInterval(this.interval)
|
|
this.ssid_name = false
|
|
axios.get(`/api/network/ap/start`, { timeout: 30000 })
|
|
.then(response => (this.show_ap(response.data)))
|
|
},
|
|
show_ap: function(data) {
|
|
if (data.status) {
|
|
this.ssid_name = data.ssid
|
|
this.ssid_password = data.password
|
|
this.ssid_qr = data.qrcode
|
|
this.start_capture() // Start the capture before client connect.
|
|
} else {
|
|
this.error = true
|
|
}
|
|
},
|
|
start_capture: function() {
|
|
axios.get(`/api/capture/start`, { timeout: 30000 })
|
|
.then(response => (this.get_capture_token(response.data)))
|
|
},
|
|
reboot: function() {
|
|
axios.get(`/api/misc/reboot`, { timeout: 30000 })
|
|
.then(response => { console.log(response)})
|
|
},
|
|
get_capture_token: function(data) {
|
|
if (data.status) {
|
|
this.capture_token = data.capture_token
|
|
this.capture_start = Date.now()
|
|
this.get_device()
|
|
}
|
|
},
|
|
get_device: function() {
|
|
this.interval = setInterval(() => {
|
|
axios.get(`/api/device/get/${this.capture_token}`, { timeout: 30000 })
|
|
.then(response => (this.check_device(response.data)))
|
|
}, 500);
|
|
},
|
|
check_device: function(data) {
|
|
if (data.status) {
|
|
clearInterval(this.interval);
|
|
var capture_token = this.capture_token
|
|
var capture_start = this.capture_start
|
|
var device_name = data.name
|
|
router.replace({
|
|
name: 'capture',
|
|
params: {
|
|
capture_token: capture_token,
|
|
capture_start: capture_start,
|
|
device_name: device_name
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
created: function() {
|
|
this.generate_ap();
|
|
}
|
|
}
|
|
</script>
|
|
|