Files
keystone/resources/js/pages/registries/Create.vue

91 lines
3.1 KiB
Vue

<script setup>
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({
registryTypes: {
type: Array,
required: true,
},
});
const form = useForm({
name: '',
type: 'generic',
url: '',
username: '',
password: '',
});
</script>
<template>
<Head title="Create Registry" />
<AppLayout
:breadcrumbs="[
{
title: 'Organisation',
href: route('organisations.show', {
organisation: $page.props.organisation.id,
}),
},
{
title: 'Create Registry',
},
]"
>
<form
class="flex h-full max-w-2xl flex-1 flex-col gap-5 p-4"
@submit.prevent="form.post(route('registries.store', { organisation: $page.props.organisation.id }))"
>
<div>
<h2 class="text-3xl font-bold tracking-tight">Create Registry</h2>
</div>
<div class="grid gap-2">
<Label for="name">Name</Label>
<Input id="name" v-model="form.name" type="text" required placeholder="GHCR" />
<InputError :message="form.errors.name" />
</div>
<div class="grid gap-2">
<Label for="type">Type</Label>
<select id="type" v-model="form.type" class="h-9 rounded-md border border-input bg-transparent px-3 text-sm">
<option v-for="registryType in registryTypes" :key="registryType" :value="registryType">
{{ registryType.replace('_', ' ') }}
</option>
</select>
<InputError :message="form.errors.type" />
</div>
<div class="grid gap-2">
<Label for="url">Registry URL</Label>
<Input id="url" v-model="form.url" type="text" required placeholder="ghcr.io/example" />
<InputError :message="form.errors.url" />
</div>
<div class="grid gap-4 md:grid-cols-2">
<div class="grid gap-2">
<Label for="username">Username</Label>
<Input id="username" v-model="form.username" type="text" autocomplete="username" />
<InputError :message="form.errors.username" />
</div>
<div class="grid gap-2">
<Label for="password">Password</Label>
<Input id="password" v-model="form.password" type="password" autocomplete="new-password" />
<InputError :message="form.errors.password" />
</div>
</div>
<div class="flex items-center justify-end">
<Button type="submit" :disabled="form.processing">Create</Button>
</div>
</form>
</AppLayout>
</template>