mirror of https://github.com/wg-easy/wg-easy
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.4 KiB
83 lines
2.4 KiB
<template>
|
|
<div class="flex flex-col">
|
|
<div v-for="(feature, key) in featuresData" :key="key" class="space-y-2">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-neutral-200">
|
|
{{ feature.name }}
|
|
</h3>
|
|
<p class="text-sm text-gray-500 dark:text-neutral-300">
|
|
{{ feature.description }}
|
|
</p>
|
|
</div>
|
|
<SwitchRoot
|
|
:checked="feature.enabled"
|
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-red-800 focus:ring-offset-2"
|
|
:class="feature.enabled ? 'bg-red-800' : 'bg-gray-200'"
|
|
@update:checked="toggleFeature(key)"
|
|
>
|
|
<SwitchThumb
|
|
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
|
:class="feature.enabled ? 'translate-x-6' : 'translate-x-1'"
|
|
/>
|
|
</SwitchRoot>
|
|
</div>
|
|
</div>
|
|
<BaseButton class="self-end" @click="submit">Save</BaseButton>
|
|
<UiToast
|
|
v-model:open="open"
|
|
title="Saved successfully"
|
|
content="Features saved successfully"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const globalStore = useGlobalStore();
|
|
const open = ref(false);
|
|
|
|
type ExtendedFeatures = {
|
|
[K in keyof (typeof globalStore)['features']]: {
|
|
name: string;
|
|
description: string;
|
|
enabled: boolean;
|
|
};
|
|
};
|
|
|
|
const featuresData = ref({
|
|
sortClients: {
|
|
name: 'Sort Clients',
|
|
description: 'Be able to sort Clients by Name',
|
|
enabled: globalStore.features.sortClients.enabled,
|
|
},
|
|
oneTimeLinks: {
|
|
name: 'One Time Links',
|
|
description: 'Be able to generate One Time Link to download Config',
|
|
enabled: globalStore.features.oneTimeLinks.enabled,
|
|
},
|
|
clientExpiration: {
|
|
name: 'Client Expiration',
|
|
description: 'Be able to set Date when Client will be disabled',
|
|
enabled: globalStore.features.clientExpiration.enabled,
|
|
},
|
|
} satisfies ExtendedFeatures);
|
|
|
|
function toggleFeature(key: keyof ExtendedFeatures) {
|
|
const feat = featuresData.value[key];
|
|
if (!feat) {
|
|
return;
|
|
}
|
|
feat.enabled = !feat.enabled;
|
|
}
|
|
|
|
async function submit() {
|
|
const response = await $fetch('/api/admin/features', {
|
|
method: 'post',
|
|
body: { features: featuresData.value },
|
|
});
|
|
if (response.success) {
|
|
open.value = true;
|
|
}
|
|
globalStore.fetchFeatures();
|
|
}
|
|
</script>
|
|
|