- TT#128156 Add QR-Code button to the header
- TT#128157 Add QR-Code render library
- TT#128158 Implement QR-Code generation
- TT#129205 Render QR-Code in the popup
- TT#129224 Create store test and api test (including endpoint mockup)
NOTE
You need to enable sip_phone.show_qr_csc in /etc/ngcp-config/config.yml of your environment to be able to see the QR code icon
Change-Id: Ifa065ef057549696387026c5a62cf0f5297ffb05
(cherry picked from commit 389a6bcb9d
)
mr9.5.2
parent
b26dd3a9f8
commit
ccdf8971bb
@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<csc-dialog
|
||||||
|
ref="dialog"
|
||||||
|
:title="$t('Scan to login sip:phone')"
|
||||||
|
:opened="true"
|
||||||
|
@cancel="hide"
|
||||||
|
>
|
||||||
|
<q-img
|
||||||
|
v-if="qrCode"
|
||||||
|
class="full-width justify-center"
|
||||||
|
:src="qrCode"
|
||||||
|
spinner-color="primary"
|
||||||
|
:ratio="1"
|
||||||
|
width="300px"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="full-width text-center text-negative "
|
||||||
|
>
|
||||||
|
{{ $t('QR code unavailable. Please retry later') }}
|
||||||
|
</div>
|
||||||
|
</csc-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CscDialog from './CscDialog'
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
export default {
|
||||||
|
name: 'CscDialogQrCode',
|
||||||
|
components: {
|
||||||
|
CscDialog
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dataImg: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('user', [
|
||||||
|
'qrCode',
|
||||||
|
'qrExpiringTime'
|
||||||
|
])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
show () {
|
||||||
|
this.$refs.dialog.show()
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit('hide')
|
||||||
|
}, Number(this.qrExpiringTime) * 1000)
|
||||||
|
},
|
||||||
|
hide () {
|
||||||
|
this.$refs.dialog.hide()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
@ -0,0 +1,3 @@
|
|||||||
|
export function qrPayload ({ subscriber, server, token }) {
|
||||||
|
return `username=${subscriber}&server=${server}&token=${token}`
|
||||||
|
}
|
@ -0,0 +1,25 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VueResource from 'vue-resource'
|
||||||
|
import { createAuthToken } from 'src/api/user'
|
||||||
|
|
||||||
|
Vue.use(VueResource)
|
||||||
|
|
||||||
|
describe('User API', () => {
|
||||||
|
beforeEach( () => {
|
||||||
|
Vue.http.interceptors = []
|
||||||
|
})
|
||||||
|
it('should fetch an authtoken', async () => {
|
||||||
|
const authToken = 'd73ddf3a-0bf3-47bd-bee9-13bd972b37ec'
|
||||||
|
Vue.http.interceptors.unshift((request, next) => {
|
||||||
|
next(request.respondWith(JSON.stringify({
|
||||||
|
token: authToken
|
||||||
|
}), {
|
||||||
|
status: 201
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
const response = await createAuthToken(300)
|
||||||
|
expect(response).toEqual(authToken)
|
||||||
|
})
|
||||||
|
})
|
@ -0,0 +1,22 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
|
||||||
|
import {
|
||||||
|
qrPayload
|
||||||
|
} from 'src/helpers/qr'
|
||||||
|
|
||||||
|
describe('QR helpers', function () {
|
||||||
|
|
||||||
|
it('checks the format of QR payload', () => {
|
||||||
|
const subscriber = '43991002'
|
||||||
|
const server = 'sipwise.com'
|
||||||
|
const token = 'e7cd5253-79fc-4aec-bb1b-4b86eff96c7d'
|
||||||
|
const payload = `username=${subscriber}&server=${server}&token=${token}`
|
||||||
|
const result = qrPayload({
|
||||||
|
subscriber: subscriber,
|
||||||
|
server: server,
|
||||||
|
token: token
|
||||||
|
})
|
||||||
|
expect(result).toBe(payload)
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
Loading…
Reference in new issue