From 2719819ad72280619e8e72fced924f4713815051 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Mon, 1 Sep 2025 13:16:00 +0800
Subject: [PATCH] Revert "chore: remove obsolete login styles"

This reverts commit 18fde1052f6807a668fdfe0adfc4eadcd9a87b49.
---
 frontend_nuxt/assets/global.css               |  20 ---
 .../components/ThirdPartyAuthButtons.vue      | 151 ------------------
 frontend_nuxt/pages/login.vue                 |  97 ++++++++++-
 frontend_nuxt/pages/signup.vue                |  96 ++++++++++-
 4 files changed, 189 insertions(+), 175 deletions(-)
 delete mode 100644 frontend_nuxt/components/ThirdPartyAuthButtons.vue

diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css
index cc3913b9b..0435f54e3 100644
--- a/frontend_nuxt/assets/global.css
+++ b/frontend_nuxt/assets/global.css
@@ -27,16 +27,6 @@
   --code-highlight-background-color: rgb(241, 241, 241);
   --login-background-color: rgb(248, 248, 248);
   --login-background-color-hover: #e0e0e0;
-  --google-login-background-color: var(--login-background-color);
-  --google-login-background-color-hover: var(--login-background-color-hover);
-  --github-login-background-color: #000;
-  --github-login-background-color-hover: #333;
-  --discord-login-background-color: var(--login-background-color);
-  --discord-login-background-color-hover: var(--login-background-color-hover);
-  --twitter-login-background-color: var(--login-background-color);
-  --twitter-login-background-color-hover: var(--login-background-color-hover);
-  --telegram-login-background-color: var(--login-background-color);
-  --telegram-login-background-color-hover: var(--login-background-color-hover);
   --text-color: rgb(70, 70, 70);
   --blockquote-text-color: #6a737d;
   --menu-width: 200px;
@@ -68,16 +58,6 @@
   --code-highlight-background-color: #262b35;
   --login-background-color: #575757;
   --login-background-color-hover: #717171;
-  --google-login-background-color: var(--login-background-color);
-  --google-login-background-color-hover: var(--login-background-color-hover);
-  --github-login-background-color: #000;
-  --github-login-background-color-hover: #333;
-  --discord-login-background-color: var(--login-background-color);
-  --discord-login-background-color-hover: var(--login-background-color-hover);
-  --twitter-login-background-color: var(--login-background-color);
-  --twitter-login-background-color-hover: var(--login-background-color-hover);
-  --telegram-login-background-color: var(--login-background-color);
-  --telegram-login-background-color-hover: var(--login-background-color-hover);
   --text-color: #eee;
   --blockquote-text-color: #999;
   --article-info-background-color: #747373;
diff --git a/frontend_nuxt/components/ThirdPartyAuthButtons.vue b/frontend_nuxt/components/ThirdPartyAuthButtons.vue
deleted file mode 100644
index 80591ea8d..000000000
--- a/frontend_nuxt/components/ThirdPartyAuthButtons.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <div class="third-party-auth">
-    <div v-for="p in providers" :key="p.name" :class="['auth-button', p.name]" @click="p.authorize">
-      <img class="auth-button-icon" :src="p.icon" :alt="p.alt" />
-      <div class="auth-button-text">{{ p.text }} {{ props.action }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-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 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'
-
-const props = defineProps({
-  action: {
-    type: String,
-    default: '登录',
-  },
-  inviteToken: {
-    type: String,
-    default: '',
-  },
-})
-
-const providers = [
-  {
-    name: 'google',
-    icon: googleIcon,
-    alt: 'Google Logo',
-    text: 'Google',
-    authorize: () => googleAuthorize(props.inviteToken),
-  },
-  {
-    name: 'github',
-    icon: githubIcon,
-    alt: 'GitHub Logo',
-    text: 'GitHub',
-    authorize: () => githubAuthorize(props.inviteToken),
-  },
-  {
-    name: 'discord',
-    icon: discordIcon,
-    alt: 'Discord Logo',
-    text: 'Discord',
-    authorize: () => discordAuthorize(props.inviteToken),
-  },
-  {
-    name: 'twitter',
-    icon: twitterIcon,
-    alt: 'Twitter Logo',
-    text: 'Twitter',
-    authorize: () => twitterAuthorize(props.inviteToken),
-  },
-  {
-    name: 'telegram',
-    icon: telegramIcon,
-    alt: 'Telegram Logo',
-    text: 'Telegram',
-    authorize: () => telegramAuthorize(props.inviteToken),
-  },
-]
-</script>
-
-<style scoped>
-.third-party-auth {
-  margin-left: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 30%;
-  gap: 20px;
-}
-
-.auth-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 20px;
-  border: 1px solid var(--normal-border-color);
-  border-radius: 10px;
-  cursor: pointer;
-  min-width: 150px;
-  gap: 10px;
-  background-color: var(--auth-bg);
-}
-
-.auth-button:hover {
-  background-color: var(--auth-bg-hover);
-}
-
-.auth-button-icon {
-  width: 20px;
-  height: 20px;
-}
-
-.auth-button-text {
-  font-size: 16px;
-}
-
-.auth-button.google {
-  --auth-bg: var(--google-login-background-color, var(--login-background-color));
-  --auth-bg-hover: var(--google-login-background-color-hover, var(--login-background-color-hover));
-}
-
-.auth-button.github {
-  --auth-bg: var(--github-login-background-color, var(--login-background-color));
-  --auth-bg-hover: var(--github-login-background-color-hover, var(--login-background-color-hover));
-}
-
-.auth-button.discord {
-  --auth-bg: var(--discord-login-background-color, var(--login-background-color));
-  --auth-bg-hover: var(--discord-login-background-color-hover, var(--login-background-color-hover));
-}
-
-.auth-button.twitter {
-  --auth-bg: var(--twitter-login-background-color, var(--login-background-color));
-  --auth-bg-hover: var(--twitter-login-background-color-hover, var(--login-background-color-hover));
-}
-
-.auth-button.telegram {
-  --auth-bg: var(--telegram-login-background-color, var(--login-background-color));
-  --auth-bg-hover: var(
-    --telegram-login-background-color-hover,
-    var(--login-background-color-hover)
-  );
-}
-
-@media (max-width: 768px) {
-  .third-party-auth {
-    margin-top: 20px;
-    margin-left: 0;
-    width: calc(100% - 40px);
-    gap: 10px;
-  }
-
-  .auth-button {
-    width: calc(100% - 40px);
-  }
-}
-</style>
diff --git a/frontend_nuxt/pages/login.vue b/frontend_nuxt/pages/login.vue
index 506f755ca..79018f1af 100644
--- a/frontend_nuxt/pages/login.vue
+++ b/frontend_nuxt/pages/login.vue
@@ -34,15 +34,44 @@
       </div>
     </div>
 
-    <ThirdPartyAuthButtons action="登录" />
+    <div class="other-login-page-content">
+      <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 ThirdPartyAuthButtons from '~/components/ThirdPartyAuthButtons.vue'
 import { registerPush } from '~/utils/push'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
@@ -85,6 +114,22 @@ const submitLogin = async () => {
     isWaitingForLogin.value = false
   }
 }
+
+const loginWithGoogle = () => {
+  googleAuthorize()
+}
+const loginWithGithub = () => {
+  githubAuthorize()
+}
+const loginWithDiscord = () => {
+  discordAuthorize()
+}
+const loginWithTwitter = () => {
+  twitterAuthorize()
+}
+const loginWithTelegram = () => {
+  telegramAuthorize()
+}
 </script>
 
 <style scoped>
@@ -157,6 +202,16 @@ const submitLogin = async () => {
   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;
@@ -186,6 +241,33 @@ const submitLogin = async () => {
   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;
+}
+
 .login-page-button-secondary {
   margin-top: 20px;
   font-size: 16px;
@@ -223,5 +305,16 @@ const submitLogin = async () => {
     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>
diff --git a/frontend_nuxt/pages/signup.vue b/frontend_nuxt/pages/signup.vue
index 3ce67cf95..0638e3491 100644
--- a/frontend_nuxt/pages/signup.vue
+++ b/frontend_nuxt/pages/signup.vue
@@ -68,14 +68,43 @@
       </div>
     </div>
 
-    <ThirdPartyAuthButtons action="注册" :invite-token="inviteToken" />
+    <div class="other-signup-page-content">
+      <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 ThirdPartyAuthButtons from '~/components/ThirdPartyAuthButtons.vue'
+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'
 
 const route = useRoute()
@@ -196,6 +225,21 @@ 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>
@@ -268,6 +312,16 @@ const verifyCode = async () => {
   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;
@@ -297,6 +351,33 @@ const verifyCode = async () => {
   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;
+}
+
 .signup-page-button-secondary {
   margin-top: 20px;
   font-size: 16px;
@@ -342,5 +423,16 @@ const verifyCode = async () => {
     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>