From d6bb32a860c7e2128dfaf17099ac838163f68c8f Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Tue, 25 Jul 2023 20:09:52 +0200
Subject: [PATCH 01/32] Create new profile view

contains one empty card for change pin
---
 src/components/TopNavbar.vue |  1 +
 src/locales/en.json          |  4 ++++
 src/router/index.ts          |  7 +++++++
 src/views/ProfileView.vue    | 22 ++++++++++++++++++++++
 4 files changed, 34 insertions(+)
 create mode 100644 src/views/ProfileView.vue

diff --git a/src/components/TopNavbar.vue b/src/components/TopNavbar.vue
index 2bda1c43..7bdb3051 100644
--- a/src/components/TopNavbar.vue
+++ b/src/components/TopNavbar.vue
@@ -95,6 +95,7 @@ const rightItems = ref([
     items: [
       {
         label: 'Profile',
+        to: 'profile',
       },
       {
         label: 'Sign Out'
diff --git a/src/locales/en.json b/src/locales/en.json
index 7e427203..097cb2ed 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -20,5 +20,9 @@
     "Reset the password for": "Reset the password for {email}",
     "Passwords not equal": "Passwords are not equal",
     "Password not strong": "Password needs to be longer than 8 characters and needs a lower- and uppercase letter, number and a special character"
+  },
+  "profile": {
+    "my profile": "My profile",
+    "change pin code": "Change pin code"
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 8336826d..63dddc37 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ import HomeView from '../views/HomeView.vue';
 import LoginView from "@/views/LoginView.vue";
 import BalanceView from "@/views/BalanceView.vue";
 import {useAuthStore} from "@sudosos/sudosos-frontend-common";
+import ProfileView from "@/views/ProfileView.vue";
 
 const router = createRouter({
   history: createWebHistory(),
@@ -35,6 +36,12 @@ const router = createRouter({
           component: BalanceView,
           name: 'balance',
         }
+        ,
+        {
+          path: '/profile',
+          component: ProfileView,
+          name: 'profile',
+        }
         // Add other routes for authenticated users here
       ],
     },
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
new file mode 100644
index 00000000..19da14d3
--- /dev/null
+++ b/src/views/ProfileView.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="page-container">
+    <div class="page-title">{{ $t('profile.my profile')}}</div>
+    <card-component :header="$t('profile.change pin code')" >
+
+    </card-component>
+  </div>
+</template>
+
+<script>
+import CardComponent from "@/components/CardComponent.vue";
+
+export default {
+  name: "ProfileView",
+  components: {CardComponent}
+}
+</script>
+
+<style scoped>
+@import "../styles/BasePage.css";
+
+</style>
\ No newline at end of file

From 5c2ece76365785662995a12e2fd329a8ed13f88d Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Wed, 26 Jul 2023 18:59:13 +0200
Subject: [PATCH 02/32] added input fields and validation for pin change

---
 src/components/PinComponent.vue | 14 ++++++++
 src/locales/en.json             |  4 ++-
 src/views/BalanceView.vue       |  2 +-
 src/views/ProfileView.vue       | 59 ++++++++++++++++++++++++++++++---
 4 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 src/components/PinComponent.vue

diff --git a/src/components/PinComponent.vue b/src/components/PinComponent.vue
new file mode 100644
index 00000000..1943e640
--- /dev/null
+++ b/src/components/PinComponent.vue
@@ -0,0 +1,14 @@
+<template>
+<InputText type="password" autocomplete="off" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
+</template>
+
+<script setup lang="ts">
+import InputText from "primevue/inputtext";
+
+defineProps(['modelValue'])
+defineEmits(['update:modelValue'])
+
+</script>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 097cb2ed..2807baa5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -23,6 +23,8 @@
   },
   "profile": {
     "my profile": "My profile",
-    "change pin code": "Change pin code"
+    "change pin code": "Change pin code",
+    "new pin code": "New pin code",
+    "confirm new pin code": "Confirm new pin code"
   }
 }
diff --git a/src/views/BalanceView.vue b/src/views/BalanceView.vue
index bd265162..05b4ed42 100644
--- a/src/views/BalanceView.vue
+++ b/src/views/BalanceView.vue
@@ -3,7 +3,7 @@
     <div class="page-title">Balance</div>
     <TopupModal v-model:visible="visible" :amount="amountValue"/>
     <div class="content-wrapper">
-      <CardComponent action="start payment" header="increase saldo" class="increase-saldo-card" :func="showDialog">
+        <CardComponent action="start payment" header="increase saldo" class="increase-saldo-card" :func="showDialog">
         <p id="cash-notice">It is no longer possible to increase your balance in cash during the 'borrel'</p>
         <div id="balance-increase-form">
           <p id="balance-increase-title">Balance increase amount:</p>
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 19da14d3..9ae694b9 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,22 +1,71 @@
 <template>
   <div class="page-container">
     <div class="page-title">{{ $t('profile.my profile')}}</div>
-    <card-component :header="$t('profile.change pin code')" >
 
+    <card-component :header="$t('profile.change pin code')" :action="$t('profile.change pin code')" :func="changePinCode" class="change-pin-code" >
+      <div id="update-pin-form">
+        <div>
+          <p>{{ $t('profile.new pin code')}}</p>
+          <PinComponent v-model="inputPin" />
+          <p class="warning">{{inputPinWarning}}</p>
+        </div>
+        <div>
+          <p>{{ $t('profile.confirm new pin code')}}</p>
+          <PinComponent v-model="confirmPin" />
+          <p class="warning">{{confirmPinWarning}}</p>
+        </div>
+      </div>
     </card-component>
+
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
+import {watch, ref} from "vue";
+import PinComponent from "@/components/PinComponent.vue";
+
+const inputPin = ref();
+const inputPinWarning = ref("");
+
+const confirmPin = ref();
+const confirmPinWarning = ref("");
+
+//show warning message if pin is filled in and not 4 digits
+watch(inputPin, (pin) => {
+  if (pin.length == 0) {
+    inputPinWarning.value = "";
+  } else if (! RegExp('\\d{4}').test(pin)) {
+    inputPinWarning.value = "your pin needs to have 4 digits";
+  } else {
+    inputPinWarning.value = "";
+  }
+})
+
+//show warning message if conformation pin does not fit pin
+watch(confirmPin, (pin) => {
+  if (pin.length == 0){
+    confirmPinWarning.value = ""
+  } else if (pin != inputPin.value) {
+    confirmPinWarning.value = "both pins need to be the same";
+  } else {
+    confirmPinWarning.value = "";
+  }
+})
 
-export default {
-  name: "ProfileView",
-  components: {CardComponent}
+
+const changePinCode = () => {
+  //TODO update the pin
 }
+
 </script>
 
 <style scoped>
 @import "../styles/BasePage.css";
 
+.warning {
+  color: red;
+  font-size: 75%;
+}
+
 </style>
\ No newline at end of file

From 41a648eb30b69b4ec05deff96eef570a23fe10f9 Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Thu, 27 Jul 2023 15:37:09 +0200
Subject: [PATCH 03/32] make the update pin work

---
 src/locales/en.json       |  4 +++-
 src/main.ts               |  4 ++++
 src/views/ProfileView.vue | 21 ++++++++++++++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 2807baa5..27473449 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -25,6 +25,8 @@
     "my profile": "My profile",
     "change pin code": "Change pin code",
     "new pin code": "New pin code",
-    "confirm new pin code": "Confirm new pin code"
+    "confirm new pin code": "Confirm new pin code",
+    "pin update successful": "pin updated successful",
+    "success": "success"
   }
 }
diff --git a/src/main.ts b/src/main.ts
index 357e06a6..d60cf39c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,8 +17,11 @@ import InputNumber from "primevue/inputnumber";
 import Dialog from "primevue/dialog";
 import 'primeicons/primeicons.css';
 import languages from "@/locales";
+import Toast from "primevue/toast";
+import ToastService from 'primevue/toastservice'
 
 const app = createApp(App)
+app.use(ToastService)
 
 const messages = Object.assign(languages);
 const i18n = createI18n({
@@ -38,5 +41,6 @@ app.component('Panel', Panel);
 app.component('DataTable', DataTable);
 app.component('InputNumber', InputNumber);
 app.component('Dialog', Dialog);
+app.component('Toast', Toast);
 
 app.mount('#app')
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 9ae694b9..9649a3c4 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="page-container">
+    <Toast />
+
     <div class="page-title">{{ $t('profile.my profile')}}</div>
 
     <card-component :header="$t('profile.change pin code')" :action="$t('profile.change pin code')" :func="changePinCode" class="change-pin-code" >
@@ -24,6 +26,10 @@
 import CardComponent from "@/components/CardComponent.vue";
 import {watch, ref} from "vue";
 import PinComponent from "@/components/PinComponent.vue";
+import {useAuthStore} from "@sudosos/sudosos-frontend-common";
+import apiService from "@/services/ApiService";
+import {useToast} from "primevue/usetoast";
+
 
 const inputPin = ref();
 const inputPinWarning = ref("");
@@ -54,8 +60,21 @@ watch(confirmPin, (pin) => {
 })
 
 
+const authStore = useAuthStore();
+const toast = useToast();
 const changePinCode = () => {
-  //TODO update the pin
+  if (RegExp('\\d{4}').test(inputPin.value) && inputPin.value == confirmPin.value) {
+    authStore.updateUserPin(inputPin.value, apiService).then(() => {
+      //   Succes!
+      inputPin.value="";
+      confirmPin.value="";
+      toast.add({severity: "success", summary: "success", detail: 'pin updated successful'  })
+      //TODO show succes message
+    }).catch((err) => {
+      // Error
+      console.error(err);
+    })
+  }
 }
 
 </script>

From 22f850dd06d8ff0178b542d565cd89e047145c2c Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Fri, 28 Jul 2023 22:46:20 +0200
Subject: [PATCH 04/32] implement vee-validate to the input

---
 package.json              |  1 +
 src/views/ProfileView.vue | 46 +++++++++++++++++----------------------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index fdbced42..697b534a 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "sass": "^1.63.6",
     "stripe": "^12.14.0",
     "uuid": "^9.0.0",
+    "vee-validate": "^4.10.8",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.2"
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 9649a3c4..7f1a4a61 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -8,17 +8,18 @@
       <div id="update-pin-form">
         <div>
           <p>{{ $t('profile.new pin code')}}</p>
-          <PinComponent v-model="inputPin" />
-          <p class="warning">{{inputPinWarning}}</p>
+          <PinComponent v-model="inputPin"/>
+          <small class="warning">{{inputPinError || '&nbsp;'}}</small>
         </div>
         <div>
           <p>{{ $t('profile.confirm new pin code')}}</p>
           <PinComponent v-model="confirmPin" />
-          <p class="warning">{{confirmPinWarning}}</p>
+          <small class="warning">{{confirmPinError || '&nbsp;'}}</small>
         </div>
       </div>
     </card-component>
 
+
   </div>
 </template>
 
@@ -29,51 +30,44 @@ import PinComponent from "@/components/PinComponent.vue";
 import {useAuthStore} from "@sudosos/sudosos-frontend-common";
 import apiService from "@/services/ApiService";
 import {useToast} from "primevue/usetoast";
+import { useField } from 'vee-validate';
 
+const { value: inputPin, errorMessage: inputPinError } = useField('inputPin', validatePin);
+const { value: confirmPin, errorMessage: confirmPinError} = useField('confirmPin', validateConfirmPin);
 
-const inputPin = ref();
-const inputPinWarning = ref("");
-
-const confirmPin = ref();
-const confirmPinWarning = ref("");
 
 //show warning message if pin is filled in and not 4 digits
-watch(inputPin, (pin) => {
-  if (pin.length == 0) {
-    inputPinWarning.value = "";
-  } else if (! RegExp('\\d{4}').test(pin)) {
-    inputPinWarning.value = "your pin needs to have 4 digits";
-  } else {
-    inputPinWarning.value = "";
+function validatePin(checkInputPin: string){
+  if (checkInputPin.length != 4 && !RegExp('\\d{4}').test(checkInputPin)) {
+    return "your pin needs to have 4 digits";
   }
-})
+  return true;
+}
 
 //show warning message if conformation pin does not fit pin
-watch(confirmPin, (pin) => {
-  if (pin.length == 0){
-    confirmPinWarning.value = ""
-  } else if (pin != inputPin.value) {
-    confirmPinWarning.value = "both pins need to be the same";
-  } else {
-    confirmPinWarning.value = "";
+function validateConfirmPin(checkConfirmPin: string){
+  if (checkConfirmPin != inputPin.value) {
+    return "both pins need to be the same";
   }
-})
+  return true;
+}
 
 
 const authStore = useAuthStore();
 const toast = useToast();
 const changePinCode = () => {
-  if (RegExp('\\d{4}').test(inputPin.value) && inputPin.value == confirmPin.value) {
+  if (inputPin.value.length == 4 && RegExp('\\d{4}').test(inputPin.value) && inputPin.value == confirmPin.value) {
     authStore.updateUserPin(inputPin.value, apiService).then(() => {
       //   Succes!
       inputPin.value="";
       confirmPin.value="";
       toast.add({severity: "success", summary: "success", detail: 'pin updated successful'  })
-      //TODO show succes message
     }).catch((err) => {
       // Error
       console.error(err);
     })
+  } else {
+    toast.add({severity: "error", summary: "failed", detail: 'fill in correct pin codes', life: 3000})
   }
 }
 

From c53d150ebc80bafa9e9392e293a02fc3bdca732c Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Sat, 29 Jul 2023 15:34:26 +0200
Subject: [PATCH 05/32] made the change password card

---
 src/main.ts               |  2 ++
 src/views/ProfileView.vue | 54 +++++++++++++++++++++++++++++++++++----
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index d60cf39c..34f92b8d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,6 +19,7 @@ import 'primeicons/primeicons.css';
 import languages from "@/locales";
 import Toast from "primevue/toast";
 import ToastService from 'primevue/toastservice'
+import Password from "primevue/password";
 
 const app = createApp(App)
 app.use(ToastService)
@@ -42,5 +43,6 @@ app.component('DataTable', DataTable);
 app.component('InputNumber', InputNumber);
 app.component('Dialog', Dialog);
 app.component('Toast', Toast);
+app.component('Password', Password);
 
 app.mount('#app')
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 7f1a4a61..3e88d44e 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -19,6 +19,21 @@
       </div>
     </card-component>
 
+    <card-component :header="'Change password'" :action="'Update password'" :func="changePassword">
+      <div>
+        <div>
+          <p>Password</p>
+          <Password v-model="inputPassword"/>
+          <small class="warning">{{inputPasswordError || '&nbsp;'}}</small>
+        </div>
+        <div>
+          <p>Confirm password</p>
+          <InputText type="password" v-model="confirmPassword"/>
+          <small class="warning">{{confirmPasswordError || '&nbsp;'}}</small>
+        </div>
+      </div>
+    </card-component>
+
 
   </div>
 </template>
@@ -32,10 +47,13 @@ import apiService from "@/services/ApiService";
 import {useToast} from "primevue/usetoast";
 import { useField } from 'vee-validate';
 
+const authStore = useAuthStore();
+const toast = useToast();
+
+
 const { value: inputPin, errorMessage: inputPinError } = useField('inputPin', validatePin);
 const { value: confirmPin, errorMessage: confirmPinError} = useField('confirmPin', validateConfirmPin);
 
-
 //show warning message if pin is filled in and not 4 digits
 function validatePin(checkInputPin: string){
   if (checkInputPin.length != 4 && !RegExp('\\d{4}').test(checkInputPin)) {
@@ -53,10 +71,8 @@ function validateConfirmPin(checkConfirmPin: string){
 }
 
 
-const authStore = useAuthStore();
-const toast = useToast();
-const changePinCode = () => {
-  if (inputPin.value.length == 4 && RegExp('\\d{4}').test(inputPin.value) && inputPin.value == confirmPin.value) {
+function changePinCode() {
+  if (validatePin(inputPin.value) == true && validateConfirmPin(confirmPin.value) == true) {
     authStore.updateUserPin(inputPin.value, apiService).then(() => {
       //   Succes!
       inputPin.value="";
@@ -71,6 +87,34 @@ const changePinCode = () => {
   }
 }
 
+const { value: inputPassword, errorMessage: inputPasswordError} = useField('inputPassword', validatePassword);
+const { value: confirmPassword, errorMessage: confirmPasswordError} = useField('confirmPassword', validateConfirmPassword);
+
+function validatePassword(checkPassword: string) {
+  if (checkPassword.length <12) {
+    //TODO set password requirements
+    return "length should be at least 12"
+  }
+  return true;
+}
+
+function validateConfirmPassword(checkConfirmPassword: string) {
+  if (checkConfirmPassword != inputPassword.value) {
+    return "Both passwords should match"
+  }
+  return true;
+}
+
+function changePassword() {
+  if (validatePassword(inputPassword.value) == true && validateConfirmPassword(confirmPassword.value) == true) {
+    //authStore.updateUserPassword()
+  } else {
+    toast.add({severity: "error", summary: "failed", detail: 'fill in correct passwords', life: 3000})
+  }
+}
+
+
+
 </script>
 
 <style scoped>

From 1cd87de659faa0ed8e251789abad73b8bc27bfa3 Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Wed, 2 Aug 2023 23:14:08 +0200
Subject: [PATCH 06/32] split the components into own files

---
 src/components/ChangeApiKeyComponent.vue   |  24 +++++
 src/components/ChangePasswordComponent.vue |  65 ++++++++++++
 src/components/ChangePinComponent.vue      |  70 +++++++++++++
 src/views/ProfileView.vue                  | 112 ++-------------------
 4 files changed, 168 insertions(+), 103 deletions(-)
 create mode 100644 src/components/ChangeApiKeyComponent.vue
 create mode 100644 src/components/ChangePasswordComponent.vue
 create mode 100644 src/components/ChangePinComponent.vue

diff --git a/src/components/ChangeApiKeyComponent.vue b/src/components/ChangeApiKeyComponent.vue
new file mode 100644
index 00000000..081d1581
--- /dev/null
+++ b/src/components/ChangeApiKeyComponent.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import CardComponent from "@/components/CardComponent.vue";
+import {ref} from "vue";
+
+const apiKeyMessage = ref();
+
+function updateApiKey() {
+
+
+}
+</script>
+
+<template>
+  <card-component header="'get api key'" :action="'Get new api key'" :func="updateApiKey">
+    <div>
+      <p>NOTE: If you request a new API key any old ones will be replaced</p>
+      <p>{{apiKeyMessage || '&nbsp;'}}</p>
+    </div>
+  </card-component>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/ChangePasswordComponent.vue b/src/components/ChangePasswordComponent.vue
new file mode 100644
index 00000000..74175529
--- /dev/null
+++ b/src/components/ChangePasswordComponent.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import CardComponent from "@/components/CardComponent.vue";
+import {useField} from "vee-validate";
+import apiService from "@/services/ApiService";
+import {useAuthStore} from "@sudosos/sudosos-frontend-common";
+import {useToast} from "primevue/usetoast";
+
+const authStore = useAuthStore();
+const toast = useToast();
+
+//TODO make password greyed when using m account
+const { value: inputPassword, errorMessage: inputPasswordError} = useField('inputPassword', validatePassword);
+const { value: confirmPassword, errorMessage: confirmPasswordError} = useField('confirmPassword', validateConfirmPassword);
+
+function validatePassword(checkPassword: string) {
+  if (checkPassword.length <12) {
+    //TODO set password requirements
+    return "length should be at least 12"
+  }
+  return true;
+}
+
+function validateConfirmPassword(checkConfirmPassword: string) {
+  if (checkConfirmPassword != inputPassword.value) {
+    return "Both passwords should match"
+  }
+  return true;
+}
+
+function changePassword() {
+  if (validatePassword(inputPassword.value) == true && validateConfirmPassword(confirmPassword.value) == true) {
+    authStore.updateUserLocalPassword(inputPassword.value, apiService).then(() => {
+      inputPassword.value = "";
+      confirmPassword.value = "";
+      toast.add({severity: "success", summary: "succes", detail: ""})
+    })
+    //TODO call the password update
+  } else {
+    toast.add({severity: "error", summary: "failed", detail: 'fill in correct passwords', life: 3000})
+  }
+}
+
+</script>
+
+<template>
+  <card-component :header="'Change password'" :action="'Update password'" :func="changePassword">
+    <div>
+      <div>
+        <p>Password</p>
+        <Password v-model="inputPassword"/>
+        <small class="warning">{{inputPasswordError || '&nbsp;'}}</small>
+      </div>
+      <div>
+        <p>Confirm password</p>
+        <InputText type="password" v-model="confirmPassword"/>
+        <small class="warning">{{confirmPasswordError || '&nbsp;'}}</small>
+      </div>
+    </div>
+  </card-component>
+  <Toast />
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/ChangePinComponent.vue b/src/components/ChangePinComponent.vue
new file mode 100644
index 00000000..5ec9be11
--- /dev/null
+++ b/src/components/ChangePinComponent.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import CardComponent from "@/components/CardComponent.vue";
+import PinComponent from "@/components/PinComponent.vue";
+import {useField} from "vee-validate";
+import apiService from "@/services/ApiService";
+import {useAuthStore} from "@sudosos/sudosos-frontend-common";
+import {useToast} from "primevue/usetoast";
+
+const authStore = useAuthStore();
+const toast = useToast();
+
+const { value: inputPin, errorMessage: inputPinError } = useField('inputPin', validatePin);
+const { value: confirmPin, errorMessage: confirmPinError} = useField('confirmPin', validateConfirmPin);
+
+//show warning message if pin is filled in and not 4 digits
+function validatePin(checkInputPin: string){
+  if (checkInputPin.length != 4 && !RegExp('\\d{4}').test(checkInputPin)) {
+    return "your pin needs to have 4 digits";
+  }
+  return true;
+}
+
+//show warning message if conformation pin does not fit pin
+function validateConfirmPin(checkConfirmPin: string){
+  if (checkConfirmPin != inputPin.value) {
+    return "both pins need to be the same";
+  }
+  return true;
+}
+
+
+function changePinCode() {
+  if (validatePin(inputPin.value) == true && validateConfirmPin(confirmPin.value) == true) {
+    authStore.updateUserPin(inputPin.value, apiService).then(() => {
+      //   Succes!
+      inputPin.value="";
+      confirmPin.value="";
+      toast.add({severity: "success", summary: "success", detail: 'pin updated successful'  })
+    }).catch((err) => {
+      // Error
+      console.error(err);
+    })
+  } else {
+    toast.add({severity: "error", summary: "failed", detail: 'fill in correct pin codes', life: 3000})
+  }
+}
+
+</script>
+
+<template>
+  <card-component :header="$t('profile.change pin code')" :action="$t('profile.change pin code')" :func="changePinCode" class="change-pin-code" >
+    <div id="update-pin-form">
+      <div>
+        <p>{{ $t('profile.new pin code')}}</p>
+        <PinComponent v-model="inputPin"/>
+        <small class="warning">{{inputPinError || '&nbsp;'}}</small>
+      </div>
+      <div>
+        <p>{{ $t('profile.confirm new pin code')}}</p>
+        <PinComponent v-model="confirmPin" />
+        <small class="warning">{{confirmPinError || '&nbsp;'}}</small>
+      </div>
+    </div>
+  </card-component>
+  <Toast />
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 3e88d44e..6de750ea 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,118 +1,24 @@
 <template>
   <div class="page-container">
-    <Toast />
 
     <div class="page-title">{{ $t('profile.my profile')}}</div>
 
-    <card-component :header="$t('profile.change pin code')" :action="$t('profile.change pin code')" :func="changePinCode" class="change-pin-code" >
-      <div id="update-pin-form">
-        <div>
-          <p>{{ $t('profile.new pin code')}}</p>
-          <PinComponent v-model="inputPin"/>
-          <small class="warning">{{inputPinError || '&nbsp;'}}</small>
-        </div>
-        <div>
-          <p>{{ $t('profile.confirm new pin code')}}</p>
-          <PinComponent v-model="confirmPin" />
-          <small class="warning">{{confirmPinError || '&nbsp;'}}</small>
-        </div>
-      </div>
-    </card-component>
+    <ChangePinComponent />
 
-    <card-component :header="'Change password'" :action="'Update password'" :func="changePassword">
-      <div>
-        <div>
-          <p>Password</p>
-          <Password v-model="inputPassword"/>
-          <small class="warning">{{inputPasswordError || '&nbsp;'}}</small>
-        </div>
-        <div>
-          <p>Confirm password</p>
-          <InputText type="password" v-model="confirmPassword"/>
-          <small class="warning">{{confirmPasswordError || '&nbsp;'}}</small>
-        </div>
-      </div>
-    </card-component>
+    <ChangePasswordComponent/>
 
+    <ChangeApiKeyComponent />
 
-  </div>
-</template>
-
-<script setup lang="ts">
-import CardComponent from "@/components/CardComponent.vue";
-import {watch, ref} from "vue";
-import PinComponent from "@/components/PinComponent.vue";
-import {useAuthStore} from "@sudosos/sudosos-frontend-common";
-import apiService from "@/services/ApiService";
-import {useToast} from "primevue/usetoast";
-import { useField } from 'vee-validate';
-
-const authStore = useAuthStore();
-const toast = useToast();
 
 
-const { value: inputPin, errorMessage: inputPinError } = useField('inputPin', validatePin);
-const { value: confirmPin, errorMessage: confirmPinError} = useField('confirmPin', validateConfirmPin);
 
-//show warning message if pin is filled in and not 4 digits
-function validatePin(checkInputPin: string){
-  if (checkInputPin.length != 4 && !RegExp('\\d{4}').test(checkInputPin)) {
-    return "your pin needs to have 4 digits";
-  }
-  return true;
-}
-
-//show warning message if conformation pin does not fit pin
-function validateConfirmPin(checkConfirmPin: string){
-  if (checkConfirmPin != inputPin.value) {
-    return "both pins need to be the same";
-  }
-  return true;
-}
-
-
-function changePinCode() {
-  if (validatePin(inputPin.value) == true && validateConfirmPin(confirmPin.value) == true) {
-    authStore.updateUserPin(inputPin.value, apiService).then(() => {
-      //   Succes!
-      inputPin.value="";
-      confirmPin.value="";
-      toast.add({severity: "success", summary: "success", detail: 'pin updated successful'  })
-    }).catch((err) => {
-      // Error
-      console.error(err);
-    })
-  } else {
-    toast.add({severity: "error", summary: "failed", detail: 'fill in correct pin codes', life: 3000})
-  }
-}
-
-const { value: inputPassword, errorMessage: inputPasswordError} = useField('inputPassword', validatePassword);
-const { value: confirmPassword, errorMessage: confirmPasswordError} = useField('confirmPassword', validateConfirmPassword);
-
-function validatePassword(checkPassword: string) {
-  if (checkPassword.length <12) {
-    //TODO set password requirements
-    return "length should be at least 12"
-  }
-  return true;
-}
-
-function validateConfirmPassword(checkConfirmPassword: string) {
-  if (checkConfirmPassword != inputPassword.value) {
-    return "Both passwords should match"
-  }
-  return true;
-}
-
-function changePassword() {
-  if (validatePassword(inputPassword.value) == true && validateConfirmPassword(confirmPassword.value) == true) {
-    //authStore.updateUserPassword()
-  } else {
-    toast.add({severity: "error", summary: "failed", detail: 'fill in correct passwords', life: 3000})
-  }
-}
+  </div>
+</template>
 
+<script setup lang="ts">
+import ChangePasswordComponent from "@/components/ChangePasswordComponent.vue";
+import ChangePinComponent from "@/components/ChangePinComponent.vue";
+import ChangeApiKeyComponent from "@/components/ChangeApiKeyComponent.vue";
 
 
 </script>

From 9681b1903b1a07ceb887209efabe68adffd725d3 Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Thu, 3 Aug 2023 00:21:53 +0200
Subject: [PATCH 07/32] put em in a grid

---
 src/views/ProfileView.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 6de750ea..a6ee8e17 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -3,12 +3,14 @@
 
     <div class="page-title">{{ $t('profile.my profile')}}</div>
 
-    <ChangePinComponent />
+    <div class="container">
+      <ChangePinComponent />
 
-    <ChangePasswordComponent/>
+      <ChangePasswordComponent/>
 
-    <ChangeApiKeyComponent />
+      <ChangeApiKeyComponent />
 
+    </div>
 
 
 
@@ -19,6 +21,7 @@
 import ChangePasswordComponent from "@/components/ChangePasswordComponent.vue";
 import ChangePinComponent from "@/components/ChangePinComponent.vue";
 import ChangeApiKeyComponent from "@/components/ChangeApiKeyComponent.vue";
+import CardComponent from "@/components/CardComponent.vue";
 
 
 </script>
@@ -31,4 +34,14 @@ import ChangeApiKeyComponent from "@/components/ChangeApiKeyComponent.vue";
   font-size: 75%;
 }
 
+
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 10px; /* Reduce the gap value to 10px */
+  padding-bottom: 20px; /* Add bottom padding to prevent the last row from being cut off */
+  padding-right: 50px;
+}
+
 </style>
\ No newline at end of file

From f016267e23d70dad26c9cba659281dc312f19bac Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Tue, 17 Oct 2023 20:04:26 +0200
Subject: [PATCH 08/32] fix changes from pulling main

---
 src/components/ChangePinComponent.vue | 17 +++++++++--------
 src/components/TopNavbar.vue          |  1 +
 src/main.ts                           |  8 ++++++--
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/ChangePinComponent.vue b/src/components/ChangePinComponent.vue
index 5ec9be11..90967aa0 100644
--- a/src/components/ChangePinComponent.vue
+++ b/src/components/ChangePinComponent.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
 import PinComponent from "@/components/PinComponent.vue";
-import {useField} from "vee-validate";
+import { useField } from "vee-validate";
 import apiService from "@/services/ApiService";
-import {useAuthStore} from "@sudosos/sudosos-frontend-common";
-import {useToast} from "primevue/usetoast";
+import { useAuthStore } from "@sudosos/sudosos-frontend-common";
+import { useToast } from "primevue/usetoast";
 
 const authStore = useAuthStore();
 const toast = useToast();
 
 const { value: inputPin, errorMessage: inputPinError } = useField('inputPin', validatePin);
-const { value: confirmPin, errorMessage: confirmPinError} = useField('confirmPin', validateConfirmPin);
+const { value: confirmPin, errorMessage: confirmPinError } = useField('confirmPin', validateConfirmPin);
 
 //show warning message if pin is filled in and not 4 digits
 function validatePin(checkInputPin: string){
@@ -35,13 +35,13 @@ function changePinCode() {
       //   Succes!
       inputPin.value="";
       confirmPin.value="";
-      toast.add({severity: "success", summary: "success", detail: 'pin updated successful'  })
+      toast.add({ severity: "success", summary: "success", detail: 'pin updated successful'  });
     }).catch((err) => {
       // Error
       console.error(err);
-    })
+    });
   } else {
-    toast.add({severity: "error", summary: "failed", detail: 'fill in correct pin codes', life: 3000})
+    toast.add({ severity: "error", summary: "failed", detail: 'fill in correct pin codes', life: 3000 });
   }
 }
 
@@ -49,6 +49,8 @@ function changePinCode() {
 
 <template>
   <card-component :header="$t('profile.change pin code')" :action="$t('profile.change pin code')" :func="changePinCode" class="change-pin-code" >
+    <Toast />
+
     <div id="update-pin-form">
       <div>
         <p>{{ $t('profile.new pin code')}}</p>
@@ -62,7 +64,6 @@ function changePinCode() {
       </div>
     </div>
   </card-component>
-  <Toast />
 </template>
 
 <style scoped>
diff --git a/src/components/TopNavbar.vue b/src/components/TopNavbar.vue
index 13a53683..dc7ad4c3 100644
--- a/src/components/TopNavbar.vue
+++ b/src/components/TopNavbar.vue
@@ -124,6 +124,7 @@ const rightItems = ref([
     items: [
       {
         label: t('app.Profile'),
+        to: 'profile',
       },
       {
         label: t('app.Sign out'),
diff --git a/src/main.ts b/src/main.ts
index 3010c6f7..2cd51264 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -26,6 +26,9 @@ import FileUpload from "primevue/fileupload";
 import { populateStoresFromToken } from "@sudosos/sudosos-frontend-common";
 import en from "../src/locales/en.json";
 import nl from "../src/locales/nl.json";
+import Toast from "primevue/toast";
+import ToastService from 'primevue/toastservice';
+import Password from "primevue/password";
 
 const app = createApp(App);
 
@@ -42,6 +45,7 @@ const i18n = createI18n({
 app.use(createPinia());
 app.use(router);
 app.use(PrimeVue);
+app.use(ToastService);
 app.use(i18n);
 
 app.component('Button', Button);
@@ -58,7 +62,7 @@ app.component('TabView', TabView);
 app.component('ScrollPanel', ScrollPanel);
 app.component('FileUpload', FileUpload);
 app.component('InputNumber', InputNumber);
-populateStoresFromToken();
-app.mount('#app');
 app.component('Toast', Toast);
 app.component('Password', Password);
+populateStoresFromToken();
+app.mount('#app');

From 20ff5c34a2dd35644ec7af1a7c6acd7c28dcea92 Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Tue, 24 Oct 2023 19:34:35 +0200
Subject: [PATCH 09/32] make submit use button AND make password inactive for
 non local users

---
 src/components/ChangeApiKeyComponent.vue   |  7 ++--
 src/components/ChangePasswordComponent.vue | 38 ++++++++++++++--------
 src/components/ChangePinComponent.vue      | 15 +++++++--
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/components/ChangeApiKeyComponent.vue b/src/components/ChangeApiKeyComponent.vue
index 081d1581..6b1d33c2 100644
--- a/src/components/ChangeApiKeyComponent.vue
+++ b/src/components/ChangeApiKeyComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
-import {ref} from "vue";
+import { ref } from "vue";
 
 const apiKeyMessage = ref();
 
@@ -11,11 +11,14 @@ function updateApiKey() {
 </script>
 
 <template>
-  <card-component header="'get api key'" :action="'Get new api key'" :func="updateApiKey">
+  <card-component header="'get api key'">
     <div>
       <p>NOTE: If you request a new API key any old ones will be replaced</p>
       <p>{{apiKeyMessage || '&nbsp;'}}</p>
     </div>
+    <div>
+      <Button severity="danger" label="Get new API key" @click="updateApiKey" />
+    </div>
   </card-component>
 </template>
 
diff --git a/src/components/ChangePasswordComponent.vue b/src/components/ChangePasswordComponent.vue
index 74175529..c990e268 100644
--- a/src/components/ChangePasswordComponent.vue
+++ b/src/components/ChangePasswordComponent.vue
@@ -1,28 +1,36 @@
 <script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
-import {useField} from "vee-validate";
+import { useField } from "vee-validate";
 import apiService from "@/services/ApiService";
-import {useAuthStore} from "@sudosos/sudosos-frontend-common";
-import {useToast} from "primevue/usetoast";
+import { useAuthStore, useUserStore } from "@sudosos/sudosos-frontend-common";
+import { useToast } from "primevue/usetoast";
 
 const authStore = useAuthStore();
 const toast = useToast();
+const userStore = useUserStore();
+
+let isLocal = false;
+if(userStore.getCurrentUser.user) {
+  isLocal = (userStore.getCurrentUser.user.type == "LOCAL_USER");
+}
+
 
 //TODO make password greyed when using m account
-const { value: inputPassword, errorMessage: inputPasswordError} = useField('inputPassword', validatePassword);
-const { value: confirmPassword, errorMessage: confirmPasswordError} = useField('confirmPassword', validateConfirmPassword);
+const { value: inputPassword, errorMessage: inputPasswordError } = useField('inputPassword', validatePassword);
+const { value: confirmPassword, errorMessage: confirmPasswordError } = useField('confirmPassword', validateConfirmPassword);
+
 
 function validatePassword(checkPassword: string) {
   if (checkPassword.length <12) {
     //TODO set password requirements
-    return "length should be at least 12"
+    return "length should be at least 12";
   }
   return true;
 }
 
 function validateConfirmPassword(checkConfirmPassword: string) {
   if (checkConfirmPassword != inputPassword.value) {
-    return "Both passwords should match"
+    return "Both passwords should match";
   }
   return true;
 }
@@ -32,29 +40,33 @@ function changePassword() {
     authStore.updateUserLocalPassword(inputPassword.value, apiService).then(() => {
       inputPassword.value = "";
       confirmPassword.value = "";
-      toast.add({severity: "success", summary: "succes", detail: ""})
-    })
+      toast.add({ severity: "success", summary: "succes", detail: "" });
+    });
     //TODO call the password update
   } else {
-    toast.add({severity: "error", summary: "failed", detail: 'fill in correct passwords', life: 3000})
+    toast.add({ severity: "error", summary: "failed", detail: 'fill in correct passwords', life: 3000 });
   }
 }
 
 </script>
 
 <template>
-  <card-component :header="'Change password'" :action="'Update password'" :func="changePassword">
+  <card-component :header="'Change password'">
     <div>
+      <small v-if="!isLocal">!Only local users can change their password!</small>
       <div>
         <p>Password</p>
-        <Password v-model="inputPassword"/>
+        <Password :disabled="!isLocal"  v-model="inputPassword"/>
         <small class="warning">{{inputPasswordError || '&nbsp;'}}</small>
       </div>
       <div>
         <p>Confirm password</p>
-        <InputText type="password" v-model="confirmPassword"/>
+        <InputText :disabled="!isLocal" type="password" v-model="confirmPassword"/>
         <small class="warning">{{confirmPasswordError || '&nbsp;'}}</small>
       </div>
+      <div>
+        <Button severity="danger" :disabled="!isLocal" label="Update Password" @click="changePassword"/>
+      </div>
     </div>
   </card-component>
   <Toast />
diff --git a/src/components/ChangePinComponent.vue b/src/components/ChangePinComponent.vue
index 90967aa0..dda42199 100644
--- a/src/components/ChangePinComponent.vue
+++ b/src/components/ChangePinComponent.vue
@@ -5,20 +5,26 @@ import { useField } from "vee-validate";
 import apiService from "@/services/ApiService";
 import { useAuthStore } from "@sudosos/sudosos-frontend-common";
 import { useToast } from "primevue/usetoast";
+import { useUserStore } from '@sudosos/sudosos-frontend-common';
+
+import type { UserResponse } from "@sudosos/sudosos-client";
 
 const authStore = useAuthStore();
+const userStore = useUserStore();
 const toast = useToast();
 
 const { value: inputPin, errorMessage: inputPinError } = useField('inputPin', validatePin);
 const { value: confirmPin, errorMessage: confirmPinError } = useField('confirmPin', validateConfirmPin);
 
+
+
 //show warning message if pin is filled in and not 4 digits
 function validatePin(checkInputPin: string){
   if (checkInputPin.length != 4 && !RegExp('\\d{4}').test(checkInputPin)) {
     return "your pin needs to have 4 digits";
   }
   return true;
-}
+};
 
 //show warning message if conformation pin does not fit pin
 function validateConfirmPin(checkConfirmPin: string){
@@ -48,13 +54,13 @@ function changePinCode() {
 </script>
 
 <template>
-  <card-component :header="$t('profile.change pin code')" :action="$t('profile.change pin code')" :func="changePinCode" class="change-pin-code" >
+  <card-component :header="$t('profile.change pin code')">
     <Toast />
 
     <div id="update-pin-form">
       <div>
         <p>{{ $t('profile.new pin code')}}</p>
-        <PinComponent v-model="inputPin"/>
+        <PinComponent v-model="inputPin" />
         <small class="warning">{{inputPinError || '&nbsp;'}}</small>
       </div>
       <div>
@@ -62,6 +68,9 @@ function changePinCode() {
         <PinComponent v-model="confirmPin" />
         <small class="warning">{{confirmPinError || '&nbsp;'}}</small>
       </div>
+      <div>
+        <Button severity="danger" @click="changePinCode" label="$t('profile.change pin code')"/>
+      </div>
     </div>
   </card-component>
 </template>

From 45e683bf60384c9077d357deef4ea326f0eb7ea2 Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Tue, 24 Oct 2023 20:05:56 +0200
Subject: [PATCH 10/32] get pin code from backend and show in toast

---
 src/components/ChangeApiKeyComponent.vue | 17 ++++++++++++++++-
 src/components/ChangePinComponent.vue    |  1 -
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/ChangeApiKeyComponent.vue b/src/components/ChangeApiKeyComponent.vue
index 6b1d33c2..1df18847 100644
--- a/src/components/ChangeApiKeyComponent.vue
+++ b/src/components/ChangeApiKeyComponent.vue
@@ -1,17 +1,32 @@
 <script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
 import { ref } from "vue";
+import { useAuthStore } from "@sudosos/sudosos-frontend-common";
+import apiService from "@/services/ApiService";
+import { useToast } from "primevue/usetoast";
 
+const authStore = useAuthStore();
 const apiKeyMessage = ref();
+const toast = useToast();
 
 function updateApiKey() {
+  authStore.updateUserKey(apiService).then((res) => {
+    //Succes
+    if(res) {
+      toast.add({ severity: "success", summary: "New api key", detail: `your new key is :\n ${res.key} \n Copy now as we do not save this raw data` });
+    }
+  }).catch((err) => {
+    //error
+    console.log(err);
+  });
+}
 
 
-}
 </script>
 
 <template>
   <card-component header="'get api key'">
+    <Toast/>
     <div>
       <p>NOTE: If you request a new API key any old ones will be replaced</p>
       <p>{{apiKeyMessage || '&nbsp;'}}</p>
diff --git a/src/components/ChangePinComponent.vue b/src/components/ChangePinComponent.vue
index dda42199..59beb3c1 100644
--- a/src/components/ChangePinComponent.vue
+++ b/src/components/ChangePinComponent.vue
@@ -10,7 +10,6 @@ import { useUserStore } from '@sudosos/sudosos-frontend-common';
 import type { UserResponse } from "@sudosos/sudosos-client";
 
 const authStore = useAuthStore();
-const userStore = useUserStore();
 const toast = useToast();
 
 const { value: inputPin, errorMessage: inputPinError } = useField('inputPin', validatePin);

From 10abb87c17a652cc36460d00ae326f967be93a6b Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Tue, 24 Oct 2023 21:05:01 +0200
Subject: [PATCH 11/32] create changeUserInfo component

---
 src/components/ChangeInfoComponent.vue | 86 ++++++++++++++++++++++++++
 src/views/ProfileView.vue              |  3 +
 2 files changed, 89 insertions(+)
 create mode 100644 src/components/ChangeInfoComponent.vue

diff --git a/src/components/ChangeInfoComponent.vue b/src/components/ChangeInfoComponent.vue
new file mode 100644
index 00000000..f501fb5c
--- /dev/null
+++ b/src/components/ChangeInfoComponent.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import CardComponent from "@/components/CardComponent.vue";
+import { useField } from "vee-validate";
+import apiService from "@/services/ApiService";
+import { useAuthStore, useUserStore } from "@sudosos/sudosos-frontend-common";
+import { useToast } from "primevue/usetoast";
+
+const authStore = useAuthStore();
+const toast = useToast();
+const userStore = useUserStore();
+
+let isLocal = false;
+if(userStore.getCurrentUser.user) {
+  isLocal = (userStore.getCurrentUser.user.type == "LOCAL_USER");
+}
+
+
+const { value: inputFirstName, errorMessage: inputFirstNameError } = useField('inputFirstName', validateFirstName);
+const { value: inputLastName, errorMessage: inputLastNameError } = useField('inputLastName', validateLastName);
+const { value: inputEmail, errorMessage: inputEmailError } = useField('inputEmail', validateEmail);
+
+
+function validateFirstName(checkFirstName: string) {
+  if (checkFirstName.length <1) {
+    return "name cannot be empty";
+  }
+  return true;
+}
+
+function validateLastName(checkLastName: string) {
+  if (checkLastName.length <1) {
+    return "name cannot be empty";
+  }
+  return true;
+}
+
+function validateEmail(checkEmail: string) {
+  if (!checkEmail.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
+    return "no valid email";
+  }
+  return true;
+}
+
+function changeUserInfo() {
+  if(validateEmail(inputEmail.value) && validateLastName(inputLastName.value) && validateFirstName(inputFirstName.value)) {
+    //TODO update info
+    
+  } else {
+    toast.add({ severity: "error", summary: "failed", detail: 'fill in correct info', life: 3000 });
+
+  }
+}
+
+
+</script>
+
+<template>
+  <card-component :header="'Change password'">
+    <div>
+      <small v-if="!isLocal">!This account is not managed trhoug SudoSOS!</small>
+      <div>
+        <p>FirstName</p>
+        <Password :disabled="!isLocal"  v-model="inputFirstName"/>
+        <small class="warning">{{inputFirstNameError || '&nbsp;'}}</small>
+      </div>
+      <div>
+        <p>Last name</p>
+        <InputText :disabled="!isLocal"  v-model="inputLastName"/>
+        <small class="warning">{{inputLastNameError || '&nbsp;'}}</small>
+      </div>
+      <div>
+        <p>Email adress</p>
+        <InputText :disabled="!isLocal" v-modal="inputEmail"/>
+        <small class="warning">{{inputEmailError || '&nbsp;'}}</small>
+      </div>
+      <div>
+        <Button severity="danger" :disabled="!isLocal" label="Update Password" @click="changeUserInfo"/>
+      </div>
+    </div>
+  </card-component>
+  <Toast />
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index a6ee8e17..39e535e9 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -6,6 +6,8 @@
     <div class="container">
       <ChangePinComponent />
 
+      <ChangeInfoComponent />
+
       <ChangePasswordComponent/>
 
       <ChangeApiKeyComponent />
@@ -22,6 +24,7 @@ import ChangePasswordComponent from "@/components/ChangePasswordComponent.vue";
 import ChangePinComponent from "@/components/ChangePinComponent.vue";
 import ChangeApiKeyComponent from "@/components/ChangeApiKeyComponent.vue";
 import CardComponent from "@/components/CardComponent.vue";
+import ChangeInfoComponent from "@/components/ChangeInfoComponent.vue";
 
 
 </script>

From a2f4ac436aba47bbcccc5253710da83b695eda86 Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Tue, 24 Oct 2023 21:49:08 +0200
Subject: [PATCH 12/32] Add language support

---
 src/components/ChangeApiKeyComponent.vue   | 11 +++++++----
 src/components/ChangeInfoComponent.vue     |  4 +++-
 src/components/ChangePasswordComponent.vue | 20 +++++++++++---------
 src/components/ChangePinComponent.vue      | 19 +++++++++++--------
 src/locales/en.json                        |  9 ++++++++-
 src/views/ProfileView.vue                  |  2 +-
 6 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/components/ChangeApiKeyComponent.vue b/src/components/ChangeApiKeyComponent.vue
index 1df18847..ca640f15 100644
--- a/src/components/ChangeApiKeyComponent.vue
+++ b/src/components/ChangeApiKeyComponent.vue
@@ -4,16 +4,19 @@ import { ref } from "vue";
 import { useAuthStore } from "@sudosos/sudosos-frontend-common";
 import apiService from "@/services/ApiService";
 import { useToast } from "primevue/usetoast";
+import { useI18n } from "vue-i18n";
 
 const authStore = useAuthStore();
 const apiKeyMessage = ref();
 const toast = useToast();
+const { t } = useI18n();
+
 
 function updateApiKey() {
   authStore.updateUserKey(apiService).then((res) => {
     //Succes
     if(res) {
-      toast.add({ severity: "success", summary: "New api key", detail: `your new key is :\n ${res.key} \n Copy now as we do not save this raw data` });
+      toast.add({ severity: "success", summary: "Success", detail: `t('profile.Your new key is')\n ${res.key} \n t('profile.Kay is not saved')` });
     }
   }).catch((err) => {
     //error
@@ -25,14 +28,14 @@ function updateApiKey() {
 </script>
 
 <template>
-  <card-component header="'get api key'">
+  <card-component :header="t('profile.Get api key')">
     <Toast/>
     <div>
-      <p>NOTE: If you request a new API key any old ones will be replaced</p>
+      <p>{{ $t('profile.Note old api key will get removed') }}</p>
       <p>{{apiKeyMessage || '&nbsp;'}}</p>
     </div>
     <div>
-      <Button severity="danger" label="Get new API key" @click="updateApiKey" />
+      <Button severity="danger" :label="t('profile.Get new API key')" @click="updateApiKey" />
     </div>
   </card-component>
 </template>
diff --git a/src/components/ChangeInfoComponent.vue b/src/components/ChangeInfoComponent.vue
index f501fb5c..ced3ed86 100644
--- a/src/components/ChangeInfoComponent.vue
+++ b/src/components/ChangeInfoComponent.vue
@@ -4,10 +4,12 @@ import { useField } from "vee-validate";
 import apiService from "@/services/ApiService";
 import { useAuthStore, useUserStore } from "@sudosos/sudosos-frontend-common";
 import { useToast } from "primevue/usetoast";
+import { useI18n } from "vue-i18n";
 
 const authStore = useAuthStore();
 const toast = useToast();
 const userStore = useUserStore();
+const { t } = useI18n();
 
 let isLocal = false;
 if(userStore.getCurrentUser.user) {
@@ -44,7 +46,7 @@ function validateEmail(checkEmail: string) {
 function changeUserInfo() {
   if(validateEmail(inputEmail.value) && validateLastName(inputLastName.value) && validateFirstName(inputFirstName.value)) {
     //TODO update info
-    
+
   } else {
     toast.add({ severity: "error", summary: "failed", detail: 'fill in correct info', life: 3000 });
 
diff --git a/src/components/ChangePasswordComponent.vue b/src/components/ChangePasswordComponent.vue
index c990e268..436c94bb 100644
--- a/src/components/ChangePasswordComponent.vue
+++ b/src/components/ChangePasswordComponent.vue
@@ -4,10 +4,12 @@ import { useField } from "vee-validate";
 import apiService from "@/services/ApiService";
 import { useAuthStore, useUserStore } from "@sudosos/sudosos-frontend-common";
 import { useToast } from "primevue/usetoast";
+import { useI18n } from "vue-i18n";
 
 const authStore = useAuthStore();
 const toast = useToast();
 const userStore = useUserStore();
+const { t } = useI18n();
 
 let isLocal = false;
 if(userStore.getCurrentUser.user) {
@@ -21,16 +23,16 @@ const { value: confirmPassword, errorMessage: confirmPasswordError } = useField(
 
 
 function validatePassword(checkPassword: string) {
-  if (checkPassword.length <12) {
+  if (checkPassword.length <8) {
     //TODO set password requirements
-    return "length should be at least 12";
+    return t('profile.Password should');
   }
   return true;
 }
 
 function validateConfirmPassword(checkConfirmPassword: string) {
   if (checkConfirmPassword != inputPassword.value) {
-    return "Both passwords should match";
+    return t('profile.The passwords to not match up');
   }
   return true;
 }
@@ -40,20 +42,20 @@ function changePassword() {
     authStore.updateUserLocalPassword(inputPassword.value, apiService).then(() => {
       inputPassword.value = "";
       confirmPassword.value = "";
-      toast.add({ severity: "success", summary: "succes", detail: "" });
+      toast.add({ severity: "success", summary: "success", detail: "" });
+    }).catch((err) => {
+      console.error(err);
     });
-    //TODO call the password update
   } else {
-    toast.add({ severity: "error", summary: "failed", detail: 'fill in correct passwords', life: 3000 });
+    toast.add({ severity: "error", summary: "failed", detail: t('profile.Incorrect passwords submitted'), life: 3000 });
   }
 }
 
 </script>
 
 <template>
-  <card-component :header="'Change password'">
+  <card-component :header="t('profile.Change password')">
     <div>
-      <small v-if="!isLocal">!Only local users can change their password!</small>
       <div>
         <p>Password</p>
         <Password :disabled="!isLocal"  v-model="inputPassword"/>
@@ -65,7 +67,7 @@ function changePassword() {
         <small class="warning">{{confirmPasswordError || '&nbsp;'}}</small>
       </div>
       <div>
-        <Button severity="danger" :disabled="!isLocal" label="Update Password" @click="changePassword"/>
+        <Button severity="danger" :disabled="!isLocal" :label="t('profile.Update password')" @click="changePassword"/>
       </div>
     </div>
   </card-component>
diff --git a/src/components/ChangePinComponent.vue b/src/components/ChangePinComponent.vue
index 59beb3c1..a935bc28 100644
--- a/src/components/ChangePinComponent.vue
+++ b/src/components/ChangePinComponent.vue
@@ -8,9 +8,12 @@ import { useToast } from "primevue/usetoast";
 import { useUserStore } from '@sudosos/sudosos-frontend-common';
 
 import type { UserResponse } from "@sudosos/sudosos-client";
+import { useI18n } from "vue-i18n";
 
 const authStore = useAuthStore();
 const toast = useToast();
+const { t } = useI18n();
+
 
 const { value: inputPin, errorMessage: inputPinError } = useField('inputPin', validatePin);
 const { value: confirmPin, errorMessage: confirmPinError } = useField('confirmPin', validateConfirmPin);
@@ -20,7 +23,7 @@ const { value: confirmPin, errorMessage: confirmPinError } = useField('confirmPi
 //show warning message if pin is filled in and not 4 digits
 function validatePin(checkInputPin: string){
   if (checkInputPin.length != 4 && !RegExp('\\d{4}').test(checkInputPin)) {
-    return "your pin needs to have 4 digits";
+    return t('profile.Pin code must be 4 digits');
   }
   return true;
 };
@@ -28,7 +31,7 @@ function validatePin(checkInputPin: string){
 //show warning message if conformation pin does not fit pin
 function validateConfirmPin(checkConfirmPin: string){
   if (checkConfirmPin != inputPin.value) {
-    return "both pins need to be the same";
+    return t('profile.Conformation does not match pin code');
   }
   return true;
 }
@@ -40,35 +43,35 @@ function changePinCode() {
       //   Succes!
       inputPin.value="";
       confirmPin.value="";
-      toast.add({ severity: "success", summary: "success", detail: 'pin updated successful'  });
+      toast.add({ severity: "success", summary: "success", detail: t('profile.Pin code updated')  });
     }).catch((err) => {
       // Error
       console.error(err);
     });
   } else {
-    toast.add({ severity: "error", summary: "failed", detail: 'fill in correct pin codes', life: 3000 });
+    toast.add({ severity: "error", summary: "failed", detail: t('profile.Incorrect pin code submitted'), life: 3000 });
   }
 }
 
 </script>
 
 <template>
-  <card-component :header="$t('profile.change pin code')">
+  <card-component :header="$t('profile.Change pin code')">
     <Toast />
 
     <div id="update-pin-form">
       <div>
-        <p>{{ $t('profile.new pin code')}}</p>
+        <p>{{ $t('profile.New pin code')}}</p>
         <PinComponent v-model="inputPin" />
         <small class="warning">{{inputPinError || '&nbsp;'}}</small>
       </div>
       <div>
-        <p>{{ $t('profile.confirm new pin code')}}</p>
+        <p>{{ $t('profile.Confirm new pin code')}}</p>
         <PinComponent v-model="confirmPin" />
         <small class="warning">{{confirmPinError || '&nbsp;'}}</small>
       </div>
       <div>
-        <Button severity="danger" @click="changePinCode" label="$t('profile.change pin code')"/>
+        <Button severity="danger" @click="changePinCode" :label="t('profile.Change pin code')" />
       </div>
     </div>
   </card-component>
diff --git a/src/locales/en.json b/src/locales/en.json
index dd02ae3a..9ab77333 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -448,6 +448,7 @@
     "Password should": "Password should contain at least 8 characters",
     "Confirm password": "Confirm password",
     "The passwords to not match up": "The passwords to not match up",
+    "Incorrect passwords submitted": "Incorrect passwords submitted",
     "Update password": "Update password",
     "Change pin code": "Change pin code",
     "Old pin code": "Old pin code",
@@ -460,7 +461,13 @@
     "New pin code length must be 4 digits": "New pin code length must be 4 digits",
     "New pin code must be unique from old pin code": "New pin code must be unique from old pin code",
     "Confirmation does not match pin code": "Confirmation does not match pin code",
-    "Pin code updated": "Pin code was successfully updated."
+    "Pin code updated": "Pin code was successfully updated.",
+    "Incorrect pin code submitted": "Incorrect pin code submitted",
+    "Your new key is": "Your new API key is: ",
+    "Key is not saved": "NOTE: your API key is not saved so copy it now",
+    "Get api key": "Get API key",
+    "Note old api key will get removed": "NOTE: any old API key will be replaced",
+    "Get new API key": "Get new API key"
   },
   "userDetails": {
     "profile": "{name}'s profile",
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 39e535e9..e975abff 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -6,7 +6,7 @@
     <div class="container">
       <ChangePinComponent />
 
-      <ChangeInfoComponent />
+      <!-- <ChangeInfoComponent /> -->
 
       <ChangePasswordComponent/>
 

From 930b452a4cdccf81d0fd4d2f54c0c11414bb73f1 Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Tue, 24 Oct 2023 21:49:59 +0200
Subject: [PATCH 13/32] and another translation

---
 src/views/ProfileView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index e975abff..d5e616c7 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-container">
 
-    <div class="page-title">{{ $t('profile.my profile')}}</div>
+    <div class="page-title">{{ $t('profile.My profile')}}</div>
 
     <div class="container">
       <ChangePinComponent />

From 0f59ab79429bb7274f835c40a234123ea10f3edb Mon Sep 17 00:00:00 2001
From: JorisParee <joris.paree@gmail.com>
Date: Tue, 24 Oct 2023 22:37:37 +0200
Subject: [PATCH 14/32] fix fix

---
 src/components/ChangeApiKeyComponent.vue |  2 +-
 src/components/ChangeInfoComponent.vue   |  4 ++--
 src/views/ProfileView.vue                | 22 +++++++++++++++++-----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/ChangeApiKeyComponent.vue b/src/components/ChangeApiKeyComponent.vue
index ca640f15..aa7b52d9 100644
--- a/src/components/ChangeApiKeyComponent.vue
+++ b/src/components/ChangeApiKeyComponent.vue
@@ -16,7 +16,7 @@ function updateApiKey() {
   authStore.updateUserKey(apiService).then((res) => {
     //Succes
     if(res) {
-      toast.add({ severity: "success", summary: "Success", detail: `t('profile.Your new key is')\n ${res.key} \n t('profile.Kay is not saved')` });
+      toast.add({ severity: "success", summary: "Success", detail: `${t('profile.Your new key is')} \n ${res.key} \n ${t('profile.Kay is not saved')}` });
     }
   }).catch((err) => {
     //error
diff --git a/src/components/ChangeInfoComponent.vue b/src/components/ChangeInfoComponent.vue
index ced3ed86..9d681466 100644
--- a/src/components/ChangeInfoComponent.vue
+++ b/src/components/ChangeInfoComponent.vue
@@ -57,7 +57,7 @@ function changeUserInfo() {
 </script>
 
 <template>
-  <card-component :header="'Change password'">
+  <card-component :header="'Change user info'">
     <div>
       <small v-if="!isLocal">!This account is not managed trhoug SudoSOS!</small>
       <div>
@@ -76,7 +76,7 @@ function changeUserInfo() {
         <small class="warning">{{inputEmailError || '&nbsp;'}}</small>
       </div>
       <div>
-        <Button severity="danger" :disabled="!isLocal" label="Update Password" @click="changeUserInfo"/>
+        <Button severity="danger" :disabled="true" label="Update user info" @click="changeUserInfo"/>
       </div>
     </div>
   </card-component>
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index d5e616c7..6d248869 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -4,13 +4,22 @@
     <div class="page-title">{{ $t('profile.My profile')}}</div>
 
     <div class="container">
-      <ChangePinComponent />
 
-      <!-- <ChangeInfoComponent /> -->
+      <div class = "container">
+
+          <ChangePinComponent />
+
+          <ChangePasswordComponent />
+      </div>
+
+      <div class="container">
+          <ChangeApiKeyComponent />
+
+          <ChangeInfoComponent />
+      </div>
+
 
-      <ChangePasswordComponent/>
 
-      <ChangeApiKeyComponent />
 
     </div>
 
@@ -25,8 +34,11 @@ import ChangePinComponent from "@/components/ChangePinComponent.vue";
 import ChangeApiKeyComponent from "@/components/ChangeApiKeyComponent.vue";
 import CardComponent from "@/components/CardComponent.vue";
 import ChangeInfoComponent from "@/components/ChangeInfoComponent.vue";
+import apiService from "@/services/ApiService";
 
-
+apiService.user.updateUser(0, {
+  email: 'kamker',
+});
 </script>
 
 <style scoped>

From b5a323c164c199ad4d22dc662c4443f4fd364a56 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 28 Oct 2023 14:31:38 +0200
Subject: [PATCH 15/32] Fixed GEWIS login

 - Added correct routing to /login
---
 package-lock.json       | 6 ++++--
 src/router/index.ts     | 5 +++++
 src/views/LoginView.vue | 1 +
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 72d70f36..ddb4cf8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3306,7 +3306,8 @@
     },
     "node_modules/qs": {
       "version": "6.11.2",
-      "license": "BSD-3-Clause",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
       "dependencies": {
         "side-channel": "^1.0.4"
       },
@@ -3738,7 +3739,8 @@
     },
     "node_modules/stripe": {
       "version": "12.18.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-12.18.0.tgz",
+      "integrity": "sha512-cYjgBM2SY/dTm8Lr6eMyyONaHTZHA/QjHxFUIW5WH8FevSRIGAVtXEmBkUXF1fsqe7QvvRgQSGSJZmjDacegGg==",
       "dependencies": {
         "@types/node": ">=8.1.0",
         "qs": "^6.11.0"
diff --git a/src/router/index.ts b/src/router/index.ts
index 590afe95..1c5d7ede 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -47,6 +47,11 @@ const router = createRouter({
           component: LoginView,
           name: 'login'
         },
+        {
+          path: '/login',
+          component: LoginView,
+          name: 'gewis-login',
+        },
         {
           path: '/passwordreset',
           component: PasswordResetView,
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 6ae7e800..df5cbd80 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -97,6 +97,7 @@ const password = loginForm.defineComponentBinds('password');
 const route = useRoute();
 
 onBeforeMount(() => {
+  console.log(route.query.token);
   if (route.query.token !== undefined) {
     const token = route.query.token as string;
     authStore.gewisWebLogin(uuid(), token, apiService).catch(() => {

From f5ced814586c2d1c0e94c666a8661fdcfd5607ba Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 28 Oct 2023 14:45:32 +0200
Subject: [PATCH 16/32] Removed unneded todo

---
 src/views/ProductsContainersView.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/ProductsContainersView.vue b/src/views/ProductsContainersView.vue
index c73a1749..7c6538db 100644
--- a/src/views/ProductsContainersView.vue
+++ b/src/views/ProductsContainersView.vue
@@ -168,8 +168,7 @@ onMounted(async () => {
   const vatGroupsResp = await apiService.vatGroups.getAllVatGroups();
   vatGroups.value = vatGroupsResp.data.records;
 
-  // TODO: Put getAllContainers into container store and take care of pagination
-  // See: https://github.com/GEWIS/sudosos-frontend-vue3/issues/51
+
   await apiService.container.getAllContainers(500, 0).then((resp: any) => {
     (resp.data.records as ContainerResponse[]).forEach((container) =>
       apiService.container.getSingleContainer(container.id).then((res) => {

From 4a4cc4d1844b971387b895874ad693068a97a47d Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 28 Oct 2023 14:49:32 +0200
Subject: [PATCH 17/32] Removed unneeded TODO

---
 src/views/LoginView.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index df5cbd80..9a5068ad 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -133,8 +133,6 @@ const loginHandler = loginForm.handleSubmit(async (values) => {
   }
 });
 
-// TODO: fix the GEWIS login
-// See: https://github.com/GEWIS/sudosos-frontend-vue3/issues/32
 const loginViaGEWIS = () => {
   window.location.href = `https://gewis.nl/token/${import.meta.env.VITE_APP_GEWIS_TOKEN}`;
 };

From ec8f96de50bc0c0c9ffcb249ae0855dad3f52ec5 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Fri, 1 Dec 2023 21:11:11 +0100
Subject: [PATCH 18/32] Fixed localisation issues

Fixed codestyle issues
---
 src/components/ChangeApiKeyComponent.vue   |  8 ++-
 src/components/ChangeInfoComponent.vue     | 23 ++++----
 src/components/ChangePasswordComponent.vue | 21 ++++---
 src/components/ChangePinComponent.vue      |  5 +-
 src/components/PinComponent.vue            | 13 +++--
 src/components/TermsOfServiceModal.vue     | 12 ++--
 src/locales/en.json                        | 66 +++++++++++-----------
 src/utils/formatterUtils.ts                |  2 +-
 src/views/ProfileView.vue                  |  3 +-
 9 files changed, 84 insertions(+), 69 deletions(-)

diff --git a/src/components/ChangeApiKeyComponent.vue b/src/components/ChangeApiKeyComponent.vue
index aa7b52d9..789a4745 100644
--- a/src/components/ChangeApiKeyComponent.vue
+++ b/src/components/ChangeApiKeyComponent.vue
@@ -16,7 +16,11 @@ function updateApiKey() {
   authStore.updateUserKey(apiService).then((res) => {
     //Succes
     if(res) {
-      toast.add({ severity: "success", summary: "Success", detail: `${t('profile.Your new key is')} \n ${res.key} \n ${t('profile.Kay is not saved')}` });
+      toast.add({
+        severity: "success",
+        summary: "Success",
+        detail: `${t('profile.Your new key is')} \n ${res.key} \n ${t('profile.Kay is not saved')}`
+      });
     }
   }).catch((err) => {
     //error
@@ -42,4 +46,4 @@ function updateApiKey() {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ChangeInfoComponent.vue b/src/components/ChangeInfoComponent.vue
index 5a446993..4a9d7a2a 100644
--- a/src/components/ChangeInfoComponent.vue
+++ b/src/components/ChangeInfoComponent.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
 import { useField } from "vee-validate";
-import apiService from "@/services/ApiService";
-import { useAuthStore, useUserStore } from "@sudosos/sudosos-frontend-common";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
 
-const authStore = useAuthStore();
 const toast = useToast();
 const userStore = useUserStore();
 const { t } = useI18n();
@@ -57,29 +55,34 @@ function changeUserInfo() {
 </script>
 
 <template>
-  <card-component :header="'Change user info'">
+  <CardComponent :header="$t('profile.changeUserInfo')">
     <div>
-      <small v-if="!isLocal">!This account is not managed trhoug SudoSOS!</small>
+      <small v-if="!isLocal">{{ $t('profile.notManagedThroughSudoSOS') }}</small>
       <div>
-        <p>FirstName</p>
+        <p>{{ $t('profile.firstName')}}</p>
         <InputText :disabled="!isLocal"  v-model="inputFirstName"/>
         <small class="warning">{{inputFirstNameError || '&nbsp;'}}</small>
       </div>
       <div>
-        <p>Last name</p>
+        <p>{{ $t('profile.lastName')}}</p>
         <InputText :disabled="!isLocal"  v-model="inputLastName"/>
         <small class="warning">{{inputLastNameError || '&nbsp;'}}</small>
       </div>
       <div>
-        <p>Email adress</p>
+        <p>{{ $t('profile.emailAddress')}}</p>
         <InputText :disabled="!isLocal" v-modal="inputEmail"/>
         <small class="warning">{{inputEmailError || '&nbsp;'}}</small>
       </div>
       <div>
-        <Button severity="danger" :disabled="true" label="Update user info" @click="changeUserInfo"/>
+        <Button
+          severity="danger"
+          :disabled="true"
+          :label="$t('profile.updateInfo')"
+          @click="changeUserInfo"
+        />
       </div>
     </div>
-  </card-component>
+  </CardComponent>
   <Toast />
 </template>
 
diff --git a/src/components/ChangePasswordComponent.vue b/src/components/ChangePasswordComponent.vue
index 142b50b8..7b196985 100644
--- a/src/components/ChangePasswordComponent.vue
+++ b/src/components/ChangePasswordComponent.vue
@@ -19,8 +19,10 @@ if(userStore.getCurrentUser.user) {
 
 
 //TODO make password greyed when using m account
-const { value: inputPassword, errorMessage: inputPasswordError } = useField('inputPassword', validatePassword);
-const { value: confirmPassword, errorMessage: confirmPasswordError } = useField('confirmPassword', validateConfirmPassword);
+const { value: inputPassword, errorMessage: inputPasswordError }
+  = useField('inputPassword', validatePassword);
+const { value: confirmPassword, errorMessage: confirmPasswordError }
+  = useField('confirmPassword', validateConfirmPassword);
 
 
 function validatePassword(checkPassword: string) {
@@ -55,23 +57,28 @@ function changePassword() {
 </script>
 
 <template>
-  <card-component :header="t('profile.Change password')">
+  <CardComponent :header="t('profile.changePassword')">
     <div>
       <div>
-        <p>Password</p>
+        <p>{{ $t('profile.password') }}</p>
         <Password :disabled="!isLocal"  v-model="inputPassword"/>
         <small class="warning">{{inputPasswordError || '&nbsp;'}}</small>
       </div>
       <div>
-        <p>Confirm password</p>
+        <p>{{ $t('profile.passwordConfirm') }}</p>
         <Password :disabled="!isLocal" v-model="confirmPassword"/>
         <small class="warning">{{confirmPasswordError || '&nbsp;'}}</small>
       </div>
       <div>
-        <Button severity="danger" :disabled="!isLocal" :label="t('profile.Update password')" @click="changePassword"/>
+        <Button
+          severity="danger"
+          :disabled="!isLocal"
+          :label="t('profile.passwordUpdate')"
+          @click="changePassword"
+        />
       </div>
     </div>
-  </card-component>
+  </CardComponent>
   <Toast />
 </template>
 
diff --git a/src/components/ChangePinComponent.vue b/src/components/ChangePinComponent.vue
index a935bc28..6d8ae8ea 100644
--- a/src/components/ChangePinComponent.vue
+++ b/src/components/ChangePinComponent.vue
@@ -5,9 +5,6 @@ import { useField } from "vee-validate";
 import apiService from "@/services/ApiService";
 import { useAuthStore } from "@sudosos/sudosos-frontend-common";
 import { useToast } from "primevue/usetoast";
-import { useUserStore } from '@sudosos/sudosos-frontend-common';
-
-import type { UserResponse } from "@sudosos/sudosos-client";
 import { useI18n } from "vue-i18n";
 
 const authStore = useAuthStore();
@@ -79,4 +76,4 @@ function changePinCode() {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/PinComponent.vue b/src/components/PinComponent.vue
index 1943e640..87a00722 100644
--- a/src/components/PinComponent.vue
+++ b/src/components/PinComponent.vue
@@ -1,14 +1,19 @@
 <template>
-<InputText type="password" autocomplete="off" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
+<InputText
+  type="password"
+  autocomplete="off"
+  :value="modelValue"
+  @input="$emit('update:modelValue', $event.target.value)"
+/>
 </template>
 
 <script setup lang="ts">
 import InputText from "primevue/inputtext";
 
-defineProps(['modelValue'])
-defineEmits(['update:modelValue'])
+defineProps(['modelValue']);
+defineEmits(['update:modelValue']);
 
 </script>
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/TermsOfServiceModal.vue b/src/components/TermsOfServiceModal.vue
index ad1062ab..ea101f59 100644
--- a/src/components/TermsOfServiceModal.vue
+++ b/src/components/TermsOfServiceModal.vue
@@ -1,8 +1,8 @@
 <template>
     <span class="tosLink" @click="visible = true">{{$t('termsOfService.termsOfService')}}</span>
-    <Dialog 
-        modal 
-        v-model:visible="visible" 
+    <Dialog
+        modal
+        v-model:visible="visible"
         :draggable="false"
         class="tosModal"
         >
@@ -10,7 +10,8 @@
            {{ $t('termsOfService.termsOfService') }}
         </template>
         <div>
-             <p>SudoSOS Terms of Service - version 1.0 (14/08/2022)</p> <!-- TOS is also english so we can leave this untranslated -->
+             <p>SudoSOS Terms of Service - version 1.0 (14/08/2022)</p>
+          <!-- TOS is also english so we can leave this untranslated -->
             <div v-html="tos"></div>
         </div>
         <template #footer>
@@ -21,13 +22,12 @@
 
 <script setup lang="ts">
 import Dialog from 'primevue/dialog';
-import type { Ref } from 'vue';
 import { ref } from 'vue';
 import termsOfService from '@/locales/termsOfService.md?raw';
 import { marked } from 'marked';
 
 
-const tos = marked(termsOfService)
+const tos = marked(termsOfService);
 const visible = ref(false);
 </script>
 <style>
diff --git a/src/locales/en.json b/src/locales/en.json
index ac109a8d..9ea8d685 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -439,39 +439,39 @@
     "message": "One or more deposits are still being processed. When this is successful, your deposit will be added to your balance and this message will disappear."
   },
   "profile": {
-    "My profile": "My profile",
-    "Edit info": "Edit info",
-    "First name": "First name",
-    "First name should contain at least 1 character": "First name should contain at least 1 character",
-    "Last name": "Last name",
-    "Email address": "Email address",
-    "Email should be correct": "You should enter a correct email address",
-    "Update user information": "Update user information",
-    "Change password": "Change password",
-    "Password": "Password",
-    "Password should": "Password should contain at least 8 characters",
-    "Confirm password": "Confirm password",
-    "The passwords to not match up": "The passwords to not match up",
-    "Incorrect passwords submitted": "Incorrect passwords submitted",
-    "Update password": "Update password",
-    "Change pin code": "Change pin code",
-    "Old pin code": "Old pin code",
-    "New pin code": "New pin code",
-    "Confirm new pin code": "Confirm new pin code",
-    "Manage NFC devices": "Manage NFC devices",
-    "Confirm deletion": "Confirm deletion",
-    "Are you sure": "Are you sure you want to remove this NFC device?",
-    "Pin code must be 4 digits": "Pin code must be 4 digits",
-    "New pin code length must be 4 digits": "New pin code length must be 4 digits",
-    "New pin code must be unique from old pin code": "New pin code must be unique from old pin code",
-    "Confirmation does not match pin code": "Confirmation does not match pin code",
-    "Pin code updated": "Pin code was successfully updated.",
-    "Incorrect pin code submitted": "Incorrect pin code submitted",
-    "Your new key is": "Your new API key is: ",
-    "Key is not saved": "NOTE: your API key is not saved so copy it now",
-    "Get api key": "Get API key",
-    "Note old api key will get removed": "NOTE: any old API key will be replaced",
-    "Get new API key": "Get new API key"
+    "changeUserInfo": "Change user info",
+    "myProfile": "My profile",
+    "editInfo": "Edit info",
+    "firstName": "First name",
+    "firstNameError": "First name should contain at least 1 character",
+    "lastName": "Last name",
+    "emailAddress": "Email address",
+    "emailNotCorrect": "You should enter a correct email address",
+    "updateInfo": "Update user information",
+    "changePassword": "Change password",
+    "password": "Password",
+    "passwordTooShort": "Password should contain at least 8 characters",
+    "passwordConfirm": "Confirm password",
+    "passwordNotMatching": "The passwords do not match up",
+    "incorrectPassword": "Incorrect passwords submitted",
+    "passwordUpdate": "Update password",
+    "pinChange": "Change pin code",
+    "pinOld": "Old pin code",
+    "pinNew": "New pin code",
+    "pinConfirm": "Confirm new pin code",
+    "manageNFC": "Manage NFC devices",
+    "deletionConfirm": "Confirm deletion",
+    "confirmNFC": "Are you sure you want to remove this NFC device?",
+    "pinIncorrectLength": "Pin code must be 4 digits",
+    "pinNotMatch": "Confirmation does not match pin code",
+    "pinUpdated": "Pin code was successfully updated.",
+    "pinIncorrect": "Incorrect pin code submitted",
+    "newKey": "Your new API key is: ",
+    "keyNotSaved": "NOTE: your API key is not saved so copy it now",
+    "keyGet": "Get API key",
+    "keyOldRemoved": "NOTE: any old API key will be replaced",
+    "keyGetNew": "Get new API key",
+    "notManagedThroughSudoSOS": "This account is not managed through SudoSOS!"
   },
   "userDetails": {
     "profile": "{name}'s profile",
diff --git a/src/utils/formatterUtils.ts b/src/utils/formatterUtils.ts
index 66e26410..e24862a4 100644
--- a/src/utils/formatterUtils.ts
+++ b/src/utils/formatterUtils.ts
@@ -1,4 +1,4 @@
-import type { Dinero, DineroObjectRequest, DineroObjectResponse } from "@sudosos/sudosos-client";
+import type { Dinero } from "@sudosos/sudosos-client";
 
 export function formatDateTime(date: Date): string {
 
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 6d248869..771b0ced 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -32,7 +32,6 @@
 import ChangePasswordComponent from "@/components/ChangePasswordComponent.vue";
 import ChangePinComponent from "@/components/ChangePinComponent.vue";
 import ChangeApiKeyComponent from "@/components/ChangeApiKeyComponent.vue";
-import CardComponent from "@/components/CardComponent.vue";
 import ChangeInfoComponent from "@/components/ChangeInfoComponent.vue";
 import apiService from "@/services/ApiService";
 
@@ -59,4 +58,4 @@ apiService.user.updateUser(0, {
   padding-right: 50px;
 }
 
-</style>
\ No newline at end of file
+</style>

From 214e49504566f11f919146c2a4efbff8496a968c Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Fri, 1 Dec 2023 21:25:10 +0100
Subject: [PATCH 19/32] Fixed more localisation issues

---
 src/components/ChangeApiKeyComponent.vue   | 12 ++++++------
 src/components/ChangeInfoComponent.vue     |  2 +-
 src/components/ChangePasswordComponent.vue |  2 +-
 src/components/ChangePinComponent.vue      | 20 ++++++++++----------
 src/views/ProfileView.vue                  | 21 ++++++++++++---------
 5 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/components/ChangeApiKeyComponent.vue b/src/components/ChangeApiKeyComponent.vue
index 789a4745..e3a41c46 100644
--- a/src/components/ChangeApiKeyComponent.vue
+++ b/src/components/ChangeApiKeyComponent.vue
@@ -19,7 +19,7 @@ function updateApiKey() {
       toast.add({
         severity: "success",
         summary: "Success",
-        detail: `${t('profile.Your new key is')} \n ${res.key} \n ${t('profile.Kay is not saved')}`
+        detail: `${t('profile.newKey')} \n ${res.key} \n ${t('profile.keyNotSaved')}`
       });
     }
   }).catch((err) => {
@@ -32,16 +32,16 @@ function updateApiKey() {
 </script>
 
 <template>
-  <card-component :header="t('profile.Get api key')">
+  <CardComponent :header="t('profile.keyGet')">
     <Toast/>
     <div>
-      <p>{{ $t('profile.Note old api key will get removed') }}</p>
+      <p>{{ $t('profile.keyOldRemoved') }}</p>
       <p>{{apiKeyMessage || '&nbsp;'}}</p>
     </div>
-    <div>
-      <Button severity="danger" :label="t('profile.Get new API key')" @click="updateApiKey" />
+    <div style="margin-top: 1rem">
+      <Button severity="danger" :label="t('profile.keyGetNew')" @click="updateApiKey" />
     </div>
-  </card-component>
+  </CardComponent>
 </template>
 
 <style scoped>
diff --git a/src/components/ChangeInfoComponent.vue b/src/components/ChangeInfoComponent.vue
index 4a9d7a2a..034a6a15 100644
--- a/src/components/ChangeInfoComponent.vue
+++ b/src/components/ChangeInfoComponent.vue
@@ -73,7 +73,7 @@ function changeUserInfo() {
         <InputText :disabled="!isLocal" v-modal="inputEmail"/>
         <small class="warning">{{inputEmailError || '&nbsp;'}}</small>
       </div>
-      <div>
+      <div style="margin-top: 1rem">
         <Button
           severity="danger"
           :disabled="true"
diff --git a/src/components/ChangePasswordComponent.vue b/src/components/ChangePasswordComponent.vue
index 7b196985..b77cc2ec 100644
--- a/src/components/ChangePasswordComponent.vue
+++ b/src/components/ChangePasswordComponent.vue
@@ -69,7 +69,7 @@ function changePassword() {
         <Password :disabled="!isLocal" v-model="confirmPassword"/>
         <small class="warning">{{confirmPasswordError || '&nbsp;'}}</small>
       </div>
-      <div>
+      <div style="margin-top: 1rem">
         <Button
           severity="danger"
           :disabled="!isLocal"
diff --git a/src/components/ChangePinComponent.vue b/src/components/ChangePinComponent.vue
index 6d8ae8ea..d3336c6f 100644
--- a/src/components/ChangePinComponent.vue
+++ b/src/components/ChangePinComponent.vue
@@ -20,7 +20,7 @@ const { value: confirmPin, errorMessage: confirmPinError } = useField('confirmPi
 //show warning message if pin is filled in and not 4 digits
 function validatePin(checkInputPin: string){
   if (checkInputPin.length != 4 && !RegExp('\\d{4}').test(checkInputPin)) {
-    return t('profile.Pin code must be 4 digits');
+    return t('profile.pinIncorrectLength');
   }
   return true;
 };
@@ -28,7 +28,7 @@ function validatePin(checkInputPin: string){
 //show warning message if conformation pin does not fit pin
 function validateConfirmPin(checkConfirmPin: string){
   if (checkConfirmPin != inputPin.value) {
-    return t('profile.Conformation does not match pin code');
+    return t('profile.pinNotMatch');
   }
   return true;
 }
@@ -40,38 +40,38 @@ function changePinCode() {
       //   Succes!
       inputPin.value="";
       confirmPin.value="";
-      toast.add({ severity: "success", summary: "success", detail: t('profile.Pin code updated')  });
+      toast.add({ severity: "success", summary: "success", detail: t('profile.pinUpdated')  });
     }).catch((err) => {
       // Error
       console.error(err);
     });
   } else {
-    toast.add({ severity: "error", summary: "failed", detail: t('profile.Incorrect pin code submitted'), life: 3000 });
+    toast.add({ severity: "error", summary: "failed", detail: t('profile.pinIncorrect'), life: 3000 });
   }
 }
 
 </script>
 
 <template>
-  <card-component :header="$t('profile.Change pin code')">
+  <CardComponent :header="$t('profile.pinChange')">
     <Toast />
 
     <div id="update-pin-form">
       <div>
-        <p>{{ $t('profile.New pin code')}}</p>
+        <p>{{ $t('profile.pinNew')}}</p>
         <PinComponent v-model="inputPin" />
         <small class="warning">{{inputPinError || '&nbsp;'}}</small>
       </div>
       <div>
-        <p>{{ $t('profile.Confirm new pin code')}}</p>
+        <p>{{ $t('profile.pinConfirm')}}</p>
         <PinComponent v-model="confirmPin" />
         <small class="warning">{{confirmPinError || '&nbsp;'}}</small>
       </div>
-      <div>
-        <Button severity="danger" @click="changePinCode" :label="t('profile.Change pin code')" />
+      <div style="margin-top: 1rem">
+        <Button severity="danger" @click="changePinCode" :label="t('profile.pinChange')" />
       </div>
     </div>
-  </card-component>
+  </CardComponent>
 </template>
 
 <style scoped>
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 771b0ced..d924413e 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="page-container">
 
-    <div class="page-title">{{ $t('profile.My profile')}}</div>
+    <div class="page-title">{{ $t('profile.myProfile')}}</div>
 
     <div class="container">
 
-      <div class = "container">
+      <div class ="row">
 
           <ChangePinComponent />
 
           <ChangePasswordComponent />
       </div>
 
-      <div class="container">
+      <div class="row">
           <ChangeApiKeyComponent />
 
           <ChangeInfoComponent />
@@ -48,14 +48,17 @@ apiService.user.updateUser(0, {
   font-size: 75%;
 }
 
-
+.row {
+  display: flex;
+  flex-direction: row;
+  width: 75%;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
 
 .container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 10px; /* Reduce the gap value to 10px */
-  padding-bottom: 20px; /* Add bottom padding to prevent the last row from being cut off */
-  padding-right: 50px;
+  display: flex;
+  flex-direction: column;
 }
 
 </style>

From ddb415f9e3f543bc3da2bc996782f6ec207941cb Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 2 Dec 2023 17:28:04 +0100
Subject: [PATCH 20/32] Further improvements

---
 src/components/ChangeApiKeyComponent.vue   |  1 -
 src/components/ChangeInfoComponent.vue     | 63 +++++++++++-----------
 src/components/ChangePasswordComponent.vue |  1 -
 src/components/ChangePinComponent.vue      |  2 -
 4 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/src/components/ChangeApiKeyComponent.vue b/src/components/ChangeApiKeyComponent.vue
index e3a41c46..6d155cf0 100644
--- a/src/components/ChangeApiKeyComponent.vue
+++ b/src/components/ChangeApiKeyComponent.vue
@@ -33,7 +33,6 @@ function updateApiKey() {
 
 <template>
   <CardComponent :header="t('profile.keyGet')">
-    <Toast/>
     <div>
       <p>{{ $t('profile.keyOldRemoved') }}</p>
       <p>{{apiKeyMessage || '&nbsp;'}}</p>
diff --git a/src/components/ChangeInfoComponent.vue b/src/components/ChangeInfoComponent.vue
index 034a6a15..76fe24bc 100644
--- a/src/components/ChangeInfoComponent.vue
+++ b/src/components/ChangeInfoComponent.vue
@@ -1,3 +1,34 @@
+<template>
+  <CardComponent :header="$t('profile.changeUserInfo')">
+    <div>
+      <small v-if="!isLocal">{{ $t('profile.notManagedThroughSudoSOS') }}</small>
+      <div>
+        <p>{{ $t('profile.firstName')}}</p>
+        <InputText :disabled="!isLocal"  v-model="inputFirstName"/>
+        <small class="warning">{{inputFirstNameError || '&nbsp;'}}</small>
+      </div>
+      <div>
+        <p>{{ $t('profile.lastName')}}</p>
+        <InputText :disabled="!isLocal"  v-model="inputLastName"/>
+        <small class="warning">{{inputLastNameError || '&nbsp;'}}</small>
+      </div>
+      <div>
+        <p>{{ $t('profile.emailAddress')}}</p>
+        <InputText :disabled="!isLocal" v-model="inputEmail"/>
+        <small class="warning">{{inputEmailError || '&nbsp;'}}</small>
+      </div>
+      <div style="margin-top: 1rem">
+        <Button
+          severity="danger"
+          :disabled="true"
+          :label="$t('profile.updateInfo')"
+          @click="changeUserInfo"
+        />
+      </div>
+    </div>
+  </CardComponent>
+</template>
+
 <script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
 import { useField } from "vee-validate";
@@ -54,38 +85,6 @@ function changeUserInfo() {
 
 </script>
 
-<template>
-  <CardComponent :header="$t('profile.changeUserInfo')">
-    <div>
-      <small v-if="!isLocal">{{ $t('profile.notManagedThroughSudoSOS') }}</small>
-      <div>
-        <p>{{ $t('profile.firstName')}}</p>
-        <InputText :disabled="!isLocal"  v-model="inputFirstName"/>
-        <small class="warning">{{inputFirstNameError || '&nbsp;'}}</small>
-      </div>
-      <div>
-        <p>{{ $t('profile.lastName')}}</p>
-        <InputText :disabled="!isLocal"  v-model="inputLastName"/>
-        <small class="warning">{{inputLastNameError || '&nbsp;'}}</small>
-      </div>
-      <div>
-        <p>{{ $t('profile.emailAddress')}}</p>
-        <InputText :disabled="!isLocal" v-modal="inputEmail"/>
-        <small class="warning">{{inputEmailError || '&nbsp;'}}</small>
-      </div>
-      <div style="margin-top: 1rem">
-        <Button
-          severity="danger"
-          :disabled="true"
-          :label="$t('profile.updateInfo')"
-          @click="changeUserInfo"
-        />
-      </div>
-    </div>
-  </CardComponent>
-  <Toast />
-</template>
-
 <style scoped>
 
 </style>
diff --git a/src/components/ChangePasswordComponent.vue b/src/components/ChangePasswordComponent.vue
index b77cc2ec..f1fb8b9d 100644
--- a/src/components/ChangePasswordComponent.vue
+++ b/src/components/ChangePasswordComponent.vue
@@ -79,7 +79,6 @@ function changePassword() {
       </div>
     </div>
   </CardComponent>
-  <Toast />
 </template>
 
 <style scoped>
diff --git a/src/components/ChangePinComponent.vue b/src/components/ChangePinComponent.vue
index d3336c6f..6c69d52f 100644
--- a/src/components/ChangePinComponent.vue
+++ b/src/components/ChangePinComponent.vue
@@ -54,8 +54,6 @@ function changePinCode() {
 
 <template>
   <CardComponent :header="$t('profile.pinChange')">
-    <Toast />
-
     <div id="update-pin-form">
       <div>
         <p>{{ $t('profile.pinNew')}}</p>

From 7a8db417c5187f757814390432f8f32c869a88fa Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 2 Dec 2023 17:52:59 +0100
Subject: [PATCH 21/32] Added form validation to ChangeInfoComponent

---
 src/components/ChangeInfoComponent.vue | 98 ++++++++++++++------------
 src/locales/en.json                    |  2 +-
 src/utils/validation-schema.ts         |  8 +++
 src/views/ProfileView.vue              | 23 ------
 4 files changed, 60 insertions(+), 71 deletions(-)

diff --git a/src/components/ChangeInfoComponent.vue b/src/components/ChangeInfoComponent.vue
index 76fe24bc..233f12ee 100644
--- a/src/components/ChangeInfoComponent.vue
+++ b/src/components/ChangeInfoComponent.vue
@@ -1,40 +1,43 @@
 <template>
   <CardComponent :header="$t('profile.changeUserInfo')">
-    <div>
+    <form @submit="changeUserInfo">
       <small v-if="!isLocal">{{ $t('profile.notManagedThroughSudoSOS') }}</small>
       <div>
         <p>{{ $t('profile.firstName')}}</p>
-        <InputText :disabled="!isLocal"  v-model="inputFirstName"/>
-        <small class="warning">{{inputFirstNameError || '&nbsp;'}}</small>
+        <InputText :disabled="!isLocal"  v-bind="firstName"/>
+        <small class="warning">{{errors.firstName || '&nbsp;'}}</small>
       </div>
       <div>
         <p>{{ $t('profile.lastName')}}</p>
-        <InputText :disabled="!isLocal"  v-model="inputLastName"/>
-        <small class="warning">{{inputLastNameError || '&nbsp;'}}</small>
+        <InputText :disabled="!isLocal"  v-bind="lastName"/>
+        <small class="warning">{{errors.lastName || '&nbsp;'}}</small>
       </div>
       <div>
         <p>{{ $t('profile.emailAddress')}}</p>
-        <InputText :disabled="!isLocal" v-model="inputEmail"/>
-        <small class="warning">{{inputEmailError || '&nbsp;'}}</small>
+        <InputText :disabled="!isLocal" v-bind="email"/>
+        <small class="warning">{{errors.email || '&nbsp;'}}</small>
       </div>
       <div style="margin-top: 1rem">
         <Button
           severity="danger"
-          :disabled="true"
+          :disabled="!isLocal"
           :label="$t('profile.updateInfo')"
-          @click="changeUserInfo"
+          type="submit"
         />
       </div>
-    </div>
+    </form>
   </CardComponent>
 </template>
 
 <script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
-import { useField } from "vee-validate";
+import { useField, useForm } from "vee-validate";
 import { useUserStore } from "@sudosos/sudosos-frontend-common";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
+import { simpleUserDetailsSchema } from "@/utils/validation-schema";
+import { onBeforeMount } from "vue";
+import apiService from "@/services/ApiService";
 
 const toast = useToast();
 const userStore = useUserStore();
@@ -45,42 +48,43 @@ if(userStore.getCurrentUser.user) {
   isLocal = (userStore.getCurrentUser.user.type == "LOCAL_USER");
 }
 
-
-const { value: inputFirstName, errorMessage: inputFirstNameError } = useField('inputFirstName', validateFirstName);
-const { value: inputLastName, errorMessage: inputLastNameError } = useField('inputLastName', validateLastName);
-const { value: inputEmail, errorMessage: inputEmailError } = useField('inputEmail', validateEmail);
-
-
-function validateFirstName(checkFirstName: string) {
-  if (checkFirstName.length <1) {
-    return "name cannot be empty";
-  }
-  return true;
-}
-
-function validateLastName(checkLastName: string) {
-  if (checkLastName.length <1) {
-    return "name cannot be empty";
-  }
-  return true;
-}
-
-function validateEmail(checkEmail: string) {
-  if (!checkEmail.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
-    return "no valid email";
-  }
-  return true;
-}
-
-function changeUserInfo() {
-  if(validateEmail(inputEmail.value) && validateLastName(inputLastName.value) && validateFirstName(inputFirstName.value)) {
-    //TODO update info
-
-  } else {
-    toast.add({ severity: "error", summary: "failed", detail: 'fill in correct info', life: 3000 });
-
-  }
-}
+const { defineComponentBinds, handleSubmit, errors, setValues } = useForm({
+  validationSchema: simpleUserDetailsSchema,
+});
+
+const firstName = defineComponentBinds('firstName', {});
+const lastName = defineComponentBinds('lastName', {});
+const email = defineComponentBinds('email', {});
+
+onBeforeMount(() => {
+  setValues({
+      firstName: userStore.getCurrentUser.user.firstName,
+      lastName: userStore.getCurrentUser.user.lastName,
+      email: userStore.getCurrentUser.user.email,
+    }
+  );
+});
+const changeUserInfo = handleSubmit(async (values) => {
+  apiService.user.updateUser(userStore.getCurrentUser.user.id, {
+    firstName: values.firstName,
+    lastName: values.lastName,
+    email: values.email,
+  }).then(() => {
+    toast.add({
+      severity: "success",
+      summary: "Success",
+      detail: `${t('userInfoUpdated')}`,
+      life: 3000,
+    });
+  }).catch((err) => {
+    toast.add({
+      severity: "error",
+      summary: "Error",
+      detail: `${err}`,
+      life: 3000,
+    });
+  });
+});
 
 
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 9ea8d685..3e306d36 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -484,7 +484,7 @@
     "Active": "Active",
     "user is active": "user is active",
     "Update user information": "Update user information",
-    "Updated user information": "User information successfully updated",
+    "userInfoUpdated": "User information successfully updated",
     "Reset password": "Reset password",
     "Password": "Password",
     "Password should": "Password should contain at least 8 characters",
diff --git a/src/utils/validation-schema.ts b/src/utils/validation-schema.ts
index 1793eb3b..ad63873d 100644
--- a/src/utils/validation-schema.ts
+++ b/src/utils/validation-schema.ts
@@ -10,3 +10,11 @@ export const userDetailsSchema = toTypedSchema(
         isActive: yup.boolean().required().default(true),
     })
 );
+
+export const simpleUserDetailsSchema = toTypedSchema(
+  yup.object({
+          firstName: yup.string().required(),
+          lastName: yup.string().required(),
+          email: yup.string().email(),
+  })
+);
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index d924413e..732af8d0 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,30 +1,16 @@
 <template>
   <div class="page-container">
-
     <div class="page-title">{{ $t('profile.myProfile')}}</div>
-
     <div class="container">
-
       <div class ="row">
-
           <ChangePinComponent />
-
           <ChangePasswordComponent />
       </div>
-
       <div class="row">
           <ChangeApiKeyComponent />
-
           <ChangeInfoComponent />
       </div>
-
-
-
-
     </div>
-
-
-
   </div>
 </template>
 
@@ -33,21 +19,12 @@ import ChangePasswordComponent from "@/components/ChangePasswordComponent.vue";
 import ChangePinComponent from "@/components/ChangePinComponent.vue";
 import ChangeApiKeyComponent from "@/components/ChangeApiKeyComponent.vue";
 import ChangeInfoComponent from "@/components/ChangeInfoComponent.vue";
-import apiService from "@/services/ApiService";
 
-apiService.user.updateUser(0, {
-  email: 'kamker',
-});
 </script>
 
 <style scoped>
 @import "../styles/BasePage.css";
 
-.warning {
-  color: red;
-  font-size: 75%;
-}
-
 .row {
   display: flex;
   flex-direction: row;

From 24d7cb6841839178819c1d6acde1fa37a1c788e4 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 2 Dec 2023 19:03:10 +0100
Subject: [PATCH 22/32] Added form validation to ChangePasswordComponent

---
 src/components/ChangeApiKeyComponent.vue   |  30 +++---
 src/components/ChangeInfoComponent.vue     |  40 ++++----
 src/components/ChangePasswordComponent.vue | 109 +++++++++------------
 src/locales/en.json                        |   1 +
 src/utils/validation-schema.ts             |   7 ++
 5 files changed, 86 insertions(+), 101 deletions(-)

diff --git a/src/components/ChangeApiKeyComponent.vue b/src/components/ChangeApiKeyComponent.vue
index 6d155cf0..0de72ea4 100644
--- a/src/components/ChangeApiKeyComponent.vue
+++ b/src/components/ChangeApiKeyComponent.vue
@@ -1,3 +1,15 @@
+<template>
+  <CardComponent :header="t('profile.keyGet')">
+    <div>
+      <p>{{ $t('profile.keyOldRemoved') }}</p>
+      <p>{{apiKeyMessage || '&nbsp;'}}</p>
+    </div>
+    <div style="margin-top: 1rem">
+      <Button severity="danger" :label="t('profile.keyGetNew')" @click="updateApiKey" />
+    </div>
+  </CardComponent>
+</template>
+
 <script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
 import { ref } from "vue";
@@ -5,6 +17,7 @@ import { useAuthStore } from "@sudosos/sudosos-frontend-common";
 import apiService from "@/services/ApiService";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
+import { handleError } from "@/utils/errorUtils";
 
 const authStore = useAuthStore();
 const apiKeyMessage = ref();
@@ -23,26 +36,11 @@ function updateApiKey() {
       });
     }
   }).catch((err) => {
-    //error
-    console.log(err);
+    handleError(err, toast);
   });
 }
-
-
 </script>
 
-<template>
-  <CardComponent :header="t('profile.keyGet')">
-    <div>
-      <p>{{ $t('profile.keyOldRemoved') }}</p>
-      <p>{{apiKeyMessage || '&nbsp;'}}</p>
-    </div>
-    <div style="margin-top: 1rem">
-      <Button severity="danger" :label="t('profile.keyGetNew')" @click="updateApiKey" />
-    </div>
-  </CardComponent>
-</template>
-
 <style scoped>
 
 </style>
diff --git a/src/components/ChangeInfoComponent.vue b/src/components/ChangeInfoComponent.vue
index 233f12ee..f44aebc6 100644
--- a/src/components/ChangeInfoComponent.vue
+++ b/src/components/ChangeInfoComponent.vue
@@ -38,6 +38,7 @@ import { useI18n } from "vue-i18n";
 import { simpleUserDetailsSchema } from "@/utils/validation-schema";
 import { onBeforeMount } from "vue";
 import apiService from "@/services/ApiService";
+import { handleError } from "@/utils/errorUtils";
 
 const toast = useToast();
 const userStore = useUserStore();
@@ -58,32 +59,29 @@ const email = defineComponentBinds('email', {});
 
 onBeforeMount(() => {
   setValues({
-      firstName: userStore.getCurrentUser.user.firstName,
-      lastName: userStore.getCurrentUser.user.lastName,
-      email: userStore.getCurrentUser.user.email,
+      firstName: userStore.getCurrentUser.user?.firstName,
+      lastName: userStore.getCurrentUser.user?.lastName,
+      email: userStore.getCurrentUser.user?.email,
     }
   );
 });
 const changeUserInfo = handleSubmit(async (values) => {
-  apiService.user.updateUser(userStore.getCurrentUser.user.id, {
-    firstName: values.firstName,
-    lastName: values.lastName,
-    email: values.email,
-  }).then(() => {
-    toast.add({
-      severity: "success",
-      summary: "Success",
-      detail: `${t('userInfoUpdated')}`,
-      life: 3000,
+  if (userStore.getCurrentUser.user) {
+    apiService.user.updateUser(userStore.getCurrentUser.user.id, {
+      firstName: values.firstName,
+      lastName: values.lastName,
+      email: values.email,
+    }).then(() => {
+      toast.add({
+        severity: "success",
+        summary: "Success",
+        detail: `${t('userInfoUpdated')}`,
+        life: 3000,
+      });
+    }).catch((err) => {
+      handleError(err, toast);
     });
-  }).catch((err) => {
-    toast.add({
-      severity: "error",
-      summary: "Error",
-      detail: `${err}`,
-      life: 3000,
-    });
-  });
+  }
 });
 
 
diff --git a/src/components/ChangePasswordComponent.vue b/src/components/ChangePasswordComponent.vue
index f1fb8b9d..362c7a55 100644
--- a/src/components/ChangePasswordComponent.vue
+++ b/src/components/ChangePasswordComponent.vue
@@ -1,85 +1,66 @@
+<template>
+  <CardComponent :header="t('profile.changePassword')">
+    <form @submit="changeUserPassword">
+      <div>
+        <p>{{ $t('profile.password') }}</p>
+        <InputText type="password" id="password" :disabled="!isLocal"  v-bind="password"/>
+        <small class="warning">{{errors.password || '&nbsp;'}}</small>
+      </div>
+      <div>
+        <p>{{ $t('profile.passwordConfirm') }}</p>
+        <InputText type="password" id="passwordConfirm" :disabled="!isLocal" v-bind="passwordConfirm"/>
+        <small class="warning">{{errors.passwordConfirm || '&nbsp;'}}</small>
+      </div>
+      <div style="margin-top: 1rem">
+        <Button
+          severity="danger"
+          :disabled="!isLocal"
+          :label="t('profile.passwordUpdate')"
+          type="submit"
+        />
+      </div>
+    </form>
+  </CardComponent>
+</template>
+
 <script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
-import { useField } from "vee-validate";
+import { useForm } from "vee-validate";
 import apiService from "@/services/ApiService";
-import { useAuthStore, useUserStore } from "@sudosos/sudosos-frontend-common";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
-import Password from "primevue/password";
+import { editPasswordSchema } from "@/utils/validation-schema";
 
-const authStore = useAuthStore();
 const toast = useToast();
 const userStore = useUserStore();
 const { t } = useI18n();
+const { defineComponentBinds, handleSubmit, errors } = useForm({
+  validationSchema: editPasswordSchema,
+});
+
+const password = defineComponentBinds('password', {});
+const passwordConfirm = defineComponentBinds('passwordConfirm', {});
 
 let isLocal = false;
 if(userStore.getCurrentUser.user) {
   isLocal = (userStore.getCurrentUser.user.type == "LOCAL_USER");
 }
 
-
-//TODO make password greyed when using m account
-const { value: inputPassword, errorMessage: inputPasswordError }
-  = useField('inputPassword', validatePassword);
-const { value: confirmPassword, errorMessage: confirmPasswordError }
-  = useField('confirmPassword', validateConfirmPassword);
-
-
-function validatePassword(checkPassword: string) {
-  if (checkPassword.length <8) {
-    //TODO set password requirements
-    return t('profile.Password should');
-  }
-  return true;
-}
-
-function validateConfirmPassword(checkConfirmPassword: string) {
-  if (checkConfirmPassword != inputPassword.value) {
-    return t('profile.The passwords to not match up');
-  }
-  return true;
-}
-
-function changePassword() {
-  if (validatePassword(inputPassword.value) == true && validateConfirmPassword(confirmPassword.value) == true) {
-    authStore.updateUserLocalPassword(inputPassword.value, apiService).then(() => {
-      inputPassword.value = "";
-      confirmPassword.value = "";
-      toast.add({ severity: "success", summary: "success", detail: "" });
-    }).catch((err) => {
-      console.error(err);
-    });
-  } else {
-    toast.add({ severity: "error", summary: "failed", detail: t('profile.Incorrect passwords submitted'), life: 3000 });
-  }
-}
+const changeUserPassword = handleSubmit(async (values) => {
+  if (userStore.getCurrentUser.user) {
+    apiService.user.updateUserLocalPassword(
+      userStore.getCurrentUser.user?.id, {password: values.password}).then(() => {
+      toast.add({
+        severity: "success",
+        summary: "Success",
+        detail: `${t('passwordUpdated')}`,
+        life: 3000,
+      });});}});
 
 </script>
 
-<template>
-  <CardComponent :header="t('profile.changePassword')">
-    <div>
-      <div>
-        <p>{{ $t('profile.password') }}</p>
-        <Password :disabled="!isLocal"  v-model="inputPassword"/>
-        <small class="warning">{{inputPasswordError || '&nbsp;'}}</small>
-      </div>
-      <div>
-        <p>{{ $t('profile.passwordConfirm') }}</p>
-        <Password :disabled="!isLocal" v-model="confirmPassword"/>
-        <small class="warning">{{confirmPasswordError || '&nbsp;'}}</small>
-      </div>
-      <div style="margin-top: 1rem">
-        <Button
-          severity="danger"
-          :disabled="!isLocal"
-          :label="t('profile.passwordUpdate')"
-          @click="changePassword"
-        />
-      </div>
-    </div>
-  </CardComponent>
-</template>
+
 
 <style scoped>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 3e306d36..081bbc38 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -485,6 +485,7 @@
     "user is active": "user is active",
     "Update user information": "Update user information",
     "userInfoUpdated": "User information successfully updated",
+    "passwordUpdated": "Password successfully updated",
     "Reset password": "Reset password",
     "Password": "Password",
     "Password should": "Password should contain at least 8 characters",
diff --git a/src/utils/validation-schema.ts b/src/utils/validation-schema.ts
index ad63873d..6a3c5873 100644
--- a/src/utils/validation-schema.ts
+++ b/src/utils/validation-schema.ts
@@ -18,3 +18,10 @@ export const simpleUserDetailsSchema = toTypedSchema(
           email: yup.string().email(),
   })
 );
+
+export const editPasswordSchema = toTypedSchema(
+  yup.object({
+    password: yup.string().required(),
+    passwordConfirm: yup.string().required().oneOf([yup.ref('password')], 'Passwords must match'),
+  })
+);

From 4f70d58b26b76ff029a462f52acd570eee5cee51 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 2 Dec 2023 19:43:09 +0100
Subject: [PATCH 23/32] Added form validation to ChangePinComponent

---
 src/components/ChangePinComponent.vue | 107 ++++++++++++--------------
 src/utils/validation-schema.ts        |  10 +++
 2 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/src/components/ChangePinComponent.vue b/src/components/ChangePinComponent.vue
index 6c69d52f..7bee713a 100644
--- a/src/components/ChangePinComponent.vue
+++ b/src/components/ChangePinComponent.vue
@@ -1,76 +1,65 @@
+<template>
+  <CardComponent :header="$t('profile.pinChange')">
+    <form id="update-pin-form" @submit="changeUserPin">
+      <div>
+        <p>{{ $t('profile.pinNew')}}</p>
+        <InputText v-bind="pin" />
+        <small class="warning">{{errors.pin || '&nbsp;'}}</small>
+      </div>
+      <div>
+        <p>{{ $t('profile.pinConfirm')}}</p>
+        <InputText v-bind="pinConfirm" />
+        <small class="warning">{{errors.pinConfirm || '&nbsp;'}}</small>
+      </div>
+      <div style="margin-top: 1rem">
+        <Button severity="danger" type="submit" :label="t('profile.pinChange')" />
+      </div>
+    </form>
+  </CardComponent>
+</template>
+
 <script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
-import PinComponent from "@/components/PinComponent.vue";
-import { useField } from "vee-validate";
+import { useForm } from "vee-validate";
 import apiService from "@/services/ApiService";
-import { useAuthStore } from "@sudosos/sudosos-frontend-common";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
+import { editPinSchema } from "@/utils/validation-schema";
+import { handleError } from "@/utils/errorUtils";
 
-const authStore = useAuthStore();
+const userStore = useUserStore();
 const toast = useToast();
 const { t } = useI18n();
+const { defineComponentBinds, handleSubmit, errors } = useForm({
+  validationSchema: editPinSchema,
+});
 
+const pin = defineComponentBinds('pin', {});
+const pinConfirm = defineComponentBinds('pinConfirm', {});
 
-const { value: inputPin, errorMessage: inputPinError } = useField('inputPin', validatePin);
-const { value: confirmPin, errorMessage: confirmPinError } = useField('confirmPin', validateConfirmPin);
-
-
-
-//show warning message if pin is filled in and not 4 digits
-function validatePin(checkInputPin: string){
-  if (checkInputPin.length != 4 && !RegExp('\\d{4}').test(checkInputPin)) {
-    return t('profile.pinIncorrectLength');
-  }
-  return true;
-};
-
-//show warning message if conformation pin does not fit pin
-function validateConfirmPin(checkConfirmPin: string){
-  if (checkConfirmPin != inputPin.value) {
-    return t('profile.pinNotMatch');
+const changeUserPin = handleSubmit(async (values) => {
+  if (userStore.getCurrentUser.user) {
+    apiService.user.updateUserPin(
+      userStore.getCurrentUser.user.id,
+      { pin: values.pinConfirm })
+      .then(() => {
+        toast.add({
+          severity: "success",
+          summary: "Success",
+          detail: `${t('passwordUpdated')}`,
+          life: 3000,
+        });
+      })
+      .catch((err) => {
+        handleError(err, toast);
+      });
   }
-  return true;
-}
-
-
-function changePinCode() {
-  if (validatePin(inputPin.value) == true && validateConfirmPin(confirmPin.value) == true) {
-    authStore.updateUserPin(inputPin.value, apiService).then(() => {
-      //   Succes!
-      inputPin.value="";
-      confirmPin.value="";
-      toast.add({ severity: "success", summary: "success", detail: t('profile.pinUpdated')  });
-    }).catch((err) => {
-      // Error
-      console.error(err);
-    });
-  } else {
-    toast.add({ severity: "error", summary: "failed", detail: t('profile.pinIncorrect'), life: 3000 });
-  }
-}
+});
 
 </script>
 
-<template>
-  <CardComponent :header="$t('profile.pinChange')">
-    <div id="update-pin-form">
-      <div>
-        <p>{{ $t('profile.pinNew')}}</p>
-        <PinComponent v-model="inputPin" />
-        <small class="warning">{{inputPinError || '&nbsp;'}}</small>
-      </div>
-      <div>
-        <p>{{ $t('profile.pinConfirm')}}</p>
-        <PinComponent v-model="confirmPin" />
-        <small class="warning">{{confirmPinError || '&nbsp;'}}</small>
-      </div>
-      <div style="margin-top: 1rem">
-        <Button severity="danger" @click="changePinCode" :label="t('profile.pinChange')" />
-      </div>
-    </div>
-  </CardComponent>
-</template>
+
 
 <style scoped>
 
diff --git a/src/utils/validation-schema.ts b/src/utils/validation-schema.ts
index 6a3c5873..b24bb058 100644
--- a/src/utils/validation-schema.ts
+++ b/src/utils/validation-schema.ts
@@ -25,3 +25,13 @@ export const editPasswordSchema = toTypedSchema(
     passwordConfirm: yup.string().required().oneOf([yup.ref('password')], 'Passwords must match'),
   })
 );
+
+export const editPinSchema = toTypedSchema(
+  yup.object({
+    pin: yup.string().required()
+      .matches(/^[0-9]+$/, "Must be only digits")
+      .min(4, 'Must be exactly 4 digits')
+      .max(4, 'Must be exactly 4 digits'),
+    pinConfirm: yup.string().required().oneOf([yup.ref('pin')], 'PINs must match'),
+  })
+);

From 67b568e42d4d346e37c38741359f63be614cb534 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 2 Dec 2023 19:56:24 +0100
Subject: [PATCH 24/32] Added PrimeFlex

Reworked styling of ProfileView
---
 package-lock.json         |  6 ++++++
 package.json              |  1 +
 src/main.ts               |  2 ++
 src/views/ProfileView.vue | 30 ++++++++++--------------------
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1cd9ece8..3c74c7e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "jwt-decode": "^3.1.2",
         "marked": "^9.1.5",
         "pinia": "^2.1.3",
+        "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
         "primevue": "^3.30.1",
         "sass": "^1.63.6",
@@ -3289,6 +3290,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/primeflex": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.3.1.tgz",
+      "integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ=="
+    },
     "node_modules/primeicons": {
       "version": "6.0.1",
       "license": "MIT"
diff --git a/package.json b/package.json
index 60e7406a..108b5b12 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "jwt-decode": "^3.1.2",
     "marked": "^9.1.5",
     "pinia": "^2.1.3",
+    "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primevue": "^3.30.1",
     "sass": "^1.63.6",
diff --git a/src/main.ts b/src/main.ts
index 6e023656..32139ee6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -28,6 +28,8 @@ import en from "./locales/en.json";
 import nl from "./locales/nl.json";
 import ToastService from "primevue/toastservice";
 import Toast from "primevue/toast";
+import 'primeflex/primeflex.css';
+
 const app = createApp(App);
 
 
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 732af8d0..3ee9c17c 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,14 +1,18 @@
 <template>
   <div class="page-container">
     <div class="page-title">{{ $t('profile.myProfile')}}</div>
-    <div class="container">
-      <div class ="row">
+    <div class="grid">
+      <div class="col-6">
           <ChangePinComponent />
-          <ChangePasswordComponent />
       </div>
-      <div class="row">
-          <ChangeApiKeyComponent />
-          <ChangeInfoComponent />
+      <div class="col-6">
+        <ChangePasswordComponent />
+      </div>
+      <div class="col-6">
+        <ChangeApiKeyComponent />
+      </div>
+      <div class="col-6">
+        <ChangeInfoComponent />
       </div>
     </div>
   </div>
@@ -24,18 +28,4 @@ import ChangeInfoComponent from "@/components/ChangeInfoComponent.vue";
 
 <style scoped>
 @import "../styles/BasePage.css";
-
-.row {
-  display: flex;
-  flex-direction: row;
-  width: 75%;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-}
-
 </style>

From 0815497f0366e7859c261e5e61efd9c73418ed7d Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 2 Dec 2023 20:06:34 +0100
Subject: [PATCH 25/32] Removed unnecessary PinComponent

---
 src/components/PinComponent.vue | 19 -------------------
 1 file changed, 19 deletions(-)
 delete mode 100644 src/components/PinComponent.vue

diff --git a/src/components/PinComponent.vue b/src/components/PinComponent.vue
deleted file mode 100644
index 87a00722..00000000
--- a/src/components/PinComponent.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-<InputText
-  type="password"
-  autocomplete="off"
-  :value="modelValue"
-  @input="$emit('update:modelValue', $event.target.value)"
-/>
-</template>
-
-<script setup lang="ts">
-import InputText from "primevue/inputtext";
-
-defineProps(['modelValue']);
-defineEmits(['update:modelValue']);
-
-</script>
-<style scoped>
-
-</style>

From 7b795e8988a6f37970c7fc126b68acb756d09bb8 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 2 Dec 2023 20:09:57 +0100
Subject: [PATCH 26/32] Added proper styling to child components of ProfileView

---
 src/components/ChangeInfoComponent.vue     | 11 +++++++----
 src/components/ChangePasswordComponent.vue |  9 ++++++---
 src/components/ChangePinComponent.vue      | 11 ++++++-----
 src/views/ProfileView.vue                  |  2 ++
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/ChangeInfoComponent.vue b/src/components/ChangeInfoComponent.vue
index f44aebc6..d36d828f 100644
--- a/src/components/ChangeInfoComponent.vue
+++ b/src/components/ChangeInfoComponent.vue
@@ -2,17 +2,17 @@
   <CardComponent :header="$t('profile.changeUserInfo')">
     <form @submit="changeUserInfo">
       <small v-if="!isLocal">{{ $t('profile.notManagedThroughSudoSOS') }}</small>
-      <div>
+      <div class="field">
         <p>{{ $t('profile.firstName')}}</p>
         <InputText :disabled="!isLocal"  v-bind="firstName"/>
         <small class="warning">{{errors.firstName || '&nbsp;'}}</small>
       </div>
-      <div>
+      <div class="field">
         <p>{{ $t('profile.lastName')}}</p>
         <InputText :disabled="!isLocal"  v-bind="lastName"/>
         <small class="warning">{{errors.lastName || '&nbsp;'}}</small>
       </div>
-      <div>
+      <div class="field">
         <p>{{ $t('profile.emailAddress')}}</p>
         <InputText :disabled="!isLocal" v-bind="email"/>
         <small class="warning">{{errors.email || '&nbsp;'}}</small>
@@ -88,5 +88,8 @@ const changeUserInfo = handleSubmit(async (values) => {
 </script>
 
 <style scoped>
-
+.warning {
+  color: red; /* Set the error text color to red */
+  margin-top: 4px; /* Add some space between the input and the error text */
+}
 </style>
diff --git a/src/components/ChangePasswordComponent.vue b/src/components/ChangePasswordComponent.vue
index 362c7a55..349f809c 100644
--- a/src/components/ChangePasswordComponent.vue
+++ b/src/components/ChangePasswordComponent.vue
@@ -1,12 +1,12 @@
 <template>
   <CardComponent :header="t('profile.changePassword')">
     <form @submit="changeUserPassword">
-      <div>
+      <div class="field">
         <p>{{ $t('profile.password') }}</p>
         <InputText type="password" id="password" :disabled="!isLocal"  v-bind="password"/>
         <small class="warning">{{errors.password || '&nbsp;'}}</small>
       </div>
-      <div>
+      <div class="field">
         <p>{{ $t('profile.passwordConfirm') }}</p>
         <InputText type="password" id="passwordConfirm" :disabled="!isLocal" v-bind="passwordConfirm"/>
         <small class="warning">{{errors.passwordConfirm || '&nbsp;'}}</small>
@@ -63,5 +63,8 @@ const changeUserPassword = handleSubmit(async (values) => {
 
 
 <style scoped>
-
+.warning {
+  color: red; /* Set the error text color to red */
+  margin-top: 4px; /* Add some space between the input and the error text */
+}
 </style>
diff --git a/src/components/ChangePinComponent.vue b/src/components/ChangePinComponent.vue
index 7bee713a..b77b9e2f 100644
--- a/src/components/ChangePinComponent.vue
+++ b/src/components/ChangePinComponent.vue
@@ -1,12 +1,12 @@
 <template>
   <CardComponent :header="$t('profile.pinChange')">
     <form id="update-pin-form" @submit="changeUserPin">
-      <div>
+      <div class="field">
         <p>{{ $t('profile.pinNew')}}</p>
         <InputText v-bind="pin" />
         <small class="warning">{{errors.pin || '&nbsp;'}}</small>
       </div>
-      <div>
+      <div class="field">
         <p>{{ $t('profile.pinConfirm')}}</p>
         <InputText v-bind="pinConfirm" />
         <small class="warning">{{errors.pinConfirm || '&nbsp;'}}</small>
@@ -59,8 +59,9 @@ const changeUserPin = handleSubmit(async (values) => {
 
 </script>
 
-
-
 <style scoped>
-
+.warning {
+  color: red; /* Set the error text color to red */
+  margin-top: 4px; /* Add some space between the input and the error text */
+}
 </style>
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 3ee9c17c..101bd114 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -28,4 +28,6 @@ import ChangeInfoComponent from "@/components/ChangeInfoComponent.vue";
 
 <style scoped>
 @import "../styles/BasePage.css";
+
+
 </style>

From 3c0df6e8106a9eb8836ecb149e021389412f6284 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 2 Dec 2023 20:34:41 +0100
Subject: [PATCH 27/32] Used proper aliasing for routes

---
 src/router/index.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 1c5d7ede..b369083e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -45,12 +45,8 @@ const router = createRouter({
         {
           path: '',
           component: LoginView,
-          name: 'login'
-        },
-        {
-          path: '/login',
-          component: LoginView,
-          name: 'gewis-login',
+          name: 'login',
+          alias: ['/login'],
         },
         {
           path: '/passwordreset',

From fcb5203031b04fa3da5394d743517582c3b18d94 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Wed, 6 Dec 2023 13:03:43 +0100
Subject: [PATCH 28/32] Added requested features from Samuel Oosterholt

Removed console log statement

Re-added issue/todo to ProductsContainersView
---
 src/views/LoginView.vue              | 1 -
 src/views/ProductsContainersView.vue | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 9a5068ad..075b6d00 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -97,7 +97,6 @@ const password = loginForm.defineComponentBinds('password');
 const route = useRoute();
 
 onBeforeMount(() => {
-  console.log(route.query.token);
   if (route.query.token !== undefined) {
     const token = route.query.token as string;
     authStore.gewisWebLogin(uuid(), token, apiService).catch(() => {
diff --git a/src/views/ProductsContainersView.vue b/src/views/ProductsContainersView.vue
index 7c6538db..c73a1749 100644
--- a/src/views/ProductsContainersView.vue
+++ b/src/views/ProductsContainersView.vue
@@ -168,7 +168,8 @@ onMounted(async () => {
   const vatGroupsResp = await apiService.vatGroups.getAllVatGroups();
   vatGroups.value = vatGroupsResp.data.records;
 
-
+  // TODO: Put getAllContainers into container store and take care of pagination
+  // See: https://github.com/GEWIS/sudosos-frontend-vue3/issues/51
   await apiService.container.getAllContainers(500, 0).then((resp: any) => {
     (resp.data.records as ContainerResponse[]).forEach((container) =>
       apiService.container.getSingleContainer(container.id).then((res) => {

From 1af9a2f0a77d9eccc5d41976ef7de8f292e81c6a Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Wed, 6 Dec 2023 13:06:57 +0100
Subject: [PATCH 29/32] Added changes requested by Samuel Oosterholt

Added .catch statement to ChangePasswordcomponent api call
---
 src/components/ChangePasswordComponent.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ChangePasswordComponent.vue b/src/components/ChangePasswordComponent.vue
index 349f809c..be9a3661 100644
--- a/src/components/ChangePasswordComponent.vue
+++ b/src/components/ChangePasswordComponent.vue
@@ -31,6 +31,7 @@ import { useUserStore } from "@sudosos/sudosos-frontend-common";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
 import { editPasswordSchema } from "@/utils/validation-schema";
+import { handleError } from "@/utils/errorUtils";
 
 const toast = useToast();
 const userStore = useUserStore();
@@ -50,13 +51,13 @@ if(userStore.getCurrentUser.user) {
 const changeUserPassword = handleSubmit(async (values) => {
   if (userStore.getCurrentUser.user) {
     apiService.user.updateUserLocalPassword(
-      userStore.getCurrentUser.user?.id, {password: values.password}).then(() => {
+      userStore.getCurrentUser.user?.id, { password: values.password }).then(() => {
       toast.add({
         severity: "success",
         summary: "Success",
         detail: `${t('passwordUpdated')}`,
         life: 3000,
-      });});}});
+      });}).catch((err) => handleError(err, toast));}});
 
 </script>
 

From 8668a7a952b7a21ffe7194dd03c0ec6c443ae4a4 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Mon, 11 Dec 2023 20:04:14 +0100
Subject: [PATCH 30/32] Merged main into feature/profile

- Fixed navbar items sometimes still having background color
---
 src/components/TopNavbar.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/TopNavbar.vue b/src/components/TopNavbar.vue
index 51002dc5..2aa39554 100644
--- a/src/components/TopNavbar.vue
+++ b/src/components/TopNavbar.vue
@@ -202,8 +202,9 @@ nav {
   }
 }
 :deep(.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content) {
-      background-color: transparent;
+      background-color: transparent!important;
 }
+
 :deep(.p-menuitem-text){
   color: white;
   font-family: Raleway, sans-serif;
@@ -214,8 +215,9 @@ nav {
 
 // Define normal top-level menu-items
 :deep(.p-menuitem) {
+  background-color: transparent;
   &.p-focus, &.p-focus, &.p-highlight > .p-menuitem-content {
-
+    background-color: transparent;
     > a > * {
       color: hsla(0, 0%, 100%, .75);
     }

From d290c1f2a30a84b6037381aeeccf6da3d9b3e1c0 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Mon, 11 Dec 2023 20:21:41 +0100
Subject: [PATCH 31/32] Fixed right navbar

---
 src/components/TopNavbar.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/TopNavbar.vue b/src/components/TopNavbar.vue
index 2aa39554..ba6cea7a 100644
--- a/src/components/TopNavbar.vue
+++ b/src/components/TopNavbar.vue
@@ -25,6 +25,18 @@
         <template #start>
           <img id="bier" src="../assets/img/bier.png"/>
         </template>
+        <template #item="{ item, props, hasSubmenu }">
+          <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a :href="href" v-bind="props.action" @click="navigate">
+              <span class="p-menuitem-text">{{ item.label }}</span>
+            </a>
+          </router-link>
+          <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span class="p-menuitem-text">{{ item.label }}</span>
+            <span v-if="item.icon" :class="item.icon" />
+            <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
+          </a>
+        </template>
       </Menubar>
     </nav>
   </div>
@@ -137,7 +149,7 @@ const rightItems = ref([
     items: [
       {
         label: t('app.Profile'),
-        to: 'profile',
+        route: '/profile',
       },
       {
         label: t('app.Sign out'),
@@ -154,7 +166,7 @@ const rightItems = ref([
     icon: 'pi pi-globe',
     items: [
       {
-        label: () => t('app.Netherlands'),
+        label: t('app.Netherlands'),
         disabled: () => locale.value == 'nl',
         command: () => {
           locale.value = 'nl';
@@ -162,7 +174,7 @@ const rightItems = ref([
         },
       },
       {
-        label: () => t('app.English'),
+        label: t('app.English'),
         disabled: () => locale.value == 'en',
         command: () => {
           locale.value = 'en';

From 1d9f0e25d61a6740901c2889b752f8b68adbfa90 Mon Sep 17 00:00:00 2001
From: Samuel <samuelincognito@gmail.com>
Date: Mon, 11 Dec 2023 20:27:22 +0100
Subject: [PATCH 32/32] Small styling fixes

---
 src/components/ChangeInfoComponent.vue     | 4 ++--
 src/components/ChangePasswordComponent.vue | 2 +-
 src/views/ProfileView.vue                  | 3 ---
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/ChangeInfoComponent.vue b/src/components/ChangeInfoComponent.vue
index d36d828f..2b199849 100644
--- a/src/components/ChangeInfoComponent.vue
+++ b/src/components/ChangeInfoComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <CardComponent :header="$t('profile.changeUserInfo')">
+  <CardComponent :header="$t('profile.changeUserInfo')" :class="{ 'opacity-30': !isLocal}">
     <form @submit="changeUserInfo">
       <small v-if="!isLocal">{{ $t('profile.notManagedThroughSudoSOS') }}</small>
       <div class="field">
@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import CardComponent from "@/components/CardComponent.vue";
-import { useField, useForm } from "vee-validate";
+import { useForm } from "vee-validate";
 import { useUserStore } from "@sudosos/sudosos-frontend-common";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
diff --git a/src/components/ChangePasswordComponent.vue b/src/components/ChangePasswordComponent.vue
index be9a3661..3bd5f25c 100644
--- a/src/components/ChangePasswordComponent.vue
+++ b/src/components/ChangePasswordComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <CardComponent :header="t('profile.changePassword')">
+  <CardComponent :header="t('profile.changePassword')" :class="{ 'opacity-30': !isLocal}">
     <form @submit="changeUserPassword">
       <div class="field">
         <p>{{ $t('profile.password') }}</p>
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 101bd114..9b19143b 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -23,11 +23,8 @@ import ChangePasswordComponent from "@/components/ChangePasswordComponent.vue";
 import ChangePinComponent from "@/components/ChangePinComponent.vue";
 import ChangeApiKeyComponent from "@/components/ChangeApiKeyComponent.vue";
 import ChangeInfoComponent from "@/components/ChangeInfoComponent.vue";
-
 </script>
 
 <style scoped>
 @import "../styles/BasePage.css";
-
-
 </style>