Open Google auth in new window

frontend/src/views/GoogleCallbackPageView.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="google-callback-page">
+    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+    <div class="google-callback-page-text">Magic is happening...</div>
+  </div>
+</template>
+
+<script>
+import { googleAuthWithToken } from '../utils/google'
+import { hatch } from 'ldrs'
+hatch.register()
+
+export default {
+  name: 'GoogleCallbackPageView',
+  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>
+
+<style scoped>
+.google-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;
+}
+
+.google-callback-page-text {
+  margin-top: 25px;
+  font-size: 16px;
+  color: var(--primary-color);
+  font-weight: bold;
+}
+</style>

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 {