Files
keystone/resources/js/pages/environment-variables/Create.vue
Harry Bayliss 5b977c1f41
Some checks failed
CI / Lint (push) Failing after 22s
CI / Tests (push) Failing after 33s
wowowowowo
2026-05-28 15:15:41 +01:00

94 lines
3.1 KiB
Vue

<script setup lang="ts">
import InputError from "@/components/InputError.vue";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import AppLayout from "@/layouts/AppLayout.vue";
import { Head, useForm } from "@inertiajs/vue3";
defineProps<{
application: Record<string, any>;
environment: Record<string, any>;
}>();
const form = useForm({
key: "",
value: "",
overridable: true,
});
</script>
<template>
<Head title="Add Environment Variable" />
<AppLayout
:breadcrumbs="[
{
title: 'Applications',
href: route('applications.index', {
organisation: $page.props.organisation.id,
}),
},
{
title: application.name,
href: route('applications.show', {
organisation: $page.props.organisation.id,
application: application.id,
}),
},
{
title: 'Add Variable',
},
]"
>
<form
class="flex h-full max-w-2xl flex-1 flex-col gap-5 p-4"
@submit.prevent="
form.post(
route('environment-variables.store', {
organisation: $page.props.organisation.id,
application: application.id,
environment: environment.id,
}),
)
"
>
<div>
<h2 class="text-3xl font-bold tracking-tight">Add Environment Variable</h2>
</div>
<div class="grid gap-2">
<Label for="key">Key</Label>
<Input id="key" v-model="form.key" type="text" required placeholder="APP_DEBUG" />
<InputError :message="form.errors.key" />
</div>
<div class="grid gap-2">
<Label for="value">Value</Label>
<Input id="value" v-model="form.value" type="text" />
<InputError :message="form.errors.value" />
</div>
<label class="flex items-center gap-2 text-sm">
<input v-model="form.overridable" type="checkbox" class="size-4" />
<span>
Overridable
<span class="block text-muted-foreground">
Allows managed attachments to replace this variable if they need to.
</span>
</span>
</label>
<div class="rounded-md border bg-muted/30 p-3 text-sm text-muted-foreground">
Values are stored as environment variables and displayed masked in environment
overviews. Use locked variables for values that should not be replaced by generated
attachment output.
</div>
<div class="flex items-center justify-end">
<Button type="submit" :disabled="form.processing">Save</Button>
</div>
</form>
</AppLayout>
</template>