halo/ui/console-src/views/system/Binding.vue

88 lines
2.4 KiB
Vue

<script lang="ts" setup>
import { computed, onBeforeMount, onMounted } from "vue";
import router from "@console/router";
import { useUserStore } from "@/stores/user";
import LoginForm from "@/components/login/LoginForm.vue";
import { useRoute } from "vue-router";
import { Toast } from "@halo-dev/components";
import { useRouteQuery } from "@vueuse/router";
import SignupForm from "@/components/signup/SignupForm.vue";
import { useGlobalInfoFetch } from "@console/composables/use-global-info";
import { useI18n } from "vue-i18n";
const userStore = useUserStore();
const route = useRoute();
const { t } = useI18n();
onBeforeMount(() => {
if (!userStore.isAnonymous) {
router.push({ name: "Dashboard" });
}
});
const { globalInfo } = useGlobalInfoFetch();
onMounted(() => {
Toast.warning(t("core.binding.common.toast.mounted"));
});
function handleBinding() {
const authProvider = globalInfo.value?.socialAuthProviders.find(
(p) => p.name === route.params.provider
);
if (!authProvider?.bindingUrl) {
Toast.error(t("core.binding.operations.bind.toast_failed"));
return;
}
window.location.href = authProvider?.bindingUrl;
Toast.success(t("core.binding.operations.bind.toast_success"));
}
const type = useRouteQuery<string>("type", "");
function handleChangeType() {
type.value = type.value === "signup" ? "" : "signup";
}
const isLoginType = computed(() => type.value !== "signup");
</script>
<template>
<div class="flex w-72 flex-col">
<SignupForm
v-if="type === 'signup'"
button-text="core.binding.operations.signup_and_bind.button"
@succeed="handleBinding"
/>
<LoginForm
v-else
button-text="core.binding.operations.login_and_bind.button"
@succeed="handleBinding"
/>
<div
v-if="globalInfo?.allowRegistration"
class="flex justify-center gap-1 pt-3.5 text-xs"
>
<span class="text-slate-500">
{{
isLoginType
? $t("core.login.operations.signup.label")
: $t("core.login.operations.return_login.label")
}}
</span>
<span
class="cursor-pointer text-secondary hover:text-gray-600"
@click="handleChangeType"
>
{{
isLoginType
? $t("core.login.operations.signup.button")
: $t("core.login.operations.return_login.button")
}}
</span>
</div>
</div>
</template>