Merge branch 'vue3-wip' into vue3
This commit is contained in:
Kloon ImKloon
parent
db6b627b69
commit
910db80068
@ -1,11 +1,11 @@
|
||||
import type { Share } from "@/types";
|
||||
import type { ApiUrl, IShare } from "@/types";
|
||||
import { fetchURL, fetchJSON, removePrefix, createURL } from "./utils";
|
||||
|
||||
export async function list() {
|
||||
return fetchJSON("/api/shares");
|
||||
}
|
||||
|
||||
export async function get(url: string) {
|
||||
export async function get(url: ApiUrl) {
|
||||
url = removePrefix(url);
|
||||
return fetchJSON(`/api/share${url}`);
|
||||
}
|
||||
@ -17,7 +17,7 @@ export async function remove(hash: string) {
|
||||
}
|
||||
|
||||
export async function create(
|
||||
url: string,
|
||||
url: ApiUrl,
|
||||
password = "",
|
||||
expires = "",
|
||||
unit = "hours"
|
||||
@ -41,6 +41,6 @@ export async function create(
|
||||
});
|
||||
}
|
||||
|
||||
export function getShareURL(share: Share) {
|
||||
export function getShareURL(share: IShare) {
|
||||
return createURL("share/" + share.hash, {}, false);
|
||||
}
|
||||
|
||||
@ -1,18 +1,25 @@
|
||||
<template>
|
||||
<select v-on:change="change" :value="theme">
|
||||
<option value="">{{ $t("settings.themes.light") }}</option>
|
||||
<option value="dark">{{ $t("settings.themes.dark") }}</option>
|
||||
<option value="">{{ t("settings.themes.light") }}</option>
|
||||
<option value="dark">{{ t("settings.themes.dark") }}</option>
|
||||
</select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "themes",
|
||||
props: ["theme"],
|
||||
methods: {
|
||||
change(event) {
|
||||
this.$emit("update:theme", event.target.value);
|
||||
},
|
||||
},
|
||||
<script setup lang="ts">
|
||||
import { SelectHTMLAttributes } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
defineProps<{
|
||||
theme: any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "update:theme", val: string | null): void;
|
||||
}>();
|
||||
|
||||
const change = (event: Event) => {
|
||||
emit("update:theme", (event.target as SelectHTMLAttributes)?.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<p v-if="!isDefault">
|
||||
<p v-if="!isDefault && props.user !== null">
|
||||
<label for="username">{{ $t("settings.username") }}</label>
|
||||
<input
|
||||
class="input input--block"
|
||||
@ -24,7 +24,7 @@
|
||||
<p>
|
||||
<label for="scope">{{ $t("settings.scope") }}</label>
|
||||
<input
|
||||
:disabled="createUserDirData"
|
||||
:disabled="createUserDirData ?? false"
|
||||
:placeholder="scopePlaceholder"
|
||||
class="input input--block"
|
||||
type="text"
|
||||
@ -56,7 +56,7 @@
|
||||
</p>
|
||||
|
||||
<permissions v-model:perm="user.perm" />
|
||||
<commands v-if="isExecEnabled" v-model:commands="user.commands" />
|
||||
<commands v-if="enableExec" v-model:commands="user.commands" />
|
||||
|
||||
<div v-if="!isDefault">
|
||||
<h3>{{ $t("settings.rules") }}</h3>
|
||||
@ -66,54 +66,53 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import Languages from "./Languages.vue";
|
||||
import Rules from "./Rules.vue";
|
||||
import Permissions from "./Permissions.vue";
|
||||
import Commands from "./Commands.vue";
|
||||
import { enableExec } from "@/utils/constants";
|
||||
import { computed, onMounted, ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { IUser } from "@/types";
|
||||
|
||||
export default {
|
||||
name: "user",
|
||||
data: () => {
|
||||
return {
|
||||
createUserDirData: false,
|
||||
originalUserScope: "/",
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Permissions,
|
||||
Languages,
|
||||
Rules,
|
||||
Commands,
|
||||
},
|
||||
props: ["user", "createUserDir", "isNew", "isDefault"],
|
||||
created() {
|
||||
this.originalUserScope = this.user.scope;
|
||||
this.createUserDirData = this.createUserDir;
|
||||
},
|
||||
computed: {
|
||||
passwordPlaceholder() {
|
||||
return this.isNew ? "" : this.$t("settings.avoidChanges");
|
||||
},
|
||||
scopePlaceholder() {
|
||||
return this.createUserDir
|
||||
? this.$t("settings.userScopeGenerationPlaceholder")
|
||||
: "";
|
||||
},
|
||||
displayHomeDirectoryCheckbox() {
|
||||
return this.isNew && this.createUserDir;
|
||||
},
|
||||
isExecEnabled: () => enableExec,
|
||||
},
|
||||
watch: {
|
||||
"user.perm.admin": function () {
|
||||
if (!this.user.perm.admin) return;
|
||||
this.user.lockPassword = false;
|
||||
},
|
||||
createUserDirData() {
|
||||
this.user.scope = this.createUserDirData ? "" : this.originalUserScope;
|
||||
},
|
||||
},
|
||||
};
|
||||
const { t } = useI18n();
|
||||
|
||||
const createUserDirData = ref<boolean | null>(null);
|
||||
const originalUserScope = ref<string | null>(null);
|
||||
|
||||
const props = defineProps<{
|
||||
user: IUser;
|
||||
isNew: boolean;
|
||||
isDefault: boolean;
|
||||
createUserDir?: boolean;
|
||||
}>();
|
||||
|
||||
onMounted(() => {
|
||||
originalUserScope.value = props.user.scope;
|
||||
createUserDirData.value = props.createUserDir;
|
||||
});
|
||||
|
||||
const passwordPlaceholder = computed(() =>
|
||||
props.isNew ? "" : t("settings.avoidChanges")
|
||||
);
|
||||
const scopePlaceholder = computed(() =>
|
||||
createUserDirData.value ? t("settings.userScopeGenerationPlaceholder") : ""
|
||||
);
|
||||
const displayHomeDirectoryCheckbox = computed(
|
||||
() => props.isNew && createUserDirData.value
|
||||
);
|
||||
|
||||
watch(props.user, () => {
|
||||
if (!props.user.perm.admin) return;
|
||||
props.user.lockPassword = false;
|
||||
});
|
||||
|
||||
watch(createUserDirData, () => {
|
||||
if (props.user?.scope) {
|
||||
props.user.scope = createUserDirData.value
|
||||
? ""
|
||||
: originalUserScope.value ?? "";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { User } from "@/types";
|
||||
import type { IUser } from "@/types";
|
||||
import { defineStore } from "pinia";
|
||||
import dayjs from "dayjs";
|
||||
import i18n, { detectLocale } from "@/i18n";
|
||||
@ -7,7 +7,7 @@ import { cloneDeep } from "lodash-es";
|
||||
export const useAuthStore = defineStore("auth", {
|
||||
// convert to a function
|
||||
state: (): {
|
||||
user: User | null;
|
||||
user: IUser | null;
|
||||
jwt: string;
|
||||
} => ({
|
||||
user: null,
|
||||
@ -19,24 +19,26 @@ export const useAuthStore = defineStore("auth", {
|
||||
},
|
||||
actions: {
|
||||
// no context as first argument, use `this` instead
|
||||
setUser(value: User) {
|
||||
if (value === null) {
|
||||
setUser(user: IUser | null) {
|
||||
if (user === null) {
|
||||
this.user = null;
|
||||
return;
|
||||
}
|
||||
|
||||
const locale = value.locale || detectLocale();
|
||||
const locale = user.locale || detectLocale();
|
||||
dayjs.locale(locale);
|
||||
// according to doc u only need .value if legacy: false
|
||||
// in createI18n but they lied
|
||||
// https://vue-i18n.intlify.dev/guide/essentials/scope.html#local-scope-1
|
||||
//@ts-ignore
|
||||
i18n.global.locale = locale;
|
||||
this.user = value;
|
||||
this.user = user;
|
||||
},
|
||||
updateUser(value: User) {
|
||||
if (typeof value !== "object" || !value) return;
|
||||
this.setUser(cloneDeep(value));
|
||||
updateUser(user: Partial<IUser>) {
|
||||
if (user.locale) {
|
||||
dayjs.locale(user.locale);
|
||||
//@ts-ignore
|
||||
i18n.global.locale = user.locale;
|
||||
}
|
||||
|
||||
this.user = { ...this.user, ...cloneDeep(user) } as IUser;
|
||||
},
|
||||
// easily reset state using `$reset`
|
||||
clearUser() {
|
||||
|
||||
4
frontend/src/types/api.d.ts
vendored
4
frontend/src/types/api.d.ts
vendored
@ -1,3 +1,5 @@
|
||||
export type ApiUrl = string; // Can also be set as a path eg: "path1" | "path2"
|
||||
|
||||
export type ApiMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
|
||||
|
||||
export type ApiContent =
|
||||
@ -21,7 +23,7 @@ export type ChecksumAlgs = "md5" | "sha1" | "sha256" | "sha512";
|
||||
|
||||
type inline = any;
|
||||
|
||||
export interface Share {
|
||||
export interface IShare {
|
||||
expire: any;
|
||||
hash: string;
|
||||
path: string;
|
||||
|
||||
27
frontend/src/types/user.d.ts
vendored
27
frontend/src/types/user.d.ts
vendored
@ -1,7 +1,16 @@
|
||||
export interface User {
|
||||
export interface IUser {
|
||||
id: number;
|
||||
username: string;
|
||||
password: string;
|
||||
scope: string;
|
||||
locale: string;
|
||||
perm: Permissions;
|
||||
commands: string[];
|
||||
rules: IRule[];
|
||||
lockPassword: boolean;
|
||||
hideDotfiles: boolean;
|
||||
singleClick: boolean;
|
||||
dateFormat: boolean;
|
||||
}
|
||||
|
||||
export interface Permissions {
|
||||
@ -18,3 +27,19 @@ export interface Permissions {
|
||||
shell: boolean;
|
||||
upload: boolean;
|
||||
}
|
||||
|
||||
export interface UserSorting {
|
||||
by: string;
|
||||
asc: boolean;
|
||||
}
|
||||
|
||||
export interface IRule {
|
||||
allow: boolean;
|
||||
path: string;
|
||||
regex: boolean;
|
||||
regexp: IRegexp;
|
||||
}
|
||||
|
||||
interface IRegexp {
|
||||
raw: string;
|
||||
}
|
||||
|
||||
@ -257,8 +257,8 @@ const commandObject = ref<{
|
||||
}>({});
|
||||
const shellValue = ref<string>("");
|
||||
|
||||
const $showSuccess = inject<IToastSuccess>("$showSuccess") as IToastSuccess;
|
||||
const $showError = inject<IToastError>("$showError") as IToastError;
|
||||
const $showError = inject<IToastError>("$showError")!;
|
||||
const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
|
||||
@ -3,23 +3,23 @@
|
||||
<div class="column">
|
||||
<form class="card" @submit="updateSettings">
|
||||
<div class="card-title">
|
||||
<h2>{{ $t("settings.profileSettings") }}</h2>
|
||||
<h2>{{ t("settings.profileSettings") }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<p>
|
||||
<input type="checkbox" v-model="hideDotfiles" />
|
||||
{{ $t("settings.hideDotfiles") }}
|
||||
{{ t("settings.hideDotfiles") }}
|
||||
</p>
|
||||
<p>
|
||||
<input type="checkbox" v-model="singleClick" />
|
||||
{{ $t("settings.singleClick") }}
|
||||
{{ t("settings.singleClick") }}
|
||||
</p>
|
||||
<p>
|
||||
<input type="checkbox" v-model="dateFormat" />
|
||||
{{ $t("settings.setDateFormat") }}
|
||||
{{ t("settings.setDateFormat") }}
|
||||
</p>
|
||||
<h3>{{ $t("settings.language") }}</h3>
|
||||
<h3>{{ t("settings.language") }}</h3>
|
||||
<languages
|
||||
class="input input--block"
|
||||
v-model:locale="locale"
|
||||
@ -30,30 +30,34 @@
|
||||
<input
|
||||
class="button button--flat"
|
||||
type="submit"
|
||||
:value="$t('buttons.update')"
|
||||
:value="t('buttons.update')"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<form class="card" v-if="!user.lockPassword" @submit="updatePassword">
|
||||
<form
|
||||
class="card"
|
||||
v-if="!authStore.user?.lockPassword"
|
||||
@submit="updatePassword"
|
||||
>
|
||||
<div class="card-title">
|
||||
<h2>{{ $t("settings.changePassword") }}</h2>
|
||||
<h2>{{ t("settings.changePassword") }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<input
|
||||
:class="passwordClass"
|
||||
type="password"
|
||||
:placeholder="$t('settings.newPassword')"
|
||||
:placeholder="t('settings.newPassword')"
|
||||
v-model="password"
|
||||
name="password"
|
||||
/>
|
||||
<input
|
||||
:class="passwordClass"
|
||||
type="password"
|
||||
:placeholder="$t('settings.newPasswordConfirm')"
|
||||
:placeholder="t('settings.newPasswordConfirm')"
|
||||
v-model="passwordConf"
|
||||
name="password"
|
||||
/>
|
||||
@ -63,7 +67,7 @@
|
||||
<input
|
||||
class="button button--flat"
|
||||
type="submit"
|
||||
:value="$t('buttons.update')"
|
||||
:value="t('buttons.update')"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
@ -71,102 +75,108 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||
<script setup lang="ts">
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useLayoutStore } from "@/stores/layout";
|
||||
import { users as api } from "@/api";
|
||||
import Languages from "@/components/settings/Languages.vue";
|
||||
import i18n, { rtlLanguages } from "@/i18n";
|
||||
// import i18n, { rtlLanguages } from "@/i18n";
|
||||
import { inject, onMounted, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { IToastError, IToastSuccess } from "@/types";
|
||||
|
||||
export default {
|
||||
name: "settings",
|
||||
components: {
|
||||
Languages,
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
password: "",
|
||||
passwordConf: "",
|
||||
hideDotfiles: false,
|
||||
singleClick: false,
|
||||
dateFormat: false,
|
||||
locale: "",
|
||||
const layoutStore = useLayoutStore();
|
||||
const authStore = useAuthStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const $showError = inject<IToastError>("$showError")!;
|
||||
const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
|
||||
|
||||
const password = ref<string>("");
|
||||
const passwordConf = ref<string>("");
|
||||
const hideDotfiles = ref<boolean>(false);
|
||||
const singleClick = ref<boolean>(false);
|
||||
const dateFormat = ref<boolean>(false);
|
||||
const locale = ref<string>("");
|
||||
|
||||
// ...mapState(useAuthStore, ["user"]),
|
||||
// ...mapWritableState(useLayoutStore, ["loading"]),
|
||||
//...mapActions(useAuthStore, ["updateUser"]),
|
||||
|
||||
const passwordClass = () => {
|
||||
const baseClass = "input input--block";
|
||||
|
||||
if (password.value === "" && passwordConf.value === "") {
|
||||
return baseClass;
|
||||
}
|
||||
|
||||
if (password.value === passwordConf.value) {
|
||||
return `${baseClass} input--green`;
|
||||
}
|
||||
|
||||
return `${baseClass} input--red`;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
layoutStore.loading = true;
|
||||
if (authStore.user === null) return false;
|
||||
locale.value = authStore.user.locale;
|
||||
hideDotfiles.value = authStore.user.hideDotfiles;
|
||||
singleClick.value = authStore.user.singleClick;
|
||||
dateFormat.value = authStore.user.dateFormat;
|
||||
layoutStore.loading = false;
|
||||
});
|
||||
|
||||
const updatePassword = async (event: Event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (
|
||||
password.value !== passwordConf.value ||
|
||||
password.value === "" ||
|
||||
authStore.user === null
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const data = { id: authStore.user.id, password: password.value };
|
||||
await api.update(data, ["password"]);
|
||||
authStore.updateUser(data);
|
||||
$showSuccess(t("settings.passwordUpdated"));
|
||||
} catch (e: any) {
|
||||
$showError(e);
|
||||
}
|
||||
};
|
||||
const updateSettings = async (event: Event) => {
|
||||
event.preventDefault();
|
||||
|
||||
try {
|
||||
if (authStore.user === null) throw "User is not set";
|
||||
|
||||
const data = {
|
||||
id: authStore.user.id,
|
||||
locale: locale.value,
|
||||
hideDotfiles: hideDotfiles.value,
|
||||
singleClick: singleClick.value,
|
||||
dateFormat: dateFormat.value,
|
||||
};
|
||||
},
|
||||
inject: ["$showError", "$showSuccess"],
|
||||
computed: {
|
||||
...mapState(useAuthStore, ["user"]),
|
||||
...mapWritableState(useLayoutStore, ["loading"]),
|
||||
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.loading = true;
|
||||
this.locale = this.user.locale;
|
||||
this.hideDotfiles = this.user.hideDotfiles;
|
||||
this.singleClick = this.user.singleClick;
|
||||
this.dateFormat = this.user.dateFormat;
|
||||
this.loading = false;
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useAuthStore, ["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,
|
||||
hideDotfiles: this.hideDotfiles,
|
||||
singleClick: this.singleClick,
|
||||
dateFormat: this.dateFormat,
|
||||
};
|
||||
const shouldReload =
|
||||
rtlLanguages.includes(data.locale) !==
|
||||
rtlLanguages.includes(i18n.locale);
|
||||
await api.update(data, [
|
||||
"locale",
|
||||
"hideDotfiles",
|
||||
"singleClick",
|
||||
"dateFormat",
|
||||
]);
|
||||
this.updateUser(data);
|
||||
if (shouldReload) {
|
||||
location.reload();
|
||||
}
|
||||
this.$showSuccess(this.$t("settings.settingsUpdated"));
|
||||
} catch (e) {
|
||||
this.$showError(e);
|
||||
}
|
||||
},
|
||||
},
|
||||
// TODO don't know what this is doing
|
||||
const shouldReload = false;
|
||||
// rtlLanguages.includes(data.locale) !==
|
||||
// rtlLanguages.includes(i18n.locale);
|
||||
await api.update(data, [
|
||||
"locale",
|
||||
"hideDotfiles",
|
||||
"singleClick",
|
||||
"dateFormat",
|
||||
]);
|
||||
authStore.updateUser(data);
|
||||
if (shouldReload) {
|
||||
location.reload();
|
||||
}
|
||||
$showSuccess(t("settings.settingsUpdated"));
|
||||
} catch (e: any) {
|
||||
$showError(e);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
<template>
|
||||
<errors v-if="error" :errorCode="error.status" />
|
||||
<div class="row" v-else-if="!loading">
|
||||
<div class="row" v-else-if="!layoutStore.loading">
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
<h2>{{ $t("settings.shareManagement") }}</h2>
|
||||
<h2>{{ t("settings.shareManagement") }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content full" v-if="links.length > 0">
|
||||
<table>
|
||||
<tr>
|
||||
<th>{{ $t("settings.path") }}</th>
|
||||
<th>{{ $t("settings.shareDuration") }}</th>
|
||||
<th v-if="user.perm.admin">{{ $t("settings.username") }}</th>
|
||||
<th>{{ t("settings.path") }}</th>
|
||||
<th>{{ t("settings.shareDuration") }}</th>
|
||||
<th v-if="authStore.user?.perm.admin">
|
||||
{{ t("settings.username") }}
|
||||
</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
@ -25,15 +27,15 @@
|
||||
<template v-if="link.expire !== 0">{{
|
||||
humanTime(link.expire)
|
||||
}}</template>
|
||||
<template v-else>{{ $t("permanent") }}</template>
|
||||
<template v-else>{{ t("permanent") }}</template>
|
||||
</td>
|
||||
<td v-if="user.perm.admin">{{ link.username }}</td>
|
||||
<td v-if="authStore.user?.perm.admin">{{ link.username }}</td>
|
||||
<td class="small">
|
||||
<button
|
||||
class="action"
|
||||
@click="deleteLink($event, link)"
|
||||
:aria-label="$t('buttons.delete')"
|
||||
:title="$t('buttons.delete')"
|
||||
:aria-label="t('buttons.delete')"
|
||||
:title="t('buttons.delete')"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@ -42,8 +44,8 @@
|
||||
<button
|
||||
class="action copy-clipboard"
|
||||
:data-clipboard-text="buildLink(link)"
|
||||
:aria-label="$t('buttons.copyToClipboard')"
|
||||
:title="$t('buttons.copyToClipboard')"
|
||||
:aria-label="t('buttons.copyToClipboard')"
|
||||
:title="t('buttons.copyToClipboard')"
|
||||
>
|
||||
<i class="material-icons">content_paste</i>
|
||||
</button>
|
||||
@ -53,94 +55,88 @@
|
||||
</div>
|
||||
<h2 class="message" v-else>
|
||||
<i class="material-icons">sentiment_dissatisfied</i>
|
||||
<span>{{ $t("files.lonely") }}</span>
|
||||
<span>{{ t("files.lonely") }}</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapWritableState } from "pinia";
|
||||
<script setup lang="ts">
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useLayoutStore } from "@/stores/layout";
|
||||
import { share as api, users } from "@/api";
|
||||
import dayjs from "dayjs";
|
||||
import Clipboard from "clipboard";
|
||||
import Errors from "@/views/Errors.vue";
|
||||
import { inject, onBeforeUnmount, ref, onMounted } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { IShare, IToastError, IToastSuccess } from "@/types";
|
||||
|
||||
export default {
|
||||
name: "shares",
|
||||
components: {
|
||||
Errors,
|
||||
},
|
||||
inject: ["$showError", "$showSuccess"],
|
||||
computed: {
|
||||
...mapState(useAuthStore, ["user"]),
|
||||
...mapWritableState(useLayoutStore, ["loading"]),
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
error: null,
|
||||
links: [],
|
||||
clip: null,
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
this.loading = true;
|
||||
const $showError = inject<IToastError>("$showError")!;
|
||||
const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
|
||||
const { t } = useI18n();
|
||||
|
||||
try {
|
||||
let links = await api.list();
|
||||
if (this.user.perm.admin) {
|
||||
let userMap = new Map();
|
||||
for (let user of await users.getAll())
|
||||
userMap.set(user.id, user.username);
|
||||
for (let link of links)
|
||||
link.username = userMap.has(link.userID)
|
||||
? userMap.get(link.userID)
|
||||
: "";
|
||||
}
|
||||
this.links = links;
|
||||
} catch (e) {
|
||||
this.error = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
const layoutStore = useLayoutStore();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// ...mapState(useAuthStore, ["user"]),
|
||||
// ...mapWritableState(useLayoutStore, ["loading"]),
|
||||
const error = ref<any>(null);
|
||||
const links = ref<any[]>([]);
|
||||
const clip = ref<Clipboard | null>(null);
|
||||
|
||||
onMounted(async () => {
|
||||
layoutStore.loading = true;
|
||||
|
||||
try {
|
||||
let newLinks = await api.list();
|
||||
if (authStore.user?.perm.admin) {
|
||||
let userMap = new Map();
|
||||
for (let user of await users.getAll())
|
||||
userMap.set(user.id, user.username);
|
||||
for (let link of newLinks)
|
||||
link.username = userMap.has(link.userID)
|
||||
? userMap.get(link.userID)
|
||||
: "";
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.clip = new Clipboard(".copy-clipboard");
|
||||
this.clip.on("success", () => {
|
||||
this.$showSuccess(this.$t("success.linkCopied"));
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.clip.destroy();
|
||||
},
|
||||
methods: {
|
||||
deleteLink: async function (event, link) {
|
||||
event.preventDefault();
|
||||
links.value = newLinks;
|
||||
} catch (e: any) {
|
||||
error.value = e;
|
||||
} finally {
|
||||
layoutStore.loading = false;
|
||||
}
|
||||
clip.value = new Clipboard(".copy-clipboard");
|
||||
clip.value.on("success", () => {
|
||||
$showSuccess(t("success.linkCopied"));
|
||||
});
|
||||
});
|
||||
|
||||
this.showHover({
|
||||
prompt: "share-delete",
|
||||
confirm: () => {
|
||||
this.closeHovers();
|
||||
onBeforeUnmount(() => clip.value?.destroy());
|
||||
|
||||
try {
|
||||
api.remove(link.hash);
|
||||
this.links = this.links.filter((item) => item.hash !== link.hash);
|
||||
this.$showSuccess(this.$t("settings.shareDeleted"));
|
||||
} catch (e) {
|
||||
this.$showError(e);
|
||||
}
|
||||
},
|
||||
});
|
||||
const deleteLink = async (event: Event, link: any) => {
|
||||
event.preventDefault();
|
||||
|
||||
layoutStore.showHover({
|
||||
prompt: "share-delete",
|
||||
confirm: () => {
|
||||
layoutStore.closeHovers();
|
||||
|
||||
try {
|
||||
api.remove(link.hash);
|
||||
links.value = links.value.filter((item) => item.hash !== link.hash);
|
||||
$showSuccess(t("settings.shareDeleted"));
|
||||
} catch (e: any) {
|
||||
$showError(e);
|
||||
}
|
||||
},
|
||||
humanTime(time) {
|
||||
return dayjs(time * 1000).fromNow();
|
||||
},
|
||||
buildLink(share) {
|
||||
return api.getShareURL(share);
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
const humanTime = (time: number) => {
|
||||
return dayjs(time * 1000).fromNow();
|
||||
};
|
||||
|
||||
const buildLink = (share: IShare) => {
|
||||
return api.getShareURL(share);
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<errors v-if="error" :errorCode="error.status" />
|
||||
<div class="row" v-else-if="!loading">
|
||||
<div class="row" v-else-if="!layoutStore.loading">
|
||||
<div class="column">
|
||||
<form @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>
|
||||
<h2 v-if="user?.id === 0">{{ $t("settings.newUser") }}</h2>
|
||||
<h2 v-else>{{ $t("settings.user") }} {{ user?.username }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="card-content" v-if="user">
|
||||
<user-form
|
||||
v-model:user="user"
|
||||
v-model:createUserDir="createUserDir"
|
||||
@ -46,7 +46,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-if="show === 'deleteUser'" class="card floating">
|
||||
<div v-if="layoutStore.show === 'deleteUser'" class="card floating">
|
||||
<div class="card-content">
|
||||
<p>Are you sure you want to delete this user?</p>
|
||||
</div>
|
||||
@ -54,7 +54,7 @@
|
||||
<div class="card-action">
|
||||
<button
|
||||
class="button button--flat button--grey"
|
||||
@click="closeHovers"
|
||||
@click="layoutStore.closeHovers"
|
||||
v-focus
|
||||
:aria-label="$t('buttons.cancel')"
|
||||
:title="$t('buttons.cancel')"
|
||||
@ -69,117 +69,113 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||
<script setup lang="ts">
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useLayoutStore } from "@/stores/layout";
|
||||
import { users as api, settings } from "@/api";
|
||||
import UserForm from "@/components/settings/UserForm.vue";
|
||||
import Errors from "@/views/Errors.vue";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import { computed, inject, onMounted, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { IToastError, IToastSuccess, IUser } from "@/types";
|
||||
|
||||
export default {
|
||||
name: "user",
|
||||
components: {
|
||||
UserForm,
|
||||
Errors,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
error: null,
|
||||
originalUser: null,
|
||||
user: {},
|
||||
createUserDir: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchData();
|
||||
},
|
||||
inject: ["$showError", "$showSuccess"],
|
||||
computed: {
|
||||
...mapState(useAuthStore, { sUser: "user" }),
|
||||
...mapState(useLayoutStore, ["show"]),
|
||||
...mapWritableState(useLayoutStore, ["loading"]),
|
||||
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: {
|
||||
...mapActions(useAuthStore, ["setUser"]),
|
||||
...mapActions(useLayoutStore, ["closeHovers", "showHover"]),
|
||||
async fetchData() {
|
||||
this.loading = true;
|
||||
const error = ref<any | null>(null);
|
||||
const originalUser = ref<IUser | null>(null);
|
||||
const user = ref<IUser | null>(null);
|
||||
const createUserDir = ref<boolean>(false);
|
||||
|
||||
try {
|
||||
if (this.isNew) {
|
||||
let { defaults, createUserDir } = await settings.get();
|
||||
this.createUserDir = createUserDir;
|
||||
this.user = {
|
||||
...defaults,
|
||||
username: "",
|
||||
passsword: "",
|
||||
rules: [],
|
||||
lockPassword: false,
|
||||
id: 0,
|
||||
};
|
||||
} else {
|
||||
const id = this.$route.params.id;
|
||||
this.user = { ...(await api.get(id)) };
|
||||
}
|
||||
} catch (e) {
|
||||
this.error = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
deletePrompt() {
|
||||
this.showHover("deleteUser");
|
||||
},
|
||||
async deleteUser(event) {
|
||||
event.preventDefault();
|
||||
const $showError = inject<IToastError>("$showError")!;
|
||||
const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
|
||||
|
||||
try {
|
||||
await api.remove(this.user.id);
|
||||
this.$router.push({ path: "/settings/users" });
|
||||
this.$showSuccess(this.$t("settings.userDeleted"));
|
||||
} catch (e) {
|
||||
e.message === "403"
|
||||
? this.$showError(this.$t("errors.forbidden"), false)
|
||||
: this.$showError(e);
|
||||
}
|
||||
},
|
||||
async save(event) {
|
||||
event.preventDefault();
|
||||
let user = {
|
||||
...this.originalUser,
|
||||
...this.user,
|
||||
const authStore = useAuthStore();
|
||||
const layoutStore = useLayoutStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
|
||||
const isNew = computed(() => route.path === "/settings/users/new");
|
||||
|
||||
watch(route, () => fetchData());
|
||||
watch(user, () => {
|
||||
if (!user.value?.perm.admin) return;
|
||||
user.value.lockPassword = false;
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
layoutStore.loading = true;
|
||||
|
||||
try {
|
||||
if (isNew.value) {
|
||||
let { defaults, _createUserDir } = await settings.get();
|
||||
createUserDir.value = _createUserDir;
|
||||
user.value = {
|
||||
...defaults,
|
||||
username: "",
|
||||
passsword: "",
|
||||
rules: [],
|
||||
lockPassword: false,
|
||||
id: 0,
|
||||
};
|
||||
} else {
|
||||
const id = Array.isArray(route.params.id)
|
||||
? route.params.id.join("")
|
||||
: route.params.id;
|
||||
user.value = { ...(await api.get(parseInt(id))) };
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = e;
|
||||
} finally {
|
||||
layoutStore.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
const deletePrompt = () => layoutStore.showHover("deleteUser");
|
||||
|
||||
const deleteUser = async (e: Event) => {
|
||||
e.preventDefault();
|
||||
if (user.value === null) {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
await api.remove(user.value.id);
|
||||
router.push({ path: "/settings/users" });
|
||||
$showSuccess(t("settings.userDeleted"));
|
||||
} catch (e: any) {
|
||||
e.message === "403" ? $showError(t("errors.forbidden")) : $showError(e);
|
||||
}
|
||||
};
|
||||
const save = async (event: Event) => {
|
||||
event.preventDefault();
|
||||
if (originalUser.value === null || user.value === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
if (isNew.value) {
|
||||
const newUser: IUser = {
|
||||
...originalUser.value,
|
||||
...user.value,
|
||||
};
|
||||
|
||||
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);
|
||||
const loc = (await api.create(newUser)) as string;
|
||||
router.push({ path: loc });
|
||||
$showSuccess(t("settings.userCreated"));
|
||||
} else {
|
||||
await api.update(user);
|
||||
|
||||
if (user.id === this.sUser.id) {
|
||||
this.setUser({ ...cloneDeep(user) });
|
||||
}
|
||||
|
||||
this.$showSuccess(this.$t("settings.userUpdated"));
|
||||
}
|
||||
} catch (e) {
|
||||
this.$showError(e);
|
||||
if (user.value.id === authStore.user?.id) {
|
||||
authStore.updateUser(user.value);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
$showSuccess(t("settings.userUpdated"));
|
||||
}
|
||||
} catch (e: any) {
|
||||
$showError(e);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<errors v-if="error" :errorCode="error.status" />
|
||||
<div class="row" v-else-if="!loading">
|
||||
<div class="row" v-else-if="!layoutStore.loading">
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
<h2>{{ $t("settings.users") }}</h2>
|
||||
<h2>{{ t("settings.users") }}</h2>
|
||||
<router-link to="/settings/users/new"
|
||||
><button class="button">
|
||||
{{ $t("buttons.new") }}
|
||||
{{ t("buttons.new") }}
|
||||
</button></router-link
|
||||
>
|
||||
</div>
|
||||
@ -15,9 +15,9 @@
|
||||
<div class="card-content full">
|
||||
<table>
|
||||
<tr>
|
||||
<th>{{ $t("settings.username") }}</th>
|
||||
<th>{{ $t("settings.admin") }}</th>
|
||||
<th>{{ $t("settings.scope") }}</th>
|
||||
<th>{{ t("settings.username") }}</th>
|
||||
<th>{{ t("settings.admin") }}</th>
|
||||
<th>{{ t("settings.scope") }}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
|
||||
@ -41,36 +41,29 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapWritableState } from "pinia";
|
||||
<script setup lang="ts">
|
||||
import { useLayoutStore } from "@/stores/layout";
|
||||
import { users as api } from "@/api";
|
||||
import Errors from "@/views/Errors.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { IUser } from "@/types";
|
||||
|
||||
export default {
|
||||
name: "users",
|
||||
components: {
|
||||
Errors,
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
error: null,
|
||||
users: [],
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
this.loading = true;
|
||||
const error = ref<any>(null);
|
||||
const users = ref<IUser[]>([]);
|
||||
|
||||
try {
|
||||
this.users = await api.getAll();
|
||||
} catch (e) {
|
||||
this.error = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapWritableState(useLayoutStore, ["loading"]),
|
||||
},
|
||||
};
|
||||
const layoutStore = useLayoutStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
onMounted(async () => {
|
||||
layoutStore.loading = true;
|
||||
|
||||
try {
|
||||
users.value = await api.getAll();
|
||||
} catch (e: any) {
|
||||
error.value = e;
|
||||
} finally {
|
||||
layoutStore.loading = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user