Initialer Laravel Commit für BetiX

resources/js/components/TwoFactorSetupModal.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, nextTick } from 'vue';
+import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
+
+// Props
+const props = withDefaults(defineProps<{
+  isOpen: boolean;
+  requiresConfirmation?: boolean;
+  twoFactorEnabled?: boolean;
+}>(), {
+  requiresConfirmation: false,
+  twoFactorEnabled: false,
+});
+
+// Emits
+const emit = defineEmits<{
+  'update:isOpen': [boolean];
+}>();
+
+const internalOpen = ref<boolean>(props.isOpen);
+watch(() => props.isOpen, (v) => internalOpen.value = v);
+watch(internalOpen, (v) => emit('update:isOpen', v));
+
+// 2FA Data
+const {
+  qrCodeSvg,
+  manualSetupKey,
+  errors,
+  hasSetupData,
+  clearTwoFactorAuthData,
+  fetchSetupData,
+} = useTwoFactorAuth();
+
+const loading = ref(false);
+
+async function loadSetup() {
+  loading.value = true;
+  try {
+    await fetchSetupData();
+  } finally {
+    loading.value = false;
+    nextTick(() => { if ((window as any).lucide) (window as any).lucide.createIcons(); });
+  }
+}
+
+function close() {
+  internalOpen.value = false;
+}
+
+onMounted(() => {
+  if (internalOpen.value) loadSetup();
+});
+
+watch(internalOpen, (open) => {
+  if (open) loadSetup();
+  else clearTwoFactorAuthData();
+});
+
+const canContinue = computed(() => hasSetupData.value);
+</script>
+
+<template>
+  <teleport to="body">
+    <div v-if="internalOpen" class="modal-backdrop" @click.self="close">
+      <div class="modal">
+        <header class="modal-head">
+          <div class="title">
+            <i data-lucide="shield-check"></i>
+            <span>Two-Factor Setup</span>
+          </div>
+          <button class="icon-btn" type="button" @click="close" aria-label="Close">
+            <i data-lucide="x"></i>
+          </button>
+        </header>
+
+        <section class="modal-body">
+          <div v-if="errors.length" class="err-list">
+            <div v-for="(e, idx) in errors" :key="idx" class="err">
+              <i data-lucide="alert-triangle"></i>{{ e }}
+            </div>
+          </div>
+
+          <div class="grid">
+            <div class="qr-box">
+              <div class="qr-wrap">
+                <div v-if="loading" class="qr-loading">
+                  <div class="spinner"></div>
+                </div>
+                <div v-else-if="qrCodeSvg" class="qr" v-html="qrCodeSvg" />
+                <div v-else class="empty">
+                  <i data-lucide="scan-line"></i>
+                  <div>QR code not available</div>
+                </div>
+              </div>
+              <div class="hint">Scan this code with your authenticator app</div>
+            </div>
+
+            <div class="key-box">
+              <div class="lbl">Manual Setup Key</div>
+              <div class="key">
+                <i data-lucide="key"></i>
+                <span>{{ manualSetupKey || '—' }}</span>
+              </div>
+              <div class="hint">Enter this key in your authenticator app if you cannot scan the QR</div>
+
+              <div class="footer">
+                <button class="btn" type="button" :disabled="loading" @click="loadSetup">
+                  <span v-if="loading" class="spinner" />
+                  <span>Refresh Data</span>
+                </button>
+                <button class="btn primary" type="button" :disabled="!canContinue || loading" @click="close">
+                  <i data-lucide="check"></i>
+                  <span>{{ props.requiresConfirmation ? 'Continue to Confirm' : 'Done' }}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<style scoped>
+:global(:root) { --bg:#0a0a0a; --overlay: rgba(0,0,0,.7); --border:#151515; --cyan:#00f2ff; }
+.modal-backdrop { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; z-index: 1000; padding: 16px; }
+.modal { width: min(900px, 100%); background: #050505; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
+.modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
+.title { display:flex; align-items:center; gap:10px; font-weight:900; color:#fff; text-transform:uppercase; letter-spacing:1px; font-size:12px; }
+.title i { width:14px; color:#666; }
+.icon-btn { background: transparent; border: 1px solid #151515; color:#888; border-radius: 8px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
+.icon-btn:hover { color:#fff; border-color:#222; }
+.modal-body { padding: 16px; display:grid; gap: 16px; }
+.err-list { display:grid; gap:6px; }
+.err { display:flex; align-items:center; gap:8px; color:#ff5b5b; font-weight:800; }
+.err i { width:14px; }
+.grid { display:grid; grid-template-columns: 320px 1fr; gap: 16px; }
+.qr-wrap { border:1px solid var(--border); border-radius: 12px; padding: 10px; background:#0a0a0a; position: relative; min-height: 220px; display:flex; align-items:center; justify-content:center; }
+.qr { display:block; width: 100%; height: auto; }
+.qr-loading { display:flex; align-items:center; justify-content:center; width:100%; height:200px; }
+.spinner { width: 18px; height: 18px; border: 2px solid rgba(0,0,0,0.1); border-top-color:#000; border-radius: 50%; animation: spin .8s linear infinite; }
+.key-box { display:grid; gap: 10px; align-content:start; }
+.lbl { font-size:10px; font-weight:900; color:#555; text-transform:uppercase; letter-spacing:1px; }
+.key { display:flex; align-items:center; gap:10px; border:1px solid var(--border); background:#0a0a0a; border-radius:10px; padding:10px 12px; color:#eee; font-weight:800; }
+.key i { width:14px; color:#333; }
+.hint { color:#666; font-size:12px; }
+.footer { margin-top: 8px; display:flex; gap:10px; }
+.btn { background: #111; color:#ddd; border:1px solid #181818; border-radius: 10px; padding: 10px 14px; font-weight: 900; cursor: pointer; display:flex; align-items:center; gap:8px; }
+.btn.primary { background: var(--cyan); color:#000; border-color: transparent; box-shadow: 0 0 20px rgba(0,242,255,0.2); }
+.btn:disabled { opacity:.6; cursor:not-allowed; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }
+</style>