yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Clan-app: move expert field into advanced form

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-08-15 12:26:43 +02:00
parent 4d57f4cf5b
commit a703388ba7
4 changed files with 237 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pkgs/webview-ui/app/src/components/FileInput.tsx
View File

@@ -15,6 +15,7 @@ interface FileInputProps {
class?: string;
label?: string;
error?: string;
helperText?: string;
}
/**
@@ -53,7 +54,9 @@ export function FileInput(props: FileInputProps) {
{props.label}
</span>
</div>
<Show when={props.helperText}>
<span class="label-text-alt m-1">{props.helperText}</span>
</Show>
<div
class={cx(
"relative flex min-h-[96px] w-full items-center justify-center rounded-2xl border-[3px] border-dashed p-8 text-center focus-within:ring-4 md:min-h-[112px] md:text-lg lg:min-h-[128px] lg:p-10 lg:text-xl",

6
pkgs/webview-ui/app/src/components/SelectInput.tsx
View File

@@ -1,4 +1,5 @@
import { FieldValues, FormStore, ResponseData } from "@modular-forms/solid";
import { Show } from "solid-js";
import { type JSX } from "solid-js";
interface SelectInputProps<T extends FieldValues, R extends ResponseData> {
@@ -9,6 +10,7 @@ interface SelectInputProps<T extends FieldValues, R extends ResponseData> {
label: JSX.Element;
error?: string;
required?: boolean;
topRightLabel?: JSX.Element;
}
export function SelectInput<T extends FieldValues, R extends ResponseData>(
@@ -29,8 +31,10 @@ export function SelectInput<T extends FieldValues, R extends ResponseData>(
>
{props.label}
</span>
<Show when={props.topRightLabel}>
<span class="label-text-alt">{props.topRightLabel}</span>
</Show>
</div>
<select
{...props.selectProps}
required={props.required}

16
pkgs/webview-ui/app/src/components/TextInput.tsx
View File

@@ -1,5 +1,6 @@
import { FieldValues, FormStore, ResponseData } from "@modular-forms/solid";
import { type JSX } from "solid-js";
import { Show, type JSX } from "solid-js";
import cx from "classnames";
interface TextInputProps<T extends FieldValues, R extends ResponseData> {
formStore: FormStore<T, R>;
@@ -10,6 +11,11 @@ interface TextInputProps<T extends FieldValues, R extends ResponseData> {
required?: boolean;
type?: string;
inlineLabel?: JSX.Element;
class?: string;
adornment?: {
position: "start" | "end";
content: JSX.Element;
};
}
export function TextInput<T extends FieldValues, R extends ResponseData>(
@@ -17,7 +23,7 @@ export function TextInput<T extends FieldValues, R extends ResponseData>(
) {
return (
<label
class="form-control w-full"
class={cx("form-control w-full", props.class)}
aria-disabled={props.formStore.submitting}
>
<div class="label">
@@ -33,6 +39,9 @@ export function TextInput<T extends FieldValues, R extends ResponseData>(
</div>
<div class="input input-bordered flex items-center gap-2">
<Show when={props.adornment && props.adornment.position === "start"}>
{props.adornment?.content}
</Show>
{props.inlineLabel}
<input
{...props.inputProps}
@@ -46,6 +55,9 @@ export function TextInput<T extends FieldValues, R extends ResponseData>(
required
disabled={props.formStore.submitting}
/>
<Show when={props.adornment && props.adornment.position === "end"}>
{props.adornment?.content}
</Show>
</div>
{props.error && (
<span class="label-text-alt font-bold text-error">{props.error}</span>

297
pkgs/webview-ui/app/src/routes/flash/view.tsx
View File

@@ -1,4 +1,4 @@
import { callApi, OperationResponse } from "@/src/api";
import { callApi } from "@/src/api";
import { FileInput } from "@/src/components/FileInput";
import { SelectInput } from "@/src/components/SelectInput";
import { TextInput } from "@/src/components/TextInput";
@@ -10,7 +10,7 @@ import {
getValue,
} from "@modular-forms/solid";
import { createQuery } from "@tanstack/solid-query";
import { createEffect, createSignal, For } from "solid-js";
import { createEffect, createSignal, For, Show } from "solid-js";
import toast from "solid-toast";
interface Wifi extends FieldValues {
@@ -97,7 +97,7 @@ export const Flash = () => {
if (result.status === "error") throw new Error("Failed to fetch data");
return result.data;
},
staleTime: 1000 * 60 * 15, // 15 minutes
staleTime: Infinity,
}));
const langQuery = createQuery(() => ({
@@ -107,7 +107,7 @@ export const Flash = () => {
if (result.status === "error") throw new Error("Failed to fetch data");
return result.data;
},
staleTime: 1000 * 60 * 15, // 15 minutes
staleTime: Infinity,
}));
/**
@@ -136,11 +136,7 @@ export const Flash = () => {
};
const handleSubmit = async (values: FlashFormValues) => {
console.log("Submit WiFi Networks:", values.wifi);
console.log(
"Submit SSH Keys:",
values.sshKeys.map((file) => file.name),
);
console.log("Submit:", values);
try {
await callApi("flash_machine", {
machine: {
@@ -171,109 +167,9 @@ export const Flash = () => {
};
return (
<div class="px-2">
<div class="m-4 bg-slate-50 p-4 pt-8 shadow-sm shadow-slate-400 rounded-lg">
<Form onSubmit={handleSubmit}>
<Field
name="machine.flake"
validate={[required("This field is required")]}
>
{(field, props) => (
<>
<TextInput
formStore={formStore}
inputProps={props}
label="Installer (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="Installer Image (attribute name)"
value={String(field.value)}
inlineLabel={<span class="material-icons">devices</span>}
error={field.error}
required
/>
</>
)}
</Field>
<Field name="disk" validate={[required("This field is required")]}>
{(field, props) => (
<SelectInput
formStore={formStore}
selectProps={props}
label="Flash Disk"
value={String(field.value)}
error={field.error}
required
options={
<>
<option value="" disabled>
Select a disk
</option>
<For each={deviceQuery.data?.blockdevices}>
{(device) => (
<option value={device.path}>
{device.path} -- {device.size} bytes
</option>
)}
</For>
</>
}
/>
)}
</Field>
<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={
<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={
<For each={keymapQuery.data}>
{(keymap) => <option value={keymap}>{keymap}</option>}
</For>
}
/>
</>
)}
</Field>
<div class="my-4">
<Field name="sshKeys" type="File[]">
{(field, props) => (
<>
@@ -298,6 +194,7 @@ export const Flash = () => {
}}
value={field.value}
error={field.error}
helperText="Provide your SSH public key. For secure and passwordless SSH connections."
label="Authorized SSH Keys"
multiple
required
@@ -305,13 +202,54 @@ export const Flash = () => {
</>
)}
</Field>
</div>
<Field name="disk" validate={[required("This field is required")]}>
{(field, props) => (
<SelectInput
topRightLabel={
<button
class="btn btn-ghost btn-sm"
onClick={(e) => {
e.preventDefault();
deviceQuery.refetch();
}}
>
<span class="material-icons text-sm">refresh</span>
</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="mb-4">
<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 flex gap-2">
<div class="mb-2 grid grid-cols-7 gap-2">
<Field
name={`wifi.${index()}.ssid`}
validate={[required("SSID is required")]}
@@ -323,6 +261,7 @@ export const Flash = () => {
label="SSID"
value={field.value ?? ""}
error={field.error}
class="col-span-3"
required
/>
)}
@@ -332,7 +271,7 @@ export const Flash = () => {
validate={[required("Password is required")]}
>
{(field, props) => (
<div class="relative w-full">
<div class="relative col-span-3 w-full">
<TextInput
formStore={formStore}
inputProps={props}
@@ -342,11 +281,12 @@ export const Flash = () => {
label="Password"
value={field.value ?? ""}
error={field.error}
required
/>
adornment={{
position: "end",
content: (
<button
type="button"
class="absolute inset-y-14 right-0 flex items-center pr-3 text-sm leading-5"
class="flex justify-center opacity-70"
onClick={() => togglePasswordVisibility(index())}
>
<span class="material-icons">
@@ -355,30 +295,146 @@ export const Flash = () => {
: "visibility"}
</span>
</button>
),
}}
required
/>
</div>
)}
</Field>
<div class="col-span-1 self-end">
<button
type="button"
class="btn btn-error"
class="btn btn-ghost "
onClick={() => removeWifiNetwork(index())}
>
<span class="material-icons">delete</span>
</button>
</div>
</div>
)}
</For>
<div class="">
<button
type="button"
class="btn btn-primary"
class="btn btn-ghost btn-sm"
onClick={addWifiNetwork}
>
<span class="material-icons">add</span>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>
<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="btn btn-error"
class="btn btn-error self-end"
type="submit"
disabled={formStore.submitting}
>
@@ -389,6 +445,7 @@ export const Flash = () => {
)}
{formStore.submitting ? "Flashing..." : "Flash Installer"}
</button>
</div>
</Form>
</div>
);