Add homepage with some stats

web/frontend/src/App.vue

@@ -32,11 +32,13 @@
 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 {}

web/frontend/src/components/Home.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="home">
+    <b-container v-if="totalStats">
+      <b-row>
+        <b-col class="total-title">
+          <h2>Total login attempts</h2>
+        </b-col>
+        <b-col class="total-count">
+          <h2>{{ getStat('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>{{ getStat('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>{{ getStat('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>{{ getStat('UniqueIPs') }}</h2>
+        </b-col>
+      </b-row>
+    </b-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } 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 {
+  totalStats?: TotalStatsResult[];
+
+  getStat(key: TotalStatsHeaders): string | undefined {
+    const result = this.totalStats?.find((elem) => elem.name === key);
+    if (result) {
+      return Number(result?.count).toLocaleString();
+    }
+    return undefined;
+  }
+
+  updateStats(): void {
+    const url = `/api/stats?type=total`;
+    axios
+      .get<TotalStatsResult[]>(url)
+      .then((resp) => {
+        this.totalStats = resp.data;
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }
+
+  mounted(): void {
+    this.updateStats();
+
+    setInterval(() => {
+      this.updateStats();
+    }, 5000);
+  }
+}
+</script>
+<style scoped lang="scss">
+.home {
+  text-align: left;
+}
+.total-title {
+  text-align: right;
+}
+.total-count {
+  text-align: left;
+}
+</style>

web/frontend/src/main.ts

@@ -2,6 +2,7 @@ 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 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
@@ -21,7 +22,7 @@ const routes: Array<RouteConfig> = [
   {
     path: '/',
     name: 'Home',
-    component: Stats,
+    component: Home,
     alias: '/home',
   },
   {

web/frontend/src/router/router.ts

@@ -1,27 +0,0 @@
-import Vue from 'vue';
-import VueRouter, { RouteConfig } from 'vue-router';
-import AttemptList from "../components/Simulator.vue";
-import HelloWorld from "../components/HelloWorld.vue";
-
-Vue.use(VueRouter);
-
-const routes: Array<RouteConfig> = [
-    {
-        path: '/',
-        name: 'Home',
-        component: HelloWorld
-    },
-    {
-        path: '/attempts',
-        name: 'Attempt List',
-        component: AttemptList
-    }
-];
-
-const router = new VueRouter({
-    mode: 'history',
-    base: process.env.BASE_URL,
-    routes
-});
-
-export default router;