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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user