nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Run lint

Browse Source
This commit is contained in:
Joep 2023-09-09 14:12:45 +02:00
parent bf0a2ac9f0
commit 01b1373130
34 changed files with 396 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/package.json
View File

@ -9,8 +9,8 @@
"build": "vite build",
"watch": "vite build --watch",
"clean": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitkeep' -exec rm -r {} +",
"lint": "eslint --ext .vue,.js src/",
"lint:fix": "eslint --ext .vue,.js --fix src/",
"lint": "eslint --ext .vue,.ts src/",
"lint:fix": "eslint --ext .vue,.ts --fix src/",
"format": "prettier --write ."
},
"dependencies": {

15
frontend/src/App.vue
View File

@ -5,19 +5,18 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { onMounted } from "vue";
onMounted(() => {
const loading = document.getElementById("loading");
if(loading !== null) {
if (loading !== null) {
loading.classList.add("done");
setTimeout(function () {
if(loading.parentNode !== null) {
if (loading.parentNode !== null) {
loading.parentNode.removeChild(loading);
}
}, 200);
}
})
</script>
}
});
</script>

9
frontend/src/api/commands.ts
View File

@ -5,13 +5,18 @@ import { useAuthStore } from "@/stores/auth";
const ssl = window.location.protocol === "https:";
const protocol = ssl ? "wss:" : "ws:";
export default function command(url: string, command: string, onmessage: WebSocket["onmessage"], onclose: WebSocket["onclose"]) {
export default function command(
url: string,
command: string,
onmessage: WebSocket["onmessage"],
onclose: WebSocket["onclose"]
) {
const authStore = useAuthStore();
url = removePrefix(url);
url = `${protocol}//${window.location.host}${baseURL}/api/command${url}?auth=${authStore.jwt}`;
let conn = new window.WebSocket(url);
const conn = new window.WebSocket(url);
conn.onopen = () => conn.send(command);
conn.onmessage = onmessage;
conn.onclose = onclose;

37
frontend/src/api/files.ts
View File

@ -8,7 +8,7 @@ export async function fetch(url: apiUrl) {
const res = await fetchURL(`/api/resources${url}`, {});
let data = await res.json();
const data = await res.json();
data.url = `/files${url}`;
if (data.isDir) {
@ -33,9 +33,9 @@ async function resourceAction(url: apiUrl, method: apiMethod, content?: any) {
debugger;
url = removePrefix(url);
let opts: apiOpts = {
method
};
const opts: apiOpts = {
method,
};
if (content) {
opts.body = content;
@ -62,7 +62,7 @@ export function download(format: any, ...files: string[]) {
} else {
let arg = "";
for (let file of files) {
for (const file of files) {
arg += removePrefix(file) + ",";
}
@ -83,7 +83,12 @@ export function download(format: any, ...files: string[]) {
window.open(url);
}
export async function post(url: apiUrl, content: apiContent = "", overwrite = false, onupload: Function = () => {}) {
export async function post(
url: apiUrl,
content: apiContent = "",
overwrite = false,
onupload: Function = () => {}
) {
// Use the pre-existing API if:
const useResourcesApi =
// a folder is being created
@ -98,7 +103,12 @@ export async function post(url: apiUrl, content: apiContent = "", overwrite = fa
: postTus(url, content, overwrite, onupload);
}
async function postResources(url: apiUrl, content: apiContent = "", overwrite = false, onupload: any) {
async function postResources(
url: apiUrl,
content: apiContent = "",
overwrite = false,
onupload: any
) {
url = removePrefix(url);
let bufferContent: ArrayBuffer;
@ -111,7 +121,7 @@ async function postResources(url: apiUrl, content: apiContent = "", overwrite =
const authStore = useAuthStore();
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest();
const request = new XMLHttpRequest();
request.open(
"POST",
`${baseURL}/api/resources${url}?override=${overwrite}`,
@ -141,10 +151,15 @@ async function postResources(url: apiUrl, content: apiContent = "", overwrite =
});
}
function moveCopy(items: item[], copy = false, overwrite = false, rename = false) {
let promises = [];
function moveCopy(
items: item[],
copy = false,
overwrite = false,
rename = false
) {
const promises = [];
for (let item of items) {
for (const item of items) {
const from = item.from;
const to = encodeURIComponent(removePrefix(item.to ?? ""));
const url = `${from}?action=${

11
frontend/src/api/pub.ts
View File

@ -12,7 +12,7 @@ export async function fetch(url: ApiUrl, password: string = "") {
false
);
let data = await res.json();
const data = await res.json();
data.url = `/share${url}`;
if (data.isDir) {
@ -33,7 +33,12 @@ export async function fetch(url: ApiUrl, password: string = "") {
}
// Is this redundant code?
export function download(format: any, hash: string, token: string, ...files: any) {
export function download(
format: any,
hash: string,
token: string,
...files: any
) {
let url = `${baseURL}/api/public/dl/${hash}`;
if (files.length === 1) {
@ -41,7 +46,7 @@ export function download(format: any, hash: string, token: string, ...files: any
} else {
let arg = "";
for (let file of files) {
for (const file of files) {
arg += encodeURIComponent(file) + ",";
}

2
frontend/src/api/search.ts
View File

@ -9,7 +9,7 @@ export default async function search(base: apiUrl, query: string) {
base += "/";
}
let res = await fetchURL(`/api/search${base}?query=${query}`, {});
const res = await fetchURL(`/api/search${base}?query=${query}`, {});
let data = await res.json();

7
frontend/src/api/share.ts
View File

@ -15,7 +15,12 @@ export async function remove(hash: string) {
});
}
export async function create(url: apiUrl, password = "", expires = "", unit = "hours") {
export async function create(
url: apiUrl,
password = "",
expires = "",
unit = "hours"
) {
url = removePrefix(url);
url = `/api/share${url}`;
if (expires !== "") {

10
frontend/src/api/tus.ts
View File

@ -19,18 +19,18 @@ export async function upload(
}
filePath = removePrefix(filePath);
let resourcePath = `${tusEndpoint}${filePath}?override=${overwrite}`;
const resourcePath = `${tusEndpoint}${filePath}?override=${overwrite}`;
await createUpload(resourcePath);
const authStore = useAuthStore();
// Exit early because of typescript, tus content can't be a string
if(content === "") {
if (content === "") {
return false;
}
return new Promise<void | string>((resolve, reject) => {
let upload = new tus.Upload(content, {
const upload = new tus.Upload(content, {
uploadUrl: `${baseURL}${resourcePath}`,
chunkSize: tusSettings.chunkSize,
retryDelays: computeRetryDelays(tusSettings),
@ -58,7 +58,7 @@ export async function upload(
}
async function createUpload(resourcePath: resourcePath) {
let headResp = await fetchURL(resourcePath, {
const headResp = await fetchURL(resourcePath, {
method: "POST",
});
if (headResp.status !== 201) {
@ -68,7 +68,7 @@ async function createUpload(resourcePath: resourcePath) {
}
}
function computeRetryDelays(tusSettings: tusSettings): number[] | undefined{
function computeRetryDelays(tusSettings: tusSettings): number[] | undefined {
if (!tusSettings.retryCount || tusSettings.retryCount < 1) {
// Disable retries altogether
return undefined;

2
frontend/src/api/utils.ts
View File

@ -9,7 +9,7 @@ export async function fetchURL(url: ApiUrl, opts: ApiOpts, auth = true) {
opts = opts || {};
opts.headers = opts.headers || {};
let { headers, ...rest } = opts;
const { headers, ...rest } = opts;
let res;
try {
res = await fetch(`${baseURL}${url}`, {

2
frontend/src/index.d.ts vendored
View File

@ -1 +1 @@
declare module '*.vue';
declare module "*.vue";

3
frontend/src/router/index.ts
View File

@ -144,7 +144,8 @@ const routes = [
},
{
path: "/:catchAll(.*)*",
redirect: (to: RouteLocation) => `/files/${[...to.params.catchAll].join("/")}`,
redirect: (to: RouteLocation) =>
`/files/${[...to.params.catchAll].join("/")}`,
},
];

6
frontend/src/stores/auth.ts
View File

@ -7,8 +7,8 @@ import { cloneDeep } from "lodash-es";
export const useAuthStore = defineStore("auth", {
// convert to a function
state: (): {
user: user | null,
jwt: string
user: user | null;
jwt: string;
} => ({
user: null,
jwt: "",
@ -34,7 +34,7 @@ export const useAuthStore = defineStore("auth", {
updateUser(value: user) {
if (typeof value !== "object") return;
let field: userKey
let field: userKey;
for (field in value) {
if (field === "locale") {
const locale = value[field];

12
frontend/src/stores/file.ts
View File

@ -3,12 +3,12 @@ import { defineStore } from "pinia";
export const useFileStore = defineStore("file", {
// convert to a function
state: (): {
req: IFile | null,
oldReq: IFile | null,
reload: boolean,
selected: any[],
multiple: boolean,
isFiles: boolean
req: IFile | null;
oldReq: IFile | null;
reload: boolean;
selected: any[];
multiple: boolean;
isFiles: boolean;
} => ({
req: null,
oldReq: null,

10
frontend/src/stores/layout.ts
View File

@ -5,11 +5,11 @@ import { defineStore } from "pinia";
export const useLayoutStore = defineStore("layout", {
// convert to a function
state: (): {
loading: boolean,
show: string | null | boolean,
showConfirm: any,
showAction: boolean | null,
showShell: boolean | null
loading: boolean;
show: string | null | boolean;
showConfirm: any;
showAction: boolean | null;
showShell: boolean | null;
} => ({
loading: false,
show: null,

26
frontend/src/stores/upload.ts
View File

@ -16,12 +16,12 @@ const beforeUnload = (event: Event) => {
export const useUploadStore = defineStore("upload", {
// convert to a function
state: (): {
id: number,
sizes: any[],
progress: any[],
queue: any[],
uploads: uploads,
error: any
id: number;
sizes: any[];
progress: any[];
queue: any[];
uploads: uploads;
error: any;
} => ({
id: 0,
sizes: [],
@ -75,9 +75,9 @@ export const useUploadStore = defineStore("upload", {
},
actions: {
// no context as first argument, use `this` instead
setProgress(obj: { id: number, loaded: boolean }) {
setProgress(obj: { id: number; loaded: boolean }) {
// Vue.set(this.progress, id, loaded);
const { id, loaded } = obj
const { id, loaded } = obj;
this.progress[id] = loaded;
},
setError(error) {
@ -104,10 +104,10 @@ export const useUploadStore = defineStore("upload", {
delete this.uploads[id];
},
upload(item: item) {
let uploadsCount = Object.keys(this.uploads).length;
const uploadsCount = Object.keys(this.uploads).length;
let isQueueEmpty = this.queue.length == 0;
let isUploadsEmpty = uploadsCount == 0;
const isQueueEmpty = this.queue.length == 0;
const isUploadsEmpty = uploadsCount == 0;
if (isQueueEmpty && isUploadsEmpty) {
window.addEventListener("beforeunload", beforeUnload);
@ -118,7 +118,7 @@ export const useUploadStore = defineStore("upload", {
this.processUploads();
},
finishUpload(item: item) {
this.setProgress({ id: item.id, loaded: (item.file.size > 0) });
this.setProgress({ id: item.id, loaded: item.file.size > 0 });
this.removeJob(item.id);
this.processUploads();
},
@ -147,7 +147,7 @@ export const useUploadStore = defineStore("upload", {
if (item.file.isDir) {
await api.post(item.path).catch(this.setError);
} else {
let onUpload = throttle(
const onUpload = throttle(
(event) =>
this.setProgress({
id: item.id,

39
frontend/src/types/api.d.ts vendored
View File

@ -1,36 +1,39 @@
type ApiUrl = string // Can also be set as a path eg: "path1" | "path2"
type ApiUrl = string; // Can also be set as a path eg: "path1" | "path2"
type resourcePath = string
type resourcePath = string;
type ApiMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
type ApiMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
type ApiContent = Blob | File | Pick<ReadableStreamDefaultReader<any>, "read"> | ""
type ApiContent =
| Blob
| File
| Pick<ReadableStreamDefaultReader<any>, "read">
| "";
interface ApiOpts {
method?: ApiMethod,
headers?: object,
body?: any
method?: ApiMethod;
headers?: object;
body?: any;
}
interface tusSettings {
retryCount: number
retryCount: number;
}
type algo = any
type algo = any;
type inline = any
type inline = any;
interface share {
expire: any,
hash: string,
path: string,
userID: number,
token: string
expire: any;
hash: string;
path: string;
userID: number;
token: string;
}
interface settings {
any
any;
}
type searchParams = any
type searchParams = any;

73
frontend/src/types/file.d.ts vendored
View File

@ -1,45 +1,48 @@
interface IFile {
index?: number
name: string,
modified: string,
path: string,
subtitles: any[],
isDir: boolean,
size: number,
fullPath: string,
type: uploadType,
items: IFile[]
token?: string,
hash: string,
url?: string
index?: number;
name: string;
modified: string;
path: string;
subtitles: any[];
isDir: boolean;
size: number;
fullPath: string;
type: uploadType;
items: IFile[];
token?: string;
hash: string;
url?: string;
}
type uploadType = "video" | "audio" | "image" | "pdf" | "text" | "blob" | "textImmutable"
type uploadType =
| "video"
| "audio"
| "image"
| "pdf"
| "text"
| "blob"
| "textImmutable";
type req = {
path: string
name: string
size: number
extension: string
modified: string
mode: number
isDir: boolean
isSymlink: boolean
type: string
url: string
hash: string
}
path: string;
name: string;
size: number;
extension: string;
modified: string;
mode: number;
isDir: boolean;
isSymlink: boolean;
type: string;
url: string;
hash: string;
};
interface uploads {
[key: string]: upload
[key: string]: upload;
}
interface upload {
id: number,
file: file,
type: string
}
id: number;
file: file;
type: string;
}

10
frontend/src/types/global.d.ts vendored
View File

@ -1,8 +1,8 @@
export {};
declare global {
interface Window {
FileBrowser: any;
grecaptcha: any
}
}
interface Window {
FileBrowser: any;
grecaptcha: any;
}
}

8
frontend/src/types/layout.d.ts vendored
View File

@ -1,5 +1,5 @@
interface LayoutValue {
prompt: string,
confirm: Function,
action?: boolean,
}
prompt: string;
confirm: any;
action?: boolean;
}

8
frontend/src/types/user.d.ts vendored
View File

@ -1,7 +1,7 @@
interface user {
id: number,
locale: string,
perm: any
id: number;
locale: string;
perm: any;
}
type userKey = keyof user
type userKey = keyof user;

2
frontend/src/types/utils.d.ts vendored
View File

@ -1 +1 @@
type settings = any
type settings = any;

10
frontend/src/utils/auth.ts
View File

@ -5,7 +5,7 @@ import { baseURL } from "./constants";
export function parseToken(token: string) {
// falsy or malformed jwt will throw InvalidTokenError
const data = jwt_decode<{[key:string]: any, user: user}>(token);
const data = jwt_decode<{ [key: string]: any; user: user }>(token);
document.cookie = `auth=${token}; Path=/; SameSite=Strict;`;
@ -27,7 +27,11 @@ export async function validateLogin() {
}
}
export async function login(username: string, password: string, recaptcha: string) {
export async function login(
username: string,
password: string,
recaptcha: string
) {
const data = { username, password, recaptcha };
const res = await fetch(`${baseURL}/api/login`, {
@ -87,6 +91,6 @@ export function logout() {
const authStore = useAuthStore();
authStore.clearUser();
localStorage.setItem("jwt", '');
localStorage.setItem("jwt", "");
router.push({ path: "/login" });
}

24
frontend/src/utils/buttons.ts
View File

@ -1,5 +1,7 @@
function loading(button: string) {
let el: HTMLButtonElement | null = document.querySelector(`#${button}-button > i`);
const el: HTMLButtonElement | null = document.querySelector(
`#${button}-button > i`
);
if (el === undefined || el === null) {
console.log("Error getting button " + button); // eslint-disable-line
@ -14,7 +16,7 @@ function loading(button: string) {
el.style.opacity = "0";
setTimeout(() => {
if(el) {
if (el) {
el.classList.add("spin");
el.innerHTML = "autorenew";
el.style.opacity = "1";
@ -23,7 +25,9 @@ function loading(button: string) {
}
function done(button: string) {
let el: HTMLButtonElement | null = document.querySelector(`#${button}-button > i`);
const el: HTMLButtonElement | null = document.querySelector(
`#${button}-button > i`
);
if (el === undefined || el === null) {
console.log("Error getting button " + button); // eslint-disable-line
@ -33,18 +37,18 @@ function done(button: string) {
el.style.opacity = "0";
setTimeout(() => {
if(el !== null) {
if (el !== null) {
el.classList.remove("spin");
el.innerHTML = el?.dataset?.icon || "";
el.style.opacity = "1";
}
}, 100);
}
function success(button: string) {
let el: HTMLButtonElement | null = document.querySelector(`#${button}-button > i`);
const el: HTMLButtonElement | null = document.querySelector(
`#${button}-button > i`
);
if (el === undefined || el === null) {
console.log("Error getting button " + button); // eslint-disable-line
@ -54,16 +58,16 @@ function success(button: string) {
el.style.opacity = "0";
setTimeout(() => {
if(el !== null) {
if (el !== null) {
el.classList.remove("spin");
el.innerHTML = "done";
el.style.opacity = "1";
}
setTimeout(() => {
if(el) el.style.opacity = "0";
if (el) el.style.opacity = "0";
setTimeout(() => {
if(el !== null) {
if (el !== null) {
el.innerHTML = el?.dataset?.icon || "";
el.style.opacity = "1";
}

2
frontend/src/utils/cookie.ts
View File

@ -1,5 +1,5 @@
export default function (name: string) {
let re = new RegExp(
const re = new RegExp(
"(?:(?:^|.*;\\s*)" + name + "\\s*\\=\\s*([^;]*).*$)|^.*$"
);
return document.cookie.replace(re, "$1");

2
frontend/src/utils/css.ts
View File

@ -4,7 +4,7 @@ export default function getRule(rules: any) {
}
let result = null;
let find = Array.prototype.find;
const find = Array.prototype.find;
find.call(document.styleSheets, (styleSheet) => {
result = find.call(styleSheet.cssRules, (cssRule) => {

16
frontend/src/utils/upload.ts
View File

@ -6,21 +6,21 @@ export function checkConflict(files: file[], items: item[]) {
items = [];
}
let folder_upload = files[0].fullPath !== undefined;
const folder_upload = files[0].fullPath !== undefined;
let conflict = false;
for (let i = 0; i < files.length; i++) {
let file = files[i];
const file = files[i];
let name = file.name;
if (folder_upload) {
let dirs = file.fullPath.split("/");
const dirs = file.fullPath.split("/");
if (dirs.length > 1) {
name = dirs[0];
}
}
let res = items.findIndex(function hasConflict(element) {
const res = items.findIndex(function hasConflict(element) {
// @ts-ignore Don't know what this does
return element.name === this;
}, name);
@ -34,13 +34,13 @@ export function checkConflict(files: file[], items: item[]) {
return conflict;
}
export function scanFiles(dt: {[key: string]: any, item: item}) {
export function scanFiles(dt: { [key: string]: any; item: item }) {
return new Promise((resolve) => {
let reading = 0;
const contents: any[] = [];
if (dt.items !== undefined) {
for (let item of dt.items) {
for (const item of dt.items) {
if (
item.kind === "file" &&
typeof item.webkitGetAsEntry === "function"
@ -114,9 +114,9 @@ export function handleFiles(files: file[], base: string, overwrite = false) {
const uploadStore = useUploadStore();
for (let i = 0; i < files.length; i++) {
let id = uploadStore.id;
const id = uploadStore.id;
let path = base;
let file = files[i];
const file = files[i];
if (file.fullPath !== undefined) {
path += url.encodePath(file.fullPath);

2
frontend/src/utils/url.ts
View File

@ -1,5 +1,5 @@
export function removeLastDir(url: string) {
var arr = url.split("/");
const arr = url.split("/");
if (arr.pop() === "") {
arr.pop();
}

16
frontend/src/views/Errors.vue
View File

@ -14,13 +14,13 @@ import HeaderBar from "@/components/header/HeaderBar.vue";
import { computed } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n({})
const { t } = useI18n({});
const errors: {
[key: string]: {
icon: string,
message: string
}
icon: string;
message: string;
};
} = {
0: {
icon: "cloud_off",
@ -40,11 +40,9 @@ const errors: {
},
};
const props = defineProps(["errorCode", "showHeader"])
const props = defineProps(["errorCode", "showHeader"]);
const info = computed(() => {
return errors[props.errorCode] ? errors [props.errorCode] : errors[500]
})
return errors[props.errorCode] ? errors[props.errorCode] : errors[500];
});
</script>

58
frontend/src/views/Files.vue
View File

@ -1,6 +1,10 @@
<template>
<div>
<header-bar v-if="error || fileStore.req?.type === null" showMenu showLogo />
<header-bar
v-if="error || fileStore.req?.type === null"
showMenu
showLogo
/>
<breadcrumbs base="/files" />
@ -20,7 +24,15 @@
</template>
<script setup lang="ts">
import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from "vue";
import {
computed,
defineAsyncComponent,
onBeforeUnmount,
onMounted,
onUnmounted,
ref,
watch,
} from "vue";
import { files as api } from "@/api";
import { useFileStore } from "@/stores/file";
import { useLayoutStore } from "@/stores/layout";
@ -32,23 +44,22 @@ import Errors from "@/views/Errors.vue";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
const layoutStore = useLayoutStore()
const fileStore = useFileStore()
const uploadStore = useUploadStore()
const route = useRoute()
const router = useRouter()
const layoutStore = useLayoutStore();
const fileStore = useFileStore();
const uploadStore = useUploadStore();
const route = useRoute();
const router = useRouter();
const { t } = useI18n({});
const clean = (path: string) => {
return path.endsWith("/") ? path.slice(0, -1) : path;
}
};
const Editor = defineAsyncComponent(() => import("@/views/files/Editor.vue"));
const error = ref<any | null>(null)
const width = computed(() => window.innerWidth)
const error = ref<any | null>(null);
const width = computed(() => window.innerWidth);
const currentView = computed(() => {
if (fileStore.req?.type == undefined) {
@ -65,18 +76,18 @@ const currentView = computed(() => {
} else {
return "preview";
}
})
});
// Define hooks
onMounted(() => {
fetchData();
fileStore.isFiles = true;
window.addEventListener("keydown", keyEvent);
})
});
onBeforeUnmount(() => {
window.removeEventListener("keydown", keyEvent);
})
});
onUnmounted(() => {
fileStore.isFiles = false;
@ -84,20 +95,18 @@ onUnmounted(() => {
layoutStore.toggleShell();
}
fileStore.updateRequest(null);
})
});
watch(route, () => fetchData())
watch(route, () => fetchData());
// @ts-ignore
watch(fileStore.reload, (val) => {
if (val) {
fetchData();
}
}
)
});
watch(uploadStore.error, (newValue, oldValue) => {
newValue && newValue !== oldValue && layoutStore.showError();
})
});
// Define functions
@ -118,10 +127,7 @@ const fetchData = async () => {
try {
const res = await api.fetch(url);
if (
clean(res.path) !==
clean(`/${[...route.params.path].join("/")}`)
) {
if (clean(res.path) !== clean(`/${[...route.params.path].join("/")}`)) {
throw new Error("Data Mismatch!");
}
@ -132,11 +138,11 @@ const fetchData = async () => {
} finally {
layoutStore.loading = false;
}
}
};
const keyEvent = (event: KeyboardEvent) => {
if (event.key === "F1") {
event.preventDefault();
layoutStore.showHover("help");
}
}
};
</script>

17
frontend/src/views/Layout.vue
View File

@ -6,7 +6,11 @@
<sidebar></sidebar>
<main>
<router-view></router-view>
<shell v-if="enableExec && authStore.isLoggedIn && authStore.user?.perm.execute" />
<shell
v-if="
enableExec && authStore.isLoggedIn && authStore.user?.perm.execute
"
/>
</main>
<prompts></prompts>
<upload-files></upload-files>
@ -33,10 +37,9 @@ const route = useRoute();
watch(route, (newval, oldval) => {
fileStore.selected = [];
fileStore.multiple = false;
if (layoutStore.show !== "success") {
layoutStore.closeHovers();
}
})
fileStore.multiple = false;
if (layoutStore.show !== "success") {
layoutStore.closeHovers();
}
});
</script>

38
frontend/src/views/Login.vue
View File

@ -35,9 +35,7 @@
/>
<p @click="toggleMode" v-if="signup">
{{
createMode ? t("login.loginInstead") : t("login.createAnAccount")
}}
{{ createMode ? t("login.loginInstead") : t("login.createAnAccount") }}
</p>
</form>
</div>
@ -57,18 +55,17 @@ import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
// Define refs
const createMode = ref<boolean>(false)
const error = ref<string>("")
const username = ref<string>("")
const password = ref<string>("")
const passwordConfirm = ref<string>("")
const createMode = ref<boolean>(false);
const error = ref<string>("");
const username = ref<string>("");
const password = ref<string>("");
const passwordConfirm = ref<string>("");
const route = useRoute()
const router = useRouter()
const { t } = useI18n({})
const route = useRoute();
const router = useRouter();
const { t } = useI18n({});
// Define functions
const toggleMode = () => createMode.value = !createMode.value;
const toggleMode = () => (createMode.value = !createMode.value);
const submit = async (event: Event) => {
event.preventDefault();
@ -112,17 +109,16 @@ const submit = async (event: Event) => {
error.value = t("login.wrongCredentials");
}
}
}
};
// Run hooks
onMounted(() => {
if (!recaptcha) return;
if (!recaptcha) return;
window.grecaptcha.ready(function () {
window.grecaptcha.render("recaptcha", {
sitekey: recaptchaKey,
});
window.grecaptcha.ready(function () {
window.grecaptcha.render("recaptcha", {
sitekey: recaptchaKey,
});
})
});
});
</script>

6
frontend/src/views/Settings.vue
View File

@ -61,8 +61,6 @@ const { t } = useI18n();
const authStore = useAuthStore();
const layoutStore = useLayoutStore();
const user = computed(() => authStore.user)
const loading = computed(() => layoutStore.loading)
const user = computed(() => authStore.user);
const loading = computed(() => layoutStore.loading);
</script>

194
frontend/src/views/Share.vue
View File

@ -3,13 +3,27 @@
<header-bar showMenu showLogo>
<title />
<action v-if="fileStore.selectedCount" icon="file_download" :label="t('buttons.download')" @action="download"
:counter="fileStore.selectedCount" />
<button v-if="isSingleFile()" class="action copy-clipboard" :data-clipboard-text="linkSelected()"
:aria-label="t('buttons.copyDownloadLinkToClipboard')" :data-title="t('buttons.copyDownloadLinkToClipboard')">
<action
v-if="fileStore.selectedCount"
icon="file_download"
:label="t('buttons.download')"
@action="download"
:counter="fileStore.selectedCount"
/>
<button
v-if="isSingleFile()"
class="action copy-clipboard"
:data-clipboard-text="linkSelected()"
:aria-label="t('buttons.copyDownloadLinkToClipboard')"
:data-title="t('buttons.copyDownloadLinkToClipboard')"
>
<i class="material-icons">content_paste</i>
</button>
<action icon="check_circle" :label="t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
<action
icon="check_circle"
:label="t('buttons.selectMultiple')"
@action="toggleMultipleSelection"
/>
</header-bar>
<breadcrumbs :base="'/share/' + hash" />
@ -35,12 +49,21 @@
</div>
<div class="card-content">
<input v-focus type="password" :placeholder="t('login.password')" v-model="password"
@keyup.enter="fetchData" />
<input
v-focus
type="password"
:placeholder="t('login.password')"
v-model="password"
@keyup.enter="fetchData"
/>
</div>
<div class="card-action">
<button class="button button--flat" @click="fetchData" :aria-label="t('buttons.submit')"
:data-title="t('buttons.submit')">
<button
class="button button--flat"
@click="fetchData"
:aria-label="t('buttons.submit')"
:data-title="t('buttons.submit')"
>
{{ t("buttons.submit") }}
</button>
</div>
@ -54,8 +77,8 @@
<div class="share__box__header">
{{
req.isDir
? t("download.downloadFolder")
: t("download.downloadFile")
? t("download.downloadFolder")
: t("download.downloadFile")
}}
</div>
<div class="share__box__element share__box__center share__box__icon">
@ -73,12 +96,19 @@
<div class="share__box__element share__box__center">
<a target="_blank" :href="link" class="button button--flat">
<div>
<i class="material-icons">file_download</i>{{ t("buttons.download") }}
<i class="material-icons">file_download</i
>{{ t("buttons.download") }}
</div>
</a>
<a target="_blank" :href="inlineLink" class="button button--flat" v-if="!req.isDir">
<a
target="_blank"
:href="inlineLink"
class="button button--flat"
v-if="!req.isDir"
>
<div>
<i class="material-icons">open_in_new</i>{{ t("buttons.openFile") }}
<i class="material-icons">open_in_new</i
>{{ t("buttons.openFile") }}
</div>
</a>
</div>
@ -86,31 +116,59 @@
<qrcode-vue :value="link" :size="200" level="M"></qrcode-vue>
</div>
</div>
<div v-if="req.isDir && req.items.length > 0" class="share__box share__box__items">
<div
v-if="req.isDir && req.items.length > 0"
class="share__box share__box__items"
>
<div class="share__box__header" v-if="req.isDir">
{{ t("files.files") }}
</div>
<div id="listing" class="list file-icons">
<item v-for="item in req.items.slice(0, showLimit)" :key="base64(item.name)" v-bind:index="item.index"
v-bind:name="item.name" v-bind:isDir="item.isDir" v-bind:url="item.url" v-bind:modified="item.modified"
v-bind:type="item.type" v-bind:size="item.size" readOnly>
<item
v-for="item in req.items.slice(0, showLimit)"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size"
readOnly
>
</item>
<div v-if="req.items.length > showLimit" class="item" @click="showLimit += 100">
<div
v-if="req.items.length > showLimit"
class="item"
@click="showLimit += 100"
>
<div>
<p class="name">+ {{ req.items.length - showLimit }}</p>
</div>
</div>
<div :class="{ active: fileStore.multiple }" id="multiple-selection">
<div
:class="{ active: fileStore.multiple }"
id="multiple-selection"
>
<p>{{ t("files.multipleSelectionEnabled") }}</p>
<div @click="() => (fileStore.multiple = false)" tabindex="0" role="button" :data-title="t('files.clear')"
:aria-label="t('files.clear')" class="action">
<div
@click="() => (fileStore.multiple = false)"
tabindex="0"
role="button"
:data-title="t('files.clear')"
:aria-label="t('files.clear')"
class="action"
>
<i class="material-icons">clear</i>
</div>
</div>
</div>
</div>
<div v-else-if="req.isDir && req.items.length === 0" class="share__box share__box__items">
<div
v-else-if="req.isDir && req.items.length === 0"
class="share__box share__box__items"
>
<h2 class="message">
<i class="material-icons">sentiment_dissatisfied</i>
<span>{{ t("files.lonely") }}</span>
@ -140,49 +198,57 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
const error = ref<null | any>(null)
const showLimit = ref<number>(100)
const password = ref<string>("")
const attemptedPasswordLogin = ref<boolean>(false)
const hash = ref<any>(null)
const token = ref<any>(null)
const clip = ref<any>(null)
const error = ref<null | any>(null);
const showLimit = ref<number>(100);
const password = ref<string>("");
const attemptedPasswordLogin = ref<boolean>(false);
const hash = ref<any>(null);
const token = ref<any>(null);
const clip = ref<any>(null);
const { t } = useI18n({})
const { t } = useI18n({});
const route = useRoute()
const fileStore = useFileStore()
const layoutStore = useLayoutStore()
const route = useRoute();
const fileStore = useFileStore();
const layoutStore = useLayoutStore();
watch(route, () => {
showLimit.value = 100
showLimit.value = 100;
fetchData();
})
});
const req = computed(() => fileStore.req)
const req = computed(() => fileStore.req);
// Define computes
const icon = computed(() => {
if (req.value === null) return "insert_drive_file"
if (req.value === null) return "insert_drive_file";
if (req.value.isDir) return "folder";
if (req.value.type === "image") return "insert_photo";
if (req.value.type === "audio") return "volume_up";
if (req.value.type === "video") return "movie";
return "insert_drive_file";
})
});
const link = computed(() => (req.value ? api.getDownloadURL(req.value) : ""))
const inlineLink = computed(() => (req.value ? api.getDownloadURL(req.value, true) : ""))
const link = computed(() => (req.value ? api.getDownloadURL(req.value) : ""));
const inlineLink = computed(() =>
req.value ? api.getDownloadURL(req.value, true) : ""
);
const humanSize = computed(() => {
if (req.value) {
return (req.value.isDir ? req.value.items.length : filesize(req.value.size ?? 0))
return req.value.isDir
? req.value.items.length
: filesize(req.value.size ?? 0);
} else {
return ""
return "";
}
})
const humanTime = computed(() => dayjs(req.value?.modified).fromNow())
const modTime = computed(() => (req.value ? new Date(Date.parse(req.value.modified)).toLocaleString() : new Date()))
});
const humanTime = computed(() => dayjs(req.value?.modified).fromNow());
const modTime = computed(() =>
req.value
? new Date(Date.parse(req.value.modified)).toLocaleString()
: new Date()
);
// Functions
const base64 = (name: any) => Base64.encodeURI(name);
@ -207,7 +273,6 @@ const fetchData = async () => {
let file = await api.fetch(url, password.value);
file.hash = hash.value;
token.value = file.token || "";
fileStore.updateRequest(file);
@ -217,7 +282,7 @@ const fetchData = async () => {
} finally {
layoutStore.loading = false;
}
}
};
const keyEvent = (event: KeyboardEvent) => {
if (event.key === "Escape") {
@ -227,13 +292,15 @@ const keyEvent = (event: KeyboardEvent) => {
fileStore.selected = [];
}
}
}
};
const toggleMultipleSelection = () => {
// toggle
}
};
const isSingleFile = () => fileStore.selectedCount === 1 && !req.value?.items[fileStore.selected[0]].isDir
const isSingleFile = () =>
fileStore.selectedCount === 1 &&
!req.value?.items[fileStore.selected[0]].isDir;
const download = () => {
if (isSingleFile()) {
@ -248,7 +315,7 @@ const download = () => {
layoutStore.showHover({
prompt: "download",
confirm: (format: any) => {
if (req.value === null) return false
if (req.value === null) return false;
layoutStore.closeHovers();
let files: string[] = [];
@ -261,35 +328,32 @@ const download = () => {
api.download(format, hash.value, token.value, ...files);
},
});
}
};
const linkSelected = () => {
return isSingleFile() && req.value
// @ts-ignore
? api.getDownloadURL({
hash: hash.value,
path: req.value.items[fileStore.selected[0]].path,
})
? // @ts-ignore
api.getDownloadURL({
hash: hash.value,
path: req.value.items[fileStore.selected[0]].path,
})
: "";
}
};
onMounted(async () => {
// Created
hash.value = route.params.path[0];
await fetchData();
window.addEventListener("keydown", keyEvent);
clip.value = new Clipboard(".copy-clipboard");
clip.value.on("success", () => {
// $showSuccess(this.t("success.linkCopied"));
});
})
});
onBeforeUnmount(() => {
window.removeEventListener("keydown", keyEvent);
clip.value.destroy();
})
</script>
});
</script>

2
frontend/src/vite-env.d.ts vendored
View File

@ -1 +1 @@
/// <reference types="vite/client" />
/// <reference types="vite/client" />