feat: ask confirmation for telmetry

components/smart/Toggle.vue

@@ -20,8 +20,8 @@ export default {
 
   methods: {
     toggle() {
-      const containsOnClass = this.$refs.toggle.classList.toggle("on")
+      // const containsOnClass = this.$refs.toggle.classList.toggle("on")
-      this.$emit("change", containsOnClass)
+      this.$emit("change")
     },
   },
 }

lang/en-US.json

@@ -283,6 +283,8 @@
   "are_you_sure_remove_folder": "Are you sure you want to remove this folder?",
   "are_you_sure_remove_request": "Are you sure you want to remove this request?",
   "are_you_sure_remove_environment": "Are you sure you want to remove this environment?",
+  "are_you_sure_remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
+  "telemetry_helps_us": "Telemetry helps us to personalize our operations and deliver the best experience to you.",
   "select_next_method": "Select Next method",
   "select_previous_method": "Select Previous method",
   "select_get_method": "Select GET method",

pages/settings.vue

@@ -200,10 +200,7 @@
           </SmartToggle>
         </div>
         <span>
-          <SmartToggle
+          <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
-            :on="TELEMETRY_ENABLED"
-            @change="toggleSetting('TELEMETRY_ENABLED')"
-          >
             {{ $t("telemetry") }}
             {{ TELEMETRY_ENABLED ? $t("enabled") : $t("disabled") }}
           </SmartToggle>
@@ -211,6 +208,17 @@
       </div>
     </AppSection>
     <FirebaseEmail :show="showEmail" @hide-modal="showEmail = false" />
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="`${$t('are_you_sure_remove_telemetry')} ${$t(
+        'telemetry_helps_us'
+      )}`"
+      @hide-modal="confirmRemove = false"
+      @resolve="
+        toggleSetting('TELEMETRY_ENABLED')
+        confirmRemove = false
+      "
+    />
   </div>
 </template>
 
@@ -252,6 +260,10 @@ export default Vue.extend({
 
       currentBackendUser: null,
       currentUser: null,
+
+      confirmRemove: false,
+
+      TELEMETRY_ENABLED: null,
     }
   },
   subscriptions() {
@@ -302,6 +314,10 @@ export default Vue.extend({
     },
   },
   methods: {
+    showConfirmModal() {
+      if (this.TELEMETRY_ENABLED) this.confirmRemove = true
+      else toggleSetting("TELEMETRY_ENABLED")
+    },
     applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
       applySetting(key, value)
     },