Merge pull request #7 from DeanWard/feat/issue-1

Closes #1 - adds option to specify cert and key paths

package-lock.json

@@ -15,6 +15,7 @@
         "prismjs": "^1.29.0",
         "tailwind-merge": "^2.2.1",
         "tailwindcss-animate": "^1.0.7",
+        "uuid": "^11.0.5",
         "vue": "^3.4.38",
         "vue-select": "^4.0.0-beta.6"
       },
@@ -2438,6 +2439,18 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/uuid": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.5.tgz",
+      "integrity": "sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",

package.json

@@ -9,25 +9,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.4.38",
-    "vue-select": "^4.0.0-beta.6",
     "@radix-ui/colors": "^3.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-vue-next": "^0.344.0",
+    "prismjs": "^1.29.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "prismjs": "^1.29.0"
+    "uuid": "^11.0.5",
+    "vue": "^3.4.38",
+    "vue-select": "^4.0.0-beta.6"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.3",
-    "@types/vue-select": "^3.16.8",
     "@types/prismjs": "^1.26.3",
-    "typescript": "^5.5.3",
-    "vite": "^5.4.2",
-    "vue-tsc": "^2.1.4",
+    "@types/vue-select": "^3.16.8",
+    "@vitejs/plugin-vue": "^5.1.3",
     "autoprefixer": "^10.4.18",
     "postcss": "^8.4.35",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.2",
+    "vue-tsc": "^2.1.4"
   }
 }

src/components/CaddyConfig.vue

@@ -193,6 +193,9 @@ const caddyConfig = computed(() => {
       } else if (host.tls?.selfSigned) {
         lines.push('    tls internal');
       }
+      else if(host.tls?.certFile && host.tls?.keyFile) {
+        lines.push(`    tls ${host.tls.certFile} ${host.tls.keyFile}`);
+      }
 
       if (host.basicAuth?.length) {
         host.basicAuth.forEach(({ username, password }) => {

src/components/HostForm.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import type { CaddyHost } from '../types/caddy';
 import PresetSelect from './PresetSelect.vue';
 import type { PresetConfig } from '../types/caddy';
+import { v4 as uuidv4 } from 'uuid';
 
 const props = defineProps<{
   initialHost?: CaddyHost;
@@ -14,7 +15,7 @@ const emit = defineEmits<{
 }>();
 
 const host = ref<CaddyHost>(props.initialHost || {
-  id: crypto.randomUUID(),
+  id: uuidv4(),
   domain: '',
   fileServer: {
     root: '',
@@ -26,7 +27,9 @@ const host = ref<CaddyHost>(props.initialHost || {
   encode: false,
   tls: {
     email: '',
-    selfSigned: false
+    selfSigned: false,
+    certFile: '',
+    keyFile: ''
   },
   security: {
     ipFilter: {
@@ -83,6 +86,12 @@ function handleServerTypeChange(event: Event) {
 }
 const showAdvanced = ref(false);
 
+const tlsHasEmailOrSelfSigned = computed(() => {
+  if(host.value.tls.email && host.value.tls.email?.trim() !== '') return true;
+  if(host.value.tls.selfSigned) return true;
+  return false;
+});
+
 function handleSubmit() {
   emit('save', host.value);
 }
@@ -189,6 +198,15 @@ function applyPreset(preset: PresetConfig) {
             </label>
           </div>
 
+          <div class="form-group">
+            <label>Cert File:</label>
+            <input v-model="host.tls.certFile" placeholder="cert.pem" :disabled="tlsHasEmailOrSelfSigned" />
+          </div>
+          <div class="form-group">
+            <label>Key File:</label>
+            <input v-model="host.tls.keyFile" placeholder="key.pem" :disabled="tlsHasEmailOrSelfSigned" />
+          </div>
+
           <!-- Security Section -->
           <div class="advanced-section">
             <h3 class="text-lg font-semibold mb-4">Security</h3>
@@ -409,6 +427,13 @@ function applyPreset(preset: PresetConfig) {
   color: hsl(var(--foreground));
 }
 
+.form-group input:disabled {
+  background-color: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .checkbox {
   display: flex;
   align-items: center;

src/components/ImportModal.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import { X, Upload } from 'lucide-vue-next';
 import type { CaddyHost } from '../types/caddy';
+import { v4 as uuidv4 } from 'uuid';
 
 const props = defineProps<{
   show: boolean;
@@ -51,7 +52,7 @@ function parseCaddyfile(content: string): CaddyHost[] {
     domain = domain === ':80' ? ':80' : domain;
     
     const host: CaddyHost = {
-      id: crypto.randomUUID(),
+      id: uuidv4(),
       domain,
       encode: false
     };

src/types/caddy.ts

@@ -13,6 +13,8 @@ export interface CaddyHost {
   tls?: {
     email?: string;
     selfSigned?: boolean;
+    certFile?: string;
+    keyFile?: string;
   };
   encode?: boolean;
   basicAuth?: {