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

flash install: fixes form layout

Browse Source
This commit is contained in:
Timo
2025-05-06 14:33:38 +02:00
committed by Johannes Kirschbauer
parent 698a39fafb
commit 7d39d49b30
6 changed files with 169 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pkgs/webview-ui/app/src/Form/fields/Select.tsx
View File

@@ -142,7 +142,6 @@ export function SelectInput(props: SelectInputpProps) {
</InputLabel>
}
field={
<>
<InputBase
error={!!props.error}
disabled={props.disabled}
@@ -170,9 +169,7 @@ export function SelectInput(props: SelectInputpProps) {
// popovertargetaction="toggle"
>
<Show
when={
props.adornment && props.adornment.position === "start"
}
when={props.adornment && props.adornment.position === "start"}
>
{props.adornment?.content}
</Show>
@@ -222,11 +219,10 @@ export function SelectInput(props: SelectInputpProps) {
>
{props.adornment?.content}
</Show>
<Icon icon="CaretDown" class="ml-auto mr-2"></Icon>
<Icon size={12} icon="CaretDown" class="ml-auto mr-2" />
</button>
}
/>
</>
}
/>

2
pkgs/webview-ui/app/src/Form/fields/layout.tsx
View File

@@ -18,7 +18,7 @@ export const FieldLayout = (props: LayoutProps) => {
class={cx("grid grid-cols-10 items-center", intern.class)}
{...divProps}
>
<label class="col-span-5">{props.label}</label>
<div class="col-span-5 flex items-center">{props.label}</div>
<div class="col-span-5">{props.field}</div>
{props.error && <span class="col-span-full">{props.error}</span>}
</div>

4
pkgs/webview-ui/app/src/components/accordion/index.tsx
View File

@@ -21,7 +21,7 @@ export default function Accordion(props: AccordionProps) {
fallback={
<Button
endIcon={<Icon size={12} icon={"CaretDown"} />}
variant="light"
variant="ghost"
size="s"
>
{props.title}
@@ -30,7 +30,7 @@ export default function Accordion(props: AccordionProps) {
>
<Button
endIcon={<Icon size={12} icon={"CaretUp"} />}
variant="dark"
variant="ghost"
size="s"
>
{props.title}

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

@@ -22,6 +22,8 @@ import toast from "solid-toast";
import { FieldLayout } from "@/src/Form/fields/layout";
import { InputLabel } from "@/src/components/inputBase";
import { Modal } from "@/src/components/modal";
import Fieldset from "@/src/Form/fieldset";
import Accordion from "@/src/components/accordion";
interface Wifi extends FieldValues {
ssid: string;
@@ -233,16 +235,23 @@ export const Flash = () => {
</div>
</div>
</Modal>
<div class="p-4">
<Typography tag="p" hierarchy="body" size="default" color="primary">
<div class="w-full self-stretch p-8">
{/* <Typography tag="p" hierarchy="body" size="default" color="primary">
USB Utility image.
</Typography>
<Typography tag="p" hierarchy="body" size="default" color="secondary">
Will make bootstrapping new machines easier by providing secure remote
connection to any machine when plugged in.
</Typography> */}
<Form
onSubmit={handleSubmit}
class="mx-auto flex w-full max-w-2xl flex-col gap-y-6"
>
<Fieldset legend="Authorized SSH Keys">
<Typography hierarchy="body" size="s" weight="medium">
Provide your SSH public key. For secure and passwordless SSH
connections.
</Typography>
<Form onSubmit={handleSubmit}>
<div class="my-4">
<Field name="sshKeys" type="File[]">
{(field, props) => (
<>
@@ -267,18 +276,18 @@ 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"
//helperText="Provide your SSH public key. For secure and passwordless SSH connections."
//label="Authorized SSH Keys"
multiple
required
/>
</>
)}
</Field>
</div>
</Fieldset>
<Fieldset legend="General">
<Field name="disk" validate={[required("This field is required")]}>
{(field, props) => (
<>
<SelectInput
loading={deviceQuery.isFetching}
selectProps={props}
@@ -299,7 +308,7 @@ export const Flash = () => {
value={field.value || ""}
error={field.error}
required
placeholder="Select a drive where the clan-installer will be flashed to"
placeholder="Select a drive"
options={
deviceQuery.data?.blockdevices.map((d) => ({
value: d.path,
@@ -307,106 +316,32 @@ export const Flash = () => {
})) || []
}
/>
</>
)}
</Field>
</Fieldset>
{/* WiFi Networks */}
<div class="my-4 py-2">
<Fieldset legend="Network Settings">
<FieldLayout
label={<InputLabel class="mb-4">Networks</InputLabel>}
label={<InputLabel>Networks</InputLabel>}
field={
<>
<div class="w-full flex justify-end">
<Button
type="button"
size="s"
variant="light"
onClick={addWifiNetwork}
startIcon={<Icon icon="Plus" />}
startIcon={<Icon size={12} icon="Plus" />}
>
WiFi Network
</Button>
</>
</div>
}
/>
<For each={wifiNetworks()}>
{(network, index) => (
<div class="flex w-full gap-2">
<div class="mb-2 grid w-full grid-cols-6 gap-2 align-middle">
<Field
name={`wifi.${index()}.ssid`}
validate={[required("SSID is required")]}
>
{(field, props) => (
<TextInput
inputProps={props}
label="SSID"
value={field.value ?? ""}
error={field.error}
class="col-span-full "
required
/>
)}
</Field>
<Field
name={`wifi.${index()}.password`}
validate={[required("Password is required")]}
>
{(field, props) => (
<TextInput
class="col-span-full"
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
/>
)}
</Field>
</div>
<Button
type="button"
variant="light"
class="h-10"
size="s"
onClick={() => removeWifiNetwork(index())}
startIcon={<Icon icon="Trash" />}
></Button>
</div>
)}
</For>
</div>
</Fieldset>
<div class=" " tabindex="0">
<input type="checkbox" />
<div class=" px-0">
<InputLabel class="mb-4">Advanced</InputLabel>
</div>
<div class="">
<Accordion title="Advanced">
<Fieldset>
<Field
name="machine.flake"
validate={[required("This field is required")]}
@@ -508,10 +443,8 @@ export const Flash = () => {
</>
)}
</Field>
</div>
</div>
<hr></hr>
</Fieldset>
</Accordion>
<div class="mt-2 flex justify-end pt-2">
<Button
class="self-end"

1
pkgs/webview-ui/app/src/routes/machines/create.tsx
View File

@@ -11,7 +11,6 @@ import { Match, Switch } from "solid-js";
import toast from "solid-toast";
import { MachineAvatar } from "./avatar";
import { DynForm } from "@/src/Form/form";
import { Typography } from "@/src/components/Typography";
import Fieldset from "@/src/Form/fieldset";
import Accordion from "@/src/components/accordion";

26
pkgs/webview-ui/app/src/routes/machines/details.tsx
View File

@@ -1,9 +1,4 @@
import { callApi, SuccessData } from "@/src/api";
import { activeURI } from "@/src/App";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
import { TextInput } from "@/src/Form/fields/TextInput";
import {
createForm,
FieldValues,
@@ -14,6 +9,12 @@ import {
import { useNavigate, useParams, useSearchParams } from "@solidjs/router";
import { createQuery, useQueryClient } from "@tanstack/solid-query";
import { createEffect, createSignal, For, Match, Show, Switch } from "solid-js";
import { activeURI } from "@/src/App";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
import { TextInput } from "@/src/Form/fields/TextInput";
import Accordion from "@/src/components/accordion";
import toast from "solid-toast";
import { MachineAvatar } from "./avatar";
import { Header } from "@/src/layout/header";
@@ -550,7 +551,7 @@ const MachineForm = (props: MachineDetailsProps) => {
onClick={() => {
setInstallModalOpen(true);
}}
endIcon={<Icon icon="Flash" />}
endIcon={<Icon size={14} icon="Flash" />}
>
Install
</Button>
@@ -559,7 +560,7 @@ const MachineForm = (props: MachineDetailsProps) => {
class="w-full"
size="s"
onClick={() => handleUpdate()}
endIcon={<Icon icon="Update" />}
endIcon={<Icon size={12} icon="Update" />}
>
Update
</Button>
@@ -636,6 +637,7 @@ const MachineForm = (props: MachineDetailsProps) => {
/>
)}
</Field>
<hr />
<Field name="disk_schema.schema_name">
{(field, props) => (
<>
@@ -646,11 +648,10 @@ const MachineForm = (props: MachineDetailsProps) => {
</>
)}
</Field>
</Fieldset>
<div class=" col-span-full" tabindex="0">
<input type="checkbox" />
<div class=" px-0 text-xl ">Connection Settings</div>
<div class="">
<Accordion title="Connection Settings">
<Fieldset>
<Field name="machine.deploy.targetHost">
{(field, props) => (
<TextInput
@@ -663,9 +664,8 @@ const MachineForm = (props: MachineDetailsProps) => {
/>
)}
</Field>
</div>
</div>
</Fieldset>
</Accordion>
{
<footer class="flex justify-end gap-y-3 border-t border-secondary-200 pt-5">