From 669461f9d3d5799ac448c27ca147a3b28077f78b Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Fri, 8 Dec 2023 01:42:20 +0100
Subject: [PATCH 01/30] feat(WikiSettings): Add QuestyCaptcha card to Wiki
 Settings

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 119 ++++++++++++++++++
 .../Pages/ManageWiki/Tabs/ManageWiki.vue      |   7 ++
 2 files changed, 126 insertions(+)
 create mode 100644 src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
new file mode 100644
index 00000000..8ce8d52e
--- /dev/null
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -0,0 +1,119 @@
+<template>
+  <v-card>
+    <v-card-title>Additional Spam Protection</v-card-title>
+    <v-card-text>
+      QuestyCaptcha offers an extra layer of protection against spam accounts. During account creation, users will have to answer a question, which can be defined in settings. For more information on QuestyCaptcha, please visit the documentation page
+    </v-card-text>
+    <v-col class="checkbox">
+      <v-checkbox label="Activate spam protection"></v-checkbox>
+    </v-col>
+<!--    Setting Panel-->
+    <v-expansion-panels>
+      <v-expansion-panel>
+        <v-expansion-panel-header>
+          <strong>SETTINGS</strong>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <strong>Guidelines for creating questions and answers:</strong><br/>
+          <ul>
+            <li>Keep in mind that users have a wide variety of knowledge and abilities. We therefore recommend three questions at minimum, each requiring different abilities or knowledge.</li>
+            <li>Consider cultural bias. Use questions that rely on universal knowledge or knowledge related to your wiki.</li>
+            <li>Keep the answers short and simple. Ideally, try to use questions with only one possible answer.</li>
+          </ul>
+          <div class="pt-10" v-for="(questy, index) in defaultQuestions" :key="index">
+            Question
+            <v-text-field
+              v-model="questy.question"
+              outlined
+              append-outer-icon="mdi-delete-outline"
+              @click:append-outer="removeQuestion(index)"
+            ></v-text-field>
+            Answer
+            <v-combobox
+              v-model="questy.answer"
+              :items="questy.answer"
+              multiple
+              outlined
+              hide-selected
+            >
+              <template v-slot:selection="{ item }" >
+                <v-chip
+                  :input-value="selected"
+                >
+                  <span class="pr-1">
+                    {{ item }}
+                  </span>
+                  <v-icon
+                    small
+                    @click="removeAnswer(questy, item)"
+                  >
+                    mdi-close-circle
+                  </v-icon>
+                </v-chip>
+              </template>
+            </v-combobox>
+          </div>
+<!--          Buttons-->
+          <div class="d-flex pb-12 pt-3">
+            <v-btn @click="addQuestion" elevation=0 plain class="ml-auto">+ ADD QUESTION</v-btn>
+          </div>
+          <div>
+            <v-btn @click="saveQuestions" color="primary" width="100%">SAVE QUESTIONs</v-btn>
+          </div>
+          <div class="pt-4">
+            <v-btn @click="recoverDefaultQuestions" width="100%">RECOVER DEFAULT QUESTIONS</v-btn>
+          </div>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'QuestyCaptcha',
+  data () {
+    return {
+      defaultQuestions: [
+        {
+          question: 'How many vowels are in this question?',
+          answers: ['12', 'twelve']
+        },
+        {
+          question: 'What is the chemical formula of water',
+          answers: ['H2O']
+        },
+        {
+          question: '2 + 4 = ?',
+          answers: ['6', 'six']
+        }
+      ]
+    }
+  },
+  methods: {
+    removeAnswer (question, answer) {
+      const index = question.answers.indexOf(answer)
+      if (index !== -1) {
+        question.answers.splice(index, 1)
+      }
+    },
+    removeQuestion (index) {
+      this.defaultQuestions.splice(index, 1)
+    },
+    addQuestion () {
+      this.defaultQuestions.push({
+        question: '',
+        answers: ''
+      })
+    },
+    saveQuestions () {},
+    recoverDefaultQuestions () {}
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.checkbox {
+  padding-left: 20px;
+}
+</style>
diff --git a/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue b/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
index baaa7773..0ba3381f 100644
--- a/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
+++ b/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
@@ -19,6 +19,11 @@
               <Logo :wikiId="this.wikiId"/>
             </v-col>
           </v-row>
+          <v-row>
+            <v-col>
+              <QuestyCaptcha/>
+            </v-col>
+          </v-row>
         </v-col>
         <!--Col 2-->
         <v-col>
@@ -62,10 +67,12 @@ import Skin from '~/components/Pages/ManageWiki/Cards/Skin'
 import Registration from '~/components/Pages/ManageWiki/Cards/Registration'
 import Wikibase from '~/components/Pages/ManageWiki/Cards/Wikibase'
 import Delete from '~/components/Pages/ManageWiki/Cards/Delete'
+import QuestyCaptcha from '../Cards/QuestyCaptcha'
 
 export default {
   name: 'ManageWiki',
   components: {
+    QuestyCaptcha,
     Details,
     Logo,
     Skin,

From cb2c71f0b64ec192400c61151b2c39b220763f69 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Tue, 19 Dec 2023 13:07:57 +0100
Subject: [PATCH 02/30] fix: remove dropdown arrow from combobox

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 60 ++++++++++++++++---
 1 file changed, 53 insertions(+), 7 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 8ce8d52e..2c3ed28c 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -23,18 +23,23 @@
           <div class="pt-10" v-for="(questy, index) in defaultQuestions" :key="index">
             Question
             <v-text-field
+              ref="question"
               v-model="questy.question"
               outlined
               append-outer-icon="mdi-delete-outline"
+              :rules="[() => !!questy.question || 'Field cannot be empty. Please provide a question']"
               @click:append-outer="removeQuestion(index)"
             ></v-text-field>
             Answer
             <v-combobox
-              v-model="questy.answer"
-              :items="questy.answer"
+              class="answer-box"
+              v-model="questy.answers"
+              :items="questy.answers"
               multiple
               outlined
+              :rules="[required]"
               hide-selected
+              hide-details
             >
               <template v-slot:selection="{ item }" >
                 <v-chip
@@ -63,6 +68,30 @@
           <div class="pt-4">
             <v-btn @click="recoverDefaultQuestions" width="100%">RECOVER DEFAULT QUESTIONS</v-btn>
           </div>
+          <v-snackbar color="success" elevation="24" v-model="successMessage">
+            Your questions have been saved
+            <template v-slot:action>
+              <v-btn
+                text
+                variant="text"
+                @click="closeAlert"
+              >
+                Close
+              </v-btn>
+            </template>
+          </v-snackbar>
+          <v-snackbar color="error" elevation="24" v-model="errorMessage">
+            Something is wrong with saving your questions. Please try again
+            <template v-slot:action>
+              <v-btn
+                text
+                variant="text"
+                @click="closeAlert"
+              >
+                Close
+              </v-btn>
+            </template>
+          </v-snackbar>
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
@@ -80,14 +109,16 @@ export default {
           answers: ['12', 'twelve']
         },
         {
-          question: 'What is the chemical formula of water',
+          question: 'What is the chemical formula of water?',
           answers: ['H2O']
         },
         {
           question: '2 + 4 = ?',
           answers: ['6', 'six']
         }
-      ]
+      ],
+      successMessage: false,
+      errorMessage: false
     }
   },
   methods: {
@@ -103,11 +134,23 @@ export default {
     addQuestion () {
       this.defaultQuestions.push({
         question: '',
-        answers: ''
+        answers: []
       })
     },
-    saveQuestions () {},
-    recoverDefaultQuestions () {}
+    saveQuestions () {
+      this.successMessage = true
+    },
+    recoverDefaultQuestions () {},
+    required (value) {
+      if (value.length === 0) {
+        return 'Field cannot be empty. Please provide an answer'
+      }
+      return !!value || 'Field cannot be empty. Please provide an answer'
+    },
+    closeAlert () {
+      this.successMessage = false
+      this.errorMessage = false
+    }
   }
 }
 </script>
@@ -116,4 +159,7 @@ export default {
 .checkbox {
   padding-left: 20px;
 }
+>>> .answer-box .v-input__append-inner {
+  display: none !important;
+}
 </style>

From ae1ff287e634e196f2ec2e35eb26a53303f73b25 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Fri, 22 Dec 2023 01:02:41 +0100
Subject: [PATCH 03/30] fix: move default questions to store

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 129 +++++++++++++-----
 src/store/wikis.js                            |  37 ++++-
 2 files changed, 131 insertions(+), 35 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 2c3ed28c..42231fe4 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -5,7 +5,7 @@
       QuestyCaptcha offers an extra layer of protection against spam accounts. During account creation, users will have to answer a question, which can be defined in settings. For more information on QuestyCaptcha, please visit the documentation page
     </v-card-text>
     <v-col class="checkbox">
-      <v-checkbox label="Activate spam protection"></v-checkbox>
+      <v-checkbox label="Activate spam protection" v-model="captchaActivate"></v-checkbox>
     </v-col>
 <!--    Setting Panel-->
     <v-expansion-panels>
@@ -20,37 +20,37 @@
             <li>Consider cultural bias. Use questions that rely on universal knowledge or knowledge related to your wiki.</li>
             <li>Keep the answers short and simple. Ideally, try to use questions with only one possible answer.</li>
           </ul>
-          <div class="pt-10" v-for="(questy, index) in defaultQuestions" :key="index">
+<!--          Question/Answer Bundle-->
+          <div class="pt-5" v-for="(entry, index) in questionsFromStore" :key="index">
             Question
             <v-text-field
-              ref="question"
-              v-model="questy.question"
+              class="input-field"
+              v-model="entry.question"
               outlined
               append-outer-icon="mdi-delete-outline"
-              :rules="[() => !!questy.question || 'Field cannot be empty. Please provide a question']"
+              :rules="[() => !!entry.question || 'Field cannot be empty. Please provide a question']"
+              :error-messages="getErrorMessages(entry, 'question')"
               @click:append-outer="removeQuestion(index)"
             ></v-text-field>
             Answer
             <v-combobox
-              class="answer-box"
-              v-model="questy.answers"
-              :items="questy.answers"
+              class="answer-box input-field"
+              v-model="entry.answers"
+              :items="entry.answers"
               multiple
               outlined
               :rules="[required]"
+              :error-messages="getErrorMessages(entry, 'answer')"
               hide-selected
-              hide-details
             >
               <template v-slot:selection="{ item }" >
-                <v-chip
-                  :input-value="selected"
-                >
+                <v-chip class="chips">
                   <span class="pr-1">
                     {{ item }}
                   </span>
                   <v-icon
                     small
-                    @click="removeAnswer(questy, item)"
+                    @click="removeAnswer(entry, item)"
                   >
                     mdi-close-circle
                   </v-icon>
@@ -63,7 +63,7 @@
             <v-btn @click="addQuestion" elevation=0 plain class="ml-auto">+ ADD QUESTION</v-btn>
           </div>
           <div>
-            <v-btn @click="saveQuestions" color="primary" width="100%">SAVE QUESTIONs</v-btn>
+            <v-btn @click="saveForm" color="primary" width="100%">SAVE QUESTIONS</v-btn>
           </div>
           <div class="pt-4">
             <v-btn @click="recoverDefaultQuestions" width="100%">RECOVER DEFAULT QUESTIONS</v-btn>
@@ -101,26 +101,21 @@
 <script>
 export default {
   name: 'QuestyCaptcha',
+  props: [
+    'wikiId'
+  ],
   data () {
     return {
-      defaultQuestions: [
-        {
-          question: 'How many vowels are in this question?',
-          answers: ['12', 'twelve']
-        },
-        {
-          question: 'What is the chemical formula of water?',
-          answers: ['H2O']
-        },
-        {
-          question: '2 + 4 = ?',
-          answers: ['6', 'six']
-        }
-      ],
       successMessage: false,
-      errorMessage: false
+      errorMessage: false,
+      captchaActivate: false,
+      questionsFromStore: []
     }
   },
+  created () {
+    this.questionsFromStore = this.$store.state.wikis.currentWikiSettings.captchaQuestions
+    this.captchaActivate = this.$store.state.wikis.currentWikiSettings.wwUseQuestyCaptcha
+  },
   methods: {
     removeAnswer (question, answer) {
       const index = question.answers.indexOf(answer)
@@ -129,18 +124,74 @@ export default {
       }
     },
     removeQuestion (index) {
-      this.defaultQuestions.splice(index, 1)
+      this.questionsFromStore.splice(index, 1)
     },
     addQuestion () {
-      this.defaultQuestions.push({
+      this.questionsFromStore.push({
         question: '',
         answers: []
       })
     },
-    saveQuestions () {
-      this.successMessage = true
+    checkEmptyField () {
+      const questionsList = this.questionsFromStore
+      for (let i = 0; i < questionsList.length; i++) {
+        const entry = questionsList[i]
+        entry.errorMessages = {}
+        if (!entry.question.trim()) {
+          entry.errorMessages.question = 'Field cannot be empty. Please provide a question'
+        } if (!entry.answers || entry.answers.length === 0) {
+          entry.errorMessages.answers = 'Field cannot be empty. Please provide an answer'
+        } else {
+          return true
+        }
+      }
+    },
+    getErrorMessages (entry, field) {
+      return entry.errorMessages ? [entry.errorMessages[field]] : []
+    },
+    saveForm () {
+      if (this.checkEmptyField() === true) {
+        const wiki = this.wikiId
+        const promises = []
+        const captchaEnabledSetting = 'wwUseQuestyCaptcha'
+        const captchaQuestionsSetting = 'wwCaptchaQuestions'
+        const enableValue = this.captchaActivate
+        const questions = {}
+        // for (const questionAnswerPair of this.questionsFromStore) {
+        //   for (let i = 0; i < this.questionsFromStore.length; i++) {
+        //     const noAnswer = Object.prototype.hasOwnProperty.call(questionAnswerPair, 'question') && typeof questionAnswerPair.question === 'string' && questionAnswerPair.question.trim() !== ''
+        //     const noQuestion = Object.prototype.hasOwnProperty.call(questionAnswerPair, 'answers') && Array.isArray(questionAnswerPair.answers) && questionAnswerPair.answers.length > 0
+        //     if (!noAnswer) {
+        //       this.error.answers = 'Field cannot be empty. Please provide an answer'
+        //     }
+        //     if (!noQuestion) {
+        //       this.error.question = 'Field cannot be empty. Please provide a question'
+        //     }
+        //   }
+        // }
+        this.questionsFromStore.forEach(item => {
+          questions[item.question] = item.answers
+        })
+        const JSONQuestions = JSON.stringify(questions)
+        promises.push(
+          this.$store.dispatch('updateSetting', { wiki, setting: captchaEnabledSetting, value: enableValue }),
+          this.$store.dispatch('updateSetting', { wiki, setting: captchaQuestionsSetting, value: JSONQuestions })
+        )
+        Promise.all(promises)
+          .then(() => {
+            this.$store.dispatch('setEnabledQuestyCaptcha', enableValue)
+            this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
+            this.successMessage = true
+          })
+          .catch(err => {
+            console.log(err.response)
+            this.errorMessage = true
+          })
+      }
+    },
+    recoverDefaultQuestions () {
+      this.questionsFromStore = this.$store.state.wikis.currentWikiSettings.defaultQuestions
     },
-    recoverDefaultQuestions () {},
     required (value) {
       if (value.length === 0) {
         return 'Field cannot be empty. Please provide an answer'
@@ -159,7 +210,17 @@ export default {
 .checkbox {
   padding-left: 20px;
 }
+>>> .input-field .v-input__slot {
+  min-height: 40px !important;
+}
 >>> .answer-box .v-input__append-inner {
   display: none !important;
 }
+>>> .answer-box .v-select__selections {
+  padding-bottom: 4px !important;
+  padding-top: 4px !important;
+}
+.chips {
+  margin: 0 8px 0 0 !important;
+}
 </style>
diff --git a/src/store/wikis.js b/src/store/wikis.js
index db643140..6e4eb9b4 100644
--- a/src/store/wikis.js
+++ b/src/store/wikis.js
@@ -60,6 +60,26 @@ const mutations = {
     const defaultMapping = { properties: { P31: MAPPING_SUGGESTION_PLACEHOLDER, P279: MAPPING_SUGGESTION_PLACEHOLDER }, items: {} }
     const wikibaseManifestEquivEntities = entityMappingSetting ? JSON.parse(entityMappingSetting.value) : defaultMapping
 
+    const wwUseQuestyCaptchaSetting = details.public_settings.find(setting => setting.name === 'wwUseQuestyCaptcha')
+    const wwUseQuestyCaptcha = wwUseQuestyCaptchaSetting ? parseInt(wwUseQuestyCaptchaSetting.value) === 1 : false
+
+    const captchaQuestionsSetting = details.public_settings.find(setting => setting.name === 'wwCaptchaQuestions')
+    const defaultQuestions = [
+      { question: 'How many vowels are in this question?', answers: ['12', 'twelve'] },
+      { question: 'What is the chemical formula of water?', answers: ['H2O'] },
+      { question: '2 + 4 = ?', answers: ['6', 'six'] }
+    ]
+    let captchaQuestions
+    let questionFromStoreAsArrayOfObjects
+    if (captchaQuestionsSetting) {
+      questionFromStoreAsArrayOfObjects = Object.keys(captchaQuestionsSetting).map(
+        (key) => { return { question: key, answers: captchaQuestionsSetting[key] } }
+      )
+      captchaQuestions = questionFromStoreAsArrayOfObjects
+    } else {
+      captchaQuestions = defaultQuestions
+    }
+
     const federatedPropertiesSetting = details.public_settings.find(setting => setting.name === 'wikibaseFedPropsEnable')
     const wikibaseFedPropsEnable = federatedPropertiesSetting ? parseInt(federatedPropertiesSetting.value) === 1 : false
 
@@ -90,7 +110,10 @@ const mutations = {
       wwWikibaseStringLengthString,
       wwWikibaseStringLengthMonolingualText,
       wwWikibaseStringLengthMultilang,
-      wwExtEnableConfirmAccount
+      wwExtEnableConfirmAccount,
+      wwUseQuestyCaptcha,
+      captchaQuestions,
+      defaultQuestions
     }
   },
   clear_current_wiki_settings (state) {
@@ -119,6 +142,12 @@ const mutations = {
   },
   set_enable_confirm_account (state, { value }) {
     state.currentWikiSettings.wwExtEnableConfirmAccount = value
+  },
+  set_enable_questy_captcha (state, { value }) {
+    state.currentWikiSettings.wwUseQuestyCaptcha = value
+  },
+  set_questy_captcha_questions (state, value) {
+    state.currentWikiSettings.captchaQuestions = value
   }
 }
 
@@ -186,6 +215,12 @@ const actions = {
         items: filterOutPlaceholderMapping(mapping.items)
       })
     })
+  },
+  setEnabledQuestyCaptcha ({ commit }, enabled) {
+    commit('set_enable_questy_captcha', enabled)
+  },
+  setQuestyCaptchaQuestions ({ commit }, value) {
+    commit('set_questy_captcha_questions', value)
   }
 }
 

From b29f8cf3102d2ebd29155b42dc85441313965d35 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Thu, 4 Jan 2024 13:41:06 +0100
Subject: [PATCH 04/30] feat: add error messages for empty fields

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 101 ++++++++++--------
 1 file changed, 55 insertions(+), 46 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 42231fe4..5cee82b3 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -40,7 +40,7 @@
               multiple
               outlined
               :rules="[required]"
-              :error-messages="getErrorMessages(entry, 'answer')"
+              :error-messages="getErrorMessages(entry, 'answers')"
               hide-selected
             >
               <template v-slot:selection="{ item }" >
@@ -132,7 +132,24 @@ export default {
         answers: []
       })
     },
-    checkEmptyField () {
+    // checkEmptyField () {
+    //   const questionsList = this.questionsFromStore
+    //   for (let i = 0; i < questionsList.length; i++) {
+    //     const entry = questionsList[i]
+    //     entry.errorMessages = {}
+    //     if (!entry.question.trim()) {
+    //       entry.errorMessages.question = 'Field cannot be empty. Please provide a question'
+    //     } if (!entry.answers || entry.answers.length === 0) {
+    //       entry.errorMessages.answers = 'Field cannot be empty. Please provide an answer'
+    //     } else {
+    //       return true
+    //     }
+    //   }
+    // },
+    getErrorMessages (entry, field) {
+      return entry.errorMessages ? [entry.errorMessages[field]] : []
+    },
+    saveForm () {
       const questionsList = this.questionsFromStore
       for (let i = 0; i < questionsList.length; i++) {
         const entry = questionsList[i]
@@ -142,51 +159,43 @@ export default {
         } if (!entry.answers || entry.answers.length === 0) {
           entry.errorMessages.answers = 'Field cannot be empty. Please provide an answer'
         } else {
-          return true
-        }
-      }
-    },
-    getErrorMessages (entry, field) {
-      return entry.errorMessages ? [entry.errorMessages[field]] : []
-    },
-    saveForm () {
-      if (this.checkEmptyField() === true) {
-        const wiki = this.wikiId
-        const promises = []
-        const captchaEnabledSetting = 'wwUseQuestyCaptcha'
-        const captchaQuestionsSetting = 'wwCaptchaQuestions'
-        const enableValue = this.captchaActivate
-        const questions = {}
-        // for (const questionAnswerPair of this.questionsFromStore) {
-        //   for (let i = 0; i < this.questionsFromStore.length; i++) {
-        //     const noAnswer = Object.prototype.hasOwnProperty.call(questionAnswerPair, 'question') && typeof questionAnswerPair.question === 'string' && questionAnswerPair.question.trim() !== ''
-        //     const noQuestion = Object.prototype.hasOwnProperty.call(questionAnswerPair, 'answers') && Array.isArray(questionAnswerPair.answers) && questionAnswerPair.answers.length > 0
-        //     if (!noAnswer) {
-        //       this.error.answers = 'Field cannot be empty. Please provide an answer'
-        //     }
-        //     if (!noQuestion) {
-        //       this.error.question = 'Field cannot be empty. Please provide a question'
-        //     }
-        //   }
-        // }
-        this.questionsFromStore.forEach(item => {
-          questions[item.question] = item.answers
-        })
-        const JSONQuestions = JSON.stringify(questions)
-        promises.push(
-          this.$store.dispatch('updateSetting', { wiki, setting: captchaEnabledSetting, value: enableValue }),
-          this.$store.dispatch('updateSetting', { wiki, setting: captchaQuestionsSetting, value: JSONQuestions })
-        )
-        Promise.all(promises)
-          .then(() => {
-            this.$store.dispatch('setEnabledQuestyCaptcha', enableValue)
-            this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
-            this.successMessage = true
-          })
-          .catch(err => {
-            console.log(err.response)
-            this.errorMessage = true
+          const wiki = this.wikiId
+          const promises = []
+          const captchaEnabledSetting = 'wwUseQuestyCaptcha'
+          const captchaQuestionsSetting = 'wwCaptchaQuestions'
+          const enableValue = this.captchaActivate
+          const questions = {}
+          // for (const questionAnswerPair of this.questionsFromStore) {
+          //   for (let i = 0; i < this.questionsFromStore.length; i++) {
+          //     const noAnswer = Object.prototype.hasOwnProperty.call(questionAnswerPair, 'question') && typeof questionAnswerPair.question === 'string' && questionAnswerPair.question.trim() !== ''
+          //     const noQuestion = Object.prototype.hasOwnProperty.call(questionAnswerPair, 'answers') && Array.isArray(questionAnswerPair.answers) && questionAnswerPair.answers.length > 0
+          //     if (noAnswer) {
+          //       this.error.answers = 'Field cannot be empty. Please provide an answer'
+          //     }
+          //     if (noQuestion) {
+          //       this.error.question = 'Field cannot be empty. Please provide a question'
+          //     }
+          //   }
+          // }
+          this.questionsFromStore.forEach(item => {
+            questions[item.question] = item.answers
           })
+          const JSONQuestions = JSON.stringify(questions)
+          promises.push(
+            this.$store.dispatch('updateSetting', { wiki, setting: captchaEnabledSetting, value: enableValue }),
+            this.$store.dispatch('updateSetting', { wiki, setting: captchaQuestionsSetting, value: JSONQuestions })
+          )
+          Promise.all(promises)
+            .then(() => {
+              this.$store.dispatch('setEnabledQuestyCaptcha', enableValue)
+              this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
+              this.successMessage = true
+            })
+            .catch(err => {
+              console.log(err.response)
+              this.errorMessage = true
+            })
+        }
       }
     },
     recoverDefaultQuestions () {

From 3ba9b1c16709b93633ff2ad0dcacbcce0927823d Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Mon, 8 Jan 2024 16:37:59 +0100
Subject: [PATCH 05/30] fix: Fix recover default questions button

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 92 ++++++++-----------
 src/store/wikis.js                            |  2 +-
 2 files changed, 41 insertions(+), 53 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 5cee82b3..3d82ad44 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -132,74 +132,62 @@ export default {
         answers: []
       })
     },
-    // checkEmptyField () {
-    //   const questionsList = this.questionsFromStore
-    //   for (let i = 0; i < questionsList.length; i++) {
-    //     const entry = questionsList[i]
-    //     entry.errorMessages = {}
-    //     if (!entry.question.trim()) {
-    //       entry.errorMessages.question = 'Field cannot be empty. Please provide a question'
-    //     } if (!entry.answers || entry.answers.length === 0) {
-    //       entry.errorMessages.answers = 'Field cannot be empty. Please provide an answer'
-    //     } else {
-    //       return true
-    //     }
-    //   }
-    // },
     getErrorMessages (entry, field) {
       return entry.errorMessages ? [entry.errorMessages[field]] : []
     },
+    clearErrorMessages (entry, field) {
+      return entry.errorMessages ? [entry.errorMessages[field]] : []
+    },
     saveForm () {
       const questionsList = this.questionsFromStore
+      let isEmpty = 0
       for (let i = 0; i < questionsList.length; i++) {
         const entry = questionsList[i]
         entry.errorMessages = {}
         if (!entry.question.trim()) {
           entry.errorMessages.question = 'Field cannot be empty. Please provide a question'
-        } if (!entry.answers || entry.answers.length === 0) {
+          isEmpty = isEmpty + 1
+        } else {
+          entry.errorMessages.question = ''
+        }
+
+        if (!entry.answers || entry.answers.length === 0) {
           entry.errorMessages.answers = 'Field cannot be empty. Please provide an answer'
+          isEmpty = isEmpty + 1
         } else {
-          const wiki = this.wikiId
-          const promises = []
-          const captchaEnabledSetting = 'wwUseQuestyCaptcha'
-          const captchaQuestionsSetting = 'wwCaptchaQuestions'
-          const enableValue = this.captchaActivate
-          const questions = {}
-          // for (const questionAnswerPair of this.questionsFromStore) {
-          //   for (let i = 0; i < this.questionsFromStore.length; i++) {
-          //     const noAnswer = Object.prototype.hasOwnProperty.call(questionAnswerPair, 'question') && typeof questionAnswerPair.question === 'string' && questionAnswerPair.question.trim() !== ''
-          //     const noQuestion = Object.prototype.hasOwnProperty.call(questionAnswerPair, 'answers') && Array.isArray(questionAnswerPair.answers) && questionAnswerPair.answers.length > 0
-          //     if (noAnswer) {
-          //       this.error.answers = 'Field cannot be empty. Please provide an answer'
-          //     }
-          //     if (noQuestion) {
-          //       this.error.question = 'Field cannot be empty. Please provide a question'
-          //     }
-          //   }
-          // }
-          this.questionsFromStore.forEach(item => {
-            questions[item.question] = item.answers
-          })
-          const JSONQuestions = JSON.stringify(questions)
-          promises.push(
-            this.$store.dispatch('updateSetting', { wiki, setting: captchaEnabledSetting, value: enableValue }),
-            this.$store.dispatch('updateSetting', { wiki, setting: captchaQuestionsSetting, value: JSONQuestions })
-          )
-          Promise.all(promises)
-            .then(() => {
-              this.$store.dispatch('setEnabledQuestyCaptcha', enableValue)
-              this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
-              this.successMessage = true
-            })
-            .catch(err => {
-              console.log(err.response)
-              this.errorMessage = true
-            })
+          entry.errorMessages.answers = ''
         }
       }
+      if (isEmpty === 0) {
+        const wiki = this.wikiId
+        const promises = []
+        const captchaEnabledSetting = 'wwUseQuestyCaptcha'
+        const captchaQuestionsSetting = 'wwCaptchaQuestions'
+        const enableValue = this.captchaActivate
+        const questions = {}
+        this.questionsFromStore.forEach(item => {
+          questions[item.question] = item.answers
+        })
+        const JSONQuestions = JSON.stringify(questions)
+        promises.push(
+          this.$store.dispatch('updateSetting', { wiki, setting: captchaEnabledSetting, value: enableValue }),
+          this.$store.dispatch('updateSetting', { wiki, setting: captchaQuestionsSetting, value: JSONQuestions })
+        )
+        Promise.all(promises)
+          .then(() => {
+            this.$store.dispatch('setEnabledQuestyCaptcha', enableValue)
+            this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
+            this.successMessage = true
+          })
+          .catch(err => {
+            console.log(err.response)
+            this.errorMessage = true
+          })
+      }
     },
     recoverDefaultQuestions () {
-      this.questionsFromStore = this.$store.state.wikis.currentWikiSettings.defaultQuestions
+      const recoveredDefaultQuestions = this.$store.state.wikis.currentWikiSettings.defaultQuestions
+      this.questionsFromStore = JSON.parse(JSON.stringify(recoveredDefaultQuestions))
     },
     required (value) {
       if (value.length === 0) {
diff --git a/src/store/wikis.js b/src/store/wikis.js
index 6e4eb9b4..07e4c9b4 100644
--- a/src/store/wikis.js
+++ b/src/store/wikis.js
@@ -77,7 +77,7 @@ const mutations = {
       )
       captchaQuestions = questionFromStoreAsArrayOfObjects
     } else {
-      captchaQuestions = defaultQuestions
+      captchaQuestions = JSON.parse(JSON.stringify(defaultQuestions))
     }
 
     const federatedPropertiesSetting = details.public_settings.find(setting => setting.name === 'wikibaseFedPropsEnable')

From 77f2c517426a902a2f3754d548d1edf738777564 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Mon, 8 Jan 2024 16:56:05 +0100
Subject: [PATCH 06/30] clean up testing codes

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 3d82ad44..bc420b30 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -29,7 +29,7 @@
               outlined
               append-outer-icon="mdi-delete-outline"
               :rules="[() => !!entry.question || 'Field cannot be empty. Please provide a question']"
-              :error-messages="getErrorMessages(entry, 'question')"
+              :error-messages="getSavingErrorMessages(entry, 'question')"
               @click:append-outer="removeQuestion(index)"
             ></v-text-field>
             Answer
@@ -40,7 +40,7 @@
               multiple
               outlined
               :rules="[required]"
-              :error-messages="getErrorMessages(entry, 'answers')"
+              :error-messages="getSavingErrorMessages(entry, 'answers')"
               hide-selected
             >
               <template v-slot:selection="{ item }" >
@@ -68,6 +68,7 @@
           <div class="pt-4">
             <v-btn @click="recoverDefaultQuestions" width="100%">RECOVER DEFAULT QUESTIONS</v-btn>
           </div>
+<!--          Success/Error Message Snackbar-->
           <v-snackbar color="success" elevation="24" v-model="successMessage">
             Your questions have been saved
             <template v-slot:action>
@@ -132,30 +133,23 @@ export default {
         answers: []
       })
     },
-    getErrorMessages (entry, field) {
-      return entry.errorMessages ? [entry.errorMessages[field]] : []
-    },
-    clearErrorMessages (entry, field) {
-      return entry.errorMessages ? [entry.errorMessages[field]] : []
+    getSavingErrorMessages (entry, field) {
+      return entry.savingErrorMessages ? [entry.savingErrorMessages[field]] : []
     },
     saveForm () {
       const questionsList = this.questionsFromStore
       let isEmpty = 0
       for (let i = 0; i < questionsList.length; i++) {
         const entry = questionsList[i]
-        entry.errorMessages = {}
+        entry.savingErrorMessages = {}
         if (!entry.question.trim()) {
-          entry.errorMessages.question = 'Field cannot be empty. Please provide a question'
+          entry.savingErrorMessages.question = 'Field cannot be empty. Please provide a question!'
           isEmpty = isEmpty + 1
-        } else {
-          entry.errorMessages.question = ''
         }
 
         if (!entry.answers || entry.answers.length === 0) {
-          entry.errorMessages.answers = 'Field cannot be empty. Please provide an answer'
+          entry.savingErrorMessages.answers = 'Field cannot be empty. Please provide an answer!'
           isEmpty = isEmpty + 1
-        } else {
-          entry.errorMessages.answers = ''
         }
       }
       if (isEmpty === 0) {

From 132994e25952c0296544b7241ec568d499752682 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Tue, 9 Jan 2024 11:52:43 +0100
Subject: [PATCH 07/30] fix: Fix validation

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 152 ++++++++----------
 1 file changed, 70 insertions(+), 82 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index bc420b30..93707c8c 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -21,53 +21,55 @@
             <li>Keep the answers short and simple. Ideally, try to use questions with only one possible answer.</li>
           </ul>
 <!--          Question/Answer Bundle-->
-          <div class="pt-5" v-for="(entry, index) in questionsFromStore" :key="index">
-            Question
-            <v-text-field
-              class="input-field"
-              v-model="entry.question"
-              outlined
-              append-outer-icon="mdi-delete-outline"
-              :rules="[() => !!entry.question || 'Field cannot be empty. Please provide a question']"
-              :error-messages="getSavingErrorMessages(entry, 'question')"
-              @click:append-outer="removeQuestion(index)"
-            ></v-text-field>
-            Answer
-            <v-combobox
-              class="answer-box input-field"
-              v-model="entry.answers"
-              :items="entry.answers"
-              multiple
-              outlined
-              :rules="[required]"
-              :error-messages="getSavingErrorMessages(entry, 'answers')"
-              hide-selected
-            >
-              <template v-slot:selection="{ item }" >
-                <v-chip class="chips">
+          <v-form ref="questyForm">
+            <div class="pt-5" v-for="(entry, index) in questionsFromStore" :key="index">
+              Question
+              <v-text-field
+                class="input-field"
+                v-model="entry.question"
+                outlined
+                append-outer-icon="mdi-delete-outline"
+                :rules="[() => !!entry.question || 'Field cannot be empty. Please provide a question']"
+                :error-messages="getSavingErrorMessages(entry, 'question')"
+                @click:append-outer="removeQuestion(index)"
+              ></v-text-field>
+              Answer
+              <v-combobox
+                class="answer-box input-field"
+                v-model="entry.answers"
+                :items="entry.answers"
+                multiple
+                outlined
+                :rules="[required]"
+                :error-messages="getSavingErrorMessages(entry, 'answers')"
+                hide-selected
+              >
+                <template v-slot:selection="{ item }" >
+                  <v-chip class="chips">
                   <span class="pr-1">
                     {{ item }}
                   </span>
-                  <v-icon
-                    small
-                    @click="removeAnswer(entry, item)"
-                  >
-                    mdi-close-circle
-                  </v-icon>
-                </v-chip>
-              </template>
-            </v-combobox>
-          </div>
+                    <v-icon
+                      small
+                      @click="removeAnswer(entry, item)"
+                    >
+                      mdi-close-circle
+                    </v-icon>
+                  </v-chip>
+                </template>
+              </v-combobox>
+            </div>
 <!--          Buttons-->
-          <div class="d-flex pb-12 pt-3">
-            <v-btn @click="addQuestion" elevation=0 plain class="ml-auto">+ ADD QUESTION</v-btn>
-          </div>
-          <div>
-            <v-btn @click="saveForm" color="primary" width="100%">SAVE QUESTIONS</v-btn>
-          </div>
-          <div class="pt-4">
-            <v-btn @click="recoverDefaultQuestions" width="100%">RECOVER DEFAULT QUESTIONS</v-btn>
-          </div>
+            <div class="d-flex pb-12 pt-3">
+              <v-btn @click="addQuestion" elevation=0 plain class="ml-auto">+ ADD QUESTION</v-btn>
+            </div>
+            <div>
+              <v-btn @click="saveForm" color="primary" width="100%">SAVE QUESTIONS</v-btn>
+            </div>
+            <div class="pt-4">
+              <v-btn @click="recoverDefaultQuestions" width="100%">RECOVER DEFAULT QUESTIONS</v-btn>
+            </div>
+          </v-form>
 <!--          Success/Error Message Snackbar-->
           <v-snackbar color="success" elevation="24" v-model="successMessage">
             Your questions have been saved
@@ -137,47 +139,33 @@ export default {
       return entry.savingErrorMessages ? [entry.savingErrorMessages[field]] : []
     },
     saveForm () {
-      const questionsList = this.questionsFromStore
-      let isEmpty = 0
-      for (let i = 0; i < questionsList.length; i++) {
-        const entry = questionsList[i]
-        entry.savingErrorMessages = {}
-        if (!entry.question.trim()) {
-          entry.savingErrorMessages.question = 'Field cannot be empty. Please provide a question!'
-          isEmpty = isEmpty + 1
-        }
-
-        if (!entry.answers || entry.answers.length === 0) {
-          entry.savingErrorMessages.answers = 'Field cannot be empty. Please provide an answer!'
-          isEmpty = isEmpty + 1
-        }
+      if (!this.$refs.questyForm.validate()) {
+        return
       }
-      if (isEmpty === 0) {
-        const wiki = this.wikiId
-        const promises = []
-        const captchaEnabledSetting = 'wwUseQuestyCaptcha'
-        const captchaQuestionsSetting = 'wwCaptchaQuestions'
-        const enableValue = this.captchaActivate
-        const questions = {}
-        this.questionsFromStore.forEach(item => {
-          questions[item.question] = item.answers
+      const wiki = this.wikiId
+      const promises = []
+      const captchaEnabledSetting = 'wwUseQuestyCaptcha'
+      const captchaQuestionsSetting = 'wwCaptchaQuestions'
+      const enableValue = this.captchaActivate
+      const questions = {}
+      this.questionsFromStore.forEach(item => {
+        questions[item.question] = item.answers
+      })
+      const JSONQuestions = JSON.stringify(questions)
+      promises.push(
+        this.$store.dispatch('updateSetting', { wiki, setting: captchaEnabledSetting, value: enableValue }),
+        this.$store.dispatch('updateSetting', { wiki, setting: captchaQuestionsSetting, value: JSONQuestions })
+      )
+      Promise.all(promises)
+        .then(() => {
+          this.$store.dispatch('setEnabledQuestyCaptcha', enableValue)
+          this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
+          this.successMessage = true
+        })
+        .catch(err => {
+          console.log(err.response)
+          this.errorMessage = true
         })
-        const JSONQuestions = JSON.stringify(questions)
-        promises.push(
-          this.$store.dispatch('updateSetting', { wiki, setting: captchaEnabledSetting, value: enableValue }),
-          this.$store.dispatch('updateSetting', { wiki, setting: captchaQuestionsSetting, value: JSONQuestions })
-        )
-        Promise.all(promises)
-          .then(() => {
-            this.$store.dispatch('setEnabledQuestyCaptcha', enableValue)
-            this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
-            this.successMessage = true
-          })
-          .catch(err => {
-            console.log(err.response)
-            this.errorMessage = true
-          })
-      }
     },
     recoverDefaultQuestions () {
       const recoveredDefaultQuestions = this.$store.state.wikis.currentWikiSettings.defaultQuestions

From 5c1fbbc092f96b060775a4a28322afc3249b0072 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Thu, 11 Jan 2024 00:12:59 +0100
Subject: [PATCH 08/30] fix: fix some specs and behaviors to match design

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 93707c8c..52c185c4 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <v-card-title>Additional Spam Protection</v-card-title>
-    <v-card-text>
+    <v-card-text class="text">
       QuestyCaptcha offers an extra layer of protection against spam accounts. During account creation, users will have to answer a question, which can be defined in settings. For more information on QuestyCaptcha, please visit the documentation page
     </v-card-text>
     <v-col class="checkbox">
@@ -25,23 +25,21 @@
             <div class="pt-5" v-for="(entry, index) in questionsFromStore" :key="index">
               Question
               <v-text-field
-                class="input-field"
+                class="input-field trash-icon text-field"
                 v-model="entry.question"
                 outlined
-                append-outer-icon="mdi-delete-outline"
+                :append-outer-icon="showIcon ? 'mdi-delete-outline' : undefined"
                 :rules="[() => !!entry.question || 'Field cannot be empty. Please provide a question']"
-                :error-messages="getSavingErrorMessages(entry, 'question')"
                 @click:append-outer="removeQuestion(index)"
               ></v-text-field>
               Answer
               <v-combobox
-                class="answer-box input-field"
+                class="answer-box input-field text-field"
                 v-model="entry.answers"
                 :items="entry.answers"
                 multiple
                 outlined
                 :rules="[required]"
-                :error-messages="getSavingErrorMessages(entry, 'answers')"
                 hide-selected
               >
                 <template v-slot:selection="{ item }" >
@@ -60,7 +58,7 @@
               </v-combobox>
             </div>
 <!--          Buttons-->
-            <div class="d-flex pb-12 pt-3">
+            <div class="d-flex pb-12 pt-2">
               <v-btn @click="addQuestion" elevation=0 plain class="ml-auto">+ ADD QUESTION</v-btn>
             </div>
             <div>
@@ -112,7 +110,8 @@ export default {
       successMessage: false,
       errorMessage: false,
       captchaActivate: false,
-      questionsFromStore: []
+      questionsFromStore: [],
+      showIcon: true
     }
   },
   created () {
@@ -128,15 +127,20 @@ export default {
     },
     removeQuestion (index) {
       this.questionsFromStore.splice(index, 1)
+
+      if (this.questionsFromStore.length === 1) {
+        this.showIcon = false
+      }
     },
     addQuestion () {
       this.questionsFromStore.push({
         question: '',
         answers: []
       })
-    },
-    getSavingErrorMessages (entry, field) {
-      return entry.savingErrorMessages ? [entry.savingErrorMessages[field]] : []
+
+      if (this.questionsFromStore.length > 1) {
+        this.showIcon = true
+      }
     },
     saveForm () {
       if (!this.$refs.questyForm.validate()) {
@@ -188,6 +192,8 @@ export default {
 <style lang="css" scoped>
 .checkbox {
   padding-left: 20px;
+  padding-bottom: 0;
+  padding-top: 0;
 }
 >>> .input-field .v-input__slot {
   min-height: 40px !important;
@@ -202,4 +208,13 @@ export default {
 .chips {
   margin: 0 8px 0 0 !important;
 }
+.text {
+  padding-bottom: 0 !important;
+}
+>>> .trash-icon .v-input__append-outer {
+  margin-top: 0 !important;
+}
+>>> .text-field .v-text-field__details {
+  margin-bottom: -2px !important;
+}
 </style>

From 0af47f9809c740947874821d7f6eecec4ea5022c Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Thu, 11 Jan 2024 00:19:00 +0100
Subject: [PATCH 09/30] fix: passing wikiId prop to fix saving issue in prod

---
 src/components/Pages/ManageWiki/Tabs/ManageWiki.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue b/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
index 0ba3381f..777a318b 100644
--- a/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
+++ b/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
@@ -21,7 +21,7 @@
           </v-row>
           <v-row>
             <v-col>
-              <QuestyCaptcha/>
+              <QuestyCaptcha :wikiId="this.wikiId"/>
             </v-col>
           </v-row>
         </v-col>

From 309669558dfd5a47747f1a5686271e5a293a41ab Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Thu, 11 Jan 2024 00:45:25 +0100
Subject: [PATCH 10/30] fix: delete QA bundle before saving

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue       | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 52c185c4..e8790d70 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -127,7 +127,7 @@ export default {
     },
     removeQuestion (index) {
       this.questionsFromStore.splice(index, 1)
-
+      // hide trash icon when there is just one QA bundle
       if (this.questionsFromStore.length === 1) {
         this.showIcon = false
       }
@@ -137,12 +137,16 @@ export default {
         question: '',
         answers: []
       })
-
-      if (this.questionsFromStore.length > 1) {
-        this.showIcon = true
-      }
+      // show the trash icon again when there are more than one QA bundle
+      this.showIcon = true
     },
     saveForm () {
+      for (let i = 0; i < this.questionsFromStore.length; i++) {
+        const entry = this.questionsFromStore[i]
+        if (!entry.question.trim() && !entry.answers) {
+          this.removeQuestion(i)
+        }
+      }
       if (!this.$refs.questyForm.validate()) {
         return
       }

From cde17ae46a61ddce6914a531f4930070f5d17586 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Thu, 11 Jan 2024 00:53:07 +0100
Subject: [PATCH 11/30] fix: add more condition to delete empty QA bundle with
 save button

---
 src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index e8790d70..25df00d7 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -143,8 +143,8 @@ export default {
     saveForm () {
       for (let i = 0; i < this.questionsFromStore.length; i++) {
         const entry = this.questionsFromStore[i]
-        if (!entry.question.trim() && !entry.answers) {
-          this.removeQuestion(i)
+        if (!entry.question.trim() && !entry.answers && this.questionsFromStore.length > 1) {
+          this.questionsFromStore.splice(i, 1)
         }
       }
       if (!this.$refs.questyForm.validate()) {

From fb1de611bde36580099feba61dcdc357fea0f055 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Thu, 11 Jan 2024 11:36:27 +0100
Subject: [PATCH 12/30] fix: fix saving behavior

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 60 ++++++++++---------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 25df00d7..b5691864 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -100,6 +100,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'QuestyCaptcha',
   props: [
@@ -143,37 +144,42 @@ export default {
     saveForm () {
       for (let i = 0; i < this.questionsFromStore.length; i++) {
         const entry = this.questionsFromStore[i]
-        if (!entry.question.trim() && !entry.answers && this.questionsFromStore.length > 1) {
+        const noQuestion = entry.question.trim() === ''
+        const noAnswer = entry.answers && entry.answers.length === 0
+        if (noQuestion && noAnswer && this.questionsFromStore.length > 1) {
           this.questionsFromStore.splice(i, 1)
         }
       }
-      if (!this.$refs.questyForm.validate()) {
-        return
-      }
-      const wiki = this.wikiId
-      const promises = []
-      const captchaEnabledSetting = 'wwUseQuestyCaptcha'
-      const captchaQuestionsSetting = 'wwCaptchaQuestions'
-      const enableValue = this.captchaActivate
-      const questions = {}
-      this.questionsFromStore.forEach(item => {
-        questions[item.question] = item.answers
-      })
-      const JSONQuestions = JSON.stringify(questions)
-      promises.push(
-        this.$store.dispatch('updateSetting', { wiki, setting: captchaEnabledSetting, value: enableValue }),
-        this.$store.dispatch('updateSetting', { wiki, setting: captchaQuestionsSetting, value: JSONQuestions })
-      )
-      Promise.all(promises)
-        .then(() => {
-          this.$store.dispatch('setEnabledQuestyCaptcha', enableValue)
-          this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
-          this.successMessage = true
-        })
-        .catch(err => {
-          console.log(err.response)
-          this.errorMessage = true
+      this.$nextTick(() => {
+        if (!this.$refs.questyForm.validate()) {
+          console.log('validation failss')
+          return
+        }
+        const wiki = this.wikiId
+        const promises = []
+        const captchaEnabledSetting = 'wwUseQuestyCaptcha'
+        const captchaQuestionsSetting = 'wwCaptchaQuestions'
+        const enableValue = this.captchaActivate
+        const questions = {}
+        this.questionsFromStore.forEach(item => {
+          questions[item.question] = item.answers
         })
+        const JSONQuestions = JSON.stringify(questions)
+        promises.push(
+          this.$store.dispatch('updateSetting', { wiki, setting: captchaEnabledSetting, value: enableValue }),
+          this.$store.dispatch('updateSetting', { wiki, setting: captchaQuestionsSetting, value: JSONQuestions })
+        )
+        Promise.all(promises)
+          .then(() => {
+            this.$store.dispatch('setEnabledQuestyCaptcha', enableValue)
+            this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
+            this.successMessage = true
+          })
+          .catch(err => {
+            console.log(err.response)
+            this.errorMessage = true
+          })
+      })
     },
     recoverDefaultQuestions () {
       const recoveredDefaultQuestions = this.$store.state.wikis.currentWikiSettings.defaultQuestions

From 2261d3e654a62c8a19900013fc4de5be7179e49e Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Thu, 11 Jan 2024 11:55:05 +0100
Subject: [PATCH 13/30] fix: fix UI specs

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue       | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index b5691864..f826e4f6 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -22,25 +22,27 @@
           </ul>
 <!--          Question/Answer Bundle-->
           <v-form ref="questyForm">
-            <div class="pt-5" v-for="(entry, index) in questionsFromStore" :key="index">
+            <div class="pt-10" v-for="(entry, index) in questionsFromStore" :key="index">
               Question
               <v-text-field
                 class="input-field trash-icon text-field"
                 v-model="entry.question"
                 outlined
+                hide-details="auto"
                 :append-outer-icon="showIcon ? 'mdi-delete-outline' : undefined"
                 :rules="[() => !!entry.question || 'Field cannot be empty. Please provide a question']"
                 @click:append-outer="removeQuestion(index)"
               ></v-text-field>
               Answer
               <v-combobox
-                class="answer-box input-field text-field"
+                class="answer-box input-field"
                 v-model="entry.answers"
                 :items="entry.answers"
                 multiple
                 outlined
                 :rules="[required]"
                 hide-selected
+                hide-details="auto"
               >
                 <template v-slot:selection="{ item }" >
                   <v-chip class="chips">
@@ -58,14 +60,14 @@
               </v-combobox>
             </div>
 <!--          Buttons-->
-            <div class="d-flex pb-12 pt-2">
+            <div class="d-flex pb-12 pt-10">
               <v-btn @click="addQuestion" elevation=0 plain class="ml-auto">+ ADD QUESTION</v-btn>
             </div>
             <div>
               <v-btn @click="saveForm" color="primary" width="100%">SAVE QUESTIONS</v-btn>
             </div>
             <div class="pt-4">
-              <v-btn @click="recoverDefaultQuestions" width="100%">RECOVER DEFAULT QUESTIONS</v-btn>
+              <v-btn @click="recoverDefaultQuestions"  elevation=0 width="100%">RECOVER DEFAULT QUESTIONS</v-btn>
             </div>
           </v-form>
 <!--          Success/Error Message Snackbar-->
@@ -224,7 +226,7 @@ export default {
 >>> .trash-icon .v-input__append-outer {
   margin-top: 0 !important;
 }
->>> .text-field .v-text-field__details {
-  margin-bottom: -2px !important;
+.text-field {
+  padding-bottom: 8px !important;
 }
 </style>

From fad3f5ecc875a68692e6c302893c09b4e12b04c6 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Thu, 11 Jan 2024 12:08:28 +0100
Subject: [PATCH 14/30] change: reduced answers input field width to 95%

---
 src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index f826e4f6..016414bc 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -35,7 +35,7 @@
               ></v-text-field>
               Answer
               <v-combobox
-                class="answer-box input-field"
+                class="answer-box input-field answer-input-field"
                 v-model="entry.answers"
                 :items="entry.answers"
                 multiple
@@ -210,6 +210,9 @@ export default {
 >>> .input-field .v-input__slot {
   min-height: 40px !important;
 }
+>>> .answer-input-field .v-input__slot {
+  width: 95% !important;
+}
 >>> .answer-box .v-input__append-inner {
   display: none !important;
 }

From 1da694a04bbdb4c9fe0594b982985874aae376b8 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Thu, 11 Jan 2024 16:42:19 +0100
Subject: [PATCH 15/30] fix: change answer field margin

---
 src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 016414bc..3161e4d8 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -210,8 +210,8 @@ export default {
 >>> .input-field .v-input__slot {
   min-height: 40px !important;
 }
->>> .answer-input-field .v-input__slot {
-  width: 95% !important;
+>>> .answer-input-field {
+  margin-right: 33px !important
 }
 >>> .answer-box .v-input__append-inner {
   display: none !important;

From 909d58135069f840c96a69451f9d05cd18c4cd77 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Fri, 12 Jan 2024 11:09:00 +0100
Subject: [PATCH 16/30] fix: remove some unwanted css used inline css

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 22 +++++--------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 3161e4d8..07685d93 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <v-card-title>Additional Spam Protection</v-card-title>
-    <v-card-text class="text">
+    <v-card-text class="pb-2">
       QuestyCaptcha offers an extra layer of protection against spam accounts. During account creation, users will have to answer a question, which can be defined in settings. For more information on QuestyCaptcha, please visit the documentation page
     </v-card-text>
     <v-col class="checkbox">
@@ -25,17 +25,18 @@
             <div class="pt-10" v-for="(entry, index) in questionsFromStore" :key="index">
               Question
               <v-text-field
-                class="input-field trash-icon text-field"
+                class="trash-icon pb-2"
                 v-model="entry.question"
                 outlined
                 hide-details="auto"
                 :append-outer-icon="showIcon ? 'mdi-delete-outline' : undefined"
                 :rules="[() => !!entry.question || 'Field cannot be empty. Please provide a question']"
                 @click:append-outer="removeQuestion(index)"
+                dense
               ></v-text-field>
               Answer
               <v-combobox
-                class="answer-box input-field answer-input-field"
+                class="answer-box answer-input-field"
                 v-model="entry.answers"
                 :items="entry.answers"
                 multiple
@@ -43,6 +44,7 @@
                 :rules="[required]"
                 hide-selected
                 hide-details="auto"
+                dense
               >
                 <template v-slot:selection="{ item }" >
                   <v-chip class="chips">
@@ -154,7 +156,6 @@ export default {
       }
       this.$nextTick(() => {
         if (!this.$refs.questyForm.validate()) {
-          console.log('validation failss')
           return
         }
         const wiki = this.wikiId
@@ -207,29 +208,16 @@ export default {
   padding-bottom: 0;
   padding-top: 0;
 }
->>> .input-field .v-input__slot {
-  min-height: 40px !important;
-}
 >>> .answer-input-field {
   margin-right: 33px !important
 }
 >>> .answer-box .v-input__append-inner {
   display: none !important;
 }
->>> .answer-box .v-select__selections {
-  padding-bottom: 4px !important;
-  padding-top: 4px !important;
-}
 .chips {
   margin: 0 8px 0 0 !important;
 }
-.text {
-  padding-bottom: 0 !important;
-}
 >>> .trash-icon .v-input__append-outer {
   margin-top: 0 !important;
 }
-.text-field {
-  padding-bottom: 8px !important;
-}
 </style>

From 1dd025572c70dc3e508bc8617bd72d8ce89e4958 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Fri, 12 Jan 2024 11:55:53 +0100
Subject: [PATCH 17/30] fix: change input field width conditionally

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue       | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 07685d93..83ae8050 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -8,7 +8,7 @@
       <v-checkbox label="Activate spam protection" v-model="captchaActivate"></v-checkbox>
     </v-col>
 <!--    Setting Panel-->
-    <v-expansion-panels>
+    <v-expansion-panels v-model="panel">
       <v-expansion-panel>
         <v-expansion-panel-header>
           <strong>SETTINGS</strong>
@@ -36,7 +36,7 @@
               ></v-text-field>
               Answer
               <v-combobox
-                class="answer-box answer-input-field"
+                :class="{'answer-box': true, 'answer-input-field': applyStyling}"
                 v-model="entry.answers"
                 :items="entry.answers"
                 multiple
@@ -116,7 +116,8 @@ export default {
       errorMessage: false,
       captchaActivate: false,
       questionsFromStore: [],
-      showIcon: true
+      showIcon: true,
+      applyStyling: true
     }
   },
   created () {
@@ -135,6 +136,7 @@ export default {
       // hide trash icon when there is just one QA bundle
       if (this.questionsFromStore.length === 1) {
         this.showIcon = false
+        this.applyStyling = false
       }
     },
     addQuestion () {
@@ -144,6 +146,7 @@ export default {
       })
       // show the trash icon again when there are more than one QA bundle
       this.showIcon = true
+      this.applyStyling = true
     },
     saveForm () {
       for (let i = 0; i < this.questionsFromStore.length; i++) {
@@ -182,6 +185,7 @@ export default {
             console.log(err.response)
             this.errorMessage = true
           })
+        this.panel = false
       })
     },
     recoverDefaultQuestions () {
@@ -208,8 +212,8 @@ export default {
   padding-bottom: 0;
   padding-top: 0;
 }
->>> .answer-input-field {
-  margin-right: 33px !important
+.answer-input-field {
+  margin-right: 33px !important;
 }
 >>> .answer-box .v-input__append-inner {
   display: none !important;

From f3ff79d7ba1b98ef266d3522633cf33c51a9823c Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 16 Jan 2024 09:44:38 +0000
Subject: [PATCH 18/30] Fix missing "panel" property error

---
 src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 83ae8050..b5ed634b 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -117,7 +117,8 @@ export default {
       captchaActivate: false,
       questionsFromStore: [],
       showIcon: true,
-      applyStyling: true
+      applyStyling: true,
+      panel: false
     }
   },
   created () {

From 4c00bcb81ee5ac5e5b781e277c342932497fe303 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 16 Jan 2024 09:55:19 +0000
Subject: [PATCH 19/30] Display messages even if the panel is collapsed

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 49 +++++++++----------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index b5ed634b..58d67e83 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -72,34 +72,33 @@
               <v-btn @click="recoverDefaultQuestions"  elevation=0 width="100%">RECOVER DEFAULT QUESTIONS</v-btn>
             </div>
           </v-form>
-<!--          Success/Error Message Snackbar-->
-          <v-snackbar color="success" elevation="24" v-model="successMessage">
-            Your questions have been saved
-            <template v-slot:action>
-              <v-btn
-                text
-                variant="text"
-                @click="closeAlert"
-              >
-                Close
-              </v-btn>
-            </template>
-          </v-snackbar>
-          <v-snackbar color="error" elevation="24" v-model="errorMessage">
-            Something is wrong with saving your questions. Please try again
-            <template v-slot:action>
-              <v-btn
-                text
-                variant="text"
-                @click="closeAlert"
-              >
-                Close
-              </v-btn>
-            </template>
-          </v-snackbar>
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
+    <v-snackbar color="success" elevation="24" v-model="successMessage">
+      Your questions have been saved
+      <template v-slot:action>
+        <v-btn
+          text
+          variant="text"
+          @click="closeAlert"
+        >
+          Close
+        </v-btn>
+      </template>
+    </v-snackbar>
+    <v-snackbar color="error" elevation="24" v-model="errorMessage">
+      Something is wrong with saving your questions. Please try again
+      <template v-slot:action>
+        <v-btn
+          text
+          variant="text"
+          @click="closeAlert"
+        >
+          Close
+        </v-btn>
+      </template>
+    </v-snackbar>
   </v-card>
 </template>
 

From 3f24b32a31a7f9d08a6f3f460f68e871d6c940fb Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 16 Jan 2024 10:18:21 +0000
Subject: [PATCH 20/30] Switch to inline validation for v-combobox

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue           | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 58d67e83..a09991d2 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -30,7 +30,7 @@
                 outlined
                 hide-details="auto"
                 :append-outer-icon="showIcon ? 'mdi-delete-outline' : undefined"
-                :rules="[() => !!entry.question || 'Field cannot be empty. Please provide a question']"
+                :rules="[() => !!entry.question || 'Field cannot be empty. Please provide a question.']"
                 @click:append-outer="removeQuestion(index)"
                 dense
               ></v-text-field>
@@ -41,7 +41,7 @@
                 :items="entry.answers"
                 multiple
                 outlined
-                :rules="[required]"
+                :rules="[() => !!entry.answers.length || 'Field cannot be empty. Please provide an answer.']"
                 hide-selected
                 hide-details="auto"
                 dense
@@ -192,12 +192,6 @@ export default {
       const recoveredDefaultQuestions = this.$store.state.wikis.currentWikiSettings.defaultQuestions
       this.questionsFromStore = JSON.parse(JSON.stringify(recoveredDefaultQuestions))
     },
-    required (value) {
-      if (value.length === 0) {
-        return 'Field cannot be empty. Please provide an answer'
-      }
-      return !!value || 'Field cannot be empty. Please provide an answer'
-    },
     closeAlert () {
       this.successMessage = false
       this.errorMessage = false

From 9a7fd6700e52c669e11a926f95685c331d3d3fef Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 16 Jan 2024 12:51:20 +0000
Subject: [PATCH 21/30] Simplify showing the delete button

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index a09991d2..dd76f621 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -29,14 +29,14 @@
                 v-model="entry.question"
                 outlined
                 hide-details="auto"
-                :append-outer-icon="showIcon ? 'mdi-delete-outline' : undefined"
+                :append-outer-icon="showDeleteButton ? 'mdi-delete-outline' : undefined"
                 :rules="[() => !!entry.question || 'Field cannot be empty. Please provide a question.']"
                 @click:append-outer="removeQuestion(index)"
                 dense
               ></v-text-field>
               Answer
               <v-combobox
-                :class="{'answer-box': true, 'answer-input-field': applyStyling}"
+                :class="{'answer-box': true, 'answer-input-field': showDeleteButton}"
                 v-model="entry.answers"
                 :items="entry.answers"
                 multiple
@@ -115,11 +115,14 @@ export default {
       errorMessage: false,
       captchaActivate: false,
       questionsFromStore: [],
-      showIcon: true,
-      applyStyling: true,
       panel: false
     }
   },
+  computed: {
+    showDeleteButton: function () {
+      return this.questionsFromStore.length > 1
+    }
+  },
   created () {
     this.questionsFromStore = this.$store.state.wikis.currentWikiSettings.captchaQuestions
     this.captchaActivate = this.$store.state.wikis.currentWikiSettings.wwUseQuestyCaptcha
@@ -133,20 +136,12 @@ export default {
     },
     removeQuestion (index) {
       this.questionsFromStore.splice(index, 1)
-      // hide trash icon when there is just one QA bundle
-      if (this.questionsFromStore.length === 1) {
-        this.showIcon = false
-        this.applyStyling = false
-      }
     },
     addQuestion () {
       this.questionsFromStore.push({
         question: '',
         answers: []
       })
-      // show the trash icon again when there are more than one QA bundle
-      this.showIcon = true
-      this.applyStyling = true
     },
     saveForm () {
       for (let i = 0; i < this.questionsFromStore.length; i++) {

From c4e75265f2ce7c598fceed7562bb4c2c4c3afdb7 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 16 Jan 2024 14:38:22 +0000
Subject: [PATCH 22/30] Reuse the existing v-snackbar

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 32 ++++++-------------
 1 file changed, 9 insertions(+), 23 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index dd76f621..4b0955dc 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -75,25 +75,13 @@
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
-    <v-snackbar color="success" elevation="24" v-model="successMessage">
-      Your questions have been saved
+    <v-snackbar :color="message.status" elevation="24" v-model="message.show">
+      {{ message.text }}
       <template v-slot:action>
         <v-btn
           text
           variant="text"
-          @click="closeAlert"
-        >
-          Close
-        </v-btn>
-      </template>
-    </v-snackbar>
-    <v-snackbar color="error" elevation="24" v-model="errorMessage">
-      Something is wrong with saving your questions. Please try again
-      <template v-slot:action>
-        <v-btn
-          text
-          variant="text"
-          @click="closeAlert"
+          @click="message.show = false"
         >
           Close
         </v-btn>
@@ -111,8 +99,7 @@ export default {
   ],
   data () {
     return {
-      successMessage: false,
-      errorMessage: false,
+      message: false,
       captchaActivate: false,
       questionsFromStore: [],
       panel: false
@@ -143,6 +130,9 @@ export default {
         answers: []
       })
     },
+    showMessage (status, message) {
+      this.message = { status: status, text: message, show: true }
+    },
     saveForm () {
       for (let i = 0; i < this.questionsFromStore.length; i++) {
         const entry = this.questionsFromStore[i]
@@ -174,11 +164,11 @@ export default {
           .then(() => {
             this.$store.dispatch('setEnabledQuestyCaptcha', enableValue)
             this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
-            this.successMessage = true
+            this.showMessage('success', 'Your questions have been saved.')
           })
           .catch(err => {
             console.log(err.response)
-            this.errorMessage = true
+            this.showMessage('error', 'Something went wrong with saving your questions. Please try again.')
           })
         this.panel = false
       })
@@ -186,10 +176,6 @@ export default {
     recoverDefaultQuestions () {
       const recoveredDefaultQuestions = this.$store.state.wikis.currentWikiSettings.defaultQuestions
       this.questionsFromStore = JSON.parse(JSON.stringify(recoveredDefaultQuestions))
-    },
-    closeAlert () {
-      this.successMessage = false
-      this.errorMessage = false
     }
   }
 }

From 7ff34429fc3f9f6fbe03f810d75e031a5520a306 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 16 Jan 2024 14:55:12 +0000
Subject: [PATCH 23/30] Minor documentation cleanup

---
 src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 4b0955dc..3b94133c 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -7,7 +7,6 @@
     <v-col class="checkbox">
       <v-checkbox label="Activate spam protection" v-model="captchaActivate"></v-checkbox>
     </v-col>
-<!--    Setting Panel-->
     <v-expansion-panels v-model="panel">
       <v-expansion-panel>
         <v-expansion-panel-header>
@@ -20,7 +19,6 @@
             <li>Consider cultural bias. Use questions that rely on universal knowledge or knowledge related to your wiki.</li>
             <li>Keep the answers short and simple. Ideally, try to use questions with only one possible answer.</li>
           </ul>
-<!--          Question/Answer Bundle-->
           <v-form ref="questyForm">
             <div class="pt-10" v-for="(entry, index) in questionsFromStore" :key="index">
               Question
@@ -61,7 +59,6 @@
                 </template>
               </v-combobox>
             </div>
-<!--          Buttons-->
             <div class="d-flex pb-12 pt-10">
               <v-btn @click="addQuestion" elevation=0 plain class="ml-auto">+ ADD QUESTION</v-btn>
             </div>
@@ -91,7 +88,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'QuestyCaptcha',
   props: [
@@ -175,6 +171,7 @@ export default {
     },
     recoverDefaultQuestions () {
       const recoveredDefaultQuestions = this.$store.state.wikis.currentWikiSettings.defaultQuestions
+      // parse() and stringify() are being used to make a copy
       this.questionsFromStore = JSON.parse(JSON.stringify(recoveredDefaultQuestions))
     }
   }

From ec228ae8b08d4638867980cf5b2345115adc5ca5 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 16 Jan 2024 15:01:45 +0000
Subject: [PATCH 24/30] Switch to using async/await

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 54 +++++++++----------
 1 file changed, 24 insertions(+), 30 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 3b94133c..29ed0eac 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -129,7 +129,7 @@ export default {
     showMessage (status, message) {
       this.message = { status: status, text: message, show: true }
     },
-    saveForm () {
+    async saveForm () {
       for (let i = 0; i < this.questionsFromStore.length; i++) {
         const entry = this.questionsFromStore[i]
         const noQuestion = entry.question.trim() === ''
@@ -138,36 +138,30 @@ export default {
           this.questionsFromStore.splice(i, 1)
         }
       }
-      this.$nextTick(() => {
-        if (!this.$refs.questyForm.validate()) {
-          return
-        }
-        const wiki = this.wikiId
-        const promises = []
-        const captchaEnabledSetting = 'wwUseQuestyCaptcha'
-        const captchaQuestionsSetting = 'wwCaptchaQuestions'
-        const enableValue = this.captchaActivate
-        const questions = {}
-        this.questionsFromStore.forEach(item => {
-          questions[item.question] = item.answers
-        })
-        const JSONQuestions = JSON.stringify(questions)
-        promises.push(
-          this.$store.dispatch('updateSetting', { wiki, setting: captchaEnabledSetting, value: enableValue }),
-          this.$store.dispatch('updateSetting', { wiki, setting: captchaQuestionsSetting, value: JSONQuestions })
-        )
-        Promise.all(promises)
-          .then(() => {
-            this.$store.dispatch('setEnabledQuestyCaptcha', enableValue)
-            this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
-            this.showMessage('success', 'Your questions have been saved.')
-          })
-          .catch(err => {
-            console.log(err.response)
-            this.showMessage('error', 'Something went wrong with saving your questions. Please try again.')
-          })
-        this.panel = false
+
+      await this.$nextTick()
+      if (!this.$refs.questyForm.validate()) {
+        return
+      }
+
+      const questions = {}
+      this.questionsFromStore.forEach(item => {
+        questions[item.question] = item.answers
       })
+
+      try {
+        await Promise.all([
+          this.$store.dispatch('updateSetting', { wiki: this.wikiId, setting: 'wwUseQuestyCaptcha', value: this.captchaActivate }),
+          this.$store.dispatch('updateSetting', { wiki: this.wikiId, setting: 'wwCaptchaQuestions', value: JSON.stringify(questions) })
+        ])
+        await this.$store.dispatch('setEnabledQuestyCaptcha', this.captchaActivate)
+        await this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
+        this.showMessage('success', 'Your questions have been saved.')
+        this.panel = false
+      } catch (error) {
+        console.log(error.response)
+        this.showMessage('error', 'Something went wrong with saving your questions. Please try again.')
+      }
     },
     recoverDefaultQuestions () {
       const recoveredDefaultQuestions = this.$store.state.wikis.currentWikiSettings.defaultQuestions

From bf6cf419ec7d92f26e40adece1244f06a7d2fd17 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Fri, 19 Jan 2024 07:06:44 +0000
Subject: [PATCH 25/30] Fix fetching of existing questions

---
 src/store/wikis.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/store/wikis.js b/src/store/wikis.js
index 07e4c9b4..6ba1693d 100644
--- a/src/store/wikis.js
+++ b/src/store/wikis.js
@@ -70,12 +70,10 @@ const mutations = {
       { question: '2 + 4 = ?', answers: ['6', 'six'] }
     ]
     let captchaQuestions
-    let questionFromStoreAsArrayOfObjects
     if (captchaQuestionsSetting) {
-      questionFromStoreAsArrayOfObjects = Object.keys(captchaQuestionsSetting).map(
-        (key) => { return { question: key, answers: captchaQuestionsSetting[key] } }
-      )
-      captchaQuestions = questionFromStoreAsArrayOfObjects
+      captchaQuestions = Object.entries(JSON.parse(captchaQuestionsSetting.value)).map(([key, value]) => {
+        return { question: key, answers: value }
+      })
     } else {
       captchaQuestions = JSON.parse(JSON.stringify(defaultQuestions))
     }

From c9c8149d23913ea8b68150afea3d41975d3063a2 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Fri, 19 Jan 2024 08:19:50 +0000
Subject: [PATCH 26/30] Scroll to first invalid field on error

---
 src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 29ed0eac..32077c09 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -140,7 +140,11 @@ export default {
       }
 
       await this.$nextTick()
-      if (!this.$refs.questyForm.validate()) {
+      const invalidField = this.$refs.questyForm.$children.find((field) => {
+        return typeof field.validate === 'function' && !field.validate()
+      })
+      if (invalidField) {
+        invalidField.$el.scrollIntoView({ behavior: 'smooth' })
         return
       }
 

From e10cb35fdf105d0f6aadd813439d6f8446e1d8e9 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Fri, 19 Jan 2024 08:24:24 +0000
Subject: [PATCH 27/30] Synchronously update local settings

---
 src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 32077c09..7d31941e 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -158,8 +158,10 @@ export default {
           this.$store.dispatch('updateSetting', { wiki: this.wikiId, setting: 'wwUseQuestyCaptcha', value: this.captchaActivate }),
           this.$store.dispatch('updateSetting', { wiki: this.wikiId, setting: 'wwCaptchaQuestions', value: JSON.stringify(questions) })
         ])
-        await this.$store.dispatch('setEnabledQuestyCaptcha', this.captchaActivate)
-        await this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
+        await Promise.all([
+          this.$store.dispatch('setEnabledQuestyCaptcha', this.captchaActivate),
+          this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
+        ])
         this.showMessage('success', 'Your questions have been saved.')
         this.panel = false
       } catch (error) {

From 1435654ca8c1aad0112598666d286d999855a7e6 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Fri, 19 Jan 2024 13:21:55 +0000
Subject: [PATCH 28/30] Captcha toggle should work independently

---
 .../Pages/ManageWiki/Cards/QuestyCaptcha.vue  | 90 +++++++++++++------
 src/store/wikis.js                            | 10 +--
 2 files changed, 68 insertions(+), 32 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 7d31941e..b0bcc256 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -4,8 +4,14 @@
     <v-card-text class="pb-2">
       QuestyCaptcha offers an extra layer of protection against spam accounts. During account creation, users will have to answer a question, which can be defined in settings. For more information on QuestyCaptcha, please visit the documentation page
     </v-card-text>
-    <v-col class="checkbox">
-      <v-checkbox label="Activate spam protection" v-model="captchaActivate"></v-checkbox>
+    <v-col class="switch">
+      <v-switch
+        label="Activate spam protection"
+        v-model="isCaptchaActive"
+        @change="toggleCaptcha"
+        :loading="waitForToggleUpdate"
+        :disabled="waitForToggleUpdate"
+      />
     </v-col>
     <v-expansion-panels v-model="panel">
       <v-expansion-panel>
@@ -31,6 +37,7 @@
                 :rules="[() => !!entry.question || 'Field cannot be empty. Please provide a question.']"
                 @click:append-outer="removeQuestion(index)"
                 dense
+                :disabled="waitForQuestionsUpdate"
               ></v-text-field>
               Answer
               <v-combobox
@@ -43,15 +50,17 @@
                 hide-selected
                 hide-details="auto"
                 dense
+                :disabled="waitForQuestionsUpdate"
               >
                 <template v-slot:selection="{ item }" >
-                  <v-chip class="chips">
+                  <v-chip class="chips" :disabled="waitForQuestionsUpdate">
                   <span class="pr-1">
                     {{ item }}
                   </span>
                     <v-icon
                       small
                       @click="removeAnswer(entry, item)"
+                      :disabled="waitForQuestionsUpdate"
                     >
                       mdi-close-circle
                     </v-icon>
@@ -60,13 +69,13 @@
               </v-combobox>
             </div>
             <div class="d-flex pb-12 pt-10">
-              <v-btn @click="addQuestion" elevation=0 plain class="ml-auto">+ ADD QUESTION</v-btn>
+              <v-btn @click="addQuestion" :disabled="waitForQuestionsUpdate" elevation=0 plain class="ml-auto">+ ADD QUESTION</v-btn>
             </div>
             <div>
-              <v-btn @click="saveForm" color="primary" width="100%">SAVE QUESTIONS</v-btn>
+              <v-btn @click="saveForm" :disabled="waitForQuestionsUpdate" color="primary" width="100%">SAVE QUESTIONS</v-btn>
             </div>
             <div class="pt-4">
-              <v-btn @click="recoverDefaultQuestions"  elevation=0 width="100%">RECOVER DEFAULT QUESTIONS</v-btn>
+              <v-btn @click="recoverDefaultQuestions" :disabled="waitForQuestionsUpdate" elevation=0 width="100%">RECOVER DEFAULT QUESTIONS</v-btn>
             </div>
           </v-form>
         </v-expansion-panel-content>
@@ -96,9 +105,13 @@ export default {
   data () {
     return {
       message: false,
-      captchaActivate: false,
       questionsFromStore: [],
-      panel: false
+      defaultQuestions: [],
+      isCaptchaActive: false,
+      hasNoQuestions: false,
+      panel: false,
+      waitForToggleUpdate: false,
+      waitForQuestionsUpdate: false
     }
   },
   computed: {
@@ -107,8 +120,13 @@ export default {
     }
   },
   created () {
+    this.defaultQuestions = this.$store.state.wikis.currentWikiSettings.defaultQuestions
+    this.isCaptchaActive = this.$store.state.wikis.currentWikiSettings.wwUseQuestyCaptcha
     this.questionsFromStore = this.$store.state.wikis.currentWikiSettings.captchaQuestions
-    this.captchaActivate = this.$store.state.wikis.currentWikiSettings.wwUseQuestyCaptcha
+    this.hasNoQuestions = !this.questionsFromStore
+    if (this.hasNoQuestions) {
+      this.recoverDefaultQuestions()
+    }
   },
   methods: {
     removeAnswer (question, answer) {
@@ -129,7 +147,35 @@ export default {
     showMessage (status, message) {
       this.message = { status: status, text: message, show: true }
     },
+    formatQuestionsForApi (questions) {
+      return JSON.stringify(questions.reduce((out, entry) => {
+        out[entry.question] = entry.answers
+        return out
+      }, {}))
+    },
+    async toggleCaptcha (enabled) {
+      try {
+        this.waitForToggleUpdate = true
+        if (enabled && this.hasNoQuestions) {
+          await this.$store.dispatch('updateSetting', { wiki: this.wikiId, setting: 'wwCaptchaQuestions', value: this.formatQuestionsForApi(this.defaultQuestions)})
+          await this.$store.dispatch('setQuestyCaptchaQuestions', this.defaultQuestions)
+          this.hasNoQuestions = false
+        }
+        await this.$store.dispatch('updateSetting', { wiki: this.wikiId, setting: 'wwUseQuestyCaptcha', value: enabled })
+        await this.$store.dispatch('setEnabledQuestyCaptcha', enabled)
+        this.showMessage('success', `QuestyCaptcha has been successfully ${enabled ? 'enabled' : 'disabled'}.`)
+      } catch (error) {
+        console.log(error.response)
+        this.showMessage('error', `Something went wrong while ${enabled ? 'enabling' : 'disabling'} QuestyCaptcha. Please try again.`)
+        await this.$nextTick()
+        this.isCaptchaActive = !enabled
+      } finally {
+        this.waitForToggleUpdate = false
+      }
+    },
     async saveForm () {
+      this.waitForQuestionsUpdate = true
+
       for (let i = 0; i < this.questionsFromStore.length; i++) {
         const entry = this.questionsFromStore[i]
         const noQuestion = entry.question.trim() === ''
@@ -145,41 +191,35 @@ export default {
       })
       if (invalidField) {
         invalidField.$el.scrollIntoView({ behavior: 'smooth' })
+        this.waitForQuestionsUpdate = false
         return
       }
 
-      const questions = {}
-      this.questionsFromStore.forEach(item => {
-        questions[item.question] = item.answers
-      })
-
       try {
-        await Promise.all([
-          this.$store.dispatch('updateSetting', { wiki: this.wikiId, setting: 'wwUseQuestyCaptcha', value: this.captchaActivate }),
-          this.$store.dispatch('updateSetting', { wiki: this.wikiId, setting: 'wwCaptchaQuestions', value: JSON.stringify(questions) })
-        ])
-        await Promise.all([
-          this.$store.dispatch('setEnabledQuestyCaptcha', this.captchaActivate),
-          this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
-        ])
+        await this.$store.dispatch('updateSetting', {
+          wiki: this.wikiId, setting: 'wwCaptchaQuestions', value: this.formatQuestionsForApi(this.questionsFromStore)
+        })
+        await this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
         this.showMessage('success', 'Your questions have been saved.')
+        this.hasNoQuestions = false
         this.panel = false
       } catch (error) {
         console.log(error.response)
         this.showMessage('error', 'Something went wrong with saving your questions. Please try again.')
+      } finally {
+        this.waitForQuestionsUpdate = false
       }
     },
     recoverDefaultQuestions () {
-      const recoveredDefaultQuestions = this.$store.state.wikis.currentWikiSettings.defaultQuestions
       // parse() and stringify() are being used to make a copy
-      this.questionsFromStore = JSON.parse(JSON.stringify(recoveredDefaultQuestions))
+      this.questionsFromStore = JSON.parse(JSON.stringify(this.defaultQuestions))
     }
   }
 }
 </script>
 
 <style lang="css" scoped>
-.checkbox {
+.switch {
   padding-left: 20px;
   padding-bottom: 0;
   padding-top: 0;
diff --git a/src/store/wikis.js b/src/store/wikis.js
index 6ba1693d..b73ad7c0 100644
--- a/src/store/wikis.js
+++ b/src/store/wikis.js
@@ -69,14 +69,10 @@ const mutations = {
       { question: 'What is the chemical formula of water?', answers: ['H2O'] },
       { question: '2 + 4 = ?', answers: ['6', 'six'] }
     ]
-    let captchaQuestions
-    if (captchaQuestionsSetting) {
-      captchaQuestions = Object.entries(JSON.parse(captchaQuestionsSetting.value)).map(([key, value]) => {
+    const captchaQuestions = captchaQuestionsSetting ?
+      Object.entries(JSON.parse(captchaQuestionsSetting.value)).map(([key, value]) => {
         return { question: key, answers: value }
-      })
-    } else {
-      captchaQuestions = JSON.parse(JSON.stringify(defaultQuestions))
-    }
+      }) : undefined
 
     const federatedPropertiesSetting = details.public_settings.find(setting => setting.name === 'wikibaseFedPropsEnable')
     const wikibaseFedPropsEnable = federatedPropertiesSetting ? parseInt(federatedPropertiesSetting.value) === 1 : false

From 48fcb895619a6472f745d2ac12271e8f9fdba83a Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Fri, 19 Jan 2024 13:39:00 +0000
Subject: [PATCH 29/30] Fix linting errors

---
 src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue | 4 +++-
 src/store/wikis.js                                      | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index b0bcc256..4cea3261 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -157,7 +157,9 @@ export default {
       try {
         this.waitForToggleUpdate = true
         if (enabled && this.hasNoQuestions) {
-          await this.$store.dispatch('updateSetting', { wiki: this.wikiId, setting: 'wwCaptchaQuestions', value: this.formatQuestionsForApi(this.defaultQuestions)})
+          await this.$store.dispatch('updateSetting', {
+            wiki: this.wikiId, setting: 'wwCaptchaQuestions', value: this.formatQuestionsForApi(this.defaultQuestions)
+          })
           await this.$store.dispatch('setQuestyCaptchaQuestions', this.defaultQuestions)
           this.hasNoQuestions = false
         }
diff --git a/src/store/wikis.js b/src/store/wikis.js
index b73ad7c0..78716388 100644
--- a/src/store/wikis.js
+++ b/src/store/wikis.js
@@ -69,8 +69,8 @@ const mutations = {
       { question: 'What is the chemical formula of water?', answers: ['H2O'] },
       { question: '2 + 4 = ?', answers: ['6', 'six'] }
     ]
-    const captchaQuestions = captchaQuestionsSetting ?
-      Object.entries(JSON.parse(captchaQuestionsSetting.value)).map(([key, value]) => {
+    const captchaQuestions = captchaQuestionsSetting
+      ? Object.entries(JSON.parse(captchaQuestionsSetting.value)).map(([key, value]) => {
         return { question: key, answers: value }
       }) : undefined
 

From d4f31433fe5d8844a2387892cb3ddbb04572e8e8 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Fri, 19 Jan 2024 13:39:41 +0000
Subject: [PATCH 30/30] Fix hidden validation errors

---
 src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
index 4cea3261..4b27d825 100644
--- a/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
+++ b/src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue
@@ -188,6 +188,7 @@ export default {
       }
 
       await this.$nextTick()
+      this.$refs.questyForm.validate()
       const invalidField = this.$refs.questyForm.$children.find((field) => {
         return typeof field.validate === 'function' && !field.validate()
       })