aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-20 22:07:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: add copy button to access token

Browse Source
This commit is contained in:
Steven 2023-08-07 20:08:47 +08:00
parent 6f96e5e0c8
commit fda2a3436d
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/CreateAccessTokenDialog.tsx
View File

@ -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);

27
web/src/components/setting/AccessTokenSection.tsx
View File

@ -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} />
)}
</>
);