Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-16 01:32:06 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: improvements to the newly created token message

Browse Source
This commit is contained in:
Catalin Pit
2023-11-29 14:43:26 +02:00
parent e1732de81d
commit d43d40fd6b
2 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx
View File

@ -1,5 +1,3 @@
'use client';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
@ -34,9 +32,15 @@ export type DeleteTokenDialogProps = {
trigger?: React.ReactNode; trigger?: React.ReactNode;
tokenId: number; tokenId: number;
tokenName: string; tokenName: string;
onDelete: () => void;
}; };
export default function DeleteTokenDialog({ trigger, tokenId, tokenName }: DeleteTokenDialogProps) { export default function DeleteTokenDialog({
trigger,
tokenId,
tokenName,
onDelete,
}: DeleteTokenDialogProps) {
const router = useRouter(); const router = useRouter();
const { toast } = useToast(); const { toast } = useToast();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -51,7 +55,11 @@ export default function DeleteTokenDialog({ trigger, tokenId, tokenName }: Delet
type TDeleteTokenByIdMutationSchema = z.infer<typeof ZDeleteTokenDialogSchema>; type TDeleteTokenByIdMutationSchema = z.infer<typeof ZDeleteTokenDialogSchema>;
const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation(); const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation({
onSuccess() {
onDelete();
},
});
const form = useForm<TDeleteTokenByIdMutationSchema>({ const form = useForm<TDeleteTokenByIdMutationSchema>({
resolver: zodResolver(ZDeleteTokenDialogSchema), resolver: zodResolver(ZDeleteTokenDialogSchema),

29
apps/web/src/components/forms/token.tsx
View File

@ -38,12 +38,13 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
const router = useRouter(); const router = useRouter();
const [, copy] = useCopyToClipboard(); const [, copy] = useCopyToClipboard();
const { toast } = useToast(); const { toast } = useToast();
const [newlyCreatedToken, setNewlyCreatedToken] = useState(''); const [newlyCreatedToken, setNewlyCreatedToken] = useState({ id: 0, token: '' });
const [showNewToken, setShowNewToken] = useState(false);
const { data: tokens, isLoading: isTokensLoading } = trpc.apiToken.getTokens.useQuery(); const { data: tokens, isLoading: isTokensLoading } = trpc.apiToken.getTokens.useQuery();
const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation({ const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation({
onSuccess(data) { onSuccess(data) {
setNewlyCreatedToken(data.token); setNewlyCreatedToken({ id: data.id, token: data.token });
}, },
}); });
@ -54,6 +55,12 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
}, },
}); });
const onDelete = (tokenId: number) => {
if (tokenId === newlyCreatedToken.id) {
setShowNewToken((prev) => !prev);
}
};
const copyToken = (token: string) => { const copyToken = (token: string) => {
void copy(token).then(() => { void copy(token).then(() => {
toast({ toast({
@ -75,6 +82,7 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
duration: 5000, duration: 5000,
}); });
setShowNewToken(true);
form.reset(); form.reset();
router.refresh(); router.refresh();
} catch (error) { } catch (error) {
@ -114,7 +122,6 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
<p className="mb-4"> <p className="mb-4">
{token.name} <span className="text-sm italic">({token.algorithm})</span> {token.name} <span className="text-sm italic">({token.algorithm})</span>
</p> </p>
{/* <p className="mb-4 mt-4 font-mono text-sm font-light">{token.token}</p> */}
<p className="text-sm"> <p className="text-sm">
Created:{' '} Created:{' '}
{token.createdAt {token.createdAt
@ -137,20 +144,28 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
}) })
: 'N/A'} : 'N/A'}
</p> </p>
<DeleteTokenDialog tokenId={token.id} tokenName={token.name} /> <DeleteTokenDialog
tokenId={token.id}
tokenName={token.name}
onDelete={() => onDelete(token.id)}
/>
</div> </div>
</li> </li>
))} ))}
</ul> </ul>
)} )}
{newlyCreatedToken && ( {newlyCreatedToken.token && showNewToken && (
<div className="border-primary mb-8 break-words rounded-sm border p-4"> <div className="border-primary mb-8 break-words rounded-sm border p-4">
<p className="text-muted-foreground mt-2 text-sm italic"> <p className="text-muted-foreground mt-2 text-sm italic">
Your token was created successfully! Make sure to copy it because you won't be able to Your token was created successfully! Make sure to copy it because you won't be able to
see it again! see it again!
</p> </p>
<p className="mb-4 mt-4 font-mono text-sm font-light">{newlyCreatedToken}</p> <p className="mb-4 mt-4 font-mono text-sm font-light">{newlyCreatedToken.token}</p>
<Button variant="outline" className="mt-4" onClick={() => copyToken(newlyCreatedToken)}> <Button
variant="outline"
className="mt-4"
onClick={() => copyToken(newlyCreatedToken.token)}
>
Copy token Copy token
</Button> </Button>
</div> </div>