List invite tokens

src/api/users.js

@@ -63,7 +63,16 @@ export async function generateInviteToken(max_use, expires_at, authHost, token)
     url: `/api/pleroma/admin/users/invite_token`,
     method: 'get',
     headers: authHeaders(token),
-    invite: typeof expires_at === 'object' ? { max_use, expires_at } : { max_use }
+    invite: expires_at && expires_at.length > 0 ? { max_use, expires_at } : { max_use }
+  })
+}
+
+export async function listInviteTokens(authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/invites`,
+    method: 'get',
+    headers: authHeaders(token)
   })
 }
 

src/lang/en.js

@@ -201,7 +201,7 @@ export default {
     disableAnySubscriptionForMultiple: 'Disallow following users at all',
     selectUsers: 'Select users to apply actions to multiple users',
     moderateUsers: 'Moderate multiple users',
-    createAccount: 'Create new user account',
+    createAccount: 'Create new account and manage invites',
     apply: 'apply',
     remove: 'remove',
     grantRightConfirmation: 'Are you sure you want to grant {right} rights to all selected users?',
@@ -228,7 +228,8 @@ export default {
     maxUse: 'Max use',
     expiresAt: 'Expires at',
     tokenCreated: 'Invite token was created',
-    token: 'Token'
+    token: 'Token',
+    uses: 'Uses'
   },
   userProfile: {
     tags: 'Tags',

src/store/modules/users.js

-import { addRight, createNewAccount, fetchUsers, deleteRight, deleteUser, generateInviteToken, searchUsers, tagUser, toggleUserActivation, untagUser } from '@/api/users'
+import { addRight, createNewAccount, fetchUsers, deleteRight, deleteUser, generateInviteToken, listInviteTokens, searchUsers, tagUser, toggleUserActivation, untagUser } from '@/api/users'
 
 const users = {
   state: {
@@ -13,7 +13,8 @@ const users = {
       active: false,
       deactivated: false
     },
-    newToken: {}
+    newToken: {},
+    inviteTokens: []
   },
   mutations: {
     SET_USERS: (state, users) => {
@@ -50,6 +51,9 @@ const users = {
     SET_SEARCH_QUERY: (state, query) => {
       state.searchQuery = query
     },
+    SET_TOKENS: (state, tokens) => {
+      state.inviteTokens = tokens.reverse()
+    },
     SET_USERS_FILTERS: (state, filters) => {
       state.filters = filters
     },
@@ -77,15 +81,20 @@ const users = {
       const users = state.fetchedUsers.filter(user => user.nickname !== data)
       commit('SET_USERS', users)
     },
+    async FetchInviteTokens({ commit, getters }) {
+      const response = await listInviteTokens(getters.authHost, getters.token)
+      commit('SET_TOKENS', response.data.invites)
+    },
     async FetchUsers({ commit, state, getters }, { page }) {
       commit('SET_LOADING', true)
       const filters = Object.keys(state.filters).filter(filter => state.filters[filter]).join()
       const response = await fetchUsers(filters, getters.authHost, getters.token, page)
       loadUsers(commit, page, response.data)
     },
-    async GenerateInviteToken({ commit, state, getters }, { maxUse, expiresAt }) {
+    async GenerateInviteToken({ commit, dispatch, getters }, { maxUse, expiresAt }) {
       const response = await generateInviteToken(maxUse, expiresAt, getters.authHost, getters.token)
       commit('SET_NEW_TOKEN', { token: response.data, maxUse: response.config.invite.max_use, expiresAt: response.config.invite.expires_at })
+      dispatch('FetchInviteTokens')
     },
     RemoveNewToken({ commit }) {
       commit('SET_NEW_TOKEN', {})

src/views/users/components/NewAccountDialog.vue

@@ -2,7 +2,6 @@
   <el-dialog
     :visible.sync="isVisible"
     :show-close="false"
-    :title="$t('users.createAccount')"
     custom-class="create-user-dialog"
     @open="resetForm">
     <el-tabs type="card">
@@ -32,7 +31,8 @@
             <el-date-picker
               v-model="newTokenForm.expiresAt"
               type="date"
-              placeholder="Pick a date"/>
+              placeholder="Pick a date"
+              value-format="yyyy-MM-dd"/>
           </el-form-item>
           <el-form-item>
             <el-button @click="closeDialogWindow">{{ $t('users.cancel') }}</el-button>
@@ -44,17 +44,47 @@
             </div>
             <p>{{ this.$t('users.token') }}: {{ newToken.token }}</p>
             <p>{{ this.$t('users.maxUse') }}: {{ newToken.maxUse }}</p>
-            <p>{{ this.$t('users.expiresAt') }}: {{ expiresAt }}</p>
+            <p>{{ this.$t('users.expiresAt') }}: {{ newToken.expiresAt }}</p>
           </el-card>
         </el-form>
       </el-tab-pane>
+      <el-tab-pane label="List invite tokens">
+        <el-table
+          :data="tokens"
+          border
+          height="350"
+          style="width: 100%">
+          <el-table-column
+            :label="$t('users.id')"
+            prop="id"
+            width="60"
+            align="center"/>
+          <el-table-column
+            :label="$t('users.token')"
+            prop="token"
+            width="400"/>
+          <el-table-column
+            :label="$t('users.expiresAt')"
+            prop="expires_at"
+            width="100"
+            align="center"/>
+          <el-table-column
+            :label="$t('users.maxUse')"
+            prop="max_use"
+            width="60"
+            align="center"/>
+          <el-table-column
+            :label="$t('users.uses')"
+            prop="uses"
+            width="60"
+            align="center"/>
+        </el-table>
+      </el-tab-pane>
     </el-tabs>
   </el-dialog>
 </template>
 
 <script>
-import moment from 'moment'
-
 export default {
   name: 'NewAccountDialog',
   props: {
@@ -90,9 +120,6 @@ export default {
     }
   },
   computed: {
-    expiresAt() {
-      return moment(this.newToken.expiresAt).format('MM-DD-YYYY')
-    },
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
     },
@@ -109,6 +136,9 @@ export default {
     },
     newToken() {
       return this.$store.state.users.newToken
+    },
+    tokens() {
+      return this.$store.state.users.inviteTokens
     }
   },
   methods: {
@@ -189,8 +219,11 @@ only screen and (max-width: 760px),
   .create-account-form-item {
     margin-bottom: 30px;
   }
+  .el-dialog .create-user-dialog {
+    padding: 0
+  }
   .el-dialog__body {
-    padding: 20px 20px 0 20px
+    padding: 15px 20px
   }
 }
 </style>

src/views/users/index.vue

@@ -205,6 +205,7 @@ export default {
   },
   mounted: function() {
     this.$store.dispatch('FetchUsers', { page: 1 })
+    this.$store.dispatch('FetchInviteTokens')
   },
   methods: {
     activationIcon(status) {