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

UI/flash: use modal for confirmation

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-12-28 16:17:41 +01:00
parent f02a0425e8
commit fc5cb6cde2
1 changed files with 68 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,6 +20,7 @@ import { createEffect, createSignal, For, Show } from "solid-js";
import toast from "solid-toast"; import toast from "solid-toast";
import { FieldLayout } from "@/src/Form/fields/layout"; import { FieldLayout } from "@/src/Form/fields/layout";
import { InputLabel } from "@/src/components/inputBase"; import { InputLabel } from "@/src/components/inputBase";
import { Modal } from "@/src/components/modal";
interface Wifi extends FieldValues { interface Wifi extends FieldValues {
ssid: string; ssid: string;
@@ -53,7 +54,7 @@ export const Flash = () => {
/* ==== WIFI NETWORK ==== */ /* ==== WIFI NETWORK ==== */
const [wifiNetworks, setWifiNetworks] = createSignal<Wifi[]>([]); const [wifiNetworks, setWifiNetworks] = createSignal<Wifi[]>([]);
const [passwordVisibility, setPasswordVisibility] = createSignal<boolean[]>( const [passwordVisibility, setPasswordVisibility] = createSignal<boolean[]>(
[], []
); );
createEffect(() => { createEffect(() => {
@@ -77,7 +78,7 @@ export const Flash = () => {
const updatedNetworks = wifiNetworks().filter((_, i) => i !== index); const updatedNetworks = wifiNetworks().filter((_, i) => i !== index);
setWifiNetworks(updatedNetworks); setWifiNetworks(updatedNetworks);
const updatedVisibility = passwordVisibility().filter( const updatedVisibility = passwordVisibility().filter(
(_, i) => i !== index, (_, i) => i !== index
); );
setPasswordVisibility(updatedVisibility); setPasswordVisibility(updatedVisibility);
setValue(formStore, "wifi", updatedNetworks); setValue(formStore, "wifi", updatedNetworks);
@@ -144,11 +145,15 @@ export const Flash = () => {
} }
return dataTransfer.files; return dataTransfer.files;
}; };
const [confirmOpen, setConfirmOpen] = createSignal(false);
const handleSubmit = async (values: FlashFormValues) => { const handleConfirm = async (values: FlashFormValues) => {
setConfirmOpen(true);
console.log("Submit:", values); console.log("Submit:", values);
toast.error("Not fully implemented yet"); toast.error("Not fully implemented yet");
// Disabled for now. To prevent accidental flashing of local disks // Disabled for now. To prevent accidental flashing of local disks
// User should confirm the disk to flash to
// try { // try {
// await callApi("flash_machine", { // await callApi("flash_machine", {
// machine: { // machine: {
@@ -177,6 +182,30 @@ export const Flash = () => {
return ( return (
<> <>
<Header title="Flash installer" /> <Header title="Flash installer" />
<Modal
open={confirmOpen()}
handleClose={() => setConfirmOpen(false)}
title="Confirm"
>
<div class="p-4 flex flex-col gap-4">
<div class="flex justify-between rounded-sm border p-4 align-middle border-def-2 text-red-900">
<Typography
hierarchy="label"
weight="medium"
size="default"
class="flex-wrap break-words pr-4"
>
Warning: All data on will be lost.
<br />
Selected disk: '{getValue(formStore, "disk")}'
</Typography>
</div>
<div class="w-full flex justify-between">
<Button variant="light">Cancel</Button>
<Button>Confirm</Button>
</div>
</div>
</Modal>
<div class="p-4"> <div class="p-4">
<Typography tag="p" hierarchy="body" size="default" color="primary"> <Typography tag="p" hierarchy="body" size="default" color="primary">
USB Utility image. USB Utility image.
@@ -185,7 +214,7 @@ export const Flash = () => {
Will make bootstrapping new machines easier by providing secure remote Will make bootstrapping new machines easier by providing secure remote
connection to any machine when plugged in. connection to any machine when plugged in.
</Typography> </Typography>
<Form onSubmit={handleSubmit}> <Form onSubmit={handleConfirm}>
<div class="my-4"> <div class="my-4">
<Field name="sshKeys" type="File[]"> <Field name="sshKeys" type="File[]">
{(field, props) => ( {(field, props) => (
@@ -242,7 +271,7 @@ export const Flash = () => {
value={field.value || ""} value={field.value || ""}
error={field.error} error={field.error}
required required
placeholder="Select a thing where the installer will be flashed to" placeholder="Select a drive where the clan-installer will be flashed to"
options={ options={
deviceQuery.data?.blockdevices.map((d) => ({ deviceQuery.data?.blockdevices.map((d) => ({
value: d.path, value: d.path,
@@ -285,7 +314,7 @@ export const Flash = () => {
label="SSID" label="SSID"
value={field.value ?? ""} value={field.value ?? ""}
error={field.error} error={field.error}
class="col-span-3" class="col-span-full "
required required
/> />
)} )}
@@ -295,40 +324,39 @@ export const Flash = () => {
validate={[required("Password is required")]} validate={[required("Password is required")]}
> >
{(field, props) => ( {(field, props) => (
<div class="relative col-span-3 w-full"> <TextInput
<TextInput class="col-span-full"
inputProps={{ inputProps={{
...props, ...props,
type: passwordVisibility()[index()] type: passwordVisibility()[index()]
? "text" ? "text"
: "password", : "password",
}} }}
label="Password" label="Password"
value={field.value ?? ""} value={field.value ?? ""}
error={field.error} error={field.error}
// adornment={{ // adornment={{
// position: "end", // position: "end",
// content: ( // content: (
// <Button // <Button
// variant="light" // variant="light"
// type="button" // type="button"
// class="flex justify-center opacity-70" // class="flex justify-center opacity-70"
// onClick={() => // onClick={() =>
// togglePasswordVisibility(index()) // togglePasswordVisibility(index())
// } // }
// startIcon={ // startIcon={
// passwordVisibility()[index()] ? ( // passwordVisibility()[index()] ? (
// <Icon icon="EyeClose" /> // <Icon icon="EyeClose" />
// ) : ( // ) : (
// <Icon icon="EyeOpen" /> // <Icon icon="EyeOpen" />
// ) // )
// } // }
// ></Button> // ></Button>
// ), // ),
// }} // }}
required required
/> />
</div>
)} )}
</Field> </Field>
</div> </div>