jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-04-21 03:17:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: unify third-party auth component

Browse Source
This commit is contained in:
Tim
2025-09-01 13:13:16 +08:00
parent 575e90e558
commit 215616d771
3 changed files with 178 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
frontend_nuxt/pages/login.vue
View File

@@ -34,44 +34,15 @@
</div>
</div>
<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>
<ThirdPartyAuth mode="login" />
</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>

92
frontend_nuxt/pages/signup.vue
View File

@@ -68,44 +68,15 @@
</div>
</div>
<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>
<ThirdPartyAuth mode="signup" :invite-token="inviteToken" />
</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>