mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 07:48:37 +01:00
new selfhosted version
This commit is contained in:
antonio
115
dashboard/components/shields/Addresses.vue
Normal file
115
dashboard/components/shields/Addresses.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<script lang="ts" setup>
|
||||
import { DialogShieldsAddAddress, DialogShieldsDeleteAddress } from '#components';
|
||||
import { TrashIcon } from 'lucide-vue-next';
|
||||
|
||||
const { data: addresses, refresh: addressesRefresh, status: addressesStatus } = useAuthFetch('/api/shields/addresses/list');
|
||||
|
||||
const dialog = useDialog();
|
||||
|
||||
function showDeleteAddressDialog(address: string) {
|
||||
dialog.open({
|
||||
body: DialogShieldsDeleteAddress,
|
||||
props: { domain: address },
|
||||
async onSuccess(_, close) {
|
||||
await deleteAddress(address);
|
||||
close();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function deleteAddress(address: string) {
|
||||
await useCatch({
|
||||
toast: true,
|
||||
toastTitle: 'Error deleting domain',
|
||||
async action() {
|
||||
await useAuthFetchSync('/api/shields/addresses/delete', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: { address }
|
||||
})
|
||||
},
|
||||
onSuccess(_, showToast) {
|
||||
showToast('Address deleted', { description: 'Address deleted successfully', position: 'top-right' });
|
||||
addressesRefresh();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function showAddAddressDialog() {
|
||||
dialog.open({
|
||||
body: DialogShieldsAddAddress,
|
||||
async onSuccess(data, close) {
|
||||
await addAddress(data);
|
||||
close();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function addAddress(data: { address: string, description: string }) {
|
||||
await useCatch({
|
||||
toast: true,
|
||||
toastTitle: 'Error adding domain',
|
||||
async action() {
|
||||
await useAuthFetchSync('/api/shields/addresses/add', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: data
|
||||
})
|
||||
},
|
||||
onSuccess(_, showToast) {
|
||||
showToast('Address added', { description: 'Address added successfully', position: 'top-right' });
|
||||
addressesRefresh();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle> IP Block List </CardTitle>
|
||||
<CardDescription> Reject incoming traffic from specific IP addresses. </CardDescription>
|
||||
<CardAction>
|
||||
<Button @click="showAddAddressDialog"> Add IP address </Button>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
||||
<div v-if="!addresses || addressesStatus !== 'success'" class="flex justify-center my-8">
|
||||
<Loader></Loader>
|
||||
</div>
|
||||
|
||||
<div v-if="addresses && addresses.length == 0 && addressesStatus === 'success'"
|
||||
class="flex flex-col items-center mt-8 text-sm">
|
||||
<div class="poppins"> No IP address rules configured for this project. </div>
|
||||
<div class="font-bold poppins"> Traffic from all IP addresses is currently accepted. </div>
|
||||
</div>
|
||||
|
||||
<Table v-if="addresses && addresses.length > 0 && addressesStatus === 'success'">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead class="w-[20%]"> Address </TableHead>
|
||||
<TableHead class="w-full"> Description </TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow v-for="item in addresses">
|
||||
<TableCell class="font-medium">
|
||||
{{ item.address }}
|
||||
</TableCell>
|
||||
<TableCell class="font-medium">
|
||||
{{ item.description ?? 'No description' }}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TrashIcon @click="showDeleteAddressDialog(item.address)" class="size-4 cursor-pointer">
|
||||
</TrashIcon>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
52
dashboard/components/shields/Bots.vue
Normal file
52
dashboard/components/shields/Bots.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<script lang="ts" setup>
|
||||
import { toast } from 'vue-sonner'
|
||||
import { Bot } from 'lucide-vue-next'
|
||||
const { data: botOptions, refresh: botOptionsRefresh, status: botOptionsStatus } = useAuthFetch('/api/shields/bots/options');
|
||||
|
||||
watch(botOptions, () => {
|
||||
if (!botOptions.value) return;
|
||||
currentValue.value = botOptions.value.block;
|
||||
})
|
||||
|
||||
const currentValue = ref<boolean>(true);
|
||||
|
||||
function onSwitchChange(newValue: boolean) {
|
||||
useAuthFetchSync('/api/shields/bots/update_options', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: { block: currentValue.value }
|
||||
}).then(() => {
|
||||
toast('Bot protection', { description: `Bot traffic has been set to ${currentValue.value === true ? 'Active' : 'Inactive'}.`, position: 'top-right' });
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="flex gap-4 items-center">
|
||||
<Switch v-if="botOptionsStatus === 'success' && botOptions" v-model="currentValue"
|
||||
@update:modelValue="onSwitchChange" />
|
||||
<Loader v-else class="!size-8"></Loader>
|
||||
Block bot traffic
|
||||
<Badge :class="currentValue ? 'border-green-400 bg-green-300 text-green-800':'border-red-400 bg-red-300 text-red-800'">{{ currentValue ? 'Active' : 'Inactive' }}</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Automatically block unwanted bot and crawler traffic to protect your site from
|
||||
spam, scrapers, and unnecessary server load.
|
||||
</CardDescription>
|
||||
<CardAction>
|
||||
<NuxtLink to="bots.txt" target="_blank">
|
||||
<Button variant="outline">
|
||||
<Bot class="size-4" />
|
||||
Show bot list
|
||||
</Button>
|
||||
</NuxtLink>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="flex gap-2 items-center">
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
111
dashboard/components/shields/Domains.vue
Normal file
111
dashboard/components/shields/Domains.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<script lang="ts" setup>
|
||||
import { DialogShieldsAddDomain, DialogShieldsDeleteDomain } from '#components';
|
||||
import { TrashIcon } from 'lucide-vue-next';
|
||||
|
||||
const { data: domains, refresh: domainsRefresh, status: domainsStatus } = useAuthFetch('/api/shields/domains/list');
|
||||
|
||||
const dialog = useDialog();
|
||||
|
||||
function showDeleteDomainDialog(domain: string) {
|
||||
dialog.open({
|
||||
body: DialogShieldsDeleteDomain,
|
||||
props: { domain },
|
||||
async onSuccess(_, close) {
|
||||
await deleteDomain(domain);
|
||||
close();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function deleteDomain(domain: string) {
|
||||
await useCatch({
|
||||
toast: true,
|
||||
toastTitle: 'Error deleting domain',
|
||||
async action() {
|
||||
await useAuthFetchSync('/api/shields/domains/delete', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: { domain }
|
||||
})
|
||||
},
|
||||
onSuccess(_, showToast) {
|
||||
showToast('Domain deleted', { description: 'Domain deleted successfully', position: 'top-right' });
|
||||
domainsRefresh();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function showAddDomainDialog() {
|
||||
dialog.open({
|
||||
body: DialogShieldsAddDomain,
|
||||
async onSuccess(data, close) {
|
||||
await addDomain(data);
|
||||
close();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function addDomain(domain: string) {
|
||||
await useCatch({
|
||||
toast: true,
|
||||
toastTitle: 'Error adding domain',
|
||||
async action() {
|
||||
await useAuthFetchSync('/api/shields/domains/add', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: { domain }
|
||||
})
|
||||
},
|
||||
onSuccess(_, showToast) {
|
||||
showToast('Domain added', { description: 'Domain added successfully', position: 'top-right' });
|
||||
domainsRefresh();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle> Domains allow list </CardTitle>
|
||||
<CardDescription> Accept incoming traffic only from familiar domains. </CardDescription>
|
||||
<CardAction>
|
||||
<Button @click="showAddDomainDialog"> Add domain </Button>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
||||
<div v-if="!domains || domainsStatus !== 'success'" class="flex justify-center my-8">
|
||||
<Loader></Loader>
|
||||
</div>
|
||||
|
||||
<div v-if="domains && domains.length == 0 && domainsStatus === 'success'"
|
||||
class="flex flex-col items-center mt-8 text-sm">
|
||||
<div class="poppins"> No domain rules configured for this project. </div>
|
||||
<div class="font-bold poppins"> Traffic from all domains is currently accepted. </div>
|
||||
</div>
|
||||
|
||||
<Table v-if="domains && domains.length > 0 && domainsStatus === 'success'">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead class="w-full"> Domain </TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow v-for="domain in domains">
|
||||
<TableCell class="font-medium">
|
||||
{{ domain }}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TrashIcon @click="showDeleteDomainDialog(domain)" class="size-4 cursor-pointer">
|
||||
</TrashIcon>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
Reference in New Issue
Block a user