materialdesignish
Former-commit-id: 5624723eeb939734902eeaa6c2f132c4beffa911 [formerly a83456d3eda5175e2941b2deeb58b5da323ff678] [formerly a6b3ac7942dbf48d7d9b3f8db5e5041a93143f19 [formerly 4d6b54c63ee21bd01854188b2ad82115948ff7fe]] Former-commit-id: d03621c16b2c892701d678361b6c0a7d5dbec620 [formerly d818b6751e035f283e1c8390d7993a33a459a7dd] Former-commit-id: 3539ee68532135467daa2cc175482769b1efb592
This commit is contained in:
Henrique Dias
305
assets/src/views/settings/User.vue
Normal file
305
assets/src/views/settings/User.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div>
|
||||
<form @submit="save" class="card">
|
||||
<div class="card-title">
|
||||
<h2 v-if="id === 0">{{ $t('settings.newUser') }}</h2>
|
||||
<h2 v-else>{{ $t('settings.user') }} {{ username }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
|
||||
<p><label for="username">{{ $t('settings.username') }}</label><input type="text" v-model="username" id="username"></p>
|
||||
<p><label for="password">{{ $t('settings.password') }}</label><input type="password" :placeholder="passwordPlaceholder" v-model="password" id="password"></p>
|
||||
<p><label for="scope">{{ $t('settings.scope') }}</label><input type="text" v-model="filesystem" id="scope"></p>
|
||||
<p>
|
||||
<label for="locale">{{ $t('settings.language') }}</label>
|
||||
<languages id="locale" :selected.sync="locale"></languages>
|
||||
</p>
|
||||
|
||||
<p><input type="checkbox" :disabled="admin" v-model="lockPassword"> {{ $t('settings.lockPassword') }}</p>
|
||||
|
||||
<h3>{{ $t('settings.permissions') }}</h3>
|
||||
<p class="small">{{ $t('settings.permissionsHelp') }}</p>
|
||||
|
||||
<p><input type="checkbox" v-model="admin"> {{ $t('settings.administrator') }}</p>
|
||||
<p><input type="checkbox" :disabled="admin" v-model="allowNew"> {{ $t('settings.allowNew') }}</p>
|
||||
<p><input type="checkbox" :disabled="admin" v-model="allowEdit"> {{ $t('settings.allowEdit') }}</p>
|
||||
<p><input type="checkbox" :disabled="admin" v-model="allowCommands"> {{ $t('settings.allowCommands') }}</p>
|
||||
<p v-show="$store.state.staticGen.length"><input type="checkbox" :disabled="admin" v-model="allowPublish"> {{ $t('settings.allowPublish') }}</p>
|
||||
|
||||
<h3>{{ $t('settings.userCommands') }}</h3>
|
||||
<p class="small">{{ $t('settings.userCommandsHelp') }} <i>git svn hg</i>.</p>
|
||||
<input type="text" v-model.trim="commands">
|
||||
|
||||
<h3>{{ $t('settings.rules') }}</h3>
|
||||
|
||||
<p class="small">{{ $t('settings.rulesHelp1') }}</p>
|
||||
|
||||
<i18n path="settings.rulesHelp2" tag="p" class="small">
|
||||
<code>allow</code><code>disallow</code><code>regex</code>
|
||||
</i18n>
|
||||
|
||||
<p class="small"><strong>{{ $t('settings.examples') }}</strong></p>
|
||||
|
||||
<ul class="small">
|
||||
<li><code>disallow regex \\/\\..+</code> - {{ $t('settings.ruleExample1') }}</li>
|
||||
<li><code>disallow /Caddyfile</code> - {{ $t('settings.ruleExample2') }}</li>
|
||||
</ul>
|
||||
|
||||
<textarea v-model.trim="rules"></textarea>
|
||||
|
||||
<h3>{{ $t('settings.customStylesheet') }}</h3>
|
||||
|
||||
<textarea name="css"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="card-action">
|
||||
<button v-if="id !== 0" @click.prevent="deletePrompt" type="button" class="flat delete" :aria-label="$t('buttons.delete')" :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
|
||||
<input class="flat" type="submit" :value="$t('buttons.save')">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div v-if="$store.state.show === 'deleteUser'" class="card floating">
|
||||
<div class="card-content">
|
||||
<p>Are you sure you want to delete this user?</p>
|
||||
</div>
|
||||
|
||||
<div class="card-action">
|
||||
<button class="cancel flat"
|
||||
@click="closeHovers"
|
||||
autofocus
|
||||
:aria-label="$t('buttons.cancel')"
|
||||
:title="$t('buttons.cancel')">
|
||||
{{ $t('buttons.cancel') }}
|
||||
</button>
|
||||
<button class="flat"
|
||||
@click="deleteUser">
|
||||
{{ $t('buttons.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from 'vuex'
|
||||
import { getUser, newUser, updateUser, deleteUser } from '@/utils/api'
|
||||
import Languages from '@/components/Languages'
|
||||
|
||||
export default {
|
||||
name: 'user',
|
||||
components: { Languages },
|
||||
data: () => {
|
||||
return {
|
||||
id: 0,
|
||||
admin: false,
|
||||
allowNew: false,
|
||||
allowEdit: false,
|
||||
allowCommands: false,
|
||||
allowPublish: false,
|
||||
lockPassword: false,
|
||||
permissions: {},
|
||||
password: '',
|
||||
username: '',
|
||||
filesystem: '',
|
||||
rules: '',
|
||||
locale: '',
|
||||
css: '',
|
||||
commands: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
passwordPlaceholder () {
|
||||
if (this.$route.path === '/settings/users/new') return ''
|
||||
return this.$t('settings.avoidChanges')
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fetchData()
|
||||
},
|
||||
watch: {
|
||||
'$route': 'fetchData',
|
||||
admin: function () {
|
||||
if (!this.admin) return
|
||||
this.allowCommands = true
|
||||
this.allowEdit = true
|
||||
this.allowNew = true
|
||||
this.allowPublish = true
|
||||
this.lockPassword = false
|
||||
for (let key in this.permissions) {
|
||||
this.permissions[key] = true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['closeHovers']),
|
||||
fetchData () {
|
||||
let user = this.$route.params[0]
|
||||
|
||||
if (this.$route.path === '/settings/users/new') {
|
||||
user = 'base'
|
||||
}
|
||||
|
||||
getUser(user).then(user => {
|
||||
this.id = user.ID
|
||||
this.admin = user.admin
|
||||
this.allowCommands = user.allowCommands
|
||||
this.allowNew = user.allowNew
|
||||
this.allowEdit = user.allowEdit
|
||||
this.allowPublish = user.allowPublish
|
||||
this.lockPassword = user.lockPassword
|
||||
this.filesystem = user.filesystem
|
||||
this.username = user.username
|
||||
this.commands = user.commands.join(' ')
|
||||
this.css = user.css
|
||||
this.permissions = user.permissions
|
||||
this.locale = user.locale
|
||||
|
||||
for (let rule of user.rules) {
|
||||
if (rule.allow) {
|
||||
this.rules += 'allow '
|
||||
} else {
|
||||
this.rules += 'disallow '
|
||||
}
|
||||
|
||||
if (rule.regex) {
|
||||
this.rules += 'regex ' + rule.regexp.raw
|
||||
} else {
|
||||
this.rules += rule.path
|
||||
}
|
||||
|
||||
this.rules += '\n'
|
||||
}
|
||||
|
||||
this.rules = this.rules.trim()
|
||||
}).catch(() => {
|
||||
this.$router.push({ path: '/settings/users/new' })
|
||||
})
|
||||
},
|
||||
capitalize (name) {
|
||||
let splitted = name.split(/(?=[A-Z])/)
|
||||
name = ''
|
||||
|
||||
for (let i = 0; i < splitted.length; i++) {
|
||||
name += splitted[i].charAt(0).toUpperCase() + splitted[i].slice(1) + ' '
|
||||
}
|
||||
|
||||
return name.slice(0, -1)
|
||||
},
|
||||
reset () {
|
||||
this.id = 0
|
||||
this.admin = false
|
||||
this.allowNew = false
|
||||
this.allowEdit = false
|
||||
this.allowPublish = false
|
||||
this.permissins = {}
|
||||
this.allowCommands = false
|
||||
this.lockPassword = false
|
||||
this.password = ''
|
||||
this.username = ''
|
||||
this.filesystem = ''
|
||||
this.rules = ''
|
||||
this.locale = ''
|
||||
this.css = ''
|
||||
this.commands = ''
|
||||
},
|
||||
deletePrompt (event) {
|
||||
this.$store.commit('showHover', 'deleteUser')
|
||||
},
|
||||
deleteUser (event) {
|
||||
event.preventDefault()
|
||||
|
||||
deleteUser(this.id).then(location => {
|
||||
this.$router.push({ path: '/settings/users' })
|
||||
this.$showSuccess(this.$t('settings.userDeleted'))
|
||||
}).catch(e => {
|
||||
this.$showError(e)
|
||||
})
|
||||
},
|
||||
save (event) {
|
||||
event.preventDefault()
|
||||
let user = this.parseForm()
|
||||
|
||||
if (this.$route.path === '/settings/users/new') {
|
||||
newUser(user).then(location => {
|
||||
this.$router.push({ path: location })
|
||||
this.$showSuccess(this.$t('settings.userCreated'))
|
||||
}).catch(e => {
|
||||
this.$showError(e)
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
updateUser(user).then(location => {
|
||||
if (user.ID === this.$store.state.user.ID) {
|
||||
this.$store.commit('setUser', user)
|
||||
}
|
||||
|
||||
this.$showSuccess(this.$t('settings.userUpdated'))
|
||||
}).catch(e => {
|
||||
this.$showError(e)
|
||||
})
|
||||
},
|
||||
parseForm () {
|
||||
let user = {
|
||||
ID: this.id,
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
lockPassword: this.lockPassword,
|
||||
filesystem: this.filesystem,
|
||||
admin: this.admin,
|
||||
allowCommands: this.allowCommands,
|
||||
allowNew: this.allowNew,
|
||||
allowEdit: this.allowEdit,
|
||||
allowPublish: this.allowPublish,
|
||||
permissions: this.permissions,
|
||||
css: this.css,
|
||||
locale: this.locale,
|
||||
commands: this.commands.split(' '),
|
||||
rules: []
|
||||
}
|
||||
|
||||
let rules = this.rules.split('\n')
|
||||
|
||||
for (let rawRule of rules) {
|
||||
let rule = {
|
||||
allow: true,
|
||||
path: '',
|
||||
regex: false,
|
||||
regexp: {
|
||||
raw: ''
|
||||
}
|
||||
}
|
||||
|
||||
rawRule = rawRule.split(' ')
|
||||
|
||||
// Skip a malformed rule
|
||||
if (rawRule.length < 2) {
|
||||
continue
|
||||
}
|
||||
|
||||
// Skip a malformed rule
|
||||
if (rawRule[0] !== 'allow' && rawRule[0] !== 'disallow') {
|
||||
continue
|
||||
}
|
||||
|
||||
rule.allow = (rawRule[0] === 'allow')
|
||||
rawRule.shift()
|
||||
|
||||
if (rawRule[0] === 'regex') {
|
||||
rule.regex = true
|
||||
rawRule.shift()
|
||||
rule.regexp.raw = rawRule.join(' ')
|
||||
} else {
|
||||
rule.path = rawRule.join(' ')
|
||||
}
|
||||
|
||||
user.rules.push(rule)
|
||||
}
|
||||
|
||||
return user
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user