66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
|
import EasyModal, { useModal } from "ez-modal-react";
|
||
|
|
import { useState } from "react";
|
||
|
|
import Modal from "react-bootstrap/Modal";
|
||
|
|
import { Button } from "src/components";
|
||
|
|
|
||
|
|
const WireGuardClientModal = EasyModal.create(() => {
|
||
|
|
const modal = useModal<any>();
|
||
|
|
const [name, setName] = useState("");
|
||
|
|
|
||
|
|
const handleSubmit = (e: React.FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (name.trim()) {
|
||
|
|
modal.resolve({ name: name.trim() });
|
||
|
|
modal.hide();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleClose = () => {
|
||
|
|
modal.resolve(null);
|
||
|
|
modal.hide();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Modal show={modal.visible} onHide={handleClose} backdrop="static">
|
||
|
|
<form onSubmit={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
handleSubmit(e);
|
||
|
|
}}>
|
||
|
|
<Modal.Header closeButton>
|
||
|
|
<Modal.Title>New WireGuard Client</Modal.Title>
|
||
|
|
</Modal.Header>
|
||
|
|
<Modal.Body>
|
||
|
|
<div className="mb-3">
|
||
|
|
<label htmlFor="wg-client-name" className="form-label">
|
||
|
|
Client Name
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="form-control"
|
||
|
|
id="wg-client-name"
|
||
|
|
placeholder="e.g. My Phone, Laptop, ..."
|
||
|
|
value={name}
|
||
|
|
onChange={(e) => setName(e.target.value)}
|
||
|
|
autoFocus
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<div className="form-text">
|
||
|
|
A friendly name to identify this client.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Modal.Body>
|
||
|
|
<Modal.Footer>
|
||
|
|
<Button data-bs-dismiss="modal" onClick={handleClose}>
|
||
|
|
Cancel
|
||
|
|
</Button>
|
||
|
|
<Button type="submit" className="ms-auto btn-primary" disabled={!name.trim()}>
|
||
|
|
Create Client
|
||
|
|
</Button>
|
||
|
|
</Modal.Footer>
|
||
|
|
</form>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
export default WireGuardClientModal;
|