feat: fix with google login

frontend/src/App.vue

@@ -1,23 +1,14 @@
 <template>
   <div id="app">
     <div class="header-container">
-      <HeaderComponent
+      <HeaderComponent @toggle-menu="menuVisible = !menuVisible" :show-menu-btn="!hideMenu" />
-        @toggle-menu="menuVisible = !menuVisible"
-        :show-menu-btn="!hideMenu"
-      />
     </div>
 
     <div class="main-container">
       <div class="menu-container">
-        <MenuComponent
+        <MenuComponent :visible="!hideMenu && menuVisible" @item-click="menuVisible = false" />
-          :visible="!hideMenu && menuVisible"
-          @item-click="menuVisible = false"
-        />
       </div>
-      <div
+      <div class="content" :class="{ 'menu-open': menuVisible && !hideMenu }">
-        class="content"
-        :class="{ 'menu-open': menuVisible && !hideMenu }"
-      >
         <router-view />
       </div>
     </div>
@@ -40,7 +31,17 @@ export default {
   },
   computed: {
     hideMenu() {
-      return ['/login', '/signup', '/404', '/signup-reason', '/github-callback', '/twitter-callback', '/discord-callback', '/forgot-password'].includes(this.$route.path)
+      return [
+        '/login',
+        '/signup', 
+        '/404',
+        '/signup-reason',
+        '/github-callback',
+        '/twitter-callback',
+        '/discord-callback',
+        '/forgot-password',
+        '/google-callback'
+      ].includes(this.$route.path)
     }
   },
   async mounted() {
@@ -59,8 +60,7 @@ export default {
   z-index: 1000;
 }
 
-.menu-container {
+.menu-container {}
-}
 
 .content {
   flex: 1;
@@ -80,6 +80,7 @@ export default {
 }
 
 @media (max-width: 768px) {
+
   .content,
   .content.menu-open {
     max-width: 100% !important;

frontend/src/main.js

@@ -49,4 +49,10 @@ checkToken().then(valid => {
   if (!valid) {
     clearToken()
   }
-})
+
+  if (!isLogin()) {
+    setTimeout(() => {
+      loginWithGoogle()
+    }, 3000)
+  }
+})

frontend/src/utils/google.js

@@ -3,6 +3,22 @@ import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
 import { WEBSITE_BASE_URL } from '../constants'
 
+export async function googleGetIdToken() {
+  return new Promise((resolve, reject) => {
+    if (!window.google || !GOOGLE_CLIENT_ID) {
+      toast.error('Google 登录不可用, 请检查网络设置与VPN')
+      reject()
+      return
+    }
+    window.google.accounts.id.initialize({
+      client_id: GOOGLE_CLIENT_ID,
+      callback: ({ credential }) => resolve(credential),
+      use_fedcm: true 
+    })
+    window.google.accounts.id.prompt()
+  })
+}
+
 export function googleAuthorize() {
   if (!GOOGLE_CLIENT_ID) {
     toast.error('Google 登录不可用, 请检查网络设置与VPN')
@@ -11,7 +27,7 @@ export function googleAuthorize() {
   const redirectUri = `${WEBSITE_BASE_URL}/google-callback`
   const nonce = Math.random().toString(36).substring(2)
   const url = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${GOOGLE_CLIENT_ID}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=id_token&scope=openid%20email%20profile&nonce=${nonce}`
-  window.open(url, '_blank', 'width=500,height=600')
+  window.location.href = url
 }
 
 export async function googleAuthWithToken(idToken, redirect_success, redirect_not_approved) {
@@ -38,4 +54,26 @@ export async function googleAuthWithToken(idToken, redirect_success, redirect_no
   } catch (e) {
     toast.error('登录失败')
   }
+}
+
+export async function googleSignIn(redirect_success, redirect_not_approved) {
+  try {
+    const token = await googleGetIdToken()
+    await googleAuthWithToken(token, redirect_success, redirect_not_approved)
+  } catch {
+    /* ignore */
+  }
+}
+
+import router from '../router'
+
+export function loginWithGoogle() {
+  googleSignIn(
+    () => {
+      router.push('/')
+    },
+    token => {
+      router.push('/signup-reason?token=' + token)
+    }
+  )
 }