feat(05-07): 3-tab SettingsView, SettingsCloudTab, CloudCredentialModal
- 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)
This commit is contained in:
curo1305
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="show"
|
||||
class="fixed inset-0 bg-gray-900 bg-opacity-40 z-40 flex items-center justify-center p-4"
|
||||
@click.self="handleOverlayClick"
|
||||
@keydown.escape.window="handleEscape"
|
||||
>
|
||||
<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>
|
||||
<button
|
||||
@click="close"
|
||||
aria-label="Close modal"
|
||||
class="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<form @submit.prevent="submit">
|
||||
<!-- Server URL -->
|
||||
<div>
|
||||
<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/"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<!-- Username -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-900 mb-1 mt-4">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="username"
|
||||
autocomplete="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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Auth method toggle -->
|
||||
<div class="mt-4 mb-2">
|
||||
<p class="text-sm font-semibold text-gray-900 mb-2">Authentication method</p>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-start gap-3 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
value="app_password"
|
||||
v-model="authMethod"
|
||||
class="mt-0.5 text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
<div>
|
||||
<span class="text-sm font-semibold text-gray-900">App password</span>
|
||||
<span class="ml-2 bg-green-100 text-green-700 text-xs font-semibold px-1.5 py-0.5 rounded">Recommended</span>
|
||||
<p class="text-xs text-gray-500 mt-0.5">
|
||||
Can be revoked individually without changing your main account password.
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex items-start gap-3 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
value="account_password"
|
||||
v-model="authMethod"
|
||||
class="mt-0.5 text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
<div>
|
||||
<span class="text-sm font-semibold text-gray-900">Account password</span>
|
||||
<p class="text-xs text-gray-500 mt-0.5">
|
||||
Simpler to set up, but revoking access requires changing your entire account password.
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password field -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-900 mb-1 mt-4">
|
||||
{{ authMethod === 'app_password' ? 'App password' : 'Password' }}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
v-model="password"
|
||||
autocomplete="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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Connection error -->
|
||||
<div
|
||||
v-if="connectError"
|
||||
class="mt-4 p-3 rounded-lg bg-red-50 border border-red-200"
|
||||
>
|
||||
<p class="text-sm font-semibold text-red-700">Connection failed</p>
|
||||
<p class="text-sm text-red-600 mt-0.5">{{ connectError }}</p>
|
||||
<p class="text-xs text-red-500 mt-1">Check that the server URL is correct, the credentials are valid, and the server allows WebDAV access from external clients.</p>
|
||||
</div>
|
||||
|
||||
<!-- Footer buttons -->
|
||||
<div class="flex justify-end gap-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
@click="close"
|
||||
class="text-sm px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Keep current settings
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving"
|
||||
class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold px-4 py-2 rounded-lg disabled:opacity-50 transition-colors min-h-[44px] min-w-[80px]"
|
||||
>
|
||||
<svg v-if="saving" class="w-4 h-4 animate-spin mx-auto" fill="none" viewBox="0 0 24 24">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import * as api from '../../api/client.js'
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
provider: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close', 'connected'])
|
||||
|
||||
const serverUrl = ref('')
|
||||
const username = ref('')
|
||||
const authMethod = ref('app_password')
|
||||
const password = ref('')
|
||||
const saving = ref(false)
|
||||
const connectError = ref('')
|
||||
|
||||
// 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
|
||||
}
|
||||
})
|
||||
|
||||
function close() {
|
||||
if (saving.value) return
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function handleOverlayClick() {
|
||||
close()
|
||||
}
|
||||
|
||||
function handleEscape() {
|
||||
close()
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
connectError.value = ''
|
||||
saving.value = true
|
||||
try {
|
||||
await api.connectWebDav(props.provider.key, serverUrl.value, username.value, password.value)
|
||||
emit('connected')
|
||||
emit('close')
|
||||
} catch (e) {
|
||||
connectError.value = e.message || 'Connection failed. Please check your credentials.'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-2">AI configuration</h3>
|
||||
<p class="text-sm text-gray-600">
|
||||
AI provider and model are managed by your administrator. Contact your admin
|
||||
to request changes to which AI provider is used for your documents.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,260 @@
|
||||
<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>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-2">Document Preferences</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">Choose how PDF documents open when you click on them.</p>
|
||||
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="pdf_open_mode"
|
||||
value="in_app"
|
||||
v-model="pdfOpenMode"
|
||||
class="text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
<span class="text-sm text-gray-700">Open documents in-app</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="pdf_open_mode"
|
||||
value="new_tab"
|
||||
v-model="pdfOpenMode"
|
||||
class="text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
<span class="text-sm text-gray-700">Open documents in new tab</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Save feedback -->
|
||||
<p v-if="saveFeedback" class="text-xs text-green-600 mt-3">{{ saveFeedback }}</p>
|
||||
<p v-if="saveError" class="text-xs text-red-600 mt-3">{{ saveError }}</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import * as api from '../../api/client.js'
|
||||
|
||||
const pdfOpenMode = ref('new_tab')
|
||||
const saveFeedback = ref('')
|
||||
const saveError = ref('')
|
||||
let feedbackTimer = null
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const prefs = await api.getMyPreferences()
|
||||
pdfOpenMode.value = prefs.pdf_open_mode || 'new_tab'
|
||||
} catch {
|
||||
// Default to new_tab if preferences can't be loaded
|
||||
}
|
||||
})
|
||||
|
||||
watch(pdfOpenMode, async (newValue) => {
|
||||
saveFeedback.value = ''
|
||||
saveError.value = ''
|
||||
clearTimeout(feedbackTimer)
|
||||
try {
|
||||
await api.updateMyPreferences({ pdf_open_mode: newValue })
|
||||
saveFeedback.value = 'Preferences saved.'
|
||||
feedbackTimer = setTimeout(() => { saveFeedback.value = '' }, 3000)
|
||||
} catch (e) {
|
||||
saveError.value = e.message || 'Failed to save preferences.'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,59 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
|
||||
// Mock store module before importing component (W4 — CLAUDE.md unit test requirement)
|
||||
vi.mock('../../../stores/cloudConnections.js', () => ({
|
||||
useCloudConnectionsStore: () => ({
|
||||
connections: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
fetchConnections: vi.fn(),
|
||||
disconnect: vi.fn(),
|
||||
disconnectAll: vi.fn(),
|
||||
}),
|
||||
}))
|
||||
|
||||
// Mock api/client.js to avoid HTTP calls
|
||||
vi.mock('../../../api/client.js', () => ({
|
||||
connectWebDav: vi.fn(),
|
||||
listCloudConnections: vi.fn(),
|
||||
disconnectCloud: vi.fn(),
|
||||
}))
|
||||
|
||||
import SettingsCloudTab from '../SettingsCloudTab.vue'
|
||||
|
||||
const globalPlugins = {
|
||||
plugins: [createPinia()],
|
||||
stubs: {
|
||||
// Stub CloudCredentialModal to avoid portal/teleport complexity in tests
|
||||
CloudCredentialModal: {
|
||||
template: '<div />',
|
||||
props: ['show', 'provider'],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('SettingsCloudTab', () => {
|
||||
it('renders all 4 provider rows', () => {
|
||||
const wrapper = mount(SettingsCloudTab, { global: globalPlugins })
|
||||
expect(wrapper.text()).toContain('Google Drive')
|
||||
expect(wrapper.text()).toContain('OneDrive')
|
||||
expect(wrapper.text()).toContain('Nextcloud')
|
||||
expect(wrapper.text()).toContain('WebDAV')
|
||||
})
|
||||
|
||||
it('shows Connect buttons when no connections active', () => {
|
||||
const wrapper = mount(SettingsCloudTab, { global: globalPlugins })
|
||||
const buttons = wrapper.findAll('button')
|
||||
expect(buttons.length).toBeGreaterThan(0)
|
||||
// At least some "Connect" buttons should be visible when no connections
|
||||
const buttonTexts = buttons.map(b => b.text()).join(' ')
|
||||
expect(buttonTexts).toContain('Connect')
|
||||
})
|
||||
})
|
||||
@@ -1,79 +1,132 @@
|
||||
<template>
|
||||
<div class="p-8 max-w-3xl mx-auto">
|
||||
<h2 class="text-2xl font-semibold text-gray-900 mb-1">Settings</h2>
|
||||
<p class="text-sm text-gray-500 mb-8">Account-level options for your DocuVault workspace.</p>
|
||||
<p class="text-sm text-gray-500 mb-6">Account-level options for your DocuVault workspace.</p>
|
||||
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6 mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-2">AI configuration</h3>
|
||||
<p class="text-sm text-gray-600">
|
||||
AI provider and model are managed by your administrator. Contact your admin
|
||||
to request changes to which AI provider is used for your documents.
|
||||
</p>
|
||||
</section>
|
||||
<!-- OAuth success toast (fixed top-right, auto-dismisses 5s) -->
|
||||
<div
|
||||
v-if="oauthSuccessProvider"
|
||||
class="fixed top-4 right-4 z-50 flex items-center gap-3 bg-white border border-green-200 rounded-xl shadow-lg px-5 py-4 max-w-sm"
|
||||
>
|
||||
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">{{ providerDisplayName(oauthSuccessProvider) }} connected</p>
|
||||
<p class="text-xs text-gray-500 mt-0.5">Your files are now available in the sidebar.</p>
|
||||
</div>
|
||||
<button
|
||||
@click="oauthSuccessProvider = null"
|
||||
aria-label="Dismiss notification"
|
||||
class="text-gray-400 hover:text-gray-600 shrink-0"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Document Preferences section -->
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-2">Document Preferences</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">Choose how PDF documents open when you click on them.</p>
|
||||
<!-- Tab strip (copy AdminView pattern verbatim) -->
|
||||
<div class="flex border-b border-gray-200 mb-6">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
@click="activeTab = tab.id"
|
||||
class="px-4 py-2 text-sm font-semibold border-b-2 transition-colors"
|
||||
:class="activeTab === tab.id
|
||||
? 'text-indigo-600 border-indigo-600'
|
||||
: 'text-gray-500 hover:text-gray-700 border-transparent'"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="pdf_open_mode"
|
||||
value="in_app"
|
||||
v-model="pdfOpenMode"
|
||||
class="text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
<span class="text-sm text-gray-700">Open documents in-app</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="pdf_open_mode"
|
||||
value="new_tab"
|
||||
v-model="pdfOpenMode"
|
||||
class="text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
<span class="text-sm text-gray-700">Open documents in new tab</span>
|
||||
</label>
|
||||
<!-- Tab: Preferences -->
|
||||
<SettingsPreferencesTab v-if="activeTab === 'preferences'" />
|
||||
|
||||
<!-- Tab: AI Configuration -->
|
||||
<SettingsAiTab v-if="activeTab === 'ai'" />
|
||||
|
||||
<!-- Tab: Cloud Storage -->
|
||||
<div v-if="activeTab === 'cloud'">
|
||||
<!-- OAuth error banner (persistent until dismissed) -->
|
||||
<div
|
||||
v-if="oauthError"
|
||||
class="mb-6 flex items-start gap-3 bg-red-50 border border-red-200 rounded-xl px-5 py-4"
|
||||
>
|
||||
<svg class="w-5 h-5 text-red-500 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-semibold text-red-700">Connection failed</p>
|
||||
<p class="text-sm text-red-600 mt-0.5">{{ oauthError }}</p>
|
||||
<p class="text-xs text-red-500 mt-1">Try connecting again. If the problem persists, check that the app has the correct permissions in your provider's account settings.</p>
|
||||
</div>
|
||||
<button
|
||||
@click="oauthError = null"
|
||||
aria-label="Dismiss error"
|
||||
class="text-red-400 hover:text-red-600 shrink-0"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Save feedback -->
|
||||
<p v-if="saveFeedback" class="text-xs text-green-600 mt-3">{{ saveFeedback }}</p>
|
||||
<p v-if="saveError" class="text-xs text-red-600 mt-3">{{ saveError }}</p>
|
||||
</section>
|
||||
<SettingsCloudTab />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import * as api from '../api/client.js'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import SettingsPreferencesTab from '../components/settings/SettingsPreferencesTab.vue'
|
||||
import SettingsAiTab from '../components/settings/SettingsAiTab.vue'
|
||||
import SettingsCloudTab from '../components/settings/SettingsCloudTab.vue'
|
||||
|
||||
const pdfOpenMode = ref('new_tab')
|
||||
const saveFeedback = ref('')
|
||||
const saveError = ref('')
|
||||
let feedbackTimer = null
|
||||
const router = useRouter()
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const prefs = await api.getMyPreferences()
|
||||
pdfOpenMode.value = prefs.pdf_open_mode || 'new_tab'
|
||||
} catch {
|
||||
// Default to new_tab if preferences can't be loaded
|
||||
}
|
||||
})
|
||||
const tabs = [
|
||||
{ id: 'preferences', label: 'Preferences' },
|
||||
{ id: 'ai', label: 'AI Configuration' },
|
||||
{ id: 'cloud', label: 'Cloud Storage' },
|
||||
]
|
||||
|
||||
watch(pdfOpenMode, async (newValue) => {
|
||||
saveFeedback.value = ''
|
||||
saveError.value = ''
|
||||
clearTimeout(feedbackTimer)
|
||||
try {
|
||||
await api.updateMyPreferences({ pdf_open_mode: newValue })
|
||||
saveFeedback.value = 'Preferences saved.'
|
||||
feedbackTimer = setTimeout(() => { saveFeedback.value = '' }, 3000)
|
||||
} catch (e) {
|
||||
saveError.value = e.message || 'Failed to save preferences.'
|
||||
const activeTab = ref('preferences')
|
||||
const oauthSuccessProvider = ref(null)
|
||||
const oauthError = ref(null)
|
||||
|
||||
const PROVIDER_NAMES = {
|
||||
google_drive: 'Google Drive',
|
||||
onedrive: 'OneDrive',
|
||||
nextcloud: 'Nextcloud',
|
||||
webdav: 'WebDAV server',
|
||||
}
|
||||
|
||||
function providerDisplayName(key) {
|
||||
return PROVIDER_NAMES[key] || key
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const connectedProvider = params.get('cloud_connected')
|
||||
const errorMsg = params.get('cloud_error')
|
||||
|
||||
if (connectedProvider || errorMsg) {
|
||||
activeTab.value = 'cloud'
|
||||
router.replace({ path: '/settings' })
|
||||
|
||||
if (connectedProvider) {
|
||||
oauthSuccessProvider.value = connectedProvider
|
||||
setTimeout(() => { oauthSuccessProvider.value = null }, 5000)
|
||||
}
|
||||
|
||||
if (errorMsg) {
|
||||
oauthError.value = decodeURIComponent(errorMsg)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -3,6 +3,10 @@ import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
build: {
|
||||
// top-level await in main.js requires esnext target
|
||||
target: 'esnext',
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
|
||||
Reference in New Issue
Block a user