Added inern app integration

resources/js/app.ts

@@ -9,8 +9,8 @@ const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 createInertiaApp({
     title: (title) => (title ? `${title} - ${appName}` : appName),
 
-    layout: () => {
-        return PublicLayout;
+    layout: (name) => {
+        return name.startsWith('embedded/') ? null : PublicLayout;
     },
 
     progress: {

resources/js/components/MyRooms.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link, useForm } from '@inertiajs/vue3';
-import { DoorOpen, Plus, Trash2 } from '@lucide/vue';
+import { DoorOpen, Plus, Settings as SettingsIcon, Trash2 } from '@lucide/vue';
 import { ref } from 'vue';
 
 import DashboardRoomCard from '@/components/dashboard/DashboardRoomCard.vue';
@@ -13,6 +13,7 @@ import {
     DialogTitle,
 } from '@/components/ui/dialog';
 import { create, destroy, reopen, show } from '@/routes/room';
+import { edit as roomSettings } from '@/routes/room/settings';
 import type { DashboardRoom, OwnedRoomListProps } from '@/types/dashboard';
 
 defineProps<OwnedRoomListProps>();
@@ -91,6 +92,14 @@ function deleteRoom(): void {
                         Raum öffnen
                     </Link>
 
+                    <Link
+                        :href="roomSettings(room.id)"
+                        class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition hover:bg-slate-700"
+                    >
+                        <SettingsIcon class="size-4" />
+                        Einstellungen
+                    </Link>
+
                     <button
                         type="button"
                         class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-rose-300 transition hover:bg-rose-500/80"

resources/js/components/rooms/RoomExperience.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { Head, usePage } from '@inertiajs/vue3';
+import { computed, ref } from 'vue';
+
+import RoomHeader from '@/components/rooms/RoomHeader.vue';
+import RoomRetentionNotice from '@/components/rooms/RoomRetentionNotice.vue';
+import RoomTable from '@/components/rooms/RoomTable.vue';
+import RoomVoteDeck from '@/components/rooms/RoomVoteDeck.vue';
+import { useRoomRealtime } from '@/composables/useRoomRealtime';
+import type { RoomExperienceProps } from '@/types/room';
+
+const props = withDefaults(defineProps<RoomExperienceProps>(), {
+    embedded: false,
+});
+
+const page = usePage();
+const presenterMode = ref(false);
+const roomNotice = computed(() => page.props.roomNotice);
+const canFavorite = computed(
+    () => !props.embedded && page.props.auth.user?.id != props.room.owner_id,
+);
+
+const {
+    room: realtimeRoom,
+    currentPlayer: realtimeCurrentPlayer,
+    setCurrentVote,
+} = useRoomRealtime(
+    () => props.room,
+    () => props.currentPlayer,
+);
+</script>
+
+<template>
+    <Head :title="realtimeRoom.title ?? 'Scrum Poker'" />
+
+    <main
+        class="min-h-svh bg-slate-900 px-3 py-6 text-white sm:px-6 md:flex md:min-h-0 md:flex-col md:overflow-hidden lg:px-10"
+        :class="
+            embedded
+                ? 'md:h-dvh'
+                : '-m-6 min-h-[calc(100svh-4rem)] md:h-[calc(100dvh-4rem-1px)]'
+        "
+    >
+        <RoomRetentionNotice v-if="roomNotice" :notice="roomNotice" />
+
+        <RoomHeader
+            :id="realtimeRoom.id"
+            :title="realtimeRoom.title"
+            :join_code="realtimeRoom.join_code"
+            :is_favorite="realtimeRoom.is_favorite"
+            :can-favorite="canFavorite"
+            :embedded="embedded"
+            :player-name="realtimeCurrentPlayer.name"
+            v-model:presenter-mode="presenterMode"
+        />
+
+        <RoomTable
+            :room="realtimeRoom"
+            :current-player="realtimeCurrentPlayer"
+            :presenter-mode="presenterMode"
+        />
+
+        <RoomVoteDeck
+            :room-id="realtimeRoom.id"
+            :revealed="realtimeRoom.revealed"
+            :cards="realtimeRoom.deck.cards"
+            :current-vote="realtimeCurrentPlayer.current_vote"
+            :presenter-mode="presenterMode"
+            @vote-changed="setCurrentVote"
+        />
+    </main>
+</template>

resources/js/components/rooms/RoomHeader.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { Check, Copy } from '@lucide/vue';
+import { Check, Copy, LogOut } from '@lucide/vue';
 import { ref } from 'vue';
 
 import { Checkbox } from '@/components/ui/checkbox';
+import { logout as embeddedLogout } from '@/routes/embedded';
 import { favorite } from '@/routes/room';
 import type { RoomHeaderEmits, RoomHeaderProps } from '@/types/room';
 
@@ -48,6 +49,24 @@ async function copyInviteLink(): Promise<void> {
         </div>
 
         <div class="flex flex-col items-end gap-2">
+            <Link
+                v-if="embedded"
+                :href="
+                    embeddedLogout({
+                        query: {
+                            join_code,
+                            player_name: playerName,
+                        },
+                    })
+                "
+                method="post"
+                as="button"
+                class="inline-flex items-center gap-2 text-sm text-slate-300 transition hover:text-white"
+            >
+                <LogOut class="size-4" />
+                Abmelden
+            </Link>
+
             <button
                 type="button"
                 class="flex w-fit items-center gap-3 rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-left transition hover:bg-slate-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300"

resources/js/components/rooms/RoomTable.vue

@@ -120,7 +120,10 @@ const voteCount = computed(
             />
 
             <RoomModeratorControls
-                v-if="currentPlayer.is_moderator"
+                v-if="
+                    currentPlayer.is_moderator ||
+                    room.allow_participants_to_manage_rounds
+                "
                 :room-id="room.id"
                 :revealed="room.revealed"
                 :has-votes="voteCount > 0"

resources/js/pages/auth/Login.vue

@@ -23,6 +23,7 @@ defineOptions({
 defineProps<{
     status?: string;
     canResetPassword: boolean;
+    rememberByDefault: boolean;
 }>();
 </script>
 
@@ -85,7 +86,12 @@ defineProps<{
 
             <div class="flex items-center justify-between">
                 <Label for="remember" class="flex items-center space-x-3">
-                    <Checkbox id="remember" name="remember" :tabindex="3" />
+                    <Checkbox
+                        id="remember"
+                        name="remember"
+                        :default-value="rememberByDefault"
+                        :tabindex="3"
+                    />
                     <span>Remember me</span>
                 </Label>
             </div>

resources/js/pages/embedded/Error.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3';
+import { CircleAlert } from '@lucide/vue';
+
+defineProps<{
+    message: string;
+}>();
+</script>
+
+<template>
+    <Head title="Scrum Poker nicht verfügbar" />
+
+    <main
+        class="grid min-h-svh place-items-center bg-slate-900 p-8 text-slate-100"
+    >
+        <section
+            class="flex max-w-lg flex-col items-center gap-4 rounded-2xl border border-slate-700 bg-slate-800 p-8 text-center shadow-xl"
+        >
+            <CircleAlert class="size-10 text-amber-300" />
+            <h1 class="text-2xl font-bold">Raum kann nicht geöffnet werden</h1>
+            <p class="text-slate-300">{{ message }}</p>
+            <p class="text-sm text-slate-400">
+                Bitte ändere Raumcode oder Anzeigename auf der Home-Seite der
+                Fillibri Hub App und öffne Scrum Poker erneut.
+            </p>
+        </section>
+    </main>
+</template>

resources/js/pages/embedded/Room.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import RoomExperience from '@/components/rooms/RoomExperience.vue';
+import type { RoomPageProps } from '@/types/room';
+
+const props = defineProps<RoomPageProps>();
+</script>
+
+<template>
+    <RoomExperience
+        :room="props.room"
+        :current-player="props.currentPlayer"
+        embedded
+    />
+</template>

resources/js/pages/rooms/Settings.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { ArrowLeft } from '@lucide/vue';
+
+import InputError from '@/components/InputError.vue';
+import { Checkbox } from '@/components/ui/checkbox';
+import { dashboard } from '@/routes';
+import { update as updateSettings } from '@/routes/room/settings';
+import type { RoomSettingsPageProps } from '@/types/room';
+
+const props = defineProps<RoomSettingsPageProps>();
+const form = useForm({
+    allow_participants_to_manage_rounds:
+        props.room.allow_participants_to_manage_rounds,
+    is_persistent: props.room.is_persistent,
+});
+
+function submit(): void {
+    form.patch(updateSettings(props.room.id).url, {
+        preserveScroll: true,
+    });
+}
+</script>
+
+<template>
+    <Head title="Raumeinstellungen" />
+
+    <main
+        class="flex min-h-[calc(100svh-4rem)] justify-center bg-slate-900 p-4 text-slate-100 sm:p-8"
+    >
+        <section class="flex w-full max-w-2xl flex-col gap-6">
+            <Link
+                :href="dashboard()"
+                class="inline-flex w-fit items-center gap-2 text-sm text-slate-300 transition hover:text-white"
+            >
+                <ArrowLeft class="size-4" />
+                Zurück zu meinen Räumen
+            </Link>
+
+            <div>
+                <h1 class="text-2xl font-bold">Raumeinstellungen</h1>
+                <p class="mt-1 text-sm text-slate-400">
+                    {{ room.title ?? 'Scrum Poker' }} · {{ room.join_code }}
+                </p>
+            </div>
+
+            <form
+                class="flex flex-col gap-6 rounded-xl border border-slate-700 bg-slate-800 p-6"
+                @submit.prevent="submit"
+            >
+                <label class="flex cursor-pointer items-start gap-4">
+                    <Checkbox
+                        :model-value="form.allow_participants_to_manage_rounds"
+                        @update:model-value="
+                            form.allow_participants_to_manage_rounds =
+                                $event === true
+                        "
+                    />
+                    <span>
+                        <strong class="block"
+                            >Alle dürfen Runden steuern</strong
+                        >
+                        <span class="mt-1 block text-sm text-slate-400">
+                            Alle aktiven Teilnehmer, auch Gäste, dürfen Karten
+                            aufdecken, Votes zurücksetzen und die nächste Runde
+                            starten.
+                        </span>
+                    </span>
+                </label>
+                <InputError
+                    :message="form.errors.allow_participants_to_manage_rounds"
+                />
+
+                <label class="flex cursor-pointer items-start gap-4">
+                    <Checkbox
+                        :model-value="form.is_persistent"
+                        @update:model-value="
+                            form.is_persistent = $event === true
+                        "
+                    />
+                    <span>
+                        <strong class="block"
+                            >Raum dauerhaft offen halten</strong
+                        >
+                        <span class="mt-1 block text-sm text-slate-400">
+                            Der Raum wird auch nach längerer Inaktivität nicht
+                            automatisch geschlossen.
+                        </span>
+                    </span>
+                </label>
+                <InputError :message="form.errors.is_persistent" />
+
+                <button
+                    type="submit"
+                    class="inline-flex w-fit rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90 disabled:opacity-50"
+                    :disabled="form.processing"
+                >
+                    {{ form.processing ? 'Wird gespeichert …' : 'Speichern' }}
+                </button>
+            </form>
+        </section>
+    </main>
+</template>

resources/js/pages/rooms/Show.vue

@@ -1,63 +1,10 @@
 <script setup lang="ts">
-import { Head, usePage } from '@inertiajs/vue3';
-import { computed, ref } from 'vue';
-
-import RoomHeader from '@/components/rooms/RoomHeader.vue';
-import RoomRetentionNotice from '@/components/rooms/RoomRetentionNotice.vue';
-import RoomTable from '@/components/rooms/RoomTable.vue';
-import RoomVoteDeck from '@/components/rooms/RoomVoteDeck.vue';
-import { useRoomRealtime } from '@/composables/useRoomRealtime';
+import RoomExperience from '@/components/rooms/RoomExperience.vue';
 import type { RoomPageProps } from '@/types/room';
 
 const props = defineProps<RoomPageProps>();
-
-const page = usePage();
-const presenterMode = ref(false);
-const roomNotice = computed(() => page.props.roomNotice);
-const canFavorite = computed(
-    () => page.props.auth.user?.id != props.room.owner_id,
-);
-
-const {
-    room: realtimeRoom,
-    currentPlayer: realtimeCurrentPlayer,
-    setCurrentVote,
-} = useRoomRealtime(
-    () => props.room,
-    () => props.currentPlayer,
-);
 </script>
 
 <template>
-    <Head :title="realtimeRoom.title ?? 'Scrum Poker'" />
-
-    <main
-        class="-m-6 min-h-[calc(100svh-4rem)] bg-slate-900 px-3 py-6 text-white sm:px-6 md:flex md:h-[calc(100dvh-4rem-1px)] md:min-h-0 md:flex-col md:overflow-hidden lg:px-10"
-    >
-        <RoomRetentionNotice v-if="roomNotice" :notice="roomNotice" />
-
-        <RoomHeader
-            :id="realtimeRoom.id"
-            :title="realtimeRoom.title"
-            :join_code="realtimeRoom.join_code"
-            :is_favorite="realtimeRoom.is_favorite"
-            :can-favorite="canFavorite"
-            v-model:presenter-mode="presenterMode"
-        />
-
-        <RoomTable
-            :room="realtimeRoom"
-            :current-player="realtimeCurrentPlayer"
-            :presenter-mode="presenterMode"
-        />
-
-        <RoomVoteDeck
-            :room-id="realtimeRoom.id"
-            :revealed="realtimeRoom.revealed"
-            :cards="realtimeRoom.deck.cards"
-            :current-vote="realtimeCurrentPlayer.current_vote"
-            :presenter-mode="presenterMode"
-            @vote-changed="setCurrentVote"
-        />
-    </main>
+    <RoomExperience :room="props.room" :current-player="props.currentPlayer" />
 </template>

resources/js/types/room.ts

@@ -44,6 +44,8 @@ export type PokerRoom = {
     current_round: number;
     revealed: boolean;
     state_version: number;
+    allow_participants_to_manage_rounds: boolean;
+    is_persistent: boolean;
     statistics: RoomStatistics | null;
     deck: RoomDeck;
     players: RoomPlayer[];
@@ -64,6 +66,23 @@ export type RoomPageProps = {
     currentPlayer: CurrentRoomPlayer;
 };
 
+export type RoomExperienceProps = RoomPageProps & {
+    embedded?: boolean;
+};
+
+export type RoomSettings = Pick<
+    PokerRoom,
+    | 'id'
+    | 'title'
+    | 'join_code'
+    | 'allow_participants_to_manage_rounds'
+    | 'is_persistent'
+>;
+
+export type RoomSettingsPageProps = {
+    room: RoomSettings;
+};
+
 export type CreateRoomPageProps = {
     decks: SelectableDeck[];
     defaultPlayerName: string | null;
@@ -95,6 +114,8 @@ export type RoomHeaderProps = Pick<
 > & {
     canFavorite: boolean;
     presenterMode: boolean;
+    embedded: boolean;
+    playerName: string;
 };
 
 export type RoomHeaderEmits = {
@@ -138,13 +159,15 @@ export type RoomVoteDeckEmits = {
 
 export type RoomStateChange =
     | 'player_joined'
+    | 'player_updated'
     | 'vote_changed'
     | 'cards_revealed'
     | 'votes_reset'
     | 'next_round'
     | 'room_reopened'
     | 'room_closed'
-    | 'room_deleted';
+    | 'room_deleted'
+    | 'room_settings_updated';
 
 export type RoomStateChangedPayload = {
     version: number;
@@ -157,6 +180,7 @@ export type RoomRealtimeState = Pick<
     | 'current_round'
     | 'revealed'
     | 'state_version'
+    | 'allow_participants_to_manage_rounds'
     | 'statistics'
     | 'players'
 >;