feat(#22): Use translation keys in files

legalconsenthub/app/components/FormValidationIndicator.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="flex items-center gap-2">
     <div class="relative flex items-center justify-center">
-      <svg
-        class="shield-ring"
-        :class="ringClass"
-        width="48"
-        height="48"
-        viewBox="0 0 48 48"
-      >
+      <svg class="shield-ring" :class="ringClass" width="48" height="48" viewBox="0 0 48 48">
         <circle
           class="ring-background"
           cx="24"
@@ -32,24 +26,13 @@
           transform="rotate(-90 24 24)"
         />
       </svg>
-      
+
       <Transition name="shield-pulse" mode="out-in">
-        <UIcon
-          :key="status"
-          :name="shieldIcon"
-          class="absolute shield-icon"
-          :class="iconClass"
-        />
+        <UIcon :key="status" :name="shieldIcon" class="absolute shield-icon" :class="iconClass" />
       </Transition>
     </div>
-    
-    <UBadge
-      :label="statusLabel"
-      :color="badgeColor"
-      size="md"
-      variant="subtle"
-      class="status-badge"
-    />
+
+    <UBadge :label="statusLabel" :color="badgeColor" size="md" variant="subtle" class="status-badge" />
   </div>
 </template>
 
@@ -75,16 +58,18 @@ const shieldIcon = computed(() => {
   }
 })
 
+const { t: $t } = useI18n()
+
 const statusLabel = computed(() => {
   switch (props.status) {
     case ComplianceStatus.Critical:
-      return 'Kritisch'
+      return $t('compliance.critical')
     case ComplianceStatus.Warning:
-      return 'Warnung'
+      return $t('compliance.warning')
     case ComplianceStatus.NonCritical:
-      return 'Unkritisch'
+      return $t('compliance.nonCritical')
     default:
-      return 'Unkritisch'
+      return $t('compliance.nonCritical')
   }
 })
 
@@ -144,15 +129,18 @@ const progressOffset = computed(() => {
   return circumference - (progressValue.value / 100) * circumference
 })
 
-watch(() => props.status, () => {
-  const element = document.querySelector('.shield-ring')
-  if (element) {
-    element.classList.add('status-change-pulse')
-    setTimeout(() => {
-      element.classList.remove('status-change-pulse')
-    }, 600)
+watch(
+  () => props.status,
+  () => {
+    const element = document.querySelector('.shield-ring')
+    if (element) {
+      element.classList.add('status-change-pulse')
+      setTimeout(() => {
+        element.classList.remove('status-change-pulse')
+      }, 600)
+    }
   }
-})
+)
 </script>
 
 <style scoped>
@@ -210,4 +198,3 @@ watch(() => props.status, () => {
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
 }
 </style>
-