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

82 lines
2.8 KiB
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>