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

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>