Squashed 'CTFd/themes/core-beta/' changes from a3558313..08dad215

08dad215 Add share links UI to challenge.html (CTFd#59)
0a73a090 make notifications fade in and out (CTFd#60)

git-subtree-dir: CTFd/themes/core-beta
git-subtree-split: 08dad215be93f8af7622387ab24b9dde01f56fb1

Author: ColdHeat

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,

static/assets/challenges.897809bc.js

@@ -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": [

static/assets/challenges.d8a7ea63.js

@@ -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>

static/manifest.json

@@ -14,7 +14,7 @@
 
 
 <div x-data>
-  <div class="modal" x-ref="modal" tabindex="-1">
+  <div class="modal fade" x-ref="modal" tabindex="-1">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
@@ -30,4 +30,4 @@ <h5 class="modal-title" x-text="$store.modal.title"></h5>
       </div>
     </div>
   </div>
-</div>
+</div>