From a806a061079b758c1892e39b93f9ee710bb3a27c Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 20 Apr 2020 22:53:34 +0000
Subject: [PATCH] Generate invite link

---
 CHANGELOG.md                |  1 +
 src/lang/en.js              |  1 +
 src/views/invites/index.vue | 40 +++++++++++++++++++++++++++++++++----
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5f172e8..d5e5b985 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Put Instance Reboot button on all pages of admin-fe
 - Make Instance Reboot button's positon fixed on Settings page
 - Update jest and babel-jest
+- Generate an invite link when an invite token has been generated
 
 ### Fixed
 
diff --git a/src/lang/en.js b/src/lang/en.js
index 74eaa909..314672f8 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -397,6 +397,7 @@ export default {
     expiresAt: 'Expires at',
     tokenCreated: 'Invite token was created',
     token: 'Token',
+    inviteLink: 'Invite link',
     uses: 'Uses',
     used: 'Used',
     cancel: 'Cancel',
diff --git a/src/views/invites/index.vue b/src/views/invites/index.vue
index 23862a5c..dceddc8c 100644
--- a/src/views/invites/index.vue
+++ b/src/views/invites/index.vue
@@ -49,9 +49,22 @@
         <div slot="header" class="clearfix">
           <span>{{ $t('invites.tokenCreated') }}</span>
         </div>
-        <p>{{ this.$t('invites.token') }}: {{ newToken.token }}</p>
-        <p>{{ this.$t('invites.maxUse') }}: {{ newToken.maxUse }}</p>
-        <p>{{ this.$t('invites.expiresAt') }}: {{ newToken.expiresAt }}</p>
+        <el-form label-width="80px" class="new-token-card">
+          <el-form-item :label="$t('invites.inviteLink')">
+            <el-link :href="inviteLink" :underline="false" target="_blank">
+              {{ inviteLink }}
+            </el-link>
+          </el-form-item>
+          <el-form-item :label="$t('invites.token')">
+            {{ newToken.token }}
+          </el-form-item>
+          <el-form-item :label="$t('invites.maxUse')">
+            {{ newToken.maxUse }}
+          </el-form-item>
+          <el-form-item :label="$t('invites.expiresAt')">
+            {{ newToken.expiresAt || '(not set)' }}
+          </el-form-item>
+        </el-form>
       </el-card>
     </el-dialog>
     <el-dialog
@@ -144,6 +157,8 @@
 
 <script>
 import RebootButton from '@/components/RebootButton'
+import { mapGetters } from 'vuex'
+import { baseName } from '@/api/utils'
 
 export default {
   components: { RebootButton },
@@ -167,9 +182,15 @@ export default {
     }
   },
   computed: {
+    ...mapGetters([
+      'authHost'
+    ]),
     getLabelWidth() {
       return this.isDesktop ? '100px' : '80px'
     },
+    inviteLink() {
+      return `${baseName(this.authHost)}/registration/${this.newToken.token}`
+    },
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
     },
@@ -248,7 +269,13 @@ export default {
     padding: 10px;
   }
   .create-new-token-dialog {
-    width: 40%
+    width: 50%;
+    a {
+      margin-bottom: 3px;
+    }
+    .el-card__body {
+      padding: 10px 20px;
+    }
   }
   .el-dialog__body {
     padding: 5px 20px 0 20px
@@ -283,6 +310,11 @@ export default {
     line-height: 22px;
     margin: 0 0 10px 0;
   }
+  .new-token-card {
+    .el-form-item {
+      margin: 0;
+    }
+  }
   .reboot-button {
     padding: 10px;
     margin: 0;