Merge branch 'feature/update-invite-token-dialog' into 'develop'

Ability to copy invite link from dialog window

See merge request pleroma/admin-fe!200

src/lang/en.js

@@ -96,7 +96,7 @@ export default {
     logInViaPleromaFE: 'Log in via PleromaFE',
     username: 'username@host',
     password: 'password',
-    omitHostname: 'omit hostname if Pleroma is located on this domain',
+    omitHostname: 'Omit hostname if Pleroma is located on this domain',
     errorMessage: 'Username must contain username and host, e.g. john@pleroma.social',
     any: 'any',
     thirdparty: 'Or connect with',
@@ -487,7 +487,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/router/index.js

@@ -97,7 +97,7 @@ const moderationLog = {
   children: [
     {
       path: 'index',
-      component: () => import('@/views/moderation_log/index'),
+      component: () => import('@/views/moderationLog/index'),
       name: 'Moderation Log',
       meta: { title: 'moderationLog', icon: 'list', noCache: true }
     }

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">
-              {{ inviteLink }}
-            </el-link>
+            <div class="invite-link-container">
+              <el-link :href="inviteLink" :underline="false" target="_blank">
+                {{ 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;

src/views/login/index.vue

@@ -9,7 +9,7 @@
 
       <el-form-item prop="username">
         <span class="svg-container">
-          <svg-icon icon-class="user" />
+          <i class="el-icon-user"/>
         </span>
         <el-input
           v-model="loginForm.username"
@@ -23,7 +23,7 @@
 
       <el-form-item prop="password">
         <span class="svg-container">
-          <svg-icon icon-class="password" />
+          <i class="el-icon-key"/>
         </span>
         <el-input
           v-model="loginForm.password"