Merge pull request #813 from nagisa77/codex/create-unified-ui-for-third-party-login

feat: unify third-party auth component

frontend_nuxt/components/ThirdPartyAuth.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="third-party-auth">
+    <div
+      v-for="provider in providers"
+      :key="provider.name"
+      class="third-party-button"
+      :class="provider.name"
+      @click="provider.action"
+    >
+      <img class="third-party-button-icon" :src="provider.icon" :alt="provider.alt" />
+      <div class="third-party-button-text">
+        {{ provider.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import googleIcon from '~/assets/icons/google.svg'
+import githubIcon from '~/assets/icons/github.svg'
+import discordIcon from '~/assets/icons/discord.svg'
+import twitterIcon from '~/assets/icons/twitter.svg'
+import telegramIcon from '~/assets/icons/telegram.svg'
+
+import { googleAuthorize } from '~/utils/google'
+import { githubAuthorize } from '~/utils/github'
+import { discordAuthorize } from '~/utils/discord'
+import { twitterAuthorize } from '~/utils/twitter'
+import { telegramAuthorize } from '~/utils/telegram'
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'login',
+  },
+  inviteToken: {
+    type: String,
+    default: '',
+  },
+})
+
+const actionText = computed(() => (props.mode === 'signup' ? '注册' : '登录'))
+
+const providers = computed(() => [
+  {
+    name: 'google',
+    icon: googleIcon,
+    action: () => googleAuthorize(props.inviteToken),
+    alt: 'Google Logo',
+    label: `Google ${actionText.value}`,
+  },
+  {
+    name: 'github',
+    icon: githubIcon,
+    action: () => githubAuthorize(props.inviteToken),
+    alt: 'GitHub Logo',
+    label: `GitHub ${actionText.value}`,
+  },
+  {
+    name: 'discord',
+    icon: discordIcon,
+    action: () => discordAuthorize(props.inviteToken),
+    alt: 'Discord Logo',
+    label: `Discord ${actionText.value}`,
+  },
+  {
+    name: 'twitter',
+    icon: twitterIcon,
+    action: () => twitterAuthorize(props.inviteToken),
+    alt: 'Twitter Logo',
+    label: `Twitter ${actionText.value}`,
+  },
+  {
+    name: 'telegram',
+    icon: telegramIcon,
+    action: () => telegramAuthorize(props.inviteToken),
+    alt: 'Telegram Logo',
+    label: `Telegram ${actionText.value}`,
+  },
+])
+</script>
+
+<style scoped>
+.third-party-auth {
+  margin-left: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 30%;
+  gap: 20px;
+}
+
+.third-party-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 20px;
+  min-width: 150px;
+  background-color: var(--login-background-color);
+  border: 1px solid var(--normal-border-color);
+  border-radius: 10px;
+  cursor: pointer;
+  gap: 10px;
+}
+
+.third-party-button:hover {
+  background-color: var(--login-background-color-hover);
+}
+
+.third-party-button-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.third-party-button-text {
+  font-size: 16px;
+}
+
+/* Provider specific classes for customization */
+.third-party-button.google {
+  background-color: var(--google-bg, var(--login-background-color));
+  color: var(--google-color, inherit);
+}
+.third-party-button.google:hover {
+  background-color: var(--google-bg-hover, var(--login-background-color-hover));
+}
+
+.third-party-button.github {
+  background-color: var(--github-bg, var(--login-background-color));
+  color: var(--github-color, inherit);
+}
+.third-party-button.github:hover {
+  background-color: var(--github-bg-hover, var(--login-background-color-hover));
+}
+
+.third-party-button.discord {
+  background-color: var(--discord-bg, var(--login-background-color));
+  color: var(--discord-color, inherit);
+}
+.third-party-button.discord:hover {
+  background-color: var(--discord-bg-hover, var(--login-background-color-hover));
+}
+
+.third-party-button.twitter {
+  background-color: var(--twitter-bg, var(--login-background-color));
+  color: var(--twitter-color, inherit);
+}
+.third-party-button.twitter:hover {
+  background-color: var(--twitter-bg-hover, var(--login-background-color-hover));
+}
+
+.third-party-button.telegram {
+  background-color: var(--telegram-bg, var(--login-background-color));
+  color: var(--telegram-color, inherit);
+}
+.third-party-button.telegram:hover {
+  background-color: var(--telegram-bg-hover, var(--login-background-color-hover));
+}
+
+@media (max-width: 768px) {
+  .third-party-auth {
+    margin-top: 20px;
+    margin-left: 0px;
+    width: calc(100% - 40px);
+    gap: 10px;
+  }
+
+  .third-party-button {
+    width: calc(100% - 40px);
+  }
+}
+</style>

frontend_nuxt/pages/login.vue

@@ -34,44 +34,15 @@
       </div>
     </div>
 
-    <div class="other-login-page-content">
+    <ThirdPartyAuth mode="login" />
-      <div class="login-page-button" @click="loginWithGoogle">
-        <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
-        <div class="login-page-button-text">Google 登录</div>
-      </div>
-      <div class="login-page-button" @click="loginWithGithub">
-        <img class="login-page-button-icon" src="../assets/icons/github.svg" alt="GitHub Logo" />
-        <div class="login-page-button-text">GitHub 登录</div>
-      </div>
-      <div class="login-page-button" @click="loginWithDiscord">
-        <img class="login-page-button-icon" src="../assets/icons/discord.svg" alt="Discord Logo" />
-        <div class="login-page-button-text">Discord 登录</div>
-      </div>
-      <div class="login-page-button" @click="loginWithTwitter">
-        <img class="login-page-button-icon" src="../assets/icons/twitter.svg" alt="Twitter Logo" />
-        <div class="login-page-button-text">Twitter 登录</div>
-      </div>
-      <div class="login-page-button" @click="loginWithTelegram">
-        <img
-          class="login-page-button-icon"
-          src="../assets/icons/telegram.svg"
-          alt="Telegram Logo"
-        />
-        <div class="login-page-button-text">Telegram 登录</div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
 import { toast } from '~/main'
 import { setToken, loadCurrentUser } from '~/utils/auth'
-import { googleAuthorize } from '~/utils/google'
-import { githubAuthorize } from '~/utils/github'
-import { discordAuthorize } from '~/utils/discord'
-import { twitterAuthorize } from '~/utils/twitter'
-import { telegramAuthorize } from '~/utils/telegram'
 import BaseInput from '~/components/BaseInput.vue'
+import ThirdPartyAuth from '~/components/ThirdPartyAuth.vue'
 import { registerPush } from '~/utils/push'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
@@ -114,22 +85,6 @@ const submitLogin = async () => {
     isWaitingForLogin.value = false
   }
 }
-
-const loginWithGoogle = () => {
-  googleAuthorize()
-}
-const loginWithGithub = () => {
-  githubAuthorize()
-}
-const loginWithDiscord = () => {
-  discordAuthorize()
-}
-const loginWithTwitter = () => {
-  twitterAuthorize()
-}
-const loginWithTelegram = () => {
-  telegramAuthorize()
-}
 </script>
 
 <style scoped>
@@ -202,16 +157,6 @@ const loginWithTelegram = () => {
   font-size: 16px;
 }
 
-.other-login-page-content {
-  margin-left: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 30%;
-  gap: 20px;
-}
-
 .login-page-button-primary {
   margin-top: 20px;
   display: flex;
@@ -241,29 +186,6 @@ const loginWithTelegram = () => {
   background-color: var(--primary-color-disabled);
 }
 
-.login-page-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 20px;
-  min-width: 150px;
-  background-color: var(--login-background-color);
-  border: 1px solid var(--normal-border-color);
-  border-radius: 10px;
-  cursor: pointer;
-  gap: 10px;
-}
-
-.login-page-button:hover {
-  background-color: var(--login-background-color-hover);
-}
-
-.login-page-button-icon {
-  width: 20px;
-  height: 20px;
-}
-
 .login-page-button-text {
   font-size: 16px;
 }
@@ -305,16 +227,5 @@ const loginWithTelegram = () => {
     margin-top: 0px;
     font-size: 13px;
   }
-
-  .other-login-page-content {
-    margin-top: 20px;
-    margin-left: 0px;
-    width: calc(100% - 40px);
-    gap: 10px;
-  }
-
-  .login-page-button {
-    width: calc(100% - 40px);
-  }
 }
 </style>

frontend_nuxt/pages/signup.vue

@@ -68,44 +68,15 @@
       </div>
     </div>
 
-    <div class="other-signup-page-content">
+    <ThirdPartyAuth mode="signup" :invite-token="inviteToken" />
-      <div class="signup-page-button" @click="signupWithGoogle">
-        <img class="signup-page-button-icon" src="~/assets/icons/google.svg" alt="Google Logo" />
-        <div class="signup-page-button-text">Google 注册</div>
-      </div>
-      <div class="signup-page-button" @click="signupWithGithub">
-        <img class="signup-page-button-icon" src="~/assets/icons/github.svg" alt="GitHub Logo" />
-        <div class="signup-page-button-text">GitHub 注册</div>
-      </div>
-      <div class="signup-page-button" @click="signupWithDiscord">
-        <img class="signup-page-button-icon" src="~/assets/icons/discord.svg" alt="Discord Logo" />
-        <div class="signup-page-button-text">Discord 注册</div>
-      </div>
-      <div class="signup-page-button" @click="signupWithTwitter">
-        <img class="signup-page-button-icon" src="~/assets/icons/twitter.svg" alt="Twitter Logo" />
-        <div class="signup-page-button-text">Twitter 注册</div>
-      </div>
-      <div class="signup-page-button" @click="signupWithTelegram">
-        <img
-          class="signup-page-button-icon"
-          src="~/assets/icons/telegram.svg"
-          alt="Telegram Logo"
-        />
-        <div class="signup-page-button-text">Telegram 注册</div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
 import BaseInput from '~/components/BaseInput.vue'
 import { toast } from '~/main'
-import { discordAuthorize } from '~/utils/discord'
-import { githubAuthorize } from '~/utils/github'
-import { googleAuthorize } from '~/utils/google'
-import { twitterAuthorize } from '~/utils/twitter'
-import { telegramAuthorize } from '~/utils/telegram'
 import { loadCurrentUser, setToken } from '~/utils/auth'
+import ThirdPartyAuth from '~/components/ThirdPartyAuth.vue'
 
 const route = useRoute()
 const config = useRuntimeConfig()
@@ -225,21 +196,6 @@ const verifyCode = async () => {
     isWaitingForEmailVerified.value = false
   }
 }
-const signupWithGoogle = () => {
-  googleAuthorize(inviteToken.value)
-}
-const signupWithGithub = () => {
-  githubAuthorize(inviteToken.value)
-}
-const signupWithDiscord = () => {
-  discordAuthorize(inviteToken.value)
-}
-const signupWithTwitter = () => {
-  twitterAuthorize(inviteToken.value)
-}
-const signupWithTelegram = () => {
-  telegramAuthorize(inviteToken.value)
-}
 </script>
 
 <style scoped>
@@ -312,16 +268,6 @@ const signupWithTelegram = () => {
   font-size: 16px;
 }
 
-.other-signup-page-content {
-  margin-left: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 30%;
-  gap: 20px;
-}
-
 .signup-page-button-primary {
   margin-top: 20px;
   display: flex;
@@ -351,29 +297,6 @@ const signupWithTelegram = () => {
   background-color: var(--primary-color-hover);
 }
 
-.signup-page-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 20px;
-  background-color: var(--login-background-color);
-  border: 1px solid var(--normal-border-color);
-  border-radius: 10px;
-  cursor: pointer;
-  min-width: 150px;
-  gap: 10px;
-}
-
-.signup-page-button:hover {
-  background-color: var(--login-background-color-hover);
-}
-
-.signup-page-button-icon {
-  width: 20px;
-  height: 20px;
-}
-
 .signup-page-button-text {
   font-size: 16px;
 }
@@ -423,16 +346,5 @@ const signupWithTelegram = () => {
     margin-top: 0px;
     font-size: 13px;
   }
-
-  .other-signup-page-content {
-    margin-top: 20px;
-    margin-left: 0px;
-    width: calc(100% - 40px);
-    gap: 10px;
-  }
-
-  .signup-page-button {
-    width: calc(100% - 40px);
-  }
 }
 </style>