marzban-dev
93 lines
2.8 KiB
Vue
93 lines
2.8 KiB
Vue
<script setup lang="ts">
|
||
// imports
|
||
|
||
import { useAuth } from "~/composables/api/auth/useAuth";
|
||
import useSignOut from "~/composables/api/auth/useSignOut";
|
||
import { useToast } from "~/composables/global/useToast";
|
||
|
||
// state
|
||
|
||
const { refreshToken, logout } = useAuth();
|
||
const { addToast } = useToast();
|
||
|
||
const isShow = ref(false);
|
||
|
||
// queries
|
||
|
||
const { mutateAsync: signout, isPending: signoutIsPending } = useSignOut();
|
||
|
||
// methods
|
||
|
||
const handleSubmit = () => {
|
||
signout(
|
||
{ refresh_token: refreshToken.value! },
|
||
{
|
||
onSuccess: () => {
|
||
addToast({
|
||
message: "با موفقیت از حساب خارج شدید",
|
||
});
|
||
logout(true);
|
||
},
|
||
onError: () => {
|
||
addToast({
|
||
message: "خطایی در خروج از حساب رخ داد",
|
||
});
|
||
isShow.value = false;
|
||
},
|
||
}
|
||
);
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Modal
|
||
v-model="isShow"
|
||
title="خروج از حساب"
|
||
icon="ci:bi-arrow-bar-right"
|
||
contectClass="!w-[90vw] lg:!w-[35vw]"
|
||
@close="isShow = false"
|
||
>
|
||
<template #trigger>
|
||
<slot name="trigger" />
|
||
</template>
|
||
|
||
<template #content>
|
||
<div class="w-full flex flex-col text-start gap-3 py-5" dir="rtl">
|
||
<p class="leading-[175%] text-xs lg:text-sm">
|
||
با خارج شدن از حساب کاربری، دسترسی شما به برخی از امکانات
|
||
محدود خواهد شد. اگر قصد دارید دوباره وارد شوید، میتوانید از
|
||
همان اطلاعات حساب خود استفاده کنید.
|
||
</p>
|
||
<p class="text-xs lg:text-sm">
|
||
ما همیشه منتظر بازگشت شما هستیم! 😊
|
||
</p>
|
||
</div>
|
||
|
||
<div class="py-6 border-t border-slate-200 flex gap-3">
|
||
<Button
|
||
@click="handleSubmit"
|
||
class="rounded-full px-5 lg:px-10"
|
||
size="md"
|
||
>
|
||
<Icon
|
||
v-if="signoutIsPending"
|
||
name="ci:svg-spinners-3-dots-bounce"
|
||
/>
|
||
<span v-else>آره دارم میرم</span>
|
||
</Button>
|
||
<DialogClose aria-label="Close">
|
||
<Button
|
||
variant="outlined"
|
||
class="rounded-full px-5 lg:px-10"
|
||
size="md"
|
||
>
|
||
نه فعلا هستم
|
||
</Button>
|
||
</DialogClose>
|
||
</div>
|
||
</template>
|
||
</Modal>
|
||
</template>
|
||
|
||
<style scoped></style>
|