UI: flash installer layout consistent
This commit is contained in:
Johannes Kirschbauer
@@ -4,6 +4,8 @@ import { FileInput } from "@/src/components/FileInput";
|
|||||||
import Icon from "@/src/components/icon";
|
import Icon from "@/src/components/icon";
|
||||||
import { SelectInput } from "@/src/components/SelectInput";
|
import { SelectInput } from "@/src/components/SelectInput";
|
||||||
import { TextInput } from "@/src/components/TextInput";
|
import { TextInput } from "@/src/components/TextInput";
|
||||||
|
import { Typography } from "@/src/components/Typography";
|
||||||
|
import { Header } from "@/src/layout/header";
|
||||||
import {
|
import {
|
||||||
createForm,
|
createForm,
|
||||||
required,
|
required,
|
||||||
@@ -169,292 +171,308 @@ export const Flash = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="m-4 rounded-lg bg-slate-50 p-4 pt-8 shadow-sm shadow-slate-400">
|
<>
|
||||||
<Form onSubmit={handleSubmit}>
|
<Header title="Flash installer" />
|
||||||
<div class="my-4">
|
<div class="p-4">
|
||||||
<Field name="sshKeys" type="File[]">
|
<Typography tag="p" hierarchy="body" size="default" color="secondary">
|
||||||
{(field, props) => (
|
USB Utility image.
|
||||||
<>
|
</Typography>
|
||||||
<FileInput
|
<Typography tag="p" hierarchy="body" size="default" color="secondary">
|
||||||
{...props}
|
This will make bootstrapping a new machine easier by providing secure
|
||||||
onClick={async (event) => {
|
remote connection to any machine when plugged in.
|
||||||
event.preventDefault(); // Prevent the native file dialog from opening
|
</Typography>
|
||||||
const input = event.target;
|
<Form onSubmit={handleSubmit}>
|
||||||
const files = await selectSshKeys();
|
<div class="my-4">
|
||||||
|
<Field name="sshKeys" type="File[]">
|
||||||
|
{(field, props) => (
|
||||||
|
<>
|
||||||
|
<FileInput
|
||||||
|
{...props}
|
||||||
|
onClick={async (event) => {
|
||||||
|
event.preventDefault(); // Prevent the native file dialog from opening
|
||||||
|
const input = event.target;
|
||||||
|
const files = await selectSshKeys();
|
||||||
|
|
||||||
// Set the files
|
// Set the files
|
||||||
Object.defineProperty(input, "files", {
|
Object.defineProperty(input, "files", {
|
||||||
value: files,
|
value: files,
|
||||||
writable: true,
|
writable: true,
|
||||||
});
|
});
|
||||||
// Define the files property on the input element
|
// Define the files property on the input element
|
||||||
const changeEvent = new Event("input", {
|
const changeEvent = new Event("input", {
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
cancelable: true,
|
cancelable: true,
|
||||||
});
|
});
|
||||||
input.dispatchEvent(changeEvent);
|
input.dispatchEvent(changeEvent);
|
||||||
}}
|
}}
|
||||||
value={field.value}
|
value={field.value}
|
||||||
error={field.error}
|
error={field.error}
|
||||||
helperText="Provide your SSH public key. For secure and passwordless SSH connections."
|
helperText="Provide your SSH public key. For secure and passwordless SSH connections."
|
||||||
label="Authorized SSH Keys"
|
label="Authorized SSH Keys"
|
||||||
multiple
|
multiple
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Field name="disk" validate={[required("This field is required")]}>
|
||||||
|
{(field, props) => (
|
||||||
|
<SelectInput
|
||||||
|
topRightLabel={
|
||||||
|
<Button
|
||||||
|
size="s"
|
||||||
|
variant="light"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
deviceQuery.refetch();
|
||||||
|
}}
|
||||||
|
startIcon={<Icon icon="Update" />}
|
||||||
|
></Button>
|
||||||
|
}
|
||||||
|
formStore={formStore}
|
||||||
|
selectProps={props}
|
||||||
|
label="Flash Disk"
|
||||||
|
value={String(field.value)}
|
||||||
|
error={field.error}
|
||||||
|
required
|
||||||
|
options={
|
||||||
|
<>
|
||||||
|
<option value="" disabled>
|
||||||
|
Select a disk where the installer will be flashed to
|
||||||
|
</option>
|
||||||
|
|
||||||
|
<For each={deviceQuery.data?.blockdevices}>
|
||||||
|
{(device) => (
|
||||||
|
<option value={device.path}>
|
||||||
|
{device.path} -- {device.size} bytes
|
||||||
|
</option>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</Field>
|
</Field>
|
||||||
</div>
|
|
||||||
|
|
||||||
<Field name="disk" validate={[required("This field is required")]}>
|
{/* WiFi Networks */}
|
||||||
{(field, props) => (
|
<div class="my-4 py-2">
|
||||||
<SelectInput
|
<h3 class="mb-2 text-lg font-semibold">WiFi Networks</h3>
|
||||||
topRightLabel={
|
<span class="mb-2 text-sm">Add preconfigured networks</span>
|
||||||
<Button
|
<For each={wifiNetworks()}>
|
||||||
size="s"
|
{(network, index) => (
|
||||||
variant="light"
|
<div class="mb-2 grid grid-cols-7 gap-2">
|
||||||
onClick={(e) => {
|
<Field
|
||||||
e.preventDefault();
|
name={`wifi.${index()}.ssid`}
|
||||||
deviceQuery.refetch();
|
validate={[required("SSID is required")]}
|
||||||
}}
|
>
|
||||||
startIcon={<Icon icon="Reload" />}
|
{(field, props) => (
|
||||||
></Button>
|
|
||||||
}
|
|
||||||
formStore={formStore}
|
|
||||||
selectProps={props}
|
|
||||||
label="Flash Disk"
|
|
||||||
value={String(field.value)}
|
|
||||||
error={field.error}
|
|
||||||
required
|
|
||||||
options={
|
|
||||||
<>
|
|
||||||
<option value="" disabled>
|
|
||||||
Select a disk where the installer will be flashed to
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<For each={deviceQuery.data?.blockdevices}>
|
|
||||||
{(device) => (
|
|
||||||
<option value={device.path}>
|
|
||||||
{device.path} -- {device.size} bytes
|
|
||||||
</option>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
{/* WiFi Networks */}
|
|
||||||
<div class="my-4 py-2">
|
|
||||||
<h3 class="mb-2 text-lg font-semibold">WiFi Networks</h3>
|
|
||||||
<span class="mb-2 text-sm">Add preconfigured networks</span>
|
|
||||||
<For each={wifiNetworks()}>
|
|
||||||
{(network, index) => (
|
|
||||||
<div class="mb-2 grid grid-cols-7 gap-2">
|
|
||||||
<Field
|
|
||||||
name={`wifi.${index()}.ssid`}
|
|
||||||
validate={[required("SSID is required")]}
|
|
||||||
>
|
|
||||||
{(field, props) => (
|
|
||||||
<TextInput
|
|
||||||
formStore={formStore}
|
|
||||||
inputProps={props}
|
|
||||||
label="SSID"
|
|
||||||
value={field.value ?? ""}
|
|
||||||
error={field.error}
|
|
||||||
class="col-span-3"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
<Field
|
|
||||||
name={`wifi.${index()}.password`}
|
|
||||||
validate={[required("Password is required")]}
|
|
||||||
>
|
|
||||||
{(field, props) => (
|
|
||||||
<div class="relative col-span-3 w-full">
|
|
||||||
<TextInput
|
<TextInput
|
||||||
formStore={formStore}
|
formStore={formStore}
|
||||||
inputProps={props}
|
inputProps={props}
|
||||||
type={
|
label="SSID"
|
||||||
passwordVisibility()[index()] ? "text" : "password"
|
|
||||||
}
|
|
||||||
label="Password"
|
|
||||||
value={field.value ?? ""}
|
value={field.value ?? ""}
|
||||||
error={field.error}
|
error={field.error}
|
||||||
adornment={{
|
class="col-span-3"
|
||||||
position: "end",
|
|
||||||
content: (
|
|
||||||
<Button
|
|
||||||
variant="light"
|
|
||||||
type="button"
|
|
||||||
class="flex justify-center opacity-70"
|
|
||||||
onClick={() => togglePasswordVisibility(index())}
|
|
||||||
startIcon={
|
|
||||||
passwordVisibility()[index()] ? (
|
|
||||||
<Icon icon="EyeClose" />
|
|
||||||
) : (
|
|
||||||
<Icon icon="EyeOpen" />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
></Button>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
)}
|
||||||
)}
|
</Field>
|
||||||
</Field>
|
<Field
|
||||||
<div class="col-span-1 self-end">
|
name={`wifi.${index()}.password`}
|
||||||
<Button
|
validate={[required("Password is required")]}
|
||||||
type="button"
|
>
|
||||||
variant="light"
|
{(field, props) => (
|
||||||
class="h-12"
|
<div class="relative col-span-3 w-full">
|
||||||
onClick={() => removeWifiNetwork(index())}
|
<TextInput
|
||||||
startIcon={<Icon icon="Trash" />}
|
formStore={formStore}
|
||||||
></Button>
|
inputProps={props}
|
||||||
|
type={
|
||||||
|
passwordVisibility()[index()] ? "text" : "password"
|
||||||
|
}
|
||||||
|
label="Password"
|
||||||
|
value={field.value ?? ""}
|
||||||
|
error={field.error}
|
||||||
|
adornment={{
|
||||||
|
position: "end",
|
||||||
|
content: (
|
||||||
|
<Button
|
||||||
|
variant="light"
|
||||||
|
type="button"
|
||||||
|
class="flex justify-center opacity-70"
|
||||||
|
onClick={() =>
|
||||||
|
togglePasswordVisibility(index())
|
||||||
|
}
|
||||||
|
startIcon={
|
||||||
|
passwordVisibility()[index()] ? (
|
||||||
|
<Icon icon="EyeClose" />
|
||||||
|
) : (
|
||||||
|
<Icon icon="EyeOpen" />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
></Button>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
<div class="col-span-1 self-end">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="light"
|
||||||
|
class="h-12"
|
||||||
|
onClick={() => removeWifiNetwork(index())}
|
||||||
|
startIcon={<Icon icon="Trash" />}
|
||||||
|
></Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
<div class="">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="s"
|
||||||
|
variant="light"
|
||||||
|
onClick={addWifiNetwork}
|
||||||
|
startIcon={<Icon icon="Plus" />}
|
||||||
|
>
|
||||||
|
Add WiFi Network
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="collapse collapse-arrow" tabindex="0">
|
||||||
|
<input type="checkbox" />
|
||||||
|
<div class="collapse-title link font-medium ">
|
||||||
|
Advanced Settings
|
||||||
|
</div>
|
||||||
|
<div class="collapse-content">
|
||||||
|
<Field
|
||||||
|
name="machine.flake"
|
||||||
|
validate={[required("This field is required")]}
|
||||||
|
>
|
||||||
|
{(field, props) => (
|
||||||
|
<>
|
||||||
|
<TextInput
|
||||||
|
formStore={formStore}
|
||||||
|
inputProps={props}
|
||||||
|
label="Source (flake URL)"
|
||||||
|
value={String(field.value)}
|
||||||
|
inlineLabel={
|
||||||
|
<span class="material-icons">file_download</span>
|
||||||
|
}
|
||||||
|
error={field.error}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
<Field
|
||||||
|
name="machine.devicePath"
|
||||||
|
validate={[required("This field is required")]}
|
||||||
|
>
|
||||||
|
{(field, props) => (
|
||||||
|
<>
|
||||||
|
<TextInput
|
||||||
|
formStore={formStore}
|
||||||
|
inputProps={props}
|
||||||
|
label="Image Name (attribute name)"
|
||||||
|
value={String(field.value)}
|
||||||
|
inlineLabel={<span class="material-icons">devices</span>}
|
||||||
|
error={field.error}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
<div class="my-2 py-2">
|
||||||
|
<span class="text-sm text-neutral-600">Source URL: </span>
|
||||||
|
<span class="text-sm text-neutral-600">
|
||||||
|
{getValue(formStore, "machine.flake") +
|
||||||
|
"#" +
|
||||||
|
getValue(formStore, "machine.devicePath")}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<Field
|
||||||
</For>
|
name="language"
|
||||||
<div class="">
|
validate={[required("This field is required")]}
|
||||||
|
>
|
||||||
|
{(field, props) => (
|
||||||
|
<>
|
||||||
|
<SelectInput
|
||||||
|
formStore={formStore}
|
||||||
|
selectProps={props}
|
||||||
|
label="Language"
|
||||||
|
value={String(field.value)}
|
||||||
|
error={field.error}
|
||||||
|
required
|
||||||
|
options={
|
||||||
|
<>
|
||||||
|
<option value={"en_US.UTF-8"}>{"en_US.UTF-8"}</option>
|
||||||
|
<For each={langQuery.data}>
|
||||||
|
{(language) => (
|
||||||
|
<option value={language}>{language}</option>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field
|
||||||
|
name="keymap"
|
||||||
|
validate={[required("This field is required")]}
|
||||||
|
>
|
||||||
|
{(field, props) => (
|
||||||
|
<>
|
||||||
|
<SelectInput
|
||||||
|
formStore={formStore}
|
||||||
|
selectProps={props}
|
||||||
|
label="Keymap"
|
||||||
|
value={String(field.value)}
|
||||||
|
error={field.error}
|
||||||
|
required
|
||||||
|
options={
|
||||||
|
<>
|
||||||
|
<option value={"en"}>{"en"}</option>
|
||||||
|
<For each={keymapQuery.data}>
|
||||||
|
{(keymap) => (
|
||||||
|
<option value={keymap}>{keymap}</option>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr></hr>
|
||||||
|
<div class="mt-2 flex justify-end pt-2">
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
class="self-end"
|
||||||
size="s"
|
type="submit"
|
||||||
variant="light"
|
disabled={formStore.submitting}
|
||||||
onClick={addWifiNetwork}
|
startIcon={
|
||||||
startIcon={<Icon icon="Plus" />}
|
formStore.submitting ? (
|
||||||
|
<Icon icon="Load" />
|
||||||
|
) : (
|
||||||
|
<Icon icon="Flash" />
|
||||||
|
)
|
||||||
|
}
|
||||||
>
|
>
|
||||||
Add WiFi Network
|
{formStore.submitting ? "Flashing..." : "Flash Installer"}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Form>
|
||||||
|
</div>
|
||||||
<div class="collapse collapse-arrow" tabindex="0">
|
</>
|
||||||
<input type="checkbox" />
|
|
||||||
<div class="collapse-title link font-medium ">Advanced Settings</div>
|
|
||||||
<div class="collapse-content">
|
|
||||||
<Field
|
|
||||||
name="machine.flake"
|
|
||||||
validate={[required("This field is required")]}
|
|
||||||
>
|
|
||||||
{(field, props) => (
|
|
||||||
<>
|
|
||||||
<TextInput
|
|
||||||
formStore={formStore}
|
|
||||||
inputProps={props}
|
|
||||||
label="Source (flake URL)"
|
|
||||||
value={String(field.value)}
|
|
||||||
inlineLabel={
|
|
||||||
<span class="material-icons">file_download</span>
|
|
||||||
}
|
|
||||||
error={field.error}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
<Field
|
|
||||||
name="machine.devicePath"
|
|
||||||
validate={[required("This field is required")]}
|
|
||||||
>
|
|
||||||
{(field, props) => (
|
|
||||||
<>
|
|
||||||
<TextInput
|
|
||||||
formStore={formStore}
|
|
||||||
inputProps={props}
|
|
||||||
label="Image Name (attribute name)"
|
|
||||||
value={String(field.value)}
|
|
||||||
inlineLabel={<span class="material-icons">devices</span>}
|
|
||||||
error={field.error}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
<div class="my-2 py-2">
|
|
||||||
<span class="text-sm text-neutral-600">Source URL: </span>
|
|
||||||
<span class="text-sm text-neutral-600">
|
|
||||||
{getValue(formStore, "machine.flake") +
|
|
||||||
"#" +
|
|
||||||
getValue(formStore, "machine.devicePath")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Field
|
|
||||||
name="language"
|
|
||||||
validate={[required("This field is required")]}
|
|
||||||
>
|
|
||||||
{(field, props) => (
|
|
||||||
<>
|
|
||||||
<SelectInput
|
|
||||||
formStore={formStore}
|
|
||||||
selectProps={props}
|
|
||||||
label="Language"
|
|
||||||
value={String(field.value)}
|
|
||||||
error={field.error}
|
|
||||||
required
|
|
||||||
options={
|
|
||||||
<>
|
|
||||||
<option value={"en_US.UTF-8"}>{"en_US.UTF-8"}</option>
|
|
||||||
<For each={langQuery.data}>
|
|
||||||
{(language) => (
|
|
||||||
<option value={language}>{language}</option>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
<Field
|
|
||||||
name="keymap"
|
|
||||||
validate={[required("This field is required")]}
|
|
||||||
>
|
|
||||||
{(field, props) => (
|
|
||||||
<>
|
|
||||||
<SelectInput
|
|
||||||
formStore={formStore}
|
|
||||||
selectProps={props}
|
|
||||||
label="Keymap"
|
|
||||||
value={String(field.value)}
|
|
||||||
error={field.error}
|
|
||||||
required
|
|
||||||
options={
|
|
||||||
<>
|
|
||||||
<option value={"en"}>{"en"}</option>
|
|
||||||
<For each={keymapQuery.data}>
|
|
||||||
{(keymap) => <option value={keymap}>{keymap}</option>}
|
|
||||||
</For>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr></hr>
|
|
||||||
<div class="mt-2 flex justify-end pt-2">
|
|
||||||
<Button
|
|
||||||
class="self-end"
|
|
||||||
type="submit"
|
|
||||||
disabled={formStore.submitting}
|
|
||||||
startIcon={
|
|
||||||
formStore.submitting ? (
|
|
||||||
<Icon icon="Load" />
|
|
||||||
) : (
|
|
||||||
<Icon icon="Flash" />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{formStore.submitting ? "Flashing..." : "Flash Installer"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user