New Stuff

.env

@@ -0,0 +1 @@
+VUE_APP_API_URL=https://api.account.keks.cloud

.env.development

@@ -0,0 +1 @@
+VUE_APP_API_URL=http://localhost:8000/

package-lock.json

@@ -2392,6 +2392,22 @@
         "resolve": "^1.4.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -11996,6 +12012,14 @@
       "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
       "dev": true
     },
+    "vue-image-crop-upload": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/vue-image-crop-upload/-/vue-image-crop-upload-2.5.0.tgz",
+      "integrity": "sha512-AV+ZwPuaZ8tKdSopaSOCk4v0JqKZjFu6uLQg5D06pzt2GLcIR8NgrFz+/S0YN25RgkC4vHvUr9+XcNSUTk28ng==",
+      "requires": {
+        "babel-runtime": "^6.11.6"
+      }
+    },
     "vue-loader": {
       "version": "15.7.1",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "axios": "^0.18.1",
     "core-js": "^2.6.9",
     "vue": "^2.6.10",
+    "vue-image-crop-upload": "^2.5.0",
     "vue-router": "^3.1.2",
     "vuetify": "^2.0.5",
     "vuex": "^3.1.1"

src/components/UploadAppImage.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+
+        <div style="text-align: center">
+            <img :src="imgDataUrl"><br>
+            <v-btn
+                    depressed
+                    @click="toggleShow"
+            >Upload new Image</v-btn>
+        </div>
+        <my-upload field="img"
+                   @crop-success="cropSuccess"
+
+                   v-model="show"
+                   :width="300"
+                   :height="300"
+                   :url="uploadUrl"
+                   :params="params"
+                   :headers="headers"
+                   lang-type="en"
+                   img-format="png"></my-upload>
+
+    </div>
+</template>
+<script>
+    //import 'babel-polyfill'; // es6 shim
+    import myUpload from 'vue-image-crop-upload';
+
+    export default {
+        data () {
+            return {
+                show: false,
+                uploadUrl: process.env.VUE_APP_API_URL+"api/v1/app/"+this.appId+"/changeImage",
+                params: {
+                    token: '123456798',
+                    name: 'avatar'
+                },
+                headers: {
+                    Authorization: 'ERROR'
+                },
+                imgDataUrl: '' // the datebase64 url of created image
+            }
+        },
+        props: [
+            'appId',
+        ],
+        components: {
+            'my-upload': myUpload
+        },
+        mounted: function() {
+          let token = localStorage.getItem("access_token");
+          this.headers["Authorization"] = "Bearer "+token
+        },
+        methods: {
+            toggleShow() {
+                this.show = !this.show;
+            },
+            /**
+             * crop success
+             *
+             * [param] imgDataUrl
+             * [param] field
+             */
+            cropSuccess(imgDataUrl, field){
+                this.imgDataUrl = imgDataUrl;
+            },
+        }
+    }
+</script>

src/services/Api.js

@@ -3,7 +3,7 @@ import axios from 'axios'
 export default() => {
     return axios.create({
         //baseURL: `http://127.0.0.1:8000/api/`,
-        baseURL: `https://api.account.keks.cloud/api/`,
+        baseURL: process.env.VUE_APP_API_URL+`api/`,
         withCredentials: false,
         headers: {
             'Accept': 'application/json',

src/services/Apps.js

@@ -5,7 +5,7 @@ export default {
         return Api().get('/v1/app')
     },
     getAppImage(id) {
-        return "https://api.account.keks.cloud/gui/apps/"+id+"/icon";
+        return process.env.VUE_APP_API_URL+"gui/apps/"+id+"/icon";
     },
     getApp(id) {
         return Api().get('/v1/app/'+id)
@@ -31,4 +31,4 @@ export default {
     newApp(name, description, url) {
         return Api().post('/v1/app', {name: name, description: description, url: url});
     }
-}
+}

src/views/AppDetails.vue

@@ -20,7 +20,7 @@
 
                             <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;width: 100px;">
+                                    <img :src="imageUrl" style="float: right;max-width: 300px;">
                                     <b>Description</b><br>
                                     {{ app.description }}<br><br>
                                     <a :href="app.url">{{ app.url }}</a>
@@ -135,7 +135,7 @@
                                             <v-btn color="success" @click="updateSettings()" >Speichern</v-btn>
                                         </v-flex>
                                         <v-flex md4>
-                                            IMAGE
+                                            <UploadAppImage :appId="app.id"></UploadAppImage>
                                         </v-flex>
 
                                     </v-layout>
@@ -144,6 +144,9 @@
                             <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
@@ -190,16 +193,23 @@
                                 </v-container>
                             </v-tab-item>
                             <v-tab-item :key="4" :transition="false"  :reverse-transition="false">
-                                <v-container style="padding-right: 0px; padding-left:0px;">
+
-                                        <table>
+                                <v-simple-table>
-                                            <tr>
+                                    <template v-slot:default>
-                                                <th>Username</th>
+                                        <thead>
-                                            </tr>
+                                        <tr>
-                                            <tr v-for="user in appUser">
+                                            <th class="text-left">Username</th>
-                                                <td>{{ user.username }}</td>
+                                            <th class="text-right">Actions</th>
-                                            </tr>
+                                        </tr>
-                                        </table>
+                                        </thead>
-                                </v-container>
+                                        <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>
@@ -221,6 +231,7 @@
     import UserService from '../services/User'
     import LoginComponent from '../components/Login'
     import AppService from '../services/Apps'
+    import UploadAppImageComponent from '../components/UploadAppImage'
 
     export default {
         data () {
@@ -231,7 +242,8 @@
             }
         },
         components: {
-            "Login": LoginComponent
+            "Login": LoginComponent,
+            "UploadAppImage": UploadAppImageComponent
         },
         methods: {
             'updateSettings': function () {