blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

feat: show newly created token

Browse Source
This commit is contained in:
Catalin Pit
2023-11-28 15:49:46 +02:00
parent 6a5fc7a5fb
commit e1732de81d
3 changed files with 78 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -125,8 +125,8 @@ export default function DeleteTokenDialog({ trigger, tokenId, tokenName }: Delet
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel>
Confirm by typing Confirm by typing:{' '}
<span className="font-sm ml-2 font-mono tracking-widest"> <span className="font-sm text-destructive font-semibold">
{deleteMessage} {deleteMessage}
</span> </span>
</FormLabel> </FormLabel>

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

@@ -1,8 +1,11 @@
'use client'; 'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { Loader } from 'lucide-react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import type { z } from 'zod'; import type { z } from 'zod';
@@ -35,9 +38,14 @@ 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 { data: tokens } = 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) {
setNewlyCreatedToken(data.token);
},
});
const form = useForm<TCreateTokenMutationSchema>({ const form = useForm<TCreateTokenMutationSchema>({
resolver: zodResolver(ZCreateTokenMutationSchema), resolver: zodResolver(ZCreateTokenMutationSchema),
@@ -91,48 +99,66 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
return ( return (
<div className={cn(className)}> <div className={cn(className)}>
<h2 className="mt-6 text-xl">Your existing tokens</h2> <h2 className="mt-6 text-xl">Your existing tokens</h2>
<ul className="mb-4 flex flex-col gap-2"> {!tokens && isTokensLoading ? (
{tokens?.map((token) => ( <div className="absolute inset-0 flex items-center justify-center bg-white/50">
<li <Loader className="h-8 w-8 animate-spin text-gray-500" />
className="border-muted mb-4 mt-4 break-words rounded-sm border-2 p-4" </div>
key={token.id} ) : (
> <ul className="mb-4 flex flex-col gap-2">
<div> {tokens?.map((token) => (
<p> <li
{token.name} <span className="text-sm italic">({token.algorithm})</span> className="border-muted mb-4 mt-4 break-words rounded-sm border-2 p-4"
</p> key={token.id}
<p className="mb-4 mt-4 font-mono text-sm font-light">{token.token}</p> >
<p className="text-sm"> <div>
Created:{' '} <p className="mb-4">
{token.createdAt {token.name} <span className="text-sm italic">({token.algorithm})</span>
? new Date(token.createdAt).toLocaleDateString(undefined, { </p>
weekday: 'long', {/* <p className="mb-4 mt-4 font-mono text-sm font-light">{token.token}</p> */}
year: 'numeric', <p className="text-sm">
month: 'long', Created:{' '}
day: 'numeric', {token.createdAt
}) ? new Date(token.createdAt).toLocaleDateString(undefined, {
: 'N/A'} weekday: 'long',
</p> year: 'numeric',
<p className="text-sm"> month: 'long',
Expires:{' '} day: 'numeric',
{token.expires })
? new Date(token.expires).toLocaleDateString(undefined, { : 'N/A'}
weekday: 'long', </p>
year: 'numeric', <p className="mb-4 text-sm">
month: 'long', Expires:{' '}
day: 'numeric', {token.expires
}) ? new Date(token.expires).toLocaleDateString(undefined, {
: 'N/A'} weekday: 'long',
</p> year: 'numeric',
<DeleteTokenDialog tokenId={token.id} tokenName={token.name} /> month: 'long',
<Button variant="outline" className="mt-4" onClick={() => copyToken(token.token)}> day: 'numeric',
Copy token })
</Button> : 'N/A'}
</div> </p>
</li> <DeleteTokenDialog tokenId={token.id} tokenName={token.name} />
))} </div>
</ul> </li>
))}
</ul>
)}
{newlyCreatedToken && (
<div className="border-primary mb-8 break-words rounded-sm border p-4">
<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
see it again!
</p>
<p className="mb-4 mt-4 font-mono text-sm font-light">{newlyCreatedToken}</p>
<Button variant="outline" className="mt-4" onClick={() => copyToken(newlyCreatedToken)}>
Copy token
</Button>
</div>
)}
<h2 className="text-xl">Create a new token</h2> <h2 className="text-xl">Create a new token</h2>
<p className="text-muted-foreground mt-2 text-sm italic">
Enter a representative name for your new token.
</p>
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}> <form onSubmit={form.handleSubmit(onSubmit)}>
<fieldset className="mt-6 flex w-full flex-col gap-y-4"> <fieldset className="mt-6 flex w-full flex-col gap-y-4">

7
packages/lib/server-only/public-api/get-all-user-tokens.ts
View File

@@ -9,5 +9,12 @@ export const getUserTokens = async ({ userId }: GetUserTokensOptions) => {
where: { where: {
userId, userId,
}, },
select: {
id: true,
name: true,
algorithm: true,
createdAt: true,
expires: true,
},
}); });
}; };