Set modal as component

resources/js/components/Modal.vue

@@ -2,8 +2,16 @@
     <div class="modal modal-otp" v-bind:class="{ 'is-active': isActive }">
       <div class="modal-background" @click.stop="closeModal"></div>
       <div class="modal-content">
+        <section class="section">
+            <div class="columns is-centered">
+                <div class="column is-three-quarters">
+                    <div class="box has-text-centered has-background-black-ter ">
                         <slot></slot>
                     </div>
+                </div>
+            </div>
+        </section>
+      </div>
       <button class="modal-close is-large" aria-label="close" @click.stop="closeModal"></button>
     </div>
 </template>

resources/js/components/ModalTwofaccount.vue

@@ -1,26 +0,0 @@
-<template>
-    <section class="section">
-        <div class="columns is-centered">
-            <div class="column is-three-quarters">
-                <div class="box has-text-centered has-background-black-ter ">
-                    <figure class="image is-64x64" style="display: inline-block">
-                        <img :src="icon">
-                    </figure>
-                    <p class="is-size-4 has-text-grey-light">{{ name }}</p>
-                    <p class="is-size-6 has-text-grey">{{ email }}</p>
-                    <slot></slot>
-                </div>
-            </div>
-        </div>
-    </section>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-            }
-        },
-        props: ['name', 'email', 'icon'],
-    }
-</script>

resources/js/components/TwofaccountShow.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <router-link :to="{ name: 'edit', params: { twofaccountId: twofaccountid }}">Edit</router-link>
+        <router-link :to="{ name: 'delete', params: { twofaccountId: twofaccountid }}">Delete</router-link>
+        <figure class="image is-64x64" style="display: inline-block">
+            <img :src="icon">
+        </figure>
+        <p class="is-size-4 has-text-grey-light">{{ name }}</p>
+        <p class="is-size-6 has-text-grey">{{ email }}</p>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+            }
+        },
+        props: ['twofaccountid', 'name', 'email', 'icon'],
+    }
+</script>

resources/js/views/Accounts.vue

@@ -9,30 +9,29 @@
                 </span>
             </div>
         </div>
-        <modal v-model="ModalIsActive">
+        <modal v-model="ShowTwofaccountInModal">
-            <modal-twofaccount
+            <twofaccount-show
+                :twofaccountid='twofaccount.id'
                 :name='twofaccount.name'
                 :icon='twofaccount.icon'
                 :email='twofaccount.email'>
                 <one-time-password ref="OneTimePassword"></one-time-password>
-            </modal-twofaccount>
+            </twofaccount-show>
         </modal>
     </div>
 </template>
 
 
-
-
 <script>
     import Modal from '../components/Modal'
-    import ModalTwofaccount from '../components/ModalTwofaccount'
+    import TwofaccountShow from '../components/TwofaccountShow'
     import OneTimePassword from '../components/OneTimePassword'
 
     export default {
         data(){
             return {
                 accounts : [],
-                ModalIsActive : false,
+                ShowTwofaccountInModal : false,
                 twofaccount: {}
             }
         },
@@ -57,10 +56,11 @@
                 console.log('modalClose triggered')
                 this.$refs.OneTimePassword.clearOTP()
             });
+
         },
         components: {
             Modal,
-            ModalTwofaccount,
+            TwofaccountShow,
             OneTimePassword
         },
         methods: {
@@ -80,7 +80,7 @@
 
                     this.$refs.OneTimePassword.AccountId = response.data.id
                     this.$refs.OneTimePassword.getOTP()
-                    this.ModalIsActive = true;
+                    this.ShowTwofaccountInModal = true;
 
                 })
             }