extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-02-22 21:30:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Set modal as component

Browse Source
This commit is contained in:
Bubka 2019-12-21 23:25:19 +01:00
parent c83ca7a885
commit f968668d82
4 changed files with 41 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/components/Modal.vue
View File

@ -2,7 +2,15 @@
<div class="modal modal-otp" v-bind:class="{ 'is-active': isActive }">
<div class="modal-background" @click.stop="closeModal"></div>
<div class="modal-content">
<slot></slot>
<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>

26
resources/js/components/ModalTwofaccount.vue
View File

@ -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>

22
resources/js/components/TwofaccountShow.vue Normal file
View File

@ -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>

20
resources/js/views/Accounts.vue
View File

@ -9,30 +9,29 @@
</span>
</div>
</div>
<modal v-model="ModalIsActive">
<modal-twofaccount
<modal v-model="ShowTwofaccountInModal">
<twofaccount-show
:twofaccountid='twofaccount.id'
:name='twofaccount.name'
:icon='twofaccount.icon'
:email='twofaccount.email'>
<one-time-password ref="OneTimePassword"></one-time-password>
</modal-twofaccount>
<one-time-password ref="OneTimePassword"></one-time-password>
</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;
})
}