mirror of https://github.com/wg-easy/wg-easy
Bernd Storath
9 months ago
24 changed files with 74 additions and 246 deletions
@ -0,0 +1,24 @@ |
|||
<template> |
|||
<div> |
|||
<FormGroup> |
|||
<FormHeading>Connection</FormHeading> |
|||
<FormTextField id="host" label="Host" /> |
|||
<FormTextField id="port" label="Port" /> |
|||
</FormGroup> |
|||
<FormGroup> |
|||
<FormHeading>Allowed IPs</FormHeading> |
|||
<FormArrayField /> |
|||
</FormGroup> |
|||
<FormGroup> |
|||
<FormHeading>DNS</FormHeading> |
|||
<FormArrayField /> |
|||
</FormGroup> |
|||
<FormGroup> |
|||
<FormHeading>Advanced</FormHeading> |
|||
<FormNumberField id="mtu" label="MTU" /> |
|||
<FormNumberField id="keepalive" label="Persistent Keepalive" /> |
|||
</FormGroup> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"></script> |
|||
@ -1,83 +0,0 @@ |
|||
<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> |
|||
@ -1,10 +1,9 @@ |
|||
<template> |
|||
<div> |
|||
This is the Admin Panel. Your are running wg-easy |
|||
{{ globalStore.currentRelease }} |
|||
<FormGroup> |
|||
<FormNumberField id="session" label="Session Timeout" /> |
|||
</FormGroup> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
const globalStore = useGlobalStore(); |
|||
</script> |
|||
<script setup lang="ts"></script> |
|||
|
|||
@ -1,3 +1,19 @@ |
|||
<template><div></div></template> |
|||
<template> |
|||
<div> |
|||
<FormGroup> |
|||
<FormHeading>Interface Settings</FormHeading> |
|||
<FormNumberField id="mtu" label="MTU" /> |
|||
<FormNumberField id="port" label="Port" /> |
|||
<FormTextField id="device" label="Device" /> |
|||
</FormGroup> |
|||
<FormGroup> |
|||
<FormHeading>Scripts</FormHeading> |
|||
<FormTextField id="mtu" label="PreUp" /> |
|||
<FormTextField id="port" label="PostUp" /> |
|||
<FormTextField id="device" label="PreDown" /> |
|||
<FormTextField id="device" label="PostDown" /> |
|||
</FormGroup> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"></script> |
|||
|
|||
@ -1,8 +0,0 @@ |
|||
export default defineEventHandler(async (event) => { |
|||
const { features } = await readValidatedBody( |
|||
event, |
|||
validateZod(featuresType) |
|||
); |
|||
await Database.system.updateFeatures(features); |
|||
return { success: true }; |
|||
}); |
|||
@ -1,4 +0,0 @@ |
|||
export default defineEventHandler(async () => { |
|||
const system = await Database.system.get(); |
|||
return system.features; |
|||
}); |
|||
Loading…
Reference in new issue