.editorconfig

@@ -4,10 +4,6 @@ indent_size = 4
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[*.{yaml,yml}]
+[*.{yaml,yml,htm,html,vue,md}]
 indent_style = space
-indent_size = 2
-
-[*.{htm,html,vue}]
-indent_style = tab
 indent_size = 2
\ No newline at end of file

.prettierrc.yml

@@ -9,13 +9,15 @@ overrides:
   - files:
       - "*.yml"
       - "*.yaml"
+      - "*.htm"
+      - "*.html"
+      - "*.md"
     options:
       useTabs: false
       tabWidth: 2
   - files:
-      - "*.htm"
-      - "*.html"
       - "*.vue"
     options:
       useTabs: false
       tabWidth: 2
+      htmlWhitespaceSensitivity: ignore

eslint.config.js

 import js from "@eslint/js";
 import pluginVue from "eslint-plugin-vue";
-import { FlatCompat } from "@eslint/eslintrc";
-import { fileURLToPath } from "node:url";
-import path from "node:path";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-	baseDirectory: __dirname,
-	recommendedConfig: js.configs.recommended,
-});
+import vueTsEslintConfig from "@vue/eslint-config-typescript";
+import skipFormattingConfig from "@vue/eslint-config-prettier/skip-formatting";
 
 export default [
+	{
+		name: "app/files-to-lint",
+		files: ["**/*.{ts,mts,tsx,vue}"],
+	},
+	{
+		name: "app/files-to-ignore",
+		ignores: ["**/dist/**", "**/dist-ssr/**", "**/coverage/**"],
+	},
 	js.configs.recommended,
 	...pluginVue.configs["flat/recommended"],
-	...compat.extends("@vue/eslint-config-typescript/recommended"),
-	...compat.extends("@vue/eslint-config-prettier"),
+	...vueTsEslintConfig(),
+	skipFormattingConfig,
 	{
-		files: [
-			"**/*.vue",
-			"**/*.js",
-			"**/*.jsx",
-			"**/*.cjs",
-			"**/*.mjs",
-			"**/*.ts",
-			"**/*.tsx",
-			"**/*.cts",
-			"**/*.mts",
-		],
-		languageOptions: {
-			ecmaVersion: "latest",
-		},
 		rules: {
-			"vue/multi-word-component-names": "off",
+			"@typescript-eslint/no-unused-vars": [
+				"error",
+				{
+					args: "all",
+					argsIgnorePattern: "^_+$",
+					varsIgnorePattern: "^_+$",
+					caughtErrorsIgnorePattern: "^_+$",
+				},
+			],
 		},
 	},
 ];

package.json

@@ -14,34 +14,34 @@
 	},
 	"dependencies": {
 		"@mdi/font": "^7.4.47",
-		"core-js": "^3.37.0",
+		"core-js": "^3.41.0",
 		"jwt-decode": "^4.0.0",
 		"roboto-fontface": "^0.10.0",
-		"vue": "^3.4.24",
-		"vue-i18n": "^11.0.1",
-		"vue-router": "^4.3.2",
-		"vuetify": "^3.7.6",
+		"vue": "^3.5.13",
+		"vue-i18n": "^11.1.2",
+		"vue-router": "^4.5.0",
+		"vuetify": "^3.7.15",
 		"webfontloader": "^1.6.28"
 	},
 	"devDependencies": {
-		"@babel/types": "^7.24.0",
-		"@eslint/eslintrc": "^3.0.2",
-		"@eslint/js": "^9.1.1",
-		"@fortawesome/fontawesome-free": "^6.5.2",
-		"@types/node": "^20.12.7",
+		"@babel/types": "^7.26.9",
+		"@eslint/eslintrc": "^3.3.0",
+		"@eslint/js": "^9.22.0",
+		"@fortawesome/fontawesome-free": "^6.7.2",
+		"@types/node": "^22.13.9",
 		"@types/webfontloader": "^1.6.38",
-		"@vitejs/plugin-vue": "^5.0.4",
-		"@vue/eslint-config-prettier": "^9.0.0",
-		"@vue/eslint-config-typescript": "^13.0.0",
-		"eslint": "^9.1.1",
-		"eslint-plugin-vue": "^9.25.0",
-		"prettier": "^3.2.5",
-		"sass": "^1.75.0",
-		"typescript": "^5.4.5",
-		"vite": "^6.0.7",
-		"vite-plugin-vuetify": "^2.0.3",
-		"vue-tsc": "^2.0.29",
-		"yarn-upgrade-all": "^0.7.2"
+		"@vitejs/plugin-vue": "^5.2.1",
+		"@vue/eslint-config-prettier": "^10.2.0",
+		"@vue/eslint-config-typescript": "^14.5.0",
+		"eslint": "^9.22.0",
+		"eslint-plugin-vue": "^10.0.0",
+		"prettier": "^3.5.3",
+		"sass": "^1.85.1",
+		"typescript": "^5.8.2",
+		"vite": "^6.2.1",
+		"vite-plugin-vuetify": "^2.1.0",
+		"vue-tsc": "^2.2.8",
+		"yarn-upgrade-all": "^0.7.5"
 	},
 	"packageManager": "yarn@4.1.1"
 }

src/components/RequestCertificatePage.vue

@@ -90,9 +90,9 @@
               </v-card>
             </template>
             <template #next>
-              <v-btn v-if="step === 1" :disabled="!request.formValid" @click="step++">{{
-                $t("$vuetify.stepper.next")
-              }}</v-btn>
+              <v-btn v-if="step === 1" :disabled="!request.formValid" @click="step++">
+                {{ $t("$vuetify.stepper.next") }}
+              </v-btn>
               <v-btn
                 v-if="step === 2"
                 variant="elevated"
@@ -100,9 +100,10 @@
                 :loading="submitting"
                 :disabled="false"
                 @click="requestCertificate"
-                >{{ $t("$vuetify.stepper.submit") }}</v-btn
-              ></template
-            >
+              >
+                {{ $t("$vuetify.stepper.submit") }}
+              </v-btn>
+            </template>
           </v-stepper>
         </v-col>
       </v-row>
@@ -132,8 +133,9 @@
                   variant="elevated"
                   :href="$t(`request.common.success.instructionsUrl`)"
                   target="_blank"
-                  >{{ $t(`request.common.success.instructionsButton`) }}</v-btn
                 >
+                  {{ $t(`request.common.success.instructionsButton`) }}
+                </v-btn>
               </v-col>
             </v-row>
           </v-container>
@@ -144,9 +146,11 @@
     <v-container v-else-if="subPage === RequestCertificatePage.Error">
       <v-card>
         <v-card-title>
-          <icon-with-text icon="circle-xmark" color="red" size="x-small" class="justify-center">{{
-            error ? $t(`request.common.error.title`) : $t(`request.${certificateType}.missingIdentification.title`)
-          }}</icon-with-text>
+          <icon-with-text icon="circle-xmark" color="red" size="x-small" class="justify-center">
+            {{
+              error ? $t(`request.common.error.title`) : $t(`request.${certificateType}.missingIdentification.title`)
+            }}
+          </icon-with-text>
         </v-card-title>
         <v-card-text>
           <v-container class="text-center">
@@ -171,13 +175,14 @@
                   variant="elevated"
                   :href="$t(`request.common.error.serviceDeskUrl`)"
                   target="_blank"
-                  >{{ $t(`request.common.error.serviceDeskButton`) }}</v-btn
                 >
+                  {{ $t(`request.common.error.serviceDeskButton`) }}
+                </v-btn>
               </v-col>
               <v-col v-if="certificateType !== 'functional'" class="text-center">
-                <v-btn color="primary" variant="elevated" href="/request-functional">{{
-                  $t(`request.${certificateType}.error.functionalInsteadButton`)
-                }}</v-btn>
+                <v-btn color="primary" variant="elevated" href="/request-functional">
+                  {{ $t(`request.${certificateType}.error.functionalInsteadButton`) }}
+                </v-btn>
               </v-col>
             </v-row>
           </v-container>

src/layouts/Layout.vue → src/layouts/DefaultLayout.vue

@@ -99,8 +99,8 @@
             <div v-if="store.backendError.requestId">
               <div>{{ $t("errors.backend.requestIdHint") }}</div>
               <div class="mt-4">
-                <span class="font-weight-bold pr-2">{{ $t("errors.requestIdLabel") }}:</span
-                ><span>{{ store.backendError.requestId }}</span>
+                <span class="font-weight-bold pr-2">{{ $t("errors.requestIdLabel") }}:</span>
+                <span>{{ store.backendError.requestId }}</span>
               </div>
             </div>
           </v-card-text>

src/router/index.ts

@@ -4,17 +4,17 @@ import { MAINTENANCE_MODE, store } from "@/ts/common";
 const routes = [
 	{
 		path: "/",
-		component: () => import("@/layouts/Layout.vue"),
+		component: () => import("@/layouts/DefaultLayout.vue"),
 		children: [
 			{
 				path: "/maintenance",
 				name: "maintenance",
-				component: () => import("@/views/Maintenance.vue"),
+				component: () => import("@/views/MaintenancePage.vue"),
 			},
 			{
 				path: "",
 				name: "home",
-				component: () => import("@/views/Home.vue"),
+				component: () => import("@/views/MainPage.vue"),
 			},
 			{
 				path: "create-ident",
@@ -39,7 +39,7 @@ const routes = [
 			{
 				path: "distribute",
 				name: "distribute",
-				component: () => import("@/views/Distribute.vue"),
+				component: () => import("@/views/DistributeCertificates.vue"),
 			},
 		],
 	},

src/ts/common.ts

@@ -32,7 +32,7 @@ export const store: StoreType = reactive({
 function parseTokenPayload(token: string | null): TokenPayload | null {
 	try {
 		return token ? jwtDecode<TokenPayload>(token) : null;
-	} catch (err) {
+	} catch {
 		return null;
 	}
 }

src/views/CreateIdent.vue

@@ -51,9 +51,9 @@
         <hyphenated-justified-text class="mb-2">
           {{ $t("createIdent.create.documentIdentifierHint.text") }}
         </hyphenated-justified-text>
-        <a href="https://www.consilium.europa.eu/prado/de/search-by-document-country.html" target="_blank"
-          >https://www.consilium.europa.eu/prado/de/search-by-document-country.html</a
-        >
+        <a href="https://www.consilium.europa.eu/prado/de/search-by-document-country.html" target="_blank">
+          https://www.consilium.europa.eu/prado/de/search-by-document-country.html
+        </a>
         <div class="d-flex justify-center">
           <img
             :src="getAssetUrl(`${identify.newIdentification.form.document_type}.png`)"
@@ -128,7 +128,7 @@
                         :key="entry"
                         class="text-no-wrap flex-sm-nowrap"
                       >
-                        <v-col class="py-1"> {{ $t(`createIdent.create.existing.${entry}Label`) }}: </v-col>
+                        <v-col class="py-1">{{ $t(`createIdent.create.existing.${entry}Label`) }}:</v-col>
                         <v-col class="py-1">
                           {{ result[entry as keyof ServiceDeskIdentification].toLocaleString() }}
                         </v-col>
@@ -348,10 +348,12 @@
             </v-card-subtitle>
             <v-card-actions class="ma-auto">
               <v-btn color="secondary" variant="flat" class="px-4" @click="openMoreDetails(item)">
-                <v-icon icon="fas fa-circle-info" class="pr-2" />{{ $t("createIdent.search.result.moreDetailsButton") }}
+                <v-icon icon="fas fa-circle-info" class="pr-2" />
+                {{ $t("createIdent.search.result.moreDetailsButton") }}
               </v-btn>
               <v-btn color="primary" variant="flat" class="px-4" @click="openIdentify(item)">
-                <v-icon icon="fas fa-id-card" class="pr-2" />{{ $t("createIdent.search.result.identifyButton") }}
+                <v-icon icon="fas fa-id-card" class="pr-2" />
+                {{ $t("createIdent.search.result.identifyButton") }}
               </v-btn>
             </v-card-actions>
           </v-card>

src/views/Home.vue → src/views/MainPage.vue

@@ -78,9 +78,10 @@
                   {{ store.logoutError.getLocalized($t) }}
                 </div>
                 <div>
-                  <span v-if="store.logoutError.requestId" class="font-weight-bold pr-2"
-                    >{{ $t("errors.requestIdLabel") }}:</span
-                  ><span>{{ store.logoutError.requestId }}</span>
+                  <span v-if="store.logoutError.requestId" class="font-weight-bold pr-2">
+                    {{ $t("errors.requestIdLabel") }}:
+                  </span>
+                  <span>{{ store.logoutError.requestId }}</span>
                 </div>
               </v-card-text>
               <v-card-actions>
@@ -140,7 +141,7 @@ export default defineComponent({
           id: "server",
           icon: "computer",
           target: this.$t("request.server.instructionsUrl"),
-          enabled: false,
+          enabled: true,
         },
       ],
       identFunctions: [

src/views/Maintenance.vue → src/views/MaintenancePage.vue

@@ -24,7 +24,7 @@ import { Locale } from "vue-i18n";
 import { MaintenanceInfoUrls } from "@/ts/types";
 
 export default defineComponent({
-  beforeRouteEnter(_1, _2, next) {
+  beforeRouteEnter(_, __, next) {
     // Redirect to home if one of these is true
     // * Maintenance mode is disabled
     // * Login is allowed and user is logged out

src/views/RequestFunctional.vue

@@ -36,13 +36,13 @@
         <v-btn color="secondary" @click="mailAddressesCount++">
           <div class="d-block d-sm-none">
             <icon-with-text icon="fas fa-plus">
-              {{ $t("request.functional.steps.emailAddresses.addAnotherButtonShort") }}</icon-with-text
-            >
+              {{ $t("request.functional.steps.emailAddresses.addAnotherButtonShort") }}
+            </icon-with-text>
           </div>
           <div class="d-none d-sm-block">
             <icon-with-text icon="fas fa-plus">
-              {{ $t("request.functional.steps.emailAddresses.addAnotherButton") }}</icon-with-text
-            >
+              {{ $t("request.functional.steps.emailAddresses.addAnotherButton") }}
+            </icon-with-text>
           </div>
         </v-btn>
       </v-col>