Fix short link. Generate One Time Link (#1301)

Co-authored-by: Vadim Babadzhanyan <vadim.babadzhanyan@my.games>

src/www/index.html

@@ -256,8 +256,8 @@
                           {{!uiTrafficStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}}
                         </span>
                       </div>
-                      <div v-if="uiShowLinks" :ref="'client-' + client.id + '-hash'" class="text-gray-400 text-xs">
-                        <a :href="'./' + client.hash + ''">{{document.location.protocol}}//{{document.location.host}}/{{client.hash}}</a>
+                      <div v-if="uiShowLinks && client.oneTimeLink !== null && client.oneTimeLink !== ''" :ref="'client-' + client.id + '-link'" class="text-gray-400 text-xs">
+                        <a :href="'./cnf/' + client.oneTimeLink + ''">{{document.location.protocol}}//{{document.location.host}}/cnf/{{client.oneTimeLink}}</a>
                       </div>
                       <!-- Expire Date -->
                       <div v-show="enableExpireTime" class=" block md:inline-block pb-1 md:pb-0 text-gray-500 dark:text-neutral-400 text-xs">
@@ -384,6 +384,22 @@
                       </svg>
                     </a>
 
+                    <!-- Short OneTime Link -->
+                    <button v-if="uiShowLinks" :disabled="!client.downloadableConfig"
+                      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,
+                        'is-disabled': !client.downloadableConfig
+                      }"
+                      :title="!client.downloadableConfig ? $t('noPrivKey') : $t('OneTimeLink')"
+                      @click="if(client.downloadableConfig) { showOneTimeLink(client); }">
+                      <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"
+                          d="M13.213 9.787a3.391 3.391 0 0 0-4.795 0l-3.425 3.426a3.39 3.39 0 0 0 4.795 4.794l.321-.304m-.321-4.49a3.39 3.39 0 0 0 4.795 0l3.424-3.426a3.39 3.39 0 0 0-4.794-4.795l-1.028.961"/>
+                      </svg>
+                    </button>
+
                     <!-- Delete -->
 
                     <button

src/www/js/api.js

@@ -132,6 +132,13 @@ class API {
     });
   }
 
+  async showOneTimeLink({ clientId }) {
+    return this.call({
+      method: 'post',
+      path: `/wireguard/client/${clientId}/generateOneTimeLink`,
+    });
+  }
+
   async enableClient({ clientId }) {
     return this.call({
       method: 'post',

src/www/js/app.js

@@ -312,6 +312,11 @@ new Vue({
         .catch((err) => alert(err.message || err.toString()))
         .finally(() => this.refresh().catch(console.error));
     },
+    showOneTimeLink(client) {
+      this.api.showOneTimeLink({ clientId: client.id })
+        .catch((err) => alert(err.message || err.toString()))
+        .finally(() => this.refresh().catch(console.error));
+    },
     enableClient(client) {
       this.api.enableClient({ clientId: client.id })
         .catch((err) => alert(err.message || err.toString()))

src/www/js/i18n.js

@@ -39,6 +39,7 @@ const messages = { // eslint-disable-line no-unused-vars
     sort: 'Sort',
     ExpireDate: 'Expire Date',
     Permanent: 'Permanent',
+    OneTimeLink: 'Generate short one time link',
   },
   ua: {
     name: 'Ім`я',
@@ -112,6 +113,7 @@ const messages = { // eslint-disable-line no-unused-vars
     sort: 'Сортировка',
     ExpireDate: 'Дата истечения срока',
     Permanent: 'Бессрочно',
+    OneTimeLink: 'Создать короткую одноразовую ссылку',
   },
   tr: { // Müslüm Barış Korkmazer @babico
     name: 'İsim',