Stuff

package-lock.json

@@ -960,6 +960,12 @@
         "postcss": "^7.0.0"
       }
     },
+    "@mdi/font": {
+      "version": "4.5.95",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-4.5.95.tgz",
+      "integrity": "sha512-AjR2Zgu1feBXWlTfEjD6JQqLAMCqYn2Gzia5PWqFnysvz5F6JmPHtQFldIHXqyv2s/FwME7ZDBc5N86NEHbyvQ==",
+      "dev": true
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "vuex": "^3.1.1"
   },
   "devDependencies": {
+    "@mdi/font": "^4.5.95",
     "@vue/cli-plugin-babel": "^3.10.0",
     "@vue/cli-plugin-eslint": "^3.10.0",
     "@vue/cli-service": "^3.10.0",

src/App.vue

@@ -2,7 +2,7 @@
   <v-app  style="background-color:#ffffff">
       <div v-if="$store.getters.getAllDataLoaded">
           <Menu></Menu>
-          <!--<MenuMobile></MenuMobile>!-->
+          <MenuMobile></MenuMobile>
 
 
 

src/components/AppCards.vue

@@ -29,11 +29,6 @@
     import AppService from '../services/Apps'
 
     export default {
-        data () {
-            return {
-                apps: []
-            }
-        },
         props: [
             'apps'
         ],
@@ -41,9 +36,6 @@
             'getImageUrl' : function (id) {
                 return AppService.getAppImage(id);
             },
-        },
-        mounted: function() {
-            console.log("APPCARDSW");
         }
     }
 </script>

src/components/Menu2.vue

@@ -2,20 +2,23 @@
     <v-app-bar
             :color="bgcolor"
 
-            style="z-index: 10;"
+            style="z-index: 1;"
             v-scroll="handleScroll"
             :flat="flat"
             fixed
 
 
     >
-       <!-- <v-app-bar-nav-icon></v-app-bar-nav-icon>!-->
+       <v-app-bar-nav-icon class="d-flex d-md-none" @click="toggleMenu()"></v-app-bar-nav-icon>
 
         <v-toolbar-title><b>{{nameBig}}</b>{{nameSmall}}</v-toolbar-title>
 
+
+
         <v-spacer></v-spacer>
         <!-- User not Logged in !-->
         <v-btn
+                class="d-none d-md-flex"
                 v-if="!this.$store.state.loggedIn"
                 :to="{path: '/login'}"
                 tile
@@ -24,6 +27,7 @@
         >Login</v-btn>
 
         <v-btn
+                class="d-none d-md-flex"
                 v-if="!this.$store.state.loggedIn && this.$store.getters.getSettingValue('invites')"
                 :to="{path: '/invited'}"
         tile
@@ -31,6 +35,7 @@
         height="100%"
         >Invited</v-btn>
         <v-btn
+                class="d-none d-md-flex"
                 v-if="!this.$store.state.loggedIn && this.$store.getters.getSettingValue('registration_possible')"
                 :to="{path: '/register'}"
                 tile text height="100%"
@@ -38,6 +43,7 @@
 
         <!-- User logged in !-->
         <v-btn
+                class="d-none d-md-flex"
                 v-if="this.$store.state.loggedIn"
                 :to="{path: '/dashboard'}"
                 tile
@@ -45,6 +51,7 @@
                 height="100%"
         >Dashboard</v-btn>
         <v-btn
+                class="d-none d-md-flex"
                 v-if="this.$store.state.loggedIn && this.$store.getters.getMe.developer"
                 :to="{path: '/apps'}"
                 tile
@@ -52,18 +59,22 @@
                 height="100%"
         >Developer</v-btn>
         <v-menu
+
                 left
                 bottom
                 offset-y
                 v-if="this.$store.state.loggedIn"
         >
             <template v-slot:activator="{ on }">
-                <v-btn v-on="on" tile text height="100%">
+                <v-btn v-on="on" class="d-none d-md-flex" tile text height="100%">
                     {{$store.getters.getMe["username"]}}
                 </v-btn>
             </template>
 
             <v-list>
+                <v-list-item to="/profile">
+                    <v-list-item-title>Profile</v-list-item-title>
+                </v-list-item>
                 <v-list-item to="/access">
                     <v-list-item-title>App Access</v-list-item-title>
                 </v-list-item>
@@ -140,6 +151,9 @@
                 UserServie.logout();
                 this.$store.dispatch('checkAccount')
                 this.$router.push({"path": "login"})
+            },
+            toggleMenu: function () {
+                this.$store.state.sideMenu = !this.$store.state.sideMenu ;
             }
         },
         mounted: function () {

src/components/MenuMobile.vue

@@ -1,112 +1,85 @@
 <template>
     <v-navigation-drawer
-            stateless
             absolute
-            value="true"
+            temporary
             v-model="$store.state.sideMenu"
     >
         <v-list>
-            <v-list-tile>
+            <v-list-item>
-                <v-list-tile-action>
-                    <v-icon>home</v-icon>
-                </v-list-tile-action>
-                <v-list-tile-title>Home</v-list-tile-title>
-            </v-list-tile>
 
-            <v-list-tile>
+                <v-list-item-content>
-                <v-list-tile-action>
+                    <v-list-item-title>Keks Account</v-list-item-title>
-                    <v-icon>home</v-icon>
+                </v-list-item-content>
-                </v-list-tile-action>
+            </v-list-item>
-                <v-list-tile-title>Apps</v-list-tile-title>
+
-            </v-list-tile>
+            <v-divider></v-divider>
+
+            <v-list-item
+                    link
+                    :to="{path: '/dashboard'}"
+            >
+                <v-list-item-icon>
+                    <v-icon>mdi-view-dashboard</v-icon>
+                </v-list-item-icon>
+
+                <v-list-item-content>
+                    <v-list-item-title>Dashboard</v-list-item-title>
+                </v-list-item-content>
+            </v-list-item>
+
+            <v-list-item
+                    link
+                    :to="{path: '/apps'}"
+            >
+                <v-list-item-icon>
+                    <v-icon>mdi-code-tags</v-icon>
+                </v-list-item-icon>
+
+                <v-list-item-content>
+                    <v-list-item-title>Developer</v-list-item-title>
+                </v-list-item-content>
+            </v-list-item>
 
             <v-list-group
-                    prepend-icon="account_circle"
+                    no-action
-                    value="true"
             >
                 <template v-slot:activator>
-                    <v-list-tile>
+                        <v-list-item-icon>
-                        <v-list-tile-title>Admin</v-list-tile-title>
+                            <v-icon>mdi-account</v-icon>
-                    </v-list-tile>
+                        </v-list-item-icon>
+
+                        <v-list-item-content>
+                            <v-list-item-title>Kekskurse</v-list-item-title>
+                        </v-list-item-content>
                 </template>
 
-                <v-list-tile>
+                <v-list-item
-                    <v-list-tile-action>
+                        link
-                    </v-list-tile-action>
+                        :to="{path: '/profile'}"
-                    <v-list-tile-title>Settings</v-list-tile-title>
+                >
-                </v-list-tile>
+                    <v-list-item-content>
-                <v-list-tile>
+                        <v-list-item-title>Profile</v-list-item-title>
-                    <v-list-tile-action>
+                    </v-list-item-content>
-                    </v-list-tile-action>
+                </v-list-item>
-                    <v-list-tile-title>Users</v-list-tile-title>
+                <v-list-item
-                </v-list-tile>
+                        link
-                <v-list-tile>
+                        :to="{path: '/access'}"
-                    <v-list-tile-action>
+                >
-                    </v-list-tile-action>
+                    <v-list-item-content>
-                    <v-list-tile-title>Apps</v-list-tile-title>
+                        <v-list-item-title>App Access</v-list-item-title>
-                </v-list-tile>
+                    </v-list-item-content>
-                <v-list-tile>
+                </v-list-item>
-                    <v-list-tile-action>
+                <v-list-item
-                    </v-list-tile-action>
+                        link
-                    <v-list-tile-title>Invites</v-list-tile-title>
+                        :to="{path: '/logout'}"
-                </v-list-tile>
+                >
-
+                    <v-list-item-content>
-
+                        <v-list-item-title>Logout</v-list-item-title>
+                    </v-list-item-content>
+                </v-list-item>
             </v-list-group>
 
-            <v-list-group
-                    prepend-icon="account_circle"
-                    value="true"
-            >
-                <template v-slot:activator>
-                    <v-list-tile>
-                        <v-list-tile-title>Users</v-list-tile-title>
-                    </v-list-tile>
-                </template>
-                <v-list-group
-                        no-action
-                        sub-group
-                        value="true"
-                >
-                    <template v-slot:activator>
-                        <v-list-tile>
-                            <v-list-tile-title>Admin</v-list-tile-title>
-                        </v-list-tile>
-                    </template>
 
-                    <v-list-tile
-                            v-for="(admin, i) in admins"
-                            :key="i"
-                            @click=""
-                    >
-                        <v-list-tile-title v-text="admin[0]"></v-list-tile-title>
-                        <v-list-tile-action>
-                            <v-icon v-text="admin[1]"></v-icon>
-                        </v-list-tile-action>
-                    </v-list-tile>
-                </v-list-group>
-
-                <v-list-group
-                        sub-group
-                        no-action
-                >
-                    <template v-slot:activator>
-                        <v-list-tile>
-                            <v-list-tile-title>Actions</v-list-tile-title>
-                        </v-list-tile>
-                    </template>
-                    <v-list-tile
-                            v-for="(crud, i) in cruds"
-                            :key="i"
-                            @click=""
-                    >
-                        <v-list-tile-title v-text="crud[0]"></v-list-tile-title>
-                        <v-list-tile-action>
-                            <v-icon v-text="crud[1]"></v-icon>
-                        </v-list-tile-action>
-                    </v-list-tile>
-                </v-list-group>
-            </v-list-group>
         </v-list>
     </v-navigation-drawer>
 </template>
@@ -184,4 +157,4 @@
             this.generateMenu();
         }
     }
-</script>
+</script>

src/plugins/vuetify.js

@@ -1,3 +1,4 @@
+import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 
@@ -5,6 +6,6 @@ Vue.use(Vuetify);
 
 export default new Vuetify({
   icons: {
-    iconfont: 'mdiSvg',
+    iconfont: 'mdi',
   },
 });

src/router/index.js

@@ -12,6 +12,7 @@ import Mail from '../views/Mail'
 import Invite from '../views/Invite'
 import Register from '../views/Register'
 import Access from '../views/Access'
+import Profile from '../views/Profile'
 
 Vue.use(Router)
 
@@ -69,6 +70,12 @@ export default new Router({
             name: 'Access',
             component: Access
         },
+        {
+            beforeEnter: guard,
+            path: '/profile',
+            name: 'Profile',
+            component: Profile
+        },
         {
             beforeEnter: guard,
             path: '/apps/new',

src/services/Server.js

@@ -3,5 +3,8 @@ import Api from '@/services/Api'
 export default {
     getPublicSettings (params) {
         return Api().get('/v1/server/settings')
+    },
+    getStatus () {
+        return Api().get("/v1/status/check")
     }
-}
+}

src/services/User.js

@@ -17,12 +17,21 @@ export default {
     me() {
         return Api().get('/v1/user/me')
     },
+    mails() {
+        return Api().get('/v1/user/me/mails')
+    },
     logout() {
         localStorage.removeItem("access_token");
     },
     getMails() {
         return Api().get('/v1/user/me/mails');
     },
+    addMail(mail) {
+      return Api().post('/v1/user/me/mails', {mail: mail});
+    },
+    removeMail(mailID) {
+        return Api().delete('/v1/user/me/mail/'+mailID);
+    },
     getCaptchaSettings() {
         return Api().get("/v1/user/captcha");
     },

src/store/store.js

@@ -13,7 +13,7 @@ export default new Vuex.Store({
         me: [],
         redirectIfLoggedIn: null,
         settings: [], // The TV inventory
-        sideMenu: false, //Toggle Side Menu on side Bar,
+        sideMenu: true, //Toggle Side Menu on side Bar,
         error: false
     },
 

src/views/Access.vue

@@ -13,8 +13,11 @@
                             <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-left">Info</th>
+
                                 <th class="text-right" style="max-width: 200px;">Actions</th>
                             </tr>
                             </thead>
@@ -24,7 +27,6 @@
                                     <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 }">
@@ -39,6 +41,10 @@
                                         <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>

src/views/Profile.vue

@@ -0,0 +1,137 @@
+<template>
+    <div style="margin-top:50px;">
+        <v-container grid-list-md pa-10 >
+            <v-layout row wrap>
+                <v-flex md12>
+                    <h1>Profile</h1>
+                    <br><br>
+                    <h2>E-Mail</h2>
+                    <v-simple-table>
+                        <template v-slot:default>
+                            <thead>
+                            <tr>
+                                <th class="text-left">E-Mail</th>
+                                <th class="text-left">Status</th>
+                                <th class="text-left">Primary</th>
+                                <th class="text-right">Action</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr v-for="item in mails" :key="item.name">
+                                <td>{{ item.mail }}</td>
+                                <td>{{ item.status }}</td>
+                                <td>
+                                    <span v-if="item.primary">Yes</span>
+                                    <span v-if="!item.primary">No</span>
+                                </td>
+                                <td class="text-right">
+                                    <!--<v-btn depressed x-small :disabled="item.status == 'valide'" color="primary" style="margin-right: 10px;">Resend Validation</v-btn>!-->
+                                    <v-btn depressed x-small :disabled="item.primary" @click="removeMail(item.id)" color="error" style="margin-right: 10px;">Remove Mail</v-btn>
+                                    <v-btn depressed x-small :disabled="item.primary || item.status != 'valide'" color="success">Mark as Primary</v-btn>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </template>
+                    </v-simple-table>
+                    <h3>Add new Mail</h3>
+                    <p>If you add a new Mail we will send you a validation mail.</p>
+                    <v-text-field
+                            label="E-Mail"
+                            value=""
+                            v-model="newmail"
+
+                    ></v-text-field>
+                    <v-btn
+                            color="success"
+                            @click="addMail"
+                    >
+                        Add Mail
+                    </v-btn>
+                    <h2>Password</h2>
+                </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 AppCardsComponente from '../components/AppCards'
+
+    export default {
+        data () {
+            return {
+                nameBig: '',
+                nameSmall: '',
+                mails: [],
+                newmail: ''
+            }
+        },
+        components: {
+            "AppCards": AppCardsComponente
+        },
+        methods: {
+            "getMails": function () {
+                UserService.mails().then((res) => {
+                    this.mails = res.data.data;
+                })
+            },
+            "addMail": function () {
+                UserService.addMail(this.newmail).then((res) => {
+                    this.getMails();
+                });
+            },
+            "removeMail": function (id) {
+                UserService.removeMail(id).then((res) => {
+                   this.getMails();
+                });
+            }
+        },
+        mounted: function() {
+            this.nameBig = this.$store.getters.getSettingValue("name_big");
+            this.nameSmall = this.$store.getters.getSettingValue("name_small");
+            UserService.mails().then((res) => {
+               this.mails = res.data.data;
+            });
+        }
+    }
+</script>
+
+<style>
+    .header {
+        background-image: url('~@/assets/manhattan-407703_1920.jpg');
+        background-repeat: no-repeat;
+        margin-top: -100px;
+        height: 30vh;
+        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>