80 lines
1.6 KiB
TypeScript
80 lines
1.6 KiB
TypeScript
import { AddLarge, Copy } from "@carbon/icons-react";
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
Form,
|
|
Input,
|
|
Modal,
|
|
ModalBody,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
} from "@heroui/react";
|
|
import { FormEvent, useState } from "react";
|
|
|
|
export default function AddUser(props: {
|
|
isOpen: boolean;
|
|
onOpenChange?: (isOpen: boolean) => void;
|
|
onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
|
|
}) {
|
|
const [password, setPassword] = useState("");
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={props.isOpen}
|
|
onOpenChange={props.onOpenChange}
|
|
shadow={"none" as "sm"}
|
|
backdrop="blur"
|
|
>
|
|
<ModalContent>
|
|
<ModalHeader>
|
|
<h1 className="text-2xl">Add User</h1>
|
|
</ModalHeader>
|
|
|
|
<Form
|
|
validationBehavior="native"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
props.onSubmit?.(e);
|
|
}}
|
|
>
|
|
<ModalBody className="w-full">
|
|
<Input
|
|
isRequired
|
|
type="user"
|
|
label="Name"
|
|
name="userName"
|
|
variant="bordered"
|
|
/>
|
|
<Input
|
|
isRequired
|
|
label="Password"
|
|
name="password"
|
|
variant="bordered"
|
|
endContent={
|
|
<Button
|
|
isIconOnly
|
|
variant="light"
|
|
onPress={() => navigator.clipboard.writeText(password)}
|
|
>
|
|
<Copy />
|
|
</Button>
|
|
}
|
|
value={password}
|
|
onValueChange={setPassword}
|
|
/>
|
|
<Checkbox value="admin" name="admin">
|
|
Admin
|
|
</Checkbox>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button type="submit" color="primary" startContent={<AddLarge />}>
|
|
Add User
|
|
</Button>
|
|
</ModalFooter>
|
|
</Form>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
}
|