mirror of https://github.com/jetkvm/kvm.git
linted modules
converted input fields to use a modal to save space in settings updated descriptions
This commit is contained in:
Adrian
parent
03fd7508de
commit
0cd406f35e
4
cloud.go
4
cloud.go
|
|
@ -5,15 +5,15 @@ import (
|
|||
"context"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"github.com/coder/websocket/wsjson"
|
||||
"net/http"
|
||||
"net/url"
|
||||
"github.com/coder/websocket/wsjson"
|
||||
"time"
|
||||
|
||||
"github.com/coreos/go-oidc/v3/oidc"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
"github.com/coder/websocket"
|
||||
"github.com/gin-gonic/gin"
|
||||
)
|
||||
|
||||
type CloudRegisterRequest struct {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,187 @@
|
|||
import { GridCard } from "@/components/Card";
|
||||
import {useCallback, useState} from "react";
|
||||
import { Button } from "@components/Button";
|
||||
import LogoBlueIcon from "@/assets/logo-blue.svg";
|
||||
import LogoWhiteIcon from "@/assets/logo-white.svg";
|
||||
import Modal from "@components/Modal";
|
||||
import { InputFieldWithLabel } from "./InputField";
|
||||
import { useJsonRpc } from "@/hooks/useJsonRpc";
|
||||
import { useUsbConfigModalStore } from "@/hooks/stores";
|
||||
|
||||
export default function UsbConfigDialog({
|
||||
open,
|
||||
setOpen,
|
||||
}: {
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<Modal open={open} onClose={() => setOpen(false)}>
|
||||
<Dialog setOpen={setOpen} />
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export function Dialog({ setOpen }: { setOpen: (open: boolean) => void }) {
|
||||
const { modalView, setModalView } = useUsbConfigModalStore();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [send] = useJsonRpc();
|
||||
|
||||
const handleUsbConfigChange = useCallback((usbConfig: object) => {
|
||||
send("setUsbConfig", { usbConfig }, resp => {
|
||||
if ("error" in resp) {
|
||||
setError(`Failed to update USB Config: ${resp.error.data || "Unknown error"}`,);
|
||||
return;
|
||||
}
|
||||
setModalView("updateUsbConfigSuccess");
|
||||
});
|
||||
}, [send, setModalView]);
|
||||
|
||||
return (
|
||||
<GridCard cardClassName="relative max-w-lg mx-auto text-left pointer-events-auto dark:bg-slate-800">
|
||||
<div className="p-10">
|
||||
{modalView === "updateUsbConfig" && (
|
||||
<UpdateUsbConfigModal
|
||||
onSetUsbConfig={handleUsbConfigChange}
|
||||
onCancel={() => setOpen(false)}
|
||||
error={error}
|
||||
/>
|
||||
)}
|
||||
|
||||
{modalView === "updateUsbConfigSuccess" && (
|
||||
<SuccessModal
|
||||
headline="USB Configuration Updated Successfully"
|
||||
description="You've successfully updated the USB Configuration"
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</GridCard>
|
||||
);
|
||||
}
|
||||
|
||||
function UpdateUsbConfigModal({
|
||||
onSetUsbConfig,
|
||||
onCancel,
|
||||
error,
|
||||
}: {
|
||||
onSetUsbConfig: (usb_config: object) => void;
|
||||
onCancel: () => void;
|
||||
error: string | null;
|
||||
}) {
|
||||
const [usbConfig, setUsbConfig] = useState({
|
||||
usb_vendor_id: '',
|
||||
usb_product_id: '',
|
||||
usb_serial_number: '',
|
||||
usb_manufacturer: '',
|
||||
usb_name: '',
|
||||
})
|
||||
const handleUsbVendorIdChange = (vendorId: string) => {
|
||||
setUsbConfig({... usbConfig, usb_vendor_id: vendorId})
|
||||
};
|
||||
|
||||
const handleUsbProductIdChange = (productId: string) => {
|
||||
setUsbConfig({... usbConfig, usb_product_id: productId})
|
||||
};
|
||||
|
||||
const handleUsbSerialChange = (serialNumber: string) => {
|
||||
setUsbConfig({... usbConfig, usb_serial_number: serialNumber})
|
||||
};
|
||||
|
||||
const handleUsbManufacturer = (manufacturer: string) => {
|
||||
setUsbConfig({... usbConfig, usb_manufacturer: manufacturer})
|
||||
};
|
||||
|
||||
const handleUsbName = (name: string) => {
|
||||
setUsbConfig({... usbConfig, usb_name: name})
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start space-y-4 text-left">
|
||||
<div>
|
||||
<img src={LogoWhiteIcon} alt="" className="h-[24px] hidden dark:block" />
|
||||
<img src={LogoBlueIcon} alt="" className="h-[24px] dark:hidden" />
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold dark:text-white">USB Emulation Configuration</h2>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Set custom USB parameters to control the device USB emulation. The device will rebind once the parameters are updated.
|
||||
</p>
|
||||
</div>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Vendor ID"
|
||||
placeholder="Enter USB Vendor ID"
|
||||
value={usbConfig.usb_vendor_id || ""}
|
||||
onChange={e => handleUsbVendorIdChange(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Product ID"
|
||||
placeholder="Enter USB Product ID"
|
||||
value={usbConfig.usb_product_id || ""}
|
||||
onChange={e => handleUsbProductIdChange(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Serial Number"
|
||||
placeholder="Enter USB Serial Number"
|
||||
value={usbConfig.usb_serial_number || ""}
|
||||
onChange={e => handleUsbSerialChange(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Manufacturer"
|
||||
placeholder="Enter USB Manufacturer"
|
||||
value={usbConfig.usb_manufacturer || ""}
|
||||
onChange={e => handleUsbManufacturer(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Name"
|
||||
placeholder="Enter USB Name"
|
||||
value={usbConfig.usb_name || ""}
|
||||
onChange={e => handleUsbName(e.target.value)}
|
||||
/>
|
||||
<div className="flex gap-x-2">
|
||||
<Button
|
||||
size="SM"
|
||||
theme="primary"
|
||||
text="Update USB Config"
|
||||
onClick={() => onSetUsbConfig(usbConfig)}
|
||||
/>
|
||||
<Button size="SM" theme="light" text="Not Now" onClick={onCancel} />
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-500">{error}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SuccessModal({
|
||||
headline,
|
||||
description,
|
||||
onClose,
|
||||
}: {
|
||||
headline: string;
|
||||
description: string;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start w-full max-w-lg space-y-4 text-left">
|
||||
<div>
|
||||
<img src={LogoWhiteIcon} alt="" className="h-[24px] hidden dark:block" />
|
||||
<img src={LogoBlueIcon} alt="" className="h-[24px] dark:hidden" />
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold dark:text-white">{headline}</h2>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">{description}</p>
|
||||
</div>
|
||||
<Button size="SM" theme="primary" text="Close" onClick={onClose} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,14 +3,13 @@ import {
|
|||
useLocalAuthModalStore,
|
||||
useSettingsStore,
|
||||
useUiStore,
|
||||
useUpdateStore,
|
||||
useUpdateStore, useUsbConfigModalStore,
|
||||
} from "@/hooks/stores";
|
||||
import { Checkbox } from "@components/Checkbox";
|
||||
import { Button, LinkButton } from "@components/Button";
|
||||
import { TextAreaWithLabel } from "@components/TextArea";
|
||||
import { SectionHeader } from "@components/SectionHeader";
|
||||
import { GridCard } from "@components/Card";
|
||||
import { InputFieldWithLabel } from "@components/InputField";
|
||||
import { CheckCircleIcon } from "@heroicons/react/20/solid";
|
||||
import { cx } from "@/cva.config";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
|
|
@ -26,6 +25,7 @@ import LocalAuthPasswordDialog from "@/components/LocalAuthPasswordDialog";
|
|||
import { LocalDevice } from "@routes/devices.$id";
|
||||
import { useRevalidator } from "react-router-dom";
|
||||
import { ShieldCheckIcon } from "@heroicons/react/20/solid";
|
||||
import UsbConfigDialog from "@components/UsbConfigDialog";
|
||||
|
||||
export function SettingsItem({
|
||||
title,
|
||||
|
|
@ -110,14 +110,6 @@ export default function SettingsSidebar() {
|
|||
});
|
||||
}, [send]);
|
||||
|
||||
const [usbConfig, setUsbConfig] = useState({
|
||||
usb_product_id: '',
|
||||
usb_vendor_id: '',
|
||||
usb_serial_number: '',
|
||||
usb_manufacturer: '',
|
||||
usb_name: '',
|
||||
})
|
||||
|
||||
const handleUsbEmulationToggle = useCallback(
|
||||
(enabled: boolean) => {
|
||||
send("setUsbEmulationState", { enabled: enabled }, resp => {
|
||||
|
|
@ -215,17 +207,6 @@ export default function SettingsSidebar() {
|
|||
});
|
||||
};
|
||||
|
||||
const handleUsbConfigChange = useCallback((usbConfig: object) => {
|
||||
send("setUsbConfig", { usbConfig }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to update USB Config: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}, [send]);
|
||||
|
||||
const handleSSHKeyChange = (newKey: string) => {
|
||||
setSSHKey(newKey);
|
||||
};
|
||||
|
|
@ -260,26 +241,6 @@ export default function SettingsSidebar() {
|
|||
});
|
||||
}, [send, sshKey]);
|
||||
|
||||
const handleUsbProductIdChange = (productId: string) => {
|
||||
setUsbConfig({... usbConfig, usb_product_id: productId})
|
||||
};
|
||||
|
||||
const handleUsbVendorIdChange = (vendorId: string) => {
|
||||
setUsbConfig({... usbConfig, usb_vendor_id: vendorId})
|
||||
};
|
||||
|
||||
const handleUsbSerialChange = (serialNumber: string) => {
|
||||
setUsbConfig({... usbConfig, usb_serial_number: serialNumber})
|
||||
};
|
||||
|
||||
const handleUsbName = (name: string) => {
|
||||
setUsbConfig({... usbConfig, usb_name: name})
|
||||
};
|
||||
|
||||
const handleUsbManufacturer = (manufacturer: string) => {
|
||||
setUsbConfig({... usbConfig, usb_manufacturer: manufacturer})
|
||||
};
|
||||
|
||||
const { setIsUpdateDialogOpen, setModalView, otaState } = useUpdateStore();
|
||||
const handleCheckForUpdates = () => {
|
||||
if (otaState.updating) {
|
||||
|
|
@ -380,7 +341,9 @@ export default function SettingsSidebar() {
|
|||
}, []);
|
||||
|
||||
const { setModalView: setLocalAuthModalView } = useLocalAuthModalStore();
|
||||
const { setModalView: setUsbConfigModalView } = useUsbConfigModalStore();
|
||||
const [isLocalAuthDialogOpen, setIsLocalAuthDialogOpen] = useState(false);
|
||||
const [isUsbConfigDialogOpen, setIsUsbConfigDialogOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOnDevice) getDevice();
|
||||
|
|
@ -394,6 +357,14 @@ export default function SettingsSidebar() {
|
|||
}
|
||||
}, [getDevice, isLocalAuthDialogOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOnDevice) return;
|
||||
// Refresh device status when the local usb config dialog is closed
|
||||
if (!isUsbConfigDialogOpen) {
|
||||
getDevice();
|
||||
}
|
||||
}, [getDevice, isUsbConfigDialogOpen]);
|
||||
|
||||
const revalidator = useRevalidator();
|
||||
|
||||
const [currentTheme, setCurrentTheme] = useState(() => {
|
||||
|
|
@ -877,53 +848,20 @@ export default function SettingsSidebar() {
|
|||
</div>
|
||||
)}
|
||||
{settings.developerMode && (
|
||||
<div className="space-y-4">
|
||||
<InputFieldWithLabel
|
||||
label="USB Vendor Id"
|
||||
value={usbConfig.usb_vendor_id || ""}
|
||||
onChange={e => handleUsbVendorIdChange(e.target.value)}
|
||||
placeholder="Enter USB Vendor Id"
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
label="USB Product Id"
|
||||
value={usbConfig.usb_product_id || ""}
|
||||
onChange={e => handleUsbProductIdChange(e.target.value)}
|
||||
placeholder="Enter USB Product Id"
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
label="USB Serial Number"
|
||||
value={usbConfig.usb_serial_number || ""}
|
||||
onChange={e => handleUsbSerialChange(e.target.value)}
|
||||
placeholder="Enter USB Serial Number"
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
label="USB Name"
|
||||
value={usbConfig.usb_name || ""}
|
||||
onChange={e => handleUsbName(e.target.value)}
|
||||
placeholder="Enter USB Name"
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
label="USB Manufacturer"
|
||||
value={usbConfig.usb_manufacturer || ""}
|
||||
onChange={e => handleUsbManufacturer(e.target.value)}
|
||||
placeholder="Enter USB Manufacturer"
|
||||
/>
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Button
|
||||
size="SM"
|
||||
theme="primary"
|
||||
text="Update USB Config"
|
||||
onClick={() => {
|
||||
if (Object.values(usbConfig).every(function(i) { return Boolean(i); })) {
|
||||
handleUsbConfigChange(usbConfig);
|
||||
notifications.success("Successfully updated USB Config")
|
||||
} else {
|
||||
notifications.error("Failed to update USB config");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SettingsItem
|
||||
title="USB Configuration"
|
||||
description="Set the USB Descriptors for the JetKVM"
|
||||
>
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Update USB Config"
|
||||
onClick={() => {
|
||||
setUsbConfigModalView("updateUsbConfig")
|
||||
setIsUsbConfigDialogOpen(true);
|
||||
}}
|
||||
/>
|
||||
</SettingsItem>
|
||||
)}
|
||||
<SettingsItem
|
||||
title="Troubleshooting Mode"
|
||||
|
|
@ -983,6 +921,14 @@ export default function SettingsSidebar() {
|
|||
setIsLocalAuthDialogOpen(x);
|
||||
}}
|
||||
/>
|
||||
<UsbConfigDialog
|
||||
open={isUsbConfigDialogOpen}
|
||||
setOpen={x => {
|
||||
// Revalidate the current route to refresh the local device status and dependent UI components
|
||||
revalidator.revalidate();
|
||||
setIsUsbConfigDialogOpen(x);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -528,3 +528,19 @@ export const useLocalAuthModalStore = create<LocalAuthModalState>(set => ({
|
|||
setModalView: view => set({ modalView: view }),
|
||||
setErrorMessage: message => set({ errorMessage: message }),
|
||||
}));
|
||||
|
||||
interface UsbConfigModalState {
|
||||
modalView:
|
||||
| "updateUsbConfig"
|
||||
| "updateUsbConfigSuccess";
|
||||
errorMessage: string | null;
|
||||
setModalView: (view: UsbConfigModalState["modalView"]) => void;
|
||||
setErrorMessage: (message: string | null) => void;
|
||||
}
|
||||
|
||||
export const useUsbConfigModalStore = create<UsbConfigModalState>(set => ({
|
||||
modalView: "updateUsbConfig",
|
||||
errorMessage: null,
|
||||
setModalView: view => set({ modalView: view }),
|
||||
setErrorMessage: message => set({ errorMessage: message }),
|
||||
}));
|
||||
Loading…
Reference in New Issue