Update frontend

web/frontend/src/App.vue

@@ -14,28 +14,22 @@
         </b-navbar-brand>
         <b-navbar-nav>
           <b-nav-item :to="'/'">Home</b-nav-item>
-          <b-nav-item :to="'/hello'">Hello</b-nav-item>
           <b-nav-item :to="'/stats'">Stats</b-nav-item>
           <b-nav-item :to="'/attempts'">Attempts</b-nav-item>
         </b-navbar-nav>
       </b-navbar>
     </div>
     <router-view></router-view>
-    <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
-    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" /> -->
-    <!-- <AttemptList items="{ testAttempts }" /> -->
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import HelloWorld from '@/components/HelloWorld.vue';
 import AttemptList from '@/components/AttemptList.vue';
 import Stats from '@/components/Stats.vue';
 
 @Component({
   components: {
-    HelloWorld,
     AttemptList,
     Stats,
   },

web/frontend/src/components/AttemptList.vue

@@ -2,12 +2,7 @@
   <div class="attemptlist">
     <h1>Attempt list</h1>
     <p>
-      <b-table
+      <b-table striped hover :items="attempts" :fields="fields"></b-table>
-        striped
-        hover
-        :items="prettiedAttempts"
-        :fields="fields"
-      ></b-table>
     </p>
   </div>
 </template>
@@ -15,8 +10,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { BvTableFieldArray } from 'bootstrap-vue';
-import ago from 's-ago';
+import { LoginAttempt } from '@/apiary/apiary';
-import { LoginAttempt, fakeAttempt, fakeAttemptStream } from '@/apiary/apiary';
 
 @Component
 export default class AttemptList extends Vue {
@@ -28,7 +22,7 @@ export default class AttemptList extends Vue {
     {
       key: 'date',
       sortable: true,
-      // formatter: (value: string): string => ago(new Date(value)),
+      formatter: (value: string): string => new Date(value).toTimeString(),
       sortByFormatted: false,
     },
     {
@@ -41,6 +35,9 @@ export default class AttemptList extends Vue {
       key: 'remoteIP',
       sortable: true,
     },
+    {
+      key: 'country',
+    },
   ];
 
   constructor() {
@@ -48,18 +45,6 @@ export default class AttemptList extends Vue {
     this.attempts = [];
   }
 
-  prettiedAttempts(): LoginAttempt[] {
-    const prettied = this.attempts.map<LoginAttempt>((value: LoginAttempt) => ({
-      date: ago(new Date(value.date)),
-      remoteIP: value.remoteIP,
-      username: value.username,
-      password: value.password,
-      sshClientVersion: value.sshClientVersion,
-      connectionUUID: value.connectionUUID,
-    }));
-    return prettied;
-  }
-
   mounted(): void {
     /**
     console.log(this);
@@ -74,7 +59,7 @@ export default class AttemptList extends Vue {
     }, 1000);
     */
 
-    const attemptStream = fakeAttemptStream();
+    const attemptStream = new EventSource('/api/stream');
     attemptStream.addEventListener('message', (ev: MessageEvent<string>) => {
       console.log(ev);
       const parsed: LoginAttempt = JSON.parse(ev.data);

web/frontend/src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

web/frontend/src/main.ts

@@ -2,13 +2,11 @@ import Vue from 'vue';
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
 import VueRouter, { RouteConfig } from 'vue-router';
 import AttemptList from '@/components/AttemptList.vue';
-import HelloWorld from '@/components/HelloWorld.vue';
 import Stats from '@/components/Stats.vue';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 import '@fontsource/rubik';
 import '@fontsource/secular-one';
-import { LoginAttempt } from '@/apiary/apiary';
 import App from './App.vue';
 
 Vue.config.productionTip = false;
@@ -19,24 +17,13 @@ Vue.use(IconsPlugin);
 
 Vue.use(VueRouter);
 
-Vue.use(VueRouter);
-
 const routes: Array<RouteConfig> = [
   {
     path: '/',
     name: 'Home',
-    component: HelloWorld,
+    component: Stats,
     alias: '/home',
   },
-  {
-    path: '/hello',
-    name: 'Hello',
-    component: HelloWorld,
-    props: {
-      default: true,
-      msg: 'LOL',
-    },
-  },
   {
     path: '/attempts',
     name: 'Attempt List',