Merge pull request #223 from aau-network-security/hotfix/empty-profil…

…es-#000 Gave user feed back when no profiles are available
aau-network-security · Sep 8, 2021 · 23b729d · 23b729d
2 parents 7730d11 + ac8f69e
commit 23b729d
Showing 1 changed file with 61 additions and 20 deletions.
diff --git a/client/src/Pages/Profiles.vue b/client/src/Pages/Profiles.vue
@@ -3,9 +3,14 @@
     <Navbar/>
     <div class="container" style="margin-top: 40px">
       <b-row style="margin-bottom: 20px">
-        <h3 class="float-left font-weight-bold text-gray-800 mb-1">Available Challenge Profiles</h3>
+        <h3 class="float-left font-weight-bold text-gray-800 mb-1">
+          Available Challenge Profiles
+          <b-icon id="create-chal-info" class="info-icon" icon="info-circle"></b-icon>
+          <b-tooltip target="create-chal-info">You can create challenge profiles from the <i>Challenges</i> page. Select your desired challenges, choose a profile name and hit "Save Profile". Your new profile will displayed on this page.</b-tooltip>
+        </h3>
       </b-row>
-      <b-row>
+      <template v-if="!noProfiles && !loaderIsActive">
+        <b-row>
         <div class="col-2 customscroll">
           <div class="nav flex-column nav-pills sticky-top" id="profiles" role="tablist"
                aria-orientation="vertical">
@@ -342,6 +347,27 @@
           </div>
         </div>
       </b-row>
+      </template>
+      <template v-else-if="loaderIsActive">
+        <div v-if="true" class="alert myalert-loading alert-dismissible">
+          <div class="d-inline mr-2">
+            <img class="loading-logo" src="../assets/bluelogo.png" width="50" height="50">
+          </div>
+          <div class="d-inline mr-2">Loading profiles</div>
+          <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="top: 13px;">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+      </template>
+      <template v-else-if="noProfiles">
+        <b-row class="text-center">
+          <b-col md="12">
+            <b-alert variant="danger" show>
+              No profiles are currently available. To add a challenge profile, please visit the challenges page. You can select the challenges you like for your profile and afterwards save it.
+            </b-alert>
+          </b-col>
+        </b-row>
+      </template>
     </div>
     <Footer/>
   </div>
@@ -371,6 +397,8 @@ export default {
       areYouSure: false,
       showSelected: true,
       secretChallenges: null,
+      loaderIsActive: true,
+      noProfiles: false,
     }
   },
   created: function () {
@@ -427,6 +455,11 @@ export default {
           that.alert = "Profile \"" + that.profileForUpdate.name + "\" successfully deleted"
           that.setProfileForUpdate(that.profiles[0])
           that.showAlert("success")
+          setTimeout(function (){
+            if(!that.profiles.length){
+              that.noProfiles = true
+            }
+          }.bind(that), 5000)
         }
       });
     },
@@ -519,25 +552,26 @@ export default {
     },
     setProfileForUpdate: function(profile) {
       //window.console.log("Setting profileForUpdate to", profile)
-      this.areYouSure = false
-      const that = this
-      let categories = JSON.parse(JSON.stringify(that.categories)) // Creates a copy of this.categories
-      let challenges = JSON.parse(JSON.stringify(profile.challenges)) // Creates a copy of this.categories
-      let name = JSON.parse(JSON.stringify(profile.name))
-      let secret = JSON.parse(JSON.stringify(profile.secret))
-      this.profileForUpdate = []
-      this.profileForUpdate = {name: name, secret: secret, challenges: challenges, categories: categories}
-      this.profileForUpdate.challenges.forEach(function(pchallenge){
-        that.profileForUpdate.categories.forEach(function(category){
-          let index = category.challenges.findIndex(obj => obj['name'] === pchallenge.name)
-          if (index >= 0) {
-            //window.console.log("Found", pchallenge.name, "in category",category,"removing them from Challenges not in profile")
-            category.challenges = that.removeItem(category.challenges, 'value', pchallenge.tag)
-          }
+      if(this.profiles.length) {
+        this.areYouSure = false
+        const that = this
+        let categories = JSON.parse(JSON.stringify(that.categories)) // Creates a copy of this.categories
+        let challenges = JSON.parse(JSON.stringify(profile.challenges)) // Creates a copy of this.categories
+        let name = JSON.parse(JSON.stringify(profile.name))
+        let secret = JSON.parse(JSON.stringify(profile.secret))
+        this.profileForUpdate = []
+        this.profileForUpdate = {name: name, secret: secret, challenges: challenges, categories: categories}
+        this.profileForUpdate.challenges.forEach(function (pchallenge) {
+          that.profileForUpdate.categories.forEach(function (category) {
+            let index = category.challenges.findIndex(obj => obj['name'] === pchallenge.name)
+            if (index >= 0) {
+              //window.console.log("Found", pchallenge.name, "in category",category,"removing them from Challenges not in profile")
+              category.challenges = that.removeItem(category.challenges, 'value', pchallenge.tag)
+            }
+          })
         })
-      })
-      this.checkIfUpdateAvailable()
-     // window.console.log("ProfileForUpdate is now", this.profileForUpdate)
+        this.checkIfUpdateAvailable()
+      }
     },
     getProfiles: function () {
       const that = this
@@ -571,6 +605,13 @@ export default {
           })
         })
         that.setProfileForUpdate(that.profiles[0])
+        if (!that.profiles.length) {
+          that.noProfiles = true
+        }
+        setTimeout(function (){
+          that.loaderIsActive = false
+        }.bind(that), 1000)
+
       })
     },
     getCategories: function () {