From 189e0e54759191c2970a64bac12822dd834793a2 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Tue, 22 Jul 2025 17:35:22 +0200
Subject: [PATCH] UX: Show login button in join/start modal dialog

---
 lang/en/app.php                            |  1 +
 lang/en/rooms.php                          |  2 ++
 resources/js/components/RoomJoinButton.vue | 14 +++++++++++++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/lang/en/app.php b/lang/en/app.php
index f50528ac5..647a2e3b7 100644
--- a/lang/en/app.php
+++ b/lang/en/app.php
@@ -105,6 +105,7 @@
     'next_page' => 'Next page',
     'no' => 'No',
     'not_found' => '404 | The requested address was not found',
+    'or' => 'or',
     'overwrite' => 'Overwrite',
     'previous_page' => 'Previous page',
     'profile' => 'Profile',
diff --git a/lang/en/rooms.php b/lang/en/rooms.php
index 02bc70d77..3d3326533 100644
--- a/lang/en/rooms.php
+++ b/lang/en/rooms.php
@@ -22,6 +22,8 @@
         'detached' => 'Connection to ongoing video conference lost, recovery failed.',
         'reconnecting' => 'Connection to ongoing video conference lost, trying to reconnect.',
     ],
+    'continue_as_guest' => 'Continue as guest',
+    'continue_as_user' => 'Continue as user',
     'create' => [
         'ok' => 'Create',
         'title' => 'Create room',
diff --git a/resources/js/components/RoomJoinButton.vue b/resources/js/components/RoomJoinButton.vue
index 49d47499b..bf6934160 100644
--- a/resources/js/components/RoomJoinButton.vue
+++ b/resources/js/components/RoomJoinButton.vue
@@ -54,8 +54,9 @@
           <!-- Ask guests for their first and lastname -->
           <div
             v-if="!authStore.isAuthenticated && !token"
-            class="mb-4 flex flex-col gap-2"
+            class="mb-4 flex flex-col gap-2 bg-surface-200 p-4 rounded-border dark:bg-surface-800"
           >
+            <h4 class="font-bold">{{ $t("rooms.continue_as_guest") }}</h4>
             <label for="guest-name">{{ $t("rooms.first_and_lastname") }}</label>
             <InputText
               id="guest-name"
@@ -65,6 +66,17 @@
               :invalid="formErrors.fieldInvalid('name')"
             />
             <FormError :errors="formErrors.fieldError('name')" />
+            <divider
+              class="m-0 w-full before:border-surface-300 dark:before:border-surface-600"
+              pt:content:class="bg-surface-200 dark:bg-surface-800"
+              >{{ $t("app.or") }}</divider
+            >
+            <h4 class="font-bold">{{ $t("rooms.continue_as_user") }}</h4>
+            <Button
+              as="router-link"
+              :to="{ name: 'login', query: { redirect: $route.fullPath } }"
+              >{{ $t("auth.login") }}</Button
+            >
           </div>
 
           <div