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
@@ -21,14 +21,13 @@
- +
@@ -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 @@