curo1305
63a68296a5
- 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)
261 lines
11 KiB
Vue
261 lines
11 KiB
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>
|
|
|
|
<!-- 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>
|