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 3 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>
)
}
);
}
43 changes: 35 additions & 8 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,7 +22,7 @@ export default function NewAccess() {
name: "",
description: "",
});
const [GeneratedToken, setGeneratedToken] = useState<string | null>(null); // 用于存储生成的令牌
const [GeneratedToken, setGeneratedToken] = useState<string | null>(null);

const Fetch = async () => {
try {
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 @@ -166,10 +171,32 @@ export default function NewAccess() {
<div className="access">
<Modal opened={opened} onClose={close} 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>
<p>{GeneratedToken}</p>
<Button
styles={{
root: {
backgroundColor: 'var(--theme-button)',
color: 'white',
padding: '4px 8px',
fontSize: 'o.875rem',
height: '2rem',
},
}}
onClick={() => {
navigator.clipboard.writeText(GeneratedToken);
notifications.show({
title: 'Success',
message: 'Token copied to clipboard',
color: 'green',
});
}}
>
Copy to Clipboard
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you switch in icon? form react-icon

</Button>
</div>
)}
</Modal>
<h1>Personal Access Tokens</h1>
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