Add support for display token after creation

Signed-off-by: Ryan Wang <[email protected]>

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",
+}

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,23 +32,51 @@ const formState = ref<PersonalAccessToken>({
   },
 });
 
-const { mutate, isLoading } = useMutation({
+const {
+  mutate,
+  isLoading,
+  data: token,
+} = useMutation({
   mutationKey: ["pat-creation"],
   mutationFn: async () => {
     if (formState.value.spec?.expiresAt) {
       formState.value.spec.expiresAt = toISOString(
         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>