filebrowser/frontend/src/views/settings/Global.vue

254 lines
6.7 KiB
Vue
Raw Normal View History

2018-02-01 12:17:04 +00:00
<template>
2021-02-19 13:15:46 +00:00
<div class="row" v-if="settings !== null">
<div class="column">
<form class="card" @submit.prevent="save">
<div class="card-title">
2021-03-21 11:51:58 +00:00
<h2>{{ $t("settings.globalSettings") }}</h2>
2021-02-19 13:15:46 +00:00
</div>
<div class="card-content">
2021-03-21 11:51:58 +00:00
<p>
<input type="checkbox" v-model="settings.signup" />
{{ $t("settings.allowSignup") }}
</p>
2021-02-19 13:15:46 +00:00
2021-03-21 11:51:58 +00:00
<p>
<input type="checkbox" v-model="settings.createUserDir" />
{{ $t("settings.createUserDir") }}
</p>
2021-02-19 13:15:46 +00:00
2021-03-21 11:51:58 +00:00
<h3>{{ $t("settings.rules") }}</h3>
<p class="small">{{ $t("settings.globalRules") }}</p>
2021-02-19 13:15:46 +00:00
<rules :rules.sync="settings.rules" />
<div v-if="isExecEnabled">
2021-03-21 11:51:58 +00:00
<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"
/>
2021-02-19 13:15:46 +00:00
</div>
2018-02-01 12:17:04 +00:00
2021-03-21 11:51:58 +00:00
<h3>{{ $t("settings.branding") }}</h3>
2021-02-19 13:15:46 +00:00
<i18n path="settings.brandingHelp" tag="p" class="small">
2021-03-21 11:51:58 +00:00
<a
class="link"
target="_blank"
href="https://filebrowser.org/configuration/custom-branding"
>{{ $t("settings.documentation") }}</a
>
2021-02-19 13:15:46 +00:00
</i18n>
2021-02-19 13:15:46 +00:00
<p>
2021-03-21 11:51:58 +00:00
<input
type="checkbox"
v-model="settings.branding.disableExternal"
id="branding-links"
/>
{{ $t("settings.disableExternalLinks") }}
2021-02-19 13:15:46 +00:00
</p>
<p>
2021-03-21 11:51:58 +00:00
<label for="theme">{{ $t("settings.themes.title") }}</label>
<themes
class="input input--block"
:theme.sync="settings.branding.theme"
id="theme"
></themes>
2021-02-19 13:15:46 +00:00
</p>
<p>
2021-03-21 11:51:58 +00:00
<label for="branding-name">{{ $t("settings.instanceName") }}</label>
<input
class="input input--block"
type="text"
v-model="settings.branding.name"
id="branding-name"
/>
2021-02-19 13:15:46 +00:00
</p>
<p>
2021-03-21 11:51:58 +00:00
<label for="branding-files">{{
$t("settings.brandingDirectoryPath")
}}</label>
<input
class="input input--block"
type="text"
v-model="settings.branding.files"
id="branding-files"
/>
2021-02-19 13:15:46 +00:00
</p>
</div>
2021-02-19 13:15:46 +00:00
<div class="card-action">
2021-03-21 11:51:58 +00:00
<input
class="button button--flat"
type="submit"
:value="$t('buttons.update')"
/>
2020-10-01 14:45:24 +00:00
</div>
2021-02-19 13:15:46 +00:00
</form>
</div>
2021-02-19 13:15:46 +00:00
<div class="column">
<form class="card" @submit.prevent="save">
<div class="card-title">
2021-03-21 11:51:58 +00:00
<h2>{{ $t("settings.userDefaults") }}</h2>
2021-02-19 13:15:46 +00:00
</div>
<div class="card-content">
2021-03-21 11:51:58 +00:00
<p class="small">{{ $t("settings.defaultUserDescription") }}</p>
2021-02-19 13:15:46 +00:00
2021-03-21 11:51:58 +00:00
<user-form
:isNew="false"
:isDefault="true"
:user.sync="settings.defaults"
/>
2021-02-19 13:15:46 +00:00
</div>
<div class="card-action">
2021-03-21 11:51:58 +00:00
<input
class="button button--flat"
type="submit"
:value="$t('buttons.update')"
/>
2021-02-19 13:15:46 +00:00
</div>
</form>
</div>
<div class="column">
<form v-if="isExecEnabled" class="card" @submit.prevent="save">
<div class="card-title">
2021-03-21 11:51:58 +00:00
<h2>{{ $t("settings.commandRunner") }}</h2>
2021-02-19 13:15:46 +00:00
</div>
<div class="card-content">
<i18n path="settings.commandRunnerHelp" tag="p" class="small">
<code>FILE</code>
<code>SCOPE</code>
2021-03-21 11:51:58 +00:00
<a
class="link"
target="_blank"
href="https://filebrowser.org/configuration/command-runner"
>{{ $t("settings.documentation") }}</a
>
2021-02-19 13:15:46 +00:00
</i18n>
2021-03-21 11:51:58 +00:00
<div
v-for="command in settings.commands"
:key="command.name"
class="collapsible"
>
<input :id="command.name" type="checkbox" />
2021-02-19 13:15:46 +00:00
<label :for="command.name">
<p>{{ capitalize(command.name) }}</p>
<i class="material-icons">arrow_drop_down</i>
</label>
<div class="collapse">
2021-03-21 11:51:58 +00:00
<textarea
class="input input--block input--textarea"
v-model.trim="command.value"
></textarea>
2021-02-19 13:15:46 +00:00
</div>
2018-02-01 12:17:04 +00:00
</div>
</div>
2021-02-19 13:15:46 +00:00
<div class="card-action">
2021-03-21 11:51:58 +00:00
<input
class="button button--flat"
type="submit"
:value="$t('buttons.update')"
/>
2021-02-19 13:15:46 +00:00
</div>
</form>
</div>
2018-02-01 12:17:04 +00:00
</div>
</template>
<script>
2021-03-21 11:51:58 +00:00
import { mapState } from "vuex";
import { settings as api } from "@/api";
import UserForm from "@/components/settings/UserForm";
import Rules from "@/components/settings/Rules";
import Themes from "@/components/settings/Themes";
import { enableExec } from "@/utils/constants";
2018-02-01 12:17:04 +00:00
export default {
2021-03-21 11:51:58 +00:00
name: "settings",
components: {
2020-01-02 00:48:48 +00:00
Themes,
UserForm,
2021-03-21 11:51:58 +00:00
Rules,
},
2018-02-01 12:17:04 +00:00
data: function () {
return {
originalSettings: null,
2021-03-21 11:51:58 +00:00
settings: null,
};
2018-02-01 12:17:04 +00:00
},
computed: {
2021-03-21 11:51:58 +00:00
...mapState(["user"]),
isExecEnabled: () => enableExec,
2018-02-01 12:17:04 +00:00
},
2021-03-21 11:51:58 +00:00
async created() {
try {
2021-03-21 11:51:58 +00:00
const original = await api.get();
let settings = { ...original, commands: [] };
for (const key in original.commands) {
settings.commands.push({
name: key,
2021-03-21 11:51:58 +00:00
value: original.commands[key].join("\n"),
});
}
2021-03-21 11:51:58 +00:00
settings.shell = settings.shell.join(" ");
2021-03-21 11:51:58 +00:00
this.originalSettings = original;
this.settings = settings;
} catch (e) {
2021-03-21 11:51:58 +00:00
this.$showError(e);
}
2018-02-01 12:17:04 +00:00
},
methods: {
2021-03-21 11:51:58 +00:00
capitalize(name, where = "_") {
if (where === "caps") where = /(?=[A-Z])/;
let splitted = name.split(where);
name = "";
2018-02-01 12:17:04 +00:00
for (let i = 0; i < splitted.length; i++) {
2021-03-21 11:51:58 +00:00
name +=
splitted[i].charAt(0).toUpperCase() + splitted[i].slice(1) + " ";
2018-02-01 12:17:04 +00:00
}
2021-03-21 11:51:58 +00:00
return name.slice(0, -1);
2018-02-01 12:17:04 +00:00
},
2021-03-21 11:51:58 +00:00
async save() {
let settings = {
...this.settings,
2021-03-21 11:51:58 +00:00
shell: this.settings.shell
.trim()
.split(" ")
.filter((s) => s !== ""),
commands: {},
};
2018-02-01 12:17:04 +00:00
for (const { name, value } of this.settings.commands) {
2021-03-21 11:51:58 +00:00
settings.commands[name] = value.split("\n").filter((cmd) => cmd !== "");
2018-02-01 12:17:04 +00:00
}
try {
2021-03-21 11:51:58 +00:00
await api.update(settings);
this.$showSuccess(this.$t("settings.settingsUpdated"));
} catch (e) {
2021-03-21 11:51:58 +00:00
this.$showError(e);
2018-02-01 12:17:04 +00:00
}
2021-03-21 11:51:58 +00:00
},
},
};
2018-02-01 12:17:04 +00:00
</script>