feat: allow refreshing QR code

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

@@ -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()

resources/assets/js/components/profile-preferences/QRLogin.vue

@@ -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(() => {
+const resetOneTimeToken = async () => {
-  window.setInterval(resetOneTimeToken, 60 * 10 * 1000)
+  oneTimeToken.value = await authService.getOneTimeToken()
-  resetOneTimeToken()
+
-})
+  if (oneTimeTokenTimeout) {
+    window.clearTimeout(oneTimeTokenTimeout)
+  }
+
+  oneTimeTokenTimeout = window.setTimeout(resetOneTimeToken, 60 * 10 * 1000)
+}
+
+onMounted(() => resetOneTimeToken())
 </script>

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

@@ -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>`;