Respect the spoiler flag on comments shown from user profiles

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