feat(02-06): Account tab in SettingsView + QR code in TotpEnrollment (GAPs 3, 5)

- frontend/package.json: add qrcode@1.5.4 to runtime dependencies
- TotpEnrollment.vue: import QRCode; generate data URL in startSetup(); render img tag
- SettingsAccountTab.vue: new component with all AccountView content (2FA, password, sessions)
- SettingsView.vue: add Account tab rendering SettingsAccountTab; import SettingsAccountTab
This commit is contained in:
curo1305
2026-05-31 20:40:28 +02:00
parent 97314ce486
commit c08ea42b1b
4 changed files with 265 additions and 10 deletions
@@ -28,17 +28,10 @@
Open your authenticator app and scan this QR code, or enter the key manually.
</p>
<!-- QR code rendered via provisioning URI link (no QR library dependency) -->
<!-- QR code rendered as an inline image via qrcode library -->
<div class="bg-white border border-gray-200 rounded-xl p-6 flex flex-col items-center gap-4">
<p class="text-xs text-gray-500 text-center">Scan with your authenticator app using the link below, or enter the secret key manually:</p>
<a
:href="qrUri"
class="text-sm font-semibold text-indigo-600 hover:text-indigo-700 underline break-all text-center"
target="_blank"
rel="noopener noreferrer"
>
Open in authenticator app
</a>
<p class="text-xs text-gray-500 text-center">Scan this QR code with your authenticator app:</p>
<img v-if="qrDataUrl" :src="qrDataUrl" alt="TOTP QR code" class="w-48 h-48 rounded-xl border border-gray-200" />
</div>
</div>
@@ -115,6 +108,7 @@
<script setup>
import { ref } from 'vue'
import QRCode from 'qrcode'
import * as api from '../../api/client.js'
import AppSpinner from '../ui/AppSpinner.vue'
import BackupCodesDisplay from './BackupCodesDisplay.vue'
@@ -123,6 +117,7 @@ const emit = defineEmits(['enrolled'])
const step = ref('setup')
const qrUri = ref('')
const qrDataUrl = ref('')
const secret = ref('')
const verifyCode = ref('')
const backupCodes = ref([])
@@ -138,6 +133,7 @@ async function startSetup() {
const data = await api.totpSetup()
qrUri.value = data.provisioning_uri
secret.value = data.secret
qrDataUrl.value = await QRCode.toDataURL(qrUri.value, { width: 200, margin: 1 })
step.value = 'verify'
} catch (e) {
error.value = e.message