141 lines
5.4 KiB
Vue
141 lines
5.4 KiB
Vue
<template>
|
|
<div style="margin-top:50px;">
|
|
<v-container grid-list-md pa-10 >
|
|
<v-layout row wrap>
|
|
<v-flex md12>
|
|
<h1>App Access</h1>
|
|
<br>
|
|
<p>The following Apps have Access to your Account, if you revoke the Access the app will get a notifcation about it an may will delete your data.</p>
|
|
|
|
<v-simple-table>
|
|
<template v-slot:default>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th class="text-left">Name</th>
|
|
<th class="text-left"></th>
|
|
|
|
<th class="text-left">Description</th>
|
|
<th class="text-left">Created at</th>
|
|
|
|
<th class="text-right" style="max-width: 200px;">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in access" :key="item.name">
|
|
<td style="width:30px;">
|
|
<img :src="getImageUrl(item.app.id)" style="max-width: 30px;">
|
|
</td>
|
|
<td>{{ item.app.name }}</td>
|
|
<td>
|
|
<v-tooltip v-if="item.app.properties.untrustedWarning" bottom>
|
|
<template v-slot:activator="{ on }">
|
|
<v-icon v-on="on">warning</v-icon>
|
|
</template>
|
|
<span>App is untrusted!</span>
|
|
</v-tooltip>
|
|
<v-tooltip v-if="item.app.properties.testingWarning" bottom>
|
|
<template v-slot:activator="{ on }">
|
|
<v-icon v-on="on">warning</v-icon>
|
|
</template>
|
|
<span>App is in testing modus!</span>
|
|
</v-tooltip>
|
|
</td>
|
|
|
|
<td>{{ item.app.description }}</td>
|
|
<td>{{ item.created }}</td>
|
|
|
|
<td class="text-right">
|
|
<v-btn target="_blank" :href="item.app.url" depressed x-small :disabled="!item.app.url" color="primary" style="margin-right: 10px;">Go to Webpage</v-btn>
|
|
<v-btn target="_blank" :href="item.app.directUrl" depressed x-small :disabled="!item.app.directUrl" color="primary" style="margin-right: 10px;">Login to</v-btn>
|
|
<v-btn @click="removeAppAccess(item.id)" depressed x-small :disabled="item.app.properties.userCantRemoveApp" color="error">Remove Access</v-btn>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</template>
|
|
</v-simple-table>
|
|
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import ServerService from '../services/Server'
|
|
import UserService from '../services/User'
|
|
import AppService from '../services/Apps'
|
|
import LoginComponent from '../components/Login'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
access: []
|
|
}
|
|
},
|
|
components: {
|
|
"Login": LoginComponent
|
|
},
|
|
methods: {
|
|
'getImageUrl' : function (id) {
|
|
return AppService.getAppImage(id);
|
|
},
|
|
removeAppAccess: function(accessId) {
|
|
AppService.removeAccess(accessId).then((res) => {
|
|
AppService.getAccessList().then((res) => {
|
|
this.access = res.data.data
|
|
});
|
|
});
|
|
}
|
|
},
|
|
mounted: function() {
|
|
this.nameBig = this.$store.getters.getSettingValue("name_big");
|
|
this.nameSmall = this.$store.getters.getSettingValue("name_small");
|
|
AppService.getAccessList().then((res) => {
|
|
this.access = res.data.data
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.bg {
|
|
background-image: url('~@/assets/texture-1485529_1920.jpg');
|
|
}
|
|
.header2 {
|
|
background-image: url('~@/assets/texture-1485529_1920.jpg');
|
|
background-repeat: no-repeat;
|
|
margin-top: -100px;
|
|
height: 50vh;
|
|
text-align: center;
|
|
}
|
|
.header h1{
|
|
padding-top: 200px;
|
|
font-size: 56px !important;
|
|
font-weight: 400;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
.header h1 .small{
|
|
font-weight: 300 !important;
|
|
}
|
|
.header h2{
|
|
padding-top: 30px;
|
|
font-size: 34px !important;
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
h1{
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
h2{
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
</style>
|