278 lines
14 KiB
Vue
278 lines
14 KiB
Vue
<template>
|
|
<div style="margin-top: 50px;">
|
|
|
|
<v-container grid-list-md pa-10>
|
|
<v-layout row wrap>
|
|
<v-flex md12 v-if="app != null">
|
|
<h1>App {{ app.name }}</h1>
|
|
<v-card class="mx-auto" flat style="margin-top: 10px;">
|
|
<v-tabs
|
|
background-color="white"
|
|
color="fff"
|
|
left
|
|
|
|
>
|
|
<v-tab>Overview</v-tab>
|
|
<v-tab>API Access</v-tab>
|
|
<v-tab>Settings</v-tab>
|
|
<v-tab>Permissions</v-tab>
|
|
<v-tab>Users</v-tab>
|
|
|
|
<v-tab-item :key="1" :transition="false" :reverse-transition="false" >
|
|
<v-container style="padding-right: 0px; padding-left:0px;">
|
|
<img :src="imageUrl" style="float: right;max-width: 300px;">
|
|
<b>Description</b><br>
|
|
{{ app.description }}<br><br>
|
|
<a :href="app.url">{{ app.url }}</a>
|
|
</v-container>
|
|
|
|
</v-tab-item>
|
|
<v-tab-item :key="2" :transition="false" :reverse-transition="false">
|
|
<v-container style="padding-right: 0px; padding-left:0px;">
|
|
<h2>oAuth Token</h2>
|
|
<p>
|
|
Here are the oAuth API-Keys. You use this Keys to start the oAuth authorization work flow.
|
|
</p>
|
|
<v-text-field
|
|
label="API Key"
|
|
:value="app.apiKey"
|
|
hint="You can't edit this"
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="API Secret"
|
|
:value="app.apiSecret"
|
|
hint="You can't edit this"
|
|
></v-text-field>
|
|
<br>
|
|
<!--<h2>API Access</h2>
|
|
<p>
|
|
You can access the API to get informations about this APP with the following API Credentials:
|
|
<v-text-field
|
|
label="API Token"
|
|
value=""
|
|
disabled
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="Refresh Token"
|
|
value=""
|
|
disabled
|
|
></v-text-field>
|
|
<h2>Development Access</h2>
|
|
<p>
|
|
To test the App you can use the following Developer Access and Refresh token, they are connected to your user.
|
|
<v-text-field
|
|
label="Access Token"
|
|
value=""
|
|
disabled
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="Refresh Token"
|
|
value=""
|
|
disabled
|
|
></v-text-field>
|
|
</p>!-->
|
|
</v-container>
|
|
</v-tab-item>
|
|
<v-tab-item :key="3" :transition="false" :reverse-transition="false">
|
|
<v-container style="padding-right: 0px; padding-left:0px;">
|
|
<v-layout>
|
|
<v-flex md8>
|
|
<v-text-field
|
|
label="App Name"
|
|
v-model="app.name"
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="URL"
|
|
v-model="app.url"
|
|
></v-text-field>
|
|
<v-textarea
|
|
label="Description"
|
|
v-model="app.description"
|
|
|
|
></v-textarea>
|
|
<v-text-field
|
|
label="Direct Login URL"
|
|
v-model="app.directUrl"
|
|
hint="URL to login with this oAuth Provider"
|
|
></v-text-field>
|
|
<v-checkbox
|
|
v-model="app.properties.testingWarning"
|
|
label="Testing Warning"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.properties.untrustedWarning"
|
|
label="Untrusted Warning"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.properties.autoAccept"
|
|
label="Auto Accept"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.properties.showOnWebpage"
|
|
label="Show on Webpage"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.properties.stopAutoRedirect"
|
|
label="Stop Auto Redirect"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.properties.hideInAppList"
|
|
label="Hide in App List"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.properties.userCantRemoveApp"
|
|
label="Disabled user possible to remove App-Access"
|
|
disabled
|
|
></v-checkbox>
|
|
|
|
|
|
<v-btn color="success" @click="updateSettings()" >Speichern</v-btn>
|
|
</v-flex>
|
|
<v-flex md4>
|
|
<UploadAppImage :appId="app.id"></UploadAppImage>
|
|
</v-flex>
|
|
|
|
</v-layout>
|
|
</v-container>
|
|
</v-tab-item>
|
|
<v-tab-item :key="4" :transition="false" :reverse-transition="false">
|
|
<v-container style="padding-right: 0px; padding-left:0px;">
|
|
<p>
|
|
<v-alert type="warning">
|
|
This feature coming soon.
|
|
</v-alert>
|
|
Beim ändern der Permissions müssen alle User den Zugriff erneut bestätigen.
|
|
|
|
<v-checkbox
|
|
v-model="app.access.oAuth"
|
|
label="Use oAuth"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.access.api"
|
|
label="Make API-Requests"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.access.update_apps"
|
|
label="Update the Users App"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.access.update_profile"
|
|
label="Update the User Profile"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.access.update_access"
|
|
label="Update the User Access list (revoke Access)""
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.access.read_access"
|
|
label="Read all Access from the User"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.access.read_apps"
|
|
label="Read all Apps from the User"
|
|
disabled
|
|
></v-checkbox>
|
|
<v-checkbox
|
|
v-model="app.access.read_profile"
|
|
label="Read the User-Profil Information"
|
|
disabled
|
|
></v-checkbox>
|
|
</p>
|
|
</v-container>
|
|
</v-tab-item>
|
|
<v-tab-item :key="4" :transition="false" :reverse-transition="false">
|
|
|
|
<v-simple-table>
|
|
<template v-slot:default>
|
|
<thead>
|
|
<tr>
|
|
<th class="text-left">Username</th>
|
|
<th class="text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="user in appUser">
|
|
<td>{{ user.username }}</td>
|
|
<td class="text-right"><i>None</i></td>
|
|
</tr>
|
|
</tbody>
|
|
</template>
|
|
</v-simple-table>
|
|
</v-tab-item>
|
|
|
|
</v-tabs>
|
|
</v-card>
|
|
</v-flex>
|
|
|
|
|
|
|
|
</v-layout>
|
|
</v-container>
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import ServerService from '../services/Server'
|
|
import UserService from '../services/User'
|
|
import LoginComponent from '../components/Login'
|
|
import AppService from '../services/Apps'
|
|
import UploadAppImageComponent from '../components/UploadAppImage'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
app: null,
|
|
imageUrl: '',
|
|
appUser: []
|
|
}
|
|
},
|
|
components: {
|
|
"Login": LoginComponent,
|
|
"UploadAppImage": UploadAppImageComponent
|
|
},
|
|
methods: {
|
|
'updateSettings': function () {
|
|
AppService.updateApp(this.app).then((res) => {
|
|
if(res.data.success) {
|
|
alert("Änderung erfolgreich gespeichert");
|
|
} else {
|
|
alert("FEHLER: "+res.data.msg);
|
|
}
|
|
this.app = res.data.data;
|
|
}, (res) => {
|
|
alert("FEHLER: "+res.response.data.msg);
|
|
})
|
|
}
|
|
},
|
|
mounted: function() {
|
|
AppService.getApp(this.$route.params.id).then((res) => {
|
|
this.app = res.data.data;
|
|
})
|
|
AppService.getUser(this.$route.params.id).then((res) => {
|
|
console.log("Users", res.data.data)
|
|
this.appUser = res.data.data;
|
|
})
|
|
this.imageUrl = AppService.getAppImage(this.$route.params.id);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|