Merge branch 'main' of github.com:nagisa77/OpenIsle

frontend/src/views/DiscordCallbackPageView.vue

@@ -1,18 +1,14 @@
 <template>
-  <div class="discord-callback-page">
-    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-    <div class="discord-callback-page-text">Magic is happening...</div>
-  </div>
+  <CallbackPage />
 </template>
 
 <script>
+import CallbackPage from '../components/CallbackPage.vue'
 import { discordExchange } from '../utils/discord'
-import { hatch } from 'ldrs'
-
-hatch.register()
 
 export default {
   name: 'DiscordCallbackPageView',
+  components: { CallbackPage },
   async mounted() {
     const url = new URL(window.location.href)
     const code = url.searchParams.get('code')
@@ -28,21 +24,3 @@ export default {
 }
 </script>
 
-<style scoped>
-.discord-callback-page {
-  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.discord-callback-page-text {
-  margin-top: 25px;
-  font-size: 16px;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-</style>

frontend/src/views/GithubCallbackPageView.vue

@@ -1,18 +1,14 @@
 <template>
-  <div class="github-callback-page">
-    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-    <div class="github-callback-page-text">Magic is happening...</div>
-  </div>
+  <CallbackPage />
 </template>
 
 <script>
+import CallbackPage from '../components/CallbackPage.vue'
 import { githubExchange } from '../utils/github'
-import { hatch } from 'ldrs'
-hatch.register()
-
 
 export default {
   name: 'GithubCallbackPageView',
+  components: { CallbackPage },
   async mounted() {
     const url = new URL(window.location.href)
     const code = url.searchParams.get('code')
@@ -28,21 +24,3 @@ export default {
 }
 </script>
 
-<style scoped>
-.github-callback-page {
-  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.github-callback-page-text {
-  margin-top: 25px;
-  font-size: 16px;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-</style>

frontend/src/views/GoogleCallbackPageView.vue

@@ -0,0 +1,27 @@
+<template>
+  <CallbackPage />
+</template>
+
+<script>
+import CallbackPage from '../components/CallbackPage.vue'
+import { googleAuthWithToken } from '../utils/google'
+
+export default {
+  name: 'GoogleCallbackPageView',
+  components: { CallbackPage },
+  async mounted() {
+    const hash = new URLSearchParams(window.location.hash.substring(1))
+    const idToken = hash.get('id_token')
+    if (idToken) {
+      await googleAuthWithToken(idToken, () => {
+        this.$router.push('/')
+      }, token => {
+        this.$router.push('/signup-reason?token=' + token)
+      })
+    } else {
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+

frontend/src/views/LoginPageView.vue

@@ -31,7 +31,7 @@
     </div>
 
     <div class="other-login-page-content">
-      <div class="login-page-button" @click="loginWithGoogle">
+      <div class="login-page-button" @click="googleAuthorize">
         <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="login-page-button-text">Google 登录</div>
       </div>
@@ -54,7 +54,7 @@
 <script>
 import { API_BASE_URL, toast } from '../main'
 import { setToken, loadCurrentUser } from '../utils/auth'
-import { loginWithGoogle } from '../utils/google'
+import { googleAuthorize } from '../utils/google'
 import { githubAuthorize } from '../utils/github'
 import { discordAuthorize } from '../utils/discord'
 import { twitterAuthorize } from '../utils/twitter'
@@ -64,8 +64,8 @@ export default {
   name: 'LoginPageView',
   components: { BaseInput },
   setup() {
-    return { loginWithGoogle }
-  }, 
+    return { googleAuthorize }
+  },
   data() {
     return {
       username: '',

frontend/src/views/SignupPageView.vue

@@ -67,7 +67,7 @@
     </div>
 
     <div class="other-signup-page-content">
-      <div class="signup-page-button" @click="loginWithGoogle">
+      <div class="signup-page-button" @click="googleAuthorize">
         <img class="signup-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="signup-page-button-text">Google 注册</div>
       </div>
@@ -89,7 +89,7 @@
 
 <script>
 import { API_BASE_URL, toast } from '../main'
-import { loginWithGoogle } from '../utils/google'
+import { googleAuthorize } from '../utils/google'
 import { githubAuthorize } from '../utils/github'
 import { discordAuthorize } from '../utils/discord'
 import { twitterAuthorize } from '../utils/twitter'
@@ -98,7 +98,7 @@ export default {
   name: 'SignupPageView',
   components: { BaseInput },
   setup() {
-    return { loginWithGoogle }
+    return { googleAuthorize }
   },
   data() {
     return {

frontend/src/views/TwitterCallbackPageView.vue

@@ -1,17 +1,14 @@
 <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>
+  <CallbackPage />
 </template>
 
 <script>
+import CallbackPage from '../components/CallbackPage.vue'
 import { twitterExchange } from '../utils/twitter'
-import { hatch } from 'ldrs'
-hatch.register()
 
 export default {
   name: 'TwitterCallbackPageView',
+  components: { CallbackPage },
   async mounted() {
     const url = new URL(window.location.href)
     const code = url.searchParams.get('code')
@@ -27,21 +24,3 @@ export default {
 }
 </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;
-  padding-top: var(--header-height);
-}
-
-.twitter-callback-page-text {
-  margin-top: 25px;
-  font-size: 16px;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-</style>