Merge branch 'authentication' into main
This commit is contained in:
14
app.vue
14
app.vue
@ -7,9 +7,21 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
//import { createPinia } from "pinia";
|
||||
//import piniaPluginPersistedState from "pinia-plugin-persistedstate"
|
||||
|
||||
//const layout = "empty";
|
||||
|
||||
//const layout = "empty";
|
||||
//const route = useRoute();
|
||||
//const pinia = createPinia();
|
||||
//pinia.use(piniaPluginPersistedState);
|
||||
|
||||
|
||||
useHead({
|
||||
//title: `Tüit ERP - ${route.meta.title}`,
|
||||
title: `Tüit ERP`,
|
||||
link: [{ rel: "icon", type: "image/png", href: "/favicon-gelb-rot-32x32.png" }]
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -1,14 +1,30 @@
|
||||
import axios from 'axios';
|
||||
import axios, {AxiosError} from 'axios';
|
||||
import clientsideConfig from './clientsideConfig'
|
||||
|
||||
//create axios instance
|
||||
const Axios = axios.create({
|
||||
// baseURL: `https://${serversideConfig.url}:${serversideConfig.port}`,
|
||||
//baseURL: `https://${serversideConfig.url}:${serversideConfig.port}/`,
|
||||
baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||
headers: {
|
||||
// 'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
//Authorization: `Bearer`,
|
||||
Accept: "*",
|
||||
},
|
||||
withCredentials: true,
|
||||
credentials: true,
|
||||
})
|
||||
|
||||
|
||||
Axios.interceptors.response.use((response) => response, (error) => {
|
||||
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('Status: ', error.response?.status, '\nHeaders: '. error.response?.headers, '\nMessage: '. error.response?.data.message)
|
||||
} else { console.error('Error: ', error); };
|
||||
|
||||
if (error.response?.status === 403) { window.location.href = '/login'; };
|
||||
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
export default Axios;
|
||||
|
||||
@ -93,7 +93,15 @@ export const login = async (req, res, next) => {
|
||||
}
|
||||
if (bResult) {
|
||||
// password match
|
||||
const token = jwt.sign(
|
||||
const authtoken = jwt.sign(
|
||||
{
|
||||
username: result[0].username,
|
||||
userId: result[0].id,
|
||||
},
|
||||
'SECRETTUEITKEY',
|
||||
{ expiresIn: '300s' } // 5min
|
||||
);
|
||||
const refreshtoken = jwt.sign(
|
||||
{
|
||||
username: result[0].username,
|
||||
userId: result[0].id,
|
||||
@ -115,7 +123,7 @@ export const login = async (req, res, next) => {
|
||||
const results = await ownConn.query(sql1, [dateTimeString, result[0].id]);
|
||||
return res.status(200).send({
|
||||
message: 'Logged in!',
|
||||
token,
|
||||
token: { authToken: authtoken, refreshToken: refreshtoken },
|
||||
user: result[0],
|
||||
});
|
||||
}
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
<span class="title-icon" id="logo-icon">
|
||||
<img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
|
||||
</span>
|
||||
<pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
|
||||
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Login</pre>
|
||||
</div>
|
||||
<div class="login-field">
|
||||
<div class="form-field" id="username-field">
|
||||
<label for="username-input" id="username-label">
|
||||
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
|
||||
<img loading="lazy" src="../icons/Mail-Icon.svg" />
|
||||
<img loading="lazy" src="/icons/Mail-Icon.svg" />
|
||||
</span>
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
|
||||
</label>
|
||||
@ -21,14 +21,13 @@
|
||||
<div class="form-field" id="password-field">
|
||||
<label for="password-input" id="password-label">
|
||||
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
|
||||
<img loading="lazy" src="../icons/Lock-Icon.svg" />
|
||||
<img loading="lazy" src="/icons/Lock-Icon.svg" />
|
||||
</span>
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
|
||||
</label>
|
||||
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
|
||||
<input type="text" id="password-input" placeholder="*******">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle"
|
||||
value="Show">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,10 +36,10 @@
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']"> {{ errorMsg }} </div>
|
||||
</label>
|
||||
</div>
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
|
||||
@click="handleLogin">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Signup"
|
||||
@click="testFunctionSignup">
|
||||
<div class="buttons">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login" @click="handleLogin">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="signup-button" value="Signup" @click="testFunctionSignup">
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@ -51,6 +50,7 @@ import { ref } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../clientsideConfig.js';
|
||||
|
||||
const { signIn } = useAuth()
|
||||
const router = useRouter();
|
||||
const darkMode = ref(true);
|
||||
const isError = ref(false);
|
||||
@ -63,19 +63,29 @@ const handleLogin = async () => {
|
||||
const username = document.getElementById('username-input').value;
|
||||
const password = document.getElementById('password-input').value;
|
||||
|
||||
const requestBody = {
|
||||
//const requestBody = {
|
||||
const credentials = {
|
||||
username: username,
|
||||
password: password,
|
||||
}
|
||||
|
||||
try {
|
||||
let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
|
||||
/*let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
|
||||
|
||||
const sessionToken = useCookie('token', {maxAge: 604800, sameSite: true});
|
||||
sessionToken.value = res.data.token;
|
||||
Axios.defaults.headers.common['Authorization'] = `${username}`;
|
||||
const userToken = useCookie('user', {maxAge: 604800, sameSite: true});
|
||||
userToken.value = username;
|
||||
// something to do with the res?
|
||||
console.log(res.data)
|
||||
console.log(sessionToken)
|
||||
console.log(res.data.message)
|
||||
|
||||
// sucessfully logged in
|
||||
router.push('/')
|
||||
router.push('/home')*/
|
||||
let res = await signIn( credentials, { callbackUrl: '/home' })
|
||||
console.log("res", res)
|
||||
|
||||
} catch (err) {
|
||||
// handle the error
|
||||
console.log(err.response.statusText)
|
||||
@ -162,22 +172,22 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 31.25rem;
|
||||
height: 33rem;
|
||||
min-height: 33rem;
|
||||
height: fit-content;
|
||||
border-radius: 0.625rem;
|
||||
padding: 2.5rem 1.875rem;
|
||||
gap: 1.875rem;
|
||||
}
|
||||
|
||||
.form-darkmode {
|
||||
border: 0.0625rem solid #000;
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.form-lightmode {
|
||||
border: 0.0625rem solid #8e8e8e;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.title-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -192,7 +202,6 @@ export default {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
}
|
||||
|
||||
.title-icon>img {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
@ -203,20 +212,14 @@ export default {
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.05rem;
|
||||
white-space: nowrap;
|
||||
font: 400 1.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.title-darkmode { color: #ffffff; }
|
||||
.title-lightmode { color: #000000; }
|
||||
|
||||
.pre-darkmode,
|
||||
.title-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode,
|
||||
.title-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.login-field {
|
||||
display: flex;
|
||||
@ -227,6 +230,7 @@ export default {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -238,16 +242,6 @@ export default {
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.form-field-error-msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 25rem;
|
||||
height: 3rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -265,43 +259,28 @@ label {
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
}
|
||||
|
||||
.icon>img {
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon-darkmode>img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.icon-lightmode>img {
|
||||
filter: invert(0%);
|
||||
}
|
||||
|
||||
#username-icon>img {
|
||||
width: auto;
|
||||
height: 0.9375rem;
|
||||
}
|
||||
|
||||
}
|
||||
#password-icon>img {
|
||||
width: 0.9375rem;
|
||||
height: auto;
|
||||
}
|
||||
.icon-darkmode>img { filter: invert(100%); }
|
||||
.icon-lightmode>img { filter: invert(0%); }
|
||||
|
||||
.label {
|
||||
letter-spacing: 2%;
|
||||
letter-spacing: 0.02rem;
|
||||
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
.label-darkmode { color: #ffffff; }
|
||||
.label-lightmode { color: #000000; }
|
||||
|
||||
.input-field {
|
||||
display: flex;
|
||||
@ -314,15 +293,9 @@ label {
|
||||
border-radius: 0.3125rem;
|
||||
padding: 0.1875rem 0.625rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
}
|
||||
|
||||
.input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
}
|
||||
.input-darkmode { background-color: #212121; }
|
||||
.input-lightmode { background-color: #EBEBEB; }
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
@ -330,40 +303,63 @@ input[type=text] {
|
||||
background-color: #00000000;
|
||||
border: none;
|
||||
color: #8e8e8e;
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.01rem;
|
||||
white-space: nowrap;
|
||||
font: 100 0.75rem/1.25rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
input[type=button] {
|
||||
#show-password-toggle {
|
||||
width: fit-content;
|
||||
height: auto;
|
||||
align-self: flex-end;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background-color: #00000000;
|
||||
background: none;
|
||||
border: none;
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.01rem;
|
||||
white-space: nowrap;
|
||||
font: 300 0.75rem/1.25rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.button-darkmode {
|
||||
color: #fff;
|
||||
|
||||
|
||||
.form-field-error-msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 25rem;
|
||||
height: 3rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.button-lightmode {
|
||||
color: #000;
|
||||
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.625rem 0.625rem 0;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
#login-button {
|
||||
width: 13.75rem;
|
||||
height: 4.375rem;
|
||||
|
||||
input[type=button] {
|
||||
width: 9.375rem;
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
align-self: center;
|
||||
border: none;
|
||||
color: #000;
|
||||
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
|
||||
letter-spacing: 2%;
|
||||
letter-spacing: 0.02rem;
|
||||
white-space: nowrap;
|
||||
font: 600 1.25rem/1.875rem Overpass, sans-serif;
|
||||
font: 600 1.125rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.button-darkmode { color: #ffffff; }
|
||||
.button-lightmode { color: #000000; }
|
||||
</style>
|
||||
39
composables/UserObject.ts
Normal file
39
composables/UserObject.ts
Normal file
@ -0,0 +1,39 @@
|
||||
export var UserObjectDefinition: {
|
||||
id: string;
|
||||
username: string;
|
||||
password: string;
|
||||
registered: string;
|
||||
lastLogin: string;
|
||||
fullName: string;
|
||||
email: string;
|
||||
phonenumber: string;
|
||||
address: string;
|
||||
city: string;
|
||||
postcode: string;
|
||||
adminBool: boolean;
|
||||
technician1Bool: boolean;
|
||||
technician2Bool: boolean;
|
||||
technicianMonitoringBool: boolean;
|
||||
merchantBool: boolean;
|
||||
internBool: boolean;
|
||||
}
|
||||
|
||||
export interface UserObject {
|
||||
id: string;
|
||||
username: string;
|
||||
password: string;
|
||||
registered: string;
|
||||
lastLogin: string;
|
||||
fullName: string;
|
||||
email: string;
|
||||
phonenumber: string;
|
||||
address: string;
|
||||
city: string;
|
||||
postcode: string;
|
||||
adminBool: boolean;
|
||||
technician1Bool: boolean;
|
||||
technician2Bool: boolean;
|
||||
technicianMonitoringBool: boolean;
|
||||
merchantBool: boolean;
|
||||
internBool: boolean;
|
||||
}
|
||||
@ -1,16 +1,12 @@
|
||||
<template>
|
||||
<aside
|
||||
:class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
|
||||
@click="toggleActionbar">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
|
||||
<aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
|
||||
</div>
|
||||
<nav class="actions">
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
|
||||
<div class="icon" id="search-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Search-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Search-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
|
||||
@ -18,8 +14,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
|
||||
<div class="icon" id="filter-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Filter-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Filter-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
|
||||
@ -27,8 +22,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
|
||||
<div class="icon" id="instances-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Instances-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Instances-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
|
||||
@ -36,8 +30,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
|
||||
<div class="icon" id="attachments-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Attachments-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Attachments-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
|
||||
@ -45,8 +38,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
|
||||
<div class="icon" id="sell-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Sell-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Sell-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
|
||||
@ -54,8 +46,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
|
||||
<div class="icon" id="archive-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Archive-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Archive-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
|
||||
@ -63,8 +54,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
|
||||
<div class="icon" id="new-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Add-New-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Add-New-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
|
||||
@ -72,8 +62,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
|
||||
<div class="icon" id="edit-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Edit-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Edit-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
|
||||
@ -81,8 +70,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
|
||||
<div class="icon" id="delete-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Delete-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Delete-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
|
||||
@ -141,7 +129,7 @@ aside.actionbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
top: 3.75rem;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
inline-size: fit-content;
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
<aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||
<div class="toggleNavbar">
|
||||
<div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/Back-Icon.svg" />
|
||||
</div>
|
||||
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="ToggleSidebar">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="menus">
|
||||
<nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
|
||||
<router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
|
||||
<div class="icon" id="home-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Home-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
|
||||
@ -22,7 +22,7 @@
|
||||
<nav id="site-menu">
|
||||
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultMasterChecklistPage()" id="checklists-button">
|
||||
<div class="icon" id="checklists-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Checklists-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
|
||||
@ -30,7 +30,7 @@
|
||||
</router-link>
|
||||
<nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultAssetPage()" id="assets-button">
|
||||
<div class="icon" id="assets-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Assets-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
|
||||
@ -38,7 +38,7 @@
|
||||
</nuxt-link>
|
||||
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultSolutionPage()" id="solutions-button">
|
||||
<div class="icon" id="solutions-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Solutions-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
|
||||
@ -46,7 +46,7 @@
|
||||
</router-link>
|
||||
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
|
||||
<div class="icon" id="accounting-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Accounting-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
|
||||
@ -113,7 +113,7 @@ aside.navbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
top: 3.75rem;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
inline-size: fit-content;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
|
||||
<img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
|
||||
<img id="header-logo" loading="lazy" src="/tüit-logo.svg.png" />
|
||||
<div class="profile">
|
||||
<div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
|
||||
<pre :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']" id='uname'></pre>
|
||||
<div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
|
||||
<img id="picture" loading="lazy" src="" />
|
||||
</div>
|
||||
@ -12,19 +12,59 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import { useAuthStore } from '~/store/auth';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
//const auth = ref();
|
||||
const username = ref('username');
|
||||
|
||||
onMounted(() => {
|
||||
//auth.value = useAuthStore();
|
||||
//username.value = auth.value.username;
|
||||
try {
|
||||
username.value = useAuthStore().username;
|
||||
} finally {
|
||||
document.getElementById('uname').innerHTML = username;
|
||||
}
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
try {
|
||||
username.value = useAuthStore().username;
|
||||
} finally {
|
||||
document.getElementById('uname').innerHTML = username;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
import { useAuthStore } from '~/store/auth';
|
||||
|
||||
export default {
|
||||
name: "PageHeader",
|
||||
/*mounted() {
|
||||
try {
|
||||
const auth = useAuthStore();
|
||||
const username = auth.username;
|
||||
document.getElementById('uname').innerHTML = username;
|
||||
} catch {
|
||||
document.getElementById('uname').innerHTML = 'username'
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
const auth = useAuthStore();
|
||||
const username = auth.username;
|
||||
document.getElementById('uname').innerHTML = username;
|
||||
},*/
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@ -36,28 +76,28 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 4.375rem;
|
||||
height: 3.125rem;
|
||||
align-self: stretch;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.625rem 1.25rem;
|
||||
padding: 0.375rem 1.875rem;
|
||||
}
|
||||
|
||||
.header-darkmode {
|
||||
background-color: #212121;
|
||||
border-bottom: 0.125em solid #000;
|
||||
border-bottom: 0.125em solid #000000;
|
||||
}
|
||||
|
||||
.header-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
border-bottom: 0.125em solid #8e8e8e61;
|
||||
background-color: #ebebeb;
|
||||
border-bottom: 0.125em solid #8e8e8e;
|
||||
}
|
||||
|
||||
#header-logo {
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
width: 5rem;
|
||||
height: 2.5rem;
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
@ -68,37 +108,36 @@ header {
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 0.625rem;
|
||||
padding: 0 0.625rem;
|
||||
padding: 0 0.375rem;
|
||||
}
|
||||
|
||||
.username {
|
||||
align-self: center;
|
||||
margin: auto 0;
|
||||
text-align: right;
|
||||
font: 200 0.875rem Overpass, sans-serif;
|
||||
letter-spacing: 5%;
|
||||
font: 200 0.75rem/1.25rem Overpass, sans-serif;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
.username-darkmode {
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.username-lightmode {
|
||||
color: #000;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.picture {
|
||||
display: flex;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.picture-darkmode {
|
||||
background-color: #fff;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.picture-lightmode {
|
||||
background-color: #000;
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
24
nuxt-app/.gitignore
vendored
Normal file
24
nuxt-app/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
75
nuxt-app/README.md
Normal file
75
nuxt-app/README.md
Normal file
@ -0,0 +1,75 @@
|
||||
# Nuxt 3 Minimal Starter
|
||||
|
||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm run dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm run build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm run preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
5
nuxt-app/app.vue
Normal file
5
nuxt-app/app.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtWelcome />
|
||||
</div>
|
||||
</template>
|
||||
4
nuxt-app/nuxt.config.ts
Normal file
4
nuxt-app/nuxt.config.ts
Normal file
@ -0,0 +1,4 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
devtools: { enabled: true }
|
||||
})
|
||||
9593
nuxt-app/package-lock.json
generated
Normal file
9593
nuxt-app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
17
nuxt-app/package.json
Normal file
17
nuxt-app/package.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"nuxt": "^3.10.3",
|
||||
"vue": "^3.4.19",
|
||||
"vue-router": "^4.3.0"
|
||||
}
|
||||
}
|
||||
BIN
nuxt-app/public/favicon.ico
Normal file
BIN
nuxt-app/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
3
nuxt-app/server/tsconfig.json
Normal file
3
nuxt-app/server/tsconfig.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "../.nuxt/tsconfig.server.json"
|
||||
}
|
||||
4
nuxt-app/tsconfig.json
Normal file
4
nuxt-app/tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
@ -1,10 +1,54 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
import type {
|
||||
NuxtPage
|
||||
} from 'nuxt/schema'
|
||||
import type { NuxtPage } from 'nuxt/schema'
|
||||
import clientsideConfig from './clientsideConfig'
|
||||
import { UserObjectDefinition } from './composables/UserObject'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
devtools: { enabled: true },
|
||||
modules: [
|
||||
'@pinia/nuxt',
|
||||
'@sidebase/nuxt-auth',
|
||||
],
|
||||
auth: {
|
||||
//baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/.output/server/chunks/routes/api/auth`,
|
||||
computed: {
|
||||
origin: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||
//pathname: '/server/chunks/routes/api/auth/',
|
||||
//fullBaseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
|
||||
},
|
||||
//baseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
|
||||
provider: {
|
||||
type: 'refresh',
|
||||
endpoints: {
|
||||
signIn: { path: '/login', method: 'post' },
|
||||
signout: false,
|
||||
signUp: { path: '/signup', method: 'post' },
|
||||
getSession: { path: '/session', method: 'get' },
|
||||
refresh: { path: '/refresh', method: 'post' }
|
||||
},
|
||||
token: {
|
||||
signInResponseTokenPointer: '/token/authToken',
|
||||
maxAgeInSeconds: 300, // 5 min
|
||||
sameSiteAttribute: 'lax'
|
||||
},
|
||||
refreshToken: {
|
||||
signInResponseRefreshTokenPointer: '/token/refreshToken',
|
||||
maxAgeInSeconds: 604800, // 7 days
|
||||
sameSiteAttribute: 'lax'
|
||||
},
|
||||
// TODO: define UserObject
|
||||
//sessionDataType: UserObjectDefinition,
|
||||
},
|
||||
session: {
|
||||
enableRefreshPeriodically: false,
|
||||
enableRefreshOnWindowFocus: true,
|
||||
},
|
||||
globalAppMiddleware: true,
|
||||
},
|
||||
/*buildModules: [
|
||||
//'@nuxtjs/composition-api/module',
|
||||
['@pinia/nuxt', { disableVuex: false }],
|
||||
],*/
|
||||
devServer: {
|
||||
https: {
|
||||
key: './certs/privkey.pem',
|
||||
@ -19,6 +63,19 @@ export default defineNuxtConfig({
|
||||
},
|
||||
}
|
||||
},
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
apiBase: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api`,
|
||||
axios: {
|
||||
browserBaseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||
},
|
||||
},
|
||||
private: {
|
||||
axios: {
|
||||
baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||
}
|
||||
}
|
||||
},
|
||||
// hooks: {
|
||||
// 'pages:extend'(pages) {
|
||||
// function setMiddleware(pages: NuxtPage[]) {
|
||||
|
||||
4664
package-lock.json
generated
4664
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
@ -7,25 +7,37 @@
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
"prepare": "nuxt prepare",
|
||||
"cleanup": "nuxt cleanup"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/devtools": "latest",
|
||||
"nuxt": "^3.8.0",
|
||||
"@pinia/nuxt": "^0.5.1",
|
||||
"@sidebase/nuxt-auth": "^0.6.7",
|
||||
"nuxt": "^3.10.3",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.3.7",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/module-builder": "^0.5.5",
|
||||
"@types/jsonwebtoken": "^9.0.6",
|
||||
"@types/node": "^20.11.24",
|
||||
"@vueform/toggle": "^2.1.4",
|
||||
"axios": "^1.6.7",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"cors": "^2.8.5",
|
||||
"express": "^4.18.2",
|
||||
"h3": "^1.11.1",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"leading-trim": "^1.0.2",
|
||||
"mariadb": "^3.2.3",
|
||||
"nuxi": "^3.10.1",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"typescript": "^5.3.3",
|
||||
"uuid": "^9.0.1",
|
||||
"vite": "^5.1.0",
|
||||
"vue-tsc": "^2.0.5",
|
||||
"vuex": "^4.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,8 @@ const onAsset = computed(() => store.state.onAsset);
|
||||
const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Assets'
|
||||
})
|
||||
|
||||
const defaultAssetPage = () => {
|
||||
|
||||
@ -20,7 +20,8 @@ import Dashboard from "../components/Dashboard.vue";
|
||||
import QuickAccess from "../components/QuickAccess.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'empty'
|
||||
layout: 'empty',
|
||||
title: 'Home'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Test'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
|
||||
|
||||
|
||||
<router-link to="/issues" class="button" id="issues-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
|
||||
<router-link to="/issueItems" class="button" id="issues-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue Items</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
@ -43,7 +43,8 @@ import IssueVariants from "../components/server/IssueVariants.vue";
|
||||
import IssueVariant from "../components/server/IssueVariant.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Issue Items'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
@ -56,7 +57,7 @@ const onIssueItemVariant = ref(false)
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "IssuePage",
|
||||
name: "IssueItemsPage",
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
|
||||
|
||||
|
||||
<router-link to="/issues" class="button" id="issues-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
|
||||
<router-link to="/issueItems" class="button" id="issues-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue Items</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
@ -47,7 +47,8 @@ import OrderingInformation from "../components/server/OrderingInformation.vue";
|
||||
import Accounting from "../components/server/Accounting.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Issue Slips'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -16,7 +16,9 @@ import { ref } from 'vue';
|
||||
import LoginForm from "../components/LoginForm.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'empty'
|
||||
layout: 'empty',
|
||||
title: 'Login',
|
||||
auth: false,
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -64,7 +64,8 @@ const onInstancelist = computed(() => store.state.onInstancelist);
|
||||
const onInstance = computed(() => store.state.onInstance);
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Maintenance Visits'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -64,7 +64,8 @@ const onInstancelist = computed(() => store.state.onInstancelist);
|
||||
const onInstance = computed(() => store.state.onInstance);
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Production Orders'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -39,7 +39,8 @@ import UserAppearance from "../components/server/UserAppearance.vue";
|
||||
import UserRightsList from "../components/server/UserRightsList.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Settings'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -32,7 +32,8 @@ const onCustomerSolutionlist = computed(() => store.state.onCustomerSolutionlist
|
||||
const onSolution = computed(() => store.state.onSolution);
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Solutions'
|
||||
})
|
||||
|
||||
const defaultSolutionPage = () => {
|
||||
|
||||
@ -170,6 +170,36 @@ const store = createStore({
|
||||
state.newVersion = ''
|
||||
state.newLicense = ''
|
||||
|
||||
// functions to change the production order and maintenance visit pages
|
||||
changeToTemplatelist(state) {
|
||||
state.onTemplatelist = true
|
||||
state.onCustomerTemplatelist = false
|
||||
state.onTemplate = false
|
||||
state.onInstancelist = false
|
||||
state.onInstance = false
|
||||
},
|
||||
changeToCustomerTemplatelist(state) {
|
||||
state.onTemplatelist = false
|
||||
state.onCustomerTemplatelist = true
|
||||
state.onTemplate = false
|
||||
state.onInstancelist = false
|
||||
state.onInstance = false
|
||||
},
|
||||
changeToTemplate(state) {
|
||||
state.onTemplatelist = false
|
||||
state.onCustomerTemplatelist = false
|
||||
state.onTemplate = true
|
||||
state.onInstancelist = false
|
||||
state.onInstance = false
|
||||
},
|
||||
changeToInstancelist(state) {
|
||||
state.onTemplatelist = false
|
||||
state.onCustomerTemplatelist = false
|
||||
state.onTemplate = false
|
||||
state.onInstancelist = true
|
||||
state.onInstance = false
|
||||
},
|
||||
|
||||
// functions to change the production order and maintenance visit pages
|
||||
changeToTemplatelist(state) {
|
||||
state.onTemplatelist = true
|
||||
|
||||
3
public/icons/actionbar-icons/Attachment-Icon.svg
Normal file
3
public/icons/actionbar-icons/Attachment-Icon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11 5.5-4.8 4.6a4 4 0 0 1-1.9.9c-.9 0-1.6-.1-2.3-.6C1.4 9.8 1 9 1 8c.1-.7.6-1.5 1.2-2l4.7-4.5c.4-.4 1-.6 1.5-.6.6 0 1.2.2 1.6.6.4.3.6.8.6 1.4 0 .5-.2 1.2-.6 1.5L5.2 9.1c-.2.1-.7.5-1 .5-.4 0-1 0-1.3-.3-.4-.4-.5-.7-.4-1.2 0-.5.4-.9.6-1L7 3.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 426 B |
3
public/icons/actionbar-icons/Departments-Icon.svg
Normal file
3
public/icons/actionbar-icons/Departments-Icon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" viewBox="0 0 12 11">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5 7v2c0 .6-.4 1-1 1H2a1 1 0 0 1-1-1V7c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm3-5v2c0 .6-.4 1-1 1H5a1 1 0 0 1-1-1V2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm3 5v2c0 .6-.4 1-1 1H8a1 1 0 0 1-1-1V7c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm-8 .5V6m3-3.5V1m3 6.5V6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 415 B |
7
public/icons/actionbar-icons/Employees-Icon.svg
Normal file
7
public/icons/actionbar-icons/Employees-Icon.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" viewBox="0 0 12 11">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M7.5 5.5v-.3a1.7 1.7 0 1 1 3.5 0v.3"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M9.3 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM6 2.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-5 3v-.3a1.7 1.7 0 1 1 3.5 0v.3"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M2.8 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3 9.9v-.5a3 3 0 1 1 6 0v.5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 6.4A1.7 1.7 0 1 0 6 3a1.7 1.7 0 0 0 0 3.4Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 831 B |
95
server/api/auth/login.ts
Normal file
95
server/api/auth/login.ts
Normal file
@ -0,0 +1,95 @@
|
||||
import axios, { AxiosError } from 'axios';
|
||||
import serversideConfig from '../../../serversideConfig';
|
||||
import https from 'https';
|
||||
|
||||
let errorMsg = 'error';
|
||||
//const { data } = useAuthState()
|
||||
|
||||
|
||||
export default eventHandler(async (event) => {
|
||||
|
||||
const agent = new https.Agent({
|
||||
rejectUnauthorized: false,
|
||||
});
|
||||
const axiosInstance = axios.create({
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: "*",
|
||||
},
|
||||
httpsAgent: agent
|
||||
});
|
||||
|
||||
|
||||
const body = await readBody(event)
|
||||
|
||||
// get user object from backend
|
||||
try {
|
||||
let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/login`, {
|
||||
username: body.username,
|
||||
password: body.password,
|
||||
});
|
||||
const sessionToken = res.data.token;
|
||||
const user = res.data.user;
|
||||
|
||||
console.log('sessionToken: ', sessionToken);
|
||||
console.log('user: ', user);
|
||||
|
||||
setResponseStatus(event, 200);
|
||||
const resBody = {
|
||||
token: sessionToken,
|
||||
message: 'Login successful'
|
||||
};
|
||||
console.log('resBody: ', resBody);
|
||||
|
||||
return resBody;
|
||||
}
|
||||
catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
//console.error(axiosError.response.data.message);
|
||||
//errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
/*import { loginSuccessful, sessionToken, errorMsg } from "../../middleware/login";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
if (!loginSuccessful) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200);
|
||||
//setResponseHeader(event, "Set-Cookie", sessionToken);
|
||||
const resBody = {
|
||||
token: sessionToken,
|
||||
message: 'Login successful'
|
||||
};
|
||||
return resBody;
|
||||
})*/
|
||||
50
server/api/auth/refresh.ts
Normal file
50
server/api/auth/refresh.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { createError, eventHandler, readBody, sendRedirect } from 'h3';
|
||||
import jwt from 'jsonwebtoken';
|
||||
|
||||
const SECRET = 'SECRETTUEITKEY'
|
||||
|
||||
interface User {
|
||||
username: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
interface JwtPayload extends User {
|
||||
exp: number;
|
||||
}
|
||||
|
||||
export default eventHandler(async (event) => {
|
||||
const body = await readBody<{ refreshToken: string }>(event);
|
||||
|
||||
if (!body.refreshToken) {
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage: 'Unauthorized, no refreshToken in payload'
|
||||
});
|
||||
};
|
||||
|
||||
const decoded = jwt.verify(body.refreshToken, SECRET) as JwtPayload | undefined;
|
||||
|
||||
if (!decoded) {
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage: 'Unauthorized, refreshToken can`t be verified'
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// decoded.userId exists on JwtPayload, TS falsely wants decoded.id
|
||||
const user: User = {
|
||||
username: decoded.username,
|
||||
id: decoded.userId,
|
||||
};
|
||||
|
||||
const authToken = jwt.sign( user, SECRET, { expiresIn: 60 * 5 }); // expires in 5 min
|
||||
const refreshToken = jwt.sign( user, SECRET, { expiresIn: 60 * 60 * 24 * 7 }); // expires in 7 days
|
||||
|
||||
return {
|
||||
token: {
|
||||
authToken,
|
||||
refreshToken
|
||||
}
|
||||
};
|
||||
})
|
||||
36
server/api/auth/session.ts
Normal file
36
server/api/auth/session.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { createError, eventHandler, getRequestHeader, H3Event } from 'h3'
|
||||
import jwt from 'jsonwebtoken';
|
||||
|
||||
const TOKEN_TYPE = 'Bearer'
|
||||
|
||||
const extractToken = (authHeaderValue: string) => {
|
||||
const [, token] = authHeaderValue.split(`${TOKEN_TYPE} `)
|
||||
return token
|
||||
}
|
||||
|
||||
const ensureAuth = (event: H3Event) => {
|
||||
const authHeaderValue = getRequestHeader(event, 'authorization')
|
||||
if (typeof authHeaderValue === 'undefined') {
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage:
|
||||
'Need to pass valid Bearer-authorization header to access this endpoint'
|
||||
})
|
||||
}
|
||||
|
||||
const extractedToken = extractToken(authHeaderValue)
|
||||
try {
|
||||
return jwt.verify(extractedToken, 'SECRETTUEITKEY')
|
||||
} catch (error) {
|
||||
console.error("Login failed. Here's the raw error:", error)
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage: 'You must be logged in to access this page'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default eventHandler((event) => {
|
||||
const user = ensureAuth(event)
|
||||
return user
|
||||
})
|
||||
@ -1,4 +1,4 @@
|
||||
import { errorMsg } from "../middleware/signUp.js";
|
||||
import { errorMsg } from "../../middleware/signUp.js";
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
import { loginSuccessful, errorMsg } from "../middleware/login";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
if (!loginSuccessful) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return 'Successfully logged in.'
|
||||
})
|
||||
1
server/main.ts
Normal file
1
server/main.ts
Normal file
@ -0,0 +1 @@
|
||||
//import { pinia } from '@/store'
|
||||
@ -1,56 +0,0 @@
|
||||
import axios, { AxiosError } from 'axios';
|
||||
import serversideConfig from '../../serversideConfig';
|
||||
import https from 'https';
|
||||
|
||||
let loginSuccessful = false;
|
||||
let errorMsg = '';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
loginSuccessful = false;
|
||||
const agent = new https.Agent({
|
||||
rejectUnauthorized: false,
|
||||
});
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: "*",
|
||||
},
|
||||
httpsAgent: agent
|
||||
});
|
||||
|
||||
if (event.path.startsWith("/api/login")) {
|
||||
|
||||
const body = await readBody(event)
|
||||
|
||||
// get user object from backend
|
||||
try {
|
||||
let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/login`, {
|
||||
username: body.username,
|
||||
password: body.password,
|
||||
});
|
||||
loginSuccessful = true;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export { loginSuccessful, errorMsg };
|
||||
6
store/index.ts
Normal file
6
store/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { createPinia } from "pinia";
|
||||
import piniaPluginPersistedState from "pinia-plugin-persistedstate"
|
||||
|
||||
const pinia = createPinia().use(piniaPluginPersistedState);
|
||||
|
||||
useNuxtApp().vueApp.use(pinia);
|
||||
Reference in New Issue
Block a user