Initial commit

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>