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

<script setup lang="ts">
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
import { computed } from 'vue';

import { dashboard } from '@/routes';
import { code } from '@/routes/room';
import type { JoinRoomPageProps } from '@/types/room';

const props = defineProps<JoinRoomPageProps>();

const page = usePage();
const isAuthenticated = computed(() => page.props.auth.user !== null);

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

function submit(): void {
    form.submit(code());
}
</script>

<template>
    <Head title="Raum beitreten" />

    <main
        class="mx-auto flex min-h-[calc(100svh-8rem)] max-w-lg items-start justify-center pt-10"
    >
        <section
            class="w-full rounded-xl border border-white/10 bg-gray-800 p-6"
        >
            <template v-if="closedRoom">
                <p class="text-sm font-semibold text-amber-300">
                    Raum geschlossen
                </p>
                <h1 class="mt-2 text-2xl font-bold">
                    {{ closedRoom.title ?? 'Scrum Poker' }}
                </h1>
                <p class="mt-3 text-gray-300">
                    Der Raum mit dem Code
                    <strong class="font-mono tracking-wider">{{
                        closedRoom.join_code
                    }}</strong>
                    ist geschlossen und kann nicht mehr betreten werden.
                </p>
                <Link
                    v-if="isAuthenticated"
                    :href="dashboard()"
                    class="mt-6 inline-flex rounded-lg bg-white px-4 py-2 font-semibold text-gray-900"
                >
                    Zu meinen Räumen
                </Link>
            </template>

            <template v-else>
                <h1 class="text-2xl font-bold">Einem Raum beitreten</h1>
                <p class="mt-2 text-sm text-gray-400">
                    Gib deinen Namen und den sechsstelligen Raumcode ein.
                </p>

                <form class="mt-6 space-y-5" @submit.prevent="submit">
                    <div>
                        <label for="player_name" class="mb-1 block font-medium"
                            >Dein Name</label
                        >
                        <input
                            id="player_name"
                            v-model="form.player_name"
                            type="text"
                            maxlength="50"
                            required
                            class="w-full rounded-lg border border-gray-600 bg-gray-900 p-2.5 text-white"
                            placeholder="Max Mustermann"
                        />
                        <p
                            v-if="form.errors.player_name"
                            class="mt-1 text-sm text-red-400"
                        >
                            {{ form.errors.player_name }}
                        </p>
                    </div>

                    <div>
                        <label for="join_code" class="mb-1 block font-medium"
                            >Raumcode</label
                        >
                        <input
                            id="join_code"
                            v-model="form.join_code"
                            type="text"
                            maxlength="6"
                            required
                            class="w-full rounded-lg border border-gray-600 bg-gray-900 p-2.5 font-mono tracking-[0.2em] text-white uppercase"
                        />
                        <p
                            v-if="form.errors.join_code"
                            class="mt-1 text-sm text-red-400"
                        >
                            {{ form.errors.join_code }}
                        </p>
                    </div>

                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="w-full rounded-lg bg-blue-600 px-4 py-2.5 font-semibold text-white transition hover:bg-blue-500 disabled:opacity-50"
                    >
                        {{
                            form.processing
                                ? 'Raum wird geöffnet'
                                : 'Raum beitreten'
                        }}
                    </button>
                </form>
            </template>
        </section>
    </main>
</template>