Raw view improvements, copy snippet button, hide edit panel. #120

CHANGELOG.rst

@@ -1,6 +1,14 @@
 Changelog
 =========
 
+(development)
+-------------
+
+- "Edit Snippet" panel is now hidden by default to remove visual noise.
+- Added a dedicated "Copy Snippet" button to copy the content to the clipboard.
+- Added "View Raw" option to optionally render the 'raw' snippet content with a
+  template rather served as plain text. This was added to hinder abuse.
+
 3.1 (2019-05-16)
 ----------------
 

client/js/dpaste.js

@@ -102,12 +102,43 @@ lines.forEach(function(el) {
 // Copy URL to Clipboard
 // -----------------------------------------------------------------------------
 const clipboardLink = document.getElementById('copyToClipboard');
-const copyToClipboardField = document.getElementById('copyToClipboardField');
+const clipboardField = document.getElementById('copyToClipboardField');
 
-if (clipboardLink && copyToClipboardField) {
+if (clipboardLink && clipboardField) {
   clipboardLink.onclick = function(e) {
     e.preventDefault();
-    copyToClipboardField.select();
+    clipboardField.select();
     document.execCommand('Copy');
   };
 }
+
+// -----------------------------------------------------------------------------
+// Copy Snippet content to Clipboard
+// -----------------------------------------------------------------------------
+const snippetClipboardLink = document.getElementById('copySnippetToClipboard');
+const snippetClipboardField = document.getElementById('copySnippetSource');
+const snippetClipboardConfirm = document.getElementById('copy');
+
+if (snippetClipboardLink && snippetClipboardField) {
+  snippetClipboardLink.onclick = function(e) {
+    e.preventDefault();
+    snippetClipboardField.select();
+    document.execCommand('Copy');
+    snippetClipboardConfirm.style.maxHeight = '80px';
+    window.scrollTo(0, 0);
+  };
+}
+
+const editSnippetLink = document.getElementById('editSnippet');
+const editSnippetForm = document.getElementById('edit');
+
+if (editSnippetLink && editSnippetForm) {
+  editSnippetLink.onclick = function(e) {
+    e.preventDefault();
+    editSnippetForm.style.display = 'block';
+    window.scrollTo(
+        editSnippetForm.getBoundingClientRect().x,
+        editSnippetForm.getBoundingClientRect().y
+    );
+  };
+}

client/scss/components/_form.scss

@@ -5,6 +5,11 @@
   line-height: 17px;
 }
 
+// Edit panel in details view, not shown by default.
+#edit {
+  display: none;
+}
+
 .snippet-form {
   background-color: $bgColor;
 

client/scss/components/_header.scss

@@ -133,3 +133,10 @@ ul#snippetOptions {
   font-size: 14px;
   font-weight: $baseFontDemiBold;
 }
+
+// Textarea that holds the unaltered snippet content to be copied to clipboard
+#copySnippetSource {
+  width: 0;
+  position: absolute;
+  left: -9999px;
+}

dpaste/apps.py

@@ -77,6 +77,10 @@ class dpasteAppConfig(AppConfig):
     # Disable "view Raw" mode.
     RAW_MODE_ENABLED = True
 
+    # If enabled, the "raw View" mode will display the snippet content as
+    # plain text rather rendered in a template.
+    RAW_MODE_PLAIN_TEXT = True
+
     # Lexers which have wordwrap enabled by default
     LEXER_WORDWRAP = ('rst',)
 

dpaste/templates/dpaste/details.html

@@ -36,6 +36,9 @@
     {% if raw_mode and snippet.expire_type != 3 %}
       <li><a href="{% url "snippet_details_raw" snippet.secret_id %}">{% trans "View Raw" %}</a></li>
     {% endif %}
+    <textarea id="copySnippetSource">{{ snippet.content }}</textarea>
+    <li><a href="#copy" id="copySnippetToClipboard">{% trans "Copy Snippet" %}</a></li>
+    <li><a href="#edit" id="editSnippet">{% trans "Edit Snippet" %}</a></li>
     {% if snippet.lexer != 'text' %}
       <li>
         <label for="wordwrap">
@@ -45,6 +48,12 @@
     {% endif %}
   </ul>
 
+  <div id="copy" class="confirm-modal">
+    <form method="POST" action="">
+      {% trans "Snippet content copied to clipboard." %}
+    </form>
+  </div>
+
   <div id="delete" class="confirm-modal">
     <form method="POST" action="">
       {% csrf_token %}
@@ -77,9 +86,11 @@
 
   {{ snippet.highlight }}
 
-  <header class="sub">
-    <h2>{% trans "Edit this Snippet" %}</h2>
-  </header>
+  <div id="edit">
+    <header class="sub">
+      <h2>{% trans "Edit this Snippet" %}</h2>
+    </header>
 
-  {% include "dpaste/includes/form.html" %}
+    {% include "dpaste/includes/form.html" %}
+  </div>
 {% endblock %}

dpaste/templates/dpaste/includes/form.html

@@ -37,3 +37,4 @@
     {{ form.content }}
   </p>
 </form>
+

dpaste/templates/dpaste/raw.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>{{ snippet.secret_id }}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <meta name="robots" content="noindex, nofollow"/>
+</head>
+<body>
+
+<pre>{{ object.content }}</pre>
+
+</body>
+</html>

dpaste/views.py

@@ -152,6 +152,8 @@ class SnippetRawView(SnippetDetailView):
     Display the raw content of a snippet
     """
 
+    template_name = 'dpaste/raw.html'
+
     def dispatch(self, request, *args, **kwargs):
         if not config.RAW_MODE_ENABLED:
             return HttpResponseForbidden(
@@ -161,13 +163,20 @@ class SnippetRawView(SnippetDetailView):
             )
         return super(SnippetRawView, self).dispatch(request, *args, **kwargs)
 
-    def render_to_response(self, context, **response_kwargs):
+    def render_plain_text(self, context, **response_kwargs):
         snippet = self.get_object()
         response = HttpResponse(snippet.content)
         response['Content-Type'] = 'text/plain;charset=UTF-8'
         response['X-Content-Type-Options'] = 'nosniff'
         return response
 
+    def render_to_response(self, context, **response_kwargs):
+        if config.RAW_MODE_PLAIN_TEXT:
+            return self.render_plain_text(config, **response_kwargs)
+        return super(SnippetRawView, self).render_to_response(
+            context, **response_kwargs
+        )
+
 
 class SnippetHistory(TemplateView):
     """