From 9046f07e30eea14b66c965fbfc77bc8cc8903b8f Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Tue, 1 Mar 2022 21:19:55 +0000
Subject: [PATCH] Set checkmark as default for extra slot

---
 .../templates/domain_sections/https.vue       | 24 -------------
 .../templates/domain_sections/logging.vue     |  6 ----
 .../templates/domain_sections/php.vue         | 15 --------
 .../templates/domain_sections/python.vue      |  6 ----
 .../templates/domain_sections/restrict.vue    | 27 --------------
 .../domain_sections/reverse_proxy.vue         |  3 --
 .../templates/domain_sections/routing.vue     | 15 --------
 .../templates/domain_sections/server.vue      |  9 -----
 .../templates/global_sections/docker.vue      |  6 ----
 .../templates/global_sections/https.vue       | 36 -------------------
 .../templates/global_sections/logging.vue     | 30 ----------------
 .../templates/global_sections/performance.vue |  6 ----
 .../global_sections/reverse_proxy.vue         |  3 --
 .../templates/global_sections/security.vue    |  9 -----
 .../templates/global_sections/tools.vue       |  6 ----
 src/nginxconfig/templates/inputs/checkbox.vue | 16 +++++----
 .../templates/inputs/pretty_input.vue         | 20 +++++++++--
 src/nginxconfig/templates/inputs/radio.vue    | 16 +++++----
 18 files changed, 35 insertions(+), 218 deletions(-)

diff --git a/src/nginxconfig/templates/domain_sections/https.vue b/src/nginxconfig/templates/domain_sections/https.vue
index 6f88542..2db3a98 100644
--- a/src/nginxconfig/templates/domain_sections/https.vue
+++ b/src/nginxconfig/templates/domain_sections/https.vue
@@ -35,9 +35,6 @@ THE SOFTWARE.
                     <div :class="`control${httpsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="https" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.https.enableEncryptedSslConnection') }}
                             </PrettyCheck>
                         </div>
@@ -55,9 +52,6 @@ THE SOFTWARE.
                     <div :class="`control${http2Changed ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="http2" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.https.enableHttp2Connections') }}
                             </PrettyCheck>
                         </div>
@@ -75,9 +69,6 @@ THE SOFTWARE.
                     <div :class="`control${http3Changed ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="http3" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.https.enableHttp3Connections') }}
                             </PrettyCheck>
                         </div>
@@ -113,9 +104,6 @@ THE SOFTWARE.
                     <div :class="`control${forceHttpsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="forceHttps" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 (http://{{ $parent.$props.data.server.domain.computed }}
                                 <i class="fas fa-long-arrow-alt-right"></i>
                                 https://{{ $parent.$props.data.server.domain.computed }})
@@ -135,9 +123,6 @@ THE SOFTWARE.
                     <div :class="`control${hstsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="hsts" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.https.enableStrictTransportSecurity') }}
                             </PrettyCheck>
                         </div>
@@ -146,9 +131,6 @@ THE SOFTWARE.
                     <div v-if="hstsSubdomainsEnabled" :class="`control${hstsSubdomainsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="hstsSubdomains" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.https.enableIncludeSubDomains') }}
                             </PrettyCheck>
                         </div>
@@ -157,9 +139,6 @@ THE SOFTWARE.
                     <div v-if="hstsPreloadEnabled" :class="`control${hstsPreloadChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="hstsPreload" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.https.enablePreload') }}
                             </PrettyCheck>
                         </div>
@@ -180,9 +159,6 @@ THE SOFTWARE.
                     >
                         <div class="radio">
                             <PrettyRadio v-model="certType" :value="value" class="p-default p-round p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t(name) }}
                             </PrettyRadio>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/logging.vue b/src/nginxconfig/templates/domain_sections/logging.vue
index c00b3c0..3335a0e 100644
--- a/src/nginxconfig/templates/domain_sections/logging.vue
+++ b/src/nginxconfig/templates/domain_sections/logging.vue
@@ -35,9 +35,6 @@ THE SOFTWARE.
                     <div :class="`control${accessLogChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="accessLog" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.logging.enableForThisDomain') }}
                             </PrettyCheck>
                         </div>
@@ -55,9 +52,6 @@ THE SOFTWARE.
                     <div :class="`control${errorLogChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="errorLog" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.logging.enableForThisDomain') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/php.vue b/src/nginxconfig/templates/domain_sections/php.vue
index 85c76e6..b617655 100644
--- a/src/nginxconfig/templates/domain_sections/php.vue
+++ b/src/nginxconfig/templates/domain_sections/php.vue
@@ -56,9 +56,6 @@ THE SOFTWARE.
                     <div :class="`control${phpChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="php" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.php.enablePhp') }}
                             </PrettyCheck>
                         </div>
@@ -128,9 +125,6 @@ THE SOFTWARE.
                     <div :class="`control${wordPressRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="wordPressRules" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.php.enableWordPressRules') }}
                             </PrettyCheck>
                         </div>
@@ -148,9 +142,6 @@ THE SOFTWARE.
                     <div :class="`control${drupalRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="drupalRules" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.php.enableDrupalRules') }}
                             </PrettyCheck>
                         </div>
@@ -168,9 +159,6 @@ THE SOFTWARE.
                     <div :class="`control${magentoRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="magentoRules" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.php.enableMagentoRules') }}
                             </PrettyCheck>
                         </div>
@@ -188,9 +176,6 @@ THE SOFTWARE.
                     <div :class="`control${joomlaRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="joomlaRules" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.php.enableJoomlaRules') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/python.vue b/src/nginxconfig/templates/domain_sections/python.vue
index 84bfa23..c049638 100644
--- a/src/nginxconfig/templates/domain_sections/python.vue
+++ b/src/nginxconfig/templates/domain_sections/python.vue
@@ -56,9 +56,6 @@ THE SOFTWARE.
                     <div :class="`control${pythonChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="python" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.python.enablePython') }}
                             </PrettyCheck>
                         </div>
@@ -76,9 +73,6 @@ THE SOFTWARE.
                     <div :class="`control${djangoRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="djangoRules" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.python.enableDjangoRules') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/restrict.vue b/src/nginxconfig/templates/domain_sections/restrict.vue
index 41603b1..a2c0e22 100644
--- a/src/nginxconfig/templates/domain_sections/restrict.vue
+++ b/src/nginxconfig/templates/domain_sections/restrict.vue
@@ -37,9 +37,6 @@ THE SOFTWARE.
                             <div :class="`control${getMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="getMethod" class="p-default p-curve p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -56,9 +53,6 @@ THE SOFTWARE.
                             <div :class="`control${postMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="postMethod" class="p-default p-curve p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -75,9 +69,6 @@ THE SOFTWARE.
                             <div :class="`control${putMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="putMethod" class="p-default p-curve p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -94,9 +85,6 @@ THE SOFTWARE.
                             <div :class="`control${patchMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="patchMethod" class="p-default p-curve p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -113,9 +101,6 @@ THE SOFTWARE.
                             <div :class="`control${deleteMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="deleteMethod" class="p-default p-curve p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -134,9 +119,6 @@ THE SOFTWARE.
                             <div :class="`control${headMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="headMethod" class="p-default p-curve p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -153,9 +135,6 @@ THE SOFTWARE.
                             <div :class="`control${connectMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="connectMethod" class="p-default p-curve p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -172,9 +151,6 @@ THE SOFTWARE.
                             <div :class="`control${optionsMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="optionsMethod" class="p-default p-curve p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -191,9 +167,6 @@ THE SOFTWARE.
                             <div :class="`control${traceMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="traceMethod" class="p-default p-curve p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
diff --git a/src/nginxconfig/templates/domain_sections/reverse_proxy.vue b/src/nginxconfig/templates/domain_sections/reverse_proxy.vue
index f08f471..2011ef6 100644
--- a/src/nginxconfig/templates/domain_sections/reverse_proxy.vue
+++ b/src/nginxconfig/templates/domain_sections/reverse_proxy.vue
@@ -56,9 +56,6 @@ THE SOFTWARE.
                     <div class="control">
                         <div class="checkbox">
                             <PrettyCheck v-model="reverseProxy" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.reverseProxy.enableReverseProxy') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/routing.vue b/src/nginxconfig/templates/domain_sections/routing.vue
index bb0071f..64ea65c 100644
--- a/src/nginxconfig/templates/domain_sections/routing.vue
+++ b/src/nginxconfig/templates/domain_sections/routing.vue
@@ -35,9 +35,6 @@ THE SOFTWARE.
                     <div :class="`control${rootChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="root" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('common.enable') }}
                             </PrettyCheck>
                         </div>
@@ -58,9 +55,6 @@ THE SOFTWARE.
                     >
                         <div class="radio">
                             <PrettyRadio v-model="index" :value="value" class="p-default p-round p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ value }}
                             </PrettyRadio>
                         </div>
@@ -78,9 +72,6 @@ THE SOFTWARE.
                     <div v-if="fallbackHtmlEnabled" :class="`control${fallbackHtmlChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="fallbackHtml" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 index.html
                             </PrettyCheck>
                         </div>
@@ -88,9 +79,6 @@ THE SOFTWARE.
                     <div v-if="fallbackPhpEnabled" :class="`control${fallbackPhpChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="fallbackPhp" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 index.php
                             </PrettyCheck>
                         </div>
@@ -126,9 +114,6 @@ THE SOFTWARE.
                     <div :class="`control${legacyPhpRoutingChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="legacyPhpRouting" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.domainSections.routing.enableLegacyRouting') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/server.vue b/src/nginxconfig/templates/domain_sections/server.vue
index e3810cf..6f327e5 100644
--- a/src/nginxconfig/templates/domain_sections/server.vue
+++ b/src/nginxconfig/templates/domain_sections/server.vue
@@ -70,9 +70,6 @@ THE SOFTWARE.
                     <div :class="`control${wwwSubdomainChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="wwwSubdomain" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 (www.{{ $props.data.domain.computed }})
                             </PrettyCheck>
                         </div>
@@ -90,9 +87,6 @@ THE SOFTWARE.
                     <div :class="`control${cdnSubdomainChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cdnSubdomain" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 (cdn.{{ $props.data.domain.computed }})
                             </PrettyCheck>
                         </div>
@@ -110,9 +104,6 @@ THE SOFTWARE.
                     <div :class="`control${redirectSubdomainsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="redirectSubdomains" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 ({{ wwwSubdomain ? `${domain}, ` : '' }}*.{{ $props.data.domain.computed }}
                                 <i class="fas fa-long-arrow-alt-right"></i>
                                 {{ wwwSubdomain ? 'www.' : '' }}{{ $props.data.domain.computed }})
diff --git a/src/nginxconfig/templates/global_sections/docker.vue b/src/nginxconfig/templates/global_sections/docker.vue
index a96a690..2406dec 100644
--- a/src/nginxconfig/templates/global_sections/docker.vue
+++ b/src/nginxconfig/templates/global_sections/docker.vue
@@ -52,9 +52,6 @@ THE SOFTWARE.
                     <div :class="`control${dockerfileChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="dockerfile" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.docker.includeDockerfile') }}
                             </PrettyCheck>
                         </div>
@@ -71,9 +68,6 @@ THE SOFTWARE.
                     <div :class="`control${dockerComposeChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="dockerCompose" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.docker.includeDockerCompose') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/global_sections/https.vue b/src/nginxconfig/templates/global_sections/https.vue
index cdd8402..c436c45 100644
--- a/src/nginxconfig/templates/global_sections/https.vue
+++ b/src/nginxconfig/templates/global_sections/https.vue
@@ -35,9 +35,6 @@ THE SOFTWARE.
                     <div :class="`control${portReuseChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="portReuse" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.https.enableReuseOfPort') }}
                             </PrettyCheck>
                         </div>
@@ -75,9 +72,6 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="sslProfile" :value="value" class="p-default p-round p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
@@ -96,9 +90,6 @@ THE SOFTWARE.
                         <div :class="`control${ocspCloudflareChanged ? ' is-changed' : ''}`">
                             <div class="checkbox">
                                 <PrettyCheck v-model="ocspCloudflare" class="p-default p-curve p-fill p-icon">
-                                    <template #extra>
-                                        <i class="icon fas fa-check"></i>
-                                    </template>
                                     {{ $t('templates.globalSections.https.cloudflareResolver') }}
                                 </PrettyCheck>
                             </div>
@@ -110,9 +101,6 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="ocspCloudflareType" :value="value" class="p-default p-round p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
@@ -122,9 +110,6 @@ THE SOFTWARE.
                         <div :class="`control${ocspGoogleChanged ? ' is-changed' : ''}`">
                             <div class="checkbox">
                                 <PrettyCheck v-model="ocspGoogle" class="p-default p-curve p-fill p-icon">
-                                    <template #extra>
-                                        <i class="icon fas fa-check"></i>
-                                    </template>
                                     {{ $t('templates.globalSections.https.googlePublicDns') }}
                                 </PrettyCheck>
                             </div>
@@ -136,9 +121,6 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="ocspGoogleType" :value="value" class="p-default p-round p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
@@ -148,9 +130,6 @@ THE SOFTWARE.
                         <div :class="`control${ocspOpenDnsChanged ? ' is-changed' : ''}`">
                             <div class="checkbox">
                                 <PrettyCheck v-model="ocspOpenDns" class="p-default p-curve p-fill p-icon">
-                                    <template #extra>
-                                        <i class="icon fas fa-check"></i>
-                                    </template>
                                     {{ $t('templates.globalSections.https.openDns') }}
                                 </PrettyCheck>
                             </div>
@@ -162,9 +141,6 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="ocspOpenDnsType" :value="value" class="p-default p-round p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
@@ -174,9 +150,6 @@ THE SOFTWARE.
                         <div :class="`control${ocspQuad9Changed ? ' is-changed' : ''}`">
                             <div class="checkbox">
                                 <PrettyCheck v-model="ocspQuad9" class="p-default p-curve p-fill p-icon">
-                                    <template #extra>
-                                        <i class="icon fas fa-check"></i>
-                                    </template>
                                     {{ $t('templates.globalSections.https.quad9') }}
                                 </PrettyCheck>
                             </div>
@@ -188,9 +161,6 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="ocspQuad9Type" :value="value" class="p-default p-round p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
@@ -200,9 +170,6 @@ THE SOFTWARE.
                         <div :class="`control${ocspVerisignChanged ? ' is-changed' : ''}`">
                             <div class="checkbox">
                                 <PrettyCheck v-model="ocspVerisign" class="p-default p-curve p-fill p-icon">
-                                    <template #extra>
-                                        <i class="icon fas fa-check"></i>
-                                    </template>
                                     {{ $t('templates.globalSections.https.verisign') }}
                                 </PrettyCheck>
                             </div>
@@ -214,9 +181,6 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="ocspVerisignType" :value="value" class="p-default p-round p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
diff --git a/src/nginxconfig/templates/global_sections/logging.vue b/src/nginxconfig/templates/global_sections/logging.vue
index 434d480..c831a3b 100644
--- a/src/nginxconfig/templates/global_sections/logging.vue
+++ b/src/nginxconfig/templates/global_sections/logging.vue
@@ -71,9 +71,6 @@ THE SOFTWARE.
                     <div :class="`control${logNotFoundChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="logNotFound" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.logging.enableFileNotFoundErrorLogging') }} error_log
                             </PrettyCheck>
                         </div>
@@ -91,9 +88,6 @@ THE SOFTWARE.
                     <div v-if="cloudflareEnabled" :class="`control${cloudflareChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cloudflare" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.logging.enableCloudflare') }}
                             </PrettyCheck>
                         </div>
@@ -101,9 +95,6 @@ THE SOFTWARE.
                     <div v-if="cfRayEnabled" :class="`control${cfRayChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cfRay" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.logging.cfRay') }}
                             </PrettyCheck>
                         </div>
@@ -111,9 +102,6 @@ THE SOFTWARE.
                     <div v-if="cfConnectingIpEnabled" :class="`control${cfConnectingIpChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cfConnectingIp" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.logging.cfConnectingIp') }}
                             </PrettyCheck>
                         </div>
@@ -121,9 +109,6 @@ THE SOFTWARE.
                     <div v-if="xForwardedForEnabled" :class="`control${xForwardedForChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="xForwardedFor" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.logging.xForwardedFor') }}
                             </PrettyCheck>
                         </div>
@@ -131,9 +116,6 @@ THE SOFTWARE.
                     <div v-if="xForwardedProtoEnabled" :class="`control${xForwardedProtoChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="xForwardedProto" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.logging.xForwardedProto') }}
                             </PrettyCheck>
                         </div>
@@ -141,9 +123,6 @@ THE SOFTWARE.
                     <div v-if="trueClientIpEnabled" :class="`control${trueClientIpChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="trueClientIp" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.logging.trueClientIp') }}
                             </PrettyCheck>
                         </div>
@@ -151,9 +130,6 @@ THE SOFTWARE.
                     <div v-if="cfIpCountryEnabled" :class="`control${cfIpCountryChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cfIpCountry" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.logging.cfIpCountry') }}
                             </PrettyCheck>
                         </div>
@@ -161,9 +137,6 @@ THE SOFTWARE.
                     <div v-if="cfVisitorEnabled" :class="`control${cfVisitorChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cfVisitor" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.logging.cfVisitor') }}
                             </PrettyCheck>
                         </div>
@@ -171,9 +144,6 @@ THE SOFTWARE.
                     <div v-if="cdnLoopEnabled" :class="`control${cdnLoopChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cdnLoop" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.logging.cdnLoop') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/global_sections/performance.vue b/src/nginxconfig/templates/global_sections/performance.vue
index 31b922c..251377a 100644
--- a/src/nginxconfig/templates/global_sections/performance.vue
+++ b/src/nginxconfig/templates/global_sections/performance.vue
@@ -35,9 +35,6 @@ THE SOFTWARE.
                     <div :class="`control${gzipCompressionChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="gzipCompression" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.performance.enableGzipCompression') }}
                             </PrettyCheck>
                         </div>
@@ -55,9 +52,6 @@ THE SOFTWARE.
                     <div :class="`control${brotliCompressionChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="brotliCompression" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.performance.enableBrotliCompression') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/global_sections/reverse_proxy.vue b/src/nginxconfig/templates/global_sections/reverse_proxy.vue
index beab448..3a33047 100644
--- a/src/nginxconfig/templates/global_sections/reverse_proxy.vue
+++ b/src/nginxconfig/templates/global_sections/reverse_proxy.vue
@@ -130,9 +130,6 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="proxyCoexistenceXForwarded" :value="value" class="p-default p-round p-fill p-icon">
-                                        <template #extra>
-                                            <i class="icon fas fa-check"></i>
-                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
diff --git a/src/nginxconfig/templates/global_sections/security.vue b/src/nginxconfig/templates/global_sections/security.vue
index d9d7368..ee1df79 100644
--- a/src/nginxconfig/templates/global_sections/security.vue
+++ b/src/nginxconfig/templates/global_sections/security.vue
@@ -96,9 +96,6 @@ THE SOFTWARE.
                     <div :class="`control${serverTokensChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="serverTokens" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('common.enable') }}
                             </PrettyCheck>
                         </div>
@@ -116,9 +113,6 @@ THE SOFTWARE.
                     <div :class="`control${limitReqChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="limitReq" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('common.enable') }}
                             </PrettyCheck>
                         </div>
@@ -136,9 +130,6 @@ THE SOFTWARE.
                     <div :class="`control${securityTxt ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="securityTxt" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('common.enable') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/global_sections/tools.vue b/src/nginxconfig/templates/global_sections/tools.vue
index 1e29f0e..98643df 100644
--- a/src/nginxconfig/templates/global_sections/tools.vue
+++ b/src/nginxconfig/templates/global_sections/tools.vue
@@ -35,9 +35,6 @@ THE SOFTWARE.
                     <div :class="`control${modularizedStructureChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="modularizedStructure" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.tools.enableModularizedConfigFiles') }}
                             </PrettyCheck>
                         </div>
@@ -55,9 +52,6 @@ THE SOFTWARE.
                     <div :class="`control${symlinkVhostChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="symlinkVhost" class="p-default p-curve p-fill p-icon">
-                                <template #extra>
-                                    <i class="icon fas fa-check"></i>
-                                </template>
                                 {{ $t('templates.globalSections.tools.enableSymLinksFrom') }} sites-available/
                                 {{ $t('templates.globalSections.tools.to') }} sites-enabled/
                             </PrettyCheck>
diff --git a/src/nginxconfig/templates/inputs/checkbox.vue b/src/nginxconfig/templates/inputs/checkbox.vue
index c79952f..5dfd3ce 100644
--- a/src/nginxconfig/templates/inputs/checkbox.vue
+++ b/src/nginxconfig/templates/inputs/checkbox.vue
@@ -24,12 +24,14 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 
-<script>
-    import PrettyInput from './pretty_input';
+<template>
+    <PrettyInput type="checkbox">
+        <template v-for="(_, slot) in $slots" #[slot]="scope">
+            <slot :name="slot" v-bind="scope || {}" />
+        </template>
+    </PrettyInput>
+</template>
 
-    export default {
-        ...PrettyInput,
-        name: 'Checkbox',
-        input_type: 'checkbox',
-    };
+<script setup>
+    import PrettyInput from './pretty_input';
 </script>
diff --git a/src/nginxconfig/templates/inputs/pretty_input.vue b/src/nginxconfig/templates/inputs/pretty_input.vue
index f00f0dd..ca0dbb5 100644
--- a/src/nginxconfig/templates/inputs/pretty_input.vue
+++ b/src/nginxconfig/templates/inputs/pretty_input.vue
@@ -24,7 +24,23 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 
-<script>
+<template>
+    <PrettyInput>
+        <!-- Set the FontAwesome check as the default extra while we're here -->
+        <template #extra>
+            <slot name="extra">
+                <i class="icon fas fa-check"></i>
+            </slot>
+        </template>
+
+        <!-- Load in all other slots -->
+        <template v-for="(_, slot) in $slots" #[slot]="scope">
+            <slot :name="slot" v-bind="scope || {}" />
+        </template>
+    </PrettyInput>
+</template>
+
+<script setup>
     import PrettyInput from 'pretty-checkbox-vue/src/PrettyInput';
 
     // Vue 3 fix: Remove top-level model as it's unused
@@ -51,6 +67,4 @@ THE SOFTWARE.
                 : Reflect.get(target, key),
         }), args);
     })(PrettyInput.methods.updateInput);
-
-    export default PrettyInput;
 </script>
diff --git a/src/nginxconfig/templates/inputs/radio.vue b/src/nginxconfig/templates/inputs/radio.vue
index 568069c..8902046 100644
--- a/src/nginxconfig/templates/inputs/radio.vue
+++ b/src/nginxconfig/templates/inputs/radio.vue
@@ -24,12 +24,14 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 
-<script>
-    import PrettyInput from './pretty_input';
+<template>
+    <PrettyInput type="radio">
+        <template v-for="(_, slot) in $slots" #[slot]="scope">
+            <slot :name="slot" v-bind="scope || {}" />
+        </template>
+    </PrettyInput>
+</template>
 
-    export default {
-        ...PrettyInput,
-        name: 'Radio',
-        input_type: 'radio',
-    };
+<script setup>
+    import PrettyInput from './pretty_input';
 </script>