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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user