mirror of https://github.com/halo-dev/halo
perf: disallow repeated clicks when third-party login (#4066)
#### What type of PR is this? /area console /kind improvement /milestone 2.7.x #### What this PR does / why we need it: 在使用某个三方登录的时候,禁用其他三方登录,防止重复点击。 #### Which issue(s) this PR fixes: Fixes #4064 #### Special notes for your reviewer: 测试方式: 1. 可安装 https://github.com/halo-sigs/plugin-oauth2 进行测试,可以不用配置各个登录方式,只需开启即可。 2. 在登录页面点击某个三方登录方式,观察所有三方登录方式的按钮是否被禁用。 #### Does this PR introduce a user-facing change? ```release-note 优化 Console 端登录页面的三方登录方式按钮,禁用重复点击。 ```pull/4056/head^2
parent
1b581d5d6f
commit
4a1fe8dd1e
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import type { SocialAuthProvider } from "@/modules/system/actuator/types";
|
||||
import { ref } from "vue";
|
||||
import { inject, ref } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
|
@ -11,7 +12,13 @@ const props = withDefaults(
|
|||
|
||||
const loading = ref(false);
|
||||
|
||||
const disabled = inject<Ref<boolean>>("disabled");
|
||||
|
||||
function handleSocialLogin() {
|
||||
if (disabled) {
|
||||
disabled.value = true;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
window.location.href = props.authProvider.authenticationUrl;
|
||||
}
|
||||
|
@ -20,6 +27,11 @@ function handleSocialLogin() {
|
|||
<template>
|
||||
<button
|
||||
class="group inline-flex select-none flex-row items-center gap-2 rounded bg-white px-2.5 py-1.5 ring-1 ring-gray-200 transition-all hover:bg-gray-100 hover:shadow hover:ring-gray-900"
|
||||
:class="{
|
||||
'cursor-not-allowed opacity-80 hover:shadow-none hover:ring-gray-200':
|
||||
disabled,
|
||||
}"
|
||||
:disabled="disabled"
|
||||
@click="handleSocialLogin"
|
||||
>
|
||||
<svg
|
||||
|
|
|
@ -1,10 +1,14 @@
|
|||
<script lang="ts" setup>
|
||||
// auth providers
|
||||
import { ref, provide } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
|
||||
// auth providers
|
||||
import { useGlobalInfoFetch } from "@/composables/use-global-info";
|
||||
import SocialAuthProviderItem from "./SocialAuthProviderItem.vue";
|
||||
|
||||
const { globalInfo } = useGlobalInfoFetch();
|
||||
|
||||
provide<Ref<boolean>>("disabled", ref(false));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
Loading…
Reference in New Issue