kopia lustrzana https://github.com/cloudflare/wildebeest
81 wiersze
2.9 KiB
TypeScript
81 wiersze
2.9 KiB
TypeScript
import { component$, QRL } from '@builder.io/qwik'
|
|
import { configure, type InstanceConfig, testInstance } from './utils'
|
|
|
|
interface Props {
|
|
instanceConfig: InstanceConfig
|
|
setLoading: QRL<(loading: boolean) => void>
|
|
setInstanceConfigured: QRL<(configured: boolean) => void>
|
|
}
|
|
|
|
export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfigured }) => {
|
|
return (
|
|
<>
|
|
<h2 class="mb-5">Configure your instance</h2>
|
|
|
|
<div class="flex flex-col mb-6 w-full max-w-md">
|
|
<label class="mb-2 max-w-max text-semi text-sm" for="start-instance-title">
|
|
Title
|
|
</label>
|
|
<div class="flex justify-center items-center flex-wrap gap-1">
|
|
<input
|
|
id="start-instance-title"
|
|
name="title"
|
|
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 invalid:border-red-400 flex-1 w-full"
|
|
value={instanceConfig.title}
|
|
onInput$={(ev) => (instanceConfig.title = (ev.target as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col mb-6 w-full max-w-md">
|
|
<label class="mb-2 max-w-max text-semi text-sm" for="start-instance-email">
|
|
Administrator email
|
|
</label>
|
|
<div class="flex justify-center items-center flex-wrap gap-1">
|
|
<input
|
|
id="start-instance-email"
|
|
name="email"
|
|
type="email"
|
|
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 invalid:border-red-400 flex-1 w-full"
|
|
value={instanceConfig.email}
|
|
onInput$={(ev) => (instanceConfig.email = (ev.target as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col mb-6 w-full max-w-md">
|
|
<label class="mb-2 max-w-max text-semi text-sm" for="start-instance-description">
|
|
Description
|
|
</label>
|
|
<div class="flex justify-center items-center flex-wrap gap-1">
|
|
<input
|
|
id="start-instance-description"
|
|
name="description"
|
|
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 invalid:border-red-400 flex-1 w-full"
|
|
value={instanceConfig.description}
|
|
onInput$={(ev) => (instanceConfig.description = (ev.target as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="mb-9 bg-wildebeest-vibrant-500 hover:bg-wildebeest-vibrant-600 p-3 text-white text-uppercase border-wildebeest-vibrant-500 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-600 focus:border-wildebeest-vibrant-600"
|
|
preventdefault:click
|
|
onClick$={async () => {
|
|
setLoading(true)
|
|
await configure(instanceConfig)
|
|
|
|
if (await testInstance()) {
|
|
setInstanceConfigured(true)
|
|
}
|
|
|
|
setLoading(false)
|
|
}}
|
|
>
|
|
Configure and start your instance
|
|
</button>
|
|
</>
|
|
)
|
|
})
|