fix security page

This commit is contained in:
Emily
2024-09-21 15:19:41 +02:00
parent 4eeebaa0c3
commit cf1aa103e4
3 changed files with 48 additions and 22 deletions

View File

@@ -21,7 +21,7 @@ function showAnomalyInfoAlert() {
attack or simply higher traffic due to good performance. Additionally, it can detect if someone is attack or simply higher traffic due to good performance. Additionally, it can detect if someone is
stealing parts of your website and hosting a duplicate version—an unfortunately common practice. stealing parts of your website and hosting a duplicate version—an unfortunately common practice.
Litlyx will notify you via email with actionable advices`, Litlyx will notify you via email with actionable advices`,
'far fa-bug', 'far fa-shield',
10000 10000
) )

View File

@@ -18,10 +18,10 @@ const sections: Section[] = [
{ label: 'Dashboard', to: '/', icon: 'fal fa-table-layout' }, { label: 'Dashboard', to: '/', icon: 'fal fa-table-layout' },
{ label: 'Events', to: '/events', icon: 'fal fa-square-bolt' }, { label: 'Events', to: '/events', icon: 'fal fa-square-bolt' },
{ label: 'AI Analyst', to: '/analyst', icon: 'fal fa-sparkles' }, { label: 'AI Analyst', to: '/analyst', icon: 'fal fa-sparkles' },
{ label: 'Security', to: '/security', icon: 'fal fa-shield' },
{ label: 'Insights (soon)', to: '#', icon: 'fal fa-lightbulb', disabled: true }, { label: 'Insights (soon)', to: '#', icon: 'fal fa-lightbulb', disabled: true },
{ label: 'Links (soon)', to: '#', icon: 'fal fa-globe-pointer', disabled: true }, { label: 'Links (soon)', to: '#', icon: 'fal fa-globe-pointer', disabled: true },
{ label: 'Integrations (soon)', to: '#', icon: 'fal fa-cube', disabled: true }, { label: 'Integrations (soon)', to: '#', icon: 'fal fa-cube', disabled: true },
{ label: 'Security', to: '/security', icon: 'fal fa-lock' },
{ label: 'Settings', to: '/settings', icon: 'fal fa-gear' }, { label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
{ {
grow: true, grow: true,

View File

@@ -12,34 +12,60 @@ const headers = computed(() => {
const reportList = useFetch(`/api/security/list`, { headers }); const reportList = useFetch(`/api/security/list`, { headers });
const { createAlert } = useAlert();
function showAnomalyInfoAlert() {
createAlert('AI Anomaly Detector info',
`Anomaly detector is running. It helps you detect a spike in visits or events, it could mean an
attack or simply higher traffic due to good performance. Additionally, it can detect if someone is
stealing parts of your website and hosting a duplicate version—an unfortunately common practice.
Litlyx will notify you via email with actionable advices`,
'far fa-shield',
10000
)
}
</script> </script>
<template> <template>
<div class="home w-full h-full px-10 lg:px-0 pt-6 overflow-y-auto"> <div class="home w-full h-full px-10 pt-6 overflow-y-auto">
<div v-if="reportList.data.value" class="flex flex-col gap-2"> <div class="flex gap-2 items-center text-text/90 justify-end">
<div v-for="entry of reportList.data.value"> <div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
<div v-if="entry.type === 'event'" class="flex gap-2"> <div class="poppins font-regular text-[1rem]"> AI Anomaly Detector </div>
<div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div> <div class="flex items-center">
<UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge> <i class="far fa-info-circle text-[.9rem] hover:text-lyx-primary cursor-pointer"
<div class="text-lyx-text-dark"> @click="showAnomalyInfoAlert"></i>
Event date: {{ new Date(entry.data.eventDate).toLocaleString() }} </div>
</div>
<div class="w-full h-full py-8 px-12">
<div v-if="reportList.data.value" class="flex flex-col gap-2">
<div v-for="entry of reportList.data.value">
<div v-if="entry.type === 'event'" class="flex gap-2">
<div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
<UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
<div class="text-lyx-text-dark">
Event date: {{ new Date(entry.data.eventDate).toLocaleString() }}
</div>
</div> </div>
</div> <div v-if="entry.type === 'visit'" class="flex gap-2">
<div v-if="entry.type === 'visit'" class="flex gap-2"> <div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
<div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div> <UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
<UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge> <div class="text-lyx-text-dark">
<div class="text-lyx-text-dark"> Visit date: {{ new Date(entry.data.visitDate).toLocaleString() }}
Visit date: {{ new Date(entry.data.visitDate).toLocaleString() }} </div>
</div> </div>
</div> <div v-if="entry.type === 'domain'" class="flex gap-2">
<div v-if="entry.type === 'domain'" class="flex gap-2"> <div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
<div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div> <UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
<UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge> <div class="text-lyx-text-dark">
<div class="text-lyx-text-dark"> Domain found: {{ entry.data.domain }}
Domain found: {{ entry.data.domain }} </div>
</div> </div>
</div> </div>
</div> </div>