Merge branch 'main' into codex/add-discord-login-support

open-isle-cli/src/App.vue

@@ -26,7 +26,7 @@ export default {
   },
   computed: {
     hideMenu() {
-      return ['/login', '/signup', '/404', '/signup-reason', '/github-callback'].includes(this.$route.path)
+      return ['/login', '/signup', '/404', '/signup-reason', '/github-callback', '/twitter-callback'].includes(this.$route.path)
     }
   }
 }

open-isle-cli/src/assets/icons/twitter.svg

@@ -0,0 +1,4 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Twitter icon</title>
+  <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.949.555-2.005.959-3.127 1.184-.897-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124-4.083-.205-7.697-2.159-10.126-5.134-.422.722-.666 1.561-.666 2.475 0 1.709.87 3.214 2.188 4.096-.807-.026-1.566-.248-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.376 4.6 3.416-1.68 1.318-3.808 2.105-6.102 2.105-.39 0-.779-.023-1.17-.069 2.189 1.394 4.768 2.209 7.548 2.209 9.051 0 14.001-7.496 14.001-13.986 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/>
+</svg>

open-isle-cli/src/main.js

@@ -20,6 +20,7 @@ export const API_BASE_URL = "";
 export const GOOGLE_CLIENT_ID = '777830451304-nt8afkkap18gui4f9entcha99unal744.apps.googleusercontent.com'
 export const GITHUB_CLIENT_ID = 'Ov23liVkO1NPAX5JyWxJ'
 export const DISCORD_CLIENT_ID = ''
+export const TWITTER_CLIENT_ID = 'ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ'
 export const toast = useToast()
 
 initTheme()

open-isle-cli/src/router/index.js

@@ -13,6 +13,7 @@ import ProfileView from '../views/ProfileView.vue'
 import NotFoundPageView from '../views/NotFoundPageView.vue'
 import GithubCallbackPageView from '../views/GithubCallbackPageView.vue'
 import DiscordCallbackPageView from '../views/DiscordCallbackPageView.vue'
+import TwitterCallbackPageView from '../views/TwitterCallbackPageView.vue'
 
 const routes = [
   {
@@ -80,6 +81,11 @@ const routes = [
     name: 'discord-callback',
     component: DiscordCallbackPageView
   },
+  {
+    path: '/twitter-callback',
+    name: 'twitter-callback',
+    component: TwitterCallbackPageView
+  },
   {
     path: '/404',
     name: 'not-found',

open-isle-cli/src/utils/twitter.js

@@ -0,0 +1,41 @@
+import { API_BASE_URL, TWITTER_CLIENT_ID, toast } from '../main'
+import { setToken, loadCurrentUser } from './auth'
+
+export function twitterAuthorize(state = '') {
+  if (!TWITTER_CLIENT_ID) {
+    toast.error('Twitter 登录不可用')
+    return
+  }
+  const redirectUri = `${window.location.origin}/twitter-callback`
+  const url = `https://twitter.com/i/oauth2/authorize?response_type=code&client_id=${TWITTER_CLIENT_ID}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=tweet.read%20users.read&state=${state}`
+  window.location.href = url
+}
+
+export async function twitterExchange(code, state, reason) {
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/auth/twitter`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ code, redirectUri: `${window.location.origin}/twitter-callback`, reason, state })
+    })
+    const data = await res.json()
+    if (res.ok && data.token) {
+      setToken(data.token)
+      await loadCurrentUser()
+      toast.success('登录成功')
+      return { success: true, needReason: false }
+    } else if (data.reason_code === 'NOT_APPROVED') {
+      toast.info('当前为注册审核模式，请填写注册理由')
+      return { success: false, needReason: true, token: data.token }
+    } else if (data.reason_code === 'IS_APPROVING') {
+      toast.info('您的注册理由正在审批中')
+      return { success: true, needReason: false }
+    } else {
+      toast.error(data.error || '登录失败')
+      return { success: false, needReason: false, error: data.error || '登录失败' }
+    }
+  } catch (e) {
+    toast.error('登录失败')
+    return { success: false, needReason: false, error: '登录失败' }
+  }
+}

open-isle-cli/src/views/LoginPageView.vue

@@ -42,6 +42,10 @@
         <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>
   </div>
 </template>
@@ -52,6 +56,7 @@ import { setToken, loadCurrentUser } from '../utils/auth'
 import { googleSignIn } from '../utils/google'
 import { githubAuthorize } from '../utils/github'
 import { discordAuthorize } from '../utils/discord'
+import { twitterAuthorize } from '../utils/twitter'
 import BaseInput from '../components/BaseInput.vue'
 export default {
   name: 'LoginPageView',
@@ -109,6 +114,9 @@ export default {
     },
     loginWithDiscord() {
       discordAuthorize()
+    },
+    loginWithTwitter() {
+      twitterAuthorize()
     }
   }
 }

open-isle-cli/src/views/SignupPageView.vue

@@ -84,6 +84,10 @@
         <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>
   </div>
 </template>
@@ -93,6 +97,7 @@ import { API_BASE_URL, toast } from '../main'
 import { googleSignIn } from '../utils/google'
 import { githubAuthorize } from '../utils/github'
 import { discordAuthorize } from '../utils/discord'
+import { twitterAuthorize } from '../utils/twitter'
 import BaseInput from '../components/BaseInput.vue'
 export default {
   name: 'SignupPageView',
@@ -217,6 +222,9 @@ export default {
     signupWithDiscord() {
       discordAuthorize()
     }
+    signupWithTwitter() {
+      twitterAuthorize()
+    }
   }
 }
 </script>

open-isle-cli/src/views/TwitterCallbackPageView.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="twitter-callback-page">
+    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+    <div class="twitter-callback-page-text">Magic is happening...</div>
+  </div>
+</template>
+
+<script>
+import { twitterExchange } from '../utils/twitter'
+import { hatch } from 'ldrs'
+hatch.register()
+
+export default {
+  name: 'TwitterCallbackPageView',
+  async mounted() {
+    const url = new URL(window.location.href)
+    const code = url.searchParams.get('code')
+    const state = url.searchParams.get('state')
+    const result = await twitterExchange(code, state, '')
+
+    if (result.needReason) {
+      this.$router.push('/signup-reason?token=' + result.token)
+    } else {
+      this.$router.push('/')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.twitter-callback-page {
+  background-color: var(--background-color);
+  height: calc(100vh - var(--header-height));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.twitter-callback-page-text {
+  margin-top: 25px;
+  font-size: 16px;
+  color: var(--primary-color);
+  font-weight: bold;
+}
+</style>