rsp2k/headplane
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: rework the entire pre-auth keys page

Browse source
This commit is contained in:
Aarnav Tale 2025-04-06 15:41:03 -04:00
parent 785d5a663f
commit 3dca401837
9 changed files with 315 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

16
app/routes/settings/auth-keys/auth-key-row.tsx
View file

@ -1,24 +1,24 @@
import type { PreAuthKey } from '~/types';
import Attribute from '~/components/Attribute';
import Button from '~/components/Button';
import Code from '~/components/Code';
import type { PreAuthKey, User } from '~/types';
import toast from '~/utils/toast';
import ExpireAuthKey from './dialogs/expire-auth-key';
interface Props {
authKey: PreAuthKey;
server: string;
user: User;
url: string;
}
export default function AuthKeyRow({ authKey, server }: Props) {
export default function AuthKeyRow({ authKey, user, url }: Props) {
const createdAt = new Date(authKey.createdAt).toLocaleString();
const expiration = new Date(authKey.expiration).toLocaleString();
return (
<div className="w-full">
<Attribute name="Key" value={authKey.key} isCopyable />
<Attribute name="User" value={authKey.user} isCopyable />
<Attribute name="User" value={user.name} isCopyable />
<Attribute name="Reusable" value={authKey.reusable ? 'Yes' : 'No'} />
<Attribute name="Ephemeral" value={authKey.ephemeral ? 'Yes' : 'No'} />
<Attribute name="Used" value={authKey.used ? 'Yes' : 'No'} />
@ -32,19 +32,19 @@ export default function AuthKeyRow({ authKey, server }: Props) {
To use this key, run the following command on your device:
</p>
<Code className="text-sm">
tailscale up --login-server {server} --authkey {authKey.key}
tailscale up --login-server={url} --authkey {authKey.key}
</Code>
<div suppressHydrationWarning className="flex gap-4 items-center">
{(authKey.used && !authKey.reusable) ||
new Date(authKey.expiration) < new Date() ? undefined : (
<ExpireAuthKey authKey={authKey} />
<ExpireAuthKey authKey={authKey} user={user} />
)}
<Button
variant="light"
className="my-4"
onPress={async () => {
await navigator.clipboard.writeText(
`tailscale up --login-server ${server} --authkey ${authKey.key}`,
`tailscale up --login-server=${url} --authkey ${authKey.key}`,
);
toast('Copied command to clipboard');