adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

implemented connection to the backend

Browse Source
This commit is contained in:
selina.mail
2024-02-06 17:18:37 +01:00
parent 876d066f3d
commit 73d0b89b4d
11 changed files with 409 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
axios.config.js
View File

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

2
backend/controller/issueVariants.js
View File

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

8
backend/index.js
View File

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

51
certs/server_ca.pem Normal file
View File

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

183
components/LoginForm.vue
View File

@ -32,25 +32,32 @@
</div>
</div>
</div>
<div v-if="isError" class="form-field-error-msg" id="password-field">
<label>
<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">
</form>
</template>
<script setup>
import { ref } from 'vue';
// import LoginService from '../server/loginService.js';
import Axios from '../axios.config.js';
import serversideConfig from '../serversideConfig.js';
const darkMode = ref(true);
</script>
const isError = ref(false);
const errorMsg = ref('');
const handleLogin = async () => {
isError.value = false;
errorMsg.value = '';
<script>
export default {
name: "LoginForm",
methods: {
async handleLogin() {
const username = document.getElementById('username-input').value;
const password = document.getElementById('password-input').value;
@ -60,19 +67,163 @@ export default {
}
try {
let res = await Axios.post('/api/login', requestBody);
let res = await Axios.post(`https://${serversideConfig.url}:3000/api/login`, requestBody);
// something to do with the res?
console.log(res)
console.log(res.data)
// sucessfully logged in
this.$router.push('/')
} catch (err) {
// handle the error
console.log(err.message)
console.log(err.response.statusText)
isError.value = true;
errorMsg.value = err.response.statusText;
}
}
const testFunctionSignup = async () => {
isError.value = false;
errorMsg.value = '';
const username = 'maria'
const password = 'maria123'
const password_repeat = 'maria123'
const fullName = 'hallo'
const email = 'test.sdj@web.de'
const phonenumber = '015736283729'
const address = 'Strasse'
const city = 'tuebingen'
const postcode = '72121'
const adminBool = false
const technician1Bool = false
const technician2Bool = false
const technicianMonitoringBool = false
const merchantBool = false
const internBool = true
const requestBody = {
username: username,
password: password,
password_repeat: password_repeat,
fullName: fullName,
email: email,
phonenumber: phonenumber,
address: address,
city: city,
postcode: postcode,
adminBool: adminBool,
technician1Bool: technician1Bool,
technician2Bool: technician2Bool,
technicianMonitoringBool: technicianMonitoringBool,
merchantBool: merchantBool,
internBool: internBool,
}
try {
let res = await Axios.post(`https://${serversideConfig.url}:3000/api/signup`, requestBody);
// something to do with the res?
console.log(res.data)
} catch (err) {
// handle the error
console.log(err.response.statusText)
isError.value = true;
errorMsg.value = err.response.statusText;
}
}
</script>
<script>
export default {
name: "LoginForm",
data() {
return {
// isError: false,
// errorMsg: '',
}
},
// methods: {
// async handleLogin() {
// this.isError = false;
// this.errorMsg = '';
// const username = document.getElementById('username-input').value;
// const password = document.getElementById('password-input').value;
// const requestBody = {
// username: username,
// password: password,
// }
// try {
// let res = await Axios.post(`https://${serversideConfig.url}:3000/api/login`, requestBody);
// // something to do with the res?
// console.log(res.data)
// // sucessfully logged in
// this.$router.push('/')
// } catch (err) {
// // handle the error
// console.log(err.response.statusText)
// this.isError = true;
// this.errorMsg = err.response.statusText;
// }
// },
// async testFunctionSignup() {
// this.isError = false;
// this.errorMsg = '';
// const username = 'maria'
// const password = 'maria123'
// const password_repeat = 'maria123'
// const fullName = 'hallo'
// const email = 'test.sdj@web.de'
// const phonenumber = '015736283729'
// const address = 'Strasse'
// const city = 'tuebingen'
// const postcode = '72121'
// const adminBool = false
// const technician1Bool = false
// const technician2Bool = false
// const technicianMonitoringBool = false
// const merchantBool = false
// const internBool = true
// const requestBody = {
// username: username,
// password: password,
// password_repeat: password_repeat,
// fullName: fullName,
// email: email,
// phonenumber: phonenumber,
// address: address,
// city: city,
// postcode: postcode,
// adminBool: adminBool,
// technician1Bool: technician1Bool,
// technician2Bool: technician2Bool,
// technicianMonitoringBool: technicianMonitoringBool,
// merchantBool: merchantBool,
// internBool: internBool,
// }
// try {
// let res = await Axios.post(`https://${serversideConfig.url}:3000/api/signup`, requestBody);
// // something to do with the res?
// console.log(res.data)
// } catch (err) {
// // handle the error
// console.log(err.response.statusText)
// this.isError = true;
// this.errorMsg = err.response.statusText;
// }
// }
// }
}
</script>
@ -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;

8
nuxt.config.ts
View File

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

24
server/api/login.ts
View File

@ -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.'
})

14
server/api/signup.ts Normal file
View File

@ -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.'
})

65
server/middleware/login.ts
View File

@ -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 };
export { loginSuccessful, errorMsg };

83
server/middleware/signUp.ts Normal file
View File

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

2
serversideConfig.js
View File

@ -2,7 +2,7 @@ const serversideConfig = {
// url: 'tueitapp.tueit.de',
// port: 8000,
url: 'localhost',
port: 3000,
port: 4172,
};
export default serversideConfig;