From be892e2ccaabf7f61e8e7223b89ec8234bceef17 Mon Sep 17 00:00:00 2001
From: Aofei Sheng <aofei@aofeisheng.com>
Date: Fri, 18 Oct 2024 09:29:34 +0800
Subject: [PATCH] feat(auth): introduce sign-in guard

- Add `withSignInGuard` HOF to prompt users to sign in before executing
  protected actions.
- Add similar protection for specific routes using navigation guards.

Fixes #974

Signed-off-by: Aofei Sheng <aofei@aofeisheng.com>
---
 .../community/user/FollowButton.vue           |  6 ++---
 .../navbar/NavbarNewProjectItem.vue           |  6 ++---
 .../navbar/NavbarOpenProjectItem.vue          |  4 +--
 .../src/components/navbar/NavbarProfile.vue   |  9 ++++---
 spx-gui/src/pages/community/explore.vue       | 19 +++++++++-----
 spx-gui/src/pages/community/user/projects.vue |  6 ++---
 spx-gui/src/pages/editor/index.vue            |  7 ------
 spx-gui/src/router.ts                         | 14 ++++++++---
 spx-gui/src/stores/user.ts                    |  2 +-
 spx-gui/src/utils/exception.ts                | 25 ++++++++++++++++++-
 10 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/spx-gui/src/components/community/user/FollowButton.vue b/spx-gui/src/components/community/user/FollowButton.vue
index aff43d6d1..eb430c9c8 100644
--- a/spx-gui/src/components/community/user/FollowButton.vue
+++ b/spx-gui/src/components/community/user/FollowButton.vue
@@ -3,7 +3,7 @@ import { computed, ref, watch } from 'vue'
 import { useUserStore } from '@/stores'
 import { follow, isFollowing, unfollow } from '@/apis/user'
 import { UIButton } from '@/components/ui'
-import { useMessageHandle } from '@/utils/exception'
+import { useMessageHandle, withSignInGuard } from '@/utils/exception'
 
 const props = defineProps<{
   /** Name of user to follow */
@@ -24,10 +24,10 @@ watch(
 )
 
 const handleClick = useMessageHandle(
-  async () => {
+  withSignInGuard(async () => {
     await (following.value ? unfollow(props.name) : follow(props.name))
     following.value = !following.value
-  },
+  }),
   { en: 'Failed to operate', zh: '操作失败' }
 )
 </script>
diff --git a/spx-gui/src/components/navbar/NavbarNewProjectItem.vue b/spx-gui/src/components/navbar/NavbarNewProjectItem.vue
index ef9940021..214e7b45a 100644
--- a/spx-gui/src/components/navbar/NavbarNewProjectItem.vue
+++ b/spx-gui/src/components/navbar/NavbarNewProjectItem.vue
@@ -9,17 +9,17 @@
 import { useRouter } from 'vue-router'
 import { getProjectEditorRoute } from '@/router'
 import { UIMenuItem } from '@/components/ui'
-import { useMessageHandle } from '@/utils/exception'
+import { useMessageHandle, withSignInGuard } from '@/utils/exception'
 import { useCreateProject } from '@/components/project'
 import newSvg from './icons/new.svg'
 
 const router = useRouter()
 const createProject = useCreateProject()
 const handleNewProject = useMessageHandle(
-  async () => {
+  withSignInGuard(async () => {
     const { name } = await createProject()
     router.push(getProjectEditorRoute(name))
-  },
+  }),
   { en: 'Failed to create new project', zh: '新建项目失败' }
 ).fn
 </script>
diff --git a/spx-gui/src/components/navbar/NavbarOpenProjectItem.vue b/spx-gui/src/components/navbar/NavbarOpenProjectItem.vue
index 3722dc09d..fea1a1fba 100644
--- a/spx-gui/src/components/navbar/NavbarOpenProjectItem.vue
+++ b/spx-gui/src/components/navbar/NavbarOpenProjectItem.vue
@@ -7,12 +7,12 @@
 
 <script setup lang="ts">
 import { UIMenuItem } from '@/components/ui'
-import { useMessageHandle } from '@/utils/exception'
+import { useMessageHandle, withSignInGuard } from '@/utils/exception'
 import { useOpenProject } from '@/components/project'
 import openSvg from './icons/open.svg'
 
 const openProject = useOpenProject()
-const handleOpenProject = useMessageHandle(openProject, {
+const handleOpenProject = useMessageHandle(withSignInGuard(openProject), {
   en: 'Failed to open project',
   zh: '打开项目失败'
 }).fn
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index ac6def268..a279d1c3b 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -25,9 +25,7 @@
         </UIMenuItem>
       </UIMenuGroup>
       <UIMenuGroup>
-        <UIMenuItem @click="userStore.signOut()">{{
-          $t({ en: 'Sign out', zh: '登出' })
-        }}</UIMenuItem>
+        <UIMenuItem @click="handleSignOut">{{ $t({ en: 'Sign out', zh: '登出' }) }}</UIMenuItem>
       </UIMenuGroup>
     </UIMenu>
   </UIDropdown>
@@ -51,6 +49,11 @@ function handleUserPage() {
 function handleProjects() {
   router.push(getUserPageRoute(userStore.userInfo!.name, 'projects'))
 }
+
+function handleSignOut() {
+  userStore.signOut()
+  router.go(0) // Reload the page to trigger navigation guards.
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/spx-gui/src/pages/community/explore.vue b/spx-gui/src/pages/community/explore.vue
index 956ee753c..cb96150b8 100644
--- a/spx-gui/src/pages/community/explore.vue
+++ b/spx-gui/src/pages/community/explore.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { useQuery } from '@/utils/exception'
+import { useQuery, withSignInGuard } from '@/utils/exception'
 import { useRouteQueryParamStrEnum } from '@/utils/route'
 import { exploreProjects, ExploreOrder as Order } from '@/apis/project'
 import { UITagRadioGroup, UITagRadio } from '@/components/ui'
@@ -38,13 +38,20 @@ const order = useRouteQueryParamStrEnum('o', Order, Order.MostLikes)
 
 const maxCount = 50
 
+const fetchProjects = () => {
+  return exploreProjects({
+    order: order.value,
+    count: maxCount
+  })
+}
+const fetchProjectsWithSignInGuard = withSignInGuard(fetchProjects)
+
 const queryRet = useQuery(
   () => {
-    // TODO: login prompt for unauthenticated users
-    return exploreProjects({
-      order: order.value,
-      count: maxCount
-    })
+    if (order.value === Order.FollowingCreated) {
+      return fetchProjectsWithSignInGuard()
+    }
+    return fetchProjects()
   },
   {
     en: 'Failed to list projects',
diff --git a/spx-gui/src/pages/community/user/projects.vue b/spx-gui/src/pages/community/user/projects.vue
index c134ad9d8..44c137aa4 100644
--- a/spx-gui/src/pages/community/user/projects.vue
+++ b/spx-gui/src/pages/community/user/projects.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useRouteQueryParamInt, useRouteQueryParamStrEnum } from '@/utils/route'
-import { useMessageHandle, useQuery } from '@/utils/exception'
+import { useMessageHandle, useQuery, withSignInGuard } from '@/utils/exception'
 import { Visibility, listProject, type ListProjectParams } from '@/apis/project'
 import { getProjectEditorRoute } from '@/router'
 import { useUserStore } from '@/stores'
@@ -59,10 +59,10 @@ const queryRet = useQuery(() => listProject(listParams.value), {
 const router = useRouter()
 const createProject = useCreateProject()
 const handleNewProject = useMessageHandle(
-  async () => {
+  withSignInGuard(async () => {
     const { name } = await createProject()
     router.push(getProjectEditorRoute(name))
-  },
+  }),
   { en: 'Failed to create new project', zh: '新建项目失败' }
 ).fn
 </script>
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index fdc745e05..8953e0732 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -42,13 +42,6 @@ const LOCAL_CACHE_KEY = 'GOPLUS_BUILDER_CACHED_PROJECT'
 
 // TODO: move this to some outer position
 const userStore = useUserStore()
-watchEffect(() => {
-  // This will be called on mount and whenever userStore changes,
-  // which are the cases when userStore.signOut() is called
-  if (!userStore.isSignedIn) {
-    userStore.initiateSignIn()
-  }
-})
 
 const router = useRouter()
 
diff --git a/spx-gui/src/router.ts b/spx-gui/src/router.ts
index c1597fcb6..64d0ba0d4 100644
--- a/spx-gui/src/router.ts
+++ b/spx-gui/src/router.ts
@@ -1,6 +1,7 @@
 import type { App } from 'vue'
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import type { ExploreOrder } from './apis/project'
+import { useUserStore } from './stores'
 
 export function getProjectEditorRoute(projectName: string) {
   return `/editor/${projectName}`
@@ -94,12 +95,9 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/editor/:projectName',
     component: () => import('@/pages/editor/index.vue'),
+    meta: { requiresSignIn: true },
     props: true
   },
-  {
-    path: '/callback', // TODO: remove me
-    redirect: '/sign-in/callback'
-  },
   {
     path: '/sign-in/callback',
     component: () => import('@/pages/sign-in/callback.vue')
@@ -120,6 +118,14 @@ const router = createRouter({
 })
 
 export const initRouter = async (app: App) => {
+  const userStore = useUserStore()
+  router.beforeEach((to, _, next) => {
+    if (to.meta.requiresSignIn && !userStore.isSignedIn) {
+      userStore.initiateSignIn()
+    } else {
+      next()
+    }
+  })
   app.use(router)
   // This is an example of a routing result that needs to be loaded.
   await new Promise((resolve) => {
diff --git a/spx-gui/src/stores/user.ts b/spx-gui/src/stores/user.ts
index c6ad6fdb0..722abd614 100644
--- a/spx-gui/src/stores/user.ts
+++ b/spx-gui/src/stores/user.ts
@@ -17,7 +17,7 @@ interface TokenResponse {
   refresh_expires_in: number
 }
 
-const casdoorAuthRedirectPath = '/callback'
+const casdoorAuthRedirectPath = '/sign-in/callback'
 const casdoorSdk = new Sdk({
   ...casdoorConfig,
   redirectPath: casdoorAuthRedirectPath
diff --git a/spx-gui/src/utils/exception.ts b/spx-gui/src/utils/exception.ts
index 3d94bae70..6beb69e28 100644
--- a/spx-gui/src/utils/exception.ts
+++ b/spx-gui/src/utils/exception.ts
@@ -2,10 +2,11 @@
  * @desc Definition for Exceptions & tools to help handle them
  */
 
-import { useMessage } from '@/components/ui'
+import { useConfirmDialog, useMessage } from '@/components/ui'
 import { useI18n } from './i18n'
 import type { LocaleMessage } from './i18n'
 import { ref, shallowRef, watchEffect, type Ref, type ShallowRef } from 'vue'
+import { useUserStore } from '@/stores'
 
 /**
  * Exceptions are like errors, while slightly different:
@@ -134,6 +135,28 @@ export function useMessageHandle<Args extends any[], T>(
   }
 }
 
+export function withSignInGuard<Args extends any[], T>(fn: (...args: Args) => Promise<T>) {
+  const { t } = useI18n()
+  const userStore = useUserStore()
+  const withConfirm = useConfirmDialog()
+
+  return async (...args: Args): Promise<T> => {
+    if (!userStore.isSignedIn) {
+      await withConfirm({
+        title: t({ en: 'Sign in to continue', zh: '登录以继续' }),
+        content: t({
+          en: 'You need to sign in first to perform this action. Would you like to sign in now?',
+          zh: '你需要先登录才能执行此操作。你想现在登录吗？'
+        }),
+        confirmText: t({ en: 'Sign in', zh: '登录' }),
+        confirmHandler: () => userStore.initiateSignIn()
+      })
+      throw new Cancelled('redirected to sign in')
+    }
+    return fn(...args)
+  }
+}
+
 export type QueryRet<T> = {
   isLoading: Ref<boolean>
   data: ShallowRef<T | null>