Add user table with basic editor

src/components/UserTable.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <b-notification
+      v-if="!user.username"
+      type="is-warning"
+      aria-close-label="Close notification"
+    >
+      Um dein Konto zu aktivieren, musst du einen
+      <strong>Benutzernamen</strong> festlegen.
+    </b-notification>
+    <b-notification
+      v-if="!user.confidant_email"
+      type="is-warning"
+      aria-close-label="Close notification"
+    >
+      Um dein Konto zu aktivieren, musst du eine
+      <strong>Vertrauensperson</strong> angeben.
+    </b-notification>
+    <table class="table is-fullwidth">
+      <tbody>
+        <tr>
+          <td>Kontostatus</td>
+          <td>nicht aktiviert</td>
+        </tr>
+        <tr>
+          <td>Benutzername</td>
+          <td><InlineEditor v-model="user.username" /></td>
+        </tr>
+        <tr>
+          <td>Vertrauensperson</td>
+          <td><inline-editor v-model="user.confidant_email" /></td>
+        </tr>
+        <tr>
+          <td>E-Mail-Adresse</td>
+          <td>{{ user.email }} (bestätigt)</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { User } from "@/api";
+import InlineEditor from "@/components/InlineEditor.vue";
+
+@Component({
+  components: { InlineEditor },
+})
+export default class UserTable extends Vue {
+  @Prop() private user!: User;
+}
+</script>