Improve rendering long submisisons admin panel (#2338)

* Truncate submissions in the Admin Panel but have some ways to show them fully expanded and add a copy to clipboard button
* Closes #2243

CTFd/themes/admin/assets/js/pages/submissions.js

@@ -61,7 +61,55 @@ function deleteSelectedSubmissions(_event) {
   });
 }
 
+function showFlagsToggle(_event) {
+  const urlParams = new URLSearchParams(window.location.search);
+  if (urlParams.has("full")) {
+    urlParams.delete("full");
+  } else {
+    urlParams.set("full", "true");
+  }
+  window.location.href = `${window.location.pathname}?${urlParams.toString()}`;
+}
+
+function showFlag(event) {
+  let target = $(event.currentTarget);
+  let eye = target.find("i");
+  let flag = target.parent().find("pre");
+  if (!flag.hasClass("full-flag")) {
+    flag.text(flag.attr("title"));
+    flag.addClass("full-flag");
+    eye.addClass("fa-eye-slash");
+    eye.removeClass("fa-eye");
+  } else {
+    flag.text(flag.attr("title").substring(0, 42) + "...");
+    flag.removeClass("full-flag");
+    eye.addClass("fa-eye");
+    eye.removeClass("fa-eye-slash");
+  }
+}
+
+function copyFlag(event) {
+  let target = $(event.currentTarget);
+  let flag = target.parent().find("pre");
+  let text = flag.attr("title");
+  navigator.clipboard.writeText(text);
+
+  $(event.currentTarget).tooltip({
+    title: "Copied!",
+    trigger: "manual"
+  });
+  $(event.currentTarget).tooltip("show");
+
+  setTimeout(function() {
+    $(event.currentTarget).tooltip("hide");
+  }, 1500);
+}
+
 $(() => {
+  $("#show-full-flags-button").click(showFlagsToggle);
+  $("#show-short-flags-button").click(showFlagsToggle);
+  $(".show-flag").click(showFlag);
+  $(".copy-flag").click(copyFlag);
   $(".delete-correct-submission").click(deleteCorrectSubmission);
   $("#submission-delete-button").click(deleteSelectedSubmissions);
 });

CTFd/themes/admin/templates/submissions.html

@@ -48,7 +48,16 @@
 		<div class="col-md-12">
 			<div class="float-right pb-3">
 				<div class="btn-group" role="group">
-					<button type="button" class="btn btn-outline-danger" id="submission-delete-button">
+					{% if request.args.get("full") %}
+					<button type="button" class="btn btn-outline-primary" data-toggle="tooltip" title="Show truncated flags" id="show-short-flags-button">
+						<i class="btn-fa far fa-flag"></i>
+					</button>
+					{% else %}
+					<button type="button" class="btn btn-outline-primary" data-toggle="tooltip" title="Show full flags" id="show-full-flags-button">
+						<i class="btn-fa fas fa-flag"></i>
+					</button>
+					{% endif %}
+					<button type="button" class="btn btn-outline-danger" data-toggle="tooltip" title="Delete selected submissions" id="submission-delete-button">
 						<i class="btn-fa fas fa-trash-alt"></i>
 					</button>
 				</div>
@@ -109,7 +118,19 @@
 							{{ sub.type }}
 						</td>
 						<td class="flag" id="{{ sub.id }}">
-							<pre class="mb-0">{{ sub.provided }}</pre>
+							<button class="btn btn-link p-0 float-left copy-flag" type="button">
+								<i class="fas fa-clipboard"></i>
+							</button>
+							{% if request.args.get('full') %}
+								<pre class="mb-0 pl-2" title="{{ sub.provided }}">{{ sub.provided }}</pre>
+							{% else %}
+								<pre class="mb-0 pl-2 float-left" title="{{ sub.provided }}">{{ sub.provided | truncate(45, True) }}</pre>
+								{% if sub.provided | length > 50 %}
+									<button class="btn btn-link p-0 pl-1 float-left show-flag">
+										<i class="fas fa-eye"></i>
+									</button>
+								{% endif %}
+							{% endif %}
 						</td>
 						<td class="text-center solve-time">
 							<span data-time="{{ sub.date | isoformat }}"></span>