Add user table with basic editor

src/api.ts

@@ -57,13 +57,20 @@ class Model {
 interface UserData {
   email: string;
   password: string;
+  username: string | undefined;
+  confidant_email: string | undefined;
 }
 
 export class User extends Model implements UserData {
   public isAuthenticated = false;
   private token = "";
 
-  constructor(public email: string, public password: string) {
+  constructor(
+    public email: string,
+    public password: string,
+    public username: string | undefined,
+    public confidant_email: string | undefined
+  ) {
     super();
   }
 

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>

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="container">
     <div class="columns is-centered">
-      <div class="column is-3-widescreen is-4-desktop is-5-tablet">
+      <div class="column is-5-widescreen is-4-desktop is-5-tablet">
         <b-notification
           v-if="isConfirmation"
           type="is-success"
@@ -10,7 +10,8 @@
           Deine E-Mail-Adresse wurde erfolgreich bestätigt. Du kannst dich nun
           anmelden.
         </b-notification>
-        <LoginForm v-if="!user.isAuthenticated" :user="user" />
+        <UserTable v-if="user.isAuthenticated" :user="user" />
+        <LoginForm v-else :user="user" />
       </div>
     </div>
   </section>
@@ -20,11 +21,12 @@
 import { Component, Vue } from "vue-property-decorator";
 import LoginForm from "@/components/LoginForm.vue";
 import { User } from "@/api";
+import UserTable from "@/components/UserTable.vue";
 
-@Component({ components: { LoginForm } })
+@Component({ components: { UserTable, LoginForm } })
 export default class Home extends Vue {
   private isConfirmation = false;
-  private user = new User("", "");
+  private user = new User("", "", undefined, undefined);
 
   private async created() {
     if (this.$route.name === "Confirm") this.isConfirmation = true;