Frontend fixes
This commit is contained in:
@@ -1,12 +1,14 @@
|
||||
import React from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { useState, useEffect } from 'react';
|
||||
import { ApiaryAPI, LoginAttempt, DummyApiaryAPIClient, ApiaryAPIClient, TotalStats, StatsResult } from "./api";
|
||||
import { ApiaryAPI, LoginAttempt, DummyApiaryAPIClient, ApiaryAPIClient, TotalStats, StatsResult, StatsType } from "./api";
|
||||
import { BrowserRouter, NavLink, Routes, Route } from "react-router";
|
||||
import { Chart as ChartJS, Tooltip, ArcElement, Legend } from "chart.js";
|
||||
import { Pie } from "react-chartjs-2";
|
||||
import humanizeDuration from "humanize-duration";
|
||||
|
||||
ChartJS.register(Tooltip, ArcElement, Legend);
|
||||
const logo = new URL("../assets/apiary.svg", import.meta.url)
|
||||
|
||||
interface AppProps {
|
||||
api: ApiaryAPI
|
||||
@@ -36,57 +38,88 @@ let chartColors = [
|
||||
]
|
||||
|
||||
export function App({ api }: AppProps) {
|
||||
const [mode, setMode] = useState("light");
|
||||
const headerProps: HeaderMenuProps = {
|
||||
title: "apiary.home.2rjus.net",
|
||||
logo: logo,
|
||||
items: [
|
||||
{
|
||||
name: "Totals",
|
||||
path: "/",
|
||||
},
|
||||
{
|
||||
name: "Passwords",
|
||||
path: "/stats/password",
|
||||
},
|
||||
{
|
||||
name: "Usernames",
|
||||
path: "/stats/username",
|
||||
},
|
||||
{
|
||||
name: "IPs",
|
||||
path: "/stats/ip",
|
||||
},
|
||||
{
|
||||
name: "Live",
|
||||
path: "/live",
|
||||
},
|
||||
{
|
||||
name: "Query",
|
||||
path: "/query",
|
||||
}
|
||||
]
|
||||
}
|
||||
const onSelectMode = (mode: string) => {
|
||||
setMode(mode);
|
||||
|
||||
if (mode === "dark") {
|
||||
document.body.classList.add("dark-mode");
|
||||
} else {
|
||||
document.body.classList.remove("dark-mode");
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => onSelectMode(e.matches ? "dark" : "light"));
|
||||
onSelectMode(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
|
||||
return () => {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', (e) => onSelectMode(e.matches ? "dark" : "light"));
|
||||
}
|
||||
}, [])
|
||||
return (
|
||||
<>
|
||||
<BrowserRouter>
|
||||
<Header />
|
||||
<div className="content">
|
||||
<Routes>
|
||||
<Route path="/" element={<Home api={api} />} />
|
||||
<Route path="/stats" element={<Stats api={api} />} />
|
||||
<Route path="/live" element={<Live api={api} />} />
|
||||
<Route path="/query" element={<Query api={api} />} />
|
||||
</Routes>
|
||||
<div id="app">
|
||||
<HeaderMenu title={headerProps.title} logo={logo} items={headerProps.items} />
|
||||
<div className="content">
|
||||
<Routes>
|
||||
<Route path="/" element={<Home api={api} />} />
|
||||
<Route path="/stats/password" element={<Stats api={api} type="password" />} />
|
||||
<Route path="/stats/username" element={<Stats api={api} type="username" />} />
|
||||
<Route path="/stats/ip" element={<Stats api={api} type="ip" />} />
|
||||
<Route path="/live" element={<Live api={api} />} />
|
||||
<Route path="/query" element={<Query api={api} />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function Stats({ api }: AppProps) {
|
||||
const [stats, setStats] = useState<StatsResult[]>([]);
|
||||
const [statsType, setStatsType] = useState<string>("password")
|
||||
export interface StatsProps {
|
||||
api: ApiaryAPI
|
||||
type: StatsType
|
||||
}
|
||||
|
||||
const activeMenu = (name: string): boolean => {
|
||||
if (statsType === name) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
const subMenuItems: SubMenuProps = {
|
||||
items: [
|
||||
{
|
||||
name: "Passwords",
|
||||
active: () => { return activeMenu("password") },
|
||||
onClick: () => setStatsType("password")
|
||||
},
|
||||
{
|
||||
name: "Usernames",
|
||||
active: () => { return activeMenu("username") },
|
||||
onClick: () => setStatsType("username")
|
||||
},
|
||||
{
|
||||
name: "IPs",
|
||||
active: () => { return activeMenu("ip") },
|
||||
onClick: () => setStatsType("ip")
|
||||
},
|
||||
]
|
||||
}
|
||||
export function Stats({ api, type }: StatsProps) {
|
||||
const [stats, setStats] = useState<StatsResult[]|null>(null)
|
||||
const [currentType, setCurrentType] = useState(type)
|
||||
|
||||
useEffect(() => {
|
||||
async function getStats() {
|
||||
try {
|
||||
let newStats = await api.stats(statsType, 10);
|
||||
let newStats = await api.stats(type, 10);
|
||||
if (JSON.stringify(newStats) !== JSON.stringify(stats)) {
|
||||
setStats(newStats)
|
||||
}
|
||||
@@ -95,7 +128,14 @@ export function Stats({ api }: AppProps) {
|
||||
}
|
||||
}
|
||||
|
||||
getStats()
|
||||
if (currentType !== type) {
|
||||
setCurrentType(type)
|
||||
getStats()
|
||||
}
|
||||
|
||||
if (stats === null) {
|
||||
getStats()
|
||||
}
|
||||
|
||||
const interval = setInterval(() => {
|
||||
getStats()
|
||||
@@ -104,11 +144,11 @@ export function Stats({ api }: AppProps) {
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, [stats, statsType])
|
||||
}, [stats, type])
|
||||
|
||||
return (
|
||||
<>
|
||||
<SubMenu items={subMenuItems.items} />
|
||||
{stats.length > 0 ? <StatsPie data={stats} /> : <p>Loading...</p>}
|
||||
{(stats != null && stats.length > 0) ? <StatsPie data={stats} /> : <p>Loading...</p>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -193,7 +233,7 @@ export function Live({ api }: AppProps) {
|
||||
useEffect(() => {
|
||||
const cleanup = api.live((a) => {
|
||||
setLiveList((list) => {
|
||||
return [...list, a];
|
||||
return [a, ...list];
|
||||
});
|
||||
});
|
||||
|
||||
@@ -210,30 +250,67 @@ export function Live({ api }: AppProps) {
|
||||
|
||||
export interface LiveListProps {
|
||||
list: LoginAttempt[]
|
||||
};
|
||||
};
|
||||
|
||||
export interface DateTDProps {
|
||||
date: Date
|
||||
now: Date
|
||||
}
|
||||
|
||||
export function DateTD({ date, now}: DateTDProps) {
|
||||
const [displayDate, setDisplayDate] = useState(date.toLocaleString());
|
||||
|
||||
useEffect(() => {
|
||||
if (now.getTime() - date.getTime() < 14400000) {
|
||||
const newDate = humanizeDuration(now.getTime() - date.getTime(), { largest: 1, round: true }) + " ago";
|
||||
if (newDate !== displayDate) {
|
||||
setDisplayDate(newDate);
|
||||
}
|
||||
}
|
||||
}, [displayDate, now])
|
||||
|
||||
return (
|
||||
<td className="live-table-date">{displayDate}</td>
|
||||
)
|
||||
}
|
||||
|
||||
export function LiveList({ list }: LiveListProps) {
|
||||
const [now, setNow] = useState(new Date())
|
||||
|
||||
let items = list.map((a) => {
|
||||
const attemptDate = new Date(a.date);
|
||||
const key = `${a.username}-${a.password}-${a.remoteIP}-${a.date}`;
|
||||
return (
|
||||
<tr key={a.date}>
|
||||
<td>{a.date}</td>
|
||||
<td>{a.username}</td>
|
||||
<td>{a.password}</td>
|
||||
<td>{a.remoteIP}</td>
|
||||
<td>{a.country}</td>
|
||||
<DateTD date={attemptDate} now={now} />
|
||||
<td className="live-table-username">{a.username}</td>
|
||||
<td className="live-table-password">{a.password}</td>
|
||||
<td className="live-table-ip">{a.remoteIP}</td>
|
||||
<td className="live-table-country">{a.country}</td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setNow(new Date())
|
||||
}, 1000)
|
||||
|
||||
return () => {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, [now])
|
||||
|
||||
return (
|
||||
<>
|
||||
<table className="live-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Username</th>
|
||||
<th>Password</th>
|
||||
<th>IP</th>
|
||||
<th>Country</th>
|
||||
<th className="live-table-date">Date</th>
|
||||
<th className="live-table-username">Username</th>
|
||||
<th className="live-table-password">Password</th>
|
||||
<th className="live-table-ip">IP</th>
|
||||
<th className="live-table-country">Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -296,7 +373,7 @@ export function Header() {
|
||||
<nav className="nav-flex">
|
||||
<ul>
|
||||
<li><NavLink to="/" className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>Home</NavLink></li>
|
||||
<li><NavLink to="/stats" className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>Stats</NavLink></li>
|
||||
<li><NavLink to="/stats/password" className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>Stats</NavLink></li>
|
||||
<li><NavLink to="/live" className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>Live</NavLink></li>
|
||||
<li><NavLink to="/query" className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>Query</NavLink></li>
|
||||
</ul>
|
||||
@@ -305,6 +382,38 @@ export function Header() {
|
||||
);
|
||||
}
|
||||
|
||||
interface HeaderItem {
|
||||
name: string
|
||||
path: string
|
||||
}
|
||||
|
||||
interface HeaderMenuProps {
|
||||
title: string
|
||||
logo: URL
|
||||
items: Array<HeaderItem>
|
||||
}
|
||||
|
||||
export function HeaderMenu({ title, logo, items }: HeaderMenuProps) {
|
||||
const menuItems = items.map((item) => {
|
||||
return (
|
||||
<li key={item.path}>
|
||||
<NavLink to={item.path} className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>{item.name}</NavLink>
|
||||
</li>
|
||||
)})
|
||||
|
||||
return (
|
||||
<div className="navbar">
|
||||
<img id="menu-logo" src={logo.href}></img>
|
||||
<h2 id="menu-title">{title}</h2>
|
||||
<nav className="nav-flex">
|
||||
<ul>
|
||||
{menuItems}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export interface SubMenuProps {
|
||||
items: Array<{ name: string, active: () => boolean, onClick: () => void }>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user