implemented connection to the backend

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

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

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 || 4172;
-const PORT = process.env.PORT || config.port;
+const PORT = process.env.PORT || serversideConfig.port;
 
 //PORT
 server.listen(PORT, () => {

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

components/LoginForm.vue

@@ -32,47 +32,198 @@
         </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);
+const isError = ref(false);
+const errorMsg = ref('');
+
+const handleLogin = async () => {
+  isError.value = false;
+  errorMsg.value = '';
+
+  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)
+    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",
-  methods: {
+  data() {
-    async handleLogin() {
+    return {
-      const username = document.getElementById('username-input').value;
+      // isError: false,
-      const password = document.getElementById('password-input').value;
+      // errorMsg: '',
-
-      const requestBody = {
-        username: username,
-        password: password,
-      }
-
-      try {
-        let res = await Axios.post('/api/login', requestBody);
-
-        // something to do with the res?
-        console.log(res)
-
-        // sucessfully logged in
-        this.$router.push('/')
-      } catch (err) {
-        // handle the error 
-        console.log(err.message)
-      }
     }
-  }
+  },
+  // 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;

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

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)
+    if (!loginSuccessful) {
-
-    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) {
         throw createError({
             statusCode: 400,
-            statusMessage: 'Username or password not valid.',
+            statusMessage: errorMsg,
         })
     }
 
-    setResponseStatus(event, 202)
+    setResponseStatus(event, 200)
     return 'Successfully logged in.'
-
 })

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

server/middleware/login.ts

@@ -1,17 +1,66 @@
-let globalUserObject: { [key: string]: any } | null = null;
+import axios, { AxiosError } from 'axios';
-// let globalUserObject = null;
+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 = {
+        try {
-            username: "test",
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/login`, {
-            password: "asd"
+                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 };

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;

serversideConfig.js

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