refactor(dashboard/user): profile view

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',
       },
     }
     ],

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>

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'];

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": {

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": {