Nixify and start frontend update

2025-03-07 01:23:15 +01:00 · 2025-03-07 01:23:15 +01:00 · 5682777bfe
commit 5682777bfe
parent 4a3c022958
38 changed files with 5299 additions and 10976 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,5 @@
 **/node_modules
 **/dist
-honeypot/Geoacumen-Country.mmdb
+honeypot/Geoacumen-Country.mmdb
+result
+frontend/.parcel-cache
--- a/cmd/apiary.go
+++ b/cmd/apiary.go
@ -153,7 +153,7 @@ func ActionServe(c *cli.Context) error {

 	// Start ssh server
 	go func() {
-		loggers.rootLogger.Info("Starting SSH server.")
+		loggers.rootLogger.Infow("Starting SSH server.", "addr", cfg.Honeypot.ListenAddr)
 		if err := hs.ListenAndServe(); err != nil && err != sshlib.ErrServerClosed {
 			loggers.rootLogger.Warnw("SSH server returned error.", "error", err)
 		}
@ -162,7 +162,7 @@ func ActionServe(c *cli.Context) error {

 	// Start web server
 	go func() {
-		loggers.rootLogger.Info("Starting web server.")
+		loggers.rootLogger.Infow("Starting web server.", "addr", cfg.Frontend.ListenAddr)
 		if err := web.StartServe(); err != nil && err != http.ErrServerClosed {
 			loggers.rootLogger.Warnw("Web server returned error.", "error", err)
 		}
--- a/flake.lock
+++ b/flake.lock
@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1741010256,
+        "narHash": "sha256-WZNlK/KX7Sni0RyqLSqLPbK8k08Kq7H7RijPJbq9KHM=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "ba487dbc9d04e0634c64e3b1f0d25839a0a68246",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}
--- a/flake.nix
+++ b/flake.nix
@ -0,0 +1,101 @@
+{
+  description = "SSH honeypot with frontend";
+
+  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+
+  outputs =
+    { self, nixpkgs }:
+    let
+      allSystems = [
+        "x86_64-linux"
+        "aarch64-linux"
+        "x86_64-darwin"
+        "aarch64-darwin"
+      ];
+      forAllSystems =
+        f:
+        nixpkgs.lib.genAttrs allSystems (
+          system:
+          f {
+            pkgs = import nixpkgs { inherit system; };
+          }
+        );
+    in
+    {
+      overlays.default = final: prev: {
+        apiary = self.packages.${prev.system}.default;
+      };
+
+      packages = forAllSystems (
+        { pkgs }:
+        {
+          default =
+            let
+              src = pkgs.lib.sourceFilesBySuffices ./. [
+                "go.mod"
+                "go.sum"
+                ".go"
+              ];
+              version = pkgs.lib.strings.removePrefix "v" (
+                builtins.elemAt (pkgs.lib.strings.split "\"" (
+                  pkgs.lib.lists.findFirst (x: pkgs.lib.strings.hasInfix "Version" x) null (
+                    pkgs.lib.strings.splitString "\n" (builtins.readFile ./version.go)
+                  )
+                )) 2
+              );
+              geoDb = pkgs.fetchFromGitHub {
+                owner = "geoacumen";
+                repo = "geoacumen-country";
+                rev = "5f770af620465f40427c3f421446a7b7845e2699";
+                sha256 = "sha256-t3ELkhAbJC40z6r6wJeQI4Kutfw26fRg6n7a6FmhvkA=";
+              };
+
+              frontend = pkgs.buildNpmPackage {
+                inherit version;
+                name = "apiary-frontend";
+
+                src = ./frontend;
+
+                npmDepsHash = "sha256-hFoGepzNZjDFaHhb6tO3FUmW6AdEyOTXIQ6rDcUokLo=";
+
+                installPhase = ''
+                  mkdir -p $out
+                  cp -r dist/* $out
+                '';
+              };
+            in
+            pkgs.buildGoModule {
+              inherit version;
+              pname = "apiary";
+              src = src;
+              prePatch = ''
+                cp ${geoDb}/Geoacumen-Country.mmdb honeypot/ssh
+                mkdir -p web/frontend/dist
+                cp -r ${frontend}/* web/frontend/dist
+              '';
+              vendorHash = "sha256-griWN9fQ0X2ClPDOzVXV80MpdcEFZfe/WaYm7L7fAc8=";
+              tags = [
+                "embed"
+              ];
+            };
+        }
+      );
+      devShells = forAllSystems (
+        { pkgs }:
+        {
+          default = pkgs.mkShell {
+            packages = with pkgs; [
+              go
+              golangci-lint
+            ];
+          };
+          frontend = pkgs.mkShell {
+            packages = with pkgs; [
+              nodejs
+              yarn
+            ];
+          };
+        }
+      );
+    };
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,25 @@
+{
+  "name": "apiary-frontend",
+  "scripts": {
+    "start": "parcel src/index.html",
+    "build": "parcel build src/index.html"
+  },
+  "devDependencies": {
+    "@ngneat/falso": "^7.3.0",
+    "parcel": "^2.13.3",
+    "process": "^0.11.10",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.2"
+  },
+  "dependencies": {
+    "@types/node": "^22.13.9",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "chart.js": "^4.4.8",
+    "react": "^19.0.0",
+    "react-chartjs-2": "^5.3.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.2.0",
+    "swr": "^2.3.2"
+  }
+}
--- a/frontend/src/css/fonts.css
+++ b/frontend/src/css/fonts.css
@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;600&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');
--- a/frontend/src/css/style.css
+++ b/frontend/src/css/style.css
@ -0,0 +1,164 @@
+:root {
+    --menu-color-bg: #212529;
+    --menu-color-text: hsla(0,0%,100%,.5);
+    --menu-color-text-hover: white;
+    --menu-color-title-text: white;
+    --table-color-bg: #009879;
+}
+#root {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+}
+body {
+    margin: 0;
+    margin-top: 100px;
+}
+
+*,
+*::before,
+*::after {
+    padding: 0;
+    margin: 0;
+    border-box: box-sizing;
+}
+
+a {
+    text-decoration: none;
+}
+
+.navbar {
+    background-color: var(--menu-color-bg);
+    display: flex;
+    font-size: 1.2rem;
+    font-family: "Prompt", sans-serif;
+    height: 40px;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+
+.navbar ul {
+    display: flex;
+    align-items: center;
+}
+
+.root .navbar {
+    justify-content: space-between;
+}
+
+.navbar ul li {
+    list-style-type: none;
+    color: var(--menu-color-text);
+    padding-left: 10px;
+    padding-right: 10px;
+    line-height: 40px;
+}
+
+.navbar h2 {
+    line-height: 40px;
+    align-items: center;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.navbar a {
+    color: var(--menu-color-text);
+    height: 1;
+}
+
+.navbar a:hover {
+    color: var(--menu-color-text-hover);
+}
+
+.submenu nav {
+    display: flex;
+    justify-content: space-between;
+    line-height: 1;
+}
+
+.totals {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    font-family: "Secular One", sans-serif;
+    font-size: 20px;
+    font-weight: 200;
+}
+.totals-key { 
+    grid-area: 1 / 1 / 2 / 2; 
+    text-align: right;
+}
+.totals-value { 
+    grid-area: 1 / 2 / 2 / 3;
+    padding-left: 10px;
+    text-align: left;
+}
+#menu-title {
+    color: white;
+    font-family: "Secular One", sans-serif;
+    font-size: 30px;
+    font-weight: 300;
+}
+.menu-link {
+    color: var(--menu-color-text);
+}
+.menu-link:hover {
+    color: var(--menu-color-text-hover);
+}
+.menu-link-active {
+    color: var(--menu-color-text-hover);
+}
+.sub-menu-link {
+    color: var(--menu-color-text);
+}
+.sub-menu-link:hover {
+    color: var(--menu-color-text-hover);
+}
+.sub-menu-link-active {
+    color: var(--menu-color-text-hover);
+}
+.stats-pie {
+    height: 50vh;
+    width: 50vw;
+}
+
+.live-table {
+    border-collapse: collapse;
+    margin: 25px 0;
+    font-size: 0.9em;
+    font-family: sans-serif;
+    min-width: 400px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+.live-table thead tr {
+    background-color: var(--table-color-bg);
+    color: #ffffff;
+    text-align: left;
+}
+.live-table th,
+.live-table td {
+    padding: 12px 15px;
+}
+.live-table tbody tr {
+    border-bottom: 1px solid #dddddd;
+}
+.live-table tbody tr:nth-of-type(even) {
+    background-color: #f3f3f3;
+}
+.live-table tbody tr:last-of-type {
+    border-bottom: 2px solid var(--table-color-bg);
+}
+.live-table tbody tr.active-row {
+    font-weight: bold;
+    color: #009879;
+}
+
+.content {
+    margin-left: 10vw;
+}
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" href="./css/style.css" />
+    <link rel="stylesheet" href="./css/fonts.css" />
+    <script type="module" src="./js/app.tsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
--- a/frontend/src/js/api.ts
+++ b/frontend/src/js/api.ts
@ -0,0 +1,139 @@
+import { randUserName, randPastDate, randIp, randPassword, randUuid, randNumber } from '@ngneat/falso';
+
+export interface LoginAttempt {
+    readonly date: string;
+    readonly remoteIP: string;
+    readonly username: string;
+    readonly password: string;
+    readonly sshClientVersion: string;
+    readonly connectionUUID: string;
+    readonly country: string;
+}
+
+export interface TotalStats {
+    readonly password: number;
+    readonly username: number;
+    readonly ip: number;
+    readonly country: number;
+    readonly attempts: number;
+}
+
+export interface StatsResult {
+    name: string;
+    count: number;
+}
+
+export interface ApiaryAPI {
+    live(fn: (a: LoginAttempt) => void): void;
+    stats(statsType: string, limit: number): Promise<StatsResult[]>;
+    query(queryType: string, query: string): Promise<LoginAttempt[]>;
+    totals(): Promise<TotalStats>;
+}
+
+function fakeLoginAttempt(): LoginAttempt {
+    return {
+        date: randPastDate().toISOString(),
+        remoteIP: randIp().toString(),
+        username: randUserName().toString(),
+        password: randPassword().toString(),
+        sshClientVersion: '1.0',
+        connectionUUID: randUuid().toString(),
+        country: 'NO'
+    }
+}
+
+export class DummyApiaryAPIClient implements ApiaryAPI {
+    live(fn: (a: LoginAttempt) => void): () => void {
+        const interval = setInterval(() => {
+            let a = fakeLoginAttempt();
+            fn(a);
+        }, 1000);
+
+        return () => { clearInterval(interval) }
+    }
+    async stats(_type: string, limit: number): Promise<StatsResult[]> {
+        const stats = Array.from({ length: limit }, () => {
+            return { name: randUserName().toString(), count: randNumber().valueOf() }
+        });
+        return Promise.resolve(stats);
+    }
+    async query(_type: string, _query: string): Promise<LoginAttempt[]> {
+        const attempts = Array.from({ length: 10 }, () => {
+            return fakeLoginAttempt();
+        })
+        return Promise.resolve(attempts);
+    }
+
+    async totals(): Promise<TotalStats> {
+        return Promise.resolve({ password: 1, username: 1, ip: 1, country: 1, attempts: 1 })
+    }
+}
+
+export class ApiaryAPIClient implements ApiaryAPI {
+    live(fn: (a: LoginAttempt) => void): () => void {
+        const es = new EventSource('/api/stream');
+        const updateFn = (ev: MessageEvent<string>) => {
+            const attempt: LoginAttempt = JSON.parse(ev.data);
+            fn(attempt);
+        };
+        es.addEventListener('message', updateFn)
+
+        return () => {
+            es.removeEventListener('message', updateFn);
+            es.close();
+        }
+    }
+    async stats(statsType: string, limit: number): Promise<StatsResult[]> {
+        const resp = await fetch(`/api/stats?type=${statsType}&limit=${limit}`)
+        if (!resp.ok) {
+            throw new Error('Failed to fetch query')
+        }
+        const data: StatsResult[] | null = await resp.json()
+        if (!data) {
+            return []
+        }
+        return data
+    }
+    async query(queryType: string, query: string): Promise<LoginAttempt[]> {
+        const resp = await fetch(`/api/query?type=${queryType}&query=${query}`)
+        if (!resp.ok) {
+            throw new Error('Failed to fetch query')
+        }
+        const data: LoginAttempt[] = await resp.json()
+
+        return data
+    }
+
+    async totals(): Promise<TotalStats> {
+        let password: number = -1
+        let username: number = -1
+        let ip: number = -1
+        let attempts: number = -1
+        let country: number = -1
+
+        const resp = await fetch('/api/stats?type=total')
+        const data: Array<StatsResult> = await resp.json()
+
+        for (const stat of data) {
+            switch (stat.name) {
+                case 'UniquePasswords':
+                    password = stat.count
+                    break
+                case 'UniqueUsernames':
+                    username = stat.count
+                    break
+                case 'UniqueIPs':
+                    ip = stat.count
+                    break
+                case 'TotalLoginAttempts':
+                    attempts = stat.count
+                    break
+                case 'UniqueCountries':
+                    country = stat.count
+                    break
+            }
+        }
+
+        return { password, username, ip, attempts, country }
+    }
+}
--- a/frontend/src/js/app.tsx
+++ b/frontend/src/js/app.tsx
@ -0,0 +1,343 @@
+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 { BrowserRouter, NavLink, Routes, Route } from "react-router";
+import { Chart as ChartJS, Tooltip, ArcElement, Legend } from "chart.js";
+import { Pie } from "react-chartjs-2";
+
+ChartJS.register(Tooltip, ArcElement, Legend);
+
+interface AppProps {
+    api: ApiaryAPI
+}
+
+let chartColors = [
+    "#1abc9c",
+    "#2ecc71",
+    "#3498db",
+    "#9b59b6",
+    "#34495e",
+    "#16a085",
+    "#27ae60",
+    "#2980b9",
+    "#8e44ad",
+    "#2c3e50",
+    "#f1c40f",
+    "#e67e22",
+    "#e74c3c",
+    "#ecf0f1",
+    "#95a5a6",
+    "#f39c12",
+    "#d35400",
+    "#c0392b",
+    "#bdc3c7",
+    "#7f8c8d"
+]
+
+export function App({ api }: AppProps) {
+    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>
+            </BrowserRouter>
+        </>
+    );
+}
+
+export function Stats({ api }: AppProps) {
+    const [stats, setStats] = useState<StatsResult[]>([]);
+    const [statsType, setStatsType] = useState<string>("password")
+
+    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")
+            },
+        ]
+    }
+
+    useEffect(() => {
+        async function getStats() {
+            try {
+                let newStats = await api.stats(statsType, 10);
+                if (JSON.stringify(newStats) !== JSON.stringify(stats)) {
+                    setStats(newStats)
+                }
+            } catch (e) {
+                console.log("Error getting stats", e)
+            }
+        }
+
+        getStats()
+
+        const interval = setInterval(() => {
+            getStats()
+        }, 5000)
+
+        return () => {
+            clearInterval(interval);
+        }
+    }, [stats, statsType])
+    return (
+        <>
+            <SubMenu items={subMenuItems.items} />
+            {stats.length > 0 ? <StatsPie data={stats} /> : <p>Loading...</p>}
+        </>
+    );
+}
+
+export interface StatsPieProps {
+    data: StatsResult[]
+}
+
+export function StatsPie({ data }: StatsPieProps) {
+    const labels = data.map((d) => d.name);
+    const values = data.map((d) => d.count);
+    const piedata = {
+        labels,
+        datasets: [{
+            label: "# of attempts",
+            data: values,
+            backgroundColor: chartColors,
+            borderWidth: 1
+        }]
+    };
+    return (
+        <div className="stats-pie">
+            <Pie data={piedata} options={{ plugins: { legend: {} } }} />
+        </div>
+    )
+}
+
+export function Home({ api }: AppProps) {
+    const [totals, setTotals] = useState<TotalStats | null>(null)
+    useEffect(() => {
+        async function getTotals() {
+            let totals = await api.totals();
+            setTotals(totals);
+        }
+
+        if (!totals) {
+            getTotals();
+        }
+
+        const interval = setInterval(() => {
+            getTotals();
+        }, 5000)
+
+        return () => {
+            clearInterval(interval);
+        }
+    })
+    return (
+        <>
+            {totals ? <Totals totals={totals} /> : <p>Loading...</p>}
+        </>
+    );
+}
+
+export interface TotalsProps {
+    totals: TotalStats
+}
+
+export function Totals({ totals }: TotalsProps) {
+    return (
+        <div className="totals">
+            <div className="totals-key">
+                <h2>Unique passwords</h2>
+                <h2>Unique username</h2>
+                <h2>Unique IPs</h2>
+                <h2>Total attempts</h2>
+            </div>
+            <div className="totals-value">
+                <h2>{totals.password}</h2>
+                <h2>{totals.username}</h2>
+                <h2>{totals.ip}</h2>
+                <h2>{totals.attempts}</h2>
+            </div>
+        </div>
+    )
+}
+
+export function Live({ api }: AppProps) {
+    let list: LoginAttempt[] = [];
+    let [liveList, setLiveList] = useState(list);
+
+    useEffect(() => {
+        const cleanup = api.live((a) => {
+            setLiveList((list) => {
+                return [...list, a];
+            });
+        });
+
+        return cleanup
+
+    }, [liveList, api]);
+
+    return (
+        <>
+            <LiveList list={liveList} />
+        </>
+    );
+}
+
+export interface LiveListProps {
+    list: LoginAttempt[]
+};
+
+export function LiveList({ list }: LiveListProps) {
+    let items = list.map((a) => {
+        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>
+            </tr>
+        )
+    })
+    return (
+        <>
+            <table className="live-table">
+                <thead>
+                    <tr>
+                        <th>Date</th>
+                        <th>Username</th>
+                        <th>Password</th>
+                        <th>IP</th>
+                        <th>Country</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {items}
+                </tbody>
+            </table>
+        </>
+    )
+};
+
+
+export function Query({ api }: AppProps) {
+    const [liveList, setLiveList] = useState<LoginAttempt[]>([]);
+    const [queryErr, setQueryErr] = useState<Error | null>(null);
+
+    async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+        event.preventDefault();
+        const value = event.currentTarget.query.value;
+        if (value === "") {
+            setQueryErr(new Error("Query cannot be empty"));
+            return
+        }
+        try {
+            const results = await api.query("", value)
+            setQueryErr(null);
+            setLiveList(results);
+        } catch (e) {
+            if (e instanceof Error) {
+                setQueryErr(e);
+            }
+        }
+    }
+    return (
+        <>
+            <form onSubmit={handleSubmit}>
+                <input placeholder="query" name="query" />
+            </form>
+            {queryErr ? <ErrorBox message={queryErr.message} /> : null}
+            <LiveList list={liveList} />
+        </>
+    );
+}
+
+interface ErrorBoxProps {
+    message: string | null
+};
+
+export function ErrorBox({ message }: ErrorBoxProps) {
+    return (
+        <div className="error-box">
+            <p>Error: {message}</p>
+        </div>
+    )
+}
+
+export function Header() {
+    return (
+        <div className="navbar">
+            <h2 id="menu-title">apiary.home.2rjus.net</h2>
+            <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="/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>
+            </nav>
+        </div>
+    );
+}
+
+export interface SubMenuProps {
+    items: Array<{ name: string, active: () => boolean, onClick: () => void }>
+}
+
+export function SubMenu({ items }: SubMenuProps) {
+    return (
+        <nav className="submenu">
+            <ul>
+                {items.map((item) => {
+                    return <li>
+                        <a
+                            href="#"
+                            className={item.active() ? "sub-menu-link-active" : "sub-menu-link"}
+                            onClick={item.onClick}>{item.name}</a>
+                    </li>
+                })}
+            </ul>
+        </nav>
+    )
+}
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+    const root = createRoot(rootElement);
+    let api: ApiaryAPI;
+    if (process.env.NODE_ENV === "production") {
+        api = new ApiaryAPIClient();
+    } else {
+        api = new DummyApiaryAPIClient();
+    }
+
+
+    root.render(
+        <App api={api} />
+    );
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": ["dom", "esnext"],
+    "strict": true,
+    "sourceMap": true,
+    "target": "esnext",
+    "types": ["node"]
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}
+
--- a/web/frontend/.browserslistrc
+++ b/web/frontend/.browserslistrc
@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead
--- a/web/frontend/.editorconfig
+++ b/web/frontend/.editorconfig
@ -1,7 +0,0 @@
-[*.{js,jsx,ts,tsx,vue}]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-trim_trailing_whitespace = true
-insert_final_newline = true
-max_line_length = 100
--- a/web/frontend/.eslintrc.js
+++ b/web/frontend/.eslintrc.js
@ -1,20 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    'plugin:vue/essential',
-    '@vue/airbnb',
-    '@vue/typescript/recommended',
-    'prettier'
-  ],
-  parserOptions: {
-    ecmaVersion: 2020,
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'implicit-arrow-linebreak': 'warn',
-  },
-};
--- a/web/frontend/.gitignore
+++ b/web/frontend/.gitignore
@ -1,23 +0,0 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
--- a/web/frontend/README.md
+++ b/web/frontend/README.md
@ -1,24 +0,0 @@
-# vue-frontend
-
-## Project setup
-```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/web/frontend/babel.config.js
+++ b/web/frontend/babel.config.js
@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
-  ],
-};
--- a/web/frontend/package.json
+++ b/web/frontend/package.json
@ -1,50 +0,0 @@
-{
-  "name": "apiary-frontend",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@fontsource/rubik": "^4.2.2",
-    "@fontsource/secular-one": "^4.2.2",
-    "axios": "^0.21.1",
-    "bootstrap": "^4.6.0",
-    "bootstrap-vue": "^2.21.2",
-    "chart.js": "^3.0.2",
-    "core-js": "^3.6.5",
-    "d3": "^6.6.2",
-    "d3-svg-legend": "^2.25.6",
-    "faker": "^5.5.2",
-    "randomcolor": "^0.6.2",
-    "s-ago": "^2.2.0",
-    "vue": "^2.6.11",
-    "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^9.1.2",
-    "vue-router": "^3.5.1"
-  },
-  "devDependencies": {
-    "@types/chart.js": "^2.9.32",
-    "@types/d3": "^6.3.0",
-    "@types/faker": "^5.5.1",
-    "@types/randomcolor": "^0.5.5",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-airbnb": "^5.0.2",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "eslint": "^6.7.2",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "typescript": "~4.1.5",
-    "vue-template-compiler": "^2.6.11"
-  }
-}
--- a/web/frontend/public/favicon.ico
+++ b/web/frontend/public/favicon.ico
--- a/web/frontend/public/index.html
+++ b/web/frontend/public/index.html
@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="description" content="Stats about logins, usernames and passwords received by the SSH honeypot.">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title>apiary.t-juice.club</title>
-</head>
-
-<body>
-  <noscript>
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
-        Please enable it to continue.</strong>
-  </noscript>
-  <div id="app"></div>
-  <!-- built files will be auto injected -->
-</body>
-
-</html>
--- a/web/frontend/public/logo192.png
+++ b/web/frontend/public/logo192.png
--- a/web/frontend/public/robots.txt
+++ b/web/frontend/public/robots.txt
@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
--- a/web/frontend/src/App.vue
+++ b/web/frontend/src/App.vue
@ -1,75 +0,0 @@
-<template>
-  <div id="app">
-    <div id="apiary-navbar">
-      <b-navbar toggleable="md" type="dark" variant="dark">
-        <b-navbar-brand href="#">
-          <img
-            alt="logo"
-            src="logo192.png"
-            width="29"
-            height="29"
-            class="d-inline-block align-top"
-          />
-          apiary.t-juice.club
-        </b-navbar-brand>
-        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
-        <b-collapse id="nav-collapse" is-nav>
-          <b-navbar-nav class="mr-auto">
-            <b-nav-item :to="'/'">Home</b-nav-item>
-            <b-nav-item :to="'/stats'">Stats</b-nav-item>
-            <b-nav-item :to="'/attempts'">Attempts</b-nav-item>
-            <b-nav-item :to="'/search'">Search</b-nav-item>
-          </b-navbar-nav>
-        </b-collapse>
-      </b-navbar>
-    </div>
-    <b-container id="main-content-container" fluid="md">
-      <router-view></router-view>
-    </b-container>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import AttemptList from '@/components/AttemptList.vue';
-import Stats from '@/components/Stats.vue';
-import Home from '@/components/Home.vue';
-
-@Component({
-  components: {
-    AttemptList,
-    Stats,
-    Home,
-  },
-})
-export default class App extends Vue {}
-</script>
-
-<style lang="scss">
-$font-stack-header: 'Secular One', sans-serif;
-$font-stack-content: 'Rubik', sans-serif;
-#app {
-  font-family: $font-stack-content;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 0;
-}
-.navbar-brand {
-  font-family: $font-stack-header;
-}
-.navbar-nav a {
-  font-family: $font-stack-content;
-}
-
-h1 h2 h3 {
-  font-family: $font-stack-header;
-}
-
-#main-content-container {
-  margin-top: 50px;
-  text-align: center;
-  display: inline-block;
-}
-</style>
--- a/web/frontend/src/apiary/DummyClient.ts
+++ b/web/frontend/src/apiary/DummyClient.ts
@ -1,8 +0,0 @@
-import { ApiaryAPI, LoginAttempt } from "@/apiary/apiary";
-
-
-export class ApiaryDummyClient implements ApiaryAPI {
-    streamLoginAttempts(): any {
-        return 'a';
-    }
-}
--- a/web/frontend/src/apiary/apiary.ts
+++ b/web/frontend/src/apiary/apiary.ts
@ -1,35 +0,0 @@
-import FakerStatic from 'faker';
-
-export interface LoginAttempt {
-  readonly date: string;
-  readonly remoteIP: string;
-  readonly username: string;
-  readonly password: string;
-  readonly sshClientVersion: string;
-  readonly connectionUUID: string;
-}
-
-export interface StatResult {
-  name: string;
-  count: number;
-}
-
-export interface ApiaryAPI {
-  streamLoginAttempts(): ReadableStream<LoginAttempt>;
-}
-
-export function fakeAttempt(): LoginAttempt {
-  return {
-    date: FakerStatic.date.recent().toLocaleDateString(),
-    remoteIP: FakerStatic.internet.ip(),
-    username: FakerStatic.internet.userName(),
-    password: FakerStatic.internet.password(),
-    sshClientVersion: FakerStatic.lorem.words(2),
-    connectionUUID: FakerStatic.datatype.uuid(),
-  };
-}
-
-export function fakeAttemptStream(): EventSource {
-  const es = new EventSource('/stream');
-  return es;
-}
--- a/web/frontend/src/assets/logo.png
+++ b/web/frontend/src/assets/logo.png
--- a/web/frontend/src/components/AttemptList.vue
+++ b/web/frontend/src/components/AttemptList.vue
@ -1,79 +0,0 @@
-<template>
-  <div class="attemptlist">
-    <h1>Live Attempts</h1>
-    <p>
-      <b-table
-        responsive="md"
-        striped
-        hover
-        :items="attempts"
-        :fields="fields"
-      />
-    </p>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { BvTableFieldArray, BvTableFormatterCallback } from 'bootstrap-vue';
-import { LoginAttempt } from '@/apiary/apiary';
-
-@Component
-export default class AttemptList extends Vue {
-  @Prop() private items!: LoginAttempt[];
-
-  attempts: LoginAttempt[];
-
-  fields: BvTableFieldArray = [
-    {
-      key: 'date',
-      sortable: true,
-      formatter: (value: string): string => {
-        const d = new Date(value);
-        // This seems stupid...
-        return d.toTimeString().split(' ')[0];
-      },
-      sortByFormatted: false,
-    },
-    {
-      key: 'username',
-    },
-    {
-      key: 'password',
-    },
-    {
-      key: 'remoteIP',
-      sortable: true,
-    },
-    {
-      key: 'country',
-    },
-  ];
-
-  constructor() {
-    super();
-    this.attempts = [];
-  }
-
-  mounted(): void {
-    /**
-    console.log(this);
-    const at: LoginAttempt[] = [];
-
-    for (let i = 0; i < 5; i += 1) {
-      at.push(fakeAttempt());
-    }
-
-    setInterval(() => {
-      at.push(fakeAttempt());
-    }, 1000);
-    */
-
-    const attemptStream = new EventSource('/api/stream');
-    attemptStream.addEventListener('message', (ev: MessageEvent<string>) => {
-      const parsed: LoginAttempt = JSON.parse(ev.data);
-      this.attempts.unshift(parsed);
-    });
-  }
-}
-</script>
--- a/web/frontend/src/components/Home.vue
+++ b/web/frontend/src/components/Home.vue
@ -1,145 +0,0 @@
-<template>
-  <div class="home">
-    <b-container v-if="ready">
-      <b-row>
-        <b-col class="total-title">
-          <h2>Total login attempts</h2>
-        </b-col>
-        <b-col class="total-count">
-          <h2>{{ totalLoginAttempts }}</h2>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col class="total-title">
-          <h2>Unique passwords</h2>
-        </b-col>
-        <b-col class="total-count">
-          <h2>{{ uniquePasswords }}</h2>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col class="total-title">
-          <h2>Unique usernames</h2>
-        </b-col>
-        <b-col class="total-count">
-          <h2>{{ uniqueUsernames }}</h2>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col class="total-title">
-          <h2>Unique IPs</h2>
-        </b-col>
-        <b-col class="total-count">
-          <h2>{{ uniqueIPs }}</h2>
-        </b-col>
-      </b-row>
-    </b-container>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Watch } from 'vue-property-decorator';
-import axios from 'axios';
-
-type TotalStatsHeaders =
-  | 'UniquePasswords'
-  | 'UniqueUsernames'
-  | 'UniqueIPs'
-  | 'UniqueCountries'
-  | 'TotalLoginAttempts';
-
-interface TotalStatsResult {
-  name: TotalStatsHeaders;
-  count: number;
-}
-
-@Component
-export default class Home extends Vue {
-  totalLoginAttempts: number;
-
-  uniquePasswords: number;
-
-  uniqueUsernames: number;
-
-  uniqueIPs: number;
-
-  uniqueCountries: number;
-
-  private updaterHandle?: number;
-
-  ready = false;
-
-  constructor() {
-    super();
-    this.totalLoginAttempts = 0;
-    this.uniquePasswords = 0;
-    this.uniqueUsernames = 0;
-    this.uniqueIPs = 0;
-    this.uniqueCountries = 0;
-  }
-
-  updateStats(): void {
-    const url = `/api/stats?type=total`;
-    axios
-      .get<TotalStatsResult[]>(url)
-      .then((resp) => {
-        const totals = resp.data.find((e) => e.name === 'TotalLoginAttempts')
-          ?.count;
-        if (totals) {
-          this.totalLoginAttempts = totals;
-        }
-
-        const passwords = resp.data.find((e) => e.name === 'UniquePasswords')
-          ?.count;
-        if (passwords) {
-          this.uniquePasswords = passwords;
-        }
-
-        const usernames = resp.data.find((e) => e.name === 'UniqueUsernames')
-          ?.count;
-        if (usernames) {
-          this.uniqueUsernames = usernames;
-        }
-
-        const ips = resp.data.find((e) => e.name === 'UniqueIPs')?.count;
-        if (ips) {
-          this.uniqueIPs = ips;
-        }
-
-        const countries = resp.data.find((e) => e.name === 'UniqueCountries')
-          ?.count;
-        if (countries) {
-          this.uniqueCountries = countries;
-        }
-
-        this.ready = true;
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  }
-
-  created(): void {
-    this.updateStats();
-
-    this.updaterHandle = setInterval(() => {
-      this.updateStats();
-    }, 5000);
-  }
-
-  beforeDestroy(): void {
-    clearInterval(this.updaterHandle);
-  }
-}
-</script>
-<style scoped lang="scss">
-.home {
-  text-align: left;
-}
-.total-title {
-  text-align: right;
-}
-.total-count {
-  text-align: left;
-}
-</style>
--- a/web/frontend/src/components/SearchResult.vue
+++ b/web/frontend/src/components/SearchResult.vue
@ -1,81 +0,0 @@
-<template>
-  <div class="search-result-container">
-    <h1>Search</h1>
-    <b-form @submit="onSubmit">
-      <b-form-input v-model="searchString" placeholder="" />
-    </b-form>
-    <b-table
-      class="search-results-table"
-      responsive="md"
-      striped
-      hover
-      :items="attempts"
-      :fields="fields"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { LoginAttempt } from '@/apiary/apiary';
-import { BvTableFieldArray, BvTableFormatterCallback } from 'bootstrap-vue';
-import Axios from 'axios';
-
-@Component
-export default class SearchResult extends Vue {
-  attempts: LoginAttempt[];
-
-  searchString: string;
-
-  constructor() {
-    super();
-    this.attempts = [];
-    this.searchString = '';
-  }
-
-  fields: BvTableFieldArray = [
-    {
-      key: 'date',
-      sortable: true,
-      formatter: (value: string): string => {
-        const d = new Date(value);
-        // This seems stupid...
-        return d.toTimeString().split(' ')[0];
-      },
-      sortByFormatted: false,
-    },
-    {
-      key: 'username',
-    },
-    {
-      key: 'password',
-    },
-    {
-      key: 'remoteIP',
-      sortable: true,
-    },
-    {
-      key: 'country',
-    },
-  ];
-
-  onSubmit(event: Event) {
-    event.preventDefault();
-
-    console.log(this.searchString);
-    const resp = Axios.get<LoginAttempt[]>(
-      `/api/query?query=${this.searchString}`,
-    );
-
-    resp.then((r) => {
-      this.attempts = r.data;
-    });
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.search-results-table {
-  margin-top: 50px;
-}
-</style>
--- a/web/frontend/src/components/Stats.vue
+++ b/web/frontend/src/components/Stats.vue
@ -1,52 +0,0 @@
-<template>
-  <div class="stats">
-    <h1>Login Stats</h1>
-    <b-card no-body>
-      <b-tabs card>
-        <b-tab title="Totals">
-          <b-card-body>
-            <home></home>
-          </b-card-body>
-        </b-tab>
-        <b-tab title="Usernames">
-          <b-card-body>
-            <stats-pie statType="username" />
-          </b-card-body>
-        </b-tab>
-        <b-tab title="Passwords">
-          <b-card-body>
-            <stats-pie statType="password"></stats-pie>
-          </b-card-body>
-        </b-tab>
-        <b-tab title="Countries">
-          <b-card-body>
-            <stats-pie statType="country"></stats-pie>
-          </b-card-body>
-        </b-tab>
-        <b-tab title="IPs">
-          <b-card-body>
-            <stats-pie statType="ip"></stats-pie>
-          </b-card-body>
-        </b-tab>
-      </b-tabs>
-    </b-card>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import StatsUsername from '@/components/StatsUsername.vue';
-import StatsPie from '@/components/StatsPie.vue';
-import Home from '@/components/Home.vue';
-
-@Component({
-  components: {
-    StatsUsername,
-    StatsPie,
-    Home,
-  },
-})
-export default class Stats extends Vue {}
-</script>
-<style lang="scss" scoped>
-</style>
--- a/web/frontend/src/components/StatsPie.vue
+++ b/web/frontend/src/components/StatsPie.vue
@ -1,187 +0,0 @@
-<template>
-  <div class="stats-container" :class="containerClass">
-    <h2>
-      {{ title() }}
-      <b-icon :id="chartSettingsID()" icon="gear-fill"></b-icon>
-    </h2>
-    <div class="chart-container">
-      <canvas :id="chartID()" width="300" height="300"></canvas>
-    </div>
-    <b-popover
-      :target="chartSettingsID()"
-      triggers="click"
-      :show.sync="settingsShow"
-      placement="auto"
-      container="stats-container"
-      ref="popover"
-      @show="onShow"
-    >
-      <template #title>
-        <b-button @click="onClose" class="close" aria-label="Close">
-          <span class="d-inline-block" aria-hidden="true">&times;</span>
-        </b-button>
-        Settings
-      </template>
-
-      <div>
-        <b-form-group
-          label="Limit"
-          label-for="limitinput"
-          label-cols="3"
-          class="mb-1"
-          description="Limit number of items"
-          invalid-feedback="This field is required"
-        >
-          <b-form-input
-            ref="limitinput"
-            id="limitinput"
-            v-model="limitState"
-            type="number"
-            size="sm"
-          ></b-form-input>
-        </b-form-group>
-
-        <b-button @click="onClose" size="sm" variant="danger">Cancel</b-button>
-        <b-button @click="onOk" size="sm" variant="primary">Ok</b-button>
-      </div>
-    </b-popover>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { StatResult } from '@/apiary/apiary';
-import axios from 'axios';
-import { Chart, ArcElement, Legend, DoughnutController, Title } from 'chart.js';
-import randomColor from 'randomcolor';
-
-export type StatType = 'username' | 'password' | 'ip' | 'country' | 'total';
-
-Chart.register(ArcElement, Legend, DoughnutController, Title);
-
-@Component
-export default class StatsPie extends Vue {
-  @Prop() private statType!: StatType;
-
-  limit: number;
-
-  limitState: number;
-
-  settingsShow = false;
-
-  stats: StatResult[];
-
-  chart?: Chart;
-
-  constructor() {
-    super();
-    this.stats = [];
-    this.limit = 10;
-    this.limitState = 10;
-  }
-
-  title(): string {
-    switch (this.statType) {
-      case 'password':
-        return `Top ${this.limit} Passwords`;
-      case 'username':
-        return `Top ${this.limit} Usernames`;
-      case 'ip':
-        return `Top ${this.limit} IPs`;
-      case 'country':
-        return `Top ${this.limit} Countries`;
-      case 'total':
-        return 'Totals';
-      // Why doesn't eslint know that this switch is exhaustive?
-      default:
-        return 'Top 10 Passwords';
-    }
-  }
-
-  containerClass(): string {
-    return `stats-container-${this.statType}`;
-  }
-
-  chartID(): string {
-    return `chart-${this.statType}`;
-  }
-
-  chartSettingsID(): string {
-    return `chartsettings-${this.statType}`;
-  }
-
-  settingsID(): string {
-    return `settings-${this.statType}`;
-  }
-
-  onClose(): void {
-    this.settingsShow = false;
-  }
-
-  onOk(): void {
-    if (this.limitState) {
-      this.limit = this.limitState;
-      this.settingsShow = false;
-    }
-  }
-
-  onShow(): void {
-    // This is called just before the popover is shown
-    // Reset our popover form variables
-    this.limitState = this.limit;
-  }
-
-  @Watch('limit')
-  limitChanged(value: number, oldValue: number): void {
-    this.fetchData();
-  }
-
-  fetchData(): void {
-    const url = `/api/stats?type=${this.statType}&limit=${this.limit}`;
-    axios.get<StatResult[]>(url).then((resp) => {
-      this.stats = resp.data;
-      this.renderPie();
-    });
-  }
-
-  mounted(): void {
-    this.fetchData();
-  }
-
-  renderPie(): void {
-    const elem = document.getElementById(this.chartID()) as HTMLCanvasElement;
-    const ctx = elem.getContext('2d') as CanvasRenderingContext2D;
-    const sortedStats = this.stats.sort();
-    const values = sortedStats.map((s) => s.count);
-    const headers = sortedStats.map((s) => s.name);
-    const colors = sortedStats.map(() => randomColor());
-
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    this.chart = new Chart(ctx, {
-      type: 'doughnut',
-      data: {
-        labels: headers,
-        datasets: [
-          {
-            data: values,
-            backgroundColor: colors,
-          },
-        ],
-      },
-    });
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-canvas {
-  width: 70%;
-  height: auto;
-  max-height: 60vmin;
-}
-.stats-container {
-  align-content: center;
-}
-</style>
--- a/web/frontend/src/components/StatsUsername.vue
+++ b/web/frontend/src/components/StatsUsername.vue
@ -1,67 +0,0 @@
-<template>
-  <div class="stats-container">
-    <h2>Top 10 usernames</h2>
-    <div class="chart-container">
-      <canvas id="chart" widht="400" height="400"></canvas>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { StatResult } from '@/apiary/apiary';
-import axios from 'axios';
-import Chart from 'chart.js/auto';
-import randomColor from 'randomcolor';
-
-@Component
-export default class StatsUsername extends Vue {
-  @Prop() private msg!: string;
-
-  stats: StatResult[];
-
-  constructor() {
-    super();
-    this.stats = [];
-  }
-
-  mounted(): void {
-    axios
-      .get<StatResult[]>('/api/stats?type=username&limit=10')
-      .then((resp) => {
-        this.stats = resp.data;
-        this.renderPie();
-      });
-  }
-
-  renderPie(): void {
-    const elem = document.getElementById('chart') as HTMLCanvasElement;
-    const ctx = elem.getContext('2d') as CanvasRenderingContext2D;
-    const sortedStats = this.stats.sort();
-    const values = sortedStats.map((s) => s.count);
-    const headers = sortedStats.map((s) => s.name);
-    const colors = sortedStats.map(() => randomColor());
-
-    const chart = new Chart(ctx, {
-      type: 'doughnut',
-      data: {
-        labels: headers,
-        options: {},
-        datasets: [
-          {
-            data: values,
-            backgroundColor: colors,
-          },
-        ],
-      },
-    });
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.chart-container {
-  max-width: 500px;
-  max-height: 500px;
-}
-</style>
--- a/web/frontend/src/main.ts
+++ b/web/frontend/src/main.ts
@ -1,58 +0,0 @@
-import Vue from 'vue';
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
-import VueRouter, { RouteConfig } from 'vue-router';
-import AttemptList from '@/components/AttemptList.vue';
-import Home from '@/components/Home.vue';
-import Stats from '@/components/Stats.vue';
-import SearchResult from '@/components/SearchResult.vue';
-import 'bootstrap/dist/css/bootstrap.css';
-import 'bootstrap-vue/dist/bootstrap-vue.css';
-import '@fontsource/rubik';
-import '@fontsource/secular-one';
-import App from './App.vue';
-
-Vue.config.productionTip = false;
-// Make BootstrapVue available throughout your project
-Vue.use(BootstrapVue);
-// Optionally install the BootstrapVue icon components plugin
-Vue.use(IconsPlugin);
-
-Vue.use(VueRouter);
-
-const routes: Array<RouteConfig> = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-    alias: '/home',
-  },
-  {
-    path: '/attempts',
-    name: 'Attempt List',
-    component: AttemptList,
-    props: {
-      // items: testAttempts,
-    },
-  },
-  {
-    path: '/stats',
-    name: 'Stats',
-    component: Stats,
-  },
-  {
-    path: '/search',
-    name: 'Search',
-    component: SearchResult,
-  }
-];
-
-const router = new VueRouter({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes,
-});
-
-new Vue({
-  router,
-  render: (h) => h(App),
-}).$mount('#app');
--- a/web/frontend/src/shims-tsx.d.ts
+++ b/web/frontend/src/shims-tsx.d.ts
@ -1,13 +0,0 @@
-import Vue, { VNode } from 'vue';
-
-declare global {
-  namespace JSX {
-    // tslint:disable no-empty-interface
-    interface Element extends VNode {}
-    // tslint:disable no-empty-interface
-    interface ElementClass extends Vue {}
-    interface IntrinsicElements {
-      [elem: string]: any
-    }
-  }
-}
--- a/web/frontend/src/shims-vue.d.ts
+++ b/web/frontend/src/shims-vue.d.ts
@ -1,5 +0,0 @@
-declare module '*.vue' {
-  import Vue from 'vue';
-
-  export default Vue;
-}
--- a/web/frontend/tsconfig.json
+++ b/web/frontend/tsconfig.json
@ -1,40 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "types": [
-      "webpack-env"
-    ],
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}
--- a/web/frontend/yarn.lock
+++ b/web/frontend/yarn.lock