base structure

transfered from ff admin

src/views/account/Administration.vue

@@ -0,0 +1,159 @@
+<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">Administration übertragen</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 class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerTransfer">
+        <div class="w-full">
+          <Combobox v-model="selected">
+            <ComboboxLabel>Nutzer suchen</ComboboxLabel>
+            <div class="relative mt-1">
+              <ComboboxInput
+                class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+                :displayValue="
+                  (person) => (person as UserViewModel)?.firstname + ' ' + (person as UserViewModel)?.lastname
+                "
+                @input="query = $event.target.value"
+              />
+              <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </ComboboxButton>
+              <TransitionRoot
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+                @after-leave="query = ''"
+              >
+                <ComboboxOptions
+                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+                >
+                  <ComboboxOption v-if="filtered.length === 0" as="template" disabled>
+                    <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                      <span class="font-normal block truncate">Keine Auswahl</span>
+                    </li>
+                  </ComboboxOption>
+
+                  <ComboboxOption
+                    v-for="user in filtered"
+                    as="template"
+                    :key="user.id"
+                    :value="user"
+                    v-slot="{ selected, active }"
+                  >
+                    <li
+                      class="relative cursor-default select-none py-2 pl-10 pr-4"
+                      :class="{
+                        'bg-primary text-white': active,
+                        'text-gray-900': !active,
+                      }"
+                    >
+                      <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                        {{ user.firstname }} {{ user.lastname }}
+                      </span>
+                      <span
+                        v-if="selected"
+                        class="absolute inset-y-0 left-0 flex items-center pl-3"
+                        :class="{ 'text-white': active, 'text-primary': !active }"
+                      >
+                        <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    </li>
+                  </ComboboxOption>
+                </ComboboxOptions>
+              </TransitionRoot>
+            </div>
+          </Combobox>
+        </div>
+        <div class="flex flex-row justify-end gap-2">
+          <button primary-outline type="reset" class="!w-fit" @click="selected = undefined">abbrechen</button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || selected == undefined">
+            übertragen
+          </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 { useUserStore } from "@/stores/admin/management/user";
+import { isAuthenticatedPromise } from "@/router/authGuard";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import type { UserViewModel } from "@/viewmodels/admin/management/user.models";
+import { useAccountStore } from "@/stores/account";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      query: "" as String,
+      selected: undefined as UserViewModel | undefined,
+    };
+  },
+  computed: {
+    ...mapState(useUserStore, ["users", "loading"]),
+    ...mapState(useAccountStore, ["id"]),
+    filtered(): Array<UserViewModel> {
+      return (
+        this.query === ""
+          ? this.users
+          : this.users.filter((user) =>
+              (user.firstname + " " + user.lastname)
+                .toLowerCase()
+                .replace(/\s+/g, "")
+                .includes(this.query.toLowerCase().replace(/\s+/g, ""))
+            )
+      ).filter((u) => u.id != this.id);
+    },
+  },
+  mounted() {
+    this.fetchUsers();
+  },
+  methods: {
+    ...mapActions(useUserStore, ["fetchUsers"]),
+    triggerTransfer(e: any) {
+      if (this.selected == undefined) return;
+      this.status = "loading";
+      this.$http
+        .put(`/user/transferOwner`, {
+          toId: this.selected.id,
+        })
+        .then(() => {
+          isAuthenticatedPromise(true).catch(() => {});
+          this.status = { status: "success" };
+          setTimeout(() => {
+            this.$router.push({ name: "account-default" });
+          }, 2000);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/views/account/LoginData.vue

@@ -0,0 +1,94 @@
+<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">Meine Anmeldedaten</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
+        <div class="flex flex-col gap-2">
+          <img :src="image" alt="totp" class="w-56 h-56 self-center" />
+
+          <TextCopy :copyText="otp" />
+        </div>
+        <form class="flex flex-col gap-2" @submit.prevent="verify">
+          <div class="-space-y-px">
+            <div>
+              <input id="totp" name="totp" type="text" required placeholder="TOTP prüfen" />
+            </div>
+          </div>
+
+          <div class="flex flex-row gap-2">
+            <button type="submit" primary :disabled="verifyStatus == 'loading' || verifyStatus == 'success'">
+              TOTP prüfen
+            </button>
+            <Spinner v-if="verifyStatus == 'loading'" class="my-auto" />
+            <SuccessCheckmark v-else-if="verifyStatus == 'success'" />
+            <FailureXMark v-else-if="verifyStatus == 'failed'" />
+          </div>
+          <p v-if="verifyError" class="text-center">{{ verifyError }}</p>
+        </form>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } 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 TextCopy from "@/components/TextCopy.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      verification: "loading" as "success" | "loading" | "failed",
+      image: undefined as undefined | string,
+      otp: undefined as undefined | string,
+      verifyStatus: undefined as undefined | "loading" | "success" | "failed",
+      verifyError: "" as string,
+    };
+  },
+  mounted() {
+    this.$http
+      .get(`/user/totp`)
+      .then((result) => {
+        this.verification = "success";
+        this.image = result.data.dataUrl;
+        this.otp = result.data.otp;
+      })
+      .catch((err) => {
+        this.verification = "failed";
+      });
+  },
+  methods: {
+    verify(e: any) {
+      let formData = e.target.elements;
+      this.verifyStatus = "loading";
+      this.verifyError = "";
+      this.$http
+        .post(`/user/verify`, {
+          totp: formData.totp.value,
+        })
+        .then((result) => {
+          this.verifyStatus = "success";
+        })
+        .catch((err) => {
+          this.verifyStatus = "failed";
+          this.verifyError = err.response.data;
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.verifyStatus = undefined;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>

src/views/account/Me.vue

@@ -0,0 +1,126 @@
+<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 type { UserViewModel } from "@/viewmodels/admin/management/user.models";
+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/Permission.vue

@@ -0,0 +1,31 @@
+<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">Meine Berechtigungen</h1>
+      </div>
+    </template>
+    <template #main>
+      <Permission :permissions="permissions" :disableEdit="true" />
+    </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 Permission from "@/components/admin/Permission.vue";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["permissions"]),
+  },
+});
+</script>

src/views/account/View.vue

@@ -0,0 +1,57 @@
+<template>
+  <SidebarLayout>
+    <template #sidebar>
+      <SidebarTemplate
+        mainTitle="Mein Account"
+        :topTitle="config.app_name_overwrite || 'FF Operation'"
+        :showTopList="isOwner"
+      >
+        <template v-if="isOwner" #topList>
+          <RoutingLink
+            title="Administration"
+            :link="{ name: 'account-administration' }"
+            :active="activeRouteName == 'account-administration'"
+          />
+        </template>
+        <template #list>
+          <RoutingLink title="Mein Account" :link="{ name: 'account-me' }" :active="activeRouteName == 'account-me'" />
+          <RoutingLink
+            title="Anmeldedaten"
+            :link="{ name: 'account-logindata' }"
+            :active="activeRouteName == 'account-logindata'"
+          />
+          <RoutingLink
+            title="Meine Berechtigungen"
+            :link="{ name: 'account-permission' }"
+            :active="activeRouteName == 'account-permission'"
+          />
+        </template>
+      </SidebarTemplate>
+    </template>
+    <template #main>
+      <RouterView />
+    </template>
+  </SidebarLayout>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import SidebarLayout from "@/layouts/Sidebar.vue";
+import SidebarTemplate from "@/templates/Sidebar.vue";
+import RoutingLink from "@/components/admin/RoutingLink.vue";
+import { RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
+import { config } from "@/config";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useAbilityStore, ["isOwner"]),
+    activeRouteName() {
+      return this.$route.name;
+    },
+  },
+});
+</script>

src/views/account/ViewSelect.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="w-full h-full bg-white rounded-md flex items-center justify-center">bitte auswählen</div>
+</template>