Eamco/eamco_driver_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

working login

Browse Source
This commit is contained in:
amnesia
2024-02-29 16:52:41 -05:00
parent 8e34b45297
commit d7ebb12451
9 changed files with 523 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.env Normal file
View File

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

4
quasar.config.ts
View File

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

55
src/layouts/AuthLayout.vue Normal file
View File

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

101
src/layouts/MainLayout.vue
View File

@@ -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-section avatar>
<q-item clickable v-ripple>
<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>

139
src/pages/IndexPage.vue
View File

@@ -1,36 +1,135 @@
<template>
<q-page >
<div class="q-pa-md breakpoints">
<div class="row text-h5">
<div class="col-6">
Todays Price
<q-page>
<div class="q-pa-md breakpoints">
<div class="row text-h5">
<div class="col-6">
Price / Gallon:
</div>
<div class="col-6">
{{ today_oil_price }}
</div>
</div>
<div class="col-6">
3.50
<div class="row text-h5">
<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 { defineComponent } from 'vue'
import axios from 'axios'
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>

100
src/pages/TodayDelivery.vue
View File

@@ -1,18 +1,104 @@
<template>
<q-page class="row justify-evenly">
today
<q-page>
<div class="q-pa-md breakpoints">
<div class="row text-h5">
</div>
</div>
</q-page>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'
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>

132
src/pages/auth/Login.vue Normal file
View File

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

18
src/router/routes.ts
View File

@@ -5,15 +5,21 @@ const routes: RouteRecordRaw[] = [
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', component: () => import('pages/IndexPage.vue') },
{ path: '/today', name: 'today', component: () => import('pages/TodayDelivery.vue') },
{ path: '/tomorrow', name: 'tomorrow', component: () => import('pages/TomorrowDelivery.vue') },
{ path: '/automatic', name: 'automatic', component: () => import('pages/Automatics.vue') },
{ path: '/stats', name: 'stats', component: () => import('pages/DriverStats.vue') },
{ path: '', name: 'home', component: () => import('pages/IndexPage.vue') },
{ path: '/today', name: 'today', component: () => import('pages/TodayDelivery.vue') },
{ path: '/tomorrow', name: 'tomorrow', component: () => import('pages/TomorrowDelivery.vue') },
{ path: '/automatic', name: 'automatic', component: () => import('pages/Automatics.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

12
src/services/auth.header.ts Normal file
View File

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