changes to user login

src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="q-app">
-    <div v-if="status !== 'setup'">
+    <div v-if="user === null">
+      <select-user></select-user>
+    </div>
+    <div v-else-if="status !== 'setup'">
       <router-view />
     </div>
     <div v-else>
@@ -10,17 +13,22 @@
 </template>
 
 <script>
+import SelectUser from './pages/SelectUser'
 import Setup from './layouts/Setup'
 export default {
   name: 'App',
 
   components: {
-    Setup
+    Setup,
+    SelectUser
   },
 
   computed: {
     status () {
       return this.$store.state.app.status
+    },
+    user () {
+      return this.$store.state.app.user
     }
   },
 
@@ -29,6 +37,7 @@ export default {
     }
   },
   mounted () {
+    console.log(this.user)
     this.$store.dispatch('app/ping')
     // this.$store.dispatch('tiles/getApps')
     // this.$store.dispatch('tags/getTags')

src/components/MenuList.vue

@@ -1,4 +1,5 @@
 <template>
+<div>
   <q-list>
     <q-item-label header class="text-grey-8">Navigation</q-item-label>
     <EssentialLink
@@ -32,6 +33,11 @@
       link="/settings"
     />
   </q-list>
+  <div class="toolbar fixed-bottom">
+    <span @click="logout">Logout</span>
+    left Drawer toolbar
+  </div>
+</div>
 </template>
 
 <script>
@@ -67,6 +73,12 @@ export default {
   data () {
     return {
     }
+  },
+
+  methods: {
+    logout: function () {
+      this.$store.dispatch('app/logout')
+    }
   }
 }
 </script>

src/layouts/MainLayout.vue

@@ -14,21 +14,22 @@
         <q-toolbar-title>
           Heimdall
         </q-toolbar-title>
-
-          <q-chip
-            icon="bookmark"
-            clickable
-            :class="{ active: filter === null }"
-            @click="setFilter(null)"
-          >All</q-chip>
-          <q-chip
-            v-for="tag in tags"
-            :key="tag.id"
-            icon="bookmark"
-            clickable
-            :class="{ active: filter === tag.id }"
-            @click="setFilter(tag.id)"
-          >{{ tag.title }}</q-chip>
+          <div v-if="user !== null">
+            <q-chip
+              icon="bookmark"
+              clickable
+              :class="{ active: filter === null }"
+              @click="setFilter(null)"
+            >All</q-chip>
+            <q-chip
+              v-for="tag in tags"
+              :key="tag.id"
+              icon="bookmark"
+              clickable
+              :class="{ active: filter === tag.id }"
+              @click="setFilter(tag.id)"
+            >{{ tag.title }}</q-chip>
+          </div>
 
       </q-toolbar>
     </q-header>
@@ -61,6 +62,9 @@ export default {
   computed: {
     tags () {
       return this.$store.state.tags.all
+    },
+    user () {
+      return this.$store.state.app.user
     }
   },
 

src/layouts/Setup.vue

@@ -60,7 +60,7 @@
         </q-stepper-navigation>
       </q-step>
 
-      <q-step
+      <!--<q-step
         :name="2"
         title="Check which features can be enabled"
         icon="apps"
@@ -87,7 +87,7 @@
           <q-btn color="primary" label="Finish" />
           <q-btn flat @click="step = 2" color="primary" label="Back" class="q-ml-sm" />
         </q-stepper-navigation>
-      </q-step>
+      </q-step>-->
     </q-stepper>
   </div>
       </q-page>
@@ -133,5 +133,6 @@ export default {
 <style lang="scss" scoped>
 .q-field--outlined {
   margin-top: 20px;
+  background: #f1f1f1;
 }
 </style>

src/pages/SelectUser.vue

@@ -0,0 +1,192 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header bordered>
+      <q-toolbar>
+
+        <q-toolbar-title>
+          Heimdall
+        </q-toolbar-title>
+
+      </q-toolbar>
+    </q-header>
+
+    <q-page-container id="app">
+
+      <q-page class="flex flex-center" style="padding: 30px;">
+        <q-card class="user-signin">
+          <div class="avatar-container flex flex-center">
+            <q-avatar size="124px" color="orange" v-html="mainIcon">
+            </q-avatar>
+          </div>
+          <div class="sign-in-container">
+            <q-select
+              outlined
+              v-model="selecteduser"
+              :options="users"
+              label="Select user"
+              color="teal"
+              clearable
+              option-value="id"
+              option-label="username"
+            >
+              <template v-slot:option="scope">
+                <q-item
+                  v-bind="scope.itemProps"
+                  v-on="scope.itemEvents"
+                >
+                  <q-item-section avatar>
+                    <q-avatar size="24px">
+                      <img :src="scope.opt.avatar || 'statics/heimdall-icon-small.png'" />
+                    </q-avatar>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label v-html="scope.opt.username" />
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+            <div class="public-option" v-if="hasPublic">
+              <q-btn @click="selectUser" unelevated color="cyan-5" style="width: 50%;" class="">View public page</q-btn>
+              <span class="or"><span>or</span></span>
+            </div>
+            <q-input v-model="password" label="Password" outlined :type="isPwd ? 'password' : 'text'">
+              <template v-slot:append>
+                <q-icon
+                  :name="isPwd ? 'visibility_off' : 'visibility'"
+                  class="cursor-pointer"
+                  @click="isPwd = !isPwd"
+                />
+              </template>
+            </q-input>
+            <q-btn unelevated color="cyan-8" style="padding: 10px;" class="full-width">Login</q-btn>
+          </div>
+        </q-card>
+      </q-page>
+
+    </q-page-container>
+  </q-layout>
+
+</template>
+
+<script>
+
+export default {
+  name: 'SelectUser',
+
+  components: {
+  },
+
+  computed: {
+    users () {
+      // replace with vuex stor eventually
+      return [
+        {
+          id: 1,
+          username: 'admin',
+          avatar: null,
+          public: true
+        },
+        {
+          id: 2,
+          username: 'kode',
+          avatar: null,
+          public: false
+        }
+      ]
+    },
+    mainIcon () {
+      if (this.icon !== null) {
+        return '<img src="' + this.icon + '" />'
+      }
+      return '<img src="statics/heimdall-icon-small.png" />'
+    },
+    hasPublic () {
+      if (this.selecteduser !== null && this.selecteduser.public === true) {
+        return true
+      }
+      return false
+    }
+  },
+
+  data () {
+    return {
+      icon: null,
+      selecteduser: null,
+      password: '',
+      isPwd: true
+    }
+  },
+
+  methods: {
+    selectUser () {
+      this.$store.dispatch('app/setUser', this.users[this.selecteduser])
+    }
+  },
+
+  mounted () {
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .public-option {
+    display: flex;
+    margin-bottom: 25px;
+  }
+  .avatar-container {
+    padding: 30px;
+    background: #ccc;
+    img {
+      display: block;
+    }
+  }
+  .user-signin {
+    width: 100%;
+    max-width: 400px;
+  }
+  .sign-in-container {
+    padding: 20px;
+    background: #f1f1f1;
+  }
+  .q-field--outlined {
+    margin-bottom: 20px;
+  }
+  .or {
+    display: flex;
+    padding: 10px 0;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: calc(50% - 20px);
+    margin-left: 20px;
+    &:before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 0px;
+      right: 0;
+      border-top: 1px solid #dedede;
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 0px;
+      right: 0;
+      margin-top: 1px;
+      border-top: 1px solid #f9f9f9;
+    }
+    span {
+      display: flex;
+      width: 35px;
+      height: 35px;
+      justify-content: center;
+      align-items: center;
+      background: #e4e3e3;
+      border-radius: 50%;
+      position: relative;
+      z-index: 1;
+    }
+
+  }
+
+</style>

src/store/app/actions.js

@@ -16,6 +16,17 @@ export function setupUser (context, data) {
     .post(process.env.BACKEND_LOCATION + 'users', data)
     .then((response) => {
       // console.log(response.data)
-      context.commit('step', 2)
+      // context.commit('step', 2)
+      ping(context)
     })
 }
+
+export function setUser (context, user) {
+  // console.log(data)
+  context.commit('setUser', user)
+}
+
+export function logout (context) {
+  // console.log(data)
+  context.commit('logout')
+}

src/store/app/mutations.js

@@ -5,3 +5,11 @@ export function ping (state, data) {
 export function step (state, data) {
   state.setup.step = data
 }
+
+export function setUser (state, user) {
+  state.user = user
+}
+
+export function logout (state) {
+  state.user = null
+}

src/store/app/state.js

@@ -1,6 +1,7 @@
 export default function () {
   return {
     status: null,
+    user: null,
     setup: {
       step: 1
     }