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

backend/src/main/java/com/openisle/repository/ReactionRepository.java

@@ -31,12 +31,17 @@ public interface ReactionRepository extends JpaRepository<Reaction, Long> {
     long countByUserAfter(@Param("username") String username, @Param("start") java.time.LocalDateTime start);
 
     @Query("""
-            SELECT COUNT(r) FROM Reaction r
+            SELECT COUNT(DISTINCT r.id)
-            LEFT JOIN r.post p
+            FROM Reaction r
+            LEFT JOIN r.post    p
+            LEFT JOIN p.author  pa
             LEFT JOIN r.comment c
-            WHERE r.type = com.openisle.model.ReactionType.LIKE AND
+            LEFT JOIN c.author  ca
-                  ((p IS NOT NULL AND p.author.username = :username) OR
+            WHERE r.type = com.openisle.model.ReactionType.LIKE
-                   (c IS NOT NULL AND c.author.username = :username))
+              AND (
+                   (r.post    IS NOT NULL AND pa.username = :username)
+                OR (r.comment IS NOT NULL AND ca.username = :username)
+              )
             """)
     long countLikesReceived(@Param("username") String username);
 

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/components/CallbackPage.vue

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

frontend/src/main.js

@@ -9,8 +9,8 @@ import './assets/toast.css'
 // If you prefer Bootstrap style, replace with theme-bootstrap.css instead.
 import { useToast } from 'vue-toastification'
 import { checkToken, clearToken, isLogin } from './utils/auth'
-import { initTheme } from './utils/theme'
 import { loginWithGoogle } from './utils/google'
+import { initTheme } from './utils/theme'
 import { clearVditorStorage } from './utils/clearVditorStorage'
 
 // Configurable API domain and port
@@ -51,6 +51,7 @@ checkToken().then(valid => {
     clearToken()
   }
 
+  // 引导用户优先采用Google Login登录
   if (!isLogin()) {
     setTimeout(() => {
       loginWithGoogle()

frontend/src/router/index.js

@@ -16,6 +16,7 @@ import NotFoundPageView from '../views/NotFoundPageView.vue'
 import GithubCallbackPageView from '../views/GithubCallbackPageView.vue'
 import DiscordCallbackPageView from '../views/DiscordCallbackPageView.vue'
 import TwitterCallbackPageView from '../views/TwitterCallbackPageView.vue'
+import GoogleCallbackPageView from '../views/GoogleCallbackPageView.vue'
 import ForgotPasswordPageView from '../views/ForgotPasswordPageView.vue'
 
 const routes = [
@@ -104,6 +105,11 @@ const routes = [
     name: 'twitter-callback',
     component: TwitterCallbackPageView
   },
+  {
+    path: '/google-callback',
+    name: 'google-callback',
+    component: GoogleCallbackPageView
+  },
   {
     path: '/404',
     name: 'not-found',

frontend/src/utils/google.js

@@ -1,6 +1,7 @@
 import { API_BASE_URL, GOOGLE_CLIENT_ID, toast } from '../main'
 import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
+import { WEBSITE_BASE_URL } from '../constants'
 
 export async function googleGetIdToken() {
   return new Promise((resolve, reject) => {
@@ -18,6 +19,17 @@ export async function googleGetIdToken() {
   })
 }
 
+export function googleAuthorize() {
+  if (!GOOGLE_CLIENT_ID) {
+    toast.error('Google 登录不可用, 请检查网络设置与VPN')
+    return
+  }
+  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.location.href = url
+}
+
 export async function googleAuthWithToken(idToken, redirect_success, redirect_not_approved) {
   try {
     const res = await fetch(`${API_BASE_URL}/api/auth/google`, {

frontend/src/views/DiscordCallbackPageView.vue

@@ -1,18 +1,14 @@
 <template>
-  <div class="discord-callback-page">
+  <CallbackPage />
-    <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>
 </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">
+  <CallbackPage />
-    <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>
 </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,7 +64,7 @@ export default {
   name: 'LoginPageView',
   components: { BaseInput },
   setup() {
-    return { loginWithGoogle }
+    return { googleAuthorize }
   },
   data() {
     return {

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">
+  <CallbackPage />
-    <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 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>