fix(webapp): missing import extension .vue

www/webapp/.eslintrc.js

@@ -6,15 +6,27 @@ module.exports = {
   env: {
     browser: true,
     node: true, // Can be removed after migration to vite.
-    es2022: true,
+    es2024: true,
+  },
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
   },
   extends: [
     'plugin:vue/essential',
     // 'plugin:vue/strongly-recommended',
     // 'plugin:vue/recommended',
     'plugin:vuetify/base',
-    'eslint:recommended'
+    'plugin:import/recommended',
+    'eslint:recommended',
   ],
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [['@', './src']],
+      },
+    },
+  },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

www/webapp/package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "eslint --ignore-path .gitignore --no-fix  src/",
-    "lint:fix": "eslint --ignore-path .gitignore --fix  src/"
+    "lint": "eslint --ignore-path .gitignore --no-fix src/**/*.{vue,js,json}",
+    "lint:fix": "eslint --ignore-path .gitignore --fix src/**/*.{vue,js,json}"
   },
   "dependencies": {
     "@fontsource/roboto": "^5.0.3",
@@ -26,6 +26,8 @@
     "@vue/cli-plugin-router": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
     "eslint": "^8.31.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-vue": "^9.8.0",
     "eslint-plugin-vuetify": "^1.1.0",
     "sass": "~1.32.13",

www/webapp/src/components/ActivateAccountActionHandler.vue

@@ -65,7 +65,7 @@
 
 <script>
   import axios from 'axios';
-  import GenericActionHandler from "./GenericActionHandler"
+  import GenericActionHandler from "./GenericActionHandler.vue"
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',

www/webapp/src/components/CreateTOTPActionHandler.vue

@@ -1,5 +1,5 @@
 <script>
-  import GenericActionHandler from "./GenericActionHandler"
+  import GenericActionHandler from "./GenericActionHandler.vue"
 
   export default {
     name: 'CreateTOTPActionHandler',

www/webapp/src/components/DonateDirectDebitForm.vue

@@ -100,7 +100,7 @@
   import axios from 'axios';
   import {email_pattern} from '@/validation';
   import {digestError} from '@/utils';
-  import ErrorAlert from '@/components/ErrorAlert';
+  import ErrorAlert from '@/components/ErrorAlert.vue';
   import {mdiAccount, mdiBank, mdiCash100, mdiEmail, mdiMessageTextOutline} from "@mdi/js";
 
   const HTTP = axios.create({

www/webapp/src/components/ResetPasswordActionHandler.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-  import GenericActionHandler from "./GenericActionHandler"
+  import GenericActionHandler from "./GenericActionHandler.vue"
 
   export default {
     name: 'ResetPasswordActionHandler',

www/webapp/src/views/ChangeEmail.vue

@@ -90,10 +90,10 @@
 </template>
 
 <script>
-  import { HTTP, withWorking } from '@/utils';
+  import { HTTP, withWorking ,digestError} from '@/utils';
   import {email_pattern} from '@/validation';
-  import {digestError} from '@/utils';
-  import ErrorAlert from "@/components/ErrorAlert";
+
+  import ErrorAlert from "@/components/ErrorAlert.vue";
 
   export default {
     name: 'ChangeEmail',

www/webapp/src/views/ConfirmationPage.vue

@@ -59,7 +59,7 @@
   import CreateTOTPActionHandler from '@/components/CreateTOTPActionHandler.vue';
   import ResetPasswordActionHandler from '@/components/ResetPasswordActionHandler.vue';
   import {digestError} from '@/utils';
-  import ErrorAlert from '@/components/ErrorAlert';
+  import ErrorAlert from '@/components/ErrorAlert.vue';
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',

www/webapp/src/views/Console/DomainSetupDialog.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import DomainSetup from "@/views/DomainSetup";
+import DomainSetup from "@/views/DomainSetup.vue";
 import {mdiClose} from "@mdi/js";
 
 export default {

www/webapp/src/views/Console/TOTPVerifyDialog.vue

@@ -91,7 +91,7 @@
 
 <script>
 import {digestError, HTTP, logout, withWorking} from '@/utils'
-import ErrorAlert from "../../components/ErrorAlert";
+import ErrorAlert from "@/components/ErrorAlert.vue";
 import QrcodeVue from '../../modules/qrcode.vue/dist/qrcode.vue.esm'
 import {mdiCheck, mdiClose, mdiNumeric1Circle, mdiNumeric2Circle} from "@mdi/js";
 

www/webapp/src/views/CrudList.vue

@@ -342,16 +342,16 @@
 
 <script>
 import { HTTP, withWorking, digestError } from '@/utils';
-import RRSetType from '@/components/Field/RRSetType';
-import TimeAgo from '@/components/Field/TimeAgo';
+import RRSetType from '@/components/Field/RRSetType.vue';
+import TimeAgo from '@/components/Field/TimeAgo.vue';
 import GenericCheckbox from '@/components/Field/GenericCheckbox.vue';
-import GenericText from '@/components/Field/GenericText';
-import GenericTextarea from '@/components/Field/GenericTextarea';
+import GenericText from '@/components/Field/GenericText.vue';
+import GenericTextarea from '@/components/Field/GenericTextarea.vue';
 import RecordItem from '@/components/Field/RecordItem.vue';
-import RecordList from '@/components/Field/RecordList';
+import RecordList from '@/components/Field/RecordList.vue';
 import GenericSwitchbox from '@/components/Field/GenericSwitchbox.vue';
-import TTL from '@/components/Field/TTL';
-import ErrorAlert from '@/components/ErrorAlert'
+import TTL from '@/components/Field/TTL.vue';
+import ErrorAlert from '@/components/ErrorAlert.vue'
 import {useUserStore} from "@/store/user";
 import {mdiClose, mdiContentSaveEdit, mdiDelete, mdiMagnify, mdiPlus} from "@mdi/js";
 

www/webapp/src/views/CrudListDomain.vue

@@ -1,7 +1,7 @@
 <script>
 import { HTTP, withWorking } from '@/utils';
-import CrudList from './CrudList';
-import DomainSetupDialog from '@/views/Console/DomainSetupDialog';
+import CrudList from './CrudList.vue';
+import DomainSetupDialog from '@/views/Console/DomainSetupDialog.vue';
 import {mdiDownload, mdiInformation} from "@mdi/js";
 import GenericText from "@/components/Field/GenericText.vue";
 import GenericTextarea from "@/components/Field/GenericTextarea.vue";

www/webapp/src/views/CrudListRecord.vue

@@ -1,5 +1,5 @@
 <script>
-import CrudList from '@/views/CrudList';
+import CrudList from '@/views/CrudList.vue';
 import {HTTP, withWorking} from "@/utils"
 import GenericText from "@/components/Field/GenericText.vue";
 import RecordList from "@/components/Field/RecordList.vue";

www/webapp/src/views/CrudListTOTP.vue

@@ -1,6 +1,6 @@
 <script>
-import CrudList from './CrudList';
-import TOTPVerifyDialog from '@/views/Console/TOTPVerifyDialog';
+import CrudList from './CrudList.vue';
+import TOTPVerifyDialog from '@/views/Console/TOTPVerifyDialog.vue';
 import GenericText from "@/components/Field/GenericText.vue";
 import TimeAgo from "@/components/Field/TimeAgo.vue";
 

www/webapp/src/views/CrudListToken.vue

@@ -1,5 +1,5 @@
 <script>
-import CrudList from './CrudList';
+import CrudList from './CrudList.vue';
 import {useUserStore} from "@/store/user";
 import GenericText from "@/components/Field/GenericText.vue";
 import GenericCheckbox from "@/components/Field/GenericCheckbox.vue";

www/webapp/src/views/DeleteAccount.vue

@@ -77,7 +77,7 @@
 
 <script>
   import { HTTP, withWorking, digestError } from '@/utils';
-  import ErrorAlert from "../components/ErrorAlert";
+  import ErrorAlert from "@/components/ErrorAlert.vue";
 
   export default {
     name: 'DeleteAccount',

www/webapp/src/views/DomainSetupPage.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import DomainSetup from "@/views/DomainSetup";
+import DomainSetup from "@/views/DomainSetup.vue";
 
 export default {
   name: 'DomainSetupPage',

www/webapp/src/views/DynSetup.vue

@@ -170,7 +170,7 @@
 <script>
   import axios from 'axios';
   import {digestError} from '@/utils';
-  import ErrorAlert from "@/components/ErrorAlert";
+  import ErrorAlert from "@/components/ErrorAlert.vue";
   import {useUserStore} from "@/store/user";
 
   const HTTP = axios.create({

www/webapp/src/views/LoginPage.vue

@@ -87,7 +87,7 @@
 
 <script>
 import { HTTP, digestError } from '@/utils';
-import ErrorAlert from "@/components/ErrorAlert";
+import ErrorAlert from "@/components/ErrorAlert.vue";
 import {useUserStore} from "@/store/user";
 
 export default {

www/webapp/src/views/MFA.vue

@@ -80,7 +80,7 @@
 
 <script>
 import {digestError, HTTP, withWorking} from '@/utils'
-import ErrorAlert from "../components/ErrorAlert";
+import ErrorAlert from "@/components/ErrorAlert.vue";
 import {mdiNumeric1Circle, mdiNumeric2Circle} from "@mdi/js";
 
 export default {

www/webapp/src/views/ResetPassword.vue

@@ -121,7 +121,7 @@
   import axios from 'axios';
   import {email_pattern} from '@/validation';
   import {digestError} from '@/utils';
-  import ErrorAlert from '@/components/ErrorAlert';
+  import ErrorAlert from '@/components/ErrorAlert.vue';
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',

www/webapp/src/views/SignUp.vue

@@ -176,7 +176,7 @@
   import axios from 'axios';
   import {domain_pattern, email_pattern} from '@/validation';
   import {digestError} from '@/utils';
-  import ErrorAlert from "@/components/ErrorAlert";
+  import ErrorAlert from "@/components/ErrorAlert.vue";
 
   const LOCAL_PUBLIC_SUFFIXES = process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' ');