-
- Create a portable installer
-
-
- Grab a disposable USB stick and plug it in
-
-
-
-
-
- We will erase everything on it during this process
-
-
- Create a portable installer tool that can turn any machine into
- a fully configured Clan machine.
-
-
- );
-};
+const steps = [InitialStep, ...createInstallerSteps, ...installSteps] as const;
export type InstallSteps = typeof steps;
diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx
new file mode 100644
index 000000000..e12054206
--- /dev/null
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx
@@ -0,0 +1,64 @@
+import { useStepper } from "@/src/hooks/stepper";
+import { InstallSteps } from "../install";
+import { Typography } from "@/src/components/Typography/Typography";
+import { Button } from "@/src/components/Button/Button";
+import { Divider } from "@/src/components/Divider/Divider";
+
+const InitialChoice = () => {
+ const stepSignal = useStepper();
+ return (
+
+
+
+
+
+ Remote setup
+
+
+ Is your machine currently online? Does it have an IP-address, can
+ you SSH into it? And does it support Kexec?
+
+
+
+
+
+
+
+
+ I don't have an installer, yet
+
+
+
+
+
+ );
+};
+
+export const InitialStep = {
+ id: "init",
+ content: InitialChoice,
+};
diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
new file mode 100644
index 000000000..50dbfdefd
--- /dev/null
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
@@ -0,0 +1,206 @@
+import { useStepper } from "@/src/hooks/stepper";
+import {
+ createForm,
+ getError,
+ SubmitHandler,
+ valiForm,
+} from "@modular-forms/solid";
+import * as v from "valibot";
+import { InstallSteps } from "../install";
+import { callApi } from "@/src/hooks/api";
+import { Fieldset } from "@/src/components/Form/Fieldset";
+import { HostFileInput } from "@/src/components/Form/HostFileInput";
+import { Select } from "@/src/components/Select/Select";
+import { BackButton, NextButton, StepFooter, StepLayout } from "../../Steps";
+import { Typography } from "@/src/components/Typography/Typography";
+
+const CreateHeader = (props: { machineName: string }) => {
+ return (
+
+
+ Create installer
+
+
+ );
+};
+
+const CreateFlashSchema = v.object({
+ ssh_key: v.pipe(
+ v.string("Please select a key."),
+ v.nonEmpty("Please select a key."),
+ ),
+ language: v.pipe(v.string(), v.nonEmpty("Please choose a language.")),
+ keymap: v.pipe(v.string(), v.nonEmpty("Please select a keyboard layout.")),
+});
+
+type FlashFormType = v.InferInput;
+
+const CreateIso = () => {
+ const [formStore, { Form, Field }] = createForm({
+ validate: valiForm(CreateFlashSchema),
+ });
+ const stepSignal = useStepper();
+
+ // TODO: push values to the parent form Store
+ const handleSubmit: SubmitHandler = (values, event) => {
+ console.log("ISO creation submitted", values);
+ // Here you would typically trigger the ISO creation process
+ stepSignal.next();
+ };
+
+ const onSelectFile = async () => {
+ const req = callApi("get_system_file", {
+ file_request: {
+ mode: "select_folder",
+ title: "Select a folder for you new Clan",
+ },
+ });
+
+ const resp = await req.result;
+
+ if (resp.status === "error") {
+ // just throw the first error, I can't imagine why there would be multiple
+ // errors for this call
+ throw new Error(resp.errors[0].message);
+ }
+
+ if (resp.status === "success" && resp.data) {
+ return resp.data[0];
+ }
+
+ throw new Error("No data returned from api call");
+ };
+
+ return (
+
+ );
+};
+
+export const createInstallerSteps = [
+ {
+ id: "create:iso-0",
+ content: () => (
+
+
+
+
+ Create a portable installer
+
+
+ Grab a disposable USB stick and plug it in
+
+
+
+
+
+ We will erase everything on it during this process
+
+
+ Create a portable installer tool that can turn any machine into
+ a fully configured Clan machine.
+
+
+ );
+};
+
+type NextButtonProps = JSX.ButtonHTMLAttributes & {};
+
+export const NextButton = (props: NextButtonProps) => {
+ // TODO: Make this type generic
+ const stepSignal = useStepper();
+ return (
+
+ );
+};
+
+export const BackButton = () => {
+ const stepSignal = useStepper();
+ return (
+
+ );
+};
+
+/**
+ * Renders a footer with Back and Next buttons.
+ * The Next button will trigger the next step in the stepper.
+ * The Back button will go to the previous step.
+ *
+ * Does not trigger submission on any form
+ *
+ * Use this for overview steps where no form submission is required.
+ */
+export const StepFooter = () => {
+ const stepper = useStepper();
+ return (
+