80 lines
2.3 KiB
Vue
80 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, watch} 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 slug = ref('');
|
|
const slugTaken = ref(false);
|
|
const slugError = ref<string>('');
|
|
|
|
const form = useForm({
|
|
name: '',
|
|
require_2fa: false,
|
|
});
|
|
|
|
function submit(): void {
|
|
form.submit(teamRoutes.store());
|
|
}
|
|
|
|
watch(() => (form.errors as any).slug, (newError) => slugError.value = newError)
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Teams"/>
|
|
|
|
<div class="flex flex-col justify-center p-16">
|
|
<Card class="w-full">
|
|
<CardContent>
|
|
<form class="grid w-full gap-5 py-4" @submit.prevent="submit">
|
|
<div class="grid grid-cols-2 gap-5 items-start">
|
|
<div class="grid items-start gap-3">
|
|
<Label for="name">Name</Label>
|
|
<Input id="name" v-model="form.name" name="name"/>
|
|
<InputError :message="form.errors.name"/>
|
|
</div>
|
|
<TeamSlug :name="form.name" :slug="slug" :slug-error="slugError" :slug-taken="slugTaken"/>
|
|
<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>
|