ff-admin/src/views/account/LoginData.vue

<template>
  <MainTemplate title="Meine Anmeldedaten" :useStagedOverviewLink="false">
    <template #diffMain>
      <Spinner v-if="loading" class="mx-auto" />
      <div v-else class="flex flex-col w-full h-full gap-2 px-7 overflow-hidden">
        <div class="w-full flex flex-row gap-2 justify-center">
          <p
            class="w-1/2 p-0.5 pl-0 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
            :class="
              tab == 'totp' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200'
            "
            @click="tab = 'totp'"
          >
            TOTP
          </p>
          <p
            class="w-1/2 p-0.5 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
            :class="
              tab == 'password' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : 'hover:bg-red-200'
            "
            @click="tab = 'password'"
          >
            Passwort
          </p>
        </div>
        <ChangeToTOTP
          v-if="currentRoutine == 'password' && tab == 'totp'"
          :currentRoutine="currentRoutine"
          @updateCurrent="currentRoutine = 'totp'"
        />
        <ChangeToPassword
          v-else-if="currentRoutine == 'totp' && tab == 'password'"
          :currentRoutine="currentRoutine"
          @updateCurrent="currentRoutine = 'password'"
        />
        <TotpCheckAndScan v-else-if="tab == 'totp'" />
        <PasswordChange v-else-if="tab == 'password'" />
        <p v-else>etwas ist schief gelaufen</p>
      </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";
import TotpCheckAndScan from "@/components/account/TotpCheckAndScan.vue";
import PasswordChange from "@/components/account/PasswordChange.vue";
import ChangeToPassword from "@/components/account/ChangeToPassword.vue";
import ChangeToTOTP from "@/components/account/ChangeToTOTP.vue";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      loading: false,
      tab: "",
      currentRoutine: "",
    };
  },
  mounted() {
    this.loading = true;
    this.$http
      .get(`/user/routine`)
      .then((result) => {
        this.tab = result.data.routine;
        this.currentRoutine = result.data.routine;
      })
      .catch((err) => {})
      .finally(() => {
        this.loading = false;
      });
  },
  methods: {},
});
</script>