Started adding users and fixed menu items

src/components/EditUser.vue

@@ -0,0 +1,107 @@
+<template>
+        <q-card style="width: calc(100% - 60px); max-width: 900px; background: #fcfcfc;">
+          <q-form @submit="onSubmit" class="">
+        <div class="popup-header">
+          <div class="text-h6">User</div>
+          <div class="actions">
+            <q-btn type="submit" flat>
+              <q-icon name="save" />
+              Save
+            </q-btn>
+            <q-btn flat v-close-popup>
+              <q-icon name="block" />
+              Cancel
+            </q-btn>
+          </div>
+        </div>
+        <q-separator />
+        <q-card-section class="q-pt-none">
+
+          <div id="create" class="create">
+
+        </div>
+
+        </q-card-section>
+
+            <div id="sapconfig"></div>
+
+        <q-separator />
+        <div class="popup-header">
+          <div class="text-h6"></div>
+          <div class="actions">
+            <q-btn type="submit" flat>
+              <q-icon name="save" />
+              Save
+            </q-btn>
+            <q-btn flat v-close-popup>
+              <q-icon name="block" />
+              Cancel
+            </q-btn>
+          </div>
+        </div>
+          </q-form>
+      </q-card>
+
+</template>
+
+<script>
+export default {
+  name: 'EdiUser',
+
+  props: ['user'],
+
+  components: {
+  },
+
+  computed: {
+  },
+
+  data () {
+    return {
+      id: this.application.id,
+      color: this.application.color,
+      applicationtype: this.application.applicationType || null,
+      title: this.application.title,
+      tags: this.tagsParse,
+      url: this.application.url,
+      icon: null,
+      possibletags: this.tagsParse,
+      submitEmpty: false,
+      submitResult: []
+    }
+  },
+
+  methods: {
+    async onSubmit (evt) {
+      const applicationType = (this.applicationtype !== null) ? this.applicationtype.appid : null
+      const formData = new FormData()
+      formData.append('color', this.color)
+      formData.append('applicationType', applicationType)
+      formData.append('title', this.title)
+      formData.append('tags', this.tags)
+      formData.append('url', this.url)
+      formData.append('icon', this.icon)
+      try {
+        await this.$store.dispatch('tiles/save', this.id, formData)
+        console.log('added')
+      } catch (e) {
+        console.log(e)
+      }
+    },
+    filterFn (val, update) {
+      update(() => {
+        if (val === '') {
+          this.possibletags = this.application.tags || []
+        } else {
+          const needle = val.toLowerCase()
+          const tags = this.application.tags || []
+          this.possibletags = tags.filter(
+            v => v.toLowerCase().indexOf(needle) > -1
+          )
+        }
+      })
+    }
+  }
+
+}
+</script>

src/components/MenuList.vue

@@ -9,8 +9,8 @@
       align="justify"
       narrow-indicator
     >
-      <q-tab class="bigtab" name="user" label="User" />
-      <q-tab class="bigtab" name="admin" label="Admin" />
+      <q-route-tab class="bigtab" to="/" name="user" label="User" />
+      <q-route-tab class="bigtab" to="/admin" name="admin" label="Admin" />
     </q-tabs>
 
     <q-separator />
@@ -27,13 +27,13 @@
           :title="this.$t('applications')"
           :caption="this.active_tiles + ' ' + (this.active_tiles === 1 ? this.$t('app') : this.$t('apps'))"
           icon="apps"
-          link="/item"
+          link="/user/item"
         />
         <EssentialLink
           :title="this.$t('settings')"
           :caption="this.settings + ' ' + (this.settings === 1 ? this.$t('setting') : this.$t('settings'))"
           icon="settings"
-          link="/settings"
+          link="/user/settings"
         />
 
       </q-tab-panel>
@@ -43,25 +43,25 @@
           :title="this.$t('applications')"
           :caption="this.active_tiles + ' ' + (this.active_tiles === 1 ? this.$t('app') : this.$t('apps'))"
           icon="apps"
-          link="/item"
+          link="/admin"
         />
         <EssentialLink
           :title="this.$t('user_management')"
           :caption="this.users + ' ' + (this.users === 1 ? this.$t('user') : this.$t('users'))"
           icon="contacts"
-          link="/user"
+          link="/admin/user"
         />
         <EssentialLink
           :title="this.$t('proxy_management')"
           :caption="this.proxies + ' ' + (this.proxies === 1 ? this.$t('proxy') : this.$t('proxies'))"
           icon="account_tree"
-          link="/proxy"
+          link="/admin/proxy"
         />
         <EssentialLink
           :title="this.$t('settings')"
           :caption="this.settings + ' ' + (this.settings === 1 ? this.$t('setting') : this.$t('settings'))"
           icon="settings"
-          link="/settings"
+          link="/admin/settings"
         />
 
       </q-tab-panel>

src/layouts/Tiles.vue

@@ -15,7 +15,7 @@
           Application Management
         </q-toolbar-title>
 
-        <q-btn size="15px" style="margin-left: 20px;" unelevated color="cyan-8" @click="showBack()">Add New</q-btn>
+        <q-btn size="15px" style="margin-left: 20px;" unelevated color="cyan-8" @click="createNew">Add New</q-btn>
         <div class="searchbox">
         <q-select
           borderless
@@ -104,6 +104,9 @@ export default {
     }
   },
   methods: {
+    createNew () {
+      this.$store.commit('tiles/create', true)
+    },
     filterFn (val, update, abort) {
       update(() => {
         // this.selectedapp = null

src/layouts/User.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-layout view="lhr lpR fFf">
-    <q-header class="alt-header" bordered>
+  <q-layout view="lHh Lpr lFf">
+    <q-header class="bg-grey-1 text-grey-7" bordered>
       <q-toolbar>
         <q-btn
           flat
@@ -12,20 +12,28 @@
         />
 
         <q-toolbar-title>
-          Heimdall
+          User Management
         </q-toolbar-title>
 
-        <div>v{{ this.version }}</div>
-
-        <q-btn
-          flat
-          dense
-          round
-          @click="rightDrawerOpen = !rightDrawerOpen"
-          icon="menu"
-          aria-label="Menu"
-        />
-
+        <q-btn size="15px" style="margin-left: 20px;" unelevated color="cyan-8" @click="createNew">Add New</q-btn>
+        <div class="searchbox">
+        <q-select
+          borderless
+          color="grey"
+          v-model="selecteduser"
+          use-input
+          clearable
+          input-debounce="0"
+          :options="options"
+          option-value="id"
+          option-label="title"
+          map-options
+          emit-value
+          label="Search..."
+          @filter="filterFn"
+        >
+        </q-select>
+        </div>
       </q-toolbar>
     </q-header>
 
@@ -38,18 +46,11 @@
       <MenuList></MenuList>
     </q-drawer>
 
-    <q-drawer
-      v-model="rightDrawerOpen"
-      side="right"
-      overlay
-      bordered
-      content-class="bg-grey-1"
-    > <span @click="rightDrawerOpen = !rightDrawerOpen" class="close">Close</span>
-      some stuff
-    </q-drawer>
-
     <q-page-container>
-      <router-view />
+      <router-view
+        :users="users"
+        :allusers="users"
+      />
     </q-page-container>
   </q-layout>
 </template>
@@ -65,12 +66,45 @@ export default {
     MenuList
   },
 
+  computed: {
+    allusers: function () {
+      return this.$store.state.users.all
+    },
+    users: function () {
+      if (this.selecteduser !== null) {
+        return this.allusers.filter(v => v.id === this.selecteduser)
+      } else if (this.options === null) {
+        return this.allusers
+      } else {
+        return this.options
+      }
+    }
+  },
+
   data () {
     return {
       leftDrawerOpen: false,
       rightDrawerOpen: false,
-      version: version
+      version: version,
+      selecteduser: null,
+      options: null
     }
+  },
+
+  methods: {
+    createNew () {
+      this.$store.commit('users/create', true)
+    },
+    filterFn (val, update, abort) {
+      update(() => {
+        // this.selecteduser = null
+        const needle = val.toLowerCase()
+        // console.log('needle: ' + needle)
+        this.options = this.allusers.filter(v => v.title.toLowerCase().indexOf(needle) > -1)
+      })
+    }
+
   }
+
 }
 </script>

src/pages/SelectUser.vue

@@ -11,7 +11,7 @@
     </q-header>
 
     <q-page-container id="app">
-
+      <q-form @submit="onSubmit" class="">
       <q-page class="flex flex-center" style="padding: 30px;">
         <q-card class="user-signin">
           <div class="avatar-container flex flex-center">
@@ -63,11 +63,11 @@
             </q-input>
             <q-input v-if="loginStatus === 'multifactor'" v-model="totp" :label="this.$t('totp')" outlined>
             </q-input>
-            <q-btn @click="login" unelevated color="cyan-8" style="padding: 10px;" class="full-width">Login</q-btn>
+            <q-btn type="submit" unelevated color="cyan-8" style="padding: 10px;" class="full-width">Login</q-btn>
           </div>
         </q-card>
       </q-page>
-
+      </q-form>
     </q-page-container>
   </q-layout>
 
@@ -122,14 +122,24 @@ export default {
     selectUser () {
       this.$store.dispatch('app/setUser', this.selecteduser)
     },
-
-    async login () {
+    async onSubmit (evt) {
       const username = (this.show_usernames === true) ? this.selecteduser.username : this.username
-      this.$store.dispatch('app/login', {
-        username: username,
-        password: this.password,
-        totp: this.totp || ''
-      })
+      try {
+        await this.$store.dispatch('app/login', {
+          username: username,
+          password: this.password,
+          totp: this.totp || ''
+        })
+        console.log('logged in')
+      } catch (e) {
+        this.$q.notify({
+          type: 'negative',
+          message: this.$t(e.response.data.result),
+          progress: true,
+          position: 'top',
+          timeout: 1500
+        })
+      }
     }
   },
 

src/pages/application/Index.vue

@@ -54,12 +54,24 @@ export default {
         url: '',
         icon: 'statics/img/heimdall-icon-small.png'
       }
+    },
+    create: {
+      get () {
+        return this.$store.state.tiles.create
+      },
+      set (val) {
+        this.$store.commit('tiles/create', val)
+      }
     }
   },
 
   data () {
     return {
-      create: false
+    }
+  },
+  methods: {
+    addApp: function () {
+      this.$store.commit('tiles/create', true)
     }
   },
   mounted () {

src/pages/user/Index.vue

@@ -10,21 +10,37 @@
         </user>
       </div>
     </div>
+
+    <q-dialog v-model="create">
+      <edit-user :application="createuser"></edit-user>
+    </q-dialog>
+
   </q-page>
 </template>
 
 <script>
 import User from 'components/User'
+import EditUser from 'components/EditUser'
 
 export default {
   name: 'PageIndex',
   components: {
-    User
+    User,
+    EditUser
   },
   computed: {
     users: function () {
       return this.$store.state.users.all
+    },
+    create: {
+      get () {
+        return this.$store.state.users.create
+      },
+      set (val) {
+        this.$store.commit('users/create', val)
+      }
     }
+
   },
 
   data () {

src/router/routes.js

@@ -8,28 +8,43 @@ const routes = [
     ]
   },
   {
-    path: '/item',
+    path: '/user/item',
     component: () => import('layouts/Tiles.vue'),
     children: [
       { path: '', component: () => import('pages/application/Index.vue') }
     ]
   },
   {
-    path: '/user',
+    path: '/user/settings',
+    component: () => import('layouts/User.vue'),
+    children: [
+      { path: '', component: () => import('pages/settings/Index.vue') }
+    ]
+  },
+
+  {
+    path: '/admin',
+    component: () => import('layouts/Tiles.vue'),
+    children: [
+      { path: '', component: () => import('pages/application/Index.vue') }
+    ]
+  },
+  {
+    path: '/admin/user',
     component: () => import('layouts/User.vue'),
     children: [
       { path: '', component: () => import('pages/user/Index.vue') }
     ]
   },
   {
-    path: '/settings',
+    path: '/admin/settings',
     component: () => import('layouts/User.vue'),
     children: [
       { path: '', component: () => import('pages/settings/Index.vue') }
     ]
   },
   {
-    path: '/proxy',
+    path: '/admin/proxy',
     component: () => import('layouts/User.vue'),
     children: [
       { path: '', component: () => import('pages/proxy/Index.vue') }

src/store/app/actions.js

@@ -1,42 +1,37 @@
 import axios from 'axios'
 import { Notify, Cookies, LocalStorage } from 'quasar'
 
-export function ping (context) {
-  // console.log(Cookies.getAll())
-  // console.log('ping')
-  // console.log(process.env.BACKEND_LOCATION + 'ping')
+export async function status (context) {
   // Check to see if we are in setup
   const setup = LocalStorage.getItem('heimdall_setup')
   if (setup !== null) {
-    context.commit('ping', 'setup')
+    context.commit('status', 'setup')
     context.commit('step', setup)
     return false
   }
 
-  axios
-    .get(process.env.BACKEND_LOCATION + 'ping', {
-      crossdomain: true
-    }).then((response) => {
-      // console.log(response.data)
-      context.commit('ping', response.data.status)
-
-      if (response.data.status === 'setup') {
-        context.commit('step', 1)
-      }
-
-      if (response.data.status === 'ok') {
+  try {
+    const response = await axios.get(process.env.BACKEND_LOCATION + 'status')
+    context.commit('status', response.data.status)
+    if (response.data.status === 'setup') {
+      context.commit('step', 1)
+    }
+    // see if already logged in
+    if (response.data.status === 'ok') {
+      if (response.data.result !== null) {
+        context.commit('setLoginStatus', 'logged_in')
         context.commit('setUser', response.data.result)
-        context.dispatch('tiles/getApps', null, { root: true })
       }
-    }).catch(() => {
-      Notify.create({
-        type: 'negative',
-        message: `Could not connect to backend server. ` + process.env.BACKEND_LOCATION + 'ping',
-        progress: true,
-        position: 'top',
-        timeout: 1500
-      })
+    }
+  } catch (e) {
+    Notify.create({
+      type: 'negative',
+      message: `Could not connect to backend server. ` + process.env.BACKEND_LOCATION + 'ping',
+      progress: true,
+      position: 'top',
+      timeout: 1500
     })
+  }
 }
 
 export async function setupUser (context, data) {
@@ -68,7 +63,19 @@ export async function setDefaults (context, data) {
 export function setupComplete (context) {
   LocalStorage.remove('heimdall_setup')
   console.log('finish')
-  ping(context)
+  status(context)
+}
+
+export async function auth (context) {
+  try {
+    const response = await axios.get(process.env.BACKEND_LOCATION + 'auth')
+    if (response.data.status === 'ok') {
+      context.commit('setUser', response.data.result)
+      context.dispatch('tiles/getApps', null, { root: true })
+    }
+  } catch (e) {
+    console.log(e)
+  }
 }
 
 export function setUser (context, user) {
@@ -89,27 +96,19 @@ export async function firelogin (context, data) {
 
 export async function login (context, data) {
   // console.log(data)
-  try {
-    const response = await firelogin(context, data)
-    switch (response.data.status) {
-      case 'ok':
-        ping(context)
-        context.commit('setLoginStatus', 'logged_in')
-        break
-      case 'multifactor':
-        context.commit('setLoginStatus', 'multifactor')
-        break
-    }
-    ping(context)
-  } catch (e) {
-    Notify.create({
-      type: 'negative',
-      message: e.response.data.result,
-      progress: true,
-      position: 'top',
-      timeout: 1500
-    })
+  const response = await firelogin(context, data)
+  console.log(response)
+  switch (response.data.status) {
+    case 'ok':
+      auth(context)
+      context.commit('setLoginStatus', 'logged_in')
+      break
+    case 'multifactor':
+      context.commit('setLoginStatus', 'multifactor')
+      break
   }
+  // ping(context)
+  return response
 }
 
 export function logout (context) {

src/store/app/mutations.js

@@ -1,6 +1,6 @@
 import { LocalStorage } from 'quasar'
 
-export function ping (state, data) {
+export function status (state, data) {
   state.status = data
 }
 

src/store/tiles/mutations.js

@@ -9,3 +9,7 @@ export function active (state, data) {
 export function possibleapps (state, data) {
   state.possibleapps = data
 }
+
+export function create (state, data) {
+  state.create = data
+}

src/store/tiles/state.js

@@ -2,6 +2,7 @@ export default function () {
   return {
     all: [],
     active: [],
-    possibleapps: []
+    possibleapps: [],
+    create: false
   }
 }

src/store/users/mutations.js

@@ -4,3 +4,7 @@ export function all (state, data) {
 
 export function saveUser (state, data) {
 }
+
+export function create (state, data) {
+  state.create = data
+}

src/store/users/state.js

@@ -1,5 +1,6 @@
 export default function () {
   return {
-    all: []
+    all: [],
+    create: false
   }
 }