diff --git a/app.vue b/app.vue
index ce479ee..2dfae6a 100644
--- a/app.vue
+++ b/app.vue
@@ -7,9 +7,21 @@
diff --git a/axios.config.js b/axios.config.js
index dd8d5b5..30d5271 100644
--- a/axios.config.js
+++ b/axios.config.js
@@ -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;
diff --git a/backend/controller/users.js b/backend/controller/users.js
index 26c568a..1bd09c4 100644
--- a/backend/controller/users.js
+++ b/backend/controller/users.js
@@ -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],
});
}
diff --git a/components/LoginForm.vue b/components/LoginForm.vue
index 411b896..18ed8b5 100644
--- a/components/LoginForm.vue
+++ b/components/LoginForm.vue
@@ -4,13 +4,13 @@
-
Login
+ Login
@@ -37,10 +36,10 @@
{{ errorMsg }}
-
-
+
+
+
+
@@ -51,6 +50,7 @@ import { ref } from 'vue';
import Axios from '../axios.config.js';
import clientsideConfig from '../clientsideConfig.js';
+const { signIn } = useAuth()
const router = useRouter();
const darkMode = ref(true);
const isError = ref(false);
@@ -63,19 +63,29 @@ const handleLogin = async () => {
const username = document.getElementById('username-input').value;
const password = document.getElementById('password-input').value;
- const requestBody = {
+ //const requestBody = {
+ const credentials = {
username: username,
password: password,
}
try {
- let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
+ /*let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
+ const sessionToken = useCookie('token', {maxAge: 604800, sameSite: true});
+ sessionToken.value = res.data.token;
+ Axios.defaults.headers.common['Authorization'] = `${username}`;
+ const userToken = useCookie('user', {maxAge: 604800, sameSite: true});
+ userToken.value = username;
// something to do with the res?
- console.log(res.data)
+ console.log(sessionToken)
+ console.log(res.data.message)
// sucessfully logged in
- router.push('/')
+ router.push('/home')*/
+ let res = await signIn( credentials, { callbackUrl: '/home' })
+ console.log("res", res)
+
} catch (err) {
// handle the error
console.log(err.response.statusText)
@@ -162,22 +172,22 @@ export default {
align-items: center;
justify-content: center;
width: 31.25rem;
- height: 33rem;
+ min-height: 33rem;
+ height: fit-content;
border-radius: 0.625rem;
padding: 2.5rem 1.875rem;
gap: 1.875rem;
}
-
.form-darkmode {
border: 0.0625rem solid #000;
background-color: #2c2c2c;
}
-
.form-lightmode {
border: 0.0625rem solid #8e8e8e;
background-color: #fff;
}
+
.title-field {
display: flex;
flex-direction: column;
@@ -192,7 +202,6 @@ export default {
width: 3.125rem;
height: 3.125rem;
}
-
.title-icon>img {
width: 3.125rem;
height: 3.125rem;
@@ -203,20 +212,14 @@ export default {
.title {
margin: 0;
- letter-spacing: 5%;
+ letter-spacing: 0.05rem;
white-space: nowrap;
font: 400 1.875rem/1.875rem Overpass, sans-serif;
}
+.title-darkmode { color: #ffffff; }
+.title-lightmode { color: #000000; }
-.pre-darkmode,
-.title-darkmode {
- color: #fff;
-}
-.pre-lightmode,
-.title-lightmode {
- color: #000;
-}
.login-field {
display: flex;
@@ -227,6 +230,7 @@ export default {
gap: 1.25rem;
}
+
.form-field {
display: flex;
flex-direction: column;
@@ -238,16 +242,6 @@ export default {
gap: 0.625rem;
}
-.form-field-error-msg {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- width: 25rem;
- height: 3rem;
- gap: 0.4rem;
-}
-
label {
display: flex;
flex-direction: row;
@@ -265,43 +259,28 @@ label {
width: 1.875rem;
height: 1.875rem;
}
-
.icon>img {
object-fit: contain;
object-position: center;
overflow: hidden;
}
-
-.icon-darkmode>img {
- filter: invert(100%);
-}
-
-.icon-lightmode>img {
- filter: invert(0%);
-}
-
#username-icon>img {
width: auto;
height: 0.9375rem;
-}
-
+}
#password-icon>img {
width: 0.9375rem;
height: auto;
}
+.icon-darkmode>img { filter: invert(100%); }
+.icon-lightmode>img { filter: invert(0%); }
.label {
- letter-spacing: 2%;
+ letter-spacing: 0.02rem;
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
}
-
-.label-darkmode {
- color: #fff;
-}
-
-.label-lightmode {
- color: #000;
-}
+.label-darkmode { color: #ffffff; }
+.label-lightmode { color: #000000; }
.input-field {
display: flex;
@@ -314,15 +293,9 @@ label {
border-radius: 0.3125rem;
padding: 0.1875rem 0.625rem;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-}
-
-.input-darkmode {
- background-color: #212121;
-}
-
-.input-lightmode {
- background-color: #EBEBEB;
-}
+}
+.input-darkmode { background-color: #212121; }
+.input-lightmode { background-color: #EBEBEB; }
input[type=text] {
width: 100%;
@@ -330,40 +303,63 @@ input[type=text] {
background-color: #00000000;
border: none;
color: #8e8e8e;
- letter-spacing: 5%;
+ letter-spacing: 0.01rem;
white-space: nowrap;
font: 100 0.75rem/1.25rem Overpass, sans-serif;
}
-input[type=button] {
+#show-password-toggle {
width: fit-content;
+ height: auto;
align-self: flex-end;
+ padding: 0;
+ border-radius: 0;
background-color: #00000000;
+ background: none;
border: none;
- letter-spacing: 5%;
+ letter-spacing: 0.01rem;
white-space: nowrap;
font: 300 0.75rem/1.25rem Overpass, sans-serif;
}
-.button-darkmode {
- color: #fff;
+
+
+.form-field-error-msg {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ width: 25rem;
+ height: 3rem;
+ gap: 0.4rem;
}
-.button-lightmode {
- color: #000;
+
+
+.buttons {
+ display: flex;
+ flex-direction: row;
+ height: fit-content;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ padding: 0.625rem 0.625rem 0;
+ gap: 2.5rem;
}
-#login-button {
- width: 13.75rem;
- height: 4.375rem;
+
+input[type=button] {
+ width: 9.375rem;
+ height: 3.125rem;
padding: 0.625rem;
border-radius: 0.625rem;
align-self: center;
border: none;
- color: #000;
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
- letter-spacing: 2%;
+ letter-spacing: 0.02rem;
white-space: nowrap;
- font: 600 1.25rem/1.875rem Overpass, sans-serif;
+ font: 600 1.125rem/1.875rem Overpass, sans-serif;
}
+.button-darkmode { color: #ffffff; }
+.button-lightmode { color: #000000; }
\ No newline at end of file
diff --git a/composables/UserObject.ts b/composables/UserObject.ts
new file mode 100644
index 0000000..5661ac8
--- /dev/null
+++ b/composables/UserObject.ts
@@ -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;
+}
\ No newline at end of file
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index 2940a3f..be99abc 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -1,16 +1,12 @@
-