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

11
app/routes/settings/auth-keys/dialogs/add-auth-key.tsx
View file

@ -21,13 +21,14 @@ export default function AddAuthKey(data: AddAuthKeyProps) {
<Dialog.Button className="my-4">Create pre-auth key</Dialog.Button>
<Dialog.Panel>
<Dialog.Title>Generate auth key</Dialog.Title>
<Dialog.Text className="font-semibold">User</Dialog.Text>
<Dialog.Text className="text-sm">Attach this key to a user</Dialog.Text>
<input type="hidden" name="action_id" value="add_preauthkey" />
<Select
isRequired
label="Owner"
label="User"
name="user"
placeholder="Select a user"
description="This is the user machines will belong to when they authenticate."
className="mb-2"
>
{data.users.map((user) => (
<Select.Item key={user.name}>{user.name}</Select.Item>
@ -47,7 +48,7 @@ export default function AddAuthKey(data: AddAuthKeyProps) {
unitDisplay: 'short',
}}
/>
<div className="flex justify-between items-center mt-6">
<div className="flex justify-between items-center gap-2 mt-6">
<div>
<Dialog.Text className="font-semibold">Reusable</Dialog.Text>
<Dialog.Text className="text-sm">
@ -64,7 +65,7 @@ export default function AddAuthKey(data: AddAuthKeyProps) {
/>
</div>
<input type="hidden" name="reusable" value={reusable.toString()} />
<div className="flex justify-between items-center mt-6">
<div className="flex justify-between items-center gap-2 mt-6">
<div>
<Dialog.Text className="font-semibold">Ephemeral</Dialog.Text>
<Dialog.Text className="text-sm">

14
app/routes/settings/auth-keys/dialogs/expire-auth-key.tsx
View file

@ -1,17 +1,21 @@
import Dialog from '~/components/Dialog';
import type { PreAuthKey } from '~/types';
import type { PreAuthKey, User } from '~/types';
interface ExpireAuthKeyProps {
authKey: PreAuthKey;
user: User;
}
export default function ExpireAuthKey({ authKey }: ExpireAuthKeyProps) {
export default function ExpireAuthKey({ authKey, user }: ExpireAuthKeyProps) {
return (
<Dialog>
<Dialog.Button>Expire Key</Dialog.Button>
<Dialog.Panel method="DELETE" variant="destructive">
<Dialog.Button variant="heavy">Expire Key</Dialog.Button>
<Dialog.Panel variant="destructive">
<Dialog.Title>Expire auth key?</Dialog.Title>
<input type="hidden" name="user" value={authKey.user} />
<input type="hidden" name="action_id" value="expire_preauthkey" />
{/* TODO: Why is Headscale using email as the user ID here?
https://github.com/juanfont/headscale/issues/2520 */}
<input type="hidden" name="user" value={user.name} />
<input type="hidden" name="key" value={authKey.key} />
<Dialog.Text>
Expiring this authentication key will immediately prevent it from