Compare commits
8 Commits
addConfigi
...
authentica
| Author | SHA1 | Date | |
|---|---|---|---|
| 6d6b36bdd9 | |||
| 7c19ee9215 | |||
| 601449d7e0 | |||
| 3a79ed12fa | |||
| 84c17ad855 | |||
| e4aa11b902 | |||
| 8a77f18237 | |||
| e5a67b7e14 |
27
app.vue
27
app.vue
@ -7,21 +7,38 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
//import { createPinia } from "pinia";
|
||||
//import piniaPluginPersistedState from "pinia-plugin-persistedstate"
|
||||
|
||||
|
||||
//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>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
html, template, body, #__nuxt, #__layout {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, template, body, #__nuxt, #__layout {
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
background-color: #212121;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -315,14 +294,8 @@ label {
|
||||
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>
|
||||
@ -400,7 +400,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['client-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Client name</h2>
|
||||
<section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Client name</pre>
|
||||
<div class="data-field" id="client-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="client-data">
|
||||
<div class="contact">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</h3>
|
||||
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</pre>
|
||||
<div class="data-field" id="contact-person">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
@ -22,7 +22,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="address">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</h3>
|
||||
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</pre>
|
||||
<div class="street-address">
|
||||
<div class="data-field" id="street-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
</div>
|
||||
</section>
|
||||
@ -65,138 +65,102 @@ export default {
|
||||
|
||||
|
||||
<style scoped>
|
||||
.information {
|
||||
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
.section-darkmode { background-color: #2c2c2c; }
|
||||
.section-lightmode { background-color: #ffffff; }
|
||||
|
||||
|
||||
.client-name {
|
||||
align-self: stretch;
|
||||
.title {
|
||||
padding: 1.25rem 0;
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.05rem;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
font: italic 400 1rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.title-darkmode { color: #ffffff; }
|
||||
.title-lightmode { color: #000000; }
|
||||
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h2-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: row;
|
||||
padding: 0 1.875rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.data-field#client-id {
|
||||
padding: 0.625rem 1.875rem;
|
||||
}
|
||||
|
||||
.data-field#street-name {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.data-field#street-no {
|
||||
width: 30%;
|
||||
}
|
||||
.data-field#client-id { padding: 0.625rem 1.875rem; }
|
||||
.data-field#street-name { flex: 3; }
|
||||
|
||||
.label {
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.03rem;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.pre-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode {
|
||||
color: #000;
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
.pre-darkmode { color: #ffffff; }
|
||||
.pre-lightmode { color: #000000; }
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
background-color: #212121;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
background-color: #ebebeb;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.data#notes {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.client-data {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: row;
|
||||
padding: 1.25rem 1.875rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
align-self: stretch;
|
||||
padding: 0 0.625rem;
|
||||
justify-content: stretch;
|
||||
gap: 0.625rem
|
||||
}
|
||||
|
||||
.contact,
|
||||
.address {
|
||||
.contact, .address {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
line-height: normal;
|
||||
width: 50%;
|
||||
padding: 1.25rem 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.03rem;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.h3-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h3-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
.h3-darkmode { color: #ffffff; }
|
||||
.h3-lightmode { color: #000000; }
|
||||
|
||||
|
||||
.street-address {
|
||||
@ -205,15 +169,17 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
padding: 0 1.875rem 0 0;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.625rem 1.875rem;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
||||
}</style>
|
||||
gap: 0.625rem;
|
||||
}
|
||||
#notes { align-self: stretch; }
|
||||
|
||||
</style>
|
||||
143
components/server/ClientDepartment.vue
Normal file
143
components/server/ClientDepartment.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Department name</pre>
|
||||
<div class="data-group">
|
||||
<div class="data-field" id="id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="client-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="head">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ClientDepartment",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
.section-darkmode { background-color: #2c2c2c; }
|
||||
.section-lightmode { background-color: #ffffff; }
|
||||
|
||||
|
||||
.title {
|
||||
padding: 1.25rem 0;
|
||||
letter-spacing: 0.04rem;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.title-darkmode { color: #ffffff; }
|
||||
.title-lightmode { color: #000000; }
|
||||
|
||||
|
||||
|
||||
.data-group {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
padding: 0.625rem 0;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
width: 30%;
|
||||
flex-direction: row;
|
||||
padding: 0.625rem 1.875rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
#head { width: 40%; }
|
||||
|
||||
.label {
|
||||
letter-spacing: 0.02rem;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.pre-darkmode { color: #ffffff; }
|
||||
.pre-lightmode { color: #000000; }
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
background-color: #212121;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
letter-spacing: 0.02rem;
|
||||
font: 400 0.75rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #ffffff;
|
||||
}
|
||||
.data-lightmode {
|
||||
background-color: #ebebeb;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
||||
.notes {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
padding: 1.25rem 1.875rem 0.625rem;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
letter-spacing: 0.03rem;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
#notes { align-self: stretch; }
|
||||
|
||||
</style>
|
||||
117
components/server/ClientDepartmentEmployeeList.vue
Normal file
117
components/server/ClientDepartmentEmployeeList.vue
Normal file
@ -0,0 +1,117 @@
|
||||
|
||||
<template>
|
||||
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
|
||||
<table class="data-table" id="client-employee-table">
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
|
||||
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||
<th :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">Job Title</th>
|
||||
<th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
|
||||
<td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||
<td :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">...</td>
|
||||
<td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ClientDepartmentEmployeeList",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.section-darkmode { background-color: #2c2c2c; }
|
||||
.section-lightmode { background-color: #ffffff; }
|
||||
|
||||
|
||||
|
||||
.label {
|
||||
padding: 1.25rem 0;
|
||||
letter-spacing: 0.04rem;
|
||||
text-decoration-line: underline;
|
||||
font: 400 1rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.label-darkmode { color: #ffffff; }
|
||||
.label-lightmode { color: #000000; }
|
||||
|
||||
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
.tr-darkmode { border-top: 0.0625rem solid #000000; }
|
||||
.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
|
||||
|
||||
th, td {
|
||||
height: 1.875rem;
|
||||
width: 35%;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
border-left: none;
|
||||
letter-spacing: 0.02rem;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
|
||||
.th-darkmode, .td-darkmode {
|
||||
color: #ffffff;
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
.th-lightmode, .td-lightmode {
|
||||
color: #000000;
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.ID { width: 20%; }
|
||||
.Pronouns { width: 10%; }
|
||||
|
||||
.Pronouns-darkmode { border-right: none; }
|
||||
.Pronouns-lightmode { border-right: none; }
|
||||
|
||||
|
||||
</style>
|
||||
112
components/server/ClientDepartmentList.vue
Normal file
112
components/server/ClientDepartmentList.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Departments:</div>
|
||||
<table class="data-table" id="client-employee-table">
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
|
||||
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||
<th :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">Head</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
|
||||
<td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||
<td :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ClientDepartmentList",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.section-darkmode { background-color: #2c2c2c; }
|
||||
.section-lightmode { background-color: #ffffff; }
|
||||
|
||||
|
||||
|
||||
.label {
|
||||
padding: 1.25rem 0;
|
||||
letter-spacing: 0.04rem;
|
||||
text-decoration-line: underline;
|
||||
font: 400 1rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.label-darkmode { color: #ffffff; }
|
||||
.label-lightmode { color: #000000; }
|
||||
|
||||
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
.tr-darkmode { border-top: 0.0625rem solid #000000; }
|
||||
.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
|
||||
|
||||
th, td {
|
||||
height: 1.875rem;
|
||||
width: 40%;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
border-left: none;
|
||||
letter-spacing: 0.02rem;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
|
||||
.th-darkmode, .td-darkmode {
|
||||
color: #ffffff;
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
.th-lightmode, .td-lightmode {
|
||||
color: #000000;
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.ID { width: 20%; }
|
||||
|
||||
.DHead { border-right: none; }
|
||||
|
||||
|
||||
</style>
|
||||
191
components/server/ClientEmployee.vue
Normal file
191
components/server/ClientEmployee.vue
Normal file
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Employee name</pre>
|
||||
<div class="data-group" id="personal-data">
|
||||
<div class="data-group" id="full-name">
|
||||
<div class="data-field" id="ntitle">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Title/-s:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="first-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">First Name/-s:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="last-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last Name/-s:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-group" id="other">
|
||||
<div class="data-field" id="id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="pronouns">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Pronouns:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="preferred-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Preferred Name:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-group" id="employment-data">
|
||||
<div class="data-field" id="client-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="department">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Department:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="job-title">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Job Title:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-group" id="contact-data">
|
||||
<div class="data-field" id="phone">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone No.:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="mail">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ClientEmployee",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
.section-darkmode { background-color: #2c2c2c; }
|
||||
.section-lightmode { background-color: #ffffff; }
|
||||
|
||||
|
||||
.title {
|
||||
padding: 1.25rem 0;
|
||||
letter-spacing: 0.04rem;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.title-darkmode { color: #ffffff; }
|
||||
.title-lightmode { color: #000000; }
|
||||
|
||||
|
||||
|
||||
.data-group {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
padding: 1.25rem 0;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
}
|
||||
#personal-data {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
#full-name, #other { padding: 0; }
|
||||
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
width: 20%;
|
||||
flex-direction: row;
|
||||
padding: 0 1.875rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
#first-name, #last-name, #department, #job-title, #phone { width: 40%; }
|
||||
#preferred-name, #mail { width: 60%; }
|
||||
|
||||
.label {
|
||||
letter-spacing: 0.02rem;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.pre-darkmode { color: #ffffff; }
|
||||
.pre-lightmode { color: #000000; }
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
background-color: #212121;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
letter-spacing: 0.02rem;
|
||||
font: 400 0.75rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #ffffff;
|
||||
}
|
||||
.data-lightmode {
|
||||
background-color: #ebebeb;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
||||
.notes {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
padding: 1.25rem 1.875rem 0.625rem;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
letter-spacing: 0.03rem;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
#notes { align-self: stretch; }
|
||||
|
||||
</style>
|
||||
116
components/server/ClientEmployeeList.vue
Normal file
116
components/server/ClientEmployeeList.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
|
||||
<table class="data-table" id="client-employee-table">
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
|
||||
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||
<th :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">Department / Job Title</th>
|
||||
<th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
|
||||
<td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||
<td :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">...</td>
|
||||
<td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ClientEmployeeList",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.section-darkmode { background-color: #2c2c2c; }
|
||||
.section-lightmode { background-color: #ffffff; }
|
||||
|
||||
|
||||
|
||||
.label {
|
||||
padding: 1.25rem 0;
|
||||
letter-spacing: 0.04rem;
|
||||
text-decoration-line: underline;
|
||||
font: 400 1rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.label-darkmode { color: #ffffff; }
|
||||
.label-lightmode { color: #000000; }
|
||||
|
||||
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
.tr-darkmode { border-top: 0.0625rem solid #000000; }
|
||||
.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
|
||||
|
||||
th, td {
|
||||
height: 1.875rem;
|
||||
width: 35%;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
border-left: none;
|
||||
letter-spacing: 0.02rem;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
|
||||
.th-darkmode, .td-darkmode {
|
||||
color: #ffffff;
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
.th-lightmode, .td-lightmode {
|
||||
color: #000000;
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.ID { width: 20%; }
|
||||
.Pronouns { width: 10%; }
|
||||
|
||||
.Pronouns-darkmode { border-right: none; }
|
||||
.Pronouns-lightmode { border-right: none; }
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<table class="data-table" id="client-table">
|
||||
<tbody>
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
@ -21,7 +21,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@ -52,12 +52,12 @@ export default {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
.section-lightmode {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
@ -94,8 +94,7 @@ export default {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
th, td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
@ -103,14 +102,12 @@ td {
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
.th-darkmode, .td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
.th-lightmode, .td-lightmode {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
th {
|
||||
|
||||
@ -242,7 +242,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
@ -394,7 +394,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
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="addAsset">
|
||||
<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="deleteAsset">
|
||||
<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>
|
||||
@ -93,8 +81,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
const darkMode = ref(true)
|
||||
const isExpanded = ref(true)
|
||||
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
const toggleEditable = () => {
|
||||
@ -103,6 +95,10 @@ const toggleEditable = () => {
|
||||
const deleteAsset = () => {
|
||||
store.commit('doDeleteAsset');
|
||||
};
|
||||
|
||||
const toggleActionbar = () => {
|
||||
isExpanded.value = !isExpanded.value;
|
||||
};
|
||||
const toggleFiltered = () => {
|
||||
store.commit('toggleFilteredAsset');
|
||||
};
|
||||
@ -116,22 +112,9 @@ const addAsset = () => {
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "Actionbar",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
isExpanded: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleActionbar() {
|
||||
this.isExpanded = !this.isExpanded;
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -146,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;
|
||||
@ -156,37 +139,30 @@ aside.actionbar {
|
||||
justify-content: center;
|
||||
padding: 1.875rem 0.625rem;
|
||||
gap: 1.25rem;
|
||||
transition: all 10s ease-in-out 0s;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.actionbar-darkmode {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
|
||||
.actionbar-lightmode {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
aside.is-expanded {
|
||||
animation: expand 0.5s linear both;
|
||||
}
|
||||
|
||||
aside.is-not-expanded {
|
||||
animation: contract 0.5s linear both;
|
||||
width: stretch;
|
||||
inline-size: stretch;
|
||||
}
|
||||
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.25rem 0;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 1.25rem 0;
|
||||
gap: 1.25rem;
|
||||
overflow: clip;
|
||||
}
|
||||
@ -200,34 +176,21 @@ button {
|
||||
border-radius: 0.625rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.125rem;
|
||||
border: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
overflow: clip;
|
||||
gap: 0.125rem
|
||||
}
|
||||
|
||||
.button-darkmode {
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
|
||||
.button-lightmode {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.button-darkmode { background-color: #2C2C2C; }
|
||||
.button-lightmode { background-color: #FFFFFF; }
|
||||
|
||||
.button-darkmode:hover,
|
||||
.indicator-darkmode:hover {
|
||||
background-color: #444444;
|
||||
}
|
||||
.indicator-darkmode:hover { background-color: #444444; }
|
||||
|
||||
.button-lightmode:hover,
|
||||
.indicator-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
}
|
||||
.indicator-lightmode:hover { background-color: #ACACAC; }
|
||||
|
||||
.is-not-expanded>button {
|
||||
align-self: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.is-not-expanded>button { align-self: center; }
|
||||
|
||||
|
||||
.icon {
|
||||
@ -238,7 +201,9 @@ button {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0.5rem;
|
||||
transition: padding 0.5s linear
|
||||
}
|
||||
.is-not-expanded .icon {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#indicator-icon {
|
||||
@ -247,15 +212,8 @@ button {
|
||||
border-radius: 0.3125rem;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
.is-not-expanded #indicator-icon { transform: rotate(180deg); }
|
||||
|
||||
.is-not-expanded .icon {
|
||||
align-self: center;
|
||||
padding: 0 0.375rem;
|
||||
}
|
||||
|
||||
.is-not-expanded #indicator-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 0.875rem;
|
||||
@ -264,44 +222,31 @@ img {
|
||||
object-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#indicator-icon>img {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.img-darkmode {
|
||||
filter: invert(100%);
|
||||
}
|
||||
.img-darkmode { filter: invert(100%); }
|
||||
#indicator-icon>img { height: 1.25rem; }
|
||||
|
||||
|
||||
.label {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
padding: 0rem 0.3125rem 0rem 0rem;
|
||||
letter-spacing: 5%;
|
||||
padding: 0rem 0.625rem 0rem 0rem;
|
||||
align-self: center;
|
||||
letter-spacing: 0.02rem;
|
||||
white-space: nowrap;
|
||||
font: 400 0.875rem/1.25rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000000;
|
||||
}
|
||||
.label-darkmode { color: #FFFFFF; }
|
||||
.label-lightmode { color: #000000; }
|
||||
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-enter-to,
|
||||
.fade-leave-from {
|
||||
opacity: 1;
|
||||
max-width: 0;
|
||||
}
|
||||
|
||||
.fade-enter-active {
|
||||
@ -321,8 +266,8 @@ img {
|
||||
|
||||
@keyframes expand {
|
||||
from {
|
||||
max-inline-size: 3.25rem;
|
||||
max-width: 3.25rem;
|
||||
max-inline-size: 3.125rem;
|
||||
max-width: 3.125rem;
|
||||
}
|
||||
|
||||
to {
|
||||
@ -338,8 +283,8 @@ img {
|
||||
}
|
||||
|
||||
to {
|
||||
max-inline-size: 3.25rem;
|
||||
max-width: 3.25rem;
|
||||
max-inline-size: 3.125rem;
|
||||
max-width: 3.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,67 +1,64 @@
|
||||
<template>
|
||||
<aside
|
||||
:class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||
<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" />
|
||||
<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" />
|
||||
</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">
|
||||
<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>
|
||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
|
||||
</Transition>
|
||||
</router-link>
|
||||
</nav>
|
||||
<nav id="site-menu">
|
||||
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
id="checklists-button">
|
||||
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" 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>
|
||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
|
||||
</Transition>
|
||||
</router-link>
|
||||
<nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultAssetPage()"
|
||||
id="assets-button">
|
||||
<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>
|
||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
|
||||
</Transition>
|
||||
</nuxt-link>
|
||||
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
id="solutions-button">
|
||||
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" 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>
|
||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
|
||||
</Transition>
|
||||
</router-link>
|
||||
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
id="accounting-button">
|
||||
<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>
|
||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
|
||||
</Transition>
|
||||
</router-link>
|
||||
<router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
id="clients-button">
|
||||
<router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="clients-button">
|
||||
<div class="icon" id="clients-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/navbar-icons/Clients-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Clients-Icon.svg" />
|
||||
</div>
|
||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</pre>
|
||||
</Transition>
|
||||
</router-link>
|
||||
</nav>
|
||||
</div>
|
||||
@ -102,47 +99,37 @@ export default {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
aside {
|
||||
aside.navbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
width: 3.125rem;
|
||||
transition: 0.5s ease-in-out;
|
||||
top: 3.75rem;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
inline-size: fit-content;
|
||||
border-radius: 0.625rem;
|
||||
flex: 0 0 0;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding: 0.9375rem;
|
||||
gap: 0.625rem;
|
||||
overflow: clip;
|
||||
overflow-clip-margin: 0.625rem;
|
||||
}
|
||||
|
||||
aside.is-expanded {
|
||||
width: 12.5rem;
|
||||
animation: expand 0.5s linear both;
|
||||
}
|
||||
|
||||
.is-expanded .label {
|
||||
opacity: 1;
|
||||
transition: 0.5s ease-in-out;
|
||||
aside.is-not-expanded {
|
||||
animation: contract 0.5s linear both;
|
||||
}
|
||||
|
||||
.is-not-expanded #indicator-icon {
|
||||
transform: rotate(180deg);
|
||||
transition: 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
border-radius: 0.625rem;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
gap: 0.625rem;
|
||||
padding: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navbar-darkmode {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
|
||||
.navbar-lightmode {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
background-color: #FFFFFF;
|
||||
@ -155,75 +142,67 @@ aside.is-expanded {
|
||||
height: 2.5rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: clip;
|
||||
overflow-clip-margin: 0.625rem;
|
||||
}
|
||||
|
||||
|
||||
.menus {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
justify-content: flex;
|
||||
padding: 1.25rem 0;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 1.875rem;
|
||||
transition: 0.5s ease-in-out;
|
||||
align-items: center;
|
||||
overflow: clip;
|
||||
overflow-clip-margin: 0.625rem;
|
||||
}
|
||||
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 0.9375rem 0;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 1.875rem;
|
||||
width: 92%;
|
||||
overflow: clip;
|
||||
overflow-clip-margin: 0.625rem;
|
||||
}
|
||||
|
||||
.menu-darkmode {
|
||||
border-bottom: 0.0625rem solid #8E8E8E;
|
||||
}
|
||||
|
||||
.menu-lightmode {
|
||||
border-bottom: 0.0625rem solid #BABABA;
|
||||
}
|
||||
.menu-darkmode { border-bottom: 0.0625rem solid #8E8E8E; }
|
||||
.menu-lightmode { border-bottom: 0.0625rem solid #BABABA; }
|
||||
|
||||
|
||||
|
||||
button,
|
||||
.button,
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-self: stretch;
|
||||
height: 2.1875rem;
|
||||
border-radius: 0.3125rem;
|
||||
border-radius: 0.625rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.3125rem;
|
||||
border: none;
|
||||
transition: 0.5s ease-in-out;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-darkmode {
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
|
||||
.button-lightmode {
|
||||
background-color: #FFFFFF;
|
||||
transition: 0.2s ease-in-out;
|
||||
overflow: clip;
|
||||
overflow-clip-margin: 0.625rem;
|
||||
}
|
||||
.button-darkmode { background-color: #2C2C2C; }
|
||||
.button-lightmode { background-color: #FFFFFF; }
|
||||
|
||||
.button-darkmode:hover,
|
||||
.indicator-darkmode:hover,
|
||||
.back-darkmode:hover {
|
||||
background-color: #444444;
|
||||
}
|
||||
.back-darkmode:hover { background-color: #444444; }
|
||||
|
||||
.button-lightmode:hover,
|
||||
.indicator-lightmode:hover,
|
||||
.back-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
}
|
||||
.back-lightmode:hover { background-color: #ACACAC; }
|
||||
|
||||
.is-not-expanded>button { align-self: center; }
|
||||
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
@ -232,24 +211,18 @@ a {
|
||||
height: 2.1875rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
#back-icon,
|
||||
#indicator-icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.3125rem;
|
||||
transition-duration: 0.5s;
|
||||
transition: 0.2s ease-out;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.back-darkmode:hover,
|
||||
.back-lightmode:hover,
|
||||
.indicator-darkmode:hover,
|
||||
.indicator-lightmode:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.indicator-lightmode:hover { cursor: pointer; }
|
||||
|
||||
|
||||
img {
|
||||
@ -258,28 +231,95 @@ img {
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
overflow: hidden;
|
||||
transition: 0.2s ease-out;
|
||||
}
|
||||
.img-darkmode { filter: invert(100%); }
|
||||
|
||||
.img-darkmode {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.label {
|
||||
letter-spacing: 5%;
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
padding: 0rem 0.625rem 0rem 0.3125rem;
|
||||
align-self: center;
|
||||
letter-spacing: 0.03rem;
|
||||
white-space: nowrap;
|
||||
margin: auto 0;
|
||||
font: 600 0.875rem/1.25rem Overpass, sans-serif;
|
||||
}
|
||||
.label-darkmode { color: #FFFFFF; }
|
||||
.label-lightmode { color: #000000; }
|
||||
|
||||
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-out;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
.fade-enter-to,
|
||||
.fade-leave-from {
|
||||
opacity: 1;
|
||||
padding: 0rem 0.625rem 0rem 0.3125rem;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000000;
|
||||
.fade-enter-active {
|
||||
transition: all 0.75s linear;
|
||||
animation: fade-in 0.5s linear forwards;
|
||||
}
|
||||
|
||||
.fade-leave-active {
|
||||
transition: all 0.75s linear;
|
||||
animation: fade-out 0.5s linear forwards;
|
||||
}
|
||||
|
||||
.fade-move {
|
||||
transition: transform 5s
|
||||
}
|
||||
|
||||
@keyframes expand {
|
||||
from {
|
||||
max-inline-size: 4.0625rem;
|
||||
max-width: 4.0625rem;
|
||||
}
|
||||
|
||||
to {
|
||||
max-inline-size: 15rem;
|
||||
max-width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes contract {
|
||||
from {
|
||||
max-inline-size: 15rem;
|
||||
max-width: 15rem;
|
||||
}
|
||||
|
||||
to {
|
||||
max-inline-size: 4.0625rem;
|
||||
max-width: 4.0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
max-width: 0;
|
||||
max-inline-size: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
max-width: 10rem;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
max-width: 10rem;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
to {
|
||||
max-width: 0;
|
||||
max-inline-size: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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>
|
||||
@ -1,12 +0,0 @@
|
||||
// export default function ({ route, redirect }) {
|
||||
// // Check if user is not authenticated and trying to access a page other than /login
|
||||
// if (!isAuthenticated() && route.path !== '/login') {
|
||||
// return redirect('/login');
|
||||
// }
|
||||
// }
|
||||
|
||||
// function isAuthenticated() {
|
||||
// // Implement authentication logic
|
||||
// return false
|
||||
// // Return true if authenticated, false otherwise
|
||||
// }
|
||||
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[]) {
|
||||
|
||||
4662
package-lock.json
generated
4662
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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,7 +40,8 @@ const onAsset = computed(() => store.state.onAsset);
|
||||
const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Assets'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -7,6 +7,11 @@
|
||||
<ClientTable v-if="onCustomerlist"/>
|
||||
<Client v-if="onCustomer"/>
|
||||
<ClientQuickAccess v-if="onCustomer"/>
|
||||
<ClientEmployeeList v-if="onEmployeelist"/>
|
||||
<ClientEmployee v-if="onEmployee"/>
|
||||
<ClientDepartmentList v-if="onDepartmentlist"/>
|
||||
<ClientDepartment v-if="onDepartment"/>
|
||||
<ClientDepartmentEmployeeList v-if="onDepartment"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -18,18 +23,26 @@ import { ref } from 'vue';
|
||||
import ClientTable from "../components/server/ClientTable.vue";
|
||||
import Client from "../components/server/Client.vue";
|
||||
import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
|
||||
//import ClientEmployees from "../components/server/ClientEmployees.vue";
|
||||
//import ClientEmployee from "../components/server/ClientEmployee.vue";
|
||||
import ClientEmployeeList from "../components/server/ClientEmployeeList.vue";
|
||||
import ClientEmployee from "../components/server/ClientEmployee.vue";
|
||||
import ClientDepartmentList from '~/components/server/ClientDepartmentList.vue';
|
||||
import ClientDepartment from '~/components/server/ClientDepartment.vue';
|
||||
import ClientDepartmentEmployeeList from '~/components/server/ClientDepartmentEmployeeList.vue';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Clients'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
// to render the right components
|
||||
const onCustomerlist = ref(true)
|
||||
const onCustomer = ref(true)
|
||||
const onCustomer = ref(false)
|
||||
const onEmployeelist = ref(false)
|
||||
const onEmployee = ref(false)
|
||||
const onDepartmentlist = ref(false)
|
||||
const onDepartment = ref(false)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -53,7 +53,8 @@ import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsIns
|
||||
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Maintenance Visits'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -53,7 +53,8 @@ import ProductionOrdersInstance from "../components/server/ProductionOrdersInsta
|
||||
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
|
||||
|
||||
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)
|
||||
|
||||
@ -24,7 +24,8 @@ import Solution from "../components/server/Solution.vue";
|
||||
import SolutionChecklist from "../components/server/SolutionChecklist.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Solutions'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -108,6 +108,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
|
||||
},
|
||||
doDeleteAsset(state) {
|
||||
state.deleteAsset = 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