feat(05-10): OAuth fetch + Nextcloud edit fix + Edit on ERROR + text overflow
- client.js: add initiateOAuth() and getConnectionConfig() helpers
- SettingsCloudTab: replace window.location.href with initiateOAuth() + fetch/JWT
- SettingsCloudTab: add Edit button to ACTIVE and ERROR blocks for non-OAuth providers
- SettingsCloudTab: wrap ConfirmBlock in w-full overflow-hidden div
- CloudCredentialModal: add existing prop, edit-mode pre-population via /config endpoint
- CloudCredentialModal: add showAdvanced + customEndpoint for Nextcloud custom paths
- ConfirmBlock: add break-words class to message paragraph
- cloud.py: add GET /api/cloud/connections/{id}/config endpoint (non-secret fields)
This commit is contained in:
curo1305
@@ -7,6 +7,18 @@
|
||||
<!-- 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"
|
||||
>
|
||||
<svg class="w-4 h-4 text-red-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-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">
|
||||
@@ -54,6 +66,13 @@
|
||||
|
||||
<!-- 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"
|
||||
@@ -61,15 +80,16 @@
|
||||
>
|
||||
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"
|
||||
/>
|
||||
<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 -->
|
||||
@@ -87,19 +107,27 @@
|
||||
>
|
||||
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"
|
||||
/>
|
||||
<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"
|
||||
@@ -107,15 +135,16 @@
|
||||
>
|
||||
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"
|
||||
/>
|
||||
<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>
|
||||
@@ -146,15 +175,16 @@
|
||||
>
|
||||
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 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>
|
||||
|
||||
@@ -162,6 +192,7 @@
|
||||
<CloudCredentialModal
|
||||
:show="showModal"
|
||||
:provider="activeProvider"
|
||||
:existing="editingConnection"
|
||||
@close="closeModal"
|
||||
@connected="handleConnected"
|
||||
/>
|
||||
@@ -171,6 +202,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useCloudConnectionsStore } from '../../stores/cloudConnections.js'
|
||||
import { initiateOAuth } from '../../api/client.js'
|
||||
import ConfirmBlock from '../ui/ConfirmBlock.vue'
|
||||
import CloudCredentialModal from '../cloud/CloudCredentialModal.vue'
|
||||
|
||||
@@ -188,8 +220,10 @@ 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()
|
||||
@@ -221,18 +255,32 @@ function statusBadgeLabel(status) {
|
||||
}
|
||||
}
|
||||
|
||||
function handleConnect(provider) {
|
||||
async function handleConnect(provider) {
|
||||
if (OAUTH_PROVIDERS.has(provider.key)) {
|
||||
window.location.href = `/api/cloud/oauth/initiate/${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) {
|
||||
|
||||
Reference in New Issue
Block a user