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
Ryan Wang 2023-06-19 10:36:10 +08:00 committed by GitHub
parent 1b581d5d6f
commit 4a1fe8dd1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 2 deletions

View File

@ -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

View File

@ -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>