Add ability to copy invite link from dialog window

src/lang/en.js

@@ -482,7 +482,8 @@ export default {
     invalidEmailError: 'Please input valid e-mail',
     emailSent: 'Invite was sent',
     submitFormError: 'There are invalid values in the form. Please fix them before continuing.',
-    inviteViaEmailAlert: 'To send invite via email make sure to enable `invites_enabled` and disable `registrations_open`'
+    inviteViaEmailAlert: 'To send invite via email make sure to enable `invites_enabled` and disable `registrations_open`',
+    copyLink: 'Copy link'
   },
   emoji: {
     emojiPacks: 'Emoji packs',

src/utils/clipboard.js

@@ -3,7 +3,7 @@ import Clipboard from 'clipboard'
 
 function clipboardSuccess() {
   Vue.prototype.$message({
-    message: 'Copy successfully',
+    message: 'Copied!',
     type: 'success',
     duration: 1500
   })

src/views/invites/index.vue

@@ -22,6 +22,7 @@
       :visible.sync="createTokenDialogVisible"
       :show-close="false"
       :title="$t('invites.createInviteToken')"
+      :width="isTokenCreated ? '60%' : '30%'"
       custom-class="create-new-token-dialog">
       <el-form ref="newTokenForm" :model="newTokenForm" :label-width="getLabelWidth" status-icon>
         <el-form-item :label="$t('invites.maxUse')">
@@ -51,9 +52,12 @@
         </div>
         <el-form label-width="85px" class="new-token-card">
           <el-form-item :label="$t('invites.inviteLink')">
-            <el-link :href="inviteLink" :underline="false" target="_blank">
+            <div class="invite-link-container">
-              {{ inviteLink }}
+              <el-link :href="inviteLink" :underline="false" target="_blank">
-            </el-link>
+                {{ inviteLink }}
+              </el-link>
+              <el-button type="text" size="small" @click="handleCopy($event)">{{ $t('invites.copyLink') }}</el-button>
+            </div>
           </el-form-item>
           <el-form-item :label="$t('invites.token')">
             {{ newToken.token }}
@@ -156,6 +160,7 @@
 </template>
 
 <script>
+import clip from '@/utils/clipboard'
 import RebootButton from '@/components/RebootButton'
 import { mapGetters } from 'vuex'
 import { baseName } from '@/api/utils'
@@ -194,6 +199,9 @@ export default {
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
     },
+    isTokenCreated() {
+      return 'token' in this.newToken
+    },
     loading() {
       return this.$store.state.invites.loading
     },
@@ -216,10 +224,15 @@ export default {
       this.$store.dispatch('RemoveNewToken')
       this.$data.inviteUserForm.email = ''
       this.$data.inviteUserForm.name = ''
+      this.$data.newTokenForm.maxUse = 1
+      this.$data.newTokenForm.expiresAt = ''
     },
     createToken() {
       this.$store.dispatch('GenerateInviteToken', this.$data.newTokenForm)
     },
+    handleCopy(event) {
+      clip(this.inviteLink, event)
+    },
     async inviteUserViaEmail() {
       this.$refs['inviteUserForm'].validate(async(valid) => {
         if (valid) {
@@ -269,7 +282,6 @@ export default {
     padding: 10px;
   }
   .create-new-token-dialog {
-    width: 50%;
     a {
       margin-bottom: 3px;
     }
@@ -286,6 +298,14 @@ export default {
   .icon {
     margin-right: 5px;
   }
+  .invite-link-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    button {
+      margin-left: 15px;
+    }
+  }
   .invite-token-table {
     width: 100%;
     margin: 0 15px;