From b1c4fbe6d2c13e3aa9740f4f60d59715d52744b4 Mon Sep 17 00:00:00 2001
From: Frederik Ring <frederik.ring@wikimedia.de>
Date: Thu, 8 Feb 2024 13:24:51 +0100
Subject: [PATCH] fix: lexemes cannot be disabled as button is rendered outside
 of form

---
 .../Pages/ManageWiki/Features/Lexeme.vue      | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Features/Lexeme.vue b/src/components/Pages/ManageWiki/Features/Lexeme.vue
index 53a797fa..d025bffc 100644
--- a/src/components/Pages/ManageWiki/Features/Lexeme.vue
+++ b/src/components/Pages/ManageWiki/Features/Lexeme.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-form ref="form" v-model="valid" @submit="confirmAction">
+  <v-form ref="form" v-model="valid" @submit="handleSubmit" id="formLexeme">
     <v-card elevation="1" class="padding" outlined>
       <v-card-title>Lexeme</v-card-title>
       <v-card-text>
@@ -8,7 +8,7 @@
       </v-card-text>
       <v-card-actions>
         <v-btn @click="showModal" color="red" v-if="isEnabled">Disable Lexeme</v-btn>
-        <v-btn @click="enableFeature" v-else>Enable Lexeme</v-btn>
+        <v-btn v-else type="submit">Enable Lexeme</v-btn>
       </v-card-actions>
     </v-card>
     <v-dialog v-model="dialog" width="500" v-if="dialog">
@@ -28,15 +28,16 @@
           <v-text-field
             :label="`Please type ${userConfirmationString} to confirm`"
             :rules="[rules.match]"
-          ></v-text-field>
+          > {</v-text-field>
         </v-card-text>
-        <v-divider></v-divider>
+        <v-divider>
+        }</v-divider>
 
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-tooltip top>
             <template v-slot:activator="{ on, attrs }">
-              <v-btn color="primary" v-bind="attrs" v-on="on" text type="submit">
+              <v-btn v-bind="attrs" v-on="on" color="primary" type="submit" form="formLexeme">
                 I understand
               </v-btn>
             </template>
@@ -53,15 +54,17 @@ export default {
   name: 'Lexeme',
   props: ['wikiId', 'setting'],
   data () {
-    return {
+    const data = {
       valid: false,
       dialog: false,
       userConfirmationString: 'wbstack-important-change',
-      rules: {
-        match: (value) =>
-          value === this.userConfirmationString || 'Please enter the confirmation'
-      }
+      rules: {}
+    }
+    data.rules.match = (v) => {
+      v = v && v.trim()
+      return v === data.userConfirmationString || v === 'Please enter the confirmation'
     }
+    return data
   },
   computed: {
     isEnabled () {
@@ -69,13 +72,19 @@ export default {
     }
   },
   methods: {
-    enableFeature () {
+    toggleSetting (validationPassed) {
+      const updatedValue = !this.isEnabled
+      if (updatedValue === false && !validationPassed) {
+        // disabling the features requires user confirmation
+        // which is checked by validating the form
+        return
+      }
+
       const wiki = this.wikiId
       const setting = 'wwExtEnableWikibaseLexeme'
-      const value = !this.isEnabled
 
-      this.$store.dispatch('updateSetting', { wiki, setting, value })
-        .then(() => this.$store.dispatch('setLexemeEnabled', value))
+      this.$store.dispatch('updateSetting', { wiki, setting, value: updatedValue })
+        .then(() => this.$store.dispatch('setLexemeEnabled', updatedValue))
         .catch(err => {
           console.log(err.response)
           alert('Something went wrong.')
@@ -83,11 +92,9 @@ export default {
 
       this.hideModal()
     },
-    confirmAction () {
-      const formValidation = this.$refs.form.validate()
-      if (formValidation) {
-        this.enableFeature()
-      }
+    handleSubmit (e) {
+      e.preventDefault()
+      this.toggleSetting(this.$refs.form.validate())
     },
     hideModal () {
       this.dialog = false