User comments

templates/posts/comments/list.html

@@ -7,12 +7,27 @@
               hx-target="#form-messages"
               hx-swap="innerHTML"
               class="space-y-4">
-            <input type="hidden" name="idempotency_key" value="{{ idempotency_key }}"/>
+            <input type="hidden" name="idempotency_key" value="{{ idempotency_key }}" />
+            {% if session_user_id.is_some() %}
+                <input type="hidden"
+                       name="user_id"
+                       value="{{ session_user_id.as_ref().unwrap() }}" />
+            {% endif %}
             <div>
-                <input type="text"
-                       name="author"
-                       placeholder="Your name (optional)"
-                       class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                {% if session_username.is_none() %}
+                    <input type="text"
+                           name="author"
+                           placeholder="Your name (optional)"
+                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                {% else %}
+                    <input type="text"
+                           name="author"
+                           value="{{ session_username.as_ref().unwrap() }}"
+                           readonly
+                           disabled
+                           class="w-full px-4 py-2 border border-gray-200 rounded-md bg-gray-50 text-gray-600 cursor-not-allowed">
+                    <p class="text-sm text-gray-500 mt-1">You are authenticated.</p>
+                {% endif %}
             </div>
             <div>
                 <textarea name="content"
@@ -29,42 +44,41 @@
         </form>
     </div>
     {% block comments %}
-    {% if comments.is_empty() %}
-    <div id="comments-list" class="text-center py-8 text-gray-500">
-        <svg class="w-12 h-12 mx-auto mb-3 text-gray-400"
-             fill="none"
-             viewBox="0 0 24 24"
-             stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
-        </svg>
-        <p>No comments yet. Be the first to comment!</p>
-    </div>
-    {% else %}
-    {% let post_id = comments[0].post_id %}
-    <div id="comments-list" class="space-y-4">
-        {% for comment in comments %}
-        {% include "posts/comments/card.html" %}
-        {% endfor %}
-        <div id="load-more-comments" class="text-center mt-6">
-            {% if current_page < max_page %}
-            <div class="flex flex-col items-center space-y-6">
-                <button hx-get="/posts/{{ post_id }}/comments?page={{ current_page + 1 }}"
-                        hx-target="#load-more-comments"
-                        hx-swap="outerHTML"
-                        hx-indicator="#comment-indicator"
-                        class="text-center bg-gray-200 text-gray-700 hover:bg-gray-300 font-medium py-2 px-6 rounded-md transition-colors">
-                    Load more comments
-                </button>
-                <span id="comment-indicator" class="htmx-indicator">
+        {% if comments.is_empty() %}
+            <div id="comments-list" class="text-center py-8 text-gray-500">
+                <svg class="w-12 h-12 mx-auto mb-3 text-gray-400"
+                     fill="none"
+                     viewBox="0 0 24 24"
+                     stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                </svg>
+                <p>No comments yet. Be the first to comment!</p>
+            </div>
+        {% else %}
+            {% let post_id = comments[0].post_id %}
+            <div id="comments-list" class="space-y-4">
+                {% for comment in comments %}
+                    {% include "posts/comments/card.html" %}
+                {% endfor %}
+                <div id="load-more-comments" class="text-center mt-6">
+                    {% if current_page < max_page %}
+                        <div class="flex flex-col items-center space-y-6">
+                            <button hx-get="/posts/{{ post_id }}/comments?page={{ current_page + 1 }}"
+                                    hx-target="#load-more-comments"
+                                    hx-swap="outerHTML"
+                                    hx-indicator="#comment-indicator"
+                                    class="text-center bg-gray-200 text-gray-700 hover:bg-gray-300 font-medium py-2 px-6 rounded-md transition-colors">
+                                Load more comments
+                            </button>
+                            <span id="comment-indicator" class="htmx-indicator">
                                 {% call macros::spinner(class="text-gray-300 w-6 h-6", highlight_class="text-gray-700", size=24) %}
                                 </span>
-            </div>
-            {% else %}
-            <p class="text-gray-600">No more comments. Check back later for more!</p>
+                            </div>
+                        {% else %}
+                            <p class="text-gray-600">No more comments. Check back later for more!</p>
+                        {% endif %}
+                    </div>
+                </div>
             {% endif %}
         </div>
-    </div>
-    {% endif %}
-</div>
-{% endblock %}
+    {% endblock %}