kite/frontend/src/components/settings/SettingsCloudTab.vue

<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>

      <!-- OAuth error banner -->
      <div
        v-if="oauthError"
        class="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 flex items-start gap-2"
      >
        <AppIcon name="warning" class="w-4 h-4 text-red-600 shrink-0 mt-0.5" />
        <p class="text-sm text-red-700">{{ oauthError }}</p>
      </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">
                <AppIcon name="cloud" class="w-5 h-5" :class="provider.iconColor" />
              </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="!OAUTH_PROVIDERS.has(provider.key) && confirmRemoveId !== connectionFor(provider.key)?.id"
                  @click="handleEdit(provider)"
                  class="text-sm px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors"
                >
                  Edit
                </button>
                <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>
                <div v-if="confirmRemoveId === connectionFor(provider.key)?.id" class="w-full overflow-hidden">
                  <ConfirmBlock
                    :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"
                  />
                </div>
              </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>
                <div v-if="confirmRemoveId === connectionFor(provider.key)?.id" class="w-full overflow-hidden">
                  <ConfirmBlock
                    :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"
                  />
                </div>
              </template>

              <!-- ERROR -->
              <template v-else-if="connectionFor(provider.key)?.status === 'ERROR'">
                <button
                  v-if="!OAUTH_PROVIDERS.has(provider.key) && confirmRemoveId !== connectionFor(provider.key)?.id"
                  @click="handleEdit(provider)"
                  class="text-sm px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors"
                >
                  Edit
                </button>
                <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>
                <div v-if="confirmRemoveId === connectionFor(provider.key)?.id" class="w-full overflow-hidden">
                  <ConfirmBlock
                    :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"
                  />
                </div>
              </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"
          >
            <AppIcon name="warning" class="w-4 h-4 text-yellow-600 shrink-0 mt-0.5" />
            <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>
        <div v-else class="w-full overflow-hidden">
          <ConfirmBlock
            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>
      </div>
    </section>

    <!-- CloudCredentialModal for WebDAV/Nextcloud -->
    <CloudCredentialModal
      :show="showModal"
      :provider="activeProvider"
      :existing="editingConnection"
      @close="closeModal"
      @connected="handleConnected"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useCloudConnectionsStore } from '../../stores/cloudConnections.js'
import { initiateOAuth } from '../../api/client.js'
import AppIcon from '../ui/AppIcon.vue'
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 editingConnection = ref(null)
const confirmRemoveId = ref(null)
const showDisconnectAll = ref(false)
const oauthError = ref('')

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'
  }
}

async function handleConnect(provider) {
  if (OAUTH_PROVIDERS.has(provider.key)) {
    oauthError.value = ''
    try {
      const data = await initiateOAuth(provider.key)
      window.location.href = data.url
    } catch (e) {
      oauthError.value = e.message || `Failed to initiate ${provider.label} connection. Please try again.`
    }
  } else {
    editingConnection.value = null
    activeProvider.value = provider
    showModal.value = true
  }
}

function handleEdit(provider) {
  editingConnection.value = connectionFor(provider.key)
  activeProvider.value = provider
  showModal.value = true
}

function closeModal() {
  showModal.value = false
  activeProvider.value = null
  editingConnection.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>