Add user table with basic editor

This commit is contained in:
aldrin 2021-04-15 11:36:21 +02:00
parent 3376253792
commit e0b48ebe40
4 changed files with 97 additions and 5 deletions

View file

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

View file

@ -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>

View file

@ -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>

View file

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