85 lines
2.3 KiB
Vue
85 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
|
import teamRoutes from '@/routes/teams';
|
|
import { Save } from '@lucide/vue';
|
|
import { Head, useForm } from '@inertiajs/vue3';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import InputError from '@/components/InputError.vue';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { ref } from 'vue';
|
|
import TeamSlug from '@/components/TeamSlug.vue';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
|
|
defineOptions({
|
|
layout: {
|
|
breadcrumbs: [
|
|
{
|
|
title: 'Teams',
|
|
href: teamRoutes.index(),
|
|
},
|
|
{
|
|
title: 'Erstellen',
|
|
href: teamRoutes.create(),
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
const slugTaken = ref(false);
|
|
|
|
const form = useForm({
|
|
name: '',
|
|
slug: '',
|
|
require_2fa: false,
|
|
});
|
|
|
|
function submit(): void {
|
|
form.submit(teamRoutes.store());
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col justify-center p-16">
|
|
<Head title="Teams" />
|
|
<Card class="w-full">
|
|
<CardContent>
|
|
<form class="grid w-full gap-5 py-4" @submit.prevent="submit">
|
|
<div class="grid grid-cols-2 items-start gap-5">
|
|
<div class="grid items-start gap-3">
|
|
<Label for="name">Name</Label>
|
|
<Input id="name" v-model="form.name" autofocus name="name" />
|
|
<InputError :message="form.errors.name" />
|
|
</div>
|
|
<TeamSlug
|
|
v-model:slug="form.slug"
|
|
v-model:slug-taken="slugTaken"
|
|
:error="form.errors.slug"
|
|
:name="form.name"
|
|
/>
|
|
<div class="grid items-start gap-3">
|
|
<Label for="require_2fa">Require 2FA</Label>
|
|
<Checkbox
|
|
id="require_2fa"
|
|
v-model="form.require_2fa"
|
|
name="require_2fa"
|
|
/>
|
|
<InputError :message="form.errors.require_2fa" />
|
|
</div>
|
|
</div>
|
|
<div class="flex w-full justify-end">
|
|
<Button
|
|
:disabled="form.processing || slugTaken"
|
|
class="w-fit"
|
|
type="submit"
|
|
>
|
|
<component :is="Save" />
|
|
Erstellen
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template>
|