Merge branch 'main' into feature/stripe-integration

package.json

@@ -20,6 +20,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",

src/components/ChangeApiKeyComponent.vue

@@ -0,0 +1,46 @@
+<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";
+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();
+const toast = useToast();
+const { t } = useI18n();
+
+
+function updateApiKey() {
+  authStore.updateUserKey(apiService).then((res) => {
+    //Succes
+    if(res) {
+      toast.add({
+        severity: "success",
+        summary: "Success",
+        detail: `${t('profile.newKey')} \n ${res.key} \n ${t('profile.keyNotSaved')}`
+      });
+    }
+  }).catch((err) => {
+    handleError(err, toast);
+  });
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ChangeInfoComponent.vue

@@ -0,0 +1,95 @@
+<template>
+  <CardComponent :header="$t('profile.changeUserInfo')" :class="{ 'opacity-30': !isLocal}">
+    <form @submit="changeUserInfo">
+      <small v-if="!isLocal">{{ $t('profile.notManagedThroughSudoSOS') }}</small>
+      <div class="field">
+        <p>{{ $t('profile.firstName')}}</p>
+        <InputText :disabled="!isLocal"  v-bind="firstName"/>
+        <small class="warning">{{errors.firstName || '&nbsp;'}}</small>
+      </div>
+      <div class="field">
+        <p>{{ $t('profile.lastName')}}</p>
+        <InputText :disabled="!isLocal"  v-bind="lastName"/>
+        <small class="warning">{{errors.lastName || '&nbsp;'}}</small>
+      </div>
+      <div class="field">
+        <p>{{ $t('profile.emailAddress')}}</p>
+        <InputText :disabled="!isLocal" v-bind="email"/>
+        <small class="warning">{{errors.email || '&nbsp;'}}</small>
+      </div>
+      <div style="margin-top: 1rem">
+        <Button
+          severity="danger"
+          :disabled="!isLocal"
+          :label="$t('profile.updateInfo')"
+          type="submit"
+        />
+      </div>
+    </form>
+  </CardComponent>
+</template>
+
+<script setup lang="ts">
+import CardComponent from "@/components/CardComponent.vue";
+import { 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";
+import { handleError } from "@/utils/errorUtils";
+
+const toast = useToast();
+const userStore = useUserStore();
+const { t } = useI18n();
+
+let isLocal = false;
+if(userStore.getCurrentUser.user) {
+  isLocal = (userStore.getCurrentUser.user.type == "LOCAL_USER");
+}
+
+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) => {
+  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);
+    });
+  }
+});
+
+
+</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>

src/components/ChangePasswordComponent.vue

@@ -0,0 +1,71 @@
+<template>
+  <CardComponent :header="t('profile.changePassword')" :class="{ 'opacity-30': !isLocal}">
+    <form @submit="changeUserPassword">
+      <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 class="field">
+        <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 { useForm } from "vee-validate";
+import apiService from "@/services/ApiService";
+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();
+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");
+}
+
+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,
+      });}).catch((err) => handleError(err, toast));}});
+
+</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>

src/components/ChangePinComponent.vue

@@ -0,0 +1,67 @@
+<template>
+  <CardComponent :header="$t('profile.pinChange')">
+    <form id="update-pin-form" @submit="changeUserPin">
+      <div class="field">
+        <p>{{ $t('profile.pinNew')}}</p>
+        <InputText v-bind="pin" />
+        <small class="warning">{{errors.pin || '&nbsp;'}}</small>
+      </div>
+      <div class="field">
+        <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 { useForm } from "vee-validate";
+import apiService from "@/services/ApiService";
+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 userStore = useUserStore();
+const toast = useToast();
+const { t } = useI18n();
+const { defineComponentBinds, handleSubmit, errors } = useForm({
+  validationSchema: editPinSchema,
+});
+
+const pin = defineComponentBinds('pin', {});
+const pinConfirm = defineComponentBinds('pinConfirm', {});
+
+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);
+      });
+  }
+});
+
+</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>

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,6 +149,7 @@ const rightItems = ref([
     items: [
       {
         label: t('app.Profile'),
+        route: '/profile',
       },
       {
         label: t('app.Sign out'),
@@ -153,15 +166,15 @@ const rightItems = ref([
     icon: 'pi pi-globe',
     items: [
       {
-        label: () => t('app.Netherlands'),
+        label: t('app.Netherlands'),
         disabled: () => locale.value == 'nl',
         command: () => {
           locale.value = 'nl';
           localStorage.setItem('locale', 'nl');
         },
       },
       {
-        label: () => t('app.English'),
+        label: t('app.English'),
         disabled: () => locale.value == 'en',
         command: () => {
           locale.value = 'en';
@@ -201,8 +214,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;
@@ -213,8 +227,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);
     }