Initial commit

2022-08-17 21:59:51 +02:00
commit cc6feb3171
48 changed files with 42841 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,24 @@
+# frontend
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+	presets: ['@vue/cli-plugin-babel/preset']
+};
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service build --watch",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "core-js": "^3.8.3",
+    "filesize": "^9.0.11",
+    "jwt-decode": "^3.1.2",
+    "naive-ui": "^2.32.1",
+    "stream-browserify": "^3.0.0",
+    "util": "^0.12.4",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.3"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "prettier": "^2.4.1",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "typescript": "~4.5.5",
+    "vfonts": "^0.0.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended",
+      "@vue/typescript/recommended",
+      "plugin:prettier/recommended"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 2020
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <!--suppress HtmlUnknownTarget -->
+	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,66 @@
+<script setup async lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { refresh_token, TokenInjectType, isErrorResponse } from '@/api';
+
+const router = useRouter();
+
+const jwt = ref<string | null>(null);
+
+function setToken(token: string) {
+	jwt.value = token;
+	localStorage.setItem('token', token);
+}
+
+function logout() {
+	jwt.value = null;
+	localStorage.removeItem('token');
+	router.push({ name: 'login' });
+}
+
+jwt.value = localStorage.getItem('token');
+if (jwt.value == null) await router.push({ name: 'login' });
+else {
+	const new_token = await refresh_token(jwt.value ?? '');
+	if (isErrorResponse(new_token)) logout();
+	else setToken(new_token.jwt);
+}
+
+provide<TokenInjectType>('jwt', {
+	jwt,
+	setToken,
+	logout
+});
+</script>
+
+<template>
+	<nav>
+		<router-link to="/login" v-if="jwt != null" @click="logout()">
+			Logout
+		</router-link>
+	</nav>
+	<router-view />
+</template>
+
+<style lang="scss">
+#app {
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-align: center;
+	color: #2c3e50;
+}
+
+nav {
+	padding: 30px;
+
+	a {
+		font-weight: bold;
+		color: #2c3e50;
+
+		&.router-link-exact-active {
+			color: #42b983;
+		}
+	}
+}
+</style>
--- a/frontend/src/AppAsyncWrapper.vue
+++ b/frontend/src/AppAsyncWrapper.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import App from './App';
+</script>
+
+<template>
+	<Suspense>
+		<App></App>
+		<template #fallback>
+			<div>Loading...</div>
+		</template>
+	</Suspense>
+</template>
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -0,0 +1,220 @@
+import axios from 'axios';
+import {
+	AuthLoginRequest,
+	AuthSignUpRequest,
+	BaseRequest,
+	BaseResponse,
+	CreateFileRequest,
+	CreateFileResponse,
+	CreateFolderRequest,
+	CreateFolderResponse,
+	DeleteRequest,
+	DeleteResponse,
+	ErrorResponse,
+	GetNodeResponse,
+	GetPathResponse,
+	GetRootResponse,
+	LoginResponse,
+	RefreshResponse,
+	UploadFileResponse
+} from '../../dto';
+import jwtDecode, { JwtPayload } from 'jwt-decode';
+import { Ref, UnwrapRef } from 'vue';
+
+export * from '../../dto';
+
+const post = <T extends BaseRequest>(url: string, data: T) =>
+	axios
+		.post(url, data, {
+			headers: { 'Content-type': 'application/json' }
+		})
+		.then((res) => res.data)
+		.catch((err) => err.response.data);
+
+const post_token = <T extends BaseRequest>(
+	url: string,
+	data: T,
+	token: string
+) =>
+	axios
+		.post(url, data, {
+			headers: {
+				Authorization: 'Bearer ' + token,
+				'Content-type': 'application/json'
+			}
+		})
+		.then((res) => res.data)
+		.catch((err) => err.response.data);
+
+const post_token_form = (
+	url: string,
+	data: FormData,
+	token: string,
+	onProgress: (progressEvent: ProgressEvent) => void
+) =>
+	axios
+		.post(url, data, {
+			headers: {
+				Authorization: 'Bearer ' + token,
+				'Content-type': 'multipart/form-data'
+			},
+			onUploadProgress: onProgress
+		})
+		.then((res) => res.data)
+		.catch((err) => err.response.data);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const get = (url: string) =>
+	axios
+		.get(url)
+		.then((res) => res.data)
+		.catch((err) => err.response.data);
+
+const get_token = (url: string, token: string) =>
+	axios
+		.get(url, {
+			headers: { Authorization: 'Bearer ' + token }
+		})
+		.then((res) => res.data)
+		.catch((err) => err.response.data);
+
+//
+// Api Requests
+//
+
+export const auth_login = (
+	username: string,
+	password: string
+): Promise<LoginResponse | ErrorResponse> =>
+	post<AuthLoginRequest>('/api/auth/login', {
+		username: username,
+		password: password
+	});
+
+export const auth_signup = (
+	username: string,
+	password: string
+): Promise<LoginResponse | ErrorResponse> =>
+	post<AuthSignUpRequest>('/api/auth/signup', {
+		username: username,
+		password: password
+	});
+
+export const get_root = (
+	token: string
+): Promise<GetRootResponse | ErrorResponse> => get_token('/api/fs/root', token);
+
+export const get_node = (
+	token: string,
+	node: number
+): Promise<GetNodeResponse | ErrorResponse> =>
+	get_token(`/api/fs/node/${node}`, token);
+
+export const get_path = (
+	token: string,
+	node: number
+): Promise<GetPathResponse | ErrorResponse> =>
+	get_token(`/api/fs/path/${node}`, token);
+
+export const create_folder = (
+	token: string,
+	parent: number,
+	name: string
+): Promise<CreateFolderResponse | ErrorResponse> =>
+	post_token<CreateFolderRequest>(
+		'/api/fs/createFolder',
+		{
+			parent: parent,
+			name: name
+		},
+		token
+	);
+
+export const create_file = (
+	token: string,
+	parent: number,
+	name: string
+): Promise<CreateFileResponse | ErrorResponse> =>
+	post_token<CreateFileRequest>(
+		'/api/fs/createFile',
+		{
+			parent: parent,
+			name: name
+		},
+		token
+	);
+
+export const delete_node = (
+	token: string,
+	node: number
+): Promise<DeleteResponse | ErrorResponse> =>
+	post_token<DeleteRequest>(
+		'/api/fs/delete',
+		{
+			node: node
+		},
+		token
+	);
+
+export const upload_file = async (
+	token: string,
+	parent: number,
+	file: File,
+	onProgress: (progressEvent: ProgressEvent) => void
+): Promise<UploadFileResponse | ErrorResponse> => {
+	const node = await create_file(token, parent, file.name);
+	if (isErrorResponse(node)) return node;
+
+	const form = new FormData();
+	form.set('file', file);
+	return post_token_form(
+		`/api/fs/upload/${node.id}`,
+		form,
+		token,
+		onProgress
+	);
+};
+
+export function download_file(token: string, id: number) {
+	const form = document.createElement('form');
+	form.method = 'post';
+	form.target = '_blank';
+	form.action = '/api/fs/download';
+	form.innerHTML = `<input type="hidden" name="jwtToken" value="${token}"><input type="hidden" name="id" value="${id}">`;
+	document.body.appendChild(form);
+	form.submit();
+	document.body.removeChild(form);
+}
+
+export const refresh_token = (
+	token: string
+): Promise<RefreshResponse | ErrorResponse> =>
+	post_token('/api/auth/refresh', '', token);
+
+//
+// Utilities
+//
+
+export async function check_token(
+	token: TokenInjectType
+): Promise<string | void> {
+	if (!token.jwt.value) return token.logout();
+	const payload = jwtDecode<JwtPayload>(token.jwt.value);
+	if (!payload) return token.logout();
+	// Expires in more than 60 Minute
+	if (payload.exp && payload.exp > Math.floor(Date.now() / 1000 + 60 * 60))
+		return token.jwt.value;
+	const new_token = await refresh_token(token.jwt.value);
+	if (isErrorResponse(new_token)) return token.logout();
+	token.setToken(new_token.jwt);
+	return new_token.jwt;
+}
+
+export const isErrorResponse = (res: BaseResponse): res is ErrorResponse =>
+	res.statusCode != 200;
+
+export type TokenInjectType = {
+	jwt: Ref<UnwrapRef<string | null>>;
+	setToken: (token: string) => void;
+	logout: () => void;
+};
--- a/frontend/src/assets/logo.png
+++ b/frontend/src/assets/logo.png
--- a/frontend/src/components/FSView/DirEntry.vue
+++ b/frontend/src/components/FSView/DirEntry.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { defineEmits, defineProps, inject } from 'vue';
+import {
+	check_token,
+	delete_node,
+	download_file,
+	GetNodeResponse,
+	TokenInjectType
+} from '@/api';
+
+const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
+const props = defineProps<{
+	node: GetNodeResponse;
+}>();
+
+const emit = defineEmits<{
+	(e: 'reloadNode'): void;
+}>();
+
+async function del() {
+	const token = await check_token(jwt);
+	if (!token) return;
+	await delete_node(token, props.node.id);
+	emit('reloadNode');
+}
+
+async function download() {
+	const token = await check_token(jwt);
+	if (!token) return;
+	download_file(token, props.node.id);
+}
+</script>
+
+<template>
+	<td>
+		<router-link :to="'/fs/' + props.node.id">{{ node.name }}</router-link>
+	</td>
+	<td>
+		<a href="#" @click="download()" v-if="props.node.isFile">Download</a>
+	</td>
+	<td>
+		<a href="#" @click="del()" v-if="props.node.name !== '..'">delete</a>
+	</td>
+</template>
+
+<style scoped></style>
--- a/frontend/src/components/FSView/DirViewer.vue
+++ b/frontend/src/components/FSView/DirViewer.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { defineEmits, defineProps, inject, reactive, ref, watch } from 'vue';
+import {
+	GetNodeResponse,
+	create_folder,
+	get_node,
+	check_token,
+	TokenInjectType
+} from '@/api';
+import DirEntry from '@/components/FSView/DirEntry.vue';
+import UploadFileDialog from '@/components/UploadDialog/UploadFileDialog.vue';
+import { NModal } from 'naive-ui';
+
+const props = defineProps<{
+	node: GetNodeResponse;
+}>();
+
+const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
+
+const emit = defineEmits<{
+	(e: 'reloadNode'): void;
+	(e: 'gotoRoot'): void;
+}>();
+
+const fileInput = ref<HTMLInputElement>();
+const uploadDialog = ref();
+const uploadDialogShow = ref(false);
+
+const new_folder_name = ref('');
+const files = ref<File[]>([]);
+const nodes = ref<GetNodeResponse[]>([]);
+const hasParent = ref(false);
+const parentNode = reactive<GetNodeResponse>({
+	id: 0,
+	statusCode: 200,
+	isFile: false,
+	parent: null,
+	name: '..'
+});
+
+watch(
+	() => props.node,
+	async (to) => {
+		parentNode.id = to.parent ?? 0;
+		hasParent.value = to.parent != null;
+		nodes.value = [];
+		const token = await check_token(jwt);
+		if (!token) return;
+		await Promise.all(
+			to.children?.map(async (child) => {
+				nodes.value.push(
+					(await get_node(token, child)) as GetNodeResponse
+				);
+			}) ?? []
+		);
+	},
+	{ immediate: true }
+);
+
+async function newFolder() {
+	const token = await check_token(jwt);
+	if (!token) return;
+	await create_folder(token, props.node.id, new_folder_name.value);
+	emit('reloadNode');
+}
+
+async function uploadFiles() {
+	files.value = Array.from(fileInput.value?.files ?? []);
+	if (files.value.length == 0) return;
+	uploadDialogShow.value = true;
+}
+async function uploadFilesDialogOpen() {
+	await uploadDialog.value?.startUpload(props.node.id);
+	uploadDialogShow.value = false;
+	if (fileInput.value) fileInput.value.value = '';
+	emit('reloadNode');
+}
+</script>
+
+<template>
+	<div>
+		<input
+			type="text"
+			placeholder="Folder name"
+			v-model="new_folder_name"
+		/>
+		<a href="#" @click="newFolder()">create folder</a>
+	</div>
+	<div>
+		<input type="file" ref="fileInput" multiple />
+		<a href="#" @click="uploadFiles()">upload files</a>
+	</div>
+	<table>
+		<tr v-if="hasParent">
+			<DirEntry :node="parentNode" @reloadNode="emit('reloadNode')" />
+		</tr>
+		<tr v-for="n in nodes" :key="n.id">
+			<DirEntry :node="n" @reloadNode="emit('reloadNode')" />
+		</tr>
+	</table>
+	<n-modal
+		v-model:show="uploadDialogShow"
+		:close-on-esc="false"
+		:mask-closable="false"
+		:on-after-enter="uploadFilesDialogOpen"
+	>
+		<UploadFileDialog ref="uploadDialog" :files="files" />
+	</n-modal>
+</template>
+
+<style scoped></style>
--- a/frontend/src/components/FSView/FileViewer.vue
+++ b/frontend/src/components/FSView/FileViewer.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { defineProps, inject } from 'vue';
+import {
+	check_token,
+	delete_node,
+	download_file,
+	GetNodeResponse,
+	TokenInjectType
+} from '@/api';
+
+const props = defineProps<{
+	node: GetNodeResponse;
+}>();
+
+const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
+
+async function del() {
+	const token = await check_token(jwt);
+	if (!token) return;
+	await delete_node(token, props.node.id);
+}
+
+async function download() {
+	const token = await check_token(jwt);
+	if (!token) return;
+	download_file(token, props.node.id);
+}
+</script>
+
+<template>
+	<div>
+		<router-link :to="'/fs/' + props.node.parent ?? 0">..</router-link>
+	</div>
+	<div>
+		<a href="#" @click="download()" v-if="props.node.isFile">Download</a>
+	</div>
+	<div>
+		<router-link :to="'/fs/' + props.node.parent ?? 0" @click="del()">
+			delete
+		</router-link>
+	</div>
+</template>
+
+<style scoped></style>
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@@ -0,0 +1,156 @@
+<template>
+	<div class="hello">
+		<h1>{{ msg }}</h1>
+		<p>
+			For a guide and recipes on how to configure / customize this
+			project,<br />
+			check out the
+			<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+				>vue-cli documentation</a
+			>.
+		</p>
+		<h3>Installed CLI Plugins</h3>
+		<ul>
+			<li>
+				<a
+					href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+					target="_blank"
+					rel="noopener"
+					>babel</a
+				>
+			</li>
+			<li>
+				<a
+					href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+					target="_blank"
+					rel="noopener"
+					>router</a
+				>
+			</li>
+			<li>
+				<a
+					href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+					target="_blank"
+					rel="noopener"
+					>vuex</a
+				>
+			</li>
+			<li>
+				<a
+					href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+					target="_blank"
+					rel="noopener"
+					>eslint</a
+				>
+			</li>
+			<li>
+				<a
+					href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
+					target="_blank"
+					rel="noopener"
+					>typescript</a
+				>
+			</li>
+		</ul>
+		<h3>Essential Links</h3>
+		<ul>
+			<li>
+				<a href="https://vuejs.org" target="_blank" rel="noopener"
+					>Core Docs</a
+				>
+			</li>
+			<li>
+				<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+					>Forum</a
+				>
+			</li>
+			<li>
+				<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+					>Community Chat</a
+				>
+			</li>
+			<li>
+				<a
+					href="https://twitter.com/vuejs"
+					target="_blank"
+					rel="noopener"
+					>Twitter</a
+				>
+			</li>
+			<li>
+				<a href="https://news.vuejs.org" target="_blank" rel="noopener"
+					>News</a
+				>
+			</li>
+		</ul>
+		<h3>Ecosystem</h3>
+		<ul>
+			<li>
+				<a
+					href="https://router.vuejs.org"
+					target="_blank"
+					rel="noopener"
+					>vue-router</a
+				>
+			</li>
+			<li>
+				<a href="https://vuex.vuejs.org" target="_blank" rel="noopener"
+					>vuex</a
+				>
+			</li>
+			<li>
+				<a
+					href="https://github.com/vuejs/vue-devtools#vue-devtools"
+					target="_blank"
+					rel="noopener"
+					>vue-devtools</a
+				>
+			</li>
+			<li>
+				<a
+					href="https://vue-loader.vuejs.org"
+					target="_blank"
+					rel="noopener"
+					>vue-loader</a
+				>
+			</li>
+			<li>
+				<a
+					href="https://github.com/vuejs/awesome-vue"
+					target="_blank"
+					rel="noopener"
+					>awesome-vue</a
+				>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'HelloWorld',
+	props: {
+		msg: String
+	}
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+	margin: 40px 0 0;
+}
+ul {
+	list-style-type: none;
+	padding: 0;
+}
+li {
+	display: inline-block;
+	margin: 0 10px;
+}
+a {
+	color: #42b983;
+}
+</style>
--- a/frontend/src/components/UploadDialog/UploadEntry.vue
+++ b/frontend/src/components/UploadDialog/UploadEntry.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { defineProps, defineExpose, ref } from 'vue';
+import { isErrorResponse, upload_file } from '@/api';
+import { NProgress } from 'naive-ui';
+import filesize from 'filesize';
+
+const props = defineProps<{
+	file: File;
+}>();
+
+const progress = ref(0);
+const percentage = ref(0);
+const err = ref('');
+const status = ref('info');
+
+async function startUpload(parent: number, token: string) {
+	const resp = await upload_file(token, parent, props.file, (e) => {
+		progress.value = e.loaded;
+		percentage.value = (e.loaded / e.total) * 100;
+	});
+	percentage.value = 100;
+	if (isErrorResponse(resp)) {
+		err.value = resp.message ?? 'Error';
+		status.value = 'error';
+	} else status.value = 'success';
+}
+
+defineExpose({
+	startUpload
+});
+</script>
+
+<template>
+	<div v-if="percentage < 100">
+		{{ file.name }} - {{ filesize(progress) }} / {{ filesize(file.size) }} -
+		{{ Math.floor(percentage * 1000) / 1000 }}%
+	</div>
+	<div v-else-if="err !== ''">{{ file.name }} - Error: {{ err }}</div>
+	<div v-else>{{ file.name }} - Completed</div>
+	<n-progress
+		type="line"
+		:percentage="percentage"
+		:height="20"
+		:status="status"
+		border-radius="10px 0"
+		fill-border-radius="10px 0"
+		:show-indicator="false"
+	/>
+</template>
+
+<style scoped></style>
--- a/frontend/src/components/UploadDialog/UploadFileDialog.vue
+++ b/frontend/src/components/UploadDialog/UploadFileDialog.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { defineProps, defineExpose, ref, inject } from 'vue';
+import { check_token, TokenInjectType } from '@/api';
+import UploadEntry from '@/components/UploadDialog/UploadEntry.vue';
+import { NCard } from 'naive-ui';
+
+const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
+
+const entries = ref<typeof UploadEntry[]>([]);
+const done = ref(false);
+let canCloseResolve = null;
+const canClose = new Promise((r) => (canCloseResolve = r));
+
+async function startUpload(parent: number) {
+	const token = await check_token(jwt);
+	if (!token) return;
+	await Promise.all(
+		entries.value.map((entry) => entry.startUpload(parent, token))
+	);
+	done.value = true;
+	await canClose;
+}
+
+defineExpose({
+	startUpload
+});
+defineProps<{
+	files: File[];
+}>();
+</script>
+
+<template>
+	<n-card title="Upload Files">
+		<div>
+			<UploadEntry
+				v-for="f in files"
+				:key="f.name"
+				ref="entries"
+				:file="f"
+			/>
+		</div>
+		<div>
+			<button v-if="done" @click="canCloseResolve()">Close</button>
+		</div>
+	</n-card>
+</template>
+
+<style scoped></style>
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -0,0 +1,8 @@
+import { createApp } from 'vue';
+import router from './router';
+import AppAsyncWrapper from './AppAsyncWrapper.vue';
+
+const app = createApp(AppAsyncWrapper);
+app.use(router);
+app.config.unwrapInjectedRef = true;
+app.mount('#app');
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,34 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import LoginView from '@/views/LoginView.vue';
+import HomeView from '@/views/HomeView.vue';
+import AboutView from '@/views/AboutView.vue';
+import FSView from '@/views/FSView.vue';
+
+const routes: Array<RouteRecordRaw> = [
+	{
+		path: '/',
+		component: HomeView
+	},
+	{
+		path: '/about',
+		name: 'about',
+		component: AboutView
+	},
+	{
+		path: '/login',
+		name: 'login',
+		component: LoginView
+	},
+	{
+		path: '/fs/:node_id',
+		name: 'fs',
+		component: FSView
+	}
+];
+
+const router = createRouter({
+	history: createWebHistory(process.env.BASE_URL),
+	routes
+});
+
+export default router;
--- a/frontend/src/shims-vue.d.ts
+++ b/frontend/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/frontend/src/views/AboutView.vue
+++ b/frontend/src/views/AboutView.vue
@@ -0,0 +1,5 @@
+<template>
+	<div class="about">
+		<h1>This is an about page</h1>
+	</div>
+</template>
--- a/frontend/src/views/FSView.vue
+++ b/frontend/src/views/FSView.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
+import { inject, onBeforeMount, ref } from 'vue';
+import {
+	check_token,
+	get_node,
+	get_path,
+	get_root,
+	GetNodeResponse,
+	isErrorResponse,
+	TokenInjectType
+} from '@/api';
+import DirViewer from '@/components/FSView/DirViewer.vue';
+import FileViewer from '@/components/FSView/FileViewer.vue';
+
+const router = useRouter();
+const route = useRoute();
+const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
+
+const path = ref('');
+const node = ref<GetNodeResponse | null>(null);
+
+async function fetch_node(node_id: number) {
+	const token = await check_token(jwt);
+	if (!token) return;
+	let [p, n] = [
+		await get_path(token, node_id),
+		await get_node(token, node_id)
+	];
+	if (isErrorResponse(p)) return gotoRoot();
+	if (isErrorResponse(n)) return gotoRoot();
+	[path.value, node.value] = [p.path, n];
+}
+
+onBeforeRouteUpdate(async (to) => {
+	await fetch_node(Number(to.params.node_id));
+});
+
+async function reloadNode() {
+	await fetch_node(Number(route.params.node_id));
+}
+onBeforeMount(async () => {
+	await reloadNode();
+});
+
+async function gotoRoot() {
+	const token = await check_token(jwt);
+	if (!token) return;
+	const rootRes = await get_root(token);
+	if (isErrorResponse(rootRes)) return jwt.logout();
+	const root = rootRes.rootId;
+	await router.replace({
+		name: 'fs',
+		params: { node_id: root }
+	});
+}
+</script>
+
+<template>
+	<div v-if="node">
+		<div>Path: {{ path }}</div>
+		<DirViewer
+			v-if="!node.isFile"
+			:node="node"
+			@reloadNode="reloadNode"
+			@gotoRoot="gotoRoot"
+		/>
+		<FileViewer v-else :node="node" />
+	</div>
+</template>
+
+<style scoped></style>
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,28 @@
+<template><p></p></template>
+
+<script setup lang="ts">
+import { onBeforeRouteUpdate, useRouter } from 'vue-router';
+import { inject, onBeforeMount } from 'vue';
+import { check_token, get_root, isErrorResponse, TokenInjectType } from '@/api';
+
+const router = useRouter();
+const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
+
+async function start_redirect() {
+	const token = await check_token(jwt);
+	if (!token) return;
+	const root = await get_root(token);
+	if (isErrorResponse(root)) return jwt.logout();
+	await router.push({
+		name: 'fs',
+		params: { node_id: root.rootId }
+	});
+}
+
+onBeforeRouteUpdate(async () => {
+	await start_redirect();
+});
+onBeforeMount(async () => {
+	await start_redirect();
+});
+</script>
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref, inject } from 'vue';
+import { auth_login, get_root, isErrorResponse, TokenInjectType } from '@/api';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+let username = ref('');
+let password = ref('');
+const error = ref('');
+
+const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
+
+async function login() {
+	if (username.value === '' || password.value === '') {
+		error.value = 'Username and/or Password missing';
+		return;
+	}
+	const res = await auth_login(username.value, password.value);
+	if (isErrorResponse(res)) error.value = 'Login failed: ' + res.message;
+	else {
+		const root = await get_root(res.jwt);
+		if (isErrorResponse(root)) {
+			error.value = 'Get root failed: ' + root.message;
+			return;
+		}
+		jwt.setToken(res.jwt);
+		await router.push({
+			name: 'fs',
+			params: { node_id: root.rootId }
+		});
+	}
+}
+</script>
+
+<template>
+	<div v-if="error !== ''" v-text="error"></div>
+	<input type="email" placeholder="Email" v-model="username" />
+	<input type="password" placeholder="Password" v-model="password" />
+	<button @click="login()">Login</button>
+</template>
+
+<style scoped></style>
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -0,0 +1,12 @@
+const { defineConfig } = require('@vue/cli-service');
+module.exports = defineConfig({
+	transpileDependencies: true,
+	configureWebpack: {
+		resolve: {
+			fallback: {
+				crypto: false,
+				stream: require.resolve('stream-browserify')
+			}
+		}
+	}
+});