Merge pull request #714 from citation-file-format/651-consider-giving-a-warning-before-resetting

add confirmation dialog to reset the form

Author: fdiblen

src/components/ScreenFinishAdvanced.vue

@@ -33,7 +33,7 @@
                     icon="refresh"
                     label="Reset form"
                     no-caps
-                    v-on:click="createAnother"
+                    v-on:click="confirmAndReset"
                 />
             </div>
         </div>
@@ -50,6 +50,7 @@ import { computed, defineComponent } from 'vue'
 import DownloadButton from 'components/DownloadButton.vue'
 import { useApp } from 'src/store/app'
 import { useCff } from 'src/store/cff'
+import { useQuasar } from 'quasar'
 import { useStepperErrors } from 'src/store/stepper-errors'
 import { useValidation } from 'src/store/validation'
 
@@ -63,13 +64,21 @@ export default defineComponent({
         const { reset: resetCffData } = useCff()
         const { reset: resetStepperErrorState } = useStepperErrors()
         const { errors } = useValidation()
+        const q = useQuasar()
         return {
             isValidCFF: computed(() => errors.value.length === 0),
-            createAnother: async () => {
-                resetCffData()
-                resetStepperErrorState()
-                setShowAdvanced(false)
-                await setStepName('start')
+            confirmAndReset: () => {
+                q.dialog({
+                    title: 'Confirm',
+                    message: 'Would you like to reset the form? All changes will be lost.',
+                    cancel: true,
+                    persistent: true
+                }).onOk(async () => {
+                    resetCffData()
+                    resetStepperErrorState()
+                    setShowAdvanced(false)
+                    await setStepName('start')
+                })
             }
         }
     }