chore: move files to frontend
This commit is contained in:
Henrique Dias
169
frontend/src/views/settings/Global.vue
Normal file
169
frontend/src/views/settings/Global.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="dashboard" v-if="settings !== null">
|
||||
<form class="card" @submit.prevent="save">
|
||||
<div class="card-title">
|
||||
<h2>{{ $t('settings.globalSettings') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<p><input type="checkbox" v-model="settings.signup"> {{ $t('settings.allowSignup') }}</p>
|
||||
|
||||
<p><input type="checkbox" v-model="settings.createUserDir"> {{ $t('settings.createUserDir') }}</p>
|
||||
|
||||
<h3>{{ $t('settings.rules') }}</h3>
|
||||
<p class="small">{{ $t('settings.globalRules') }}</p>
|
||||
<rules :rules.sync="settings.rules" />
|
||||
|
||||
<h3>{{ $t('settings.executeOnShell') }}</h3>
|
||||
<p class="small">{{ $t('settings.executeOnShellDescription') }}</p>
|
||||
<input class="input input--block" type="text" placeholder="bash -c, cmd /c, ..." v-model="settings.shell" />
|
||||
|
||||
<h3>{{ $t('settings.branding') }}</h3>
|
||||
|
||||
<i18n path="settings.brandingHelp" tag="p" class="small">
|
||||
<a class="link" target="_blank" href="https://filebrowser.xyz/configuration/custom-branding">{{ $t('settings.documentation') }}</a>
|
||||
</i18n>
|
||||
|
||||
<p>
|
||||
<input type="checkbox" v-model="settings.branding.disableExternal" id="branding-links" />
|
||||
{{ $t('settings.disableExternalLinks') }}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="branding-name">{{ $t('settings.instanceName') }}</label>
|
||||
<input class="input input--block" type="text" v-model="settings.branding.name" id="branding-name" />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="branding-files">{{ $t('settings.brandingDirectoryPath') }}</label>
|
||||
<input class="input input--block" type="text" v-model="settings.branding.files" id="branding-files" />
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-action">
|
||||
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form class="card" @submit.prevent="save">
|
||||
<div class="card-title">
|
||||
<h2>{{ $t('settings.userDefaults') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<p class="small">{{ $t('settings.defaultUserDescription') }}</p>
|
||||
|
||||
<user-form :isNew="false" :isDefault="true" :user.sync="settings.defaults" />
|
||||
</div>
|
||||
|
||||
<div class="card-action">
|
||||
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form class="card" @submit.prevent="save">
|
||||
<div class="card-title">
|
||||
<h2>{{ $t('settings.commandRunner') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<i18n path="settings.commandRunnerHelp" tag="p" class="small">
|
||||
<code>FILE</code>
|
||||
<code>SCOPE</code>
|
||||
<a class="link" target="_blank" href="https://filebrowser.xyz/configuration/command-runner">{{ $t('settings.documentation') }}</a>
|
||||
</i18n>
|
||||
|
||||
<div v-for="command in settings.commands" :key="command.name" class="collapsible">
|
||||
<input :id="command.name" type="checkbox">
|
||||
<label :for="command.name">
|
||||
<p>{{ capitalize(command.name) }}</p>
|
||||
<i class="material-icons">arrow_drop_down</i>
|
||||
</label>
|
||||
<div class="collapse">
|
||||
<textarea class="input input--block input--textarea" v-model.trim="command.value"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-action">
|
||||
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { settings as api } from '@/api'
|
||||
import UserForm from '@/components/settings/UserForm'
|
||||
import Rules from '@/components/settings/Rules'
|
||||
|
||||
export default {
|
||||
name: 'settings',
|
||||
components: {
|
||||
UserForm,
|
||||
Rules
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
originalSettings: null,
|
||||
settings: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState([ 'user' ])
|
||||
},
|
||||
async created () {
|
||||
try {
|
||||
const original = await api.get()
|
||||
let settings = { ...original, commands: [] }
|
||||
|
||||
for (const key in original.commands) {
|
||||
settings.commands.push({
|
||||
name: key,
|
||||
value: original.commands[key].join('\n')
|
||||
})
|
||||
}
|
||||
|
||||
settings.shell = settings.shell.join(' ')
|
||||
|
||||
this.originalSettings = original
|
||||
this.settings = settings
|
||||
} catch (e) {
|
||||
this.$showError(e)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
capitalize (name, where = '_') {
|
||||
if (where === 'caps') where = /(?=[A-Z])/
|
||||
let splitted = name.split(where)
|
||||
name = ''
|
||||
|
||||
for (let i = 0; i < splitted.length; i++) {
|
||||
name += splitted[i].charAt(0).toUpperCase() + splitted[i].slice(1) + ' '
|
||||
}
|
||||
|
||||
return name.slice(0, -1)
|
||||
},
|
||||
async save () {
|
||||
let settings = {
|
||||
...this.settings,
|
||||
shell: this.settings.shell.trim().split(' ').filter(s => s !== ''),
|
||||
commands: {}
|
||||
}
|
||||
|
||||
for (const { name, value } of this.settings.commands) {
|
||||
settings.commands[name] = value.split('\n').filter(cmd => cmd !== '')
|
||||
}
|
||||
|
||||
try {
|
||||
await api.update(settings)
|
||||
this.$showSuccess(this.$t('settings.settingsUpdated'))
|
||||
} catch (e) {
|
||||
this.$showError(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
103
frontend/src/views/settings/Profile.vue
Normal file
103
frontend/src/views/settings/Profile.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<form class="card" @submit="updateSettings">
|
||||
<div class="card-title">
|
||||
<h2>{{ $t('settings.profileSettings') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<h3>{{ $t('settings.language') }}</h3>
|
||||
<languages class="input input--block" :locale.sync="locale"></languages>
|
||||
</div>
|
||||
|
||||
<div class="card-action">
|
||||
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form class="card" v-if="!user.lockPassword" @submit="updatePassword">
|
||||
<div class="card-title">
|
||||
<h2>{{ $t('settings.changePassword') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<input :class="passwordClass" type="password" :placeholder="$t('settings.newPassword')" v-model="password" name="password">
|
||||
<input :class="passwordClass" type="password" :placeholder="$t('settings.newPasswordConfirm')" v-model="passwordConf" name="password">
|
||||
</div>
|
||||
|
||||
<div class="card-action">
|
||||
<input class="button button--flat" type="submit" :value="$t('buttons.update')">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import { users as api } from '@/api'
|
||||
import Languages from '@/components/settings/Languages'
|
||||
|
||||
export default {
|
||||
name: 'settings',
|
||||
components: {
|
||||
Languages
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
password: '',
|
||||
passwordConf: '',
|
||||
locale: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState([ 'user' ]),
|
||||
passwordClass () {
|
||||
const baseClass = 'input input--block'
|
||||
|
||||
if (this.password === '' && this.passwordConf === '') {
|
||||
return baseClass
|
||||
}
|
||||
|
||||
if (this.password === this.passwordConf) {
|
||||
return `${baseClass} input--green`
|
||||
}
|
||||
|
||||
return `${baseClass} input--red`
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.locale = this.user.locale
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([ 'updateUser' ]),
|
||||
async updatePassword (event) {
|
||||
event.preventDefault()
|
||||
|
||||
if (this.password !== this.passwordConf || this.password === '') {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const data = { id: this.user.id, password: this.password }
|
||||
await api.update(data, ['password'])
|
||||
this.updateUser(data)
|
||||
this.$showSuccess(this.$t('settings.passwordUpdated'))
|
||||
} catch (e) {
|
||||
this.$showError(e)
|
||||
}
|
||||
},
|
||||
async updateSettings (event) {
|
||||
event.preventDefault()
|
||||
|
||||
try {
|
||||
const data = { id: this.user.id, locale: this.locale }
|
||||
await api.update(data, ['locale'])
|
||||
this.updateUser(data)
|
||||
this.$showSuccess(this.$t('settings.settingsUpdated'))
|
||||
} catch (e) {
|
||||
this.$showError(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
148
frontend/src/views/settings/User.vue
Normal file
148
frontend/src/views/settings/User.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div>
|
||||
<form v-if="loaded" @submit="save" class="card">
|
||||
<div class="card-title">
|
||||
<h2 v-if="user.id === 0">{{ $t('settings.newUser') }}</h2>
|
||||
<h2 v-else>{{ $t('settings.user') }} {{ user.username }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<user-form :user.sync="user" :isDefault="false" :isNew="isNew" />
|
||||
</div>
|
||||
|
||||
<div class="card-action">
|
||||
<button
|
||||
v-if="!isNew"
|
||||
@click.prevent="deletePrompt"
|
||||
type="button"
|
||||
class="button button--flat button--red"
|
||||
:aria-label="$t('buttons.delete')"
|
||||
:title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
|
||||
<input
|
||||
class="button button--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="button button--flat button--grey"
|
||||
@click="closeHovers"
|
||||
v-focus
|
||||
:aria-label="$t('buttons.cancel')"
|
||||
:title="$t('buttons.cancel')">
|
||||
{{ $t('buttons.cancel') }}
|
||||
</button>
|
||||
<button class="button button--flat"
|
||||
@click="deleteUser">
|
||||
{{ $t('buttons.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from 'vuex'
|
||||
import { users as api, settings } from '@/api'
|
||||
import UserForm from '@/components/settings/UserForm'
|
||||
import deepClone from 'lodash.clonedeep'
|
||||
|
||||
export default {
|
||||
name: 'user',
|
||||
components: {
|
||||
UserForm
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
originalUser: null,
|
||||
user: {},
|
||||
loaded: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fetchData()
|
||||
},
|
||||
computed: {
|
||||
isNew () {
|
||||
return this.$route.path === '/settings/users/new'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route': 'fetchData',
|
||||
'user.perm.admin': function () {
|
||||
if (!this.user.perm.admin) return
|
||||
this.user.lockPassword = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([ 'closeHovers', 'showHover', 'setUser' ]),
|
||||
async fetchData () {
|
||||
try {
|
||||
if (this.isNew) {
|
||||
let { defaults } = await settings.get()
|
||||
this.user = {
|
||||
...defaults,
|
||||
username: '',
|
||||
passsword: '',
|
||||
rules: [],
|
||||
lockPassword: false,
|
||||
id: 0
|
||||
}
|
||||
} else {
|
||||
const id = this.$route.params.pathMatch
|
||||
this.user = { ...await api.get(id) }
|
||||
}
|
||||
|
||||
this.loaded = true
|
||||
} catch (e) {
|
||||
this.$router.push({ path: '/settings/users/new' })
|
||||
}
|
||||
},
|
||||
deletePrompt () {
|
||||
this.showHover('deleteUser')
|
||||
},
|
||||
async deleteUser (event) {
|
||||
event.preventDefault()
|
||||
|
||||
try {
|
||||
await api.remove(this.user.id)
|
||||
this.$router.push({ path: '/settings/users' })
|
||||
this.$showSuccess(this.$t('settings.userDeleted'))
|
||||
} catch (e) {
|
||||
this.$showError(e)
|
||||
}
|
||||
},
|
||||
async save (event) {
|
||||
event.preventDefault()
|
||||
let user = {
|
||||
...this.originalUser,
|
||||
...this.user
|
||||
}
|
||||
|
||||
try {
|
||||
if (this.isNew) {
|
||||
const loc = await api.create(user)
|
||||
this.$router.push({ path: loc })
|
||||
this.$showSuccess(this.$t('settings.userCreated'))
|
||||
} else {
|
||||
await api.update(user)
|
||||
|
||||
if (user.id === this.$store.state.user.id) {
|
||||
this.setUser({ ...deepClone(user) })
|
||||
}
|
||||
|
||||
this.$showSuccess(this.$t('settings.userUpdated'))
|
||||
}
|
||||
} catch (e) {
|
||||
this.$showError(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
48
frontend/src/views/settings/Users.vue
Normal file
48
frontend/src/views/settings/Users.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
<h2>{{ $t('settings.users') }}</h2>
|
||||
<router-link to="/settings/users/new"><button class="button">{{ $t('buttons.new') }}</button></router-link>
|
||||
</div>
|
||||
|
||||
<div class="card-content full">
|
||||
<table>
|
||||
<tr>
|
||||
<th>{{ $t('settings.username') }}</th>
|
||||
<th>{{ $t('settings.admin') }}</th>
|
||||
<th>{{ $t('settings.scope') }}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
|
||||
<tr v-for="user in users" :key="user.id">
|
||||
<td>{{ user.username }}</td>
|
||||
<td><i v-if="user.perm.admin" class="material-icons">done</i><i v-else class="material-icons">close</i></td>
|
||||
<td>{{ user.scope }}</td>
|
||||
<td class="small">
|
||||
<router-link :to="'/settings/users/' + user.id"><i class="material-icons">mode_edit</i></router-link>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { users as api } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'users',
|
||||
data: function () {
|
||||
return {
|
||||
users: []
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
try {
|
||||
this.users = await api.getAll()
|
||||
} catch (e) {
|
||||
this.$showError(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user