curo/kite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(05-10): OAuth fetch + Nextcloud edit fix + Edit on ERROR + text overflow

Browse Source 
- 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
2026-05-30 11:30:13 +02:00
parent e2e499b8b1
commit 87de148a59
5 changed files with 310 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/cloud/CloudCredentialModal.vue
+148 -19
View File
@@ -8,7 +8,9 @@
<div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6">
<!-- Header -->
<div class="flex items-center justify-between mb-5">
<h3 class="text-xl font-semibold text-gray-900">Connect {{ provider?.label }}</h3>
<h3 class="text-xl font-semibold text-gray-900">
{{ existing ? 'Edit' : 'Connect' }} {{ provider?.label }}
</h3>
<button
@click="close"
aria-label="Close modal"
@@ -20,15 +22,34 @@
</button>
</div>
<!-- Loading existing config -->
<div v-if="loadingConfig" class="py-4 text-center text-sm text-gray-500">
Loading connection settings...
</div>
<!-- Form -->
<form @submit.prevent="submit">
<!-- Server URL -->
<div>
<form v-else @submit.prevent="submit">
<!-- Server base URL (hostname + path prefix) -->
<div v-if="provider?.key === 'nextcloud'">
<label class="block text-sm font-semibold text-gray-900 mb-1">Nextcloud Server URL</label>
<input
type="url"
v-model="serverBase"
placeholder="https://nextcloud.example.com"
class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
/>
<p class="text-xs text-gray-500 mt-1">
Your Nextcloud server address. The WebDAV path is constructed automatically.
</p>
</div>
<!-- Server URL (for plain WebDAV) -->
<div v-else>
<label class="block text-sm font-semibold text-gray-900 mb-1">Server URL</label>
<input
type="url"
v-model="serverUrl"
placeholder="https://nextcloud.example.com/remote.php/dav/files/username/"
placeholder="https://dav.example.com/remote.php/dav/files/username/"
class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
/>
<p class="text-xs text-gray-500 mt-1">Full WebDAV endpoint URL including username path segment.</p>
@@ -45,6 +66,36 @@
/>
</div>
<!-- Advanced section (Nextcloud custom WebDAV path) -->
<div v-if="provider?.key === 'nextcloud'" class="mt-3">
<button
type="button"
@click="showAdvanced = !showAdvanced"
class="text-xs text-indigo-600 hover:text-indigo-800 font-medium transition-colors flex items-center gap-1"
>
<svg
class="w-3 h-3 transition-transform"
:class="{ 'rotate-90': showAdvanced }"
fill="none" stroke="currentColor" viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
Advanced: custom WebDAV endpoint
</button>
<div v-if="showAdvanced" class="mt-2">
<label class="block text-xs font-semibold text-gray-700 mb-1">Custom WebDAV URL</label>
<input
type="url"
v-model="customEndpoint"
:placeholder="autoServerUrl || 'https://nextcloud.example.com/remote.php/dav/files/username/'"
class="block w-full rounded-lg px-3 py-2 text-xs border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
/>
<p class="text-xs text-gray-500 mt-1">
Override the automatically-constructed WebDAV path. Leave empty to use the default.
</p>
</div>
</div>
<!-- Auth method toggle -->
<div class="mt-4 mb-2">
<p class="text-sm font-semibold text-gray-900 mb-2">Authentication method</p>
@@ -90,8 +141,12 @@
type="password"
v-model="password"
autocomplete="current-password"
:placeholder="existing ? 'Leave empty to keep current password' : ''"
class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
/>
<p v-if="existing" class="text-xs text-gray-500 mt-1">
Password is not displayed for security. Enter a new password to change it, or leave empty to keep the current one.
</p>
</div>
<!-- Connection error -->
@@ -111,7 +166,7 @@
@click="close"
class="text-sm px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
>
Keep current settings
{{ existing ? 'Cancel' : 'Keep current settings' }}
</button>
<button
type="submit"
@@ -122,7 +177,7 @@
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg>
<span v-else>Connect {{ provider?.label }}</span>
<span v-else>{{ existing ? 'Save changes' : `Connect ${provider?.label}` }}</span>
</button>
</div>
</form>
@@ -131,7 +186,7 @@
</template>
<script setup>
import { ref, watch } from 'vue'
import { ref, computed, watch } from 'vue'
import * as api from '../../api/client.js'
const props = defineProps({
@@ -143,26 +198,93 @@ const props = defineProps({
type: Object,
default: null,
},
existing: {
type: Object,
default: null,
},
})
const emit = defineEmits(['close', 'connected'])
const serverUrl = ref('')
const serverBase = ref('') // Nextcloud: hostname only (https://example.com)
const serverUrl = ref('') // WebDAV: full URL including path
const username = ref('')
const authMethod = ref('app_password')
const password = ref('')
const saving = ref(false)
const connectError = ref('')
const showAdvanced = ref(false)
const customEndpoint = ref('')
const loadingConfig = ref(false)
// Reset form when modal opens
watch(() => props.show, (val) => {
if (val) {
serverUrl.value = ''
username.value = ''
authMethod.value = 'app_password'
password.value = ''
connectError.value = ''
saving.value = false
// Auto-constructed Nextcloud WebDAV URL (shown as placeholder in advanced mode)
const autoServerUrl = computed(() => {
if (!serverBase.value || !username.value) return ''
const base = serverBase.value.replace(/\/$/, '')
return `${base}/remote.php/dav/files/${encodeURIComponent(username.value)}/`
})
// The resolved server URL to send to the backend
const resolvedServerUrl = computed(() => {
if (props.provider?.key === 'nextcloud') {
// Use custom endpoint if provided, otherwise auto-construct from serverBase + username
if (showAdvanced.value && customEndpoint.value) {
return customEndpoint.value
}
return autoServerUrl.value
}
return serverUrl.value
})
// Reset / pre-populate form when modal opens or existing changes
watch(() => props.show, async (val) => {
if (!val) return
// Reset form
serverBase.value = ''
serverUrl.value = ''
username.value = ''
authMethod.value = 'app_password'
password.value = ''
connectError.value = ''
saving.value = false
showAdvanced.value = false
customEndpoint.value = ''
if (props.existing && props.existing.id) {
// Editing an existing connection — fetch non-secret config from backend
loadingConfig.value = true
try {
const config = await api.getConnectionConfig(props.existing.id)
username.value = config.connection_username ?? ''
if (props.provider?.key === 'nextcloud') {
const existingUrl = config.server_url ?? ''
// Extract base hostname from the stored server_url using the standard pattern
const match = existingUrl.match(/^(https?:\/\/[^/]+)(?:\/remote\.php\/dav\/files\/[^/]+\/?)?$/)
if (match && match[1]) {
serverBase.value = match[1]
// Compute what the auto-constructed URL would be with the extracted hostname + username
const autoUrl = `${match[1]}/remote.php/dav/files/${encodeURIComponent(username.value)}/`
// If stored URL differs from auto-constructed, the user used a custom endpoint
if (existingUrl && existingUrl !== autoUrl) {
showAdvanced.value = true
customEndpoint.value = existingUrl
}
} else if (existingUrl) {
// URL doesn't match standard pattern at all — treat entire URL as custom endpoint
showAdvanced.value = true
customEndpoint.value = existingUrl
}
} else {
// Plain WebDAV: use the full stored URL directly
serverUrl.value = config.server_url ?? ''
}
} catch {
// If we can't fetch config, allow user to fill in from scratch
} finally {
loadingConfig.value = false
}
}
})
@@ -183,7 +305,14 @@ async function submit() {
connectError.value = ''
saving.value = true
try {
await api.connectWebDav(props.provider.key, serverUrl.value, username.value, password.value)
const finalUrl = resolvedServerUrl.value
const finalPassword = password.value
// For edit mode with no new password, we still need to call the endpoint —
// the backend's connect_webdav upserts credentials. If password is empty on edit,
// the server will reject. We need to handle this: for now require password re-entry.
// (Future enhancement: PATCH endpoint that accepts partial updates)
await api.connectWebDav(props.provider.key, finalUrl, username.value, finalPassword)
emit('connected')
emit('close')
} catch (e) {