Add share links UI to challenge.html (#59)

* Add share links UI to challenge.html * Fix lints and rebuild
CTFd · Jan 4, 2024 · 08dad21 · 08dad21
1 parent 0a73a09
commit 08dad21
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 7 deletions.
diff --git a/assets/js/challenges.js b/assets/js/challenges.js
@@ -3,7 +3,7 @@ import dayjs from "dayjs";
 
 import CTFd from "./index";
 
-import { Modal, Tab } from "bootstrap";
+import { Modal, Tab, Tooltip } from "bootstrap";
 import highlight from "./theme/highlight";
 
 function addTargetBlank(html) {
@@ -62,6 +62,7 @@ Alpine.data("Challenge", () => ({
   tab: null,
   solves: [],
   response: null,
+  share_url: null,
 
   async init() {
     highlight();
@@ -134,6 +135,31 @@ Alpine.data("Challenge", () => ({
     modal.hide();
   },
 
+  async getShareUrl() {
+    let body = {
+      type: "solve",
+      challenge_id: this.id,
+    };
+    const response = await CTFd.fetch("/api/v1/shares", {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
+    const data = await response.json();
+    const url = data["data"]["url"];
+    this.share_url = url;
+  },
+
+  copyShareUrl() {
+    navigator.clipboard.writeText(this.share_url);
+    let t = Tooltip.getOrCreateInstance(this.$el);
+    t.enable();
+    t.show();
+    setTimeout(() => {
+      t.hide();
+      t.disable();
+    }, 2000);
+  },
+
   async submitChallenge() {
     this.response = await CTFd.pages.challenge.submitChallenge(
       this.id,

diff --git a/static/assets/challenges.897809bc.js b/static/assets/challenges.897809bc.js
diff --git a/static/assets/challenges.d8a7ea63.js b/static/assets/challenges.d8a7ea63.js
diff --git a/static/manifest.json b/static/manifest.json
@@ -30,7 +30,7 @@
     ]
   },
   "assets/js/challenges.js": {
-    "file": "assets/challenges.897809bc.js",
+    "file": "assets/challenges.d8a7ea63.js",
     "src": "assets/js/challenges.js",
     "isEntry": true,
     "imports": [

diff --git a/templates/challenge.html b/templates/challenge.html
@@ -162,10 +162,33 @@ <h3 class="challenge-value text-center">
                       }" role="alert"
                   >
                     <strong x-text="response.data.message"></strong>
-                    <div x-show="(response.data.status == 'correct' || response.data.status == 'already_solved') && getNextId()">
-                      <button @click="nextChallenge()" class="btn btn-info mt-3">
-                        {% trans %}Next Challenge{% endtrans %}
-                      </button>
+                    <div x-show="(response.data.status == 'correct' || response.data.status == 'already_solved')">
+                      <div x-show="getNextId()">
+                        <button @click="nextChallenge()" class="btn btn-info mt-3">
+                          {% trans %}Next Challenge{% endtrans %}
+                        </button>
+                      </div>
+                      {% if Configs.social_shares != false %}
+                      <div>
+                        <button x-show="!share_url" @click="getShareUrl()" class="btn btn-sm btn-outline-info mt-3">
+                          {% trans %}Share{% endtrans %}
+                        </button>
+                        <div class="btn-group mt-3" role="group" x-show="share_url">
+                          <button type="button" class="btn btn-sm btn-outline-secondary" @click="copyShareUrl()" data-bs-toggle="tooltip" data-bs-title="Copied!">
+                            <i class="fa-solid fa-copy"></i>
+                          </button>
+                          <a :href="'https://twitter.com/intent/tweet?url=' + encodeURIComponent(share_url)" role="button" class="btn btn-sm btn-outline-secondary" target="_blank">
+                            <i class="fa-brands fa-twitter"></i>
+                          </a>
+                          <a :href="'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(share_url)" role="button" class="btn btn-sm btn-outline-secondary" target="_blank">
+                            <i class="fa-brands fa-facebook-f"></i>
+                          </a>
+                          <a :href="'http://www.linkedin.com/shareArticle?url=' + encodeURIComponent(share_url)" role="button" class="btn btn-sm btn-outline-secondary" target="_blank">
+                            <i class="fa-brands fa-linkedin-in"></i>
+                          </a>
+                        </div>
+                        {% endif %}
+                      </div>
                     </div>
                   </div>
                 </template>