curo1305
10175ee4b5
- oauth_initiate: pre-flight check returns 400 with env-var hint when GOOGLE_CLIENT_ID/SECRET or ONEDRIVE_CLIENT_ID/SECRET are not configured, preventing opaque MSAL/OAuth library 500 errors on misconfigured servers - stream_document_content: broad except-clause catches non-CloudConnectionError exceptions and returns 502 with user-friendly message (was raw 500) - docker-compose.yml: add volumes: - ./backend:/app to celery-worker so code changes are picked up by docker compose restart without a rebuild - CloudStorageView: upload hint paragraph directs users to navigate into a cloud folder; no DropZone added (no folder context at overview level) - 3 new backend tests pass; 2 existing tests patched with credential monkeypatch; full suite: 293 passed, 0 new failures, 1 pre-existing (test_extract_docx) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
94 lines
3.2 KiB
Vue
94 lines
3.2 KiB
Vue
<template>
|
|
<div class="flex flex-col h-full">
|
|
|
|
<!-- Toolbar -->
|
|
<div class="sticky top-0 z-10 bg-white border-b border-gray-100">
|
|
<div class="px-6 py-3 flex items-center gap-3">
|
|
<span class="text-sm font-medium text-gray-700">Cloud Storage</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-1 overflow-y-auto px-6 py-5">
|
|
|
|
<!-- Column headers -->
|
|
<div class="px-4 py-2 grid grid-cols-[2rem_1fr_8rem] gap-3 items-center rounded-lg bg-gray-50 text-xs font-semibold text-gray-400 uppercase tracking-wider select-none mb-1">
|
|
<span></span>
|
|
<span>Name</span>
|
|
<span>Status</span>
|
|
</div>
|
|
|
|
<div v-if="loading" class="text-sm text-gray-400 py-8 text-center">Loading…</div>
|
|
|
|
<div v-else-if="connections.length === 0" class="text-center py-12 text-gray-400">
|
|
<p class="text-sm">No cloud storage connected.</p>
|
|
<router-link to="/settings" class="text-sm text-indigo-600 hover:underline mt-1 inline-block">
|
|
Add a connection in Settings
|
|
</router-link>
|
|
</div>
|
|
|
|
<div v-else class="flex flex-col divide-y divide-gray-100 border border-gray-100 rounded-xl overflow-hidden">
|
|
<div
|
|
v-for="conn in connections"
|
|
:key="conn.id"
|
|
class="px-4 py-2.5 grid grid-cols-[2rem_1fr_8rem] gap-3 items-center hover:bg-gray-50 group cursor-pointer transition-colors"
|
|
@click="openProvider(conn)"
|
|
>
|
|
<!-- Provider icon -->
|
|
<div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0" :class="providerBg(conn.provider)">
|
|
<svg class="w-4 h-4" :class="providerColor(conn.provider)" 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>
|
|
|
|
<span class="text-sm font-medium text-gray-900 truncate">{{ conn.display_name }}</span>
|
|
|
|
<span class="text-xs" :class="conn.status === 'ACTIVE' ? 'text-green-600' : 'text-amber-500'">
|
|
{{ conn.status === 'ACTIVE' ? 'Connected' : 'Needs reauth' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p v-if="connections.length > 0" class="mt-4 text-xs text-gray-400 text-center">
|
|
To upload files, navigate into a cloud folder first.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useCloudConnectionsStore } from '../stores/cloudConnections.js'
|
|
|
|
const router = useRouter()
|
|
const cloudStore = useCloudConnectionsStore()
|
|
|
|
const loading = computed(() => cloudStore.loading)
|
|
const connections = computed(() => cloudStore.connections)
|
|
|
|
function openProvider(conn) {
|
|
router.push(`/cloud/${conn.provider}/root`)
|
|
}
|
|
|
|
function providerColor(provider) {
|
|
return {
|
|
google_drive: 'text-blue-500',
|
|
onedrive: 'text-sky-500',
|
|
nextcloud: 'text-orange-500',
|
|
webdav: 'text-gray-500',
|
|
}[provider] ?? 'text-gray-400'
|
|
}
|
|
|
|
function providerBg(provider) {
|
|
return {
|
|
google_drive: 'bg-blue-50',
|
|
onedrive: 'bg-sky-50',
|
|
nextcloud: 'bg-orange-50',
|
|
webdav: 'bg-gray-100',
|
|
}[provider] ?? 'bg-gray-50'
|
|
}
|
|
</script>
|