Initial commit

web/frontend/src/components/AttemptList.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="attemptlist">
+    <h1>Attempt list</h1>
+    <p>
+      <b-table
+        striped
+        hover
+        :items="prettiedAttempts"
+        :fields="fields"
+      ></b-table>
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { BvTableFieldArray } from 'bootstrap-vue';
+import ago from 's-ago';
+import { LoginAttempt, fakeAttempt, fakeAttemptStream } 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 => ago(new Date(value)),
+      sortByFormatted: false,
+    },
+    {
+      key: 'username',
+    },
+    {
+      key: 'password',
+    },
+    {
+      key: 'remoteIP',
+      sortable: true,
+    },
+  ];
+
+  constructor() {
+    super();
+    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);
+    const at: LoginAttempt[] = [];
+
+    for (let i = 0; i < 5; i += 1) {
+      at.push(fakeAttempt());
+    }
+
+    setInterval(() => {
+      at.push(fakeAttempt());
+    }, 1000);
+    */
+
+    const attemptStream = fakeAttemptStream();
+    attemptStream.addEventListener('message', (ev: MessageEvent<string>) => {
+      console.log(ev);
+      const parsed: LoginAttempt = JSON.parse(ev.data);
+      this.attempts.unshift(parsed);
+    });
+  }
+}
+</script>