#88 refactor(frontend): extract to Component.

tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CodeDialog.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-dialog v-model="dialog" persistent>
+    <v-card>
+      <v-card-title>
+        Ingrese el código
+      </v-card-title>
+      <v-card-text>
+        <v-form id="code-form" @submit.prevent="verifyCode">
+          <v-text-field v-model="code" label="Código" type="password" autocomplete="off" />
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn type="submit" form="code-form">Aceptar</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialog: true,
+        code: '',
+      };
+    },
+    methods: {
+      verifyCode() {
+        if (this.code === 'sin seguridad') {
+          this.$emit('code-verified', true);
+          this.dialog = false;
+        } else {
+          alert('Código incorrecto');
+          this.$emit('code-verified', false);
+        }
+      }
+    },
+  }
+</script>

tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadrar_tarro.vue

@@ -1,35 +1,26 @@
 <template>
-  <v-dialog v-model="dialog" persistent>
+  <div>
-    <v-card>
+    <CodeDialog @code-verified="activateComponent"/>
-      <v-card-title>
+  </div>
-        Ingrese el código
+  <ReconciliationJar v-if="showComponent" />
-      </v-card-title>
-      <v-card-text>
-        <v-form id="code-form" @submit.prevent="verifyCode">
-          <v-text-field v-model="code" label="Código" type="password" autocomplete="off" />
-        </v-form>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn type="submit" form="code-form">Aceptar</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-  <ReconciliationJar v-if="codeCorrect" />
 </template>
 
-<script setup>
+<script >
-  import { ref } from 'vue'
+  import CodeDialog from '../components/CodeDialog.vue'
 
-  const dialog = ref(true)
+  export default {
-  const code = ref('')
+    data() {
-  const codeCorrect = ref(false)
+      return {
-
+        showComponent: false,
-  function verifyCode() {
+      }
-    if (code.value === 'sin seguridad') {
+    },
-      codeCorrect.value = true;
+    components: { CodeDialog },
-      dialog.value = false;
+    methods: {
-    } else {
+      activateComponent(verified) {
-      alert('Código incorrecto');
+        if (verified) {
-    }
+          this.showComponent = true;
+        }
+      },
+    },
   }
 </script>