Add lobby room join form

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 %}
+{% endblock content %}

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>

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.

base/urls.py

@@ -3,5 +3,5 @@
 
 urlpatterns = [
     path("", views.lobby),
-    path("room/", views.room),
+    path("room/", views.room, name="room"),
 ]

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,
+    })

requirements.txt

@@ -0,0 +1 @@
+Django>=4.2,<5.0

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);
 
-}
+}