Files
continuum-app/packages/ui/src/components/OnboardingForm.vue
T
octoturge 9bd9728b21 Add Setup: first farm, gateway settings, add and remove printers; show alerts
A new user could sign in and see an empty page with no way forward. Setup
walks them through it: create a farm (reusing their organisation if they
already have one); get the gateway settings with a freshly minted token,
shown once and removed from the page when dismissed, with a confirmation
first if a gateway is already connected, since minting replaces the old
token; add a Bambu printer by address, serial and access code (a printer
the gateway discovered fills the form in); remove a printer behind a named
confirmation that says it also deletes the stored credential.

The access code field is cleared after every submit, success or failure, and
the page says plainly that the code goes to the gateway and nowhere else.
Add is disabled while no gateway is connected, because the code has nowhere
to go.

The fleet page now lists open alerts above the printers (polled every 5s)
with a Dismiss button, and points an empty account at Setup.

Verified in real Chrome by scripts/e2e-setup-browser.sh in continuum-backend:
nothing -> farm -> gateway -> printer -> failed-print alert -> dismissed ->
removed, with no page errors.
2026-10-29 15:15:06 +00:00

55 lines
1.3 KiB
Vue

<script setup lang="ts">
import { ref } from "vue";
const props = defineProps<{
/** Creates the organisation (if needed) and the farm. Rejects with a readable message. */
create: (farmName: string) => Promise<void>;
}>();
const farmName = ref("");
const busy = ref(false);
const failure = ref("");
async function submit() {
busy.value = true;
failure.value = "";
try {
await props.create(farmName.value.trim());
} catch (err) {
failure.value = err instanceof Error ? err.message : String(err);
} finally {
busy.value = false;
}
}
</script>
<template>
<form class="onboarding" @submit.prevent="submit">
<h2>Set up your first farm</h2>
<p>A farm is one site - a workshop or a room - with one gateway and its printers.</p>
<label>
Farm name
<input v-model="farmName" required maxlength="200" placeholder="Workshop" />
</label>
<button type="submit" :disabled="busy || !farmName.trim()">{{ busy ? "Creating..." : "Create farm" }}</button>
<p v-if="failure" role="alert" class="onboarding__error">{{ failure }}</p>
</form>
</template>
<style scoped>
.onboarding {
display: grid;
gap: 0.75rem;
max-width: 28rem;
}
.onboarding label {
display: grid;
gap: 0.25rem;
}
.onboarding__error {
color: #f2604c;
}
</style>