frontend/src/components/CertificateEditor.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, useId, useTemplateRef } from "vue";
 import CountryListItem from "./CountryListItem.vue";
-import { Country, getAvailableCountries } from "../utils/countries";
+import { type Country, getAvailableCountries } from "../utils/countries.ts";
 
 const formModel = ref(false);
 const formRef = useTemplateRef("form");
@@ -22,10 +22,7 @@ const state = ref("");
 const locality = ref("");
 
 // Countries data for autocomplete
-const countries = ref<(Country | { divider: boolean; header: string })[]>([]);
-
-// Initialize countries list
-countries.value = getAvailableCountries();
+const countries = ref(getAvailableCountries());
 
 // Certificate settings
 const keyLength = ref(4096);
@@ -35,7 +32,7 @@ const noExpiry = ref(false);
 // Validation rules
 const domainRules = [
   (value: string) => !!value || "A value must be provided to add the domain.",
-  (value: string) => new RegExp("^[a-z0-9][a-z0-9.]+$").test(value) || "Invalid domain characters provided. (To use some characters, convert the domain to xn-domain format.)",
+  (value: string) => /^[a-z0-9][a-z0-9.\-_]+$|^xn--[a-z0-9.\-_]+$/i.test(value) || "Invalid domain characters provided. (To use some special characters, convert the domain to xn-domain format.)",
 ]
 
 const emailRules = [

frontend/tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.ts", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,