PetschStudios/scrum-poker-internal
3
0
Fork 0
mirror of https://github.com/ericasch6/scrum-poker-internal.git synced 2026-10-16 07:48:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: some fixes to the ui, imlemented user and guest user, ans used the dahboard

Browse Source
This commit is contained in:
Eric
2026-08-16 16:24:25 +02:00
parent 4639baa9ae
commit 50e9fbd0b0
37 changed files with 1657 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/pages/rooms/Join.vue
+95 -40
View File
@@ -1,69 +1,124 @@
<script setup lang="ts">
import { code} from '@/routes/room';
import { useForm } from '@inertiajs/vue3';
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
import { computed } from 'vue';
import { dashboard } from '@/routes';
import { code } from '@/routes/room';
const props = defineProps <{
join_code?: string,
}>()
const props = defineProps<{
join_code?: string;
defaultPlayerName: string | null;
closedRoom: {
title: string | null;
join_code: string;
} | null;
}>();
const page = usePage();
const isAuthenticated = computed(() => page.props.auth.user !== null);
const form = useForm({
player_name: '',
player_name: props.defaultPlayerName ?? '',
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">
<Head title="Raum beitreten" />
<h1 class="text-4xl font-extrabold mt-10"> Tritt einer Runde bei </h1>
<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>
<div class="p-6 flex justify-center items-center flex-col gap-8">
<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="space-y-5" @submit.prevent="submit">
<form class="mt-6 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">
<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">
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">
<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 bg-blue-600 px-4 py-2 text-white disabled:opacity-50">
{{ form.processing ? 'Raum wird beigetreten' : 'Raum beitreten' }}
<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>
</div>
</div>
</template>
</section>
</main>
</template>
</template>