fix: restore access token creation flow

Fixes #5563

web/src/components/CreateAccessTokenDialog.tsx

@@ -1,10 +1,12 @@
-import React, { useState } from "react";
+import copy from "copy-to-clipboard";
+import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Textarea } from "@/components/ui/textarea";
 import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
@@ -30,6 +32,7 @@ function CreateAccessTokenDialog({ open, onOpenChange, onSuccess }: Props) {
     description: "",
     expiration: 30, // Default: 30 days
   });
+  const [createdToken, setCreatedToken] = useState<string | null>(null);
   const requestState = useLoading(false);
 
   // Expiration options in days (0 = never expires)
@@ -83,7 +86,11 @@ function CreateAccessTokenDialog({ open, onOpenChange, onSuccess }: Props) {
 
       requestState.setFinish();
       onSuccess(response);
-      onOpenChange(false);
+      if (response.token) {
+        setCreatedToken(response.token);
+      } else {
+        onOpenChange(false);
+      }
     } catch (error: unknown) {
       handleError(error, toast.error, {
         context: "Create access token",
@@ -92,46 +99,81 @@ function CreateAccessTokenDialog({ open, onOpenChange, onSuccess }: Props) {
     }
   };
 
+  const handleCopyToken = () => {
+    if (!createdToken) return;
+    copy(createdToken);
+    toast.success(t("message.copied"));
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    setState({
+      description: "",
+      expiration: 30,
+    });
+    setCreatedToken(null);
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-md">
         <DialogHeader>
           <DialogTitle>{t("setting.access-token-section.create-dialog.create-access-token")}</DialogTitle>
         </DialogHeader>
-        <div className="flex flex-col gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="description">
-              {t("setting.access-token-section.create-dialog.description")} <span className="text-destructive">*</span>
-            </Label>
-            <Input
-              id="description"
-              type="text"
-              placeholder={t("setting.access-token-section.create-dialog.some-description")}
-              value={state.description}
-              onChange={handleDescriptionInputChange}
-            />
+        {createdToken ? (
+          <div className="flex flex-col gap-4">
+            <div className="grid gap-2">
+              <Label>{t("setting.access-token-section.token")}</Label>
+              <Textarea value={createdToken} readOnly rows={3} className="font-mono text-xs" />
+            </div>
           </div>
-          <div className="grid gap-2">
-            <Label>
-              {t("setting.access-token-section.create-dialog.expiration")} <span className="text-destructive">*</span>
-            </Label>
-            <RadioGroup value={state.expiration.toString()} onValueChange={handleRoleInputChange} className="flex flex-row gap-4">
-              {expirationOptions.map((option) => (
-                <div key={option.value} className="flex items-center space-x-2">
-                  <RadioGroupItem value={option.value.toString()} id={`expiration-${option.value}`} />
-                  <Label htmlFor={`expiration-${option.value}`}>{option.label}</Label>
-                </div>
-              ))}
-            </RadioGroup>
+        ) : (
+          <div className="flex flex-col gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="description">
+                {t("setting.access-token-section.create-dialog.description")} <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                id="description"
+                type="text"
+                placeholder={t("setting.access-token-section.create-dialog.some-description")}
+                value={state.description}
+                onChange={handleDescriptionInputChange}
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label>
+                {t("setting.access-token-section.create-dialog.expiration")} <span className="text-destructive">*</span>
+              </Label>
+              <RadioGroup value={state.expiration.toString()} onValueChange={handleRoleInputChange} className="flex flex-row gap-4">
+                {expirationOptions.map((option) => (
+                  <div key={option.value} className="flex items-center space-x-2">
+                    <RadioGroupItem value={option.value.toString()} id={`expiration-${option.value}`} />
+                    <Label htmlFor={`expiration-${option.value}`}>{option.label}</Label>
+                  </div>
+                ))}
+              </RadioGroup>
+            </div>
           </div>
-        </div>
+        )}
         <DialogFooter>
-          <Button variant="ghost" disabled={requestState.isLoading} onClick={() => onOpenChange(false)}>
-            {t("common.cancel")}
-          </Button>
-          <Button disabled={requestState.isLoading} onClick={handleSaveBtnClick}>
-            {t("common.create")}
-          </Button>
+          {createdToken ? (
+            <>
+              <Button variant="ghost" onClick={handleCopyToken}>
+                {t("common.copy")}
+              </Button>
+              <Button onClick={() => onOpenChange(false)}>{t("common.close")}</Button>
+            </>
+          ) : (
+            <>
+              <Button variant="ghost" disabled={requestState.isLoading} onClick={() => onOpenChange(false)}>
+                {t("common.cancel")}
+              </Button>
+              <Button disabled={requestState.isLoading} onClick={handleSaveBtnClick}>
+                {t("common.create")}
+              </Button>
+            </>
+          )}
         </DialogFooter>
       </DialogContent>
     </Dialog>

web/src/components/Settings/AccessTokenSection.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useDialog } from "@/hooks/useDialog";
+import { handleError } from "@/lib/error";
 import { CreatePersonalAccessTokenResponse, PersonalAccessToken } from "@/types/proto/api/v1/user_service_pb";
 import { useTranslate } from "@/utils/i18n";
 import CreateAccessTokenDialog from "../CreateAccessTokenDialog";
@@ -30,10 +31,23 @@ const AccessTokenSection = () => {
   const [deleteTarget, setDeleteTarget] = useState<PersonalAccessToken | undefined>(undefined);
 
   useEffect(() => {
-    listAccessTokens(currentUser?.name ?? "").then((tokens) => {
-      setPersonalAccessTokens(tokens);
-    });
-  }, []);
+    if (!currentUser?.name) return;
+    let canceled = false;
+    listAccessTokens(currentUser.name)
+      .then((tokens) => {
+        if (!canceled) {
+          setPersonalAccessTokens(tokens);
+        }
+      })
+      .catch((error: unknown) => {
+        if (!canceled) {
+          handleError(error, toast.error, { context: "List access tokens" });
+        }
+      });
+    return () => {
+      canceled = true;
+    };
+  }, [currentUser?.name]);
 
   const handleCreateAccessTokenDialogConfirm = async (response: CreatePersonalAccessTokenResponse) => {
     const tokens = await listAccessTokens(currentUser?.name ?? "");