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

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>