Initial commit

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>

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>

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;
+};

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>

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>

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>

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>

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>

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>

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');

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;

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
+}

frontend/src/views/AboutView.vue

@@ -0,0 +1,5 @@
+<template>
+	<div class="about">
+		<h1>This is an about page</h1>
+	</div>
+</template>

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>

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>

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>