Challenge exception-handling / clientside prize validation (#11769)

* fix: added client-side validation for challenge prizes

This commit aims to solve the issue #11765 by adding client-side 
validation for the challenge prize. This way, a user is unable to create 
a challenge if the prize is higher than what they can afford. Also, the 
loading property is reset to false after fetching the challenge, however 
this won't work if the request isn't successful.

* style: make validation conditional clearer

* fix: add exception handling when doing server requests.

This commit adds a basic try/catch block for handling server-side 
errors, and successfully enables the submit button if something failed. 
This may also fix #11545, in which a server-side error, difficult to 
valide from the client, was causing the submit button to stay disabled 
until reload.

* fix: reenable prize validation

* fix: bad indentation

* fix: Enable submit button on input change

* fix: add throttling to enableSubmit event.

* fix: reenable prize client-side validation.

website/client/src/components/challenges/challengeModal.vue

@@ -16,6 +16,7 @@
           v-model="workingChallenge.name"
           type="text"
           :placeholder="$t('challengeNamePlaceholder')"
+          @keydown="enableSubmit"
         />
       </div>
       <div class="form-group">
@@ -26,6 +27,7 @@
           v-model="workingChallenge.shortName"
           type="text"
           :placeholder="$t('shortNamePlaceholder')"
+          @keydown="enableSubmit"
         />
       </div>
       <div class="form-group">
@@ -41,6 +43,7 @@
           v-model="workingChallenge.summary"
           class="summary-textarea form-control"
           :placeholder="$t('challengeSummaryPlaceholder')"
+          @keydown="enableSubmit"
         ></textarea>
       </div>
       <div class="form-group">
@@ -55,6 +58,7 @@
           v-model="workingChallenge.description"
           class="description-textarea form-control"
           :placeholder="$t('challengeDescriptionPlaceholder')"
+          @keydown="enableSubmit"
         ></textarea>
       </div>
       <div
@@ -67,6 +71,7 @@
         <select
           v-model="workingChallenge.group"
           class="form-control"
+          @change="enableSubmit"
         >
           <option
             v-for="group in groups"
@@ -119,6 +124,7 @@
                 class="custom-control-input"
                 type="checkbox"
                 :value="group.key"
+                @change="enableSubmit"
               >
               <label
                 v-once
@@ -150,6 +156,7 @@
           type="number"
           :min="minPrize"
           :max="maxPrize"
+          @change="enableSubmit"
         >
       </div>
       <div class="row footer-wrap">
@@ -266,6 +273,7 @@
 
 <script>
 import clone from 'lodash/clone';
+import throttle from 'lodash/throttle';
 
 import markdownDirective from '@/directives/markdown';
 
@@ -534,6 +542,7 @@ export default {
       if (!this.workingChallenge.description) errors.push(this.$t('descriptionRequired'));
       if (!this.workingChallenge.group) errors.push(this.$t('locationRequired'));
       if (!this.workingChallenge.categories || this.workingChallenge.categories.length === 0) errors.push(this.$t('categoiresRequired'));
+      if (this.workingChallenge.prize > this.maxPrize) errors.push(this.$t('cantAfford'));
 
       if (errors.length > 0) {
         window.alert(errors.join('\n'));
@@ -556,14 +565,20 @@ export default {
       challengeDetails.categories = serverCategories;
 
       let challenge;
-      if (this.cloning) {
+      try {
-        challenge = await this.$store.dispatch('challenges:cloneChallenge', {
+        if (this.cloning) {
-          challenge: challengeDetails,
+          challenge = await this.$store.dispatch('challenges:cloneChallenge', {
-          cloningChallengeId: this.cloningChallengeId,
+            challenge: challengeDetails,
-        });
+            cloningChallengeId: this.cloningChallengeId,
-        this.cloningChallengeId = '';
+          });
-      } else {
+          this.cloningChallengeId = '';
-        challenge = await this.$store.dispatch('challenges:createChallenge', { challenge: challengeDetails });
+        } else {
+          challenge = await this.$store.dispatch('challenges:createChallenge', { challenge: challengeDetails });
+        }
+      } catch (e) {
+        // creating the challenge failed. Most probably due to server-side errors.
+        console.error(e);
+        return;
       }
 
       // Update Group Prize
@@ -618,6 +633,12 @@ export default {
     toggleCategorySelect () {
       this.showCategorySelect = !this.showCategorySelect;
     },
+    enableSubmit: throttle(function enableSubmit () {
+      /* Enables the submit button if it was disabled */
+      if (this.loading) {
+        this.loading = false;
+      }
+    }, 250),
   },
 };
 </script>