From 2cdf29b995d10c56f6fd7ac3805c3f7e72293ede Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 18 Sep 2023 21:36:35 +0800
Subject: [PATCH] Add support for display token after creation

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 console/src/constants/annotations.ts          |  5 +++
 .../PersonalAccessTokenCreationModal.vue      | 39 +++++++++++++++++--
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/console/src/constants/annotations.ts b/console/src/constants/annotations.ts
index c3c16a56f91..76ae27bab3a 100644
--- a/console/src/constants/annotations.ts
+++ b/console/src/constants/annotations.ts
@@ -18,3 +18,8 @@ export enum rbacAnnotations {
 export enum contentAnnotations {
   PREFERRED_EDITOR = "content.halo.run/preferred-editor",
 }
+
+// pat
+export enum patAnnotations {
+  ACCESS_TOKEN = "security.halo.run/access-token",
+}
diff --git a/console/src/modules/system/users/components/PersonalAccessTokenCreationModal.vue b/console/src/modules/system/users/components/PersonalAccessTokenCreationModal.vue
index f2128ef2818..679f434eb97 100644
--- a/console/src/modules/system/users/components/PersonalAccessTokenCreationModal.vue
+++ b/console/src/modules/system/users/components/PersonalAccessTokenCreationModal.vue
@@ -1,10 +1,13 @@
 <script lang="ts" setup>
 import SubmitButton from "@/components/button/SubmitButton.vue";
+import { patAnnotations } from "@/constants/annotations";
 import { apiClient } from "@/utils/api-client";
 import { toISOString } from "@/utils/date";
-import { VButton, VModal } from "@halo-dev/components";
+import { Dialog, Toast, VButton, VModal } from "@halo-dev/components";
 import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { useClipboard } from "@vueuse/core";
 import type { PersonalAccessToken } from "packages/api-client/dist";
+import { computed } from "vue";
 import { ref } from "vue";
 
 const queryClient = useQueryClient();
@@ -29,7 +32,11 @@ const formState = ref<PersonalAccessToken>({
   },
 });
 
-const { mutate, isLoading } = useMutation({
+const {
+  mutate,
+  isLoading,
+  data: token,
+} = useMutation({
   mutationKey: ["pat-creation"],
   mutationFn: async () => {
     if (formState.value.spec?.expiresAt) {
@@ -37,15 +44,39 @@ const { mutate, isLoading } = useMutation({
         formState.value.spec.expiresAt
       );
     }
-    return await apiClient.pat.generatePat({
+    const { data } = await apiClient.pat.generatePat({
       personalAccessToken: formState.value,
     });
+    return data;
   },
-  onSuccess() {
+  onSuccess(data) {
+    Toast.success("创建成功");
     queryClient.invalidateQueries({ queryKey: ["personal-access-tokens"] });
     visible.value = false;
+    emit("close");
+
+    setTimeout(() => {
+      Dialog.info({
+        title: "请立即复制并保存，Token 将仅显示一次。",
+        description: data.metadata.annotations?.[patAnnotations.ACCESS_TOKEN],
+        confirmType: "secondary",
+        confirmText: "复制",
+        showCancel: false,
+        onConfirm: () => {
+          copy();
+          Toast.success("复制成功");
+        },
+      });
+    });
   },
 });
+
+const { copy } = useClipboard({
+  source: computed(
+    () => token.value?.metadata.annotations?.[patAnnotations.ACCESS_TOKEN] || ""
+  ),
+  legacy: true,
+});
 </script>
 
 <template>