From 73d0b89b4d14fc5d43e01e642369abe9e569e2e4 Mon Sep 17 00:00:00 2001 From: "selina.mail" Date: Tue, 6 Feb 2024 17:18:37 +0100 Subject: [PATCH] implemented connection to the backend --- axios.config.js | 3 +- backend/controller/issueVariants.js | 2 +- backend/index.js | 8 +- certs/server_ca.pem | 51 +++++++ components/LoginForm.vue | 211 ++++++++++++++++++++++++---- nuxt.config.ts | 8 +- server/api/login.ts | 24 +--- server/api/signup.ts | 14 ++ server/middleware/login.ts | 65 +++++++-- server/middleware/signUp.ts | 83 +++++++++++ serversideConfig.js | 2 +- 11 files changed, 409 insertions(+), 62 deletions(-) create mode 100644 certs/server_ca.pem create mode 100644 server/api/signup.ts create mode 100644 server/middleware/signUp.ts diff --git a/axios.config.js b/axios.config.js index 1b22387..dd8d5b5 100644 --- a/axios.config.js +++ b/axios.config.js @@ -1,9 +1,8 @@ import axios from 'axios'; -import serversideConfig from './serversideConfig.js' //create axios instance const Axios = axios.create({ - baseURL: `http://${serversideConfig.url}:${serversideConfig.port}`, + // baseURL: `https://${serversideConfig.url}:${serversideConfig.port}`, headers: { // 'Accept': 'application/json', 'Content-Type': 'application/json', diff --git a/backend/controller/issueVariants.js b/backend/controller/issueVariants.js index e209b49..8a4579c 100644 --- a/backend/controller/issueVariants.js +++ b/backend/controller/issueVariants.js @@ -8,7 +8,7 @@ import { deleteIssueVariantById, deleteIssueVariantByIssueSlipId, insertIssueVariant, -} from "../models/issuesModel.js"; +} from "../models/issueVariantsModel.js"; //get all issue variants export const showIssueVariants = (req, res) => { diff --git a/backend/index.js b/backend/index.js index ade66eb..b849d3e 100644 --- a/backend/index.js +++ b/backend/index.js @@ -20,7 +20,7 @@ const app = express(); //setup cors const corsOptions = { - origin: 'https://localhost:4173', + origin: 'https://localhost:3000', headers: 'authorization, content-type', methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', credentials: true, @@ -42,11 +42,11 @@ var certificate = fs.readFileSync('../certs/localhost.crt'); var server = https.createServer({ key: privateKey, - cert: certificate + cert: certificate, }, app); -// const PORT = process.env.PORT || 5172; -const PORT = process.env.PORT || config.port; +// const PORT = process.env.PORT || 4172; +const PORT = process.env.PORT || serversideConfig.port; //PORT server.listen(PORT, () => { diff --git a/certs/server_ca.pem b/certs/server_ca.pem new file mode 100644 index 0000000..2c38ee9 --- /dev/null +++ b/certs/server_ca.pem @@ -0,0 +1,51 @@ +-----BEGIN RSA PRIVATE KEY----- +MIIEogIBAAKCAQEAmhH63xr2TscMN+LXYWIiuDmoA71W4qTBd7Or3vwj1TnuOoXG +ikBBJbrdQ2ux3tAm1AeMtl664pFI5Qo/SmnJYt5I9uHKlfJ1//OZnKfwjFTtriyK +oyQ15dX84nmS5U7pWL6k1I5a4bCu8NZ+kfCKP+m0NBOY0edZD44xI2R6vRAoAIL+ +N112DyWkil8L+uNodW6SS3CMg/y8I8qOGsqeN9BllYg/VWo8nTwiNthRGCXIDurG +Z2NH/hoO+C4hA3C8qwjhD/urhs1WgV9570OLO7Hx3at0JRFan49Qu4Edj+tb4/tC +PviJHcGcalno4jO651ZB/TUJtNm0TgzGeKeh8wIDAQABAoIBABdXjAOLKS/sNiyt +YGYvoQT6LztJz0UNIwaIoQxqdN9UJISXSeoeLACUW/tf8JXKQWe0MRxcI8I5sqqI +r+gNOOaSuMk2kiO/lSMO/AHg66/HGi9eLi7jSIsmrWZ+dsPo/a9lSsGtQ5WX2BlC +1fA0Wi2usY+GPIvomfSiXU14ZqQH92lBrw4rD0vUVzaX5/J7eke7DD+Pjvwpyv8X +GF1lH/cz2g2lIr/+QuTf0mzGulO/8UAUo/aiUw+yaLd69yh7dMT8DkWVmmGAIYa7 +P6nCKUlsjP9I+CSSsRbZtOwZBj0PGW0gVVxqdf+yfcIvYraN1gf1JRGEyduYEgmg +ujs1SgkCgYEAyKAHFlnI51YnpXKpj4+yVzHyzp//C/E3vDugahlQSzaV19lFJfXv +qbqnd5UJHTDjnbdND1qlW7k5oxX72J952aRfE4p5nyN1oCl+fB2LRnAJrIIIuI/z +dBo11CNsin+8lOfc2Cw0I3gJLJtySaqYeRQdiYfzGapExFtFMtPg7T0CgYEAxJhu +SMMZHz1R+IUGqbWkZrQLOMlUttqUwWLP8JTrJEBtfo/pDfKfV+PTXPvdnOExRwnH +oxzFgtDXO2N0gMQ49loaDj8LzuSN2yOl8CdtXiamYL5pVCB6fwOC5nBFz7qFzvIs +OLSI4Qp+acHuozcTn4aqyLxe9a2O8HjHvC0hHu8CgYBLIdrlnOQm9lXMmN81Gyw/ +iT4T8UkTUNd9j5rogOhX8m41MnG54JtLJdKXbuHF48wqAT5DlL++VORn1dDF9Bsu +zWapq78WQLJJM6DhnDLPQx/sUZowfABBJ5unAUkhqOqXnSlQb2VrLwXIhcJMIi4N +keHp4lbA8snj+wY0HbLrRQKBgCuZOmv8iGe7K6CXr8CXPdxg9VQkohrjIrY4ebD6 +9aLWfvHgbGjhc6EEL22hlaYi8tC0RIfR66N1OSY8iiu8WH2ZwcmDBdVeLm942mYF ++GU24RL3Z1h203OzjaYZJAJLdT1Ny6zPrMNrlllR3uBnaHyqWtmlnNGTKe3+ex0q +TPwVAoGAO4rVc9aMEPLX0LWP2diqJR9WYuP3ctzocTUFNGb44Erc+aZ/cTw7wot5 +E98A2JbHB0cgi/CkH2NDTdrVQwkWvo4wmOXHKeRunvYLCPM4wmIJeYjMwGu1v5jY +MXl5VKJjejnMba4yr4eKUeBVWkE0a4NKysggG9TpfqVkWfdMjTg= +-----END RSA PRIVATE KEY----- +-----BEGIN CERTIFICATE----- +MIID9zCCAt+gAwIBAgIJSn3caCSNY4u+MA0GCSqGSIb3DQEBCwUAMGkxFDASBgNV +BAMTC2V4YW1wbGUub3JnMQswCQYDVQQGEwJVUzERMA8GA1UECBMIVmlyZ2luaWEx +EzARBgNVBAcTCkJsYWNrc2J1cmcxDTALBgNVBAoTBFRlc3QxDTALBgNVBAsTBFRl +c3QwHhcNMjMxMDE2MDk0MTI3WhcNMjMxMTE1MTA0MTI3WjBpMRQwEgYDVQQDEwtl +eGFtcGxlLm9yZzELMAkGA1UEBhMCVVMxETAPBgNVBAgTCFZpcmdpbmlhMRMwEQYD +VQQHEwpCbGFja3NidXJnMQ0wCwYDVQQKEwRUZXN0MQ0wCwYDVQQLEwRUZXN0MIIB +IjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAmhH63xr2TscMN+LXYWIiuDmo +A71W4qTBd7Or3vwj1TnuOoXGikBBJbrdQ2ux3tAm1AeMtl664pFI5Qo/SmnJYt5I +9uHKlfJ1//OZnKfwjFTtriyKoyQ15dX84nmS5U7pWL6k1I5a4bCu8NZ+kfCKP+m0 +NBOY0edZD44xI2R6vRAoAIL+N112DyWkil8L+uNodW6SS3CMg/y8I8qOGsqeN9Bl +lYg/VWo8nTwiNthRGCXIDurGZ2NH/hoO+C4hA3C8qwjhD/urhs1WgV9570OLO7Hx +3at0JRFan49Qu4Edj+tb4/tCPviJHcGcalno4jO651ZB/TUJtNm0TgzGeKeh8wID +AQABo4GhMIGeMAsGA1UdDwQEAwIC9DAxBgNVHSUEKjAoBggrBgEFBQcDAQYIKwYB +BQUHAwIGCCsGAQUFBwMDBggrBgEFBQcDCDBcBgNVHREEVTBTgglsb2NhbGhvc3SC +FWxvY2FsaG9zdC5sb2NhbGRvbWFpboIGbHZoLm1lgggqLmx2aC5tZYIFWzo6MV2H +BH8AAAGHEP6AAAAAAAAAAAAAAAAAAAEwDQYJKoZIhvcNAQELBQADggEBAD1JPu9a +eRd7j/VIuwxZf7Ex3S8Dcxoynm9btPm9F09w/AlftKmaikGyhFMhR1bu5DArKaxe +eQ8Qsp94DJHMBmEPxnjAnl1HB6FvVnG2u9ncpmflD352ZJDwMPaUx6FoBxmt5bFX +Dug2dnV1baj6ZfvsLcKROzxG6KvzB84wQDK1C0qEHHKfoJ3+FN/2BPZYnKSDiPMz +R5gfjsWOTbp7j0Amg8Mi4+LAGQ6VSYPdy7OfClcNsG4kFDrTzkojbsWT4o/JkzBl +XZ3D6UN1L4ONl0pwBblee6p/o6/qOzD86S+vctsY9Ee/4UkZrf7Sq3QEGsRr5rI1 +LQCaGcSTw6A7lDk= +-----END CERTIFICATE----- \ No newline at end of file diff --git a/components/LoginForm.vue b/components/LoginForm.vue index 61d3f4e..e713898 100644 --- a/components/LoginForm.vue +++ b/components/LoginForm.vue @@ -32,47 +32,198 @@ +
+ +
+ @@ -89,7 +240,7 @@ export default { align-items: center; justify-content: center; width: 31.25rem; - height: 31.25rem; + height: 33rem; border-radius: 0.625rem; padding: 2.5rem 1.875rem; gap: 1.875rem; @@ -165,6 +316,16 @@ 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; diff --git a/nuxt.config.ts b/nuxt.config.ts index 8851e77..f604380 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -1,4 +1,10 @@ // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ - devtools: { enabled: true } + devtools: { enabled: true }, + devServer: { + https: { + key: './certs/localhost.key', + cert: './certs/localhost.crt' + } + }, }) diff --git a/server/api/login.ts b/server/api/login.ts index 42f79b5..f75609d 100644 --- a/server/api/login.ts +++ b/server/api/login.ts @@ -1,30 +1,14 @@ -import { globalUserObject } from "../middleware/login"; +import { loginSuccessful, errorMsg } from "../middleware/login"; export default defineEventHandler(async (event) => { - const body = await readBody(event) - - let correctUsername; - let correctPassword; - if (globalUserObject !== null) { - correctUsername = globalUserObject.username; - correctPassword = globalUserObject.password; - } - - let authorized = false; - - if (body.username == correctUsername && body.password == correctPassword) { - authorized = true; - } - - if (!authorized) { + if (!loginSuccessful) { throw createError({ statusCode: 400, - statusMessage: 'Username or password not valid.', + statusMessage: errorMsg, }) } - setResponseStatus(event, 202) + setResponseStatus(event, 200) return 'Successfully logged in.' - }) diff --git a/server/api/signup.ts b/server/api/signup.ts new file mode 100644 index 0000000..e8e706e --- /dev/null +++ b/server/api/signup.ts @@ -0,0 +1,14 @@ +import { registeringSuccessful, errorMsg } from "../middleware/signUp.js"; + +export default defineEventHandler(async (event) => { + + if (!registeringSuccessful) { + throw createError({ + statusCode: 400, + statusMessage: errorMsg, + }) + } + + setResponseStatus(event, 202) + return 'Successfully signed up.' +}) diff --git a/server/middleware/login.ts b/server/middleware/login.ts index 2ce49b5..73c542e 100644 --- a/server/middleware/login.ts +++ b/server/middleware/login.ts @@ -1,17 +1,66 @@ -let globalUserObject: { [key: string]: any } | null = null; -// let globalUserObject = null; +import axios, { AxiosError } from 'axios'; +import serversideConfig from '../../serversideConfig'; +import fs from 'fs'; +import https from 'https'; -export default defineEventHandler((event) => { +let loginSuccessful = false; +let errorMsg = ''; + +export default defineEventHandler(async (event) => { + loginSuccessful = false; if (event.path.startsWith("/api/login")) { + const body = await readBody(event) + + // read the certificate and create agent + const caCert = fs.readFileSync('./certs/server_ca.pem'); + // const httpsAgent = new https.Agent({ + // keepAlive: true, + // ca: caCert, + // rejectUnauthorized: true, + // }); + + const agent = new https.Agent({ + rejectUnauthorized: false, + }); + + const axiosInstance = axios.create({ + headers: { + 'Content-Type': 'application/json', + Accept: "*", + }, + httpsAgent: agent + }); + // get user object from backend - const userObject = { - username: "test", - password: "asd" + 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); + } } - globalUserObject = userObject; } }) -export { globalUserObject }; \ No newline at end of file +export { loginSuccessful, errorMsg }; \ No newline at end of file diff --git a/server/middleware/signUp.ts b/server/middleware/signUp.ts new file mode 100644 index 0000000..3ddef44 --- /dev/null +++ b/server/middleware/signUp.ts @@ -0,0 +1,83 @@ +import axios, { AxiosError } from 'axios'; +import serversideConfig from '../../serversideConfig'; +import fs from 'fs'; +import https from 'https'; + +let registeringSuccessful = false; +let errorMsg = ''; + +export default defineEventHandler(async (event) => { + registeringSuccessful = false; + + if (event.path.startsWith("/api/signup")) { + + const body = await readBody(event) + + // read the certificate and create agent + const caCert = fs.readFileSync('./certs/server_ca.pem'); + // const httpsAgent = new https.Agent({ + // keepAlive: true, + // ca: caCert, + // rejectUnauthorized: true, + // }); + + const agent = new https.Agent({ + rejectUnauthorized: false, + }); + + const axiosInstance = axios.create({ + headers: { + 'Content-Type': 'application/json', + Accept: "*", + }, + httpsAgent: agent + }); + + // do the post request in the backend + try { + let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/signup`, { + username: body.username, + password: body.password, + password_repeat: body.password_repeat, + lastLogin: body.lastLogin, + fullName: body.fullName, + email: body.email, + phonenumber: body.phonenumber, + address: body.address, + city: body.city, + postcode: body.postcode, + adminBool: body.adminBool, + technician1Bool: body.technician1Bool, + technician2Bool: body.technician2Bool, + technicianMonitoringBool: body.technicianMonitoringBool, + merchantBool: body.merchantBool, + internBool: body.internBool, + }); + registeringSuccessful = 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 { registeringSuccessful, errorMsg }; + +registeringSuccessful = false; \ No newline at end of file diff --git a/serversideConfig.js b/serversideConfig.js index 427ae6f..8e35b21 100644 --- a/serversideConfig.js +++ b/serversideConfig.js @@ -2,7 +2,7 @@ const serversideConfig = { // url: 'tueitapp.tueit.de', // port: 8000, url: 'localhost', - port: 3000, + port: 4172, }; export default serversideConfig; \ No newline at end of file