From ed341b1e4787c0ec0a07a2b0be9f0a3aa621fb78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=ABl=20van=20de=20Vrie?=
 <46963141+noelvandevrie@users.noreply.github.com>
Date: Sat, 2 Nov 2024 18:33:45 +0100
Subject: [PATCH 1/6] Feature/nfc login (#439)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Noël van de Vrie <nvdvrie@gmaill.com>
---
 .../src/components/EanLoginComponent.vue      | 43 -------------
 .../src/components/Keypad/KeypadComponent.vue |  3 +-
 .../PointOfSaleDisplayComponent.vue           |  3 +-
 .../src/components/ScannersLoginComponent.vue | 58 ++++++++++++++++++
 .../components/ScannersUpdateComponent.vue    | 60 +++++++++++++++++++
 .../UserSearch/UserSearchComponent.vue        |  1 -
 .../UserSearch/UserSearchRowComponent.vue     |  3 +-
 apps/point-of-sale/src/main.ts                |  4 +-
 apps/point-of-sale/src/views/CashierView.vue  | 18 ++++++
 apps/point-of-sale/src/views/LoginView.vue    | 19 +++++-
 lib/common/src/stores/auth.store.ts           | 10 +++-
 11 files changed, 170 insertions(+), 52 deletions(-)
 delete mode 100644 apps/point-of-sale/src/components/EanLoginComponent.vue
 create mode 100644 apps/point-of-sale/src/components/ScannersLoginComponent.vue
 create mode 100644 apps/point-of-sale/src/components/ScannersUpdateComponent.vue

diff --git a/apps/point-of-sale/src/components/EanLoginComponent.vue b/apps/point-of-sale/src/components/EanLoginComponent.vue
deleted file mode 100644
index c5f22b22..00000000
--- a/apps/point-of-sale/src/components/EanLoginComponent.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div class="ean-scanner" />
-</template>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted, PropType } from "vue";
-
-const props = defineProps({
-  handleLogin: {
-    type: Function as PropType<(eanCode: string) => Promise<void>>,
-    required: true
-  }
-});
-
-let captures: KeyboardEvent[] = [];
-
-/**
- * Handle the input event. When the enter key is pressed, the captured
- * key events are reduced to a string and passed to the handleLogin
- * function. The captures are then reset.
- */
-const onInput = (event: KeyboardEvent): void => {
-    if (event.code === 'Enter') {
-    const code = captures.reduce((input, e) => input + e.key, '');
-    props.handleLogin(code);
-    captures = [];
-  } else {
-    captures.push(event);
-  }
-};
-
-onMounted(() => {
-  document.addEventListener('keydown', onInput);
-});
-
-onUnmounted(() => {
-  document.addEventListener('keydown', onInput);
-});
-</script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/apps/point-of-sale/src/components/Keypad/KeypadComponent.vue b/apps/point-of-sale/src/components/Keypad/KeypadComponent.vue
index 44d24a2a..237df4a4 100644
--- a/apps/point-of-sale/src/components/Keypad/KeypadComponent.vue
+++ b/apps/point-of-sale/src/components/Keypad/KeypadComponent.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="keypad flex-column">
     <div class="key-row flex justify-content-center" v-for="row in keypadLayout" :key="row[0]">
-      <div :class="['key c-btn active square shadow-2', { outlined: key === keypadBackspace || key === keypadExternal }]"
+      <div :class="['key c-btn active square shadow-2',
+       { outlined: key === keypadBackspace || key === keypadExternal }]"
         v-for="key in row" :key="key" @click="handleKeyClick(key)">
         <i class="pi pi-delete-left text-6xl" v-if="key === keypadBackspace" />
         {{ key !== keypadBackspace ? key : '' }}
diff --git a/apps/point-of-sale/src/components/PointOfSaleDisplay/PointOfSaleDisplayComponent.vue b/apps/point-of-sale/src/components/PointOfSaleDisplay/PointOfSaleDisplayComponent.vue
index 8396c6df..03f014fc 100644
--- a/apps/point-of-sale/src/components/PointOfSaleDisplay/PointOfSaleDisplayComponent.vue
+++ b/apps/point-of-sale/src/components/PointOfSaleDisplay/PointOfSaleDisplayComponent.vue
@@ -36,7 +36,8 @@
     </div>
     <Message v-if="isCategoryAlcoholic && !useSettingStore().isAlcoholTime" severity="warn" class="mr-4">
       Please note that today, alcoholic drinks are only allowed to be served after
-      {{ new Date(useSettingStore().alcoholTimeToday).toLocaleTimeString('nl-NL', { hour: "2-digit", minute: "2-digit" }) }}.
+      {{ new Date(useSettingStore().alcoholTimeToday)
+      .toLocaleTimeString('nl-NL', { hour: "2-digit", minute: "2-digit" }) }}.
       This also applies to non-alcoholic alternatives on this page.
     </Message>
     <PointOfSaleProductsComponent
diff --git a/apps/point-of-sale/src/components/ScannersLoginComponent.vue b/apps/point-of-sale/src/components/ScannersLoginComponent.vue
new file mode 100644
index 00000000..9b675507
--- /dev/null
+++ b/apps/point-of-sale/src/components/ScannersLoginComponent.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="scanners" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, PropType } from "vue";
+
+const props = defineProps({
+  handleNfcLogin: {
+    type: Function as PropType<(nfcCode: string) => Promise<void>>,
+    required: true
+  },
+  handleEanLogin: {
+    type: Function as PropType<(eanCode: string) => Promise<void>>,
+    required: true
+  }
+});
+
+let captures: KeyboardEvent[] = [];
+
+/**
+ * Handle the input event. When the enter key is pressed, the captured
+ * key events are reduced to a string and passed to the handleLogin
+ * functions. The captures are then reset.
+ */
+const onInput = (event: KeyboardEvent): void => {
+    if (event.code === 'Enter') {
+      const capturedCode = captures.reduce((input, e) => input + e.key, '');
+      const checkCode = capturedCode.substring(0, 3);
+      switch (checkCode) {
+        case 'nfc':
+          props.handleNfcLogin(capturedCode.substring(3));
+          break;
+        case 'ean':
+          // capturedCode.substring(3)
+          break;
+        default:
+          //TODO toast error for user
+      }
+      captures = [];
+  } else {
+    captures.push(event);
+    console.log(captures);
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('keydown', onInput);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onInput);
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/point-of-sale/src/components/ScannersUpdateComponent.vue b/apps/point-of-sale/src/components/ScannersUpdateComponent.vue
new file mode 100644
index 00000000..c4725869
--- /dev/null
+++ b/apps/point-of-sale/src/components/ScannersUpdateComponent.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="scanners" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, PropType } from "vue";
+import { useToast } from "primevue/usetoast";
+
+const toast = useToast();
+
+const props = defineProps({
+  handleNfcUpdate: {
+    type: Function as PropType<(nfcCode: string) => Promise<void>>,
+    required: true
+  }
+});
+
+let captures: KeyboardEvent[] = [];
+
+/**
+ * Handle the input event. When the enter key is pressed, the captured
+ * key events are reduced to a string and passed to the handleLogin
+ * functions. The captures are then reset.
+ */
+const onInput = (event: KeyboardEvent): void => {
+    if (event.code === 'Enter') {
+      const capturedCode = captures.reduce((input, e) => input + e.key, '');
+      const checkCode = capturedCode.substring(0, 3);
+      switch (checkCode) {
+        case 'nfc':
+          props.handleNfcUpdate(capturedCode.substring(3)).then(() => {
+            toast.add({ severity: 'success', summary: 'NFC code accepted',
+              detail: 'Your NFC code has been accepted.' });
+          }).catch((err) => {
+            console.error(err);
+            toast.add({ severity: 'error', summary: 'NFC code not accepted',
+              detail: 'Your NFC code could not be accepted. Please try again.' });
+          });
+          break;
+        default:
+          //TODO toast error for user
+      }
+      captures = [];
+    } else {
+      captures.push(event);
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('keydown', onInput);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onInput);
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/point-of-sale/src/components/UserSearch/UserSearchComponent.vue b/apps/point-of-sale/src/components/UserSearch/UserSearchComponent.vue
index 3687afe7..47a00d0e 100644
--- a/apps/point-of-sale/src/components/UserSearch/UserSearchComponent.vue
+++ b/apps/point-of-sale/src/components/UserSearch/UserSearchComponent.vue
@@ -39,7 +39,6 @@ import UserSearchRowComponent from "@/components/UserSearch/UserSearchRowCompone
 import { useCartStore } from "@/stores/cart.store";
 import { useAuthStore } from "@sudosos/sudosos-frontend-common";
 import { debounce } from 'lodash';
-import axios from 'axios';
 import type { AxiosResponse } from 'axios';
 import { useSettingStore } from "@/stores/settings.store";
 import ScrollPanel from "primevue/scrollpanel";
diff --git a/apps/point-of-sale/src/components/UserSearch/UserSearchRowComponent.vue b/apps/point-of-sale/src/components/UserSearch/UserSearchRowComponent.vue
index db1ae4e9..8408763b 100644
--- a/apps/point-of-sale/src/components/UserSearch/UserSearchRowComponent.vue
+++ b/apps/point-of-sale/src/components/UserSearch/UserSearchRowComponent.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="user-row flex-container font-size-lg font-semibold text-center shadow-1 border-round-xl my-1 py-3 my-3 bg-red-100"
+  <div class="user-row flex-container font-size-lg font-semibold
+   text-center shadow-1 border-round-xl my-1 py-3 my-3 bg-red-100"
        :class="{inactive: !active}" @click="selectUser">
     {{ displayName() }}
     <i class="pi pi-user-minus" v-if="shouldShowAge()"/>
diff --git a/apps/point-of-sale/src/main.ts b/apps/point-of-sale/src/main.ts
index e3b74fa4..fbfba70e 100644
--- a/apps/point-of-sale/src/main.ts
+++ b/apps/point-of-sale/src/main.ts
@@ -13,6 +13,7 @@ import Panel from "primevue/panel";
 import Dialog from "primevue/dialog";
 import OverlayPanel from "primevue/overlaypanel";
 import Dropdown from "primevue/dropdown";
+import Toast from "primevue/toast";
 
 import router from './router';
 import App from './App.vue';
@@ -36,7 +37,8 @@ app.component('OverlayPanel', OverlayPanel);
 app.component('Dropdown', Dropdown);
 // eslint-disable-next-line
 app.component('Message', Message);
-
+// eslint-disable-next-line
+app.component('Toast', Toast);
 app.use(createPinia());
 app.mount('#app');
 
diff --git a/apps/point-of-sale/src/views/CashierView.vue b/apps/point-of-sale/src/views/CashierView.vue
index bac5c444..8a99c526 100644
--- a/apps/point-of-sale/src/views/CashierView.vue
+++ b/apps/point-of-sale/src/views/CashierView.vue
@@ -19,6 +19,7 @@
     </div>
   </div>
   <SettingsIconComponent />
+  <ScannersUpdateComponent :handle-nfc-update="nfcUpdate"/>
 </template>
 <script setup lang="ts">
 import { PointOfSaleWithContainersResponse } from '@sudosos/sudosos-client';
@@ -31,12 +32,17 @@ import { useActivityStore } from '@/stores/activity.store';
 import ActivityComponent from '@/components/ActivityComponent.vue';
 import UserSearchComponent from "@/components/UserSearch/UserSearchComponent.vue";
 import BuyerSelectionComponent from "@/components/BuyerSelect/BuyerSelectionComponent.vue";
+import ScannersUpdateComponent from "@/components/ScannersUpdateComponent.vue";
+import { useAuthStore } from "@sudosos/sudosos-frontend-common";
+import apiService from "@/services/ApiService";
 
+const authStore = useAuthStore();
 const posNotLoaded = ref(true);
 const currentPos: Ref<PointOfSaleWithContainersResponse | undefined> = ref(undefined);
 const pointOfSaleStore = usePointOfSaleStore();
 const activityStore = useActivityStore();
 
+
 enum PointOfSaleState {
   SEARCH_USER,
   DISPLAY_POS,
@@ -84,6 +90,18 @@ watch(
     if (newPos) currentPos.value = newPos;
   }
 );
+
+const nfcUpdate = async (nfcCode: string) => {
+  try {
+    const userId = authStore.user?.id;
+    if (!userId) return;
+
+    await apiService.user.updateUserNfc(userId, { nfcCode: nfcCode }).then(async () => {
+    });
+  } catch (error) {
+    console.error(error);
+  }
+};
 </script>
 <style scoped lang="scss">
 .wrapper {
diff --git a/apps/point-of-sale/src/views/LoginView.vue b/apps/point-of-sale/src/views/LoginView.vue
index 1b6c45c9..40f8e380 100644
--- a/apps/point-of-sale/src/views/LoginView.vue
+++ b/apps/point-of-sale/src/views/LoginView.vue
@@ -30,7 +30,10 @@
   </div>
   <SettingsIconComponent />
   <GitInfo/>
-  <EanLoginComponent :handle-login="eanLogin"/>
+  <ScannersLoginComponent
+    :handle-nfc-login="nfcLogin"
+    :handle-ean-login="eanLogin"
+  />
 </template>
 
 <script setup lang="ts">
@@ -43,7 +46,8 @@ import router from '@/router';
 import { useCartStore } from '@/stores/cart.store';
 import apiService from '@/services/ApiService';
 import BannerComponent from '@/components/Banner/BannerComponent.vue';
-import EanLoginComponent from "@/components/EanLoginComponent.vue";
+import ScannersLoginComponent from "@/components/ScannersLoginComponent.vue";
+
 import GitInfo from "@/components/GitInfo.vue";
 
 const userStore = useUserStore();
@@ -164,9 +168,18 @@ const login = () => {
   loggingIn.value = false;
 };
 
+const nfcLogin = async (nfcCode: string) => {
+  try {
+    await authStore.nfcLogin(nfcCode, apiService).then(async () => {
+      await loginSucces();
+    });
+  } catch (error) {
+    console.error(error);
+  }
+};
 
 const eanLogin = async (eanCode: string) => {
-  console.error(eanCode);
+
   try {
     await authStore.eanLogin(eanCode, apiService).then(async () => {
       await loginSucces();
diff --git a/lib/common/src/stores/auth.store.ts b/lib/common/src/stores/auth.store.ts
index e3994dbd..b79fcdc5 100644
--- a/lib/common/src/stores/auth.store.ts
+++ b/lib/common/src/stores/auth.store.ts
@@ -5,7 +5,7 @@ import {
   AuthenticationResponse,
   GEWISAuthenticationPinRequest, GewiswebAuthenticationRequest, UpdatePinRequest,
   UpdateLocalRequest,
-  UserResponse, UpdateNfcRequest, AcceptTosRequest
+  UserResponse, UpdateNfcRequest, AcceptTosRequest, AuthenticationNfcRequest
 } from "@sudosos/sudosos-client";
 import { useUserStore } from "./user.store";
 import { jwtDecode, JwtPayload } from "jwt-decode";
@@ -89,6 +89,14 @@ export const useAuthStore = defineStore({
         this.handleResponse(res.data);
       });
     },
+    async nfcLogin(nfcCode: string, service: ApiService) {
+      const req: AuthenticationNfcRequest = {
+        nfcCode
+      };
+      await service.authenticate.nfcAuthentication(req).then((res) => {
+        this.handleResponse(res.data);
+      });
+    },
     async eanLogin(eanCode: string, service: ApiService) {
       const req: AuthenticationEanRequest = {
         eanCode

From 3e5901b0cac5445ed2169ba7e28d8254321b7cdd Mon Sep 17 00:00:00 2001
From: Jobbiesaus <54932894+Jobbiesaus@users.noreply.github.com>
Date: Sat, 2 Nov 2024 18:46:41 +0100
Subject: [PATCH 2/6] feat: Endpoint for public keys (#434)

---
 README.md                                     |  2 +-
 apps/dashboard/.env.example                   |  9 +-----
 .../src/modules/auth/views/AuthLoginView.vue  |  4 ++-
 .../components/balance/BalanceTopupModal.vue  |  6 ++--
 apps/dashboard/src/services/ApiService.ts     |  2 +-
 apps/dashboard/src/stores/settings.store.ts   | 31 +++++++++++++++++--
 apps/dashboard/src/utils/beforeLoadUtil.ts    |  1 +
 apps/dashboard/src/utils/urlUtils.ts          | 10 +++---
 apps/dashboard/vite.config.ts                 | 15 ++++++---
 apps/point-of-sale/.env.example               |  5 +--
 apps/point-of-sale/src/services/ApiService.ts |  2 +-
 apps/point-of-sale/src/utils/imageUtils.ts    |  4 +--
 apps/point-of-sale/vite.config.ts             |  6 ++--
 13 files changed, 63 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index cb7ea4ff..22773be8 100644
--- a/README.md
+++ b/README.md
@@ -67,7 +67,7 @@ You can quickly start development directly in your browser by using [Codespaces]
 - You can access the dashboard and point of sale at `localhost:5173` and `localhost:5174` respectively.
 
 ### Proxying requests to different backends
-In the respective `.env` files, you can change which backend the frontend uses in development by changing the `VITE_DEV_API_BASE`. By default, this is set to the test backend (`https://sudosos.test.gewis.nl/api/v1`), but you can also change it to `https://sudosos.gewis.nl/api/v1` for the production backend. Or you can change it to `http://localhost:3000` if you are running the backend locally.   
+In the respective `.env` files, you can change which backend the frontend uses in development by changing the proxy target in vite.config.ts. By default, this is set to the test backend (`https://sudosos.test.gewis.nl/api/v1`), but you can also change it to `https://sudosos.gewis.nl/api/v1` for the production backend. Or you can change it to `http://localhost:3000` if you are running the backend locally.   
 
 ## Contributors
 
diff --git a/apps/dashboard/.env.example b/apps/dashboard/.env.example
index 131e921d..a0856446 100644
--- a/apps/dashboard/.env.example
+++ b/apps/dashboard/.env.example
@@ -1,10 +1,3 @@
-VITE_APP_API_BASE='http://localhost:5173/api'
-VITE_APP_IMAGE_BASE='https://sudosos.test.gewis.nl/static/'
-VITE_APP_GEWIS_TOKEN=sudosos-dev
-VITE_APP_STRIPE_PUBLISHABLE_KEY='pk_test_51GsQ83CTbnWP3CTYRobkOgrA4EjkHqvAN6FpDCccxfXayLzj4prFU0GeMIefYW0pvdwXuXqpmqJVLnf6bUyvNJ2T009bK0Sn1L'
-VITE_APP_STRIPE_RETURN_URL='http://localhost:5173/'
 VITE_APP_TREASURER_EMAIL='test@test.com'
 VITE_GIT_COMMIT_BRANCH=''
-VITE_GIT_COMMIT_SHA=''
-# Where the local api requests should be proxied to
-VITE_DEV_API_BASE='https://sudosos.test.gewis.nl/api/v1'
\ No newline at end of file
+VITE_GIT_COMMIT_SHA=''
\ No newline at end of file
diff --git a/apps/dashboard/src/modules/auth/views/AuthLoginView.vue b/apps/dashboard/src/modules/auth/views/AuthLoginView.vue
index 233ed1bd..e78d85a6 100644
--- a/apps/dashboard/src/modules/auth/views/AuthLoginView.vue
+++ b/apps/dashboard/src/modules/auth/views/AuthLoginView.vue
@@ -28,9 +28,11 @@ import { useAuthStore } from "@sudosos/sudosos-frontend-common";
 import apiService from "@/services/ApiService";
 import router from "@/router";
 import { useI18n } from "vue-i18n";
+import { useSettingsStore } from "@/stores/settings.store";
 
 const { t } = useI18n();
 
+const settingStore = useSettingsStore();
 const authStore = useAuthStore();
 const route = useRoute();
 const returning = ref();
@@ -58,7 +60,7 @@ onBeforeMount(() => {
   returning.value = hasToken();
 });
 const loginViaGEWIS = () => {
-  window.location.href = `https://gewis.nl/token/${import.meta.env.VITE_APP_GEWIS_TOKEN}`;
+  window.location.href = `https://gewis.nl/token/${settingStore.getToken}`;
 };
 </script>
 
diff --git a/apps/dashboard/src/modules/user/components/balance/BalanceTopupModal.vue b/apps/dashboard/src/modules/user/components/balance/BalanceTopupModal.vue
index df902920..0a80dfbe 100644
--- a/apps/dashboard/src/modules/user/components/balance/BalanceTopupModal.vue
+++ b/apps/dashboard/src/modules/user/components/balance/BalanceTopupModal.vue
@@ -32,6 +32,7 @@ import apiService from '@/services/ApiService';
 import type { Dinero } from "@sudosos/sudosos-client";
 import { formatPrice } from "@/utils/formatterUtils";
 import { useI18n } from "vue-i18n";
+import { useSettingsStore } from "@/stores/settings.store";
 import { useToast } from "primevue/usetoast";
 
 const { t } = useI18n();
@@ -58,9 +59,10 @@ const toast = useToast();
 const stripe = ref();
 const paymentElement = ref();
 const elements = ref();
+const settingStore = useSettingsStore();
 onBeforeMount(async () => {
   loadStripe.setLoadParameters({ advancedFraudSignals: false });
-  stripe.value = await loadStripe(`${import.meta.env.VITE_APP_STRIPE_PUBLISHABLE_KEY}`);
+  stripe.value = await loadStripe(`${settingStore.getStripe}`);
 
 });
 
@@ -85,7 +87,7 @@ const submitPay = async () => {
   await stripe.value.confirmPayment({
     elements: elements.value,
     confirmParams: {
-      return_url: import.meta.env.VITE_APP_STRIPE_RETURN_URL
+      return_url: window.location.origin
     }
   }).then((result: PaymentIntentResult) => {
     if (result.error) {
diff --git a/apps/dashboard/src/services/ApiService.ts b/apps/dashboard/src/services/ApiService.ts
index 55d994dc..a144f47f 100644
--- a/apps/dashboard/src/services/ApiService.ts
+++ b/apps/dashboard/src/services/ApiService.ts
@@ -1,3 +1,3 @@
 import { ApiService } from "@sudosos/sudosos-frontend-common";
-const apiService = new ApiService(import.meta.env.VITE_APP_API_BASE);
+const apiService = new ApiService(window.location.origin + "/api/v1");
 export default apiService;
diff --git a/apps/dashboard/src/stores/settings.store.ts b/apps/dashboard/src/stores/settings.store.ts
index 90ba040d..6de84a86 100644
--- a/apps/dashboard/src/stores/settings.store.ts
+++ b/apps/dashboard/src/stores/settings.store.ts
@@ -4,16 +4,41 @@ import type { ServerStatusResponse } from '@sudosos/sudosos-client';
 
 export const useSettingsStore = defineStore('settings', {
   state: () => ({
-    settings: {} as ServerStatusResponse
+    status: {} as ServerStatusResponse,
+    token: "",
+    stripe: ""
   }),
   actions: {
     async fetchMaintenanceMode() {
-      this.settings.maintenanceMode = (await apiService.rootApi.ping()).data.maintenanceMode;
+      this.status.maintenanceMode = (await apiService.rootApi.ping()).data.maintenanceMode;
+    },
+    async fetchToken(){
+      await apiService.authenticate.getGEWISWebPublic().then((res) => {
+        this.token = res.data;
+        },
+      ).catch(() => {
+        this.status.maintenanceMode = true;
+      });
+    },
+    async fetchStripe(){
+      await apiService.stripe.getStripePublicKey().then((res) =>{
+        this.stripe = res.data;
+      });
+    },
+    async fetchKeys(){
+      await this.fetchToken();
+      await this.fetchStripe();
     }
   },
   getters: {
     activeSettings(): ServerStatusResponse {
-      return this.settings;
+      return this.status;
+    },
+    getToken(): String {
+      return this.token;
+    },
+    getStripe(): String {
+      return this.stripe;
     }
   }
 });
\ No newline at end of file
diff --git a/apps/dashboard/src/utils/beforeLoadUtil.ts b/apps/dashboard/src/utils/beforeLoadUtil.ts
index dbcea921..6dd68fa6 100644
--- a/apps/dashboard/src/utils/beforeLoadUtil.ts
+++ b/apps/dashboard/src/utils/beforeLoadUtil.ts
@@ -6,6 +6,7 @@ export default async function beforeLoad() {
 
   const settingsStore = useSettingsStore();
   await settingsStore.fetchMaintenanceMode();
+  await settingsStore.fetchKeys();
 
   await populateStoresFromToken(apiService).catch(() => {
     clearTokenInStorage();
diff --git a/apps/dashboard/src/utils/urlUtils.ts b/apps/dashboard/src/utils/urlUtils.ts
index e560488f..8377a88f 100644
--- a/apps/dashboard/src/utils/urlUtils.ts
+++ b/apps/dashboard/src/utils/urlUtils.ts
@@ -12,22 +12,22 @@ export function getProductImageSrc(product: ProductResponse): string {
             return product.image;
         } else {
             // If product.image is not a URL, construct the URL
-            return `${import.meta.env.VITE_APP_IMAGE_BASE}products/${product.image}`;
+            return `${window.location.origin}/static/products/${product.image}`;
         }
     }
 }
 export function getBannerImageSrc(banner: BannerResponse): string {
-    return `${import.meta.env.VITE_APP_IMAGE_BASE}banners/${banner.image}`;
+    return `${window.location.origin}/static/banners/${banner.image}`;
 }
 
 export function getInvoicePdfSrc(pdf: string): string {
-    return `${import.meta.env.VITE_APP_IMAGE_BASE}invoices/${pdf}`;
+    return `${window.location.origin}/static/invoices/${pdf}`;
 }
 
 export function getPayoutPdfSrc(pdf: string): string {
-    return `${import.meta.env.VITE_APP_IMAGE_BASE}payouts/${pdf}`;
+    return `${window.location.origin}/static/payouts/${pdf}`;
 }
 
 export function getSellerPayoutPdfSrc(pdf: string): string {
-    return `${import.meta.env.VITE_APP_IMAGE_BASE}sellerPayouts/${pdf}`;
+    return `${window.location.origin}/static/sellerPayouts/${pdf}`;
 }
diff --git a/apps/dashboard/vite.config.ts b/apps/dashboard/vite.config.ts
index 259c178d..e1f64fa0 100644
--- a/apps/dashboard/vite.config.ts
+++ b/apps/dashboard/vite.config.ts
@@ -1,7 +1,9 @@
 import { fileURLToPath, URL } from 'node:url';
-
 import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
+
+const PROXY_URL = 'https://sudosos.test.gewis.nl';
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
@@ -28,10 +30,15 @@ export default defineConfig(({ mode }) => {
     server: {
       port: 5173,
       proxy: {
-        '/api': {
-          target: env.VITE_DEV_API_BASE,
+        '/api/v1': {
+          target: PROXY_URL + '/api/v1',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api\/v1/, ''),
+        },
+        'static': {
+          target:  PROXY_URL + '/static',
           changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/api/, ''),
+          rewrite: (path) => path.replace(/^\/static/, ''),
         }
       }
     }
diff --git a/apps/point-of-sale/.env.example b/apps/point-of-sale/.env.example
index c91486bf..b6c17cc2 100644
--- a/apps/point-of-sale/.env.example
+++ b/apps/point-of-sale/.env.example
@@ -1,6 +1,3 @@
-VITE_APP_API_BASE='http://localhost:5174/api'
-VITE_APP_IMAGE_BASE='https://sudosos.test.gewis.nl/static/'
 VITE_GIT_COMMIT_BRANCH=''
 VITE_GIT_COMMIT_SHA=''
-# Where the local api requests should be proxied to
-VITE_DEV_API_BASE='https://sudosos.test.gewis.nl/api/v1'
+
diff --git a/apps/point-of-sale/src/services/ApiService.ts b/apps/point-of-sale/src/services/ApiService.ts
index 76f306e9..b02a33e0 100644
--- a/apps/point-of-sale/src/services/ApiService.ts
+++ b/apps/point-of-sale/src/services/ApiService.ts
@@ -1,6 +1,6 @@
 import { ApiService } from '@sudosos/sudosos-frontend-common';
 
 const apiService = new ApiService(
-  import.meta.env.VITE_APP_API_BASE
+  window.location.origin + "/api/v1"
 );
 export default apiService;
diff --git a/apps/point-of-sale/src/utils/imageUtils.ts b/apps/point-of-sale/src/utils/imageUtils.ts
index 65f4e763..e7f55117 100644
--- a/apps/point-of-sale/src/utils/imageUtils.ts
+++ b/apps/point-of-sale/src/utils/imageUtils.ts
@@ -4,8 +4,8 @@ export function getProductImageSrc(product: ProductResponse): string {
   if (!product.image) {
     return 'https://imgur.com/CS0aauU.png';
   }
-  return `${import.meta.env.VITE_APP_IMAGE_BASE}products/${product.image}`;
+  return `${window.location.origin}/static/products/${product.image}`;
 }
 export function getBannerImageSrc(banner: BannerResponse): string {
-  return `${import.meta.env.VITE_APP_IMAGE_BASE}banners/${banner.image}`;
+  return `${window.location.origin}/static/banners/${banner.image}`;
 }
diff --git a/apps/point-of-sale/vite.config.ts b/apps/point-of-sale/vite.config.ts
index a4affebb..8d96d5ee 100644
--- a/apps/point-of-sale/vite.config.ts
+++ b/apps/point-of-sale/vite.config.ts
@@ -2,6 +2,8 @@ import { fileURLToPath, URL } from 'node:url';
 import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
+const PROXY_URL = 'https://sudosos.test.gewis.nl';
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
@@ -27,8 +29,8 @@ export default defineConfig(({ mode }) => {
     server: {
       port: 5174,
       proxy: {
-        '/api': {
-          target: env.VITE_DEV_API_BASE,
+        '/api/v1': {
+          target: PROXY_URL + '/api/v1',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
         }

From d6170966d1f8a7d79d618dfb84fb6279763cc1e1 Mon Sep 17 00:00:00 2001
From: Samuel <samuel@gewis.nl>
Date: Wed, 6 Nov 2024 00:19:40 +0100
Subject: [PATCH 3/6] fix: splash screen svg (#441)

---
 apps/point-of-sale/src/App.vue           |  6 +++---
 apps/point-of-sale/src/assets/splash.svg | 16 ++++++++++++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/apps/point-of-sale/src/App.vue b/apps/point-of-sale/src/App.vue
index 6155fb67..17044b3a 100644
--- a/apps/point-of-sale/src/App.vue
+++ b/apps/point-of-sale/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <RouterView/>
-    <img class="image-underlay" src="@/assets/splash.svg" alt="Overlay Image" />
+  <img class="image-underlay" src="@/assets/splash.svg" alt="Overlay Image" />
 </template>
 
 <style lang="scss">
@@ -15,8 +15,8 @@
 
   position: fixed;
   top: -25%;
-  right: 0px;
+  right: -7%;
   height: 175%;
-  width: 33%;
+  width: 45%;
 }
 </style>
diff --git a/apps/point-of-sale/src/assets/splash.svg b/apps/point-of-sale/src/assets/splash.svg
index b854dda6..0708585a 100644
--- a/apps/point-of-sale/src/assets/splash.svg
+++ b/apps/point-of-sale/src/assets/splash.svg
@@ -1,2 +1,14 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg viewBox="-63.5807 -854.474 563.5807 2337.6194" width="563.581px" height="2337.62px" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path style="fill: rgb(212, 1, 0);" d="M 500 1483.145 C 500 1483.145 -57.571 463.418 -63.534 -49.427 C -69.497 -562.272 497.017 -854.474 497.017 -854.474" id="object-0" transform="matrix(1, 0, 0, 1, 2.2737367544323206e-13, 2.2737367544323206e-13)"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 624.78 2337.62">
+    <defs>
+        <style>
+            .cls-1 {
+            fill: #d40100;
+            stroke-width: 0px;
+            }
+        </style>
+    </defs>
+    <g id="Layer_1-2" data-name="Layer 1">
+        <path id="object-0" class="cls-1" d="m624.78,2337.62c-139.64,0-520.82-669.8-605.58-1531.68C-53.34,68.32,65.19,0,624.78,0"/>
+    </g>
+</svg>
\ No newline at end of file

From 5f3d8b6634aeeb14cdac03c7c47a503efe275585 Mon Sep 17 00:00:00 2001
From: Samuel <samuel@gewis.nl>
Date: Thu, 7 Nov 2024 10:56:19 +0100
Subject: [PATCH 4/6] fix(pos): toast service not included in pos (#442)

very nice!
---
 apps/point-of-sale/src/components/ScannersLoginComponent.vue | 1 -
 apps/point-of-sale/src/main.ts                               | 2 ++
 apps/point-of-sale/vite.config.ts                            | 3 +++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/point-of-sale/src/components/ScannersLoginComponent.vue b/apps/point-of-sale/src/components/ScannersLoginComponent.vue
index 9b675507..06927417 100644
--- a/apps/point-of-sale/src/components/ScannersLoginComponent.vue
+++ b/apps/point-of-sale/src/components/ScannersLoginComponent.vue
@@ -40,7 +40,6 @@ const onInput = (event: KeyboardEvent): void => {
       captures = [];
   } else {
     captures.push(event);
-    console.log(captures);
   }
 };
 
diff --git a/apps/point-of-sale/src/main.ts b/apps/point-of-sale/src/main.ts
index fbfba70e..f026c833 100644
--- a/apps/point-of-sale/src/main.ts
+++ b/apps/point-of-sale/src/main.ts
@@ -19,11 +19,13 @@ import router from './router';
 import App from './App.vue';
 import { useSettingStore } from "@/stores/settings.store";
 import Message from "primevue/message";
+import ToastService from "primevue/toastservice";
 
 const app = createApp(App);
 
 app.use(router);
 app.use(PrimeVue);
+app.use(ToastService);
 
 // eslint-disable-next-line
 app.component('Button', Button);
diff --git a/apps/point-of-sale/vite.config.ts b/apps/point-of-sale/vite.config.ts
index 8d96d5ee..88f8e0df 100644
--- a/apps/point-of-sale/vite.config.ts
+++ b/apps/point-of-sale/vite.config.ts
@@ -17,6 +17,9 @@ export default defineConfig(({ mode }) => {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
       }
     },
+    optimizeDeps: {
+      exclude: ['ToastService'],
+    },
     css: {
       preprocessorOptions: {
         scss: {

From e2b3e769d43a755aaeb7ce5ca017a1eaae09aabf Mon Sep 17 00:00:00 2001
From: Victor Klomp <victor.klomp@gmail.com>
Date: Fri, 8 Nov 2024 11:26:40 +0100
Subject: [PATCH 5/6] fix(devcontainer): Add build-libraries step (#443)

---
 .devcontainer/postCreateCommands.sh | 4 +++-
 README.md                           | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/.devcontainer/postCreateCommands.sh b/.devcontainer/postCreateCommands.sh
index 23ccda5b..aa26e93d 100644
--- a/.devcontainer/postCreateCommands.sh
+++ b/.devcontainer/postCreateCommands.sh
@@ -6,4 +6,6 @@ yarn install
 
 #Copy .env files
 cp apps/dashboard/.env.example apps/dashboard/.env 
-cp apps/point-of-sale/.env.example apps/point-of-sale/.env
\ No newline at end of file
+cp apps/point-of-sale/.env.example apps/point-of-sale/.env
+
+yarn build-libraries
diff --git a/README.md b/README.md
index 22773be8..a22aac4b 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,8 @@ You can quickly start development directly in your browser by using [Codespaces]
 #### Step 1: Installing
 - Use git to [clone](https://github.com/git-guides#how-do-i-use-git) the repository.
 - Run `yarn install`
-- Copy the .env.example file to .env in the `apps/dashboard` and `apps/point-of-sale` directories
+- Copy the `.env.example` file to `.env` file in the `apps/dashboard` and `apps/point-of-sale` directories
+- Run `yarn build-libraries` to have the SudoSOS libraries also ready
 
 #### Step 2: Running the dashboard/point-of-sale
 - Run `yarn dev-dashboard` or `yarn dev-pos` to start the development environment.

From d5fb1db38c1b34a3a1b0ab4400314b0656ce4754 Mon Sep 17 00:00:00 2001
From: Samuel <samuel@gewis.nl>
Date: Fri, 8 Nov 2024 19:41:41 +0100
Subject: [PATCH 6/6] fix(pos): allow for dynamic base paths (#440)

---
 apps/point-of-sale/index.html                 |  5 +++++
 apps/point-of-sale/src/main.ts                |  5 ++---
 apps/point-of-sale/src/router/index.ts        |  7 +++++--
 apps/point-of-sale/src/utils/basePathUtils.ts |  4 ++++
 apps/point-of-sale/vite.config.ts             |  1 +
 lib/nginx/default.conf                        | 16 ++++++++++++++++
 6 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 apps/point-of-sale/src/utils/basePathUtils.ts

diff --git a/apps/point-of-sale/index.html b/apps/point-of-sale/index.html
index 619bc486..f5b29321 100644
--- a/apps/point-of-sale/index.html
+++ b/apps/point-of-sale/index.html
@@ -6,6 +6,11 @@
       <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
       <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
       <link rel="manifest" href="favicon/manifest.json">
+      <script>
+          // @ts-ignore
+          window.__BASE_URL__ = ((path) => path !== '//' ? `/${path}/` : '/')
+          (window.location.pathname.split('/')[1] || '');
+      </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
     <title>SudoSOS Point Of Sale</title>
     <!-- For OpenGraph -->
diff --git a/apps/point-of-sale/src/main.ts b/apps/point-of-sale/src/main.ts
index f026c833..30dc6c9a 100644
--- a/apps/point-of-sale/src/main.ts
+++ b/apps/point-of-sale/src/main.ts
@@ -1,4 +1,3 @@
-// import "bootstrap/dist/css/bootstrap.css";
 import 'primeflex/primeflex.css';
 import 'primeicons/primeicons.css';
 
@@ -15,8 +14,8 @@ import OverlayPanel from "primevue/overlaypanel";
 import Dropdown from "primevue/dropdown";
 import Toast from "primevue/toast";
 
-import router from './router';
-import App from './App.vue';
+import router from '@/router';
+import App from '@/App.vue';
 import { useSettingStore } from "@/stores/settings.store";
 import Message from "primevue/message";
 import ToastService from "primevue/toastservice";
diff --git a/apps/point-of-sale/src/router/index.ts b/apps/point-of-sale/src/router/index.ts
index 9ffb54b2..879646a3 100644
--- a/apps/point-of-sale/src/router/index.ts
+++ b/apps/point-of-sale/src/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import { clearTokenInStorage, useAuthStore } from '@sudosos/sudosos-frontend-common';
 import LoginView from '@/views/LoginView.vue';
 import CashierView from '../views/CashierView.vue';
+import { getBasePath } from '@/utils/basePathUtils';
 
 const authGuard = (to: any, from: any, next: any) => {
   const authStore = useAuthStore();
@@ -16,8 +17,10 @@ const authGuard = (to: any, from: any, next: any) => {
   }
 };
 
+const baseUrl  = getBasePath();
+
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(baseUrl),
   routes: [
     {
       path: '/cashier',
@@ -29,7 +32,7 @@ const router = createRouter({
       path: '/',
       name: 'login',
       component: LoginView
-    }
+    },
   ]
 });
 
diff --git a/apps/point-of-sale/src/utils/basePathUtils.ts b/apps/point-of-sale/src/utils/basePathUtils.ts
new file mode 100644
index 00000000..0845d896
--- /dev/null
+++ b/apps/point-of-sale/src/utils/basePathUtils.ts
@@ -0,0 +1,4 @@
+export function getBasePath(): string {
+  // @ts-ignore
+  return window.__BASE_URL__ || '/';
+}
diff --git a/apps/point-of-sale/vite.config.ts b/apps/point-of-sale/vite.config.ts
index 88f8e0df..b0fe0413 100644
--- a/apps/point-of-sale/vite.config.ts
+++ b/apps/point-of-sale/vite.config.ts
@@ -9,6 +9,7 @@ export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
 
   return {
+    base: "./",
     plugins: [
       vue(),
     ],
diff --git a/lib/nginx/default.conf b/lib/nginx/default.conf
index 39bb645c..82ef3552 100644
--- a/lib/nginx/default.conf
+++ b/lib/nginx/default.conf
@@ -10,6 +10,14 @@ upstream docs {
   server docs:80;
 }
 
+upstream pos {
+  server pos:80;
+}
+
+upstream pos-develop {
+  server pos-develop:80;
+}
+
 server {
   listen       80;
   listen  [::]:80;
@@ -21,6 +29,14 @@ server {
     proxy_pass http://frontend/;
   }
 
+  location /pos/ {
+    proxy_pass http://pos/;
+  }
+
+  location /pos-develop/ {
+    proxy_pass http://pos-develop/;
+  }
+
   location /docs/ {
     proxy_pass http://docs/;
   }