gsadmin/headplane
1
0
Fork 0
mirror of https://github.com/tale/headplane.git synced 2026-08-25 20:06:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: switch to new dialog across all code

Browse Source
This commit is contained in:
Aarnav Tale
2025-01-26 15:04:13 -05:00
parent 0f75636342
commit 741f9aa6b5
24 changed files with 833 additions and 1196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/users/dialogs/add.tsx
+14 -51
View File
@@ -1,61 +1,24 @@
import { Form, useSubmit } from 'react-router';
import { useState } from 'react';
import Code from '~/components/Code';
import Dialog from '~/components/Dialog';
import TextField from '~/components/TextField';
interface Props {
magic?: string;
}
export default function Add({ magic }: Props) {
const [username, setUsername] = useState('');
const submit = useSubmit();
import Input from '~/components/Input';
export default function Add() {
return (
<Dialog>
<Dialog.Button>Add a new user</Dialog.Button>
<Dialog.Panel>
{(close) => (
<>
<Dialog.Title>Add a new user</Dialog.Title>
<Dialog.Text className="mb-8">
Enter a username to create a new user.{' '}
{magic ? (
<>
Since Magic DNS is enabled, machines will be accessible via{' '}
<Code>[machine]. .{magic}</Code>.
</>
) : undefined}
</Dialog.Text>
<Form
method="POST"
onSubmit={(event) => {
submit(event.currentTarget);
setUsername('');
}}
>
<input type="hidden" name="_method" value="create" />
<TextField
label="Username"
placeholder="my-new-user"
name="username"
state={[username, setUsername]}
className="my-2"
/>
<Dialog.Gutter>
<Dialog.Action variant="cancel" onPress={close}>
Cancel
</Dialog.Action>
<Dialog.Action variant="confirm" onPress={close}>
Create
</Dialog.Action>
</Dialog.Gutter>
</Form>
</>
)}
<Dialog.Title>Add a new user</Dialog.Title>
<Dialog.Text className="mb-8">
Enter a username to create a new user. Usernames can be addressed when
managing ACL policies.
</Dialog.Text>
<input type="hidden" name="_method" value="create" />
<Input
isRequired
name="username"
label="Username"
placeholder="my-new-user"
/>
</Dialog.Panel>
</Dialog>
);
app/routes/users/dialogs/remove.tsx
+13 -44
View File
@@ -1,8 +1,4 @@
import { X } from 'lucide-react';
import { Form, useSubmit } from 'react-router';
import { useState } from 'react';
import IconButton from '~/components/IconButton';
import Code from '~/components/Code';
import Dialog from '~/components/Dialog';
@@ -11,47 +7,20 @@ interface Props {
}
export default function Remove({ username }: Props) {
const submit = useSubmit();
const [dialog, setDialog] = useState(false);
return (
<>
<IconButton
label={`Delete ${username}`}
onPress={() => setDialog(true)}
>
<Dialog>
<Dialog.IconButton label={`Delete ${username}`}>
<X className="p-0.5" />
</IconButton>
<Dialog control={[dialog, setDialog]}>
<Dialog.Panel control={[dialog, setDialog]}>
{(close) => (
<>
<Dialog.Title>Delete {username}?</Dialog.Title>
<Dialog.Text className="mb-8">
Are you sure you want to delete {username}? A deleted user
cannot be recovered.
</Dialog.Text>
<Form
method="POST"
onSubmit={(event) => {
submit(event.currentTarget);
}}
>
<input type="hidden" name="_method" value="delete" />
<input type="hidden" name="username" value={username} />
<div className="mt-6 flex justify-end gap-2 mt-6">
<Dialog.Action variant="cancel" onPress={close}>
Cancel
</Dialog.Action>
<Dialog.Action variant="confirm" onPress={close}>
Delete
</Dialog.Action>
</div>
</Form>
</>
)}
</Dialog.Panel>
</Dialog>
</>
</Dialog.IconButton>
<Dialog.Panel>
<Dialog.Title>Delete {username}?</Dialog.Title>
<Dialog.Text className="mb-8">
Are you sure you want to delete {username}? A deleted user cannot be
recovered.
</Dialog.Text>
<input type="hidden" name="_method" value="delete" />
<input type="hidden" name="username" value={username} />
</Dialog.Panel>
</Dialog>
);
}
app/routes/users/dialogs/rename.tsx
+23 -51
View File
@@ -1,65 +1,37 @@
import { Pencil } from 'lucide-react';
import { Form, useSubmit } from 'react-router';
import { useState } from 'react';
import IconButton from '~/components/IconButton';
import Dialog from '~/components/Dialog';
import TextField from '~/components/TextField';
import Input from '~/components/Input';
interface Props {
username: string;
magic?: string;
}
export default function Rename({ username, magic }: Props) {
const submit = useSubmit();
const [dialog, setDialog] = useState(false);
// TODO: Server side validation before submitting
export default function Rename({ username }: Props) {
const [newName, setNewName] = useState(username);
return (
<>
<IconButton
label={`Rename ${username}`}
onPress={() => setDialog(true)}
>
<Dialog>
<Dialog.IconButton label={`Rename ${username}`}>
<Pencil className="p-1" />
</IconButton>
<Dialog control={[dialog, setDialog]}>
<Dialog.Panel control={[dialog, setDialog]}>
{(close) => (
<>
<Dialog.Title>Rename {username}?</Dialog.Title>
<Dialog.Text className="mb-8">
Enter a new username for {username}
</Dialog.Text>
<Form
method="POST"
onSubmit={(event) => {
submit(event.currentTarget);
}}
>
<input type="hidden" name="_method" value="rename" />
<input type="hidden" name="old" value={username} />
<TextField
label="Username"
placeholder="my-new-name"
name="new"
state={[newName, setNewName]}
className="my-2"
/>
<div className="mt-6 flex justify-end gap-2 mt-6">
<Dialog.Action variant="cancel" onPress={close}>
Cancel
</Dialog.Action>
<Dialog.Action variant="confirm" onPress={close}>
Rename
</Dialog.Action>
</div>
</Form>
</>
)}
</Dialog.Panel>
</Dialog>
</>
</Dialog.IconButton>
<Dialog.Panel>
<Dialog.Title>Rename {username}?</Dialog.Title>
<Dialog.Text className="mb-8">
Enter a new username for {username}. Changing a username will not
update any ACL policies that may refer to this user by their old
username.
</Dialog.Text>
<input type="hidden" name="_method" value="rename" />
<input type="hidden" name="old" value={username} />
<Input
isRequired
name="new"
label="Username"
placeholder="my-new-name"
/>
</Dialog.Panel>
</Dialog>
);
}