allow clients with no privateKey (#793)

Thank you @willtho89!

src/lib/WireGuard.js

@@ -141,7 +141,7 @@ AllowedIPs = ${client.address}/32`;
       createdAt: new Date(client.createdAt),
       updatedAt: new Date(client.updatedAt),
       allowedIPs: client.allowedIPs,
-
+      downloadableConfig: 'privateKey' in client,
       persistentKeepalive: null,
       latestHandshakeAt: null,
       transferRx: null,
@@ -196,8 +196,9 @@ AllowedIPs = ${client.address}/32`;
     const config = await this.getConfig();
     const client = await this.getClient({ clientId });
 
-    return `[Interface]
-PrivateKey = ${client.privateKey}
+    return `
+[Interface]
+PrivateKey = ${client.privateKey ? `${client.privateKey}` : 'REPLACE_ME'}
 Address = ${client.address}/24
 ${WG_DEFAULT_DNS ? `DNS = ${WG_DEFAULT_DNS}\n` : ''}\
 ${WG_MTU ? `MTU = ${WG_MTU}\n` : ''}\

src/tailwind.config.js

@@ -16,4 +16,15 @@ module.exports = {
       '2xl': '1536px',
     },
   },
+  plugins: [
+    function addDisabledClass({ addUtilities }) {
+      const newUtilities = {
+        '.inactive': {
+          opacity: '0.25',
+          cursor: 'default',
+        },
+      };
+      addUtilities(newUtilities);
+    },
+  ],
 };

src/www/css/app.css

@@ -1387,6 +1387,11 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.inactive {
+  opacity: 0.25;
+  cursor: default;
+}
+
 .last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }

src/www/index.html

@@ -254,9 +254,14 @@
 
                     <!-- Show QR-->
 
-                    <button
-                      class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
-                      :title="$t('showQR')" @click="qrcode = `./api/wireguard/client/${client.id}/qrcode.svg`">
+                    <button :disabled="!client.downloadableConfig"
+                      class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 p-2 rounded transition"
+                      :class="{
+                        'hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white': client.downloadableConfig,
+                        'inactive': !client.downloadableConfig
+                      }"
+                      :title="!client.downloadableConfig ? $t('noPrivKey') : $t('showQR')"
+                      @click="qrcode = `./api/wireguard/client/${client.id}/qrcode.svg`">
                       <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -265,9 +270,16 @@
                     </button>
 
                     <!-- Download Config -->
-                    <a :href="'./api/wireguard/client/' + client.id + '/configuration'" download
-                      class="align-middle inline-block bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
-                      :title="$t('downloadConfig')">
+                    <a :disabled="!client.downloadableConfig"
+                      :href="'./api/wireguard/client/' + client.id + '/configuration'"
+                      :download="client.downloadableConfig ? 'configuration' : null"
+                      class="align-middle inline-block bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 p-2 rounded transition"
+                      :class="{
+                        'hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white': client.downloadableConfig,
+                        'inactive': !client.downloadableConfig
+                      }"
+                      :title="!client.downloadableConfig ? $t('noPrivKey') : $t('downloadConfig')"
+                      @click="if(!client.downloadableConfig) { $event.preventDefault(); }">
                       <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

src/www/js/i18n.js

@@ -23,6 +23,7 @@ const messages = { // eslint-disable-line no-unused-vars
     disableClient: 'Disable Client',
     enableClient: 'Enable Client',
     noClients: 'There are no clients yet.',
+    noPrivKey: 'This client has no known private key. Cannot create Configuration.',
     showQR: 'Show QR Code',
     downloadConfig: 'Download Configuration',
     madeBy: 'Made by',
@@ -213,6 +214,7 @@ const messages = { // eslint-disable-line no-unused-vars
     disableClient: 'Client deaktivieren',
     enableClient: 'Client aktivieren',
     noClients: 'Es wurden noch keine Clients konfiguriert.',
+    noPrivKey: 'Es ist kein Private Key für diesen Client bekannt. Eine Konfiguration kann nicht erstellt werden.',
     showQR: 'Zeige den QR Code',
     downloadConfig: 'Konfiguration herunterladen',
     madeBy: 'Erstellt von',