From 4a1fe8dd1ec72cb772ce48fd5d20311628186100 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 19 Jun 2023 10:36:10 +0800
Subject: [PATCH] perf: disallow repeated clicks when third-party login (#4066)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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 端登录页面的三方登录方式按钮，禁用重复点击。
```
---
 .../components/login/SocialAuthProviderItem.vue    | 14 +++++++++++++-
 .../src/components/login/SocialAuthProviders.vue   |  6 +++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/console/src/components/login/SocialAuthProviderItem.vue b/console/src/components/login/SocialAuthProviderItem.vue
index a93bff310..57439ae9e 100644
--- a/console/src/components/login/SocialAuthProviderItem.vue
+++ b/console/src/components/login/SocialAuthProviderItem.vue
@@ -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
diff --git a/console/src/components/login/SocialAuthProviders.vue b/console/src/components/login/SocialAuthProviders.vue
index 8cb04b35f..16a3a3f85 100644
--- a/console/src/components/login/SocialAuthProviders.vue
+++ b/console/src/components/login/SocialAuthProviders.vue
@@ -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>