edit my details

src/components/Footer.vue

@@ -1,10 +1,17 @@
 <template>
   <footer
-    v-if="authCheck && routeName.includes('admin')"
+    v-if="authCheck && (routeName.includes('admin') || routeName.includes('account'))"
     class="md:hidden flex flex-row h-16 min-h-16 justify-center md:justify-normal p-1 bg-white"
   >
     <div class="w-full flex flex-row gap-2 h-full align-middle">
-      <TopLevelLink v-for="item in topLevel" :key="item.key" :link="item" :disableSubLink="true" />
+      <TopLevelLink
+        v-if="routeName.includes('admin')"
+        v-for="item in topLevel"
+        :key="item.key"
+        :link="item"
+        :disableSubLink="true"
+      />
+      <TopLevelLink v-else :link="{ key: 'club', title: 'Zur Verwaltung' }" :disableSubLink="true" />
     </div>
   </footer>
 </template>

src/components/Header.vue

@@ -5,8 +5,9 @@
       <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">Mitgliederverwaltung</h1>
     </RouterLink>
     <div class="flex flex-row gap-2 items-center">
-      <div v-if="authCheck && routeName.includes('admin')" class="hidden md:flex flex-row gap-2 h-full align-middle">
+      <div v-if="authCheck" class="hidden md:flex flex-row gap-2 h-full align-middle">
-        <TopLevelLink v-for="item in topLevel" :key="item.key" :link="item" />
+        <TopLevelLink v-if="routeName.includes('admin')" v-for="item in topLevel" :key="item.key" :link="item" />
+        <TopLevelLink v-else :link="{ key: 'club', title: 'Zur Verwaltung' }" :disable-sub-link="true" />
       </div>
       <UserMenu v-if="authCheck" />
     </div>

src/router/index.ts

@@ -464,7 +464,7 @@ const router = createRouter({
         {
           path: "me",
           name: "account-me",
-          component: () => import("@/views/account/ViewSelect.vue"),
+          component: () => import("@/views/account/Me.vue"),
         },
         {
           path: "logindata",

src/templates/Main.vue

@@ -5,7 +5,7 @@
       :to="{
         name:
           overviewFullOverwrite ??
-          `${rootRoute}${useStagedOverviewLink ? ('-' + overviewOverwrite ?? activeNavigation) : ''}-default`,
+          `${rootRoute}${useStagedOverviewLink ? '-' + (overviewOverwrite ?? activeNavigation) : ''}-default`,
       }"
       class="mid:hidden text-primary"
     >
@@ -37,11 +37,11 @@ export default defineComponent({
   props: {
     overviewFullOverwrite: {
       type: String,
-      default: "",
+      default: null,
     },
     overviewOverwrite: {
       type: String,
-      default: "",
+      default: null,
     },
     useStagedOverviewLink: {
       type: Boolean,

src/views/account/LoginData.vue

@@ -1,5 +1,5 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :useStagedOverviewLink="false">
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
         <h1 class="font-bold text-xl h-8">Meine Anmeldedaten</h1>

src/views/account/Me.vue

@@ -0,0 +1,125 @@
+<template>
+  <MainTemplate :useStagedOverviewLink="false">
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Mein Account</h1>
+      </div>
+    </template>
+    <template #main>
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+      <form
+        v-else-if="user != null"
+        class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+        @submit.prevent="triggerUpdateUser"
+      >
+        <div>
+          <label for="username">Nutzername</label>
+          <input type="text" id="username" required v-model="user.username" />
+        </div>
+        <div>
+          <label for="firstname">Vorname</label>
+          <input type="text" id="firstname" required v-model="user.firstname" />
+        </div>
+        <div>
+          <label for="lastname">Nachname</label>
+          <input type="text" id="lastname" required v-model="user.lastname" />
+        </div>
+        <div>
+          <label for="mail">Mailadresse</label>
+          <input type="email" id="mail" required v-model="user.mail" />
+        </div>
+        <div class="flex flex-row justify-end gap-2">
+          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+            verwerfen
+          </button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+            speichern
+          </button>
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
+        </div>
+      </form>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | UserViewModel,
+      user: null as null | UserViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.user);
+    },
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    resetForm() {
+      this.user = cloneDeep(this.origin);
+    },
+    fetchItem() {
+      this.$http
+        .get(`/user/me`)
+        .then((result) => {
+          this.loading = "fetched";
+          this.user = result.data;
+          this.origin = cloneDeep(result.data);
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    triggerUpdateUser(e: any) {
+      if (this.user == null) return;
+      let formData = e.target.elements;
+      this.status = "loading";
+      this.$http
+        .patch(`/user/me`, {
+          username: formData.username.value,
+          firstname: formData.firstname.value,
+          lastname: formData.lastname.value,
+          mail: formData.mail.value,
+        })
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>

src/views/account/View.vue

@@ -6,7 +6,7 @@
           <RoutingLink title="Administration" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
         </template>
         <template #list>
-          <RoutingLink title="Mein Account" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
+          <RoutingLink title="Mein Account" :link="{ name: 'account-me' }" :active="activeRouteName == 'account-me'" />
           <RoutingLink
             title="Anmeldedaten"
             :link="{ name: 'account-logindata' }"