From 282695ffe39066c970c143ab4caf919edb6a0f84 Mon Sep 17 00:00:00 2001
From: Robin van Dijke <robinvandijke2002@gmail.com>
Date: Wed, 4 Sep 2024 20:27:14 +0200
Subject: [PATCH] refactor(dashboard/user): profile view (#320)

* feat(dashboard/profile-view): started work on concept of user settings component

* feat(dashboard/user): Finalized outer look of user settings card

feat(dashboard/user): added change pin dialog to user settings card

* refactor(dashboard/user): removed change pin component

* feat(dashboard/user): added change pin form

* feat(dashboard/components): added FormSection component

feat(dashboard/user-profile): removed dialog for changing pin, added form section for changing pin

* feat(dashboard/profile-view): created ChangePasswordForm

* feat(dashboard/profile-view): added password change dialog

* feat(dashboard/profile-view): added delete api key and change api key links and confirmation dialogs

* feat(dashboard/profile-view): added extensive data processing logic to user settings component

* feat(dashboard/profile-view): added translations

* feat(dashboard/profile-view): added user info to profile view

* fix(dashboard/user-profile-view): max length for pincode showing dollar sign

fix(dashboard/user-profile-view): cursor not showing pointer on change api key and change password buttons

* feat(common/userstore): Added fetchGewisUser method

* fix(dashboard/user-profile-view): type-check errors
---
 apps/dashboard/.eslintrc.cjs                  |   1 +
 apps/dashboard/src/components/FormSection.vue |  77 +++++++++
 apps/dashboard/src/components/InputSpan.vue   |  18 +-
 apps/dashboard/src/locales/en.json            |  31 +++-
 apps/dashboard/src/locales/nl.json            |  31 +++-
 .../src/modules/user/components/ChangePin.vue |  66 -------
 .../user/components/UserSettingsComponent.vue | 162 ++++++++++++++++++
 .../components/forms/ChangePasswordForm.vue   |  74 ++++++++
 .../user/components/forms/ChangePinForm.vue   |  77 +++++++++
 .../modules/user/views/UserProfileView.vue    |  41 ++---
 apps/dashboard/src/utils/validation-schema.ts |  10 +-
 lib/common/src/stores/user.store.ts           |   8 +-
 12 files changed, 479 insertions(+), 117 deletions(-)
 create mode 100644 apps/dashboard/src/components/FormSection.vue
 delete mode 100644 apps/dashboard/src/modules/user/components/ChangePin.vue
 create mode 100644 apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
 create mode 100644 apps/dashboard/src/modules/user/components/forms/ChangePasswordForm.vue
 create mode 100644 apps/dashboard/src/modules/user/components/forms/ChangePinForm.vue

diff --git a/apps/dashboard/.eslintrc.cjs b/apps/dashboard/.eslintrc.cjs
index 05c45212..263fb743 100644
--- a/apps/dashboard/.eslintrc.cjs
+++ b/apps/dashboard/.eslintrc.cjs
@@ -16,6 +16,7 @@ module.exports = {
         '@typescript-eslint/no-unused-vars': 'off',
         'vue/multi-word-component-names': 'off',
         'vue/no-reserved-component-names': 'off',
+        'no-console': 'error',
       },
     }
     ],
diff --git a/apps/dashboard/src/components/FormSection.vue b/apps/dashboard/src/components/FormSection.vue
new file mode 100644
index 00000000..4366efa2
--- /dev/null
+++ b/apps/dashboard/src/components/FormSection.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="flex flex-column gap-2">
+    <div class="flex flex-row align-items-center">
+      <h4 class="flex-grow-1">{{ header }}</h4>
+      <div class="flex flex-row ">
+        <Button v-if="simpleSave" icon="pi pi-save" class="my-0" @click="toggleEdit(true)" label="Save" ></Button>
+        <Button v-else-if="!edit" icon="pi pi-pencil" class="my-0" @click="toggleEdit(true)" label="Edit" ></Button>
+        <div v-else class="flex flex-row gap-2">
+          <Button icon ="pi pi-check" class="my-0" @click="handleSave" />
+          <Button icon="pi pi-times" class="my-0" @click="cancel" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <slot :edit="edit" />
+  <Divider class="w-full" v-if="divider" />
+</template>
+
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+import Divider from "primevue/divider";
+import Button from "primevue/button";
+
+const props = defineProps({
+  header: {
+    type: String,
+    required: true
+  },
+  enableEdit: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  modelValue: {
+    type: Boolean,
+    required: false,
+  },
+  divider: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  simpleSave: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'save', 'cancel']);
+
+const edit = ref(props.modelValue);
+const toggleEdit = (value: boolean) => {
+  edit.value = value;
+  emit('update:modelValue', value);
+};
+
+const cancel = () => {
+  emit('cancel');
+  toggleEdit(false);
+};
+
+const handleSave = () => {
+  emit('save');
+  toggleEdit(false);
+};
+
+onMounted(() => {
+  if (props.simpleSave) {
+    toggleEdit(true);
+  }
+});
+</script>
+
+<style scoped>
+
+</style>
diff --git a/apps/dashboard/src/components/InputSpan.vue b/apps/dashboard/src/components/InputSpan.vue
index b08e1e1d..7f498fca 100644
--- a/apps/dashboard/src/components/InputSpan.vue
+++ b/apps/dashboard/src/components/InputSpan.vue
@@ -46,6 +46,22 @@
                 v-model="internalValue as number"
                 :placeholder="placeholder"
                 :disabled="disabled"/>
+
+      <InputText v-if="type === 'pin'"
+                 class="w-3"
+                 size="small"
+                 type="password"
+                 :placeholder="placeholder"
+                 v-model="internalValue"
+                 v-bind="attributes"
+                 :disabled="disabled"/>
+      <InputText v-if="type === 'password'"
+                 class="w-5"
+                 type="password"
+                 :placeholder="placeholder"
+                 v-model="internalValue"
+                 v-bind="attributes"
+                 :disabled="disabled"/>
     </span>
     <div class="flex justify-content-end">
       <ErrorSpan :error="errors"/>
@@ -105,7 +121,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:value']);
 
-const stringInputs = ['text', 'textarea'];
+const stringInputs = ['text', 'textarea', 'pin', 'password'];
 
 const numberInputs = ['currency', 'number', 'usertype', 'percentage'];
 const booleanInputs = ['boolean'];
diff --git a/apps/dashboard/src/locales/en.json b/apps/dashboard/src/locales/en.json
index e8338cb0..e9ccf7c0 100644
--- a/apps/dashboard/src/locales/en.json
+++ b/apps/dashboard/src/locales/en.json
@@ -244,7 +244,8 @@
     "pinChange": "Change pin code",
     "pinConfirm": "Confirm new pin code",
     "pinNew": "New pin code",
-    "updateInfo": "Update user information"
+    "updateInfo": "Update user information",
+    "passwordNew": "New password"
   },
   "quickOverview": {
     "quickOverviewMessage": "Show this at the bar so we can help you faster",
@@ -277,7 +278,12 @@
     "waiveFinesSuccess": "Successfully waived fines.",
     "waiveFinesRejected": "Canceled waiving fines.",
     "canceled": "Canceled",
-    "userUpdated": "Successfully updated user."
+    "userUpdated": "Successfully updated user.",
+    "pinUpdated": "Successfully updated pin.",
+    "dataAnalysisChanged": "Successfully changed data analysis preference.",
+    "apiKeyChanged": "Successfully changed API key.",
+    "apiKeyDeleted": "Successfully deleted API key.",
+    "passwordUpdated": "Successfully changed password."
   },
   "termsOfService": {
     "acceptFirst": "Accept the Terms of Service",
@@ -329,6 +335,19 @@
     "userInfoUpdated": "User information successfully updated",
     "userInformation": "User information"
   },
+  "userSettings": {
+    "userSettings": "User settings",
+    "changeCredentials": "Change credentials",
+    "changePin": "Change pin",
+    "changePassword": "Change password",
+    "apiKeys": "API keys",
+    "changeApiKey": "Change API key",
+    "deleteApiKey": "Delete API key",
+    "preferences": "Preferences",
+    "dataAnalysis": "Extensive Data Analysis",
+    "confirmChangeApiKey": "Are you sure you want to change your API key? This cannot be undone!",
+    "confirmDeleteApiKey": "Are you sure you want to delete your API key? This cannot be undone!"
+  },
   "contact": {
     "Contact": "Contact",
     "Main contact": "Main contact",
@@ -342,7 +361,7 @@
   },
   "validation": {
     "number": {
-      "min": "This field must be greater than ${min}"
+      "min": "This field must be greater than {min}"
     },
     "password": {
       "match": "Passwords must match."
@@ -353,9 +372,9 @@
     },
     "required": "This field is required",
     "string": {
-      "exact": "This field must be exactly ${len} characters",
-      "max": "This field can't be greater than ${max} characters",
-      "min": "This field must be at least ${min} characters"
+      "exact": "This field must be exactly {len} characters",
+      "max": "This field can't be greater than {max} characters",
+      "min": "This field must be at least {min} characters"
     }
   },
   "tooltip": {
diff --git a/apps/dashboard/src/locales/nl.json b/apps/dashboard/src/locales/nl.json
index a0148bd2..877b52f2 100644
--- a/apps/dashboard/src/locales/nl.json
+++ b/apps/dashboard/src/locales/nl.json
@@ -249,7 +249,8 @@
     "pinChange": "Verander PIN code",
     "pinConfirm": "Bevestig nieuwe PIN code",
     "pinNew": "Nieuwe PIN code",
-    "updateInfo": "Update gebruikersinformatie"
+    "updateInfo": "Update gebruikersinformatie",
+    "passwordNew": "Nieuw wachtwoord"
   },
   "quickOverview": {
     "quickOverviewMessage": "Laat dit aan de bar zien zodat we je sneller kunnen helpen.",
@@ -278,7 +279,12 @@
     "waiveFinesSuccess": "Boetes zijn succesvol kwijtgescholden.",
     "waiveFinesRejected": "Boetes zijn succesvol afgewezen.",
     "canceled": "Geannuleerd",
-    "userUpdated": "Gebruiker is succesvol geüpdatet."
+    "userUpdated": "Gebruiker is succesvol geüpdatet.",
+    "pinUpdated": "Pincode is succesvol geüpdatet.",
+    "dataAnalysisChanged": "Extensieve dataverwerking is succesvol gewijzigd.",
+    "apiKeyChanged": "API-sleutel is succesvol gewijzigd.",
+    "apiKeyDeleted": "API-sleutel is succesvol verwijderd.",
+    "passwordUpdated": "Wachtwoord is succesvol gewijzigd."
   },
   "termsOfService": {
     "acceptFirst": "Accepteer de Voorwaarden",
@@ -330,9 +336,22 @@
     "userInfoUpdated": "Profiel is succesvol aangepast",
     "userInformation": "Gebruikersinformatie"
   },
+  "userSettings": {
+    "userSettings": "Gebruikersinstellingen",
+    "changeCredentials": "Wijzig inloggegevens",
+    "changePin": "Wijzig pincode",
+    "changePassword": "Wijzig wachtwoord",
+    "apiKeys": "API-sleutels",
+    "changeApiKey": "Wijzig API-sleutel",
+    "deleteApiKey": "Verwijder API-sleutel",
+    "preferences": "Voorkeuren",
+    "dataAnalysis": "Uitgebreide Data Analyse",
+    "confirmChangeApiKey": "Weet je zeker dat je de API-sleutel wilt wijzigen? Dit kan niet ongedaan worden gemaakt!",
+    "confirmDeleteApiKey": "Weet je zeker dat je de API-sleutel wilt verwijderen? Dit kan niet ongedaan worden gemaakt!"
+  },
   "validation": {
     "number": {
-      "min": "Dit veld moet groter zijn dan ${min}"
+      "min": "Dit veld moet groter zijn dan {min}"
     },
     "password": {
       "match": "Wachtwoorden moeten overeenkomen."
@@ -343,9 +362,9 @@
     },
     "required": "Dit veld is verplicht",
     "string": {
-      "exact": "Dit veld moet precies ${len} tekens bevatten.",
-      "max": "Dit veld mag maximaal ${max} tekens bevatten.",
-      "min": "Dit veld moet minimaal ${min} tekens bevatten."
+      "exact": "Dit veld moet precies {len} tekens bevatten.",
+      "max": "Dit veld mag maximaal {max} tekens bevatten.",
+      "min": "Dit veld moet minimaal {min} tekens bevatten."
     }
   },
   "tooltip": {
diff --git a/apps/dashboard/src/modules/user/components/ChangePin.vue b/apps/dashboard/src/modules/user/components/ChangePin.vue
deleted file mode 100644
index 9185e793..00000000
--- a/apps/dashboard/src/modules/user/components/ChangePin.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <CardComponent :header="t('profile.pinChange')">
-    <form id="update-pin-form" @submit="changeUserPin">
-      <div class="field">
-        <p>{{ t('profile.pinNew')}}</p>
-        <InputText type="password" v-bind="pin" />
-        <small class="warning">{{errors.pin || '&nbsp;'}}</small>
-      </div>
-      <div class="field">
-        <p>{{ t('profile.pinConfirm')}}</p>
-        <InputText type="password" v-bind="pinConfirm" />
-        <small class="warning">{{errors.pinConfirm || '&nbsp;'}}</small>
-      </div>
-      <div style="margin-top: 1rem" class="flex justify-content-end">
-        <Button 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('userDetails.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>
diff --git a/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue b/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
new file mode 100644
index 00000000..180ea167
--- /dev/null
+++ b/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
@@ -0,0 +1,162 @@
+<template>
+  <CardComponent
+      :header="t('userSettings.userSettings')"
+      :func="undefined"
+      :action="undefined"
+      class="w-full md:w-5"
+  >
+    <div class="flex flex-column">
+      <FormSection
+          :header="t('userSettings.changePin')"
+          @cancel="pinForm.context.resetForm"
+          @save="pinForm.submit"
+          :enableEdit="true"
+          :simpleSave="true"
+          @update:modelValue="editPin = $event"
+          divider>
+        <ChangePinForm :form="pinForm" :edit="editPin"/>
+      </FormSection>
+      <div class="flex flex-row align-items-center w-11">
+        <p class="flex-grow-1 my-1">{{ t('userSettings.changePassword') }}</p>
+        <i
+            class="pi pi-arrow-up-right text-gray-500 flex align-items-center cursor-pointer"
+            @click="showPasswordDialog = true"
+        />
+      </div>
+      <Divider />
+      <h4 class="mt-0">{{ t('userSettings.apiKeys') }}</h4>
+      <div class="flex flex-row align-items-center w-11">
+        <p class="flex-grow-1 my-1">{{ t('userSettings.changeApiKey') }}</p>
+        <i
+            class="pi pi-arrow-up-right text-gray-500 flex align-items-center cursor-pointer"
+            @click="confirmChangeApiKey()"
+        />
+      </div>
+      <div class="flex flex-row align-items-center w-11">
+        <p class="flex-grow-1 my-1">{{ t('userSettings.deleteApiKey') }}</p>
+        <i
+            class="pi pi-arrow-up-right text-gray-500 flex align-items-center cursor-pointer"
+            @click="confirmDeleteApiKey()"
+        />
+      </div>
+      <Divider />
+      <h4 class="mt-0">{{ t('userSettings.preferences') }}</h4>
+      <div class="flex flex-row align-items-center w-11">
+        <p class="flex-grow-1 my-0">{{ t('userSettings.dataAnalysis') }}</p>
+        <InputSwitch
+            @update:modelValue="handleChangeDataAnalysis"
+            v-model="dataAnalysis"
+        />
+      </div>
+    </div>
+  </CardComponent>
+  <FormDialog
+      v-model="showPasswordDialog"
+      :form="passwordForm"
+      :header="t('userSettings.changePassword')"
+  >
+    <template #form="slotProps">
+      <ChangePasswordForm :form="slotProps.form" @submit:success="showPasswordDialog = false"/>
+    </template>
+  </FormDialog>
+  <ConfirmDialog />
+</template>
+
+<script setup lang="ts">
+import { type PropType, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type { UserResponse } from "@sudosos/sudosos-client";
+import { defineProps } from "vue";
+import CardComponent from "@/components/CardComponent.vue";
+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 { schemaToForm } from "@/utils/formUtils";
+import FormSection from "@/components/FormSection.vue";
+import ChangePasswordForm from "@/modules/user/components/forms/ChangePasswordForm.vue";
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+import apiService from "@/services/ApiService";
+import { handleError } from "@/utils/errorUtils";
+
+const props = defineProps({
+  user: {
+    type: Object as PropType<UserResponse>,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const showPasswordDialog = ref(false);
+const pinForm = schemaToForm(editPinSchema);
+const passwordForm = schemaToForm(editPasswordSchema);
+const editPin = ref(true);
+const confirm = useConfirm();
+const toast = useToast();
+const dataAnalysis = ref(props.user.extensiveDataProcessing);
+
+const handleChangeDataAnalysis = (value: boolean) => {
+  apiService.user.updateUser(props.user.id, { extensiveDataProcessing: value })
+      .then(() => {
+        dataAnalysis.value = value;
+        toast.add({
+          severity: "success",
+          summary: t('successMessages.success'),
+          detail: t('successMessages.dataAnalysisChanged'),
+          life: 5000,
+        });
+      })
+      .catch((err) => {
+        handleError(err, toast);
+      });
+};
+
+const confirmChangeApiKey = () => {
+  confirm.require({
+    message: t('userSettings.confirmChangeApiKey'),
+    header: t('userSettings.changeApiKey'),
+    icon: 'pi pi-exclamation-triangle',
+    accept: () => {
+      apiService.user.updateUserKey(props.user.id)
+          .then((res) => {
+            toast.add({
+              severity: "success",
+              summary: t('successMessages.success'),
+              detail: `${t('successMessages.apiKeyChanged')} \n ${res.data.key}`,
+              life: 5000,
+            });
+          })
+          .catch((err) => {
+            handleError(err, toast);
+          });
+    },
+  });
+};
+
+const confirmDeleteApiKey = () => {
+  confirm.require({
+    message: t('userSettings.confirmDeleteApiKey'),
+    header: t('userSettings.deleteApiKey'),
+    icon: 'pi pi-exclamation-triangle',
+    accept: () => {
+      apiService.user.deleteUserKey(props.user.id)
+          .then(() => {
+            toast.add({
+              severity: "success",
+              summary: t('successMessages.success'),
+              detail: t('successMessages.apiKeyDeleted'),
+              life: 5000,
+            });
+          })
+          .catch((err) => {
+            handleError(err, toast);
+          });
+    },
+  });
+};
+
+</script>
+
+<style scoped></style>
diff --git a/apps/dashboard/src/modules/user/components/forms/ChangePasswordForm.vue b/apps/dashboard/src/modules/user/components/forms/ChangePasswordForm.vue
new file mode 100644
index 00000000..2297e6c0
--- /dev/null
+++ b/apps/dashboard/src/modules/user/components/forms/ChangePasswordForm.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="flex flex-column justify-content-between gap-2">
+    <InputSpan :label="t('profile.passwordNew')"
+               :value="form.model.password.value.value"
+               :attributes="form.model.password.attr.value"
+               @update:value="form.context.setFieldValue('password', $event)"
+               :errors="form.context.errors.value.password"
+               id="password" type="password"
+    />
+    <InputSpan :label="t('profile.passwordConfirm')"
+               :value="form.model.passwordConfirm.value.value"
+               :attributes="form.model.passwordConfirm.attr.value"
+               @update:value="form.context.setFieldValue('passwordConfirm', $event)"
+               :errors="form.context.errors.value.passwordConfirm"
+               id="passwordConfirm" type="password"
+    />
+  </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 { editPasswordSchema } 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 editPasswordSchema>>>,
+    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.updateUserLocalPassword(
+        userStore.getCurrentUser.user.id,
+        { password: values.passwordConfirm })
+        .then(() => {
+          emit('submit:success', values);
+          toast.add({
+            severity: "success",
+            summary: t('successMessages.success'),
+            detail: `${t('successMessages.passwordUpdated')}`,
+            life: 3000,
+          });
+          props.form.context.resetForm();
+        })
+        .catch((err) => {
+          emit('submit:error', err);
+          handleError(err, toast);
+        });
+  }
+}));
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/dashboard/src/modules/user/components/forms/ChangePinForm.vue b/apps/dashboard/src/modules/user/components/forms/ChangePinForm.vue
new file mode 100644
index 00000000..c8a64fa8
--- /dev/null
+++ b/apps/dashboard/src/modules/user/components/forms/ChangePinForm.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="flex flex-column justify-content-between gap-2">
+    <InputSpan :label="t('profile.pinNew')"
+               :value="form.model.pin.value.value || ''"
+               :attributes="form.model.pin.attr.value"
+               @update:value="form.context.setFieldValue('pin', $event)"
+               :errors="form.context.errors.value.pin"
+               id="pin" type="pin"
+               :disabled="!edit"
+               autocomplete="new-password"
+    />
+    <InputSpan :label="t('profile.pinConfirm')"
+               :value="form.model.pinConfirm.value.value"
+               :attributes="form.model.pinConfirm.attr.value"
+               @update:value="form.context.setFieldValue('pinConfirm', $event)"
+               :errors="form.context.errors.value.pinConfirm"
+               id="pinConfirm" type="pin"
+               :disabled="!edit"
+    />
+  </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 type { editPinSchema } 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 editPinSchema>>>,
+    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.updateUserPin(
+        userStore.getCurrentUser.user.id,
+        { pin: values.pinConfirm })
+        .then(() => {
+          emit('submit:success', values);
+          toast.add({
+            severity: "success",
+            summary: t('successMessages.success'),
+            detail: `${t('successMessages.pinUpdated')}`,
+            life: 3000,
+          });
+          props.form.context.resetForm();
+        })
+        .catch((err) => {
+          emit('submit:error', err);
+          handleError(err, toast);
+        });
+  }
+}));
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/dashboard/src/modules/user/views/UserProfileView.vue b/apps/dashboard/src/modules/user/views/UserProfileView.vue
index fe2f959a..b146118e 100644
--- a/apps/dashboard/src/modules/user/views/UserProfileView.vue
+++ b/apps/dashboard/src/modules/user/views/UserProfileView.vue
@@ -1,51 +1,31 @@
 <template>
   <div class="page-container">
-    <div class="page-title my-0">
+    <div class="page-title">
       {{ t('profile.myProfile')}}
     </div>
-    <div class="grid">
-      <div class="col-6 md:col-6">
-        <UserInfo :user="gewisUser || current.user as GewisUserResponse"/>
-      </div>
-      <div class="col-6 md:col-6">
-          <ChangePin />
-      </div>
-      <div class="col-6 md:col-6">
-        <ChangePassword />
-      </div>
-      <div class="col-6 md:col-6">
-        <ChangeApiKey v-if="isAdmin"/>
-        <div class="flex flex-row mb-2 align-items-center">
-          <h3 class="mr-3">{{ t('profile.extensiveDataAnalysis') }}</h3>
-          <InputSwitch v-model="dataAnalysis" @update:modelValue="handleChange" />
-        </div>
-      </div>
+    <div class="flex md:flex-row flex-column-reverse justify-content-between gap-4">
+      <UserSettingsComponent :user="current.user as UserResponse"/>
+      <UserInfo :user="gewisUser || current.user as GewisUserResponse"/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import ChangePassword from "@/modules/user/components/ChangePassword.vue";
-import ChangePin from "@/modules/user/components/ChangePin.vue";
-import ChangeApiKey from "@/modules/user/components/ChangeApiKey.vue";
+
 import { useAuthStore, useUserStore } from "@sudosos/sudosos-frontend-common";
 import { storeToRefs } from "pinia";
-import UserInfo from "@/modules/user/components/UserInfo.vue";
-import type {GewisUserResponse, UserResponse} from "@sudosos/sudosos-client";
-import { computed, onMounted, type Ref, ref } from "vue";
-import { UserRole } from "@/utils/rbacUtils";
-import InputSwitch from "primevue/inputswitch";
+import type { GewisUserResponse, UserResponse } from "@sudosos/sudosos-client";
+import { onMounted, type Ref, ref } from "vue";
 import apiService from "@/services/ApiService";
 import router from "@/router";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
 import { handleError } from "@/utils/errorUtils";
+import UserSettingsComponent from "@/modules/user/components/UserSettingsComponent.vue";
+import UserInfo from "@/modules/user/components/UserInfo.vue";
 
 const userStore = useUserStore();
 const authStore = useAuthStore();
-const isAdmin = computed(() => {
-  return userStore.current.rolesWithPermissions.findIndex(r => r.name == UserRole.BOARD) != -1;
-});
 const dataAnalysis: Ref<boolean> = ref(false);
 const { current } = storeToRefs(userStore);
 const toast = useToast();
@@ -57,8 +37,7 @@ onMounted(async () => {
     await router.replace({ path: "/error" });
     return;
   }
-  await userStore.fetchUsers(apiService);
-  gewisUser.value = userStore.getUserById(userStore.current.user.id) as GewisUserResponse;
+  gewisUser.value = await userStore.fetchGewisUser(userStore.current.user.id, apiService);
   dataAnalysis.value = userStore.getUserById(userStore.current.user.id)?.extensiveDataProcessing || false;
 });
 
diff --git a/apps/dashboard/src/utils/validation-schema.ts b/apps/dashboard/src/utils/validation-schema.ts
index 2d2539b8..2ca3861d 100644
--- a/apps/dashboard/src/utils/validation-schema.ts
+++ b/apps/dashboard/src/utils/validation-schema.ts
@@ -30,12 +30,11 @@ export const simpleUserDetailsSchema =
           email: yup.string().email(),
   });
 
-export const editPasswordSchema = toTypedSchema(
+export const editPasswordSchema =
   yup.object({
     password: yup.string().required(),
     passwordConfirm: yup.string().required().oneOf([yup.ref('password')], t('validation.password.match')),
-  })
-);
+  });
 
 export const updateInvoiceSettingsObject = yup.object({
   reference: yup.string().required(),
@@ -63,15 +62,14 @@ export const updateUserDetailsObject = yup.object({
   canGoIntoDebt: yup.boolean().required().default(false),
 });
 
-export const editPinSchema = toTypedSchema(
+export const editPinSchema =
   yup.object({
     pin: yup.string().required()
       .matches(/^[0-9]+$/, t('validation.pin.onlyDigits'))
       .min(4, t('validation.string.exact', { len: '4' } ))
       .max(4, t('validation.string.exact', { len: '4' } )),
     pinConfirm: yup.string().required().oneOf([yup.ref('pin')], t('validation.pin.match')),
-  })
-);
+  });
 
 export const userTypes : Ref<Array<{name: string, value: number}>> = ref([
   { name: 'MEMBER', value: 1 },
diff --git a/lib/common/src/stores/user.store.ts b/lib/common/src/stores/user.store.ts
index 39177484..c1f1bf4a 100644
--- a/lib/common/src/stores/user.store.ts
+++ b/lib/common/src/stores/user.store.ts
@@ -1,7 +1,7 @@
 import { createPinia, defineStore } from 'pinia';
 import {
   BalanceResponse, PaginatedBaseTransactionResponse, PaginatedFinancialMutationResponse,
-  UserResponse, RoleWithPermissionsResponse
+  UserResponse, RoleWithPermissionsResponse, GewisUserResponse
 } from "@sudosos/sudosos-client";
 import { ApiService } from "../services/ApiService";
 import { fetchAllPages } from "../helpers/PaginationHelper";
@@ -105,6 +105,12 @@ export const useUserStore = defineStore('user', {
         await service.transaction.getAllTransactions(undefined, id, undefined, undefined,undefined,undefined,undefined,undefined,take, skip)
       ).data;
     },
+    async fetchGewisUser(id: number, service: ApiService): Promise<GewisUserResponse> {
+      return service.user.getIndividualUser(id).then((res) => {
+        this.current.user = res.data;
+        return res.data;
+      });
+    },
     setCurrentUser(user: UserResponse) {
       this.current.user = user;
     },