From 52fa2d27100a0822e62447c47e2d25c24cd5f8f4 Mon Sep 17 00:00:00 2001
From: Hanxing Yang <nighca@live.cn>
Date: Wed, 16 Oct 2024 17:59:23 +0800
Subject: [PATCH 1/2] Project publish (#988)

* project publish

* adjust thumbnail generation
---
 spx-gui/src/apis/project-release.ts           |  31 +++
 spx-gui/src/apis/project.ts                   |   5 +-
 .../components/community/CommunityNavbar.vue  |   1 +
 .../community/user/EditProfileModal.vue       |   1 -
 .../components/editor/navbar/EditorNavbar.vue |  71 +++++--
 .../editor/navbar/icons/project-page.svg      |   4 +
 .../navbar/icons/{share.svg => publish.svg}   |   0
 .../icons/{stop-sharing.svg => unpublish.svg} |   0
 .../editor/preview/EditorPreview.vue          |   2 +-
 .../preview/stage-viewer/StageViewer.vue      |   8 +-
 .../src/components/navbar/NavbarProfile.vue   |   2 +-
 .../src/components/project/ProjectItem.vue    |   8 +-
 .../project/ProjectPublishModal.vue           | 188 ++++++++++++++++++
 .../project/ProjectPublishedModal.vue         |  90 +++++++++
 spx-gui/src/components/project/index.ts       |  48 ++---
 .../project/runner/RunnerContainer.vue        |  40 ++--
 .../src/components/ui/UIConfigProvider.vue    |   3 +
 spx-gui/src/main.ts                           |   4 +
 spx-gui/src/models/common/cloud.ts            |  18 +-
 spx-gui/src/models/project/index.test.ts      |   6 +
 spx-gui/src/models/project/index.ts           |  64 ++++--
 spx-gui/src/pages/community/project.vue       |  23 ++-
 spx-gui/src/utils/file.ts                     |   2 +-
 spx-gui/src/utils/utils.ts                    |  23 ++-
 24 files changed, 531 insertions(+), 111 deletions(-)
 create mode 100644 spx-gui/src/apis/project-release.ts
 create mode 100644 spx-gui/src/components/editor/navbar/icons/project-page.svg
 rename spx-gui/src/components/editor/navbar/icons/{share.svg => publish.svg} (100%)
 rename spx-gui/src/components/editor/navbar/icons/{stop-sharing.svg => unpublish.svg} (100%)
 create mode 100644 spx-gui/src/components/project/ProjectPublishModal.vue
 create mode 100644 spx-gui/src/components/project/ProjectPublishedModal.vue

diff --git a/spx-gui/src/apis/project-release.ts b/spx-gui/src/apis/project-release.ts
new file mode 100644
index 000000000..0b94fbf64
--- /dev/null
+++ b/spx-gui/src/apis/project-release.ts
@@ -0,0 +1,31 @@
+import { client, type FileCollection } from './common'
+
+export type ProjectRelease = {
+  /** Unique identifier */
+  id: string
+  /** Creation timestamp */
+  createdAt: string
+  /** Last update timestamp */
+  updatedAt: string
+  /** Full name of the project, in the format `owner/project`. */
+  projectFullName: string
+  /** Unique name of the project release, adhering to [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html). */
+  name: string
+  /** rief description of the release. */
+  description: string
+  /** File paths and their corresponding universal URLs associated with the release. */
+  files: FileCollection
+  /** Universal URL of the release's thumbnail image. */
+  thumbnail: string
+  /** Number of times the release has been remixed. */
+  remixCount: number
+}
+
+export type CreateReleaseParams = Pick<
+  ProjectRelease,
+  'projectFullName' | 'name' | 'description' | 'thumbnail'
+>
+
+export function createRelease(params: CreateReleaseParams) {
+  return client.post('/project-release', params) as Promise<ProjectRelease>
+}
diff --git a/spx-gui/src/apis/project.ts b/spx-gui/src/apis/project.ts
index 59f5044c5..88df81c3f 100644
--- a/spx-gui/src/apis/project.ts
+++ b/spx-gui/src/apis/project.ts
@@ -34,7 +34,7 @@ export type ProjectData = {
   description: string
   /** Instructions on how to interact with the project */
   instructions: string
-  /** URL of the project's thumbnail image */
+  /** Universal URL of the project's thumbnail image */
   thumbnail: string
   /** Number of times the project has been viewed */
   viewCount: number
@@ -52,7 +52,8 @@ export async function addProject(params: AddProjectParams, signal?: AbortSignal)
   return client.post('/project', params, { signal }) as Promise<ProjectData>
 }
 
-export type UpdateProjectParams = Pick<ProjectData, 'files' | 'visibility'>
+export type UpdateProjectParams = Pick<ProjectData, 'files' | 'visibility'> &
+  Partial<Pick<ProjectData, 'description' | 'instructions' | 'thumbnail'>>
 
 function encode(owner: string, name: string) {
   return `${encodeURIComponent(owner)}/${encodeURIComponent(name)}`
diff --git a/spx-gui/src/components/community/CommunityNavbar.vue b/spx-gui/src/components/community/CommunityNavbar.vue
index 05c65f8be..fe37415a9 100644
--- a/spx-gui/src/components/community/CommunityNavbar.vue
+++ b/spx-gui/src/components/community/CommunityNavbar.vue
@@ -45,6 +45,7 @@ function handleSearch() {
 
 <style lang="scss" scoped>
 .search {
+  margin-right: 8px;
   width: 340px;
   display: flex;
   align-items: center;
diff --git a/spx-gui/src/components/community/user/EditProfileModal.vue b/spx-gui/src/components/community/user/EditProfileModal.vue
index c735ab6e4..8c3745da4 100644
--- a/spx-gui/src/components/community/user/EditProfileModal.vue
+++ b/spx-gui/src/components/community/user/EditProfileModal.vue
@@ -56,7 +56,6 @@ const handleSubmit = useMessageHandle(
   >
     <div class="cover"></div>
     <UIImg class="avatar" :src="user.avatar" />
-    <!-- TODO: header & avatar -->
     <UIForm :form="form" has-success-feedback @submit="handleSubmit.fn">
       <UIFormItem :label="$t({ en: 'Name', zh: '名字' })">
         <UITextInput :value="user.displayName" disabled />
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index 419fad53f..c21dbcd55 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -28,16 +28,20 @@
             </UIMenuItem>
           </UIMenuGroup>
           <UIMenuGroup :disabled="project == null || !isOnline">
-            <UIMenuItem @click="handleShareProject">
-              <template #icon><img :src="shareSvg" /></template>
-              {{ $t({ en: 'Share project', zh: '分享项目' }) }}
+            <UIMenuItem @click="handlePublishProject">
+              <template #icon><img :src="publishSvg" /></template>
+              {{ $t({ en: 'Publish project', zh: '发布项目' }) }}
             </UIMenuItem>
             <UIMenuItem
               v-if="project?.visibility === Visibility.Public"
-              @click="handleStopSharingProject"
+              @click="handleUnpublishProject"
             >
-              <template #icon><img :src="stopSharingSvg" /></template>
-              {{ $t({ en: 'Stop sharing', zh: '停止分享' }) }}
+              <template #icon><img :src="unpublishSvg" /></template>
+              {{ $t({ en: 'Unpublish project', zh: '取消发布' }) }}
+            </UIMenuItem>
+            <UIMenuItem @click="handleOpenProjectPage">
+              <template #icon><img :src="projectPageSvg" /></template>
+              {{ $t({ en: 'Open project page', zh: '打开项目主页' }) }}
             </UIMenuItem>
           </UIMenuGroup>
           <UIMenuGroup :disabled="project == null">
@@ -80,6 +84,13 @@
         </div>
       </template>
     </template>
+    <template #right>
+      <div v-show="project != null" class="publish">
+        <UIButton type="secondary" :disabled="!isOnline" @click="handlePublishProject">
+          {{ $t({ en: 'Publish', zh: '发布' }) }}
+        </UIButton>
+      </div>
+    </template>
   </NavbarWrapper>
 </template>
 
@@ -93,7 +104,8 @@ import {
   UIMenuItem,
   UIIcon,
   UITooltip,
-  useConfirmDialog
+  useConfirmDialog,
+  UIButton
 } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import { useI18n, type LocaleMessage } from '@/utils/i18n'
@@ -101,7 +113,8 @@ import { useNetwork } from '@/utils/network'
 import { selectFile } from '@/utils/file'
 import { AutoSaveToCloudState, type Project } from '@/models/project'
 import { Visibility } from '@/apis/common'
-import { useRemoveProject, useShareProject, useStopSharingProject } from '@/components/project'
+import { getProjectPageRoute } from '@/router'
+import { usePublishProject, useRemoveProject, useUnpublishProject } from '@/components/project'
 import { useLoadFromScratchModal } from '@/components/asset'
 import NavbarWrapper from '@/components/navbar/NavbarWrapper.vue'
 import NavbarDropdown from '@/components/navbar/NavbarDropdown.vue'
@@ -113,8 +126,9 @@ import importProjectSvg from './icons/import-project.svg'
 import exportProjectSvg from './icons/export-project.svg'
 import removeProjectSvg from './icons/remove-project.svg'
 import importScratchSvg from './icons/import-scratch.svg'
-import shareSvg from './icons/share.svg'
-import stopSharingSvg from './icons/stop-sharing.svg'
+import publishSvg from './icons/publish.svg'
+import unpublishSvg from './icons/unpublish.svg'
+import projectPageSvg from './icons/project-page.svg'
 import offlineSvg from './icons/offline.svg?raw'
 import savingSvg from './icons/saving.svg?raw'
 import failedToSaveSvg from './icons/failed-to-save.svg?raw'
@@ -163,19 +177,31 @@ const handleImportFromScratch = useMessageHandle(() => loadFromScratchModal(prop
   zh: '从 Scratch 项目文件导入失败'
 }).fn
 
-const shareProject = useShareProject()
-const handleShareProject = useMessageHandle(() => shareProject(props.project!), {
-  en: 'Failed to share project',
-  zh: '分享项目失败'
+const publishProject = usePublishProject()
+const handlePublishProject = useMessageHandle(() => publishProject(props.project!), {
+  en: 'Failed to publish project',
+  zh: '发布项目失败'
 }).fn
 
-const stopSharingProject = useStopSharingProject()
-const handleStopSharingProject = useMessageHandle(
-  () => stopSharingProject(props.project!),
-  { en: 'Failed to stop sharing project', zh: '停止分享项目失败' },
-  { en: 'Project sharing is now stopped', zh: '项目已停止分享' }
+const unpublishProject = useUnpublishProject()
+const handleUnpublishProject = useMessageHandle(
+  () => unpublishProject(props.project!),
+  {
+    en: 'Failed to unpublish project',
+    zh: '取消发布失败'
+  },
+  {
+    en: 'Project unpublished',
+    zh: '已取消发布'
+  }
 ).fn
 
+function handleOpenProjectPage() {
+  const { owner, name } = props.project!
+  if (owner == null || name == null) throw new Error('project owner or name is null')
+  window.open(getProjectPageRoute(owner, name))
+}
+
 const removeProject = useRemoveProject()
 const handleRemoveProject = useMessageHandle(
   async () => {
@@ -273,4 +299,11 @@ const autoSaveStateIcon = computed<AutoSaveStateIcon>(() => {
     }
   }
 }
+
+.publish {
+  margin-right: 2px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
 </style>
diff --git a/spx-gui/src/components/editor/navbar/icons/project-page.svg b/spx-gui/src/components/editor/navbar/icons/project-page.svg
new file mode 100644
index 000000000..14f7c12bf
--- /dev/null
+++ b/spx-gui/src/components/editor/navbar/icons/project-page.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M19 19.25H13.8521C13.6491 18.75 13.251 18.351 12.75 18.148V15H11.25V18.148C10.75 18.351 10.3509 18.749 10.1479 19.25H5C4.586 19.25 4.25 19.586 4.25 20C4.25 20.414 4.586 20.75 5 20.75H10.1479C10.4449 21.482 11.161 22 12 22C12.839 22 13.5551 21.482 13.8521 20.75H19C19.414 20.75 19.75 20.414 19.75 20C19.75 19.586 19.414 19.25 19 19.25Z" fill="#0AA5BE"/>
+  <path d="M17 4H12L10 2H7C5 2 4 3 4 5V12C4 14 5 15 7 15H11.25H12.75H17C19 15 20 14 20 12V7C20 5 19 4 17 4Z" fill="#51DADC"/>
+</svg>
diff --git a/spx-gui/src/components/editor/navbar/icons/share.svg b/spx-gui/src/components/editor/navbar/icons/publish.svg
similarity index 100%
rename from spx-gui/src/components/editor/navbar/icons/share.svg
rename to spx-gui/src/components/editor/navbar/icons/publish.svg
diff --git a/spx-gui/src/components/editor/navbar/icons/stop-sharing.svg b/spx-gui/src/components/editor/navbar/icons/unpublish.svg
similarity index 100%
rename from spx-gui/src/components/editor/navbar/icons/stop-sharing.svg
rename to spx-gui/src/components/editor/navbar/icons/unpublish.svg
diff --git a/spx-gui/src/components/editor/preview/EditorPreview.vue b/spx-gui/src/components/editor/preview/EditorPreview.vue
index 4b61eaa43..27e5ff655 100644
--- a/spx-gui/src/components/editor/preview/EditorPreview.vue
+++ b/spx-gui/src/components/editor/preview/EditorPreview.vue
@@ -10,7 +10,7 @@
     </UICardHeader>
 
     <UIFullScreenModal v-model:show="show" class="project-runner-modal">
-      <RunnerContainer mode="debug" :project="editorCtx.project" @close="show = false" />
+      <RunnerContainer :project="editorCtx.project" @close="show = false" />
     </UIFullScreenModal>
     <div class="stage-viewer-container">
       <StageViewer />
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
index 8730b6bde..c53b9d41d 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -243,10 +243,10 @@ async function moveZorder(direction: 'up' | 'down' | 'top' | 'bottom') {
   menuVisible.value = false
 }
 
-async function takeScreenshot(name: string) {
-  const stage = await untilNotNull(stageRef)
-  const nodeTransformer = await untilNotNull(nodeTransformerRef)
-  await until(() => !loading.value)
+async function takeScreenshot(name: string, signal?: AbortSignal) {
+  const stage = await untilNotNull(stageRef, signal)
+  const nodeTransformer = await untilNotNull(nodeTransformerRef, signal)
+  await until(() => !loading.value, signal)
   // Omit transform control when taking screenshot
   const dataUrl = nodeTransformer.withHidden(() =>
     stage.getStage().toDataURL({
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index c11e51447..d5de75528 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -56,7 +56,7 @@ function handleProjects() {
 <style lang="scss" scoped>
 .sign-in,
 .avatar {
-  margin: 0 4px 0 8px;
+  margin: 0 4px 0 0;
   height: 100%;
   display: flex;
   align-items: center;
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index 59c7c98e0..0db424180 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -2,7 +2,7 @@
   <li class="project-item">
     <RouterLink class="link" :to="to" @click="emit('selected')">
       <div class="thumbnail-wrapper">
-        <UIImg class="thumbnail" :src="project.thumbnail" />
+        <UIImg class="thumbnail" :src="thumbnailUrl" />
         <UIDropdown v-if="context === 'mine'" trigger="click" placement="bottom-end">
           <template #trigger>
             <div class="options" @click.stop.prevent>
@@ -59,6 +59,7 @@ import {
 } from '@/utils/utils'
 import { getProjectEditorRoute, getProjectPageRoute } from '@/router'
 import { Visibility, isLiking, type ProjectData } from '@/apis/project'
+import { universalUrlToWebUrl } from '@/models/common/cloud'
 import { UIImg, UIDropdown, UIIcon, UIMenu, UIMenuItem } from '@/components/ui'
 import UserAvatar from '@/components/community/user/UserAvatar.vue'
 import { useRemoveProject } from '.'
@@ -94,6 +95,11 @@ const to = computed(() => {
   return props.context === 'edit' ? getProjectEditorRoute(name) : getProjectPageRoute(owner, name)
 })
 
+const thumbnailUrl = useAsyncComputed(async () => {
+  if (props.project.thumbnail === '') return null
+  return universalUrlToWebUrl(props.project.thumbnail)
+})
+
 const liking = useAsyncComputed(() => isLiking(props.project.owner, props.project.name))
 
 const likesTitle = computed(() => {
diff --git a/spx-gui/src/components/project/ProjectPublishModal.vue b/spx-gui/src/components/project/ProjectPublishModal.vue
new file mode 100644
index 000000000..4eb7c7d3f
--- /dev/null
+++ b/spx-gui/src/components/project/ProjectPublishModal.vue
@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import dayjs from 'dayjs'
+import { useMessageHandle } from '@/utils/exception'
+import { useI18n } from '@/utils/i18n'
+import { useAsyncComputed } from '@/utils/utils'
+import { useFileUrl } from '@/utils/file'
+import { Visibility } from '@/apis/common'
+import { createRelease } from '@/apis/project-release'
+import type { Project } from '@/models/project'
+import {
+  UIImg,
+  UIFormModal,
+  UIForm,
+  UIFormItem,
+  UITextInput,
+  UIButton,
+  useForm
+} from '@/components/ui'
+
+const props = defineProps<{
+  project: Project
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  cancelled: []
+  resolved: []
+}>()
+
+const { t } = useI18n()
+
+const thumbnail = useAsyncComputed(() => props.project.getThumbnail())
+const [thumbnailUrl, thumbnailUrlLoading] = useFileUrl(thumbnail)
+
+/** If this is the first time the project is published */
+const firstTime = props.project.releaseCount === 0
+
+let defaultDescription = ''
+if (firstTime) {
+  defaultDescription = t({
+    // TODO: With https://github.com/goplus/builder/issues/987 we can use emoji like "🎉" here
+    en: 'First release!',
+    zh: '第一版正式发布！'
+  })
+}
+
+const form = useForm({
+  releaseDescription: [defaultDescription, validateText],
+  projectDescription: [props.project.description ?? '', validateText],
+  projectInstructions: [props.project.instructions ?? '', validateText]
+})
+
+function validateText(val: string) {
+  if (val.length > 400)
+    return t({ en: 'The input must be 400 characters or fewer', zh: '输入不能超过 400 字' })
+  return null
+}
+
+function handleCancel() {
+  emit('cancelled')
+}
+
+function generateReleaseName() {
+  const timeStr = dayjs().tz('UTC').format('YYYYMMDDHHmmss')
+  const build = `${timeStr}.${Math.random().toString(16).slice(2, 8)}`
+  return `v0.0.0+${build}`
+}
+
+const handleSubmit = useMessageHandle(
+  async () => {
+    const project = props.project
+    project.setVisibility(Visibility.Public)
+    project.setDescription(form.value.projectDescription)
+    project.setInstructions(form.value.projectInstructions)
+    await project.saveToCloud()
+    await createRelease({
+      projectFullName: `${project.owner!}/${project.name!}`,
+      name: generateReleaseName(),
+      description: form.value.releaseDescription,
+      thumbnail: project.thumbnail!
+    })
+    emit('resolved')
+  },
+  { en: 'Failed to publish project', zh: '项目发布失败' }
+)
+</script>
+
+<template>
+  <UIFormModal
+    :title="$t({ en: `Publish ${project.name}`, zh: `发布 ${project.name}` })"
+    :style="{ width: '560px' }"
+    :visible="props.visible"
+    @update:visible="handleCancel"
+  >
+    <UIForm :form="form" has-success-feedback @submit="handleSubmit.fn">
+      <p v-if="project.visibility === Visibility.Private" class="tip">
+        {{
+          $t({
+            en: 'Published projects will be visible to all Go+ Builder users.',
+            zh: '发布后的项目将对所有 Go+ Builder 用户可见。'
+          })
+        }}
+      </p>
+      <div class="thumbnail-wrapper">
+        <UIImg
+          class="thumbnail"
+          :src="thumbnailUrl"
+          :loading="thumbnailUrlLoading"
+          size="contain"
+        />
+      </div>
+      <UIFormItem
+        :label="$t({ en: 'Release description', zh: '发布内容' })"
+        path="releaseDescription"
+      >
+        <UITextInput
+          v-model:value="form.value.releaseDescription"
+          type="textarea"
+          :placeholder="$t({ en: 'What is new in this release?', zh: '这次发布有什么新内容？' })"
+        />
+      </UIFormItem>
+      <UIFormItem
+        :label="$t({ en: 'Project description', zh: '项目描述' })"
+        path="projectDescription"
+      >
+        <UITextInput
+          ref="aboutProjectInput"
+          v-model:value="form.value.projectDescription"
+          type="textarea"
+          :placeholder="
+            $t({
+              en: 'What is this project about? How did you make it?',
+              zh: '这个项目是关于什么的？你是如何创作的？'
+            })
+          "
+        />
+      </UIFormItem>
+      <UIFormItem
+        :label="$t({ en: 'Play instructions', zh: '操作说明' })"
+        path="projectInstructions"
+      >
+        <UITextInput
+          v-model:value="form.value.projectInstructions"
+          type="textarea"
+          :placeholder="
+            $t({
+              en: 'Tell others how to play in your project',
+              zh: '告诉其他用户在项目中如何操作'
+            })
+          "
+        />
+      </UIFormItem>
+      <footer class="footer">
+        <UIButton type="boring" @click="handleCancel">
+          {{ $t({ en: 'Cancel', zh: '取消' }) }}
+        </UIButton>
+        <UIButton type="primary" html-type="submit" :loading="handleSubmit.isLoading.value">
+          {{ $t({ en: 'Publish', zh: '发布' }) }}
+        </UIButton>
+      </footer>
+    </UIForm>
+  </UIFormModal>
+</template>
+
+<style lang="scss" scoped>
+.tip {
+  margin-bottom: 24px;
+}
+.thumbnail-wrapper {
+  margin-bottom: 24px;
+  width: 100%;
+  height: 224px;
+  background: url(./bg.svg) center / cover no-repeat;
+  border-radius: var(--ui-border-radius-1);
+  overflow: hidden;
+
+  .thumbnail {
+    width: 100%;
+    height: 100%;
+  }
+}
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 20px;
+}
+</style>
diff --git a/spx-gui/src/components/project/ProjectPublishedModal.vue b/spx-gui/src/components/project/ProjectPublishedModal.vue
new file mode 100644
index 000000000..bb7c20360
--- /dev/null
+++ b/spx-gui/src/components/project/ProjectPublishedModal.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UIButton, UIFormModal, UITextInput } from '@/components/ui'
+import { useMessageHandle } from '@/utils/exception'
+import { getProjectPageRoute } from '@/router'
+import { Project } from '@/models/project'
+
+const props = defineProps<{
+  visible: boolean
+  project: Project
+}>()
+
+const emit = defineEmits<{
+  cancelled: []
+  resolved: []
+}>()
+
+const projectPageRoute = computed(() =>
+  getProjectPageRoute(props.project.owner!, props.project.name!)
+)
+const projectPageLink = computed(() => `${location.origin}${projectPageRoute.value}`)
+
+// TODO: support vnode as i18n message to simplify such case
+const preLinkText = {
+  en: 'Visit ',
+  zh: '访问'
+}
+const linkText = {
+  en: 'project page',
+  zh: '项目主页'
+}
+const postLinkText = {
+  en: ', or copy the link below to share the project with others.',
+  zh: '，或者复制下方链接将项目分享给其他人。'
+}
+
+const handleCopy = useMessageHandle(
+  () => navigator.clipboard.writeText(projectPageLink.value),
+  { en: 'Failed to copy link to clipboard', zh: '分享链接复制到剪贴板失败' },
+  { en: 'Link copied to clipboard', zh: '分享链接已复制到剪贴板' }
+).fn
+</script>
+
+<template>
+  <UIFormModal
+    :title="$t({ en: `Project ${project.name} published`, zh: `项目 ${project.name} 发布成功` })"
+    :visible="props.visible"
+    :auto-focus="false"
+    @update:visible="emit('cancelled')"
+  >
+    <div class="desc">
+      {{ $t(preLinkText)
+      }}<a class="link" target="_blank" :href="projectPageRoute">{{ $t(linkText) }}</a
+      >{{ $t(postLinkText) }}
+    </div>
+    <div class="link-wrapper">
+      <UITextInput :value="projectPageLink" :readonly="true" @focus="$event.target.select()" />
+      <UIButton class="copy-button" @click="handleCopy">
+        {{ $t({ en: 'Copy link', zh: '复制链接' }) }}
+      </UIButton>
+    </div>
+  </UIFormModal>
+</template>
+
+<style scoped lang="scss">
+.desc {
+  color: var(--ui-color-grey-900);
+  margin-bottom: 8px;
+}
+
+.link {
+  // TODO: extract to `@/components/ui`?
+  color: var(--ui-color-primary-main);
+  text-decoration: none;
+  transition: 0.1s;
+  &:hover {
+    color: var(--ui-color-primary-400);
+  }
+}
+
+.link-wrapper {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.copy-button {
+  margin-left: 12px;
+  white-space: nowrap;
+}
+</style>
diff --git a/spx-gui/src/components/project/index.ts b/spx-gui/src/components/project/index.ts
index cf177dff1..40532d1b0 100644
--- a/spx-gui/src/components/project/index.ts
+++ b/spx-gui/src/components/project/index.ts
@@ -1,10 +1,12 @@
 import { useModal, useConfirmDialog } from '@/components/ui'
 import { Visibility, deleteProject } from '@/apis/project'
+import { useI18n } from '@/utils/i18n'
+import type { Project } from '@/models/project'
 import ProjectCreateModal from './ProjectCreateModal.vue'
 import ProjectOpenModal from './ProjectOpenModal.vue'
 import ProjectSharingLinkModal from './ProjectSharingLinkModal.vue'
-import { useI18n } from '@/utils/i18n'
-import type { Project } from '@/models/project'
+import ProjectPublishModal from './ProjectPublishModal.vue'
+import ProjectPublishedModal from './ProjectPublishedModal.vue'
 
 export function useCreateProject() {
   const modal = useModal(ProjectCreateModal)
@@ -46,37 +48,17 @@ export function useCreateProjectSharingLink() {
   }
 }
 
-/**
- * Share given project
- * - make project public
- * - copy sharing link
- */
-export function useShareProject() {
-  const { t } = useI18n()
-  const withConfirm = useConfirmDialog()
-  const createProjectSharingLink = useCreateProjectSharingLink()
-
-  async function makePublic(project: Project) {
-    project.setVisibility(Visibility.Public)
-    await project.saveToCloud()
-  }
+export function usePublishProject() {
+  const invokePublishModal = useModal(ProjectPublishModal)
+  const invokePublishedModal = useModal(ProjectPublishedModal)
 
-  return async function shareProject(project: Project) {
-    if (project.visibility !== Visibility.Public) {
-      await withConfirm({
-        title: t({ en: 'Share project', zh: '分享项目' }),
-        content: t({
-          en: 'To share the current project, it will be made public. Would you like to proceed?',
-          zh: '为了分享当前项目，它将被设置为公开。确认继续吗？'
-        }),
-        confirmHandler: () => makePublic(project)
-      })
-    }
-    return createProjectSharingLink(project)
+  return async function publishProject(project: Project) {
+    await invokePublishModal({ project })
+    return invokePublishedModal({ project })
   }
 }
 
-export function useStopSharingProject() {
+export function useUnpublishProject() {
   const { t } = useI18n()
   const withConfirm = useConfirmDialog()
 
@@ -85,12 +67,12 @@ export function useStopSharingProject() {
     await project.saveToCloud()
   }
 
-  return async function stopSharingProject(project: Project) {
+  return async function unpublishProject(project: Project) {
     return withConfirm({
-      title: t({ en: 'Stop sharing project', zh: '停止分享项目' }),
+      title: t({ en: 'Unpublish project', zh: '取消发布项目' }),
       content: t({
-        en: 'If sharing is stopped, others will no longer have access to the current project, and its sharing links will expire. Would you like to proceed?',
-        zh: '如果停止分享，其他人将无法访问当前项目，且分享链接将会失效。确认继续吗？'
+        en: 'If project unpublished, others will no longer have access to the current project, and its sharing links will expire. Would you like to proceed?',
+        zh: '如果取消发布，其他人将无法访问当前项目，且分享链接将会失效。确认继续吗？'
       }),
       confirmHandler: () => makePrivate(project)
     })
diff --git a/spx-gui/src/components/project/runner/RunnerContainer.vue b/spx-gui/src/components/project/runner/RunnerContainer.vue
index 8a52ee1eb..4d9b8aedd 100644
--- a/spx-gui/src/components/project/runner/RunnerContainer.vue
+++ b/spx-gui/src/components/project/runner/RunnerContainer.vue
@@ -1,3 +1,5 @@
+<!-- TODO: move into `@/components/editor/`? -->
+
 <template>
   <div class="container">
     <div class="header">
@@ -9,16 +11,10 @@
         <UIButton class="button" icon="rotate" @click="handleRerun">
           {{ $t({ en: 'Rerun', zh: '重新运行' }) }}
         </UIButton>
-        <UIButton
-          class="button"
-          type="boring"
-          icon="share"
-          :loading="handleShare.isLoading.value"
-          @click="handleShare.fn"
-        >
-          {{ $t({ en: 'Share', zh: '分享' }) }}
+        <UIButton class="button" type="boring" icon="share" @click="handlePublish">
+          {{ $t({ en: 'Publish', zh: '发布' }) }}
         </UIButton>
-        <UIModalClose v-if="mode === 'debug'" class="close" @click="emit('close')" />
+        <UIModalClose class="close" @click="emit('close')" />
       </div>
     </div>
     <div :class="['main', displayMode, { expanded }]">
@@ -34,7 +30,7 @@
           />
         </div>
       </div>
-      <div v-if="mode === 'debug'" class="console-container">
+      <div class="console-container">
         <div class="console-header">
           <div>Console</div>
           <button class="expand-icon" @click="expanded = !expanded">
@@ -61,11 +57,14 @@ import { onMounted, ref, type CSSProperties, watch, nextTick } from 'vue'
 import dayjs from 'dayjs'
 import type { Project } from '@/models/project'
 import ProjectRunner from './ProjectRunner.vue'
-import { useShareProject, useCreateProjectSharingLink } from '@/components/project'
+import { usePublishProject } from '@/components/project'
 import { UIButton, UIIcon, UIModalClose } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 
-const props = defineProps<{ project: Project; mode: 'debug' | 'share' }>()
+const props = defineProps<{
+  project: Project
+}>()
+
 const emit = defineEmits<{
   close: []
 }>()
@@ -122,18 +121,11 @@ const handleRerun = () => {
   consoleMessages.value = []
 }
 
-const shareProject = useShareProject()
-const createProjectSharingLink = useCreateProjectSharingLink()
-const handleShare = useMessageHandle(
-  () => {
-    if (props.mode === 'debug') {
-      return shareProject(props.project)
-    } else {
-      return createProjectSharingLink(props.project)
-    }
-  },
-  { en: 'Failed to share project', zh: '分享项目失败' }
-)
+const publishProject = usePublishProject()
+const handlePublish = useMessageHandle(() => publishProject(props.project), {
+  en: 'Failed to publish project',
+  zh: '发布项目失败'
+}).fn
 </script>
 <style lang="scss" scoped>
 button {
diff --git a/spx-gui/src/components/ui/UIConfigProvider.vue b/spx-gui/src/components/ui/UIConfigProvider.vue
index 57648cff1..bae3d155b 100644
--- a/spx-gui/src/components/ui/UIConfigProvider.vue
+++ b/spx-gui/src/components/ui/UIConfigProvider.vue
@@ -115,6 +115,9 @@ const themeOverrides: GlobalThemeOverrides = {
     textColorWarning: uiVariables.color.title,
     textColorError: uiVariables.color.title,
     maxWidth: '367px'
+  },
+  Form: {
+    labelTextColor: uiVariables.color.text
   }
 }
 </script>
diff --git a/spx-gui/src/main.ts b/spx-gui/src/main.ts
index bdae064ac..4b42b78a6 100644
--- a/spx-gui/src/main.ts
+++ b/spx-gui/src/main.ts
@@ -4,6 +4,8 @@ import { VueQueryPlugin } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
 import 'dayjs/locale/zh'
 
 import { initI18n } from './i18n'
@@ -15,6 +17,8 @@ import { CustomTransformer } from './components/editor/preview/stage-viewer/cust
 
 dayjs.extend(localizedFormat)
 dayjs.extend(relativeTime)
+dayjs.extend(utc)
+dayjs.extend(timezone)
 
 const initApiClient = async () => {
   const userStore = useUserStore()
diff --git a/spx-gui/src/models/common/cloud.ts b/spx-gui/src/models/common/cloud.ts
index bf0b22230..aedce688a 100644
--- a/spx-gui/src/models/common/cloud.ts
+++ b/spx-gui/src/models/common/cloud.ts
@@ -34,7 +34,18 @@ export async function save(metadata: Metadata, files: Files, signal?: AbortSigna
 
   const visibility = metadata.visibility ?? Visibility.Private
   const projectData = await (id != null
-    ? updateProject(owner, name, { visibility, files: fileCollection }, signal)
+    ? updateProject(
+        owner,
+        name,
+        {
+          visibility,
+          files: fileCollection,
+          description: metadata.description,
+          instructions: metadata.instructions,
+          thumbnail: metadata.thumbnail
+        },
+        signal
+      )
     : addProject({ name, visibility, files: fileCollection }, signal))
   signal?.throwIfAborted()
 
@@ -101,14 +112,15 @@ export async function saveFileForWebUrl(file: File, signal?: AbortSignal) {
   return universalUrlToWebUrl(universalUrl)
 }
 
-async function universalUrlToWebUrl(universalUrl: UniversalUrl) {
+export async function universalUrlToWebUrl(universalUrl: UniversalUrl) {
   const { protocol } = new URL(universalUrl)
   if (protocol !== fileUniversalUrlSchemes.kodo) return universalUrl
   const map = await makeObjectUrls([universalUrl])
   return map[universalUrl]
 }
 
-async function saveFile(file: File, signal?: AbortSignal) {
+/** Save file to cloud and return its universal URL */
+export async function saveFile(file: File, signal?: AbortSignal) {
   const savedUrl = getUniversalUrl(file)
   if (savedUrl != null) return savedUrl
 
diff --git a/spx-gui/src/models/project/index.test.ts b/spx-gui/src/models/project/index.test.ts
index d866af623..c8db3495b 100644
--- a/spx-gui/src/models/project/index.test.ts
+++ b/spx-gui/src/models/project/index.test.ts
@@ -27,6 +27,7 @@ function makeProject() {
   const animation = Animation.create('default', animationCostumes)
   sprite.addAnimation(animation)
   project.addSprite(sprite)
+  project.bindScreenshotTaker(async () => mockFile())
   return project
 }
 
@@ -160,6 +161,8 @@ describe('Project', () => {
   it('should abort previous saveToCloud call when a new one is initiated', async () => {
     const project = makeProject()
 
+    vi.spyOn(cloudHelper, 'saveFile').mockImplementation(async () => 'data:;,')
+
     const cloudSaveMock = vi
       .spyOn(cloudHelper, 'save')
       .mockImplementation((metadata, files, signal) => {
@@ -191,6 +194,8 @@ describe('Project', () => {
   it('should not abort saveToCloud call if it completes before a new one is initiated', async () => {
     const project = makeProject()
 
+    vi.spyOn(cloudHelper, 'saveFile').mockImplementation(async () => 'data:;,')
+
     const cloudSaveMock = vi.spyOn(cloudHelper, 'save').mockImplementation((metadata, files) => {
       return new Promise((resolve) => {
         resolve({ metadata: metadata as ProjectData, files })
@@ -208,6 +213,7 @@ describe('Project', () => {
 
   // https://github.com/goplus/builder/pull/794#discussion_r1728120369
   it('should handle failed auto-save-to-cloud correctly', async () => {
+    vi.spyOn(cloudHelper, 'saveFile').mockImplementation(async () => 'data:;,')
     const cloudSaveMock = vi.spyOn(cloudHelper, 'save').mockRejectedValue(new Error('save failed'))
     const localSaveMock = vi.spyOn(localHelper, 'save').mockResolvedValue(undefined)
     const localClearMock = vi.spyOn(localHelper, 'clear').mockResolvedValue(undefined)
diff --git a/spx-gui/src/models/project/index.ts b/spx-gui/src/models/project/index.ts
index c63d07fed..099d2a7d0 100644
--- a/spx-gui/src/models/project/index.ts
+++ b/spx-gui/src/models/project/index.ts
@@ -23,18 +23,11 @@ import type { RawWidgetConfig } from '../widget'
 import { History } from './history'
 import Mutex from '@/utils/mutex'
 import { Cancelled } from '@/utils/exception'
-import { until } from '@/utils/utils'
+import { until, untilNotNull } from '@/utils/utils'
 
 export type { Action } from './history'
 
-export type Metadata = {
-  id?: string
-  createdAt?: string
-  updatedAt?: string
-  owner?: string
-  name?: string
-  version?: number
-  visibility?: Visibility
+export type Metadata = Partial<Omit<ProjectData, 'files'>> & {
   filesHash?: string
   lastSyncedFilesHash?: string
 }
@@ -92,7 +85,12 @@ type RawProjectConfig = RawStageConfig & {
   // TODO: camera
 }
 
-export type ScreenshotTaker = (name: string) => Promise<File>
+export type ScreenshotTaker = (
+  /** File name without extention */
+  name: string,
+  /** Signal for aborting the operation */
+  signal?: AbortSignal
+) => Promise<File>
 
 export class Project extends Disposable {
   id?: string
@@ -102,6 +100,13 @@ export class Project extends Disposable {
   name?: string
   version = 0
   visibility?: Visibility
+  description?: string
+  instructions?: string
+  thumbnail?: string
+  viewCount?: number
+  likeCount?: number
+  releaseCount?: number
+  remixCount?: number
 
   private filesHash?: string
   private lastSyncedFilesHash?: string
@@ -193,6 +198,14 @@ export class Project extends Disposable {
     this.visibility = visibility
   }
 
+  setDescription(description: string) {
+    this.description = description
+  }
+
+  setInstructions(instructions: string) {
+    this.instructions = instructions
+  }
+
   selected: Selected = null
 
   get selectedSprite() {
@@ -241,6 +254,19 @@ export class Project extends Disposable {
     }
   }
 
+  private thumbnailCache: { filesHash: string; promise: Promise<File> } | null = null
+  async getThumbnail(signal?: AbortSignal) {
+    const filesHash = this.filesHash
+    if (this.thumbnailCache != null && this.thumbnailCache.filesHash === filesHash)
+      return this.thumbnailCache.promise
+    const screenshotTaker = await untilNotNull(() => this.screenshotTaker, signal)
+    const promise = screenshotTaker('thumbnail', signal)
+    if (filesHash != null) {
+      this.thumbnailCache = { filesHash, promise }
+    }
+    return promise
+  }
+
   constructor() {
     super()
     const reactiveThis = reactive(this) as this
@@ -271,6 +297,9 @@ export class Project extends Disposable {
       name: this.name,
       version: this.version,
       visibility: this.visibility,
+      description: this.description,
+      instructions: this.instructions,
+      thumbnail: this.thumbnail,
       filesHash: this.filesHash,
       lastSyncedFilesHash: this.lastSyncedFilesHash
     }
@@ -402,9 +431,9 @@ export class Project extends Disposable {
 
     try {
       if (this.isDisposed) throw new Error('disposed')
+      const thumbnailFile = await this.getThumbnail(abortController.signal)
+      this.thumbnail = await cloudHelper.saveFile(thumbnailFile, abortController.signal)
       const [metadata, files] = await this.export()
-      // TODO: take screenshot & save as thumbnail
-      // test screenshot function with `window.open(await (await project.screenshotTaker()).url(() => null))` in console
       const saved = await cloudHelper.save(metadata, files, abortController.signal)
       this.loadMetadata(saved.metadata)
       this.lastSyncedFilesHash = await hashFiles(files)
@@ -560,6 +589,17 @@ export class Project extends Disposable {
     }
     this.startAutoSaveToCloud(localCacheKey)
     this.startAutoSaveToLocalCache(localCacheKey)
+
+    this.addDisposer(
+      watch(
+        // new created project has no thumbnail, do save to cloud to generate thumbnail
+        () => this.thumbnail === '' && this.autoSaveMode === AutoSaveMode.Cloud,
+        (shouldGenerateThumbnail) => {
+          if (shouldGenerateThumbnail) this.saveToCloud?.()
+        },
+        { immediate: true }
+      )
+    )
   }
 }
 
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index 734daf42a..14a3d3ea8 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -1,22 +1,41 @@
 <template>
-  <RunnerContainer v-if="project != null" mode="share" :project="project" />
+  <ProjectRunner
+    v-if="project != null"
+    ref="projectRunnerRef"
+    class="project-runner"
+    :project="project"
+  />
   <UILoading :visible="project == null" cover />
 </template>
 
 <script setup lang="ts">
+import { ref, watchEffect } from 'vue'
 import { useAsyncComputed } from '@/utils/utils'
 import { Project } from '@/models/project'
-import RunnerContainer from '@/components/project/runner/RunnerContainer.vue'
 import { UILoading } from '@/components/ui'
+import ProjectRunner from '@/components/project/runner/ProjectRunner.vue'
 
 const props = defineProps<{
   owner: string
   name: string
 }>()
 
+const projectRunnerRef = ref<InstanceType<typeof ProjectRunner>>()
+
 const project = useAsyncComputed(async () => {
   const p = new Project()
   await p.loadFromCloud(props.owner, props.name)
   return p
 })
+
+watchEffect(() => {
+  projectRunnerRef.value?.run()
+})
 </script>
+
+<style scoped lang="scss">
+.project-runner {
+  padding: 20px;
+  flex: 1 1 0;
+}
+</style>
diff --git a/spx-gui/src/utils/file.ts b/spx-gui/src/utils/file.ts
index 397a6e7ce..161f4389c 100644
--- a/spx-gui/src/utils/file.ts
+++ b/spx-gui/src/utils/file.ts
@@ -124,7 +124,7 @@ export async function selectAudio() {
 }
 
 /** Get url for File */
-export function useFileUrl(fileSource: WatchSource<File | undefined>) {
+export function useFileUrl(fileSource: WatchSource<File | undefined | null>) {
   const urlRef = ref<string | null>(null)
   const loadingRef = ref(false)
   watch(
diff --git a/spx-gui/src/utils/utils.ts b/spx-gui/src/utils/utils.ts
index 1a7e1ff4f..0b8a5382f 100644
--- a/spx-gui/src/utils/utils.ts
+++ b/spx-gui/src/utils/utils.ts
@@ -1,6 +1,6 @@
 import { memoize } from 'lodash'
 import dayjs from 'dayjs'
-import { ref, shallowReactive, shallowRef, watch, watchEffect, type WatchSource } from 'vue'
+import { shallowReactive, shallowRef, watch, watchEffect, type WatchSource } from 'vue'
 import type { LocaleMessage } from './i18n'
 
 export const isImage = (url: string): boolean => {
@@ -26,7 +26,7 @@ export function isAddPublicLibraryEnabled() {
 }
 
 export function useAsyncComputed<T>(getter: () => Promise<T>) {
-  const r = ref<T>()
+  const r = shallowRef<T | null>(null)
   watchEffect(async (onCleanup) => {
     let cancelled = false
     onCleanup(() => {
@@ -85,16 +85,20 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
  * const bar = await untilNotNull(() => getBar())
  * ```
  */
-export function untilNotNull<T>(valueSource: WatchSource<T | null | undefined>) {
+export function untilNotNull<T>(
+  valueSource: WatchSource<T | null | undefined>,
+  signal?: AbortSignal
+) {
   return untilConditionMet(
     valueSource as WatchSource<T | null | undefined>,
-    (value): value is NonNullable<T> => value != null
+    (value): value is NonNullable<T> => value != null,
+    signal
   ) as Promise<NonNullable<T>>
 }
 
 /** Wait until given condition is met. */
-export async function until(conditionSource: WatchSource<boolean>) {
-  await untilConditionMet(conditionSource, (c) => c)
+export async function until(conditionSource: WatchSource<boolean>, signal?: AbortSignal) {
+  await untilConditionMet(conditionSource, (c) => c, signal)
 }
 
 /**
@@ -106,7 +110,8 @@ export async function until(conditionSource: WatchSource<boolean>) {
  */
 function untilConditionMet<T>(
   valueSource: WatchSource<T>,
-  condition: (value: T) => boolean
+  condition: (value: T) => boolean,
+  signal?: AbortSignal
 ): Promise<T> {
   return new Promise<T>((resolve) => {
     let stopWatch: (() => void) | null = null
@@ -119,6 +124,10 @@ function untilConditionMet<T>(
       },
       { immediate: true }
     )
+    if (signal != null) {
+      if (signal.aborted) stopWatch?.()
+      else signal.addEventListener('abort', () => stopWatch?.())
+    }
   })
 }
 

From 3d93c30064b76312fc8beb843fbb3a6a6942d5fc Mon Sep 17 00:00:00 2001
From: Aofei Sheng <aofei@aofeisheng.com>
Date: Thu, 17 Oct 2024 09:27:56 +0800
Subject: [PATCH 2/2] refactor(sign-in): redirect to intended page after
 signing in (#990)

Fixes #985
Fixes #986

Signed-off-by: Aofei Sheng <aofei@aofeisheng.com>
---
 spx-gui/package-lock.json                     |  22 ++-
 spx-gui/package.json                          |   3 +-
 .../src/components/navbar/NavbarProfile.vue   |   2 +-
 spx-gui/src/main.ts                           |   2 +-
 spx-gui/src/pages/editor/index.vue            |   2 +-
 spx-gui/src/pages/sign-in/callback.vue        |   9 +-
 spx-gui/src/stores/user.ts                    | 147 +++++++++--------
 spx-gui/src/utils/casdoor.ts                  | 150 ------------------
 8 files changed, 104 insertions(+), 233 deletions(-)
 delete mode 100644 spx-gui/src/utils/casdoor.ts

diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index 9c03596b9..fc96986d4 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -25,14 +25,15 @@
         "@vue/runtime-dom": "^3.4.10",
         "@vue/test-utils": "^2.4.5",
         "@vue/tsconfig": "^0.5.1",
+        "casdoor-js-sdk": "^0.15.0",
         "dayjs": "^1.11.10",
         "eslint": "^8.56.0",
         "eslint-plugin-vue": "^9.20.1",
         "file-saver": "^2.0.5",
         "happy-dom": "^14.3.6",
         "install": "^0.13.0",
-        "js-pkce": "^1.4.0",
         "jszip": "^3.10.1",
+        "jwt-decode": "^4.0.0",
         "konva": "^9.3.1",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
@@ -4258,6 +4259,16 @@
         }
       ]
     },
+    "node_modules/casdoor-js-sdk": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/casdoor-js-sdk/-/casdoor-js-sdk-0.15.0.tgz",
+      "integrity": "sha512-hVQLnWLGnRd1ve4TqIidA8/LRoSDZb69u2JNsD6dXil+Xs68aHZgguqXLM7nE85/0YE0DOr2fSJgBRSgH9R7ug==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "js-pkce": "^1.3.0",
+        "jwt-decode": "^4.0.0"
+      }
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@@ -6537,6 +6548,15 @@
       "integrity": "sha512-silMIRiFjUWlfaDhkgSzpuAyQ6EX/o09Eu8ZBfmFwQMbax7+LQzeIU2CBrICT6Ne4l86ITCGvUCBpCubWYy0Yw==",
       "license": "MIT"
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
diff --git a/spx-gui/package.json b/spx-gui/package.json
index 76627abe6..6f331aa77 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -30,14 +30,15 @@
     "@vue/runtime-dom": "^3.4.10",
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
+    "casdoor-js-sdk": "^0.15.0",
     "dayjs": "^1.11.10",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.20.1",
     "file-saver": "^2.0.5",
     "happy-dom": "^14.3.6",
     "install": "^0.13.0",
-    "js-pkce": "^1.4.0",
     "jszip": "^3.10.1",
+    "jwt-decode": "^4.0.0",
     "konva": "^9.3.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index d5de75528..ac6def268 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!userStore.userInfo" class="sign-in">
-    <UIButton type="secondary" :disabled="!isOnline" @click="userStore.signInWithRedirection()">{{
+    <UIButton type="secondary" :disabled="!isOnline" @click="userStore.initiateSignIn()">{{
       $t({ en: 'Sign in', zh: '登录' })
     }}</UIButton>
   </div>
diff --git a/spx-gui/src/main.ts b/spx-gui/src/main.ts
index 4b42b78a6..27359bfc1 100644
--- a/spx-gui/src/main.ts
+++ b/spx-gui/src/main.ts
@@ -22,7 +22,7 @@ dayjs.extend(timezone)
 
 const initApiClient = async () => {
   const userStore = useUserStore()
-  client.setAuthProvider(userStore.getFreshAccessToken)
+  client.setAuthProvider(userStore.ensureAccessToken)
 }
 
 async function initApp() {
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index 6304c3155..fdc745e05 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -46,7 +46,7 @@ watchEffect(() => {
   // This will be called on mount and whenever userStore changes,
   // which are the cases when userStore.signOut() is called
   if (!userStore.isSignedIn) {
-    userStore.signInWithRedirection()
+    userStore.initiateSignIn()
   }
 })
 
diff --git a/spx-gui/src/pages/sign-in/callback.vue b/spx-gui/src/pages/sign-in/callback.vue
index 6317b1193..fcdd96f06 100644
--- a/spx-gui/src/pages/sign-in/callback.vue
+++ b/spx-gui/src/pages/sign-in/callback.vue
@@ -16,8 +16,13 @@ try {
   if (lang === 'en' || lang === 'zh') {
     i18n.setLang(lang)
   }
-  await userStore.consumeCurrentUrl()
-} finally {
+
+  await userStore.completeSignIn()
+
+  const returnTo = params.get('returnTo')
+  window.location.replace(returnTo != null ? returnTo : '/')
+} catch (e) {
+  console.error('failed to complete sign-in', e)
   window.location.replace('/')
 }
 </script>
diff --git a/spx-gui/src/stores/user.ts b/spx-gui/src/stores/user.ts
index 861f5b6a2..c6ad6fdb0 100644
--- a/spx-gui/src/stores/user.ts
+++ b/spx-gui/src/stores/user.ts
@@ -1,39 +1,30 @@
-import CasdoorSdk from '@/utils/casdoor'
+import Sdk from 'casdoor-js-sdk'
 import { casdoorConfig } from '@/utils/env'
-import type ITokenResponse from 'js-pkce/dist/ITokenResponse'
+import { jwtDecode } from 'jwt-decode'
 import { defineStore } from 'pinia'
 
-// https://stackoverflow.com/questions/38552003/how-to-decode-jwt-token-in-javascript-without-using-a-library
-const parseJwt = (token: string) => {
-  const base64Url = token.split('.')[1]
-  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
-  const jsonPayload = decodeURIComponent(
-    atob(base64)
-      .split('')
-      .map(function (c) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
-      })
-      .join('')
-  )
-
-  return JSON.parse(jsonPayload)
-}
-
 export interface UserInfo {
-  name: string
   id: string
+  name: string
   displayName: string
   avatar: string
-  email: string
-  emailVerified: boolean
-  phone: string
 }
 
-const casdoorSdk = new CasdoorSdk({
+interface TokenResponse {
+  access_token: string
+  refresh_token: string
+  expires_in: number
+  refresh_expires_in: number
+}
+
+const casdoorAuthRedirectPath = '/callback'
+const casdoorSdk = new Sdk({
   ...casdoorConfig,
-  redirectPath: '/callback'
+  redirectPath: casdoorAuthRedirectPath
 })
 
+const tokenExpiryDelta = 60 * 1000 // 1 minute in milliseconds
+
 export const useUserStore = defineStore('spx-user', {
   state: () => ({
     accessToken: null as string | null,
@@ -43,74 +34,78 @@ export const useUserStore = defineStore('spx-user', {
     accessTokenExpiresAt: null as number | null,
     refreshTokenExpiresAt: null as number | null
   }),
+  getters: {
+    isAccessTokenValid(): boolean {
+      return !!(
+        this.accessToken &&
+        (this.accessTokenExpiresAt === null ||
+          this.accessTokenExpiresAt - tokenExpiryDelta > Date.now())
+      )
+    },
+    isRefreshTokenValid(): boolean {
+      return !!(
+        this.refreshToken &&
+        (this.refreshTokenExpiresAt === null ||
+          this.refreshTokenExpiresAt - tokenExpiryDelta > Date.now())
+      )
+    },
+    isSignedIn(): boolean {
+      return this.isAccessTokenValid || this.isRefreshTokenValid
+    },
+    userInfo(): UserInfo | null {
+      if (!this.isSignedIn) return null
+      return jwtDecode<UserInfo>(this.accessToken!)
+    }
+  },
   actions: {
-    async getFreshAccessToken(): Promise<string | null> {
+    initiateSignIn(
+      returnTo: string = window.location.pathname + window.location.search + window.location.hash
+    ) {
+      // Workaround for casdoor-js-sdk not supporting override of `redirectPath` in `signin_redirect`.
+      const casdoorSdk = new Sdk({
+        ...casdoorConfig,
+        redirectPath: `${casdoorAuthRedirectPath}?returnTo=${encodeURIComponent(returnTo)}`
+      })
+      casdoorSdk.signin_redirect()
+    },
+    async completeSignIn() {
+      const resp = await casdoorSdk.exchangeForAccessToken()
+      this.handleTokenResponse(resp)
+    },
+    signOut() {
+      this.accessToken = null
+      this.refreshToken = null
+      this.accessTokenExpiresAt = null
+      this.refreshTokenExpiresAt = null
+    },
+    async ensureAccessToken(): Promise<string | null> {
       if (this.isAccessTokenValid) return this.accessToken
 
       if (this.isRefreshTokenValid) {
         try {
-          const tokenResp = await casdoorSdk.pkce.refreshAccessToken(this.refreshToken!)
-          this.setToken(tokenResp)
+          const resp = await casdoorSdk.refreshAccessToken(this.refreshToken!)
+          this.handleTokenResponse(resp)
         } catch (e) {
-          console.error('Failed to refresh access token', e)
+          console.error('failed to refresh access token', e)
           throw e
         }
 
-        // Due to js-pkce's lack of error handling, we must check if the access token is valid after calling `PKCE.refreshAccessToken`.
-        // The token might still be invalid if, e.g., the server has already revoked the refresh token.
+        // Due to casdoor-js-sdk's lack of error handling, we must check if the access token is valid after calling
+        // `casdoorSdk.refreshAccessToken`. The token might still be invalid if, e.g., the server has already revoked
+        // the refresh token.
         if (this.isAccessTokenValid) return this.accessToken
       }
 
       this.signOut()
       return null
     },
-    setToken(tokenResp: ITokenResponse) {
-      const accessTokenExpiresAt = tokenResp.expires_in
-        ? Date.now() + tokenResp.expires_in * 1000
+    handleTokenResponse(resp: TokenResponse) {
+      this.accessToken = resp.access_token
+      this.refreshToken = resp.refresh_token
+      this.accessTokenExpiresAt = resp.expires_in ? Date.now() + resp.expires_in * 1000 : null
+      this.refreshTokenExpiresAt = resp.refresh_expires_in
+        ? Date.now() + resp.refresh_expires_in * 1000
         : null
-      const refreshTokenExpiresAt = tokenResp.refresh_expires_in
-        ? Date.now() + tokenResp.refresh_expires_in * 1000
-        : null
-      this.accessToken = tokenResp.access_token
-      this.refreshToken = tokenResp.refresh_token
-      this.accessTokenExpiresAt = accessTokenExpiresAt
-      this.refreshTokenExpiresAt = refreshTokenExpiresAt
-    },
-    signOut() {
-      this.accessToken = null
-      this.refreshToken = null
-      this.accessTokenExpiresAt = null
-      this.refreshTokenExpiresAt = null
-    },
-    async consumeCurrentUrl() {
-      const tokenResp = await casdoorSdk.pkce.exchangeForAccessToken(window.location.href)
-      this.setToken(tokenResp)
-    },
-    signInWithRedirection() {
-      casdoorSdk.signinWithRedirection()
-    }
-  },
-  getters: {
-    isAccessTokenValid(state): boolean {
-      const delta = 60 * 1000 // 1 minute
-      return !!(
-        state.accessToken &&
-        (state.accessTokenExpiresAt === null || state.accessTokenExpiresAt - delta > Date.now())
-      )
-    },
-    isRefreshTokenValid(state): boolean {
-      const delta = 60 * 1000 // 1 minute
-      return !!(
-        state.refreshToken &&
-        (state.refreshTokenExpiresAt === null || state.refreshTokenExpiresAt - delta > Date.now())
-      )
-    },
-    isSignedIn(): boolean {
-      return this.isAccessTokenValid || this.isRefreshTokenValid
-    },
-    userInfo(state): UserInfo | null {
-      if (!this.isSignedIn) return null
-      return parseJwt(state.accessToken!) as UserInfo
     }
   },
   persist: true
diff --git a/spx-gui/src/utils/casdoor.ts b/spx-gui/src/utils/casdoor.ts
deleted file mode 100644
index 134806a34..000000000
--- a/spx-gui/src/utils/casdoor.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-// The following content is copied from the casdoor-sdk package, as
-// we need to modify some of the code.
-// Original source:
-// https://github.com/casdoor/casdoor-js-sdk/blob/master/src/sdk.ts
-// The original source is a relatively simple SDK that wraps around
-// the js-pkce package. We need to modify the code to expose the
-// PKCE object, so that we can use it to refresh the access token.
-
-// Copyright 2021 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import PKCE from 'js-pkce'
-import type IObject from 'js-pkce/dist/IObject'
-
-interface SdkConfig {
-  serverUrl: string // your Casdoor server URL, e.g., "https://door.casbin.com" for the official demo site
-  clientId: string // the Client ID of your Casdoor application, e.g., "014ae4bd048734ca2dea"
-  appName: string // the name of your Casdoor application, e.g., "app-casnode"
-  organizationName: string // the name of the Casdoor organization connected with your Casdoor application, e.g., "casbin"
-  redirectPath?: string // the path of the redirect URL for your Casdoor application, will be "/callback" if not provided
-  signinPath?: string // the path of the signin URL for your Casdoor applcation, will be "/api/signin" if not provided
-  scope?: string // apply for permission to obtain the user information, will be "profile" if not provided
-  storage?: Storage // the storage to store the state, will be sessionStorage if not provided
-}
-
-// reference: https://github.com/casdoor/casdoor-go-sdk/blob/90fcd5646ec63d733472c5e7ce526f3447f99f1f/auth/jwt.go#L19-L32
-export interface CasdoorAccount {
-  organization: string
-  username: string
-  type: string
-  name: string
-  avatar: string
-  email: string
-  phone: string
-  affiliation: string
-  tag: string
-  language: string
-  score: number
-  isAdmin: boolean
-  accessToken: string
-}
-
-class Sdk {
-  config: SdkConfig
-  pkce: PKCE
-
-  constructor(config: SdkConfig) {
-    this.config = config
-    if (config.redirectPath === undefined || config.redirectPath === null) {
-      this.config.redirectPath = '/callback'
-    }
-
-    if (config.scope === undefined || config.scope === null) {
-      this.config.scope = 'profile'
-    }
-
-    this.pkce = new PKCE({
-      client_id: this.config.clientId,
-      redirect_uri: `${window.location.origin}${this.config.redirectPath}`,
-      authorization_endpoint: `${this.config.serverUrl.trim()}/login/oauth/authorize`,
-      token_endpoint: `${this.config.serverUrl.trim()}/api/login/oauth/access_token`,
-      requested_scopes: this.config.scope || 'profile',
-      storage: this.config.storage
-    })
-  }
-
-  getOrSaveState(): string {
-    const state = sessionStorage.getItem('casdoor-state')
-    if (state !== null) {
-      return state
-    } else {
-      const state = Math.random().toString(36).slice(2)
-      sessionStorage.setItem('casdoor-state', state)
-      return state
-    }
-  }
-
-  clearState() {
-    sessionStorage.removeItem('casdoor-state')
-  }
-
-  public getSignupUrl(enablePassword: boolean = true): string {
-    if (enablePassword) {
-      sessionStorage.setItem('signinUrl', this.getSigninUrl())
-      return `${this.config.serverUrl.trim()}/signup/${this.config.appName}`
-    } else {
-      return this.getSigninUrl().replace('/login/oauth/authorize', '/signup/oauth/authorize')
-    }
-  }
-
-  public getSigninUrl(): string {
-    const redirectUri =
-      this.config.redirectPath && this.config.redirectPath.includes('://')
-        ? this.config.redirectPath
-        : `${window.location.origin}${this.config.redirectPath}`
-    const state = this.getOrSaveState()
-    return `${this.config.serverUrl.trim()}/login/oauth/authorize?client_id=${this.config.clientId}&response_type=code&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${this.config.scope}&state=${state}`
-  }
-
-  // TODO: Rewrite this function. Is access_token really need to be passed with the url?
-  public getUserProfileUrl(userName: string, account: CasdoorAccount): string {
-    let param = ''
-    if (account !== undefined && account !== null) {
-      param = `?access_token=${account.accessToken}`
-    }
-    return `${this.config.serverUrl.trim()}/users/${this.config.organizationName}/${userName}${param}`
-  }
-
-  // TODO: The same as getUserProfileUrl
-  public getMyProfileUrl(account: CasdoorAccount, returnUrl: String = ''): string {
-    let params = ''
-    if (account !== undefined && account !== null) {
-      params = `?access_token=${account.accessToken}`
-      if (returnUrl !== '') {
-        params += `&returnUrl=${returnUrl}`
-      }
-    } else if (returnUrl !== '') {
-      params = `?returnUrl=${returnUrl}`
-    }
-    return `${this.config.serverUrl.trim()}/account${params}`
-  }
-
-  public signinWithRedirection(additionalParams?: IObject) {
-    window.location.assign(this.pkce.authorizeUrl(additionalParams))
-  }
-
-  // TODO: move to apis
-  public async getUserInfo(accessToken: string) {
-    return fetch(`${this.config.serverUrl.trim()}/api/userinfo`, {
-      method: 'GET',
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        'Content-Type': 'application/json'
-      }
-    }).then((res) => res.json())
-  }
-}
-
-export default Sdk