Add user table with basic editor

src/components/InlineEditor.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <b-input v-if="isEditing" v-model="editorValue" />
+    <span v-else>{{ value }}</span>
+    <b-button @click="toggleEditor">{{
+      isEditing ? "Speichern" : "Bearbeiten"
+    }}</b-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class InlineEditor extends Vue {
+  @Prop() private value: string | undefined;
+
+  private editorValue = "";
+  private isEditing = false;
+
+  private created() {
+    this.editorValue = this.value || "";
+  }
+
+  private toggleEditor() {
+    this.isEditing = !this.isEditing;
+    this.$emit("input", this.editorValue);
+  }
+}
+</script>

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>