Skip to content

Upgraded the token modal with a clear warning that the token displays only once and added a “Copy to Clipboard” button with a confirmation notification. #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 13, 2025
Merged

Upgraded the token modal with a clear warning that the token displays only once and added a “Copy to Clipboard” button with a confirmation notification. #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2bf18bd
fix:solve the Nested problem
touyoutaaa Apr 13, 2025
631f47e
fix:solve the data time type problem
touyoutaaa Apr 13, 2025
9813b80
fix:solve the copy button and warning problem
touyoutaaa Apr 13, 2025
bb1a081
fix:solve the copy button and warning problem
touyoutaaa Apr 13, 2025
bc48572
fix:solve the copy button and warning problem
touyoutaaa Apr 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 19 additions & 20 deletions src/app/(repo)/[user]/[repo]/pr/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Button, Input, Tabs, Menu } from '@mantine/core';
import { BsSearch } from 'react-icons/bs';
import { IconChevronDown } from '@tabler/icons-react';

export default function Page(){
return(
export default function Page() {
return (
<div className="pr">
<div className="pr-header">
<div className="title">
Expand All @@ -23,13 +23,13 @@ export default function Page(){
rightSection={
<BsSearch style={{
color: "black",
}}/>
}} />
}
/>
<Menu>
<Menu.Target>
<Button variant="outline" color="orange">
Author<IconChevronDown size={14} />
Author <IconChevronDown size={14} />
</Button>
</Menu.Target>
<Menu.Dropdown>
Expand All @@ -53,31 +53,30 @@ export default function Page(){
<Menu>
<Menu.Target>
<Button variant="outline" color="orange">
PReviews <IconChevronDown size={14} />
Reviews <IconChevronDown size={14} />
</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item>PReviews1</Menu.Item>
<Menu.Item>PReviews2</Menu.Item>
<Menu.Item>PReviews3</Menu.Item>
</Menu.Dropdown>
<Menu>
<Menu.Target>
<Button variant="outline" color="orange">
Sort <IconChevronDown size={14} />
</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item>Oldest</Menu.Item>
<Menu.Item>Newest</Menu.Item>
<Menu.Item>Best match</Menu.Item>
</Menu.Dropdown>

</Menu>
</Menu>
<Menu>
<Menu.Target>
<Button variant="outline" color="orange">
Sort <IconChevronDown size={14} />
</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item>Oldest</Menu.Item>
<Menu.Item>Newest</Menu.Item>
<Menu.Item>Best match</Menu.Item>
</Menu.Dropdown>
</Menu>
</div>
</Tabs>
</div>
</div>
)
}
);
}
73 changes: 63 additions & 10 deletions src/app/settings/access/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
'use client';
import { useState, useEffect } from 'react';
import {Button, Divider, Input, InputLabel, Modal, Textarea} from '@mantine/core';
import { Button, Divider, Input, InputLabel, Modal, Textarea } from '@mantine/core';
import { notifications } from '@mantine/notifications';
import { DateTime } from 'luxon';
import {useDisclosure} from "@mantine/hooks";
import { useDisclosure } from "@mantine/hooks";

export interface TokenModel {
uid: string;
Expand All @@ -22,8 +22,8 @@ export default function NewAccess() {
name: "",
description: "",
});
const [GeneratedToken, setGeneratedToken] = useState<string | null>(null); // 用于存储生成的令牌

const [GeneratedToken, setGeneratedToken] = useState<string | null>(null);
const [isCopied, setIsCopied] = useState(false);
const Fetch = async () => {
try {
const res = await fetch("/api/v1/users/token", {
Expand All @@ -36,7 +36,12 @@ export default function NewAccess() {
if (res.status === 200) {
const data = await res.json();
if (data.tokens) {
setList(data.tokens);
const tokens: TokenModel[] = data.tokens.map((token: { created_at: string; updated_at: string; uid: string; user_uid: string; name: string; description: string }) => ({
...token,
created_at: DateTime.fromISO(token.created_at),
updated_at: DateTime.fromISO(token.updated_at),
}));
setList(tokens);
} else {
notifications.show({
title: 'Failed',
Expand Down Expand Up @@ -86,6 +91,7 @@ export default function NewAccess() {
});

setGeneratedToken(data.token.token);
setIsCopied(false); // 重置复制状态
open();
setEdit(false);
await Fetch();
Expand Down Expand Up @@ -164,14 +170,61 @@ export default function NewAccess() {

return (
<div className="access">
<Modal opened={opened} onClose={close} withCloseButton={false} size={"lg"}>
<Modal opened={opened} onClose={() => { close(); setIsCopied(false); }} withCloseButton={false} size={"lg"}>
{GeneratedToken && (
<div className="generated-token">
<h2>Generated Token:</h2>
<p>{GeneratedToken}</p>
</div>
<div className="generated-token">
<h2>Generated Token:</h2>
<p className="warning">This token will only be displayed once. Please copy it now.</p>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div
style={{
backgroundColor: '#f0f0f0',
padding: '0.25rem',
border: '1px solid #ccc',
borderRadius: '4px',
fontFamily: 'monospace',
flexGrow: 1,
marginRight: '0.5rem',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{GeneratedToken}
</div>
<Button
styles={{
root: {
backgroundColor: isCopied ? '#a5a5a5' : 'var(--theme-button)',
color: 'white',
padding: '4px 8px',
fontSize: '0.875rem',
height: '2rem',
width: '80px',
cursor: isCopied ? 'not-allowed' : 'pointer',
},
}}
onClick={() => {
if (!isCopied) {
navigator.clipboard.writeText(GeneratedToken);
setIsCopied(true);
notifications.show({
title: 'Success',
message: 'Token copied to clipboard',
color: 'green',
});
}
}}
disabled={isCopied}
>
{isCopied ? 'Copied!' : 'Copy'}
</Button>
</div>
</div>
)}
</Modal>


<h1>Personal Access Tokens</h1>
<span>
Personal access tokens allow you to authenticate with GitDataAI APIs and use Git over HTTPS.
Expand Down
10 changes: 10 additions & 0 deletions src/style/setting.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,19 @@
align-items: center;
}
.access-list-delete {
background-color: red;
color: white;
align-items: center;
span {
color: white;
margin: 0;
}
}
}

.warning {
color: red;
font-weight: bold;
margin: 10px 0;
}

Loading