22373a0b87
- Replace all AppDrawer with MalioDrawer across 10 drawer components - Replace native <button> with MalioButton/MalioButtonIcon in all pages and components - Fix TimeTrackingExportDrawer: use MalioSelectCheckbox for multi-select filters - Add Malio design system colors (m-btn-*, m-disabled, m-surface) to tailwind.config.ts - Align toggle button heights with MalioButton (h-[40px]) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
123 lines
4.0 KiB
Vue
123 lines
4.0 KiB
Vue
<template>
|
|
<div>
|
|
<h2 class="text-lg font-bold text-neutral-900">{{ $t('zimbra.settings.title') }}</h2>
|
|
|
|
<form class="mt-6 max-w-lg space-y-4" @submit.prevent="handleSave">
|
|
<MalioInputText
|
|
v-model="form.serverUrl"
|
|
:label="$t('zimbra.settings.serverUrl')"
|
|
:placeholder="$t('zimbra.settings.serverUrlPlaceholder')"
|
|
input-class="w-full"
|
|
/>
|
|
<MalioInputText
|
|
v-model="form.username"
|
|
:label="$t('zimbra.settings.username')"
|
|
:placeholder="$t('zimbra.settings.usernamePlaceholder')"
|
|
input-class="w-full"
|
|
/>
|
|
<MalioInputText
|
|
v-model="form.calendarPath"
|
|
:label="$t('zimbra.settings.calendarPath')"
|
|
:placeholder="$t('zimbra.settings.calendarPathPlaceholder')"
|
|
input-class="w-full"
|
|
/>
|
|
<div>
|
|
<MalioInputText
|
|
v-model="form.password"
|
|
:label="$t('zimbra.settings.password')"
|
|
input-class="w-full"
|
|
type="password"
|
|
/>
|
|
<p v-if="hasPassword && !form.password" class="mt-1 text-xs text-green-600">
|
|
{{ $t('zimbra.settings.passwordConfigured') }}
|
|
</p>
|
|
</div>
|
|
<label class="flex cursor-pointer items-center gap-2">
|
|
<input v-model="form.enabled" type="checkbox" class="rounded border-neutral-300" />
|
|
<span class="text-sm">{{ $t('zimbra.settings.enabled') }}</span>
|
|
</label>
|
|
<div class="flex gap-3">
|
|
<MalioButton
|
|
:label="$t('zimbra.settings.save')"
|
|
button-class="w-auto px-4"
|
|
:disabled="isSaving"
|
|
@click="handleSave"
|
|
/>
|
|
<MalioButton
|
|
variant="tertiary"
|
|
:label="$t('zimbra.settings.testConnection')"
|
|
button-class="w-auto px-4"
|
|
:disabled="isTesting"
|
|
@click="handleTest"
|
|
/>
|
|
</div>
|
|
<p v-if="testResult !== null" class="text-sm font-medium" :class="testResult ? 'text-green-600' : 'text-red-600'">
|
|
{{ testResult ? $t('zimbra.settings.testSuccess') : $t('zimbra.settings.testFailed') }}
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useZimbraService } from '~/services/zimbra'
|
|
|
|
const { getSettings, saveSettings, testConnection } = useZimbraService()
|
|
|
|
const form = reactive({
|
|
serverUrl: '',
|
|
username: '',
|
|
calendarPath: '',
|
|
password: '',
|
|
enabled: false,
|
|
})
|
|
|
|
const hasPassword = ref(false)
|
|
const isSaving = ref(false)
|
|
const isTesting = ref(false)
|
|
const testResult = ref<boolean | null>(null)
|
|
|
|
async function loadSettings() {
|
|
const settings = await getSettings()
|
|
form.serverUrl = settings.serverUrl ?? ''
|
|
form.username = settings.username ?? ''
|
|
form.calendarPath = settings.calendarPath ?? ''
|
|
form.enabled = settings.enabled
|
|
hasPassword.value = settings.hasPassword
|
|
}
|
|
|
|
async function handleSave() {
|
|
isSaving.value = true
|
|
try {
|
|
const result = await saveSettings({
|
|
serverUrl: form.serverUrl.trim() || null,
|
|
username: form.username.trim() || null,
|
|
calendarPath: form.calendarPath.trim() || null,
|
|
password: form.password || null,
|
|
enabled: form.enabled,
|
|
})
|
|
hasPassword.value = result.hasPassword
|
|
form.password = ''
|
|
testResult.value = null
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
|
|
async function handleTest() {
|
|
isTesting.value = true
|
|
testResult.value = null
|
|
try {
|
|
const result = await testConnection()
|
|
testResult.value = result.success
|
|
} catch {
|
|
testResult.value = false
|
|
} finally {
|
|
isTesting.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadSettings()
|
|
})
|
|
</script>
|