From fda2a3436ddf95a69f6ff4e8a1f6b9d7cab5cab6 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 7 Aug 2023 20:08:47 +0800
Subject: [PATCH] chore: add copy button to access token

---
 .../components/CreateAccessTokenDialog.tsx    | 10 +++----
 .../components/setting/AccessTokenSection.tsx | 27 +++++++++++++------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/web/src/components/CreateAccessTokenDialog.tsx b/web/src/components/CreateAccessTokenDialog.tsx
index a728080..77cf2c6 100644
--- a/web/src/components/CreateAccessTokenDialog.tsx
+++ b/web/src/components/CreateAccessTokenDialog.tsx
@@ -12,17 +12,13 @@ interface Props {
 }
 
 const expirationOptions = [
-  {
-    label: "1 hour",
-    value: 3600,
-  },
   {
     label: "8 hours",
     value: 3600 * 8,
   },
   {
-    label: "1 week",
-    value: 3600 * 24 * 7,
+    label: "1 month",
+    value: 3600 * 24 * 30,
   },
   {
     label: "Never",
@@ -40,7 +36,7 @@ const CreateAccessTokenDialog: React.FC<Props> = (props: Props) => {
   const currentUser = useUserStore().getCurrentUser();
   const [state, setState] = useState({
     description: "",
-    expiration: 3600,
+    expiration: 3600 * 8,
   });
   const requestState = useLoading(false);
 
diff --git a/web/src/components/setting/AccessTokenSection.tsx b/web/src/components/setting/AccessTokenSection.tsx
index 7d88199..3d3f5bc 100644
--- a/web/src/components/setting/AccessTokenSection.tsx
+++ b/web/src/components/setting/AccessTokenSection.tsx
@@ -1,10 +1,13 @@
 import { Button } from "@mui/joy";
 import axios from "axios";
+import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import useUserStore from "../../stores/v1/user";
 import { ListUserAccessTokensResponse, UserAccessToken } from "../../types/proto/api/v2/user_service_pb";
 import { showCommonDialog } from "../Alert";
 import CreateAccessTokenDialog from "../CreateAccessTokenDialog";
+import Icon from "../Icon";
 
 const listAccessTokens = async (userId: number) => {
   const { data } = await axios.get<ListUserAccessTokensResponse>(`/api/v2/users/${userId}/access_tokens`);
@@ -22,11 +25,16 @@ const AccessTokenSection = () => {
     });
   }, []);
 
-  const handleCreateAccessTokenDialogClose = async () => {
+  const handleCreateAccessTokenDialogConfirm = async () => {
     const accessTokens = await listAccessTokens(currentUser.id);
     setUserAccessTokens(accessTokens);
   };
 
+  const copyAccessToken = (accessToken: string) => {
+    copy(accessToken);
+    toast.success("Access token copied to clipboard");
+  };
+
   const handleDeleteAccessToken = async (accessToken: string) => {
     showCommonDialog({
       title: "Delete Access Token",
@@ -70,12 +78,12 @@ const AccessTokenSection = () => {
                 <table className="min-w-full divide-y divide-gray-300">
                   <thead>
                     <tr>
-                      <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">
-                        Description
-                      </th>
                       <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                         Token
                       </th>
+                      <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">
+                        Description
+                      </th>
                       <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                         Created At
                       </th>
@@ -90,10 +98,13 @@ const AccessTokenSection = () => {
                   <tbody className="divide-y divide-gray-200">
                     {userAccessTokens.map((userAccessToken) => (
                       <tr key={userAccessToken.accessToken}>
-                        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900">{userAccessToken.description}</td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                          {getFormatedAccessToken(userAccessToken.accessToken)}
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 flex flex-row justify-start items-center gap-x-1">
+                          <span>{getFormatedAccessToken(userAccessToken.accessToken)}</span>
+                          <Button color="neutral" variant="plain" size="sm" onClick={() => copyAccessToken(userAccessToken.accessToken)}>
+                            <Icon.Clipboard className="w-4 h-auto" />
+                          </Button>
                         </td>
+                        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900">{userAccessToken.description}</td>
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{String(userAccessToken.issuedAt)}</td>
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                           {String(userAccessToken.expiresAt ?? "Never")}
@@ -119,7 +130,7 @@ const AccessTokenSection = () => {
       </div>
 
       {showCreateDialog && (
-        <CreateAccessTokenDialog onClose={() => setShowCreateDialog(false)} onConfirm={handleCreateAccessTokenDialogClose} />
+        <CreateAccessTokenDialog onClose={() => setShowCreateDialog(false)} onConfirm={handleCreateAccessTokenDialogConfirm} />
       )}
     </>
   );