This repository has been archived on 2024-07-27. You can view files and clone it, but cannot push or open issues or pull requests.
keksAccountGUI/src/views/Access.vue

135 lines
5.2 KiB
Vue
Raw Normal View History

2019-09-25 09:00:55 +00:00
<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">Created at</th>
<th class="text-left">Info</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>{{ item.created }}</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 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>