feat(05-07): 3-tab SettingsView, SettingsCloudTab, CloudCredentialModal

- Convert SettingsView to 3-tab layout (Preferences/AI/Cloud) matching AdminView pattern - Extract SettingsPreferencesTab.vue and SettingsAiTab.vue from original SettingsView - Create SettingsCloudTab.vue with all 4 providers, status badges, action buttons - Create CloudCredentialModal.vue for WebDAV/Nextcloud credential input - Handle OAuth callback query params (cloud_connected/cloud_error) in SettingsView.onMounted - Add success toast (auto-dismiss 5s) and persistent error banner for OAuth results - Fix pre-existing build failure: add build.target=esnext to vite.config.js for top-level await support - 2 SettingsCloudTab mount tests passing (W4 — CLAUDE.md)
2026-05-29 08:12:36 +02:00
parent 612d542c06
commit 63a68296a5
7 changed files with 706 additions and 61 deletions
@@ -0,0 +1,260 @@
+<template>
+  <div>
+    <section class="bg-white border border-gray-200 rounded-xl p-6">
+      <h3 class="text-xl font-semibold text-gray-800 mb-1">Cloud Storage</h3>
+      <p class="text-sm text-gray-600 mb-5">Connect a cloud storage provider to use as a document destination.</p>
+
+      <!-- Loading state -->
+      <div v-if="store.loading" class="text-sm text-gray-500 py-4">Loading...</div>
+
+      <!-- Provider list -->
+      <div v-else class="divide-y divide-gray-100">
+        <template v-for="provider in PROVIDERS" :key="provider.key">
+          <!-- Provider row -->
+          <div class="flex items-center justify-between py-3 gap-4">
+            <!-- Left: icon + name + status badge -->
+            <div class="flex items-center gap-3 min-w-0">
+              <!-- Provider icon -->
+              <div class="w-8 h-8 rounded-lg bg-gray-50 border border-gray-200 flex items-center justify-center">
+                <svg class="w-5 h-5" :class="provider.iconColor" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+                </svg>
+              </div>
+              <div class="min-w-0">
+                <span class="text-sm font-semibold text-gray-900">{{ provider.label }}</span>
+                <!-- Status badge -->
+                <span
+                  class="ml-2 text-xs font-semibold px-2 py-0.5 rounded-full"
+                  :class="statusBadgeClasses(connectionFor(provider.key)?.status ?? 'not_connected')"
+                >
+                  {{ statusBadgeLabel(connectionFor(provider.key)?.status ?? 'not_connected') }}
+                </span>
+                <!-- Connected-at date for ACTIVE and ERROR -->
+                <div
+                  v-if="connectionFor(provider.key)?.status === 'ACTIVE' || connectionFor(provider.key)?.status === 'ERROR'"
+                  class="text-xs text-gray-500 mt-0.5"
+                >
+                  Connected {{ new Date(connectionFor(provider.key).connected_at).toLocaleDateString() }}
+                </div>
+              </div>
+            </div>
+
+            <!-- Right: action buttons -->
+            <div class="flex items-center gap-2 shrink-0">
+              <!-- not_connected -->
+              <template v-if="!connectionFor(provider.key)">
+                <button
+                  @click="handleConnect(provider)"
+                  class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors min-w-[160px]"
+                >
+                  Connect {{ provider.label }}
+                </button>
+              </template>
+
+              <!-- ACTIVE -->
+              <template v-else-if="connectionFor(provider.key)?.status === 'ACTIVE'">
+                <button
+                  v-if="confirmRemoveId !== connectionFor(provider.key)?.id"
+                  @click="confirmRemoveId = connectionFor(provider.key)?.id"
+                  class="text-sm px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors"
+                >
+                  Remove {{ provider.label }}
+                </button>
+                <ConfirmBlock
+                  v-else
+                  :message="`This will permanently remove your ${provider.label} credentials from DocuVault. Your cloud documents will remain in your ${provider.label} account.`"
+                  :confirm-label="`Remove ${provider.label}`"
+                  cancel-label="Keep connected"
+                  confirm-class="bg-red-600 hover:bg-red-700 text-white"
+                  @confirmed="handleDisconnect(connectionFor(provider.key)?.id)"
+                  @cancelled="confirmRemoveId = null"
+                />
+              </template>
+
+              <!-- REQUIRES_REAUTH -->
+              <template v-else-if="connectionFor(provider.key)?.status === 'REQUIRES_REAUTH'">
+                <button
+                  @click="handleConnect(provider)"
+                  class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors min-w-[160px]"
+                >
+                  Reconnect {{ provider.label }}
+                </button>
+                <button
+                  v-if="confirmRemoveId !== connectionFor(provider.key)?.id"
+                  @click="confirmRemoveId = connectionFor(provider.key)?.id"
+                  class="text-sm px-3 py-2 text-gray-500 hover:text-gray-700 transition-colors"
+                >
+                  Remove {{ provider.label }}
+                </button>
+                <ConfirmBlock
+                  v-else
+                  :message="`This will permanently remove your ${provider.label} credentials from DocuVault. Your cloud documents will remain in your ${provider.label} account.`"
+                  :confirm-label="`Remove ${provider.label}`"
+                  cancel-label="Keep connected"
+                  confirm-class="bg-red-600 hover:bg-red-700 text-white"
+                  @confirmed="handleDisconnect(connectionFor(provider.key)?.id)"
+                  @cancelled="confirmRemoveId = null"
+                />
+              </template>
+
+              <!-- ERROR -->
+              <template v-else-if="connectionFor(provider.key)?.status === 'ERROR'">
+                <button
+                  v-if="confirmRemoveId !== connectionFor(provider.key)?.id"
+                  @click="confirmRemoveId = connectionFor(provider.key)?.id"
+                  class="text-sm px-4 py-2 border border-red-300 rounded-lg hover:bg-red-50 text-red-600 transition-colors"
+                >
+                  Remove {{ provider.label }}
+                </button>
+                <ConfirmBlock
+                  v-else
+                  :message="`This will permanently remove your ${provider.label} credentials from DocuVault. Your cloud documents will remain in your ${provider.label} account.`"
+                  :confirm-label="`Remove ${provider.label}`"
+                  cancel-label="Keep connected"
+                  confirm-class="bg-red-600 hover:bg-red-700 text-white"
+                  @confirmed="handleDisconnect(connectionFor(provider.key)?.id)"
+                  @cancelled="confirmRemoveId = null"
+                />
+              </template>
+            </div>
+          </div>
+
+          <!-- REQUIRES_REAUTH inline banner -->
+          <div
+            v-if="connectionFor(provider.key)?.status === 'REQUIRES_REAUTH'"
+            class="mx-0 mb-2 p-3 rounded-lg bg-yellow-50 border border-yellow-200 flex items-start gap-2"
+          >
+            <svg class="w-4 h-4 text-yellow-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <p class="text-sm text-yellow-800">
+              Your {{ provider.label }} connection needs to be re-authorized.
+              Click <strong>Reconnect {{ provider.label }}</strong> to restore access.
+            </p>
+          </div>
+        </template>
+      </div>
+
+      <!-- Disconnect all (shown only when any connection is ACTIVE or ERROR) -->
+      <div v-if="hasActiveOrErrorConnections" class="pt-4 border-t border-gray-100 flex justify-end">
+        <button
+          v-if="!showDisconnectAll"
+          @click="showDisconnectAll = true"
+          class="text-sm text-red-600 hover:text-red-700 hover:underline font-medium transition-colors"
+        >
+          Disconnect all cloud storage
+        </button>
+        <ConfirmBlock
+          v-else
+          message="This will permanently delete all cloud storage credentials. Your documents will remain in DocuVault, but cloud documents may become inaccessible."
+          confirm-label="Disconnect all"
+          cancel-label="Keep all connected"
+          confirm-class="bg-red-600 hover:bg-red-700 text-white"
+          @confirmed="handleDisconnectAll"
+          @cancelled="showDisconnectAll = false"
+        />
+      </div>
+    </section>
+
+    <!-- CloudCredentialModal for WebDAV/Nextcloud -->
+    <CloudCredentialModal
+      :show="showModal"
+      :provider="activeProvider"
+      @close="closeModal"
+      @connected="handleConnected"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useCloudConnectionsStore } from '../../stores/cloudConnections.js'
+import ConfirmBlock from '../ui/ConfirmBlock.vue'
+import CloudCredentialModal from '../cloud/CloudCredentialModal.vue'
+
+const store = useCloudConnectionsStore()
+
+const PROVIDERS = [
+  { key: 'google_drive', label: 'Google Drive', iconColor: 'text-blue-500' },
+  { key: 'onedrive', label: 'OneDrive', iconColor: 'text-sky-500' },
+  { key: 'nextcloud', label: 'Nextcloud', iconColor: 'text-orange-500' },
+  { key: 'webdav', label: 'WebDAV server', iconColor: 'text-gray-500' },
+]
+
+// OAuth providers use window.location.href redirect
+const OAUTH_PROVIDERS = new Set(['google_drive', 'onedrive'])
+
+const showModal = ref(false)
+const activeProvider = ref(null)
+const confirmRemoveId = ref(null)
+const showDisconnectAll = ref(false)
+
+onMounted(() => {
+  store.fetchConnections()
+})
+
+function connectionFor(providerKey) {
+  return store.connections.find(c => c.provider === providerKey) ?? null
+}
+
+const hasActiveOrErrorConnections = computed(() =>
+  store.connections.some(c => c.status === 'ACTIVE' || c.status === 'ERROR')
+)
+
+function statusBadgeClasses(status) {
+  switch (status) {
+    case 'ACTIVE': return 'bg-green-100 text-green-700'
+    case 'REQUIRES_REAUTH': return 'bg-yellow-100 text-yellow-800'
+    case 'ERROR': return 'bg-red-100 text-red-700'
+    default: return 'bg-gray-100 text-gray-600'
+  }
+}
+
+function statusBadgeLabel(status) {
+  switch (status) {
+    case 'ACTIVE': return 'Active'
+    case 'REQUIRES_REAUTH': return 'Reconnect needed'
+    case 'ERROR': return 'Error'
+    default: return 'Not connected'
+  }
+}
+
+function handleConnect(provider) {
+  if (OAUTH_PROVIDERS.has(provider.key)) {
+    window.location.href = `/api/cloud/oauth/initiate/${provider.key}`
+  } else {
+    activeProvider.value = provider
+    showModal.value = true
+  }
+}
+
+function closeModal() {
+  showModal.value = false
+  activeProvider.value = null
+}
+
+async function handleDisconnect(id) {
+  if (!id) return
+  try {
+    await store.disconnect(id)
+  } catch {
+    // Error handled by store
+  }
+  confirmRemoveId.value = null
+}
+
+async function handleDisconnectAll() {
+  try {
+    await store.disconnectAll()
+  } catch {
+    // Error handled by store
+  }
+  showDisconnectAll.value = false
+}
+
+async function handleConnected() {
+  await store.fetchConnections()
+}
+</script>