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,79 @@
+<template>
+  <v-container fluid class="py-6">
+    <ExtensionKeyBar />
+
+    <v-alert v-if="credentialsStore.error" type="error" variant="tonal" closable class="mb-4">
+      {{ String(credentialsStore.error) }}
+    </v-alert>
+
+    <PlatformCredentialRow
+      v-for="p in platformsStore.list"
+      :key="p.key"
+      :platform="p"
+      :credential="credentialsStore.byPlatform.get(p.key) || null"
+      @replace="openUpload"
+      @remove="confirmRemove"
+    />
+
+    <CredentialUploadDialog
+      v-model="showUpload"
+      :platform="uploadPlatform"
+      @saved="onSaved"
+    />
+
+    <v-dialog v-model="removeConfirm.open" max-width="420">
+      <v-card>
+        <v-card-title>Delete {{ removeConfirm.platform?.name }} credential?</v-card-title>
+        <v-card-text>
+          The encrypted credential will be removed permanently. You'll need to
+          re-upload to use this platform again.
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="removeConfirm.open = false">Cancel</v-btn>
+          <v-btn color="error" variant="flat" @click="doRemove">Delete</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { usePlatformsStore } from '../stores/platforms.js'
+import { useCredentialsStore } from '../stores/credentials.js'
+import ExtensionKeyBar from '../components/credentials/ExtensionKeyBar.vue'
+import PlatformCredentialRow from '../components/credentials/PlatformCredentialRow.vue'
+import CredentialUploadDialog from '../components/credentials/CredentialUploadDialog.vue'
+
+const platformsStore = usePlatformsStore()
+const credentialsStore = useCredentialsStore()
+
+const showUpload = ref(false)
+const uploadPlatform = ref(null)
+const removeConfirm = reactive({ open: false, platform: null })
+
+onMounted(async () => {
+  await Promise.all([platformsStore.loadAll(), credentialsStore.loadAll()])
+})
+
+function openUpload(platform) {
+  uploadPlatform.value = platform
+  showUpload.value = true
+}
+
+async function onSaved() {
+  await credentialsStore.loadAll()
+}
+
+function confirmRemove(platform) {
+  removeConfirm.platform = platform
+  removeConfirm.open = true
+}
+
+async function doRemove() {
+  await credentialsStore.remove(removeConfirm.platform.key)
+  removeConfirm.open = false
+  await credentialsStore.loadAll()
+}
+</script>