working login

.env

@@ -0,0 +1,3 @@
+VITE_BASE_URL="http://localhost:4056"
+VITE_PAY_URL="http://localhost:4052"
+VITE_AUTO_URL="http://localhost:4053"

quasar.config.ts

@@ -88,7 +88,7 @@ export default configure((/* ctx */) => {
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
     framework: {
-      config: {dark: true,},
+      config: {dark: true, },
 
       // iconSet: 'material-icons', // Quasar icon set
       // lang: 'en-US', // Quasar language pack
@@ -101,7 +101,7 @@ export default configure((/* ctx */) => {
       // directives: [],
 
       // Quasar plugins
-      plugins: []
+      plugins: ['Notify']
     },
 
     // animations: 'all', // --- includes all animations

src/layouts/AuthLayout.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+
+
+        <q-toolbar-title>
+          Auburn Oil
+        </q-toolbar-title>
+        <div>
+        </div>
+      </q-toolbar>
+    </q-header>
+
+
+    <q-page-container>
+      <router-view/>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import EssentialLink from 'components/EssentialLink.vue'
+import {useRoute} from 'vue-router' //
+
+
+export default defineComponent({
+  name: 'MainLayout',
+
+  components: {
+    EssentialLink
+  },
+
+  data() {
+    return {
+      leftDrawerOpen: false,
+
+    }
+  },
+
+  methods: {
+
+  }
+})
+</script>
+
+<style>
+
+.nodec {
+    text-decoration: none;
+  }
+
+
+</style>

src/layouts/MainLayout.vue

@@ -15,6 +15,18 @@
           Auburn Oil
         </q-toolbar-title>
         <div>
+        <div v-if="user">
+           Welcome {{employee.employee_first_name}} {{employee.employee_last_name}}
+        </div>
+        <div v-else>
+            <router-link :to="{ name: 'login' }" class="">
+            <q-btn color="secondary" label="Login"/>
+          </router-link>
+
+        </div>
+
+
+
         </div>
       </q-toolbar>
     </q-header>
@@ -25,6 +37,18 @@
       bordered
     >
       <q-list padding>
+        <router-link :to="{ name: 'home' }" class="nodec">
+          <q-item clickable v-ripple>
+            <q-item-section avatar>
+              <q-icon name="inbox"/>
+            </q-item-section>
+
+            <q-item-section>
+              Home
+            </q-item-section>
+          </q-item>
+        </router-link>
+
         <router-link :to="{ name: 'today' }" class="nodec">
           <q-item clickable v-ripple>
             <q-item-section avatar>
@@ -38,8 +62,8 @@
         </router-link>
 
         <router-link :to="{ name: 'stats' }" class="nodec">
-          <q-item  clickable v-ripple>
+          <q-item clickable v-ripple>
-            <q-item-section avatar>
+            <q-item-section avatar>label
               <q-icon name="star"/>
             </q-item-section>
 
@@ -87,7 +111,8 @@
 import {defineComponent} from 'vue'
 import EssentialLink from 'components/EssentialLink.vue'
 import {useRoute} from 'vue-router' //
-
+import authHeader from "../services/auth.header"
+import axios from "axios"
 
 export default defineComponent({
   name: 'MainLayout',
@@ -98,15 +123,79 @@ export default defineComponent({
 
   data() {
     return {
+      user: {
+        user_id: 0,
+        uuid: '',
+        api_key: '',
+        username: '',
+        password_hash: '',
+        member_since: '',
+        email: '',
+        last_seen: '',
+        admin: 0,
+        admin_role: 0,
+        confirmed: 0,
+
+      },
+      loaded: false,
+      employee: {
+        id: '',
+        employee_last_name: "",
+        employee_first_name: "",
+        employee_town: "",
+        employee_address: "",
+        employee_apt: "",
+        employee_zip: "",
+        employee_birthday: "",
+        employee_phone_number: "",
+        employee_start_date: "",
+        employee_end_date: "",
+        employee_type: '',
+        employee_state: '',
+      },
       leftDrawerOpen: false,
 
     }
   },
+  created() {
+    this.userStatus()
 
+  },
   methods: {
     toggleLeftDrawer() {
       this.leftDrawerOpen = !this.leftDrawerOpen
-    }
+    },
+    userStatus() {
+      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios({
+        method: 'get',
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.user = response.data.user;
+            this.getEmployee(this.user.user_id)
+          }
+        })
+    },
+    getEmployee(userid: any) {
+      let path = import.meta.env.VITE_BASE_URL + "/employee/" + userid;
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          if (response.data) {
+
+            this.employee = response.data;
+            this.loaded = true;
+          }
+        })
+    },
   }
 })
 </script>
@@ -114,8 +203,8 @@ export default defineComponent({
 <style>
 
 .nodec {
-    text-decoration: none;
+  text-decoration: none;
-  }
+}
 
 
 </style>

src/pages/IndexPage.vue

@@ -1,36 +1,135 @@
 <template>
-  <q-page >
+  <q-page>
- <div class="q-pa-md breakpoints">
+    <div class="q-pa-md breakpoints">
-    <div class="row   text-h5">
+      <div class="row   text-h5">
-      <div class="col-6">
+        <div class="col-6">
-        Todays Price
+          Price / Gallon:
+        </div>
+        <div class="col-6">
+          {{ today_oil_price }}
+        </div>
       </div>
-      <div class="col-6">
+      <div class="row   text-h5">
-     3.50
+        <div class="col-6">
+          Total Deliveries
+        </div>
+        <div class="col-6">
+          {{ delivery_count }}
+        </div>
       </div>
     </div>
-     <div class="row   text-h5">
-      <div class="col-6">
-        Total Deliveries
-      </div>
-      <div class="col-6">
-     100
-      </div>
-    </div>
- </div>
   </q-page>
 </template>
 
 <script lang="ts">
-
+import axios from 'axios'
-import { defineComponent } from 'vue'
+import {defineComponent} from 'vue'
+import authHeader from '../services/auth.header'
 
 export default defineComponent({
   name: 'IndexPage',
 
-  data () {
+  data() {
+    return {
+      token: null,
+      delivery_count: 0,
+      service_count: 0,
+      today_oil_price: '',
+      same_day: '',
+      price_hourly: '',
+      emergency_fee: '',
+      emergency_rate: '',
+      prime: '',
+      cleaning: '',
+      out_of_oil: '',
+
+      user: {
+        user_id: 0,
+        user_name: '',
+      },
+      employee: {
+        id: '',
+        user_id: '',
+        employee_last_name: "",
+        employee_first_name: "",
+        employee_town: "",
+        employee_address: "",
+        employee_apt: "",
+        employee_zip: "",
+        employee_birthday: "",
+        employee_phone_number: "",
+        employee_start_date: "",
+        employee_end_date: "",
+        employee_type: '',
+        employee_state: '',
+      },
+    }
+  },
+  mounted() {
+        this.userStatus()
+    this.get_employee();
+    this.today_delivery_count();
+    this.today_price_oil();
+  },
+  methods: {
+    userStatus() {
+      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios({
+        method: 'get',
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+          .then((response: any) => {
+            if (response.data.ok) {
+              this.user = response.data.user;
+            }
+          })
+          .catch(() => {
+            this.user = null
+          })
+    },
+    get_employee() {
+      let path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id;
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          this.employee = response.data;
+
+
+        })
+    },
+    today_delivery_count() {
+      let path = import.meta.env.VITE_BASE_URL + '/stats/delivery/count/today'
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          this.delivery_count = response.data.data;
+        })
+    },
+    today_price_oil() {
+      let path = import.meta.env.VITE_BASE_URL + '/info/price/oil'
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          this.today_oil_price = response.data.price;
+        })
+    },
+
+  },
 
-  }
 })
 </script>
 

src/pages/TodayDelivery.vue

@@ -1,18 +1,104 @@
 <template>
-  <q-page class="row  justify-evenly">
+  <q-page>
-today
+    <div class="q-pa-md breakpoints">
+      <div class="row   text-h5">
+
+      </div>
+    </div>
   </q-page>
 </template>
 
 <script lang="ts">
-
+import axios from 'axios'
-import { defineComponent } from 'vue'
+import {defineComponent} from 'vue'
+import authHeader from '../services/auth.header'
 
 export default defineComponent({
-  name: 'TodayDelivery',
+  name: 'todaydeliveries',
 
-  data () {
+  data() {
+    return {
+      token: null,
+      deliveries: [],
+      user: {
+        user_id: 0,
+        user_name: '',
+      },
+      employee: {
+        id: '',
+        user_id: '',
+        employee_last_name: "",
+        employee_first_name: "",
+        employee_town: "",
+        employee_address: "",
+        employee_apt: "",
+        employee_zip: "",
+        employee_birthday: "",
+        employee_phone_number: "",
+        employee_start_date: "",
+        employee_end_date: "",
+        employee_type: '',
+        employee_state: '',
+      },
+    }
+  },
+  mounted() {
+        this.userStatus()
 
-  }
+
+  },
+  methods: {
+    userStatus() {
+      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios({
+        method: 'get',
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+          .then((response: any) => {
+            if (response.data.ok) {
+              this.user = response.data.user;
+                this.get_employee();
+            }
+          })
+
+    },
+    get_employee() {
+      let path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id;
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          this.employee = response.data;
+              this.get_oil_orders()
+
+        })
+    },
+    get_oil_orders() {
+      let path = import.meta.env.VITE_BASE_URL + '/delivery/today/driver/' + this.user.user_id;
+      axios({
+        method: 'get',
+        url: path,
+             withCredentials: true,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.deliveries = response.data
+      })
+    },
+  },
 })
 </script>
+
+
+<style lang="sass">
+.breakpoints
+  .row > div
+    padding: 10px 15px
+
+  .row + .row
+    margin-top: 1rem
+</style>

src/pages/auth/Login.vue

@@ -0,0 +1,132 @@
+<template>
+  <q-page class=" window-height window-width row justify-center ">
+    <div class="column">
+      <div class="row text-center">
+        <h5 class="text-h5 text-white q-my-md text-center full-width ">Auburn Oil</h5>
+      </div>
+      <div class="row">
+     <q-form class="q-gutter-md"  @submit="onSubmit">
+
+          <q-card square bordered class="q-pa-lg shadow-1">
+
+            <q-card-section>
+
+                <q-input v-model="loginForm.username" square filled  type="text" label="username"/>
+                <q-input v-model="loginForm.password" square filled  type="password" label="password"/>
+
+            </q-card-section>
+            <q-card-actions class="q-px-md">
+              <q-btn type="Submit" unelevated color="light-blue-7" size="lg" class="full-width" label="Login"/>
+            </q-card-actions>
+
+            <q-card-section class="text-center q-pa-none">
+              <p class="text-grey-6">Not reigistered? Created an Account</p>
+            </q-card-section>
+          </q-card>
+   </q-form>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script lang="ts">
+
+import axios from "axios"
+import {defineComponent} from "vue"
+import authHeader from "../../services/auth.header"
+import {Notify} from 'quasar'
+
+export default defineComponent({
+  name: 'Login',
+  data() {
+    return {
+      loginForm: {
+        username: "",
+        password: "",
+      },
+    }
+  },
+  created() {
+    this.userStatus()
+  },
+  methods: {
+    userStatus() {
+      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+
+          if (response.data.ok) {
+            this.$router.push({name: "home"});
+          }
+        })
+        .catch(() => {
+        });
+    },
+    sendLogin(payLoad: { username: string; password: string }) {
+      let path = import.meta.env.VITE_BASE_URL + "/auth/login"
+      axios({
+        method: "post",
+        url: path,
+        data: payLoad,
+        withCredentials: true,
+      })
+        .then((response: any) => {
+          if (response.data.user) {
+            localStorage.setItem("auth_token", response.data.token);
+            localStorage.setItem("auth_user", response.data.user);
+            this.$router.push({name: "home"});
+
+            Notify.create({
+              message: 'You have been logged in!',
+              type: 'positive',
+              position: 'top',
+            })
+          } else if (response.data.locked) {
+            Notify.create({
+              message: "Account has been locked for security reasons.  Please unlock.",
+              type: 'negative',
+              position: 'top',
+
+            })
+            this.$router.push({name: "lostPassword"});
+          } else {
+            Notify.create({
+              message: "Authorization Failure",
+              type: 'negative',
+              position: 'top',
+            })
+          }
+        })
+        .catch(() => {
+
+          Notify.create({
+            message: "Authorization Failure",
+            type: 'negative',
+            position: 'top',
+          })
+
+        });
+    },
+    onSubmit() {
+      console.log("here")
+      const payLoad = {
+        username: this.loginForm.username,
+        password: this.loginForm.password,
+      };
+      this.sendLogin(payLoad);
+
+    },
+  },
+});
+</script>
+
+<style>
+.q-card {
+  width: 360px;
+}
+</style>

src/router/routes.ts

@@ -5,15 +5,21 @@ const routes: RouteRecordRaw[] = [
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      { path: '', component: () => import('pages/IndexPage.vue') },
+      { path: '',            name: 'home',      component: () => import('pages/IndexPage.vue') },
-       { path: '/today',  name: 'today', component: () => import('pages/TodayDelivery.vue') },
+       { path: '/today',     name: 'today',     component: () => import('pages/TodayDelivery.vue') },
-       { path: '/tomorrow',  name: 'tomorrow', component: () => import('pages/TomorrowDelivery.vue') },
+       { path: '/tomorrow',  name: 'tomorrow',  component: () => import('pages/TomorrowDelivery.vue') },
-       { path: '/automatic',  name: 'automatic', component: () => import('pages/Automatics.vue') },
+       { path: '/automatic', name: 'automatic', component: () => import('pages/Automatics.vue') },
-       { path: '/stats',  name: 'stats', component: () => import('pages/DriverStats.vue') },
+       { path: '/stats',     name: 'stats',     component: () => import('pages/DriverStats.vue') },
     ]
   },
 
-
+{
+    path: '/auth',
+    component: () => import('layouts/AuthLayout.vue'),
+    children: [
+      { path: '/login', name: 'login', component: () => import('pages/auth/Login.vue') },
+    ]
+  },
 
   // Always leave this as last one,
   // but you can also remove it

src/services/auth.header.ts

@@ -0,0 +1,12 @@
+export default function authHeader (): Record<string, string> {
+
+    let user_token = localStorage.getItem('auth_user')
+    let auth_token = localStorage.getItem('auth_token')
+
+    if (user_token && auth_token) {
+        return { 'Authorization': 'bearer ' + auth_token };
+    }
+    else {
+        return {'Authorization': 'None'};
+    }
+}