add edit challenge modal and api

src/api/admin/configureAPI.js

@@ -26,5 +26,23 @@ export default {
     const blob = await response.blob();
     const file = new File([blob], imgName, { type: blob.type });
     return file;
+  },
+
+  async updateChallengeConfig(challengeInfo) {
+    let bodyFormData = new FormData();
+    bodyFormData.append("name", challengeInfo.name);
+    bodyFormData.append("flag", challengeInfo.flag);
+    bodyFormData.append("hints", challengeInfo.hints);
+    bodyFormData.append("desc", challengeInfo.description);
+    bodyFormData.append("tags", challengeInfo.tags);
+    bodyFormData.append("ports", challengeInfo.ports);
+    bodyFormData.append("points", challengeInfo.points);
+    bodyFormData.append("assets", challengeInfo.assetLinks.join("::::"));
+    bodyFormData.append("additionalLinks", challengeInfo.additionalLinks.join("::::"));
+    return await axiosInstance({
+      method: "post",
+      url: `/api/config/challenge-info`,
+      data: bodyFormData,
+    });
   }
 };

src/components/ClickToAddList.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="clickToAddListContainer">
+    <transition name="fade" appear v-for="(item, index) in list" :key="index">
+      <div class="clickToAddListItem">
+        <input
+          class="editChallAssetLinkInput"
+          :value="item"
+          ref="link"
+          @keyup="$emit('valueChanged', $event.target.value, index)"
+        />
+        <img :src="cross" @click="$emit('deleteItem', index)" />
+      </div>
+    </transition>
+    <p class="addListItem" @click="addNewItem">+ Add another link</p>
+  </div>
+</template>
+<script>
+import { cross } from "../constants/images";
+export default {
+  name: "ClickToAddList",
+  props: ["list"],
+  data() {
+    return {
+      cross,
+      isCreated: false,
+    };
+  },
+  methods: {
+    addNewItem() {
+      this.list.push("");
+    },
+  },
+  updated() {
+    if (this.isCreated) this.$refs.link[this.list.length - 1].focus();
+    this.isCreated = true;
+  },
+};
+</script>

src/components/EditChallModal.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="edit-chall-modal">
+    <div class="edit-chall-modal-header">
+      <div class="heading">EDIT CHALLENGE</div>
+      <button class="modal-close-button close-cross" @click="$emit('close')">
+        <img :src="cross" />
+      </button>
+    </div>
+    <div class="edit-chall-modal-body form">
+      <p class="adFormFields">Name</p>
+      <input v-model="name" class="adminFormTitle readonly" readonly />
+      <p class="adFormFields">Flag</p>
+      <input
+        v-model="flag"
+        placeholder="Enter the Flag"
+        class="adminFormTitle"
+      />
+      <p class="adFormFields">Hints</p>
+      <textarea
+        v-model="hints"
+        placeholder="Enter the Hints to be displayed "
+      ></textarea>
+      <p class="adFormFields">Description</p>
+      <textarea
+        v-model="description"
+        placeholder="Enter the description"
+      ></textarea>
+      <p class="adFormFields">Tags</p>
+      <input
+        v-model="tags"
+        placeholder="Enter the Tags"
+        class="adminFormTitle"
+      />
+      <p class="editFormFieldNote">
+        Use four colons (::::) to separate multiple values
+      </p>
+      <div class="editChallModalFormGroup">
+        <div class="editChallModalInputGroup width65">
+          <p class="adFormFields">Ports</p>
+          <input
+            v-model="ports"
+            placeholder="Enter the ports"
+            class="adminFormTitle"
+          />
+          <p class="editFormFieldNote">
+            Use comma(,) to separate multiple values
+          </p>
+        </div>
+        <div class="editChallModalInputGroup width30">
+          <p class="adFormFields">Points</p>
+          <input
+            v-model="points"
+            placeholder="Enter the points"
+            class="adminFormTitle"
+          />
+        </div>
+      </div>
+      <p class="adFormFields">Asset Links</p>
+      <ClickToAddList
+        :list="assetLinks"
+        @addNewItem="addNewAsset"
+        @deleteItem="deleteAsset"
+        @valueChanged="assetChanged"
+      />
+      <p class="adFormFields">Additional Links</p>
+      <ClickToAddList
+        :list="additionalLinks"
+        @addNewItem="addNewAdditionalLink"
+        @deleteItem="deleteAdditionalLink"
+        @valueChanged="additionalLinkChanged"
+      />
+    </div>
+    <div class="actionButtons">
+      <button
+        class="action-cta challenge-action-btn discard-button"
+        @click="$emit('close')"
+      >
+        Discard
+      </button>
+      <Button
+        text="Save Changes"
+        variant="primary-cta"
+        :onclick="updateConfigs"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { cross } from "../constants/images";
+import configService from "../api/admin/configureAPI";
+import UploadComponent from "@/components/UploadComponent.vue";
+import ChallCard from "@/components/ChallCard.vue";
+import Button from "@/components/Button.vue";
+import ErrorBox from "@/components/ErrorBox.vue";
+import ClickToAddList from "@/components/ClickToAddList.vue";
+export default {
+  name: "PreviewModal",
+  props: ["challenge"],
+  data() {
+    return {
+      cross,
+      assetLinks: [],
+      additionalLinks: [],
+      challengeInfo: {},
+    };
+  },
+  components: {
+    Button,
+    ClickToAddList,
+  },
+  mounted() {
+    console.log(this.challenge)
+    this.challengeInfo = Object.assign({}, this.challenge);
+    this.updateChallengeInfo();
+  },
+  methods: {
+    async updateConfigs() {
+      await configService
+        .updateChallengeConfig({
+          name: this.name,
+          flag: this.flag,
+          hints: this.hints,
+          description: this.description,
+          tags: this.tags,
+          ports: this.ports,
+          points: this.points,
+          assetLinks: this.assetLinks.filter((e) => e),
+          additionalLinks: this.additionalLinks.filter((e) => e),
+        })
+        .then((res) => {
+          this.$emit("close");
+          this.$router.go();
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    addNewAsset() {
+      this.assetLinks.push("");
+    },
+    deleteAsset(index) {
+      this.assetLinks.splice(index, 1);
+    },
+    assetChanged(value, index) {
+      this.assetLinks[index] = value;
+    },
+    addNewAdditionalLink() {
+      this.additionalLinks.push("");
+    },
+    deleteAdditionalLink(index) {
+      this.additionalLinks.splice(index, 1);
+    },
+    additionalLinkChanged(value, index) {
+      this.additionalLinks[index] = value;
+    },
+    updateChallengeInfo() {
+      this.name = this.challengeInfo.name;
+      this.flag = this.challengeInfo.flag;
+      this.hints = this.challengeInfo.hints;
+      this.description = this.challengeInfo.description;
+      this.tags = this.challengeInfo.tags.join("::::");
+      this.ports = this.challengeInfo.ports.join();
+      this.points = this.challengeInfo.points;
+      this.assetLinks =
+        this.challengeInfo.assets[0] === "" ? [] : this.challengeInfo.assets;
+      this.additionalLinks =
+        this.challengeInfo.additionalLinks[0] === ""
+          ? []
+          : this.challengeInfo.additionalLinks;
+    },
+  },
+};
+</script>

src/styles/main.scss

@@ -31,3 +31,6 @@
 @import "./modules/error";
 @import "./modules/createChallModal";
 @import "./modules/notificationBox";
+@import "./modules/editChallModal";
+@import "./modules/clickToAddList"
+

src/styles/modules/_adminChallenge.scss

@@ -40,6 +40,21 @@
             color: $theme-color-black19;
         }
 
+        .category {
+            text-align: center;
+            vertical-align: middle;
+            background: $theme-color-violet;
+            border-radius: 0.125rem;
+            font-family: $secondary-font-family;
+
+            font-weight: bold;
+            font-size: 0.875rem;
+            line-height: 1rem;
+            color: $theme-color-white;
+            padding: 0.25rem 0.625rem;
+            margin-left: 1.25rem;
+        }
+
         .status {
             margin-left: auto;
             font-family: $primary-font-family;
@@ -158,6 +173,25 @@
         width: 7.5rem;
         margin: 0;
     }
+
+    .challenge-links{
+        text-align: left;
+        display: flex;
+        flex-direction: column;
+        a{
+            color:$theme-color-violet;
+        }
+    }
+
+    .link-heading{
+        font-size: 1rem;
+        font-family: $primary-font-family;
+        font-weight: bold;
+        line-height: 1rem;
+        color: $theme-color-black19;
+        margin-block-start: 1em;
+        margin-block-end: 0.3rem;
+    }
 }
 
 .adminHeadingName {

src/styles/modules/_clickToAddList.scss

@@ -0,0 +1,40 @@
+.clickToAddListContainer{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    .clickToAddListItem{
+        margin-bottom: 0.375rem;
+        box-sizing: border-box;
+        height: 2rem;
+        border-radius: 0.3125rem;
+        border: 1px solid $theme-color-grey-high-transp;
+        @extend %font-style-basic;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+        input{
+            border: 0;
+            height: 85%;
+            width: 85%;
+        }
+        input:focus{
+            border: 0;
+            outline: 0;
+        }
+        img{
+            height: 32%;
+            cursor: pointer;
+        }
+    }
+    .addListItem{
+        font-size: 0.875rem;
+        cursor: pointer;
+        color: $theme-color-dark-orange;
+        text-align: left;
+    }
+    .addListItem:hover{text-decoration: underline;
+    }
+}

src/styles/modules/_createChallModal.scss

@@ -1,5 +1,8 @@
 .create-chall-modal {
-    margin: 15rem 35%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
     background-color: white;
     display: flex;
     flex-direction: column;