Respect the spoiler flag on comments shown from user profiles (#178)

Comments marked as spoilers were rendered hidden on the crackme page but
shown in full on the author's profile Comments tab, leaking the content the
spoiler mark is meant to conceal (#148). Wrap spoiler comments on the profile
page with the same click-to-reveal behavior used on the crackme page.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: xusheng6

templates/user/read.html

@@ -9,7 +9,29 @@
         document.getElementById(id2).style.display = 'none';
         document.getElementById(id1).style.display = 'block';
     }
+
+    function revealSpoiler(id) {
+        var hidden = document.getElementById('spoiler-hidden-' + id);
+        var content = document.getElementById('spoiler-content-' + id);
+        if (hidden && content) {
+            hidden.style.display = 'none';
+            content.style.display = 'inline';
+        }
+    }
 </script>
+<style>
+    .spoiler-hidden {
+        background-color: #333;
+        color: #333;
+        padding: 2px 8px;
+        border-radius: 3px;
+        cursor: pointer;
+        user-select: none;
+    }
+    .spoiler-hidden:hover {
+        background-color: #555;
+    }
+</style>
 <div class="container grid-lg wrapper">
     <h3><a href="">{{ username }}</a>'s profile</h3>
     <div class="columns col-12 ">
@@ -131,7 +153,13 @@ <h3>Comments</h3>
                         {% for comment in comments %}
                         <tr class="text-center">
                             <td><a href="/crackme/{{ comment.crackmehexid }}">{{ comment.crackmename }}</a></td>
-                            <td> <span style="white-space: pre-line">{{ comment.info }}</span> </td>
+                            <td>
+                                {% if comment.spoiler %}
+                                <span id="spoiler-hidden-{{ comment._id }}" class="spoiler-hidden" onclick="revealSpoiler('{{ comment._id }}')">[Click to reveal]</span><span id="spoiler-content-{{ comment._id }}" style="display: none; white-space: pre-line">{{ comment.info }}</span>
+                                {% else %}
+                                <span style="white-space: pre-line">{{ comment.info }}</span>
+                                {% endif %}
+                            </td>
                             <td>{{ comment.created_at|PRETTYTIME }}</td>
                         </tr>
                         {% endfor %}

tests/test_routes.py

@@ -90,3 +90,48 @@ def test_existing_user_profile_loads(client, alice):
 
 def test_missing_user_profile_is_404(client):
     assert client.get('/user/missing').status_code == 404
+
+
+def test_spoiler_comment_is_hidden_on_user_profile(client, db, alice):
+    from bson import ObjectId
+    from datetime import datetime, timezone
+
+    secret = 'the flag is 1234'
+    db.comment.insert_one({
+        '_id': ObjectId(),
+        'info': secret,
+        'author': 'alice',
+        'crackmehexid': 'deadbeef',
+        'crackmename': 'Test Crackme',
+        'created_at': datetime.now(timezone.utc),
+        'visible': True,
+        'deleted': False,
+        'spoiler': True,
+    })
+
+    html = client.get('/user/alice').get_data(as_text=True)
+    # The spoiler content is present but wrapped so it is hidden by default.
+    assert '[Click to reveal]' in html
+    assert 'spoiler-content-' in html
+    assert 'revealSpoiler(' in html
+
+
+def test_non_spoiler_comment_is_shown_on_user_profile(client, db, alice):
+    from bson import ObjectId
+    from datetime import datetime, timezone
+
+    db.comment.insert_one({
+        '_id': ObjectId(),
+        'info': 'just a normal comment',
+        'author': 'alice',
+        'crackmehexid': 'deadbeef',
+        'crackmename': 'Test Crackme',
+        'created_at': datetime.now(timezone.utc),
+        'visible': True,
+        'deleted': False,
+        'spoiler': False,
+    })
+
+    html = client.get('/user/alice').get_data(as_text=True)
+    assert 'just a normal comment' in html
+    assert '[Click to reveal]' not in html