You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
3.8 KiB
135 lines
3.8 KiB
2 years ago
|
<app-auth>
|
||
|
|
<div class="auth">
|
||
|
|
<div class="auth__scanner">
|
||
|
|
<div id="scanner" class="{ getClasses() }"></div>
|
||
|
|
<div if={ !state.isReady } class="panel panel--border-highlight border-color-danger">
|
||
|
|
<div class="panel__body">
|
||
|
|
<div class="content m-bottom-last-child-0">
|
||
|
|
<p>
|
||
|
|
Not Authorized!
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
class="button w-100 justify-center size-large line-height-0 m-top-4"
|
||
|
|
type="button"
|
||
|
|
disabled={ !state.cameraId }
|
||
|
|
onclick={ (event) => { handleToggleScanner(event) } }
|
||
|
|
>
|
||
|
|
<span if={ !this.state.scanning }>
|
||
|
|
<svg class="icon size-large" aria-hidden="true">
|
||
|
|
<use xlink:href="/symbol-defs.svg#icon-log-in"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<span if={ this.state.scanning }>
|
||
|
|
<svg class="icon size-large" aria-hidden="true">
|
||
|
|
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import { Html5Qrcode } from 'html5-qrcode'
|
||
|
|
import authStore from './../stores/auth.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
|
||
|
|
state: {
|
||
|
|
html5QrCode: false,
|
||
|
|
cameraId: false,
|
||
|
|
isReady: false,
|
||
|
|
devices: false,
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
onMounted() {
|
||
|
|
|
||
|
|
authStore.on('authorized', () => {
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
authStore.on('unauthorized', () => {
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
// create
|
||
|
|
this.state.html5QrCode = new Html5Qrcode('scanner')
|
||
|
|
|
||
|
|
// getting devices, set first as default
|
||
|
|
Html5Qrcode.getCameras().then(devices => {
|
||
|
|
if (devices && devices.length) {
|
||
|
|
|
||
|
|
// getting first cameraId
|
||
|
|
this.state.cameraId = devices[0].id
|
||
|
|
this.state.devices = devices
|
||
|
|
|
||
|
|
this.update()
|
||
|
|
}
|
||
|
|
}).catch(err => {
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @param {[type]} event
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
handleToggleScanner(event) {
|
||
|
|
event.preventDefault()
|
||
|
|
|
||
|
|
if (this.state.isReady) {
|
||
|
|
|
||
|
|
// stopping camera
|
||
|
|
this.state.html5QrCode.stop().then((ignore) => {
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
this.state.isReady = false
|
||
|
|
} else {
|
||
|
|
this.state.html5QrCode.start(this.state.cameraId, {
|
||
|
|
fps: 10,
|
||
|
|
qrbox: {
|
||
|
|
width: 300,
|
||
|
|
height: 300
|
||
|
|
} // Optional, if you want bounded box UI
|
||
|
|
},
|
||
|
|
(decodedText, decodedResult) => {
|
||
|
|
authStore.login(decodedText)
|
||
|
|
},
|
||
|
|
(errorMessage) => {
|
||
|
|
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
this.state.isReady = true
|
||
|
|
}
|
||
|
|
|
||
|
|
this.update()
|
||
|
|
},
|
||
|
|
|
||
|
|
getClasses() {
|
||
|
|
const classes = [
|
||
|
|
'auth__scanner-view',
|
||
|
|
]
|
||
|
|
|
||
|
|
if (!this.state.isReady) {
|
||
|
|
classes.push('hidden')
|
||
|
|
}
|
||
|
|
|
||
|
|
return classes.join(' ')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</app-auth>
|