#88 refactor(frontend): extract to Component.
This commit is contained in:
		| @@ -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> | ||||
| @@ -1,35 +1,26 @@ | ||||
| <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> | ||||
|   <ReconciliationJar v-if="codeCorrect" /> | ||||
|   <div> | ||||
|     <CodeDialog @code-verified="activateComponent"/> | ||||
|   </div> | ||||
|   <ReconciliationJar v-if="showComponent" /> | ||||
| </template> | ||||
|  | ||||
| <script setup> | ||||
|   import { ref } from 'vue' | ||||
| <script > | ||||
|   import CodeDialog from '../components/CodeDialog.vue' | ||||
|  | ||||
|   const dialog = ref(true) | ||||
|   const code = ref('') | ||||
|   const codeCorrect = ref(false) | ||||
|  | ||||
|   function verifyCode() { | ||||
|     if (code.value === 'sin seguridad') { | ||||
|       codeCorrect.value = true; | ||||
|       dialog.value = false; | ||||
|     } else { | ||||
|       alert('Código incorrecto'); | ||||
|     } | ||||
|   export default { | ||||
|     data() { | ||||
|       return { | ||||
|         showComponent: false, | ||||
|       } | ||||
|     }, | ||||
|     components: { CodeDialog }, | ||||
|     methods: { | ||||
|       activateComponent(verified) { | ||||
|         if (verified) { | ||||
|           this.showComponent = true; | ||||
|         } | ||||
|       }, | ||||
|     }, | ||||
|   } | ||||
| </script> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user