aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-18 21:19:44 +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 = [ const expirationOptions = [
{
label: "1 hour",
value: 3600,
},
{ {
label: "8 hours", label: "8 hours",
value: 3600 * 8, value: 3600 * 8,
}, },
{ {
label: "1 week", label: "1 month",
value: 3600 * 24 * 7, value: 3600 * 24 * 30,
}, },
{ {
label: "Never", label: "Never",
@ -40,7 +36,7 @@ const CreateAccessTokenDialog: React.FC<Props> = (props: Props) => {
const currentUser = useUserStore().getCurrentUser(); const currentUser = useUserStore().getCurrentUser();
const [state, setState] = useState({ const [state, setState] = useState({
description: "", description: "",
expiration: 3600, expiration: 3600 * 8,
}); });
const requestState = useLoading(false); const requestState = useLoading(false);

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

@ -1,10 +1,13 @@
import { Button } from "@mui/joy"; import { Button } from "@mui/joy";
import axios from "axios"; import axios from "axios";
import copy from "copy-to-clipboard";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import useUserStore from "../../stores/v1/user"; import useUserStore from "../../stores/v1/user";
import { ListUserAccessTokensResponse, UserAccessToken } from "../../types/proto/api/v2/user_service_pb"; import { ListUserAccessTokensResponse, UserAccessToken } from "../../types/proto/api/v2/user_service_pb";
import { showCommonDialog } from "../Alert"; import { showCommonDialog } from "../Alert";
import CreateAccessTokenDialog from "../CreateAccessTokenDialog"; import CreateAccessTokenDialog from "../CreateAccessTokenDialog";
import Icon from "../Icon";
const listAccessTokens = async (userId: number) => { const listAccessTokens = async (userId: number) => {
const { data } = await axios.get<ListUserAccessTokensResponse>(`/api/v2/users/${userId}/access_tokens`); 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); const accessTokens = await listAccessTokens(currentUser.id);
setUserAccessTokens(accessTokens); setUserAccessTokens(accessTokens);
}; };
const copyAccessToken = (accessToken: string) => {
copy(accessToken);
toast.success("Access token copied to clipboard");
};
const handleDeleteAccessToken = async (accessToken: string) => { const handleDeleteAccessToken = async (accessToken: string) => {
showCommonDialog({ showCommonDialog({
title: "Delete Access Token", title: "Delete Access Token",
@ -70,12 +78,12 @@ const AccessTokenSection = () => {
<table className="min-w-full divide-y divide-gray-300"> <table className="min-w-full divide-y divide-gray-300">
<thead> <thead>
<tr> <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"> <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Token Token
</th> </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"> <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Created At Created At
</th> </th>
@ -90,10 +98,13 @@ const AccessTokenSection = () => {
<tbody className="divide-y divide-gray-200"> <tbody className="divide-y divide-gray-200">
{userAccessTokens.map((userAccessToken) => ( {userAccessTokens.map((userAccessToken) => (
<tr key={userAccessToken.accessToken}> <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 flex flex-row justify-start items-center gap-x-1">
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> <span>{getFormatedAccessToken(userAccessToken.accessToken)}</span>
{getFormatedAccessToken(userAccessToken.accessToken)} <Button color="neutral" variant="plain" size="sm" onClick={() => copyAccessToken(userAccessToken.accessToken)}>
<Icon.Clipboard className="w-4 h-auto" />
</Button>
</td> </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.issuedAt)}</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
{String(userAccessToken.expiresAt ?? "Never")} {String(userAccessToken.expiresAt ?? "Never")}
@ -119,7 +130,7 @@ const AccessTokenSection = () => {
</div> </div>
{showCreateDialog && ( {showCreateDialog && (
<CreateAccessTokenDialog onClose={() => setShowCreateDialog(false)} onConfirm={handleCreateAccessTokenDialogClose} /> <CreateAccessTokenDialog onClose={() => setShowCreateDialog(false)} onConfirm={handleCreateAccessTokenDialogConfirm} />
)} )}
</> </>
); );