Merge branch 'authentication' into main

This commit is contained in:
Johanna Kuehner
2024-03-11 18:27:29 +01:00
43 changed files with 13094 additions and 2089 deletions

14
app.vue
View File

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

View File

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

View File

@ -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],
});
}

View File

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

View File

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

View File

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

View File

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

@ -0,0 +1,5 @@
<template>
<div>
<NuxtWelcome />
</div>
</template>

4
nuxt-app/nuxt.config.ts Normal file
View 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

File diff suppressed because it is too large Load Diff

17
nuxt-app/package.json Normal file
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -0,0 +1,3 @@
{
"extends": "../.nuxt/tsconfig.server.json"
}

4
nuxt-app/tsconfig.json Normal file
View File

@ -0,0 +1,4 @@
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json"
}

View File

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

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -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 = () => {

View File

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

View File

@ -14,7 +14,8 @@
import { ref } from 'vue';
definePageMeta({
layout: 'default'
layout: 'default',
title: 'Test'
})
const darkMode = ref(true)

View File

@ -20,8 +20,8 @@
&nbsp;
&nbsp;
&nbsp;
<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>

View File

@ -20,8 +20,8 @@
&nbsp;
&nbsp;
&nbsp;
<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)

View File

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

View File

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

View File

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

View File

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

View File

@ -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 = () => {

0
pinia.js Normal file
View File

View File

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

View 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

View 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

View 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
View 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;
})*/

View 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
}
};
})

View 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
})

View File

@ -1,4 +1,4 @@
import { errorMsg } from "../middleware/signUp.js";
import { errorMsg } from "../../middleware/signUp.js";
export default defineEventHandler(async (event) => {

View File

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

@ -0,0 +1 @@
//import { pinia } from '@/store'

View File

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

@ -0,0 +1,6 @@
import { createPinia } from "pinia";
import piniaPluginPersistedState from "pinia-plugin-persistedstate"
const pinia = createPinia().use(piniaPluginPersistedState);
useNuxtApp().vueApp.use(pinia);