fix(webapp): Fix component file name

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',
@@ -26,6 +38,7 @@ module.exports = {
     'vue/no-deprecated-filter': 'warn', // Preparation for vue3
     'vue/no-deprecated-v-on-number-modifiers': 'warn', // Preparation for vue3
     'vue/no-deprecated-html-element-is': 'warn', // Preparation for vue3
+    'vue/match-component-file-name': ['error', {'extensions': ['vue'], 'shouldMatchCase': true}],
   },
   ignorePatterns: ['**/src/modules/**/*'],
 }

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/Field/Record/A.vue → www/webapp/src/components/Field/RecordA.vue

@@ -1,6 +1,6 @@
 <script>
 import { ipAddress } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 export default {
   name: 'RecordA',

www/webapp/src/components/Field/Record/AAAA.vue → www/webapp/src/components/Field/RecordAAAA.vue

@@ -1,6 +1,6 @@
 <script>
 import { helpers } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 // from https://stackoverflow.com/a/17871737/6867099, without the '%' and '.' parts
 const ip6Address = helpers.regex('ip6Address', /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:))$/);

www/webapp/src/components/Field/Record/CAA.vue → www/webapp/src/components/Field/RecordCAA.vue

@@ -1,6 +1,6 @@
 <script>
 import { integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const MAX8 = 255;
 const int8 = between(0, MAX8);

www/webapp/src/components/Field/Record/CDNSKEY.vue → www/webapp/src/components/Field/RecordCDNSKEY.vue

@@ -1,5 +1,5 @@
 <script>
-import RecordDNSKEY from './DNSKEY.vue';
+import RecordDNSKEY from './RecordDNSKEY.vue';
 
 export default {
   name: 'RecordCDNSKEY',

www/webapp/src/components/Field/Record/CDS.vue → www/webapp/src/components/Field/RecordCDS.vue

@@ -1,5 +1,5 @@
 <script>
-import RecordDS from './DS.vue';
+import RecordDS from './RecordDS.vue';
 
 export default {
   name: 'RecordCDS',

www/webapp/src/components/Field/Record/CNAME.vue → www/webapp/src/components/Field/RecordCNAME.vue

@@ -1,6 +1,6 @@
 <script>
 import { helpers } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const hostname = helpers.regex('hostname', /^((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,}))[.]?$/);
 const trailingDot = helpers.regex('trailingDot', /[.]$/);

www/webapp/src/components/Field/Record/DNSKEY.vue → www/webapp/src/components/Field/RecordDNSKEY.vue

@@ -1,6 +1,6 @@
 <script>
 import { helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const base64 = helpers.regex('base64', /^[0-9a-zA-Z+/][0-9a-zA-Z+/\s]*(=\s*){0,3}$/);
 

www/webapp/src/components/Field/Record/DS.vue → www/webapp/src/components/Field/RecordDS.vue

@@ -1,6 +1,6 @@
 <script>
 import { and, helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const hex = helpers.regex('hex', /^([0-9a-fA-F]\s*)*[0-9a-fA-F]$/);
 const trim = and(helpers.regex('trimBegin', /^[^\s]/), helpers.regex('trimEnd', /[^\s]$/));

www/webapp/src/components/Field/Record/HTTPS.vue → www/webapp/src/components/Field/RecordHTTPS.vue

@@ -1,5 +1,5 @@
 <script>
-import RecordSVCB from './SVCB.vue';
+import RecordSVCB from './RecordSVCB.vue';
 
 export default {
   name: 'RecordHTTPS',

www/webapp/src/components/Field/RecordList.vue

@@ -31,25 +31,25 @@
 
 <script>
 import RecordItem from './RecordItem.vue';
-import RecordA from './Record/A.vue';
-import RecordAAAA from './Record/AAAA.vue';
-import RecordCAA from './Record/CAA.vue';
-import RecordCDNSKEY from './Record/CDNSKEY.vue';
-import RecordCDS from './Record/CDS.vue';
-import RecordCNAME from './Record/CNAME.vue';
-import RecordDNSKEY from './Record/DNSKEY.vue';
-import RecordDS from './Record/DS.vue';
-import RecordHTTPS from './Record/HTTPS.vue';
-import RecordMX from './Record/MX.vue';
-import RecordNS from './Record/NS.vue';
-import RecordOPENPGPKEY from './Record/OPENPGPKEY.vue';
-import RecordPTR from './Record/PTR.vue';
-import RecordSMIMEA from './Record/SMIMEA.vue';
-import RecordSRV from './Record/SRV.vue';
-import RecordSVCB from './Record/SVCB.vue';
-import RecordTLSA from './Record/TLSA.vue';
-import RecordTXT from './Record/TXT.vue';
-import RecordSubnet from './Record/Subnet.vue';
+import RecordA from './RecordA.vue';
+import RecordAAAA from './RecordAAAA.vue';
+import RecordCAA from './RecordCAA.vue';
+import RecordCDNSKEY from './RecordCDNSKEY.vue';
+import RecordCDS from './RecordCDS.vue';
+import RecordCNAME from './RecordCNAME.vue';
+import RecordDNSKEY from './RecordDNSKEY.vue';
+import RecordDS from './RecordDS.vue';
+import RecordHTTPS from './RecordHTTPS.vue';
+import RecordMX from './RecordMX.vue';
+import RecordNS from './RecordNS.vue';
+import RecordOPENPGPKEY from './RecordOPENPGPKEY.vue';
+import RecordPTR from './RecordPTR.vue';
+import RecordSMIMEA from './RecordSMIMEA.vue';
+import RecordSRV from './RecordSRV.vue';
+import RecordSVCB from './RecordSVCB.vue';
+import RecordTLSA from './RecordTLSA.vue';
+import RecordTXT from './RecordTXT.vue';
+import RecordSubnet from './RecordSubnet.vue';
 import {mdiClose, mdiPlus} from "@mdi/js";
 
 export default {

www/webapp/src/components/Field/Record/MX.vue → www/webapp/src/components/Field/RecordMX.vue

@@ -1,6 +1,6 @@
 <script>
 import { helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const hostname = helpers.regex('hostname', /^((([a-zA-Z0-9-]+\.?)+)|\.)$/);
 const trailingDot = helpers.regex('trailingDot', /[.]$/);

www/webapp/src/components/Field/Record/NS.vue → www/webapp/src/components/Field/RecordNS.vue

@@ -1,6 +1,6 @@
 <script>
 import { helpers } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const hostname = helpers.regex('hostname', /^((([a-zA-Z0-9-]+\.?)+)|\.)$/);
 const trailingDot = helpers.regex('trailingDot', /[.]$/);

www/webapp/src/components/Field/Record/OPENPGPKEY.vue → www/webapp/src/components/Field/RecordOPENPGPKEY.vue

@@ -1,6 +1,6 @@
 <script>
 import { helpers } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const base64 = helpers.regex('base64', /^[0-9a-zA-Z+/][0-9a-zA-Z+/\s]*(=\s*){0,3}$/);
 

www/webapp/src/components/Field/Record/PTR.vue → www/webapp/src/components/Field/RecordPTR.vue

@@ -1,5 +1,5 @@
 <script>
-import RecordCNAME from './CNAME.vue';
+import RecordCNAME from './RecordCNAME.vue';
 
 export default {
   name: 'RecordPTR',

www/webapp/src/components/Field/Record/SMIMEA.vue → www/webapp/src/components/Field/RecordSMIMEA.vue

@@ -1,5 +1,5 @@
 <script>
-import RecordTLSA from './TLSA.vue';
+import RecordTLSA from './RecordTLSA.vue';
 
 export default {
   name: 'RecordSMIMEA',

www/webapp/src/components/Field/Record/SRV.vue → www/webapp/src/components/Field/RecordSRV.vue

@@ -1,6 +1,6 @@
 <script>
 import { helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 // Allow for root label only, see RFC 2052
 const hostname = helpers.regex('hostname', /^((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))?[.]?$/);

www/webapp/src/components/Field/Record/SVCB.vue → www/webapp/src/components/Field/RecordSVCB.vue

@@ -1,6 +1,6 @@
 <script>
 import { helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 // Allow for root label only
 const hostname = helpers.regex('hostname', /^((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))?[.]?$/);

www/webapp/src/components/Field/Record/Subnet.vue → www/webapp/src/components/Field/RecordSubnet.vue

@@ -1,6 +1,6 @@
 <script>
 import { helpers, or } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 // from https://www.oreilly.com/library/view/regular-expressions-cookbook/9781449327453/ch08s16.html, adding subnet
 const ip4AddressOrSubnet = helpers.regex('ip4Address', /^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])(\/(3[0-2]|[12]?[0-9]))?$/);

www/webapp/src/components/Field/Record/TLSA.vue → www/webapp/src/components/Field/RecordTLSA.vue

@@ -1,6 +1,6 @@
 <script>
 import { and, helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const hex = helpers.regex('hex', /^([0-9a-fA-F]\s*)*[0-9a-fA-F]$/);
 const trim = and(helpers.regex('trimBegin', /^[^\s]/), helpers.regex('trimEnd', /[^\s]$/));

www/webapp/src/components/Field/Record/TXT.vue → www/webapp/src/components/Field/RecordTXT.vue

@@ -1,6 +1,6 @@
 <script>
 import { helpers } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const txtToken = helpers.regex('txtToken', /^".*"$/);
 

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