70 lines
2.6 KiB
Vue
70 lines
2.6 KiB
Vue
<template>
|
|
<div class="content-box mb-6 hover:border-neutral-200">
|
|
<div class="flex items-center text-neutral-800">
|
|
<Icon name="database" class="flex-none text-green-500"></icon>
|
|
<div class="flex-1 px-4">
|
|
<p class="uppercase text-xs text-neutral-500 pb-1 select-none">Database Name</p>
|
|
<p>{{database.name}}</p>
|
|
</div>
|
|
<div class="flex-1 px-4">
|
|
<p class="uppercase text-xs text-neutral-500 pb-1 select-none">Username</p>
|
|
<p>{{database.username}}</p>
|
|
</div>
|
|
<div class="flex-1 px-4">
|
|
<p class="uppercase text-xs text-neutral-500 pb-1 select-none">Password</p>
|
|
<p>
|
|
<code class="text-sm cursor-pointer" v-on:click="revealPassword">
|
|
<span class="select-none" v-if="!database.showPassword">
|
|
<Icon name="lock" class="h-3"/> ••••••
|
|
</span>
|
|
<span v-else>{{database.password}}</span>
|
|
</code>
|
|
</p>
|
|
</div>
|
|
<div class="flex-1 px-4">
|
|
<p class="uppercase text-xs text-neutral-500 pb-1 select-none">Server</p>
|
|
<p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
|
|
</div>
|
|
<div class="flex-none px-4">
|
|
<button class="btn btn-xs btn-secondary btn-red" v-on:click="showDeleteModal = true">
|
|
<Icon name="trash-2" class="w-3 h-3 mx-1"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<DeleteDatabaseModal
|
|
:database="database"
|
|
:isVisible="showDeleteModal"
|
|
v-on:close="showDeleteModal = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
import Icon from "@/components/core/Icon.vue";
|
|
import {ServerDatabase} from "@/api/server/types";
|
|
import DeleteDatabaseModal from "@/components/server/components/database/DeleteDatabaseModal.vue";
|
|
|
|
export default Vue.extend({
|
|
name: 'DatabaseRow',
|
|
components: {DeleteDatabaseModal, Icon},
|
|
props: {
|
|
database: {
|
|
type: Object as () => ServerDatabase,
|
|
required: true,
|
|
}
|
|
},
|
|
|
|
data: function () {
|
|
return {
|
|
showDeleteModal: false,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
revealPassword: function () {
|
|
this.database.showPassword = !this.database.showPassword;
|
|
},
|
|
},
|
|
})
|
|
</script>
|