feat(02-03): TOTP enrollment flow, backup codes, AccountView, ConfirmBlock

- TotpEnrollment.vue: three-step enrollment (setup → verify → backup-codes); emits 'enrolled' - BackupCodesDisplay.vue: 2-column grid, copy-all clipboard, acknowledgment checkbox - ConfirmBlock.vue: reusable inline confirmation block with 'confirmed'/'cancelled' emits - AccountView.vue: TOTP section (enrollment or disable), change-password with breach/wrong-pw error handling, sign-out-all with ConfirmBlock - npm run build exits 0
2026-05-22 19:54:53 +02:00
parent 43e1d0145e
commit d73e2f6112
4 changed files with 446 additions and 30 deletions
@@ -0,0 +1,84 @@
+<template>
+  <div class="space-y-4">
+    <div>
+      <h3 class="text-xl font-semibold text-gray-900 mb-1">Save your backup codes</h3>
+      <p class="text-sm text-gray-500">
+        Store these codes somewhere safe. Each can only be used once if you lose access to your authenticator app.
+      </p>
+    </div>
+
+    <!-- 2-column grid of backup codes -->
+    <div class="grid grid-cols-2 gap-2">
+      <div
+        v-for="code in codes"
+        :key="code"
+        class="font-mono text-sm text-gray-800 bg-gray-50 border border-gray-200 rounded-md px-3 py-2 text-center"
+      >
+        {{ code }}
+      </div>
+    </div>
+
+    <!-- Copy all button -->
+    <button
+      type="button"
+      @click="copyAll"
+      class="flex items-center gap-2 text-sm font-semibold text-indigo-600 hover:text-indigo-700 transition-colors"
+    >
+      <!-- Clipboard icon -->
+      <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+      </svg>
+      {{ copied ? 'Copied' : 'Copy all codes' }}
+    </button>
+
+    <!-- Acknowledgment checkbox -->
+    <div class="flex items-start gap-3 pt-2">
+      <input
+        id="backup-codes-ack"
+        v-model="acknowledged"
+        type="checkbox"
+        class="mt-0.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+      />
+      <label for="backup-codes-ack" class="text-sm text-gray-700 cursor-pointer">
+        I have saved these codes in a secure place. I understand they will not be shown again.
+      </label>
+    </div>
+
+    <!-- Enable 2FA CTA — disabled until acknowledged -->
+    <button
+      type="button"
+      @click="acknowledged && $emit('acknowledged')"
+      :disabled="!acknowledged"
+      class="w-full px-6 py-3 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 transition-colors min-h-[44px]"
+      :class="!acknowledged ? 'opacity-50 cursor-not-allowed' : ''"
+    >
+      Enable two-factor authentication
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  codes: {
+    type: Array,
+    required: true,
+  },
+})
+
+defineEmits(['acknowledged'])
+
+const acknowledged = ref(false)
+const copied = ref(false)
+
+async function copyAll() {
+  try {
+    await navigator.clipboard.writeText(props.codes.join('\n'))
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  } catch {
+    // Clipboard API may fail in some environments — fail silently
+  }
+}
+</script>