Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-24 05:03:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: allow refreshing QR code

Browse source
This commit is contained in:
Phan An 2024-06-16 18:01:58 +02:00
parent 3da777dbb2
commit eef2cfa0e0
3 changed files with 36 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
resources/assets/js/components/profile-preferences/QRLogin.spec.ts
View file

@ -1,17 +1,30 @@
import { expect, it, vi } from 'vitest'
import UnitTestCase from '@/__tests__/UnitTestCase'
import { authService } from '@/services'
import QRLogin from '@/components/profile-preferences/QRLogin.vue'
import { screen } from '@testing-library/vue'
import Component from './QRLogin.vue'
new class extends UnitTestCase {
protected beforeEach () {
vi.mock('@vueuse/integrations/useQRCode', () => ({
useQRCode: () => 'data:image/png;base64,my-qr-code'
}))
}
protected test () {
it('renders', async () => {
vi.mock('@vueuse/integrations/useQRCode', () => ({
useQRCode: () => 'data:image/png;base64,my-qr-code'
}))
const getTokenMock = this.mock(authService, 'getOneTimeToken').mockResolvedValue('my-token')
const { html } = this.render(QRLogin)
const { html } = this.render(Component)
expect(getTokenMock).toHaveBeenCalled()
expect(html()).toMatchSnapshot()
})
it('refreshes QR code', async () => {
const getTokenMock = this.mock(authService, 'getOneTimeToken').mockResolvedValue('my-token')
const { html } = this.render(Component)
await this.user.click(screen.getByRole('button', { name: 'Refresh now' }))
expect(getTokenMock).toHaveBeenCalled()
expect(html()).toMatchSnapshot()

20
resources/assets/js/components/profile-preferences/QRLogin.vue
View file

@ -1,9 +1,10 @@
<template>
<article class="text-k-text-secondary">
Instead of using a password, you can scan the QR code below to log in to
<a class="text-k-highlight" href="https://koel.dev/#mobile" target="_blank">Koel Player</a>
<a href="https://koel.dev/#mobile" target="_blank">Koel Player</a>
on your mobile device.<br>
The QR code will refresh every 10 minutes.
<a role="button" @click.prevent="resetOneTimeToken">Refresh now</a>
<img :src="qrCodeUrl" alt="QR Code" class="mt-4 rounded-4" height="192" width="192">
</article>
</template>
@ -29,10 +30,17 @@ const qrCodeUrl = useQRCode(qrCodeData, {
height: window.devicePixelRatio === 1 ? 196 : 384
})
const resetOneTimeToken = async () => (oneTimeToken.value = await authService.getOneTimeToken())
let oneTimeTokenTimeout: number | null = null
onMounted(() => {
window.setInterval(resetOneTimeToken, 60 * 10 * 1000)
resetOneTimeToken()
})
const resetOneTimeToken = async () => {
oneTimeToken.value = await authService.getOneTimeToken()
if (oneTimeTokenTimeout) {
window.clearTimeout(oneTimeTokenTimeout)
}
oneTimeTokenTimeout = window.setTimeout(resetOneTimeToken, 60 * 10 * 1000)
}
onMounted(() => resetOneTimeToken())
</script>

4
resources/assets/js/components/profile-preferences/__snapshots__/QRLogin.spec.ts.snap
View file

@ -1,3 +1,5 @@
// Vitest Snapshot v1
exports[`renders 1`] = `<article class="text-k-text-secondary"> Instead of using a password, you can scan the QR code below to log in to <a class="text-k-highlight" href="https://koel.dev/#mobile" target="_blank">Koel Player</a> on your mobile device.<br> The QR code will refresh every 10 minutes. <img src="data:image/png;base64,my-qr-code" alt="QR Code" class="mt-4 rounded-4" height="192" width="192"></article>`;
exports[`refreshes QR code 1`] = `<article class="text-k-text-secondary"> Instead of using a password, you can scan the QR code below to log in to <a href="https://koel.dev/#mobile" target="_blank">Koel Player</a> on your mobile device.<br> The QR code will refresh every 10 minutes. <a role="button">Refresh now</a><img src="data:image/png;base64,my-qr-code" alt="QR Code" class="mt-4 rounded-4" height="192" width="192"></article>`;
exports[`renders 1`] = `<article class="text-k-text-secondary"> Instead of using a password, you can scan the QR code below to log in to <a href="https://koel.dev/#mobile" target="_blank">Koel Player</a> on your mobile device.<br> The QR code will refresh every 10 minutes. <a role="button">Refresh now</a><img src="data:image/png;base64,my-qr-code" alt="QR Code" class="mt-4 rounded-4" height="192" width="192"></article>`;