new selfhosted version

dashboard/components/dialog/shields/AddAddress.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+
+const address = ref<string>('');
+const description = ref<string>('');
+const canAdd = computed(() => address.value.length > 0);
+const loading = ref<boolean>(false);
+
+const emits = defineEmits<{ (event: 'confirm', data: { address: string, description: string }): void }>();
+
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <Label class="text-base"> Add IP to Block List</Label>
+
+        <Label> IP Address </Label>
+        <Input v-model="address"></Input>
+        <Label> Description </Label>
+        <Input v-model="description"></Input>
+
+        <div class="text-sm text-muted-foreground">
+            Once added, we will start rejecting traffic from this IP within a few minutes.
+        </div>
+
+        <Button v-if="loading" disabled>
+            <Loader class="!size-6"></Loader>
+        </Button>
+
+        <Button v-else @click="emits('confirm', { address, description }), loading = true" :disabled="!canAdd">
+            Add IP Address
+        </Button>
+    </div>
+</template>

dashboard/components/dialog/shields/AddDomain.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+
+const domain = ref<string>('');
+const canAdd = computed(() => domain.value.length > 0);
+const loading = ref<boolean>(false);
+
+const emits = defineEmits<{ (event: 'confirm', domain: string): void }>();
+
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <Label class="text-base"> Add Domain to Allow List</Label>
+        <Input v-model="domain"></Input>
+        <div class="text-sm text-muted-foreground">
+            You can use a wildcard (*) to match multiple hostnames.
+            For example, *.domain.com will only record traffic on the main domain and all the subdomains.
+        </div>
+        <div class="text-sm text-muted-foreground">
+            NB: Once added, we will start allowing traffic only from matching hostnames within a few minutes.
+        </div>
+        <Button v-if="loading" disabled>
+            <Loader class="!size-6"></Loader>
+        </Button>
+        <Button v-else @click="emits('confirm', domain), loading = true" :disabled="!canAdd"> Add domain </Button>
+    </div>
+</template>

dashboard/components/dialog/shields/DeleteAddress.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+
+const { close } = useDialog();
+const emits = defineEmits<{ (event: 'confirm'): void }>();
+const props = defineProps<{ data: { address: string } }>();
+
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <Label class="text-base"> Address delete </Label>
+
+        <div class="text-base">
+            Are you sure to delete the blacklisted IP address <b>{{ props.data.address }}</b>
+        </div>
+
+        <div class="flex justify-end gap-2">
+            <Button variant="secondary" @click="close()"> Back </Button>
+            <Button variant="destructive" @click="emits('confirm')"> Delete </Button>
+        </div>
+    </div>
+</template>

dashboard/components/dialog/shields/DeleteDomain.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+
+const { close } = useDialog();
+const emits = defineEmits<{ (event: 'confirm'): void }>();
+const props = defineProps<{ data: { domain: string } }>();
+
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <Label class="text-base"> Domain delete </Label>
+
+        <div class="text-base">
+            Are you sure to delete the whitelisted domain <b>{{ props.data.domain }}</b>
+        </div>
+
+        <div class="flex justify-end gap-2">
+            <Button variant="secondary" @click="close()"> Back </Button>
+            <Button variant="destructive" @click="emits('confirm')"> Delete </Button>
+        </div>
+    </div>
+</template>