curo1305
21 KiB
21 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 05-cloud-storage-backends | 07 | execute | 6 |
|
|
true |
|
|
Purpose: Complete the user-facing cloud storage management experience — connect, view status, and disconnect providers from SettingsView. Output: cloudConnections.js store, API client additions, SettingsView tab conversion, 3 settings tab components, CloudCredentialModal.
<execution_context> @/Users/nik/.claude/get-shit-done/workflows/execute-plan.md @/Users/nik/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/phases/05-cloud-storage-backends/05-CONTEXT.md @.planning/phases/05-cloud-storage-backends/05-UI-SPEC.md @.planning/phases/05-cloud-storage-backends/05-06-SUMMARY.md From frontend/src/api/client.js: async function request(path, options = {}) — handles auth headers, 401 retry All API functions call request(path, options) and return the JSON payloaddefineStore('folders', () => { const folders = ref([]) const loading = ref(false) const error = ref(null) async function fetchFolders() { loading.value=true; ... } return { folders, loading, error, fetchFolders, ... } })
Current SettingsView: flat layout with AI config section + Document Preferences section (pdf_open_mode radios) After conversion: 3-tab layout; "preferences" tab has pdf_open_mode; "ai" tab has AI config text; "cloud" tab is new
Tab strip: copy AdminView pattern verbatim (px-4 py-2 text-sm font-semibold border-b-2) Provider rows: divide-y divide-gray-100 inside bg-white border border-gray-200 rounded-xl p-6 Status badge: bg-green-100 text-green-700 (ACTIVE), bg-yellow-100 text-yellow-800 (REQUIRES_REAUTH), bg-red-100 text-red-700 (ERROR), bg-gray-100 text-gray-600 (not_connected) Action buttons per status: per UI-SPEC table OAuth success toast: fixed top-4 right-4 z-50; auto-dismiss 5000ms Error banner: mb-6 inline inside cloud tab content; persistent
Overlay: fixed inset-0 bg-gray-900 bg-opacity-40 z-40 flex items-center justify-center p-4 Panel: bg-white rounded-xl shadow-xl w-full max-w-md p-6 Fields: Server URL, Username, auth method radio (app_password default), Password/App password Cancel label: "Keep current settings" Save button label: "Connect {providerLabel}"
Task 1: Create cloudConnections Pinia store and API client additions frontend/src/stores/cloudConnections.js, frontend/src/api/client.js - frontend/src/stores/folders.js — Pinia store structure (defineStore composition API pattern) - frontend/src/api/client.js — existing API function patterns, request() helper - frontend/src/stores/auth.js — how stores handle loading/error state - .planning/phases/05-cloud-storage-backends/05-UI-SPEC.md — cloudConnections store state contract - frontend/src/stores/cloudConnections.js exports useCloudConnectionsStore with: connections (ref []), loading (ref false), error (ref null); fetchConnections(), disconnect(id), disconnectAll() actions - fetchConnections calls GET /api/cloud/connections; sets connections from response.items - disconnect(id) calls DELETE /api/cloud/connections/{id}; removes connection from connections array - disconnectAll() calls disconnect(id) for each connection serially; clears connections on completion - frontend/src/api/client.js gains: listCloudConnections(), disconnectCloud(id), connectWebDav(provider, serverUrl, username, password), updateDefaultStorage(backend) - API functions follow existing pattern: return request(...) or request(...).then(r => r) - GET /api/cloud/oauth/initiate/{provider} is a redirect — frontend navigates via window.location.href (not a fetch call); no API client function needed for OAuth initiation Create frontend/src/stores/cloudConnections.js following the folders.js defineStore composition pattern: import { defineStore } from 'pinia' import { ref } from 'vue' import * as api from '../api/client.js' export const useCloudConnectionsStore = defineStore('cloudConnections', () => {
const connections = ref([])
const loading = ref(false)
const error = ref(null)
async function fetchConnections() {
loading.value = true; error.value = null
try {
const data = await api.listCloudConnections()
connections.value = data.items ?? []
} catch (e) { error.value = e.message || 'Failed to load cloud connections' }
finally { loading.value = false }
}
async function disconnect(id) {
try {
await api.disconnectCloud(id)
connections.value = connections.value.filter(c => c.id !== id)
} catch (e) { throw e }
}
async function disconnectAll() {
const ids = connections.value.map(c => c.id)
for (const id of ids) await disconnect(id)
connections.value = []
}
return { connections, loading, error, fetchConnections, disconnect, disconnectAll }
})
Append to frontend/src/api/client.js (add after the existing adminListAuditLog function):
// ── Cloud Storage ─────────────────────────────────────────────────────────
export function listCloudConnections() {
return request('/api/cloud/connections')
}
export function disconnectCloud(id) {
return request(`/api/cloud/connections/${id}`, { method: 'DELETE' })
}
export function connectWebDav(provider, serverUrl, username, password) {
return request('/api/cloud/connections/webdav', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ provider, server_url: serverUrl, username, password }),
})
}
export function updateDefaultStorage(backend) {
return request('/api/users/me/default-storage', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ backend }),
})
}
SettingsPreferencesTab.vue:
- Extracted from current SettingsView: the pdf_open_mode radio section
- Maintains existing pdfOpenMode ref, watch, onMounted behavior
- Template: bg-white border border-gray-200 rounded-xl p-6 wrapper; same radios, save feedback text
SettingsAiTab.vue:
- Extracted from current SettingsView: the "AI configuration" section
- Template: bg-white border border-gray-200 rounded-xl p-6; same copy ("AI provider and model are managed by your administrator.")
SettingsCloudTab.vue:
- Imports useCloudConnectionsStore; calls fetchConnections() in onMounted
- PROVIDERS constant: [{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'}]
- For each provider: renders row with icon + provider name + StatusBadge + action buttons
- Status badge: inline pill span with classes per UI-SPEC status badge table
- Action buttons per status: exact labels from UI-SPEC Copywriting Contract
- "Connect {provider}" for OAuth providers: window.location.href = `/api/cloud/oauth/initiate/${provider.key}`
- "Connect {provider}" for WebDAV/Nextcloud: opens CloudCredentialModal with showModal=true, activePro=provider
- "Remove {provider}": calls store.disconnect(connection.id) with inline ConfirmBlock confirm pattern
- "Reconnect {provider}": same as "Connect {provider}"
- REQUIRES_REAUTH inline banner: per UI-SPEC Surface 2 exact markup (bg-yellow-50 border border-yellow-200)
- "Disconnect all cloud storage" link at bottom: only when any connection ACTIVE or ERROR
- Disconnect all ConfirmBlock: message, confirm label "Disconnect all", cancel "Keep all connected"
CloudCredentialModal.vue:
- Props: show (Boolean), provider (Object: {key, label})
- Emits: close, connected
- Fields: serverUrl, username, authMethod (ref 'app_password'), password
- On submit: calls api.connectWebDav(provider.key, serverUrl, username, password); emits 'connected'; closes
- On error: shows connectError message (per UI-SPEC Surface 4)
- Cancel label: "Keep current settings"
- Save label: "Connect {provider.label}"
- Escape key and overlay click close the modal (unless saving=true)
- All Tailwind classes and layout per UI-SPEC Surface 4 exact specifications
1. Create frontend/src/components/settings/SettingsPreferencesTab.vue:
Extract the pdf_open_mode section from current SettingsView.vue.
Keep the `<script setup>` with pdfOpenMode ref, watch, onMounted, api imports.
Wrap template in a section div with same bg-white border classes.
2. Create frontend/src/components/settings/SettingsAiTab.vue:
Extract the AI configuration section from current SettingsView.vue.
Static content (no script logic needed).
3. Create frontend/src/components/settings/SettingsCloudTab.vue:
Full provider list component per UI-SPEC Surface 2 specification.
Use useCloudConnectionsStore for connections data.
PROVIDERS array defined as a local constant.
statusBadgeClasses(status) computed helper mapping status to Tailwind classes.
connectionFor(providerKey) computed returning the matching connection or null.
All action button logic per behavior spec above.
4. Create frontend/src/components/cloud/CloudCredentialModal.vue:
Full modal per UI-SPEC Surface 4 specification.
Teleport to body or fixed positioning.
@keydown.escape.window handler to close modal.
Overlay click handler to close (when not saving).
5. Rewrite frontend/src/views/SettingsView.vue:
New 3-tab layout. Import and render the 3 tab components.
Read AdminView.vue tab strip implementation and copy the pattern verbatim.
Add oauthSuccessProvider and oauthError state + toast/banner markup per UI-SPEC Surface 3.
Preserve: p-8 max-w-3xl mx-auto wrapper, h2 heading, description paragraph.
Check existing components: look for ConfirmBlock in frontend/src/components/ui/ — if present, use it for disconnect confirmation dialogs. If not present, implement inline confirmation pattern.
<threat_model>
Trust Boundaries
| Boundary | Description |
|---|---|
| browser → /api/cloud/oauth/initiate | window.location.href redirect — OAuth tokens never touch JavaScript |
| ?cloud_error= query param → display | URL-decoded error message displayed to user; must not execute as HTML |
| WebDAV credentials → POST /api/cloud/connections/webdav | Credentials sent over HTTPS only; Vue template auto-escaping prevents XSS |
STRIDE Threat Register
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|---|---|---|---|---|
| T-05-07-01 | Information Disclosure | OAuth tokens in browser JavaScript | mitigate | OAuth initiation uses window.location.href redirect — FastAPI handles code exchange; tokens never land in frontend (D-03) |
| T-05-07-02 | XSS | ?cloud_error= decoded and displayed | mitigate | Vue template auto-escaping ({{ oauthError }}) prevents HTML injection; no v-html used |
| T-05-07-03 | Information Disclosure | WebDAV password in component state | accept | Password lives in ref() only during modal interaction; cleared on close/submit; never persisted in localStorage |
| T-05-07-04 | Information Disclosure | connection.credentials_enc in store | mitigate | CloudConnectionOut from API never includes credentials_enc; store.connections holds only safe fields |
| </threat_model> |
<success_criteria>
- cloudConnections.js store: connections, loading, error, fetchConnections, disconnect, disconnectAll
- client.js: listCloudConnections, disconnectCloud, connectWebDav, updateDefaultStorage added
- SettingsView.vue: 3-tab layout; OAuth success/error handling; tab strip matches AdminView pattern
- SettingsCloudTab.vue: all 4 providers; status badges; action buttons per status; REQUIRES_REAUTH banner; disconnect all
- CloudCredentialModal.vue: server URL + username + auth method toggle + password; correct cancel/save labels
- Vite build exits 0 </success_criteria>