keksCloud
/
keksAccountGUI
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Stuff

This commit is contained in:
Kekskurse 2019-11-22 12:06:33 +01:00
parent 8e871c372d
commit 1ff25f266c
13 changed files with 260 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

2
src/App.vue
View File

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

8
src/components/AppCards.vue
View File

@ -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>

20
src/components/Menu2.vue
View File

@ -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 () {

161
src/components/MenuMobile.vue
View File

@ -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-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-item>
<v-list-tile>
<v-list-tile-action>
<v-icon>home</v-icon>
</v-list-tile-action>
<v-list-tile-title>Apps</v-list-tile-title>
</v-list-tile>
<v-list-item-content>
<v-list-item-title>Keks Account</v-list-item-title>
</v-list-item-content>
</v-list-item>
<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"
value="true"
no-action
>
<template v-slot:activator>
<v-list-tile>
<v-list-tile-title>Admin</v-list-tile-title>
</v-list-tile>
<v-list-item-icon>
<v-icon>mdi-account</v-icon>
</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-tile-action>
</v-list-tile-action>
<v-list-tile-title>Settings</v-list-tile-title>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
</v-list-tile-action>
<v-list-tile-title>Users</v-list-tile-title>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
</v-list-tile-action>
<v-list-tile-title>Apps</v-list-tile-title>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
</v-list-tile-action>
<v-list-tile-title>Invites</v-list-tile-title>
</v-list-tile>
<v-list-item
link
:to="{path: '/profile'}"
>
<v-list-item-content>
<v-list-item-title>Profile</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item
link
:to="{path: '/access'}"
>
<v-list-item-content>
<v-list-item-title>App Access</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item
link
:to="{path: '/logout'}"
>
<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>

3
src/plugins/vuetify.js
View File

@ -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',
},
});

7
src/router/index.js
View File

@ -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',

5
src/services/Server.js
View File

@ -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")
}
}
}

9
src/services/User.js
View File

@ -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");
},

2
src/store/store.js
View File

@ -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
},

10
src/views/Access.vue
View File

@ -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>

137
src/views/Profile.vue Normal file
View File

@ -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>