From 17db97495e10bda30adb5c5a93ce623e3ea843c0 Mon Sep 17 00:00:00 2001 From: Kevin Chung Date: Sat, 14 Nov 2020 16:17:43 -0500 Subject: [PATCH] Rewrite the flag creation modal to be in vuejs (#1715) * Rewrite flag creation modal to VueJS * Rewrite flag edit modal to VueJS * Rewrite flag list tab in the Admin Panel challenge page to VueJS * Closes #1693 --- .../admin/assets/js/challenges/flags.js | 137 ------------- .../js/components/files/MediaLibrary.vue | 2 +- .../js/components/flags/FlagCreationForm.vue | 130 +++++++++++++ .../js/components/flags/FlagEditForm.vue | 112 +++++++++++ .../assets/js/components/flags/FlagList.vue | 150 +++++++++++++++ .../themes/admin/assets/js/pages/challenge.js | 20 +- CTFd/themes/admin/static/js/components.dev.js | 182 +++++++++++++++++- CTFd/themes/admin/static/js/components.min.js | 2 +- .../admin/static/js/pages/challenge.dev.js | 14 +- .../admin/static/js/pages/challenge.min.js | 2 +- .../admin/templates/challenges/challenge.html | 2 - .../templates/modals/challenges/flags.html | 27 +-- .../admin/templates/modals/flags/create.html | 35 ---- .../admin/templates/modals/flags/edit.html | 22 --- 14 files changed, 588 insertions(+), 249 deletions(-) delete mode 100644 CTFd/themes/admin/assets/js/challenges/flags.js create mode 100644 CTFd/themes/admin/assets/js/components/flags/FlagCreationForm.vue create mode 100644 CTFd/themes/admin/assets/js/components/flags/FlagEditForm.vue create mode 100644 CTFd/themes/admin/assets/js/components/flags/FlagList.vue delete mode 100644 CTFd/themes/admin/templates/modals/flags/create.html delete mode 100644 CTFd/themes/admin/templates/modals/flags/edit.html diff --git a/CTFd/themes/admin/assets/js/challenges/flags.js b/CTFd/themes/admin/assets/js/challenges/flags.js deleted file mode 100644 index 057e77a1..00000000 --- a/CTFd/themes/admin/assets/js/challenges/flags.js +++ /dev/null @@ -1,137 +0,0 @@ -import $ from "jquery"; -import CTFd from "core/CTFd"; -import nunjucks from "nunjucks"; -import { ezQuery } from "core/ezq"; - -export function deleteFlag(event) { - event.preventDefault(); - const flag_id = $(this).attr("flag-id"); - const row = $(this) - .parent() - .parent(); - - ezQuery({ - title: "Delete Flag", - body: "Are you sure you want to delete this flag?", - success: function() { - CTFd.fetch("/api/v1/flags/" + flag_id, { - method: "DELETE" - }) - .then(function(response) { - return response.json(); - }) - .then(function(response) { - if (response.success) { - row.remove(); - } - }); - } - }); -} - -export function addFlagModal(_event) { - $.get(CTFd.config.urlRoot + "/api/v1/flags/types", function(response) { - const data = response.data; - const flag_type_select = $("#flags-create-select"); - flag_type_select.empty(); - - let option = $(""); - flag_type_select.append(option); - - for (const key in data) { - if (data.hasOwnProperty(key)) { - option = $( - "".format(key, data[key].name) - ); - flag_type_select.append(option); - } - } - $("#flag-edit-modal").modal(); - }); - - $("#flag-edit-modal form").submit(function(event) { - event.preventDefault(); - const params = $(this).serializeJSON(true); - params["challenge"] = window.CHALLENGE_ID; - CTFd.fetch("/api/v1/flags", { - method: "POST", - credentials: "same-origin", - headers: { - Accept: "application/json", - "Content-Type": "application/json" - }, - body: JSON.stringify(params) - }) - .then(function(response) { - return response.json(); - }) - .then(function(_response) { - window.location.reload(); - }); - }); - $("#flag-edit-modal").modal(); -} - -export function editFlagModal(event) { - event.preventDefault(); - const flag_id = $(this).attr("flag-id"); - const row = $(this) - .parent() - .parent(); - - $.get(CTFd.config.urlRoot + "/api/v1/flags/" + flag_id, function(response) { - const data = response.data; - $.get(CTFd.config.urlRoot + data.templates.update, function(template_data) { - $("#edit-flags form").empty(); - $("#edit-flags form").off(); - - const template = nunjucks.compile(template_data); - $("#edit-flags form").append(template.render(data)); - - $("#edit-flags form").submit(function(event) { - event.preventDefault(); - const params = $("#edit-flags form").serializeJSON(); - - CTFd.fetch("/api/v1/flags/" + flag_id, { - method: "PATCH", - credentials: "same-origin", - headers: { - Accept: "application/json", - "Content-Type": "application/json" - }, - body: JSON.stringify(params) - }) - .then(function(response) { - return response.json(); - }) - .then(function(response) { - if (response.success) { - $(row) - .find(".flag-content") - .text(response.data.content); - $("#edit-flags").modal("toggle"); - } - }); - }); - $("#edit-flags").modal(); - }); - }); -} - -export function flagTypeSelect(event) { - event.preventDefault(); - const flag_type_name = $(this) - .find("option:selected") - .text(); - - $.get(CTFd.config.urlRoot + "/api/v1/flags/types/" + flag_type_name, function( - response - ) { - const data = response.data; - $.get(CTFd.config.urlRoot + data.templates.create, function(template_data) { - const template = nunjucks.compile(template_data); - $("#create-keys-entry-div").html(template.render()); - $("#create-keys-button-div").show(); - }); - }); -} diff --git a/CTFd/themes/admin/assets/js/components/files/MediaLibrary.vue b/CTFd/themes/admin/assets/js/components/files/MediaLibrary.vue index aac46cd3..b95b9777 100644 --- a/CTFd/themes/admin/assets/js/components/files/MediaLibrary.vue +++ b/CTFd/themes/admin/assets/js/components/files/MediaLibrary.vue @@ -1,6 +1,6 @@