Feature/nfc update

apps/dashboard/src/locales/en/common/common.json

@@ -71,6 +71,7 @@
                 "apiKeyChanged": "Successfully changed API key.",
                 "apiKeyDeleted": "Successfully deleted API key.",
                 "passwordUpdated": "Successfully updated password.",
+                "nfcCodeUpdated": "Successfully updated NFC code.",
                 "pinUpdated": "Successfully updated PIN.",
                 "finesNotified": "Successfully notified users.",
                 "finesHandedOut": "Successfully handed out fines.",

apps/dashboard/src/locales/en/modules/user.json

@@ -9,6 +9,7 @@
         "title": "Profile",
         "passwordNew": "New password",
         "passwordConfirm": "Confirm password",
+        "nfcNew": "New NFC Code",
         "pinNew": "New PIN",
         "pinConfirm": "Confirm PIN"
       },
@@ -19,6 +20,7 @@
         "header": "User settings",
         "changePin": "Change PIN",
         "changePassword": "Change password",
+        "changeNFC": "Change NFC code",
         "apiKeys": "API keys",
         "changeApiKey": "Change API key",
         "deleteApiKey": "Delete API key",

apps/dashboard/src/locales/nl/common/common.json

@@ -71,6 +71,7 @@
                 "apiKeyChanged": "API-sleutel succesvol gewijzigd.",
                 "apiKeyDeleted": "API-sleutel succesvol verwijderd.",
                 "passwordUpdated": "Wachtwoord succesvol bijgewerkt.",
+                "nfcCodeUpdated": "NFC code succesvol bijgewerkt.",
                 "pinUpdated": "Pincode succesvol bijgewerkt.",
                 "finesNotified": "Gebruikers succesvol op de hoogte gebracht.",
                 "finesHandedOut": "Boetes succesvol uitgedeeld.",

apps/dashboard/src/locales/nl/modules/user.json

@@ -9,6 +9,7 @@
         "title": "Profiel",
         "passwordNew": "Nieuw wachtwoord",
         "passwordConfirm": "Bevestig wachtwoord",
+        "nfcNew": "Nieuwe NFC Code",
         "pinNew": "Nieuwe PIN",
         "pinConfirm": "Bevestig PIN"
       },
@@ -19,6 +20,7 @@
         "header": "Gebruikersinstellingen",
         "changePin": "PIN wijzigen",
         "changePassword": "Wachtwoord wijzigen",
+        "changeNFC": "NFC code wijzigen",
         "apiKeys": "API-sleutels",
         "changeApiKey": "API-sleutel wijzigen",
         "deleteApiKey": "API-sleutel verwijderen",

apps/dashboard/src/modules/user/components/UserSettingsComponent.vue

@@ -23,6 +23,13 @@
             @click="showPasswordDialog = true"
         />
       </div>
+      <div class="flex flex-row align-items-center w-11">
+        <p class="flex-grow-1 my-1">{{ t('modules.user.settings.changeNFC') }}</p>
+        <i
+            class="pi pi-arrow-up-right text-gray-500 flex align-items-center cursor-pointer"
+            @click="showNFCDialog = true"
+        />
+      </div>
       <Divider />
       <h4 class="mt-0">{{ t('modules.user.settings.apiKeys') }}</h4>
       <div class="flex flex-row align-items-center w-11">
@@ -59,6 +66,15 @@
       <ChangePasswordForm :form="slotProps.form" @submit:success="showPasswordDialog = false"/>
     </template>
   </FormDialog>
+  <FormDialog
+      v-model="showNFCDialog"
+      :form="nfcForm"
+      :header="t('modules.user.settings.changeNFC')"
+  >
+    <template #form="slotProps">
+      <ChangeNFCForm :form="slotProps.form" @submit:success="showNFCDialog = false"/>
+    </template>
+  </FormDialog>
   <ConfirmDialog />
 </template>
 
@@ -72,10 +88,11 @@ import Divider from "primevue/divider";
 import InputSwitch from "primevue/inputswitch";
 import ChangePinForm from "@/modules/user/components/forms/ChangePinForm.vue";
 import FormDialog from "@/components/FormDialog.vue";
-import { editPasswordSchema, editPinSchema } from "@/utils/validation-schema";
+import { editNFCSchema, editPasswordSchema, editPinSchema } from "@/utils/validation-schema";
 import { schemaToForm } from "@/utils/formUtils";
 import FormSection from "@/components/FormSection.vue";
 import ChangePasswordForm from "@/modules/user/components/forms/ChangePasswordForm.vue";
+import ChangeNFCForm from "@/modules/user/components/forms/ChangeNFCForm.vue";
 import { useConfirm } from "primevue/useconfirm";
 import { useToast } from "primevue/usetoast";
 import apiService from "@/services/ApiService";
@@ -90,8 +107,10 @@ const props = defineProps({
 
 const { t } = useI18n();
 const showPasswordDialog = ref(false);
+const showNFCDialog = ref(false);
 const pinForm = schemaToForm(editPinSchema);
 const passwordForm = schemaToForm(editPasswordSchema);
+const nfcForm = schemaToForm(editNFCSchema);
 const editPin = ref(true);
 const confirm = useConfirm();
 const toast = useToast();

apps/dashboard/src/modules/user/components/forms/ChangeNFCForm.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="flex flex-column justify-content-between gap-2">
+    <InputSpan :label="t('modules.user.profile.nfcNew')"
+               :value="form.model.nfcCode.value.value"
+               :attributes="form.model.nfcCode.attr.value"
+               @update:value="form.context.setFieldValue('nfcCode', $event)"
+               id="nfcCode" type="text"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputSpan from "@/components/InputSpan.vue";
+import { useI18n } from "vue-i18n";
+import { type Form, setSubmit } from "@/utils/formUtils";
+import * as yup from "yup";
+import { editNFCSchema } from "@/utils/validation-schema";
+import type { PropType } from "vue";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
+import { useToast } from "primevue/usetoast";
+import apiService from "@/services/ApiService";
+import { handleError } from "@/utils/errorUtils";
+
+const props = defineProps({
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof editNFCSchema>>>,
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+const userStore = useUserStore();
+const toast = useToast();
+const emit = defineEmits(['submit:success', 'submit:error']);
+
+setSubmit(props.form, props.form.context.handleSubmit(async (values) => {
+  if (userStore.getCurrentUser.user) {
+    apiService.user.updateUserNfc(
+        userStore.getCurrentUser.user.id,
+        { nfcCode: values.nfcCode })
+        .then(() => {
+          emit('submit:success', values);
+          toast.add({
+            severity: "success",
+            summary: t('common.toast.success.success'),
+            detail: `${t('common.toast.success.nfcCodeUpdated')}`,
+            life: 3000,
+          });
+          props.form.context.resetForm();
+        })
+        .catch((err) => {
+          emit('submit:error', err);
+          handleError(err, toast);
+        });
+  }
+}));
+</script>
+
+<style scoped lang="scss">
+
+</style>

apps/dashboard/src/utils/validation-schema.ts

@@ -35,6 +35,11 @@ export const editPasswordSchema =
     passwordConfirm: yup.string().required().oneOf([yup.ref('password')], t('common.validation.password.match')),
   });
 
+export const editNFCSchema =
+    yup.object({
+        nfcCode: yup.string().required(),
+    });
+
 export const updateInvoiceSettingsObject = yup.object({
   reference: yup.string().required(),
   date: yup.string().required(),