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