Lesstime/frontend/components/admin/AdminZimbraTab.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>
                <MalioInputPassword
                    v-model="form.password"
                    :label="$t('zimbra.settings.password')"
                    input-class="w-full"
                />
                <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 '~/modules/integration/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>