scrum-poker-internal/resources/js/pages/rooms/Join.vue

<script setup lang="ts">
import { code} from '@/routes/room';
import { useForm } from '@inertiajs/vue3';

const props = defineProps <{
    join_code?: string,
}>()

const form = useForm({
    player_name: '',
    join_code: props.join_code ?? '',
});


function submit(): void {
    form.submit(code());
}

</script>

<template>
    <main>
        <div class="flex flex-col gap-6 justify-start items-center min-h-screen">

            <h1 class="text-4xl font-extrabold mt-10"> Tritt einer Runde bei </h1>

            <div class="p-6 flex justify-center items-center flex-col gap-8">

                <form class="space-y-5" @submit.prevent="submit">
                    <div>
                        <label for="player_name" class="mb-1 block font-medium">
                            Player Name
                        </label>

                        <input id="title" v-model="form.player_name" type="text" maxlength="100"
                            class="w-full rounded border p-2" placeholder="Max Mustermann" />

                        <p v-if="form.errors.player_name" class="mt-1 text-sm text-red-600">

                            {{ form.errors.player_name }}
                        </p>

                    </div>

                    <div>
                        <label for="join_code" class="mb-1 block font-medium">
                            Raum Code
                        </label>

                        <input id="title" v-model="form.join_code" type="text" maxlength="100"
                            class="w-full rounded border p-2" />

                        <p v-if="form.errors.join_code" class="mt-1 text-sm text-red-600">

                            {{ form.errors.join_code }}
                        </p>

                    </div>
                    <button type="submit" :disabled="form.processing"
                        class="w-full rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50">
                        {{ form.processing ? 'Raum wird beigetreten' : 'Raum beitreten' }}

                    </button>
                </form>
            </div>
        </div>

    </main>
</template>