Skip to content
Snippets Groups Projects
Commit 3917d364 authored by Angelina Filippova's avatar Angelina Filippova
Browse files

Extract invites into different tab

parent c2a091e8
No related branches found
No related tags found
1 merge request!45Generate invite tokens from admin-fe
This commit is part of merge request !45. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
src/lang/en.js
+ 17
− 7
View file @ 3917d364
...@@ -201,7 +201,7 @@ export default { ...@@ -201,7 +201,7 @@ export default {
disableAnySubscriptionForMultiple: 'Disallow following users at all', disableAnySubscriptionForMultiple: 'Disallow following users at all',
selectUsers: 'Select users to apply actions to multiple users', selectUsers: 'Select users to apply actions to multiple users',
moderateUsers: 'Moderate multiple users', moderateUsers: 'Moderate multiple users',
createAccount: 'Create new account and manage invites', createAccount: 'Create new account',
apply: 'apply', apply: 'apply',
remove: 'remove', remove: 'remove',
grantRightConfirmation: 'Are you sure you want to grant {right} rights to all selected users?', grantRightConfirmation: 'Are you sure you want to grant {right} rights to all selected users?',
...@@ -224,12 +224,7 @@ export default { ...@@ -224,12 +224,7 @@ export default {
invalidEmailError: 'Please input valid e-mail', invalidEmailError: 'Please input valid e-mail',
emptyPasswordError: 'Please input the password', emptyPasswordError: 'Please input the password',
emptyNicknameError: 'Please input the username', emptyNicknameError: 'Please input the username',
invalidNicknameError: 'Username can include "a-z", "A-Z" and "0-9" characters', invalidNicknameError: 'Username can include "a-z", "A-Z" and "0-9" characters'
maxUse: 'Max use',
expiresAt: 'Expires at',
tokenCreated: 'Invite token was created',
token: 'Token',
uses: 'Uses'
}, },
userProfile: { userProfile: {
tags: 'Tags', tags: 'Tags',
...@@ -307,5 +302,20 @@ export default { ...@@ -307,5 +302,20 @@ export default {
database: 'Database', database: 'Database',
other: 'Other', other: 'Other',
success: 'Settings changed successfully!' success: 'Settings changed successfully!'
},
invites: {
inviteTokens: 'Invite tokens',
createInviteToken: 'Generate invite token',
pickDate: 'Pick a date',
maxUse: 'Max use',
expiresAt: 'Expires at',
tokenCreated: 'Invite token was created',
token: 'Token',
uses: 'Uses',
cancel: 'Cancel',
create: 'Create',
revoke: 'Revoke',
id: 'ID',
actions: 'Actions'
} }
} }
src/router/index.js
+ 13
− 1
View file @ 3917d364
...@@ -94,7 +94,19 @@ export const asyncRouterMap = [ ...@@ -94,7 +94,19 @@ export const asyncRouterMap = [
path: 'index', path: 'index',
component: () => import('@/views/users/index'), component: () => import('@/views/users/index'),
name: 'Users', name: 'Users',
meta: { title: 'users', icon: 'peoples', noCache: true } meta: { title: 'Users', icon: 'peoples', noCache: true }
}
]
},
{
path: '/invites',
component: Layout,
children: [
{
path: 'index',
component: () => import('@/views/invites/index'),
name: 'Invites',
meta: { title: 'Invites', icon: 'guide', noCache: true }
} }
] ]
}, },
......
src/views/invites/index.vue 0 → 100644
+ 146
− 0
View file @ 3917d364
<template>
<div class="invites-container">
<h1>{{ $t('invites.inviteTokens') }}</h1>
<el-button class="create-invite-token" @click="dialogVisible = true">
<span>
<i class="el-icon-plus"/>
{{ $t('invites.createInviteToken') }}
</span>
</el-button>
<el-dialog
:visible.sync="dialogVisible"
:show-close="false"
:title="$t('invites.createInviteToken')"
width="60%"
custom-class="create-user-dialog">
<el-form ref="newTokenForm" :model="newTokenForm" :label-width="getLabelWidth" status-icon>
<el-form-item :label="$t('invites.maxUse')" class="create-account-form-item">
<el-input-number v-model="newTokenForm.maxUse" :min="0"/>
</el-form-item>
<el-form-item :label="$t('invites.expiresAt')" class="create-account-form-item">
<el-date-picker
v-model="newTokenForm.expiresAt"
:placeholder="$t('invites.pickDate')"
type="date"
value-format="yyyy-MM-dd"/>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="closeDialogWindow">{{ $t('invites.cancel') }}</el-button>
<el-button type="primary" @click="createToken">{{ $t('invites.create') }}</el-button>
</span>
<el-card v-if="'token' in newToken">
<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-card>
</el-dialog>
<el-table
v-loading="loading"
:data="tokens"
class="invite-token-table">
<el-table-column
:label="$t('invites.id')"
prop="id"
min-width="60"/>
<el-table-column
:label="$t('invites.token')"
prop="token"
min-width="350"/>
<el-table-column
:label="$t('invites.expiresAt')"
prop="expires_at"
min-width="110"/>
<el-table-column
:label="$t('invites.maxUse')"
prop="max_use"
min-width="60"/>
<el-table-column
:label="$t('invites.uses')"
prop="uses"
min-width="60"/>
<el-table-column
:label="$t('invites.actions')"
width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click.native.prevent="revokeInviteToken(scope.$index, tableData)">
{{ $t('invites.revoke') }}
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
newTokenForm: {
maxUse: 1,
expiresAt: ''
},
dialogVisible: false
}
},
computed: {
getLabelWidth() {
return this.isDesktop ? '120px' : '80px'
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
newToken() {
return this.$store.state.users.newToken
},
tokens() {
return this.$store.state.users.inviteTokens
}
},
mounted() {
this.$store.dispatch('FetchInviteTokens')
},
methods: {
closeDialogWindow() {
this.dialogVisible = false
this.$store.dispatch('RemoveNewToken')
},
createToken() {
this.$store.dispatch('GenerateInviteToken', this.$data.newTokenForm)
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss'>
.invites-container {
.el-dialog__body {
padding: 20px 20px 0 20px
}
h1 {
margin: 22px 0 0 15px;
}
.create-invite-token {
text-align: left;
width: 350px;
padding: 10px;
margin: 20px 15px 15px 15px;
}
.invite-token-table {
width: 100%;
margin: 0 15px;
}
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.invites-container {
h1 {
margin: 7px 10px 15px 10px;
}
}
}
</style>
src/views/users/components/NewAccountDialog.vue
+ 20
− 95
View file @ 3917d364
...@@ -2,85 +2,24 @@ ...@@ -2,85 +2,24 @@
<el-dialog <el-dialog
:visible.sync="isVisible" :visible.sync="isVisible"
:show-close="false" :show-close="false"
:title="$t('users.createAccount')"
custom-class="create-user-dialog" custom-class="create-user-dialog"
@open="resetForm"> @open="resetForm">
<el-tabs type="card"> <el-form ref="newUserForm" :model="newUserForm" :rules="rules" :label-width="getLabelWidth" status-icon>
<el-tab-pane label="Create new user account"> <el-form-item :label="$t('users.username')" prop="nickname" class="create-account-form-item">
<el-form ref="newUserForm" :model="newUserForm" :rules="rules" :label-width="getLabelWidth" status-icon> <el-input v-model="newUserForm.nickname" name="nickname" autofocus/>
<el-form-item :label="$t('users.username')" prop="nickname" class="create-account-form-item"> </el-form-item>
<el-input v-model="newUserForm.nickname" name="nickname" autofocus/> <el-form-item :label="$t('users.email')" prop="email" class="create-account-form-item">
</el-form-item> <el-input v-model="newUserForm.email" name="email" type="email"/>
<el-form-item :label="$t('users.email')" prop="email" class="create-account-form-item"> </el-form-item>
<el-input v-model="newUserForm.email" name="email" type="email"/> <el-form-item :label="$t('users.password')" prop="password" class="create-account-form-item">
</el-form-item> <el-input v-model="newUserForm.password" type="password" name="password" autocomplete="off"/>
<el-form-item :label="$t('users.password')" prop="password" class="create-account-form-item"> </el-form-item>
<el-input v-model="newUserForm.password" type="password" name="password" autocomplete="off"/> </el-form>
</el-form-item> <span slot="footer">
<el-form-item> <el-button @click="closeDialogWindow">{{ $t('users.cancel') }}</el-button>
<el-button @click="closeDialogWindow">{{ $t('users.cancel') }}</el-button> <el-button type="primary" @click="submitForm('newUserForm')">{{ $t('users.create') }}</el-button>
<el-button type="primary" @click="submitForm('newUserForm')">{{ $t('users.create') }}</el-button> </span>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="Generate invite token">
<el-form ref="newTokenForm" :model="newTokenForm" :rules="rules" :label-width="getLabelWidth" status-icon>
<el-form-item :label="$t('users.maxUse')" class="create-account-form-item">
<el-input-number v-model="newTokenForm.maxUse" :min="0"/>
</el-form-item>
<el-form-item :label="$t('users.expiresAt')" class="create-account-form-item">
<el-date-picker
v-model="newTokenForm.expiresAt"
type="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>
<el-button type="primary" @click="createToken">{{ $t('users.create') }}</el-button>
</el-form-item>
<el-card v-if="'token' in newToken">
<div slot="header" class="clearfix">
<span>{{ $t('users.tokenCreated') }}</span>
</div>
<p>{{ this.$t('users.token') }}: {{ newToken.token }}</p>
<p>{{ this.$t('users.maxUse') }}: {{ newToken.maxUse }}</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> </el-dialog>
</template> </template>
...@@ -102,10 +41,6 @@ export default { ...@@ -102,10 +41,6 @@ export default {
email: '', email: '',
password: '' password: ''
}, },
newTokenForm: {
maxUse: 1,
expiresAt: ''
},
rules: { rules: {
nickname: [ nickname: [
{ validator: this.validateUsername, trigger: 'blur' } { validator: this.validateUsername, trigger: 'blur' }
...@@ -133,21 +68,11 @@ export default { ...@@ -133,21 +68,11 @@ export default {
}, },
getLabelWidth() { getLabelWidth() {
return this.isDesktop ? '120px' : '80px' return this.isDesktop ? '120px' : '80px'
},
newToken() {
return this.$store.state.users.newToken
},
tokens() {
return this.$store.state.users.inviteTokens
} }
}, },
methods: { methods: {
closeDialogWindow() { closeDialogWindow() {
this.$emit('closeWindow') this.$emit('closeWindow')
this.$store.dispatch('RemoveNewToken')
},
createToken() {
this.$store.dispatch('GenerateInviteToken', this.$data.newTokenForm)
}, },
resetForm() { resetForm() {
this.$nextTick(() => { this.$nextTick(() => {
...@@ -210,6 +135,9 @@ export default { ...@@ -210,6 +135,9 @@ export default {
</script> </script>
<style rel='stylesheet/scss' lang='scss'> <style rel='stylesheet/scss' lang='scss'>
.el-dialog__body {
padding: 20px 20px 0 20px
}
@media @media
only screen and (max-width: 760px), only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { (min-device-width: 768px) and (max-device-width: 1024px) {
...@@ -219,11 +147,8 @@ only screen and (max-width: 760px), ...@@ -219,11 +147,8 @@ only screen and (max-width: 760px),
.create-account-form-item { .create-account-form-item {
margin-bottom: 30px; margin-bottom: 30px;
} }
.el-dialog .create-user-dialog {
padding: 0
}
.el-dialog__body { .el-dialog__body {
padding: 15px 20px padding: 20px 20px 0 20px
} }
} }
</style> </style>
src/views/users/index.vue
+ 1
− 2
View file @ 3917d364
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<div class="actions-container"> <div class="actions-container">
<el-button class="actions-button create-account" @click="dialogFormVisible = true"> <el-button class="actions-button create-account" @click="dialogFormVisible = true">
<span> <span>
<i class="el-icon-plus" /> <i class="el-icon-plus"/>
{{ $t('users.createAccount') }} {{ $t('users.createAccount') }}
</span> </span>
</el-button> </el-button>
...@@ -205,7 +205,6 @@ export default { ...@@ -205,7 +205,6 @@ export default {
}, },
mounted: function() { mounted: function() {
this.$store.dispatch('FetchUsers', { page: 1 }) this.$store.dispatch('FetchUsers', { page: 1 })
this.$store.dispatch('FetchInviteTokens')
}, },
methods: { methods: {
activationIcon(status) { activationIcon(status) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment