Lesstime/frontend/components/admin/AdminShareTab.vue

<template>
    <div>
        <h2 class="text-lg font-bold text-neutral-900">{{ $t('adminShare.title') }}</h2>

        <form class="mt-6 max-w-lg space-y-4" @submit.prevent="handleSave">
            <MalioInputText
                v-model="form.host"
                :label="$t('adminShare.host')"
                :placeholder="$t('adminShare.hostPlaceholder')"
                input-class="w-full"
            />
            <MalioInputText
                v-model="form.shareName"
                :label="$t('adminShare.shareName')"
                :placeholder="$t('adminShare.shareNamePlaceholder')"
                input-class="w-full"
            />
            <MalioInputText
                v-model="form.basePath"
                :label="$t('adminShare.basePath')"
                :placeholder="$t('adminShare.basePathPlaceholder')"
                input-class="w-full"
            />
            <MalioInputText
                v-model="form.domain"
                :label="$t('adminShare.domain')"
                :placeholder="$t('adminShare.domainPlaceholder')"
                input-class="w-full"
            />
            <MalioInputText
                v-model="form.username"
                :label="$t('adminShare.username')"
                :placeholder="$t('adminShare.usernamePlaceholder')"
                input-class="w-full"
            />
            <div>
                <MalioInputPassword
                    v-model="form.password"
                    :label="$t('adminShare.password')"
                    input-class="w-full"
                />
                <p v-if="hasPassword && !form.password" class="mt-1 text-xs text-green-600">
                    {{ $t('adminShare.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('adminShare.enabled') }}</span>
            </label>
            <div class="flex gap-3">
                <MalioButton
                    :label="$t('adminShare.save')"
                    button-class="w-auto px-4"
                    :disabled="isSaving"
                    @click="handleSave"
                />
                <MalioButton
                    variant="tertiary"
                    :label="$t('adminShare.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('adminShare.testSuccess') : (testMessage ?? $t('adminShare.testFailed')) }}
            </p>
        </form>
    </div>
</template>

<script setup lang="ts">
import { useShareSettingsService } from '~/services/share-settings'

const { getSettings, saveSettings, testConnection } = useShareSettingsService()

const form = reactive({
    host: '',
    shareName: '',
    basePath: '',
    domain: '',
    username: '',
    password: '',
    enabled: false,
})

const hasPassword = ref(false)
const isSaving = ref(false)
const isTesting = ref(false)
const testResult = ref<boolean | null>(null)
const testMessage = ref<string | null>(null)

async function loadSettings() {
    const settings = await getSettings()
    form.host = settings.host ?? ''
    form.shareName = settings.shareName ?? ''
    form.basePath = settings.basePath ?? ''
    form.domain = settings.domain ?? ''
    form.username = settings.username ?? ''
    form.enabled = settings.enabled
    hasPassword.value = settings.hasPassword
}

async function handleSave() {
    isSaving.value = true
    try {
        const result = await saveSettings({
            host: form.host.trim() || null,
            shareName: form.shareName.trim() || null,
            basePath: form.basePath.trim() || null,
            domain: form.domain.trim() || null,
            username: form.username.trim() || null,
            password: form.password || null,
            enabled: form.enabled,
        })
        hasPassword.value = result.hasPassword
        form.password = ''
        testResult.value = null
        testMessage.value = null
    } finally {
        isSaving.value = false
    }
}

async function handleTest() {
    isTesting.value = true
    testResult.value = null
    testMessage.value = null
    try {
        const result = await testConnection()
        testResult.value = result.success
        testMessage.value = result.message
    } catch {
        testResult.value = false
        testMessage.value = null
    } finally {
        isTesting.value = false
    }
}

onMounted(() => {
    loadSettings()
})
</script>