feat(fc3b): /credentials view + ExtensionKeyBar + PlatformCredentialRow + UploadDialog

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 18:38:32 -04:00
parent e83747b085
commit a0203f4727
5 changed files with 300 additions and 1 deletions
@@ -0,0 +1,75 @@
+<template>
+  <div class="fc-extkey-bar">
+    <span class="fc-extkey-bar__label">Extension API key:</span>
+    <code class="fc-extkey-bar__value">{{ store.extensionKey || '…' }}</code>
+    <v-btn size="small" variant="text" @click="copyKey" :disabled="!store.extensionKey">
+      Copy
+    </v-btn>
+    <v-btn size="small" variant="outlined" color="warning" @click="confirmRotate">
+      Rotate
+    </v-btn>
+    <v-dialog v-model="showRotateConfirm" max-width="420">
+      <v-card>
+        <v-card-title>Rotate extension API key?</v-card-title>
+        <v-card-text>
+          The old key stops working immediately. Update your browser extension
+          with the new key after rotating.
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="showRotateConfirm = false">Cancel</v-btn>
+          <v-btn color="warning" variant="flat" @click="doRotate">Rotate</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useCredentialsStore } from '../../stores/credentials.js'
+
+const store = useCredentialsStore()
+const showRotateConfirm = ref(false)
+
+onMounted(() => store.loadKey())
+
+async function copyKey() {
+  if (!store.extensionKey) return
+  try {
+    await navigator.clipboard.writeText(store.extensionKey)
+    globalThis.window?.__fcToast?.({ text: 'Copied', type: 'success' })
+  } catch {
+    globalThis.window?.__fcToast?.({ text: 'Copy failed', type: 'error' })
+  }
+}
+
+function confirmRotate() { showRotateConfirm.value = true }
+
+async function doRotate() {
+  showRotateConfirm.value = false
+  await store.rotateKey()
+  globalThis.window?.__fcToast?.({ text: 'Key rotated', type: 'success' })
+}
+</script>
+
+<style scoped>
+.fc-extkey-bar {
+  display: flex; align-items: center; gap: 0.75rem;
+  padding: 0.75rem 1rem; margin-bottom: 1rem;
+  background: rgb(var(--v-theme-surface));
+  border: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.18);
+  border-radius: 6px;
+}
+.fc-extkey-bar__label {
+  color: rgb(var(--v-theme-on-surface-variant));
+  font-size: 0.85rem;
+}
+.fc-extkey-bar__value {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.85rem;
+  flex: 0 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>