From 1d4ee8b6c3e0330fbe73ac778e2c7233e9352526 Mon Sep 17 00:00:00 2001
From: Boes <ismael.a@live.nl>
Date: Mon, 18 May 2026 17:33:38 +0200
Subject: [PATCH] Add lobby room join form

---
 base/templates/base/lobby.html | 16 ++++++++++++-
 base/templates/base/room.html  |  4 ++--
 base/tests.py                  | 18 +++++++++++++++
 base/urls.py                   |  2 +-
 base/views.py                  |  7 +++++-
 requirements.txt               |  1 +
 static/styles/main.css         | 41 +++++++++++++++++++++++++++++++++-
 7 files changed, 83 insertions(+), 6 deletions(-)
 create mode 100644 requirements.txt

diff --git a/base/templates/base/lobby.html b/base/templates/base/lobby.html
index a390c32..3d14aea 100644
--- a/base/templates/base/lobby.html
+++ b/base/templates/base/lobby.html
@@ -9,6 +9,20 @@
             <h1>Welcome to MyChart</h1>
             <p>A group calling application for you</p>
         </div>
+
+        <form id="join-form" action="{% url 'room' %}" method="get">
+            <div class="form-field">
+                <label for="room-name">Room name</label>
+                <input id="room-name" name="room" type="text" placeholder="Enter room name" required>
+            </div>
+
+            <div class="form-field">
+                <label for="user-name">Your name</label>
+                <input id="user-name" name="name" type="text" placeholder="Enter your name" required>
+            </div>
+
+            <button type="submit">Join room</button>
+        </form>
     </section>
 </main>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/base/templates/base/room.html b/base/templates/base/room.html
index 2061dec..e3919c4 100644
--- a/base/templates/base/room.html
+++ b/base/templates/base/room.html
@@ -4,12 +4,12 @@
 
 <main>
     <section>
-        <p>Room Name: <span id="room-name-wrapper"> </span></p>
+        <p>Room Name: <span id="room-name-wrapper">{{ room_name }}</span></p>
     </section>
 
     <section id="video-streams">
         <div class="video-container" id="user-container-1">
-            <div class="username-wrapper"><span class="user-name">My Name</span></div>
+            <div class="username-wrapper"><span class="user-name">{{ user_name }}</span></div>
             <div class="video-player" id="user-1"></div>
         </div>     
     </section>
diff --git a/base/tests.py b/base/tests.py
index 7ce503c..aee379f 100644
--- a/base/tests.py
+++ b/base/tests.py
@@ -1,3 +1,21 @@
 from django.test import TestCase
+from django.urls import reverse
+
+
+class RoomViewTests(TestCase):
+    def test_room_uses_query_parameters(self):
+        response = self.client.get(reverse('room'), {
+            'room': 'Team Standup',
+            'name': 'Ismail',
+        })
+
+        self.assertContains(response, 'Team Standup')
+        self.assertContains(response, 'Ismail')
+
+    def test_room_falls_back_to_defaults(self):
+        response = self.client.get(reverse('room'))
+
+        self.assertContains(response, 'Main room')
+        self.assertContains(response, 'Guest')
 
 # Create your tests here.
diff --git a/base/urls.py b/base/urls.py
index eee9bea..7d02817 100644
--- a/base/urls.py
+++ b/base/urls.py
@@ -3,5 +3,5 @@
 
 urlpatterns = [
     path("", views.lobby),
-    path("room/", views.room),
+    path("room/", views.room, name="room"),
 ]
diff --git a/base/views.py b/base/views.py
index bf673c6..c57008b 100644
--- a/base/views.py
+++ b/base/views.py
@@ -4,4 +4,9 @@ def lobby(request):
     return render(request, 'base/lobby.html')
 
 def room(request):
-    return render(request, 'base/room.html')
+    room_name = request.GET.get('room', '').strip() or 'Main room'
+    user_name = request.GET.get('name', '').strip() or 'Guest'
+    return render(request, 'base/room.html', {
+        'room_name': room_name,
+        'user_name': user_name,
+    })
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..217d5ba
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1 @@
+Django>=4.2,<5.0
diff --git a/static/styles/main.css b/static/styles/main.css
index 698e4b0..b090862 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -25,6 +25,45 @@ body {
     transform: translate(-50%, -50%);
 }
 
+#join-form {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin-top: 24px;
+}
+
+.form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.form-field label {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.form-field input {
+    border: 1px solid rgba(75, 95, 172, 0.35);
+    border-radius: 5px;
+    font-size: 16px;
+    padding: 12px;
+}
+
+#join-form button {
+    background-color: rgb(75, 95, 172);
+    border: 0;
+    border-radius: 5px;
+    color: #fff;
+    cursor: pointer;
+    font-size: 16px;
+    padding: 12px;
+}
+
+#join-form button:hover {
+    background-color: rgb(61, 78, 143);
+}
+
 #video-streams {
     display: flex;
     flex-wrap: wrap;
@@ -44,4 +83,4 @@ body {
     margin: 2px;
     background-color: rgba(198,202,219,1);
 
-}
\ No newline at end of file
+}