root/fileserver
1
0
Fork 0
Code Issues 16 Actions Wiki Activity

Rewrote backend in c++

Browse Source
This commit is contained in:
Mutzi
2022-08-28 17:37:09 +02:00
parent d199ecae87
commit 2e8877837a
98 changed files with 14078 additions and 1433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/babel.config.js
View File

@@ -1,3 +1,3 @@
module.exports = {
presets: ['@vue/cli-plugin-babel/preset']
presets: ["@vue/cli-plugin-babel/preset"],
};

4
frontend/package.json
View File

@@ -9,6 +9,8 @@
},
"dependencies": {
"axios": "^0.27.2",
"class-transformer": "^0.5.1",
"class-validator": "^0.13.2",
"core-js": "^3.8.3",
"filesize": "^9.0.11",
"jwt-decode": "^3.1.2",
@@ -27,8 +29,6 @@
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"class-transformer": "^0.5.1",
"class-validator": "^0.13.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",

72
frontend/src/App.vue
View File

@@ -1,62 +1,62 @@
<script setup async lang="ts">
import { provide, ref } from 'vue';
import { useRouter } from 'vue-router';
import { TokenInjectType } from '@/api';
import { provide, ref } from "vue";
import { useRouter } from "vue-router";
import { TokenInjectType } from "@/api";
const router = useRouter();
const jwt = ref<string | null>(localStorage.getItem('token'));
const jwt = ref<string | null>(localStorage.getItem("token"));
function setToken(token: string) {
jwt.value = token;
localStorage.setItem('token', token);
jwt.value = token;
localStorage.setItem("token", token);
}
function logout() {
jwt.value = null;
localStorage.removeItem('token');
router.push({ name: 'login' });
jwt.value = null;
localStorage.removeItem("token");
router.push({ name: "login" });
}
provide<TokenInjectType>('jwt', {
jwt,
setToken,
logout
provide<TokenInjectType>("jwt", {
jwt,
setToken,
logout,
});
</script>
<template>
<nav>
<template v-if="jwt != null">
<router-link to="/">Files</router-link>
<span style="margin-left: 2em" />
<router-link to="/profile">Profile</router-link>
<span style="margin-left: 2em" />
<router-link to="/login" @click="logout()">Logout</router-link>
</template>
</nav>
<router-view />
<nav>
<template v-if="jwt != null">
<router-link to="/">Files</router-link>
<span style="margin-left: 2em" />
<router-link to="/profile">Profile</router-link>
<span style="margin-left: 2em" />
<router-link to="/login" @click="logout()">Logout</router-link>
</template>
</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;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>

14
frontend/src/AppAsyncWrapper.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import App from './App';
import App from "./App";
</script>
<template>
<Suspense>
<App></App>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
<Suspense>
<App></App>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>

80
frontend/src/api/admin.ts
View File

@@ -1,54 +1,54 @@
import { Requests, Responses, UserRole, get_token, post_token } from './base';
import { Requests, Responses, UserRole, get_token, post_token } from "./base";
export const get_users = (token: string): Promise<Responses.Admin.GetUsers> =>
get_token('/api/admin/users', token);
get_token("/api/admin/users", token);
export const set_role = (
user: number,
role: UserRole,
token: string
user: number,
role: UserRole,
token: string
): Promise<Responses.Admin.SetUserRole | Responses.ErrorResponse> =>
post_token<Requests.Admin.SetUserRole>(
'/api/admin/set_role',
{
user,
role
},
token
);
post_token<Requests.Admin.SetUserRole>(
"/api/admin/set_role",
{
user,
role,
},
token
);
export const logout = (
user: number,
token: string
user: number,
token: string
): Promise<Responses.Admin.LogoutAllUser | Responses.ErrorResponse> =>
post_token<Requests.Admin.LogoutAll>(
'/api/admin/logout',
{
user
},
token
);
post_token<Requests.Admin.LogoutAll>(
"/api/admin/logout",
{
user,
},
token
);
export const delete_user = (
user: number,
token: string
user: number,
token: string
): Promise<Responses.Admin.DeleteUser | Responses.ErrorResponse> =>
post_token<Requests.Admin.DeleteUser>(
'/api/admin/delete',
{
user
},
token
);
post_token<Requests.Admin.DeleteUser>(
"/api/admin/delete",
{
user,
},
token
);
export const disable_tfa = (
user: number,
token: string
user: number,
token: string
): Promise<Responses.Admin.DisableTfa | Responses.ErrorResponse> =>
post_token<Requests.Admin.DisableTfa>(
'/api/admin/disable_2fa',
{
user
},
token
);
post_token<Requests.Admin.DisableTfa>(
"/api/admin/disable_2fa",
{
user,
},
token
);

124
frontend/src/api/auth.ts
View File

@@ -1,93 +1,93 @@
import { Responses, Requests, post, post_token } from './base';
import { Responses, Requests, post, post_token } from "./base";
export const auth_login = (
username: string,
password: string,
otp?: string
username: string,
password: string,
otp?: string
): Promise<
| Responses.Auth.LoginResponse
| Responses.Auth.TfaRequiredResponse
| Responses.ErrorResponse
| Responses.Auth.LoginResponse
| Responses.Auth.TfaRequiredResponse
| Responses.ErrorResponse
> =>
post<Requests.Auth.LoginRequest>('/api/auth/login', {
username: username,
password: password,
otp: otp
});
post<Requests.Auth.LoginRequest>("/api/auth/login", {
username: username,
password: password,
otp: otp,
});
export const auth_signup = (
username: string,
password: string
username: string,
password: string
): Promise<Responses.Auth.SignupResponse | Responses.ErrorResponse> =>
post<Requests.Auth.SignUpRequest>('/api/auth/signup', {
username: username,
password: password
});
post<Requests.Auth.SignUpRequest>("/api/auth/signup", {
username: username,
password: password,
});
export const refresh_token = (
token: string
token: string
): Promise<Responses.Auth.RefreshResponse | Responses.ErrorResponse> =>
post_token('/api/auth/refresh', {}, token);
post_token("/api/auth/refresh", {}, token);
export const change_password = (
oldPw: string,
newPw: string,
token: string
oldPw: string,
newPw: string,
token: string
): Promise<Responses.Auth.ChangePasswordResponse | Responses.ErrorResponse> =>
post_token<Requests.Auth.ChangePasswordRequest>(
'/api/auth/change_password',
{
oldPassword: oldPw,
newPassword: newPw
},
token
);
post_token<Requests.Auth.ChangePasswordRequest>(
"/api/auth/change_password",
{
oldPassword: oldPw,
newPassword: newPw,
},
token
);
export const logout_all = (
token: string
token: string
): Promise<Responses.Auth.LogoutAllResponse | Responses.ErrorResponse> =>
post_token('/api/auth/logout_all', {}, token);
post_token("/api/auth/logout_all", {}, token);
export function tfa_setup(
mail: false,
token: string
mail: false,
token: string
): Promise<Responses.Auth.RequestTotpTfaResponse | Responses.ErrorResponse>;
export function tfa_setup(
mail: true,
token: string
mail: true,
token: string
): Promise<Responses.Auth.RequestEmailTfaResponse | Responses.ErrorResponse>;
export function tfa_setup(
mail: boolean,
token: string
mail: boolean,
token: string
): Promise<
| Responses.Auth.RequestEmailTfaResponse
| Responses.Auth.RequestTotpTfaResponse
| Responses.ErrorResponse
| Responses.Auth.RequestEmailTfaResponse
| Responses.Auth.RequestTotpTfaResponse
| Responses.ErrorResponse
> {
return post_token<Requests.Auth.TfaSetup>(
'/api/auth/2fa/setup',
{
mail
},
token
);
return post_token<Requests.Auth.TfaSetup>(
"/api/auth/2fa/setup",
{
mail,
},
token
);
}
export const tfa_complete = (
mail: boolean,
code: string,
token: string
mail: boolean,
code: string,
token: string
): Promise<Responses.Auth.TfaCompletedResponse | Responses.ErrorResponse> =>
post_token<Requests.Auth.TfaComplete>(
'/api/auth/2fa/complete',
{
mail,
code
},
token
);
post_token<Requests.Auth.TfaComplete>(
"/api/auth/2fa/complete",
{
mail,
code,
},
token
);
export const tfa_disable = (
token: string
token: string
): Promise<Responses.Auth.RemoveTfaResponse | Responses.ErrorResponse> =>
post_token('/api/auth/2fa/disable', {}, token);
post_token("/api/auth/2fa/disable", {}, token);

90
frontend/src/api/base.ts
View File

@@ -1,62 +1,62 @@
import axios from 'axios';
import { Requests, Responses, UserRole } from '../../../dto';
import axios from "axios";
import { Requests, Responses, UserRole } from "../dto";
export { Requests, Responses, UserRole };
export const post = <T extends Requests.BaseRequest>(url: string, data: T) =>
axios
.post(url, data, {
headers: { 'Content-type': 'application/json' }
})
.then((res) => res.data)
.catch((err) => err.response.data);
axios
.post(url, data, {
headers: { "Content-type": "application/json" },
})
.then((res) => res.data)
.catch((err) => err.response.data);
export const post_token = <T extends Requests.BaseRequest>(
url: string,
data: T,
token: string
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);
axios
.post(url, data, {
headers: {
Authorization: "Bearer " + token,
"Content-type": "application/json",
},
})
.then((res) => res.data)
.catch((err) => err.response.data);
export const post_token_form = (
url: string,
data: FormData,
token: string,
onProgress: (progressEvent: ProgressEvent) => void
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);
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
export const get = (url: string) =>
axios
.get(url)
.then((res) => res.data)
.catch((err) => err.response.data);
axios
.get(url)
.then((res) => res.data)
.catch((err) => err.response.data);
export const get_token = (url: string, token: string) =>
axios
.get(url, {
headers: { Authorization: 'Bearer ' + token }
})
.then((res) => res.data)
.catch((err) => err.response.data);
axios
.get(url, {
headers: { Authorization: "Bearer " + token },
})
.then((res) => res.data)
.catch((err) => err.response.data);
export const isErrorResponse = (
res: Responses.BaseResponse
res: Responses.BaseResponse
): res is Responses.ErrorResponse => res.statusCode != 200;

125
frontend/src/api/fs.ts
View File

@@ -1,95 +1,84 @@
import {
Responses,
Requests,
get_token,
post_token,
post_token_form,
isErrorResponse
} from './base';
Responses,
Requests,
get_token,
post_token,
post_token_form,
isErrorResponse,
} from "./base";
export const get_root = (
token: string
token: string
): Promise<Responses.FS.GetRootResponse | Responses.ErrorResponse> =>
get_token('/api/fs/root', token);
get_token("/api/fs/root", token);
export const get_node = (
token: string,
node: number
token: string,
node: number
): Promise<Responses.FS.GetNodeResponse | Responses.ErrorResponse> =>
get_token(`/api/fs/node/${node}`, token);
get_token(`/api/fs/node/${node}`, token);
export const get_path = (
token: string,
node: number
token: string,
node: number
): Promise<Responses.FS.GetPathResponse | Responses.ErrorResponse> =>
get_token(`/api/fs/path/${node}`, token);
get_token(`/api/fs/path/${node}`, token);
export const create_folder = (
token: string,
parent: number,
name: string
token: string,
parent: number,
name: string
): Promise<Responses.FS.CreateFolderResponse | Responses.ErrorResponse> =>
post_token<Requests.FS.CreateFolderRequest>(
'/api/fs/createFolder',
{
parent: parent,
name: name
},
token
);
post_token<Requests.FS.CreateFolderRequest>(
"/api/fs/createFolder",
{
parent: parent,
name: name,
},
token
);
export const create_file = (
token: string,
parent: number,
name: string
token: string,
parent: number,
name: string
): Promise<Responses.FS.CreateFileResponse | Responses.ErrorResponse> =>
post_token<Requests.FS.CreateFileRequest>(
'/api/fs/createFile',
{
parent: parent,
name: name
},
token
);
post_token<Requests.FS.CreateFileRequest>(
"/api/fs/createFile",
{
parent: parent,
name: name,
},
token
);
export const delete_node = (
token: string,
node: number
token: string,
node: number
): Promise<Responses.FS.DeleteResponse | Responses.ErrorResponse> =>
post_token<Requests.FS.DeleteRequest>(
'/api/fs/delete',
{
node: node
},
token
);
post_token(`/api/fs/delete/${node}`, {}, token);
export const upload_file = async (
token: string,
parent: number,
file: File,
onProgress: (progressEvent: ProgressEvent) => void
token: string,
parent: number,
file: File,
onProgress: (progressEvent: ProgressEvent) => void
): Promise<Responses.FS.UploadFileResponse | Responses.ErrorResponse> => {
const node = await create_file(token, parent, file.name);
if (isErrorResponse(node)) return node;
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
);
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);
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);
}

12
frontend/src/api/index.ts
View File

@@ -1,6 +1,6 @@
export { Requests, Responses, UserRole, isErrorResponse } from './base';
export * as Auth from './auth';
export * as FS from './fs';
export * as User from './user';
export * as Admin from './admin';
export * from './util';
export { Requests, Responses, UserRole, isErrorResponse } from "./base";
export * as Auth from "./auth";
export * as FS from "./fs";
export * as User from "./user";
export * as Admin from "./admin";
export * from "./util";

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

@@ -1,11 +1,11 @@
import { Responses, get_token, post_token } from '@/api/base';
import { Responses, get_token, post_token } from "@/api/base";
export const get_user_info = (
token: string
token: string
): Promise<Responses.User.UserInfoResponse | Responses.ErrorResponse> =>
get_token('/api/user/info', token);
get_token("/api/user/info", token);
export const delete_user = (
token: string
token: string
): Promise<Responses.User.DeleteUserResponse | Responses.ErrorResponse> =>
post_token('/api/user/delete', {}, token);
post_token("/api/user/delete", {}, token);

36
frontend/src/api/util.ts
View File

@@ -1,25 +1,25 @@
import jwtDecode, { JwtPayload } from 'jwt-decode';
import { Ref, UnwrapRef } from 'vue';
import { isErrorResponse } from './base';
import { refresh_token } from './auth';
import jwtDecode, { JwtPayload } from "jwt-decode";
import { Ref, UnwrapRef } from "vue";
import { isErrorResponse } from "./base";
import { refresh_token } from "./auth";
export async function check_token(
token: TokenInjectType
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;
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 type TokenInjectType = {
jwt: Ref<UnwrapRef<string | null>>;
setToken: (token: string) => void;
logout: () => void;
jwt: Ref<UnwrapRef<string | null>>;
setToken: (token: string) => void;
logout: () => void;
};

42
frontend/src/components/FSView/DirEntry.vue
View File

@@ -1,40 +1,40 @@
<script setup lang="ts">
import { defineEmits, defineProps, inject } from 'vue';
import { check_token, FS, Responses, TokenInjectType } from '@/api';
import { defineEmits, defineProps, inject } from "vue";
import { check_token, FS, Responses, TokenInjectType } from "@/api";
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
const props = defineProps<{
node: Responses.FS.GetNodeResponse;
node: Responses.FS.GetNodeResponse;
}>();
const emit = defineEmits<{
(e: 'reloadNode'): void;
(e: "reloadNode"): void;
}>();
async function del() {
const token = await check_token(jwt);
if (!token) return;
await FS.delete_node(token, props.node.id);
emit('reloadNode');
const token = await check_token(jwt);
if (!token) return;
await FS.delete_node(token, props.node.id);
emit("reloadNode");
}
async function download() {
const token = await check_token(jwt);
if (!token) return;
FS.download_file(token, props.node.id);
const token = await check_token(jwt);
if (!token) return;
FS.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>
<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>

139
frontend/src/components/FSView/DirViewer.vue
View File

@@ -1,108 +1,101 @@
<script setup lang="ts">
import { defineEmits, defineProps, inject, reactive, ref, watch } from 'vue';
import { FS, Responses, check_token, TokenInjectType } from '@/api';
import DirEntry from '@/components/FSView/DirEntry.vue';
import UploadFileDialog from '@/components/UploadDialog/UploadFileDialog.vue';
import { NModal } from 'naive-ui';
import { defineEmits, defineProps, inject, reactive, ref, watch } from "vue";
import { FS, Responses, 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: Responses.FS.GetNodeResponse;
node: Responses.FS.GetNodeResponse;
}>();
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
const emit = defineEmits<{
(e: 'reloadNode'): void;
(e: 'gotoRoot'): void;
(e: "reloadNode"): void;
(e: "gotoRoot"): void;
}>();
const fileInput = ref<HTMLInputElement>();
const uploadDialog = ref();
const uploadDialogShow = ref(false);
const new_folder_name = ref('');
const new_folder_name = ref("");
const files = ref<File[]>([]);
const nodes = ref<Responses.FS.GetNodeResponse[]>([]);
const hasParent = ref(false);
const parentNode = reactive<Responses.FS.GetNodeResponse>({
id: 0,
statusCode: 200,
isFile: false,
parent: null,
name: '..'
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 FS.get_node(
token,
child
)) as Responses.FS.GetNodeResponse
);
}) ?? []
);
},
{ immediate: true }
() => 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 FS.get_node(token, child)) as Responses.FS.GetNodeResponse
);
}) ?? []
);
},
{ immediate: true }
);
async function newFolder() {
const token = await check_token(jwt);
if (!token) return;
await FS.create_folder(token, props.node.id, new_folder_name.value);
emit('reloadNode');
const token = await check_token(jwt);
if (!token) return;
await FS.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;
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');
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>
<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>

42
frontend/src/components/FSView/FileViewer.vue
View File

@@ -1,38 +1,38 @@
<script setup lang="ts">
import { defineProps, inject } from 'vue';
import { check_token, FS, Responses, TokenInjectType } from '@/api';
import { defineProps, inject } from "vue";
import { check_token, FS, Responses, TokenInjectType } from "@/api";
const props = defineProps<{
node: Responses.FS.GetNodeResponse;
node: Responses.FS.GetNodeResponse;
}>();
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
async function del() {
const token = await check_token(jwt);
if (!token) return;
await FS.delete_node(token, props.node.id);
const token = await check_token(jwt);
if (!token) return;
await FS.delete_node(token, props.node.id);
}
async function download() {
const token = await check_token(jwt);
if (!token) return;
FS.download_file(token, props.node.id);
const token = await check_token(jwt);
if (!token) return;
FS.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>
<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>

256
frontend/src/components/HelloWorld.vue
View File

@@ -1,156 +1,140 @@
<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>
<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';
import { defineComponent } from "vue";
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String
}
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;
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
color: #42b983;
}
</style>

64
frontend/src/components/UploadDialog/UploadEntry.vue
View File

@@ -1,51 +1,51 @@
<script setup lang="ts">
import { defineProps, defineExpose, ref } from 'vue';
import { isErrorResponse, FS } from '@/api';
import { NProgress } from 'naive-ui';
import filesize from 'filesize';
import { defineProps, defineExpose, ref } from "vue";
import { isErrorResponse, FS } from "@/api";
import { NProgress } from "naive-ui";
import filesize from "filesize";
const props = defineProps<{
file: File;
file: File;
}>();
const progress = ref(0);
const percentage = ref(0);
const err = ref('');
const status = ref('info');
const err = ref("");
const status = ref("info");
async function startUpload(parent: number, token: string) {
const resp = await FS.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';
const resp = await FS.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
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"
/>
<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>

49
frontend/src/components/UploadDialog/UploadFileDialog.vue
View File

@@ -1,10 +1,10 @@
<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';
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 jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
const entries = ref<typeof UploadEntry[]>([]);
const done = ref(false);
@@ -12,37 +12,32 @@ 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;
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
startUpload,
});
defineProps<{
files: File[];
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>
<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>

8
frontend/src/dto/index.ts Normal file
View File

@@ -0,0 +1,8 @@
export * as Requests from "./requests";
export * as Responses from "./responses";
export {
UserRole,
validateSync,
validateAsync,
validateAsyncInline,
} from "./utils";

17
frontend/src/dto/requests/admin.ts Normal file
View File

@@ -0,0 +1,17 @@
import { BaseRequest } from "./base";
import { IsEnum, IsNumber } from "class-validator";
import { UserRole } from "../utils";
export class AdminRequest extends BaseRequest {
@IsNumber()
user: number;
}
export class SetUserRole extends AdminRequest {
@IsEnum(UserRole)
role: UserRole;
}
export class LogoutAll extends AdminRequest {}
export class DeleteUser extends AdminRequest {}
export class DisableTfa extends AdminRequest {}

50
frontend/src/dto/requests/auth.ts Normal file
View File

@@ -0,0 +1,50 @@
import { BaseRequest } from "./base";
import {
IsBoolean,
IsEmail,
IsNotEmpty,
IsOptional,
IsString,
} from "class-validator";
export class SignUpRequest extends BaseRequest {
@IsEmail()
username: string;
@IsNotEmpty()
@IsString()
password: string;
}
export class LoginRequest extends SignUpRequest {
@IsOptional()
@IsNotEmpty()
@IsString()
otp?: string;
}
export class TfaSetup extends BaseRequest {
@IsNotEmpty()
@IsBoolean()
mail: boolean;
}
export class TfaComplete extends BaseRequest {
@IsNotEmpty()
@IsBoolean()
mail: boolean;
@IsNotEmpty()
@IsString()
code: string;
}
export class ChangePasswordRequest extends BaseRequest {
@IsNotEmpty()
@IsString()
oldPassword: string;
@IsNotEmpty()
@IsString()
newPassword: string;
}

1
frontend/src/dto/requests/base.ts Normal file
View File

@@ -0,0 +1 @@
export class BaseRequest {}

14
frontend/src/dto/requests/fs.ts Normal file
View File

@@ -0,0 +1,14 @@
import { BaseRequest } from "./base";
import { IsInt, IsNotEmpty, IsString, Min } from "class-validator";
export class CreateFolderRequest extends BaseRequest {
@IsInt()
@Min(1)
parent: number;
@IsNotEmpty()
@IsString()
name: string;
}
export class CreateFileRequest extends CreateFolderRequest {}

4
frontend/src/dto/requests/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export * from "./base";
export * as Auth from "./auth";
export * as FS from "./fs";
export * as Admin from "./admin";

61
frontend/src/dto/responses/admin.ts Normal file
View File

@@ -0,0 +1,61 @@
import { SuccessResponse } from "./base";
import {
IsArray,
IsBoolean,
IsEnum,
IsNotEmpty,
IsNumber,
IsString,
ValidateNested,
} from "class-validator";
import { UserRole, ValidateConstructor } from "../utils";
@ValidateConstructor
export class GetUsersEntry {
constructor(
id: number,
gitlab: boolean,
name: string,
role: UserRole,
tfaEnabled: boolean
) {
this.id = id;
this.gitlab = gitlab;
this.name = name;
this.role = role;
this.tfaEnabled = tfaEnabled;
}
@IsNumber()
id: number;
@IsBoolean()
gitlab: boolean;
@IsString()
@IsNotEmpty()
name: string;
@IsEnum(UserRole)
role: UserRole;
@IsBoolean()
tfaEnabled: boolean;
}
@ValidateConstructor
export class GetUsers extends SuccessResponse {
constructor(users: GetUsersEntry[]) {
super();
this.users = users;
}
@IsArray()
@ValidateNested({ each: true })
users: GetUsersEntry[];
}
export class LogoutAllUser extends SuccessResponse {}
export class DeleteUser extends SuccessResponse {}
export class SetUserRole extends SuccessResponse {}
export class DisableTfa extends SuccessResponse {}

40
frontend/src/dto/responses/auth.ts Normal file
View File

@@ -0,0 +1,40 @@
import { SuccessResponse } from "./base";
import { IsBase32, IsJWT, IsNotEmpty } from "class-validator";
import { ValidateConstructor } from "../utils";
@ValidateConstructor
export class LoginResponse extends SuccessResponse {
constructor(jwt: string) {
super();
this.jwt = jwt;
}
@IsNotEmpty()
@IsJWT()
jwt: string;
}
@ValidateConstructor
export class RequestTotpTfaResponse extends SuccessResponse {
constructor(qrCode: string, secret: string) {
super();
this.qrCode = qrCode;
this.secret = secret;
}
@IsNotEmpty()
qrCode: string;
@IsNotEmpty()
@IsBase32()
secret: string;
}
export class TfaRequiredResponse extends SuccessResponse {}
export class RemoveTfaResponse extends SuccessResponse {}
export class RequestEmailTfaResponse extends SuccessResponse {}
export class TfaCompletedResponse extends SuccessResponse {}
export class SignupResponse extends SuccessResponse {}
export class ChangePasswordResponse extends SuccessResponse {}
export class LogoutAllResponse extends SuccessResponse {}
export class RefreshResponse extends LoginResponse {}

25
frontend/src/dto/responses/base.ts Normal file
View File

@@ -0,0 +1,25 @@
import { IsNumber, Max, Min } from "class-validator";
export class BaseResponse {
constructor(statusCode: number) {
this.statusCode = statusCode;
}
@IsNumber()
@Min(100)
@Max(599)
statusCode: number;
}
export class SuccessResponse extends BaseResponse {
constructor() {
super(200);
}
declare statusCode: 200;
}
export class ErrorResponse extends BaseResponse {
declare statusCode: 400 | 401 | 403;
message?: string;
}

89
frontend/src/dto/responses/fs.ts Normal file
View File

@@ -0,0 +1,89 @@
import { SuccessResponse } from "./base";
import {
IsBoolean,
IsInt,
IsNotEmpty,
IsOptional,
IsString,
Min,
} from "class-validator";
import { ValidateConstructor } from "../utils";
@ValidateConstructor
export class GetRootResponse extends SuccessResponse {
constructor(rootId: number) {
super();
this.rootId = rootId;
}
@IsInt()
@Min(1)
rootId: number;
}
export class GetNodeResponse extends SuccessResponse {
constructor(
id: number,
name: string,
isFile: boolean,
parent: number | null
) {
super();
this.id = id;
this.name = name;
this.isFile = isFile;
this.parent = parent;
}
@IsInt()
@Min(1)
id: number;
@IsString()
name: string;
@IsBoolean()
isFile: boolean;
@IsOptional()
@IsInt()
@Min(1)
parent: number | null;
@IsOptional()
@IsInt({ each: true })
@Min(1, { each: true })
children?: number[];
@IsOptional()
@IsInt()
@Min(0)
size?: number;
}
@ValidateConstructor
export class GetPathResponse extends SuccessResponse {
constructor(path: string) {
super();
this.path = path;
}
@IsNotEmpty()
@IsString()
path: string;
}
@ValidateConstructor
export class CreateFolderResponse extends SuccessResponse {
constructor(id: number) {
super();
this.id = id;
}
@IsInt()
@Min(1)
id: number;
}
export class UploadFileResponse extends SuccessResponse {}
export class DeleteResponse extends SuccessResponse {}
export class CreateFileResponse extends CreateFolderResponse {}

5
frontend/src/dto/responses/index.ts Normal file
View File

@@ -0,0 +1,5 @@
export * from "./base";
export * as Auth from "./auth";
export * as FS from "./fs";
export * as User from "./user";
export * as Admin from "./admin";

27
frontend/src/dto/responses/user.ts Normal file
View File

@@ -0,0 +1,27 @@
import { SuccessResponse } from "./base";
import { ValidateConstructor } from "../utils";
import { IsBoolean, IsNotEmpty, IsString } from "class-validator";
@ValidateConstructor
export class UserInfoResponse extends SuccessResponse {
constructor(name: string, gitlab: boolean, tfaEnabled: boolean) {
super();
this.name = name;
this.gitlab = gitlab;
this.tfaEnabled = tfaEnabled;
}
@IsNotEmpty()
@IsString()
name: string;
@IsBoolean()
gitlab: boolean;
@IsBoolean()
tfaEnabled: boolean;
}
export class DeleteUserResponse extends SuccessResponse {}
export class ChangePasswordResponse extends SuccessResponse {}
export class LogoutAllResponse extends SuccessResponse {}

41
frontend/src/dto/utils.ts Normal file
View File

@@ -0,0 +1,41 @@
import { validate, validateSync as _validateSync } from "class-validator";
export enum UserRole {
ADMIN = 2,
USER = 1,
DISABLED = 0,
}
export function validateSync<T extends object>(data: T): void {
const errors = _validateSync(data);
if (errors.length > 0) {
console.error("Validation failed, errors: ", errors);
throw new Error("Validation failed");
}
}
export async function validateAsync<T extends object>(data: T): Promise<void> {
const errors = await validate(data);
if (errors.length > 0) {
console.error("Validation failed, errors: ", errors);
throw new Error("Validation failed");
}
}
export async function validateAsyncInline<T extends object>(
data: T
): Promise<T> {
await validateAsync(data);
return data;
}
export function ValidateConstructor<T extends { new (...args: any[]): any }>(
constr: T
) {
return class extends constr {
constructor(...args: any[]) {
super(...args);
validateSync(this);
}
};
}

8
frontend/src/main.ts
View File

@@ -1,8 +1,8 @@
import { createApp } from 'vue';
import router from './router';
import AppAsyncWrapper from './AppAsyncWrapper.vue';
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');
app.mount("#app");

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

@@ -1,63 +1,63 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import LoginView from '@/views/LoginView.vue';
import SignupView from '@/views/SignupView.vue';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';
import FSView from '@/views/FSView.vue';
import SetTokenView from '@/views/SetTokenView.vue';
import ProfileView from '@/views/ProfileView.vue';
import TFAView from '@/views/TFAView.vue';
import AdminView from '@/views/AdminView.vue';
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import LoginView from "@/views/LoginView.vue";
import SignupView from "@/views/SignupView.vue";
import HomeView from "@/views/HomeView.vue";
import AboutView from "@/views/AboutView.vue";
import FSView from "@/views/FSView.vue";
import SetTokenView from "@/views/SetTokenView.vue";
import ProfileView from "@/views/ProfileView.vue";
import TFAView from "@/views/TFAView.vue";
import AdminView from "@/views/AdminView.vue";
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/profile',
name: 'profile',
component: ProfileView
},
{
path: '/profile/2fa-enable',
name: '2fa',
component: TFAView
},
{
path: '/admin',
component: AdminView
},
{
path: '/about',
component: AboutView
},
{
path: '/login',
name: 'login',
component: LoginView
},
{
path: '/signup',
name: 'signup',
component: SignupView
},
{
path: '/fs/:node_id',
name: 'fs',
component: FSView
},
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/profile",
name: "profile",
component: ProfileView,
},
{
path: "/profile/2fa-enable",
name: "2fa",
component: TFAView,
},
{
path: "/admin",
component: AdminView,
},
{
path: "/about",
component: AboutView,
},
{
path: "/login",
name: "login",
component: LoginView,
},
{
path: "/signup",
name: "signup",
component: SignupView,
},
{
path: "/fs/:node_id",
name: "fs",
component: FSView,
},
{
path: '/set_token',
component: SetTokenView
}
{
path: "/set_token",
component: SetTokenView,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;

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

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

148
frontend/src/views/AdminView.vue
View File

@@ -1,109 +1,109 @@
<script setup lang="ts">
import { inject, onBeforeMount, ref } from 'vue';
import { inject, onBeforeMount, ref } from "vue";
import {
Responses,
check_token,
TokenInjectType,
Admin,
isErrorResponse
} from '@/api';
import { onBeforeRouteUpdate } from 'vue-router';
import router from '@/router';
Responses,
check_token,
TokenInjectType,
Admin,
isErrorResponse,
} from "@/api";
import { onBeforeRouteUpdate } from "vue-router";
import router from "@/router";
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
const users = ref<Responses.Admin.GetUsersEntry[]>([]);
onBeforeRouteUpdate(async () => {
await updatePanel();
await updatePanel();
});
onBeforeMount(async () => {
await updatePanel();
await updatePanel();
});
async function updatePanel() {
const token = await check_token(jwt);
if (!token) return;
const token = await check_token(jwt);
if (!token) return;
const res = await Admin.get_users(token);
if (isErrorResponse(res)) return router.replace({ path: '/' });
users.value = res.users;
const res = await Admin.get_users(token);
if (isErrorResponse(res)) return router.replace({ path: "/" });
users.value = res.users;
}
async function setRole(user: number, roleStr: string) {
const token = await check_token(jwt);
if (!token) return;
const token = await check_token(jwt);
if (!token) return;
const res = await Admin.set_role(user, parseInt(roleStr, 10), token);
if (isErrorResponse(res)) console.error(res.message);
await updatePanel();
const res = await Admin.set_role(user, parseInt(roleStr, 10), token);
if (isErrorResponse(res)) console.error(res.message);
await updatePanel();
}
async function disableTfa(user: number) {
const token = await check_token(jwt);
if (!token) return;
const token = await check_token(jwt);
if (!token) return;
const res = await Admin.disable_tfa(user, token);
if (isErrorResponse(res)) console.error(res.message);
await updatePanel();
const res = await Admin.disable_tfa(user, token);
if (isErrorResponse(res)) console.error(res.message);
await updatePanel();
}
async function logoutUser(user: number) {
const token = await check_token(jwt);
if (!token) return;
const token = await check_token(jwt);
if (!token) return;
const res = await Admin.logout(user, token);
if (isErrorResponse(res)) console.error(res.message);
await updatePanel();
const res = await Admin.logout(user, token);
if (isErrorResponse(res)) console.error(res.message);
await updatePanel();
}
async function deleteUser(user: number) {
const token = await check_token(jwt);
if (!token) return;
const token = await check_token(jwt);
if (!token) return;
const res = await Admin.delete_user(user, token);
if (isErrorResponse(res)) console.error(res.message);
await updatePanel();
const res = await Admin.delete_user(user, token);
if (isErrorResponse(res)) console.error(res.message);
await updatePanel();
}
</script>
<template>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Role</th>
<th>Tfa Status</th>
<th>Actions</th>
</tr>
<tr v-for="user in users" :key="user.id">
<td>{{ user.name }}</td>
<td>{{ user.gitlab ? 'Gitlab' : 'Password' }}</td>
<td>
<select @change="setRole(user.id, $event.target.value)">
<option value="0" :selected="user.role === 0 ? true : null">
Disabled
</option>
<option value="1" :selected="user.role === 1 ? true : null">
User
</option>
<option value="2" :selected="user.role === 2 ? true : null">
Admin
</option>
</select>
</td>
<td v-if="user.gitlab"></td>
<td v-else>
{{ user.tfaEnabled ? 'Enabled' : 'Disabled' }}
</td>
<td>
<button v-if="user.tfaEnabled" @click="disableTfa(user.id)">
Disable Tfa
</button>
<button @click="logoutUser(user.id)">Logout all</button>
<button @click="deleteUser(user.id)">Delete</button>
</td>
</tr>
</table>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Role</th>
<th>Tfa Status</th>
<th>Actions</th>
</tr>
<tr v-for="user in users" :key="user.id">
<td>{{ user.name }}</td>
<td>{{ user.gitlab ? "Gitlab" : "Password" }}</td>
<td>
<select @change="setRole(user.id, $event.target.value)">
<option value="0" :selected="user.role === 0 ? true : null">
Disabled
</option>
<option value="1" :selected="user.role === 1 ? true : null">
User
</option>
<option value="2" :selected="user.role === 2 ? true : null">
Admin
</option>
</select>
</td>
<td v-if="user.gitlab"></td>
<td v-else>
{{ user.tfaEnabled ? "Enabled" : "Disabled" }}
</td>
<td>
<button v-if="user.tfaEnabled" @click="disableTfa(user.id)">
Disable Tfa
</button>
<button @click="logoutUser(user.id)">Logout all</button>
<button @click="deleteUser(user.id)">Delete</button>
</td>
</tr>
</table>
</template>
<style scoped></style>

86
frontend/src/views/FSView.vue
View File

@@ -1,70 +1,70 @@
<script setup lang="ts">
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import { inject, onBeforeMount, ref } from 'vue';
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { inject, onBeforeMount, ref } from "vue";
import {
check_token,
FS,
Responses,
isErrorResponse,
TokenInjectType
} from '@/api';
import DirViewer from '@/components/FSView/DirViewer.vue';
import FileViewer from '@/components/FSView/FileViewer.vue';
check_token,
FS,
Responses,
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 jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
const path = ref('');
const path = ref("");
const node = ref<Responses.FS.GetNodeResponse | null>(null);
async function fetch_node(node_id: number) {
const token = await check_token(jwt);
if (!token) return;
let [p, n] = [
await FS.get_path(token, node_id),
await FS.get_node(token, node_id)
];
if (isErrorResponse(p)) return gotoRoot();
if (isErrorResponse(n)) return gotoRoot();
[path.value, node.value] = [p.path, n];
const token = await check_token(jwt);
if (!token) return;
let [p, n] = [
await FS.get_path(token, node_id),
await FS.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));
await fetch_node(Number(to.params.node_id));
});
async function reloadNode() {
await fetch_node(Number(route.params.node_id));
await fetch_node(Number(route.params.node_id));
}
onBeforeMount(async () => {
await reloadNode();
await reloadNode();
});
async function gotoRoot() {
const token = await check_token(jwt);
if (!token) return;
const rootRes = await FS.get_root(token);
if (isErrorResponse(rootRes)) return jwt.logout();
const root = rootRes.rootId;
await router.replace({
name: 'fs',
params: { node_id: root }
});
const token = await check_token(jwt);
if (!token) return;
const rootRes = await FS.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>
<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>

28
frontend/src/views/HomeView.vue
View File

@@ -1,28 +1,28 @@
<template><p></p></template>
<script setup lang="ts">
import { onBeforeRouteUpdate, useRouter } from 'vue-router';
import { inject, onBeforeMount } from 'vue';
import { FS, check_token, isErrorResponse, TokenInjectType } from '@/api';
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import { inject, onBeforeMount } from "vue";
import { FS, check_token, isErrorResponse, TokenInjectType } from "@/api";
const router = useRouter();
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
async function start_redirect() {
const token = await check_token(jwt);
if (!token) return;
const root = await FS.get_root(token);
if (isErrorResponse(root)) return jwt.logout();
await router.replace({
name: 'fs',
params: { node_id: root.rootId }
});
const token = await check_token(jwt);
if (!token) return;
const root = await FS.get_root(token);
if (isErrorResponse(root)) return jwt.logout();
await router.replace({
name: "fs",
params: { node_id: root.rootId },
});
}
onBeforeRouteUpdate(async () => {
await start_redirect();
await start_redirect();
});
onBeforeMount(async () => {
await start_redirect();
await start_redirect();
});
</script>

88
frontend/src/views/LoginView.vue
View File

@@ -1,61 +1,61 @@
<script setup lang="ts">
import { ref, inject } from 'vue';
import { Auth, FS, isErrorResponse, TokenInjectType } from '@/api';
import { useRouter } from 'vue-router';
import { ref, inject } from "vue";
import { Auth, FS, isErrorResponse, TokenInjectType } from "@/api";
import { useRouter } from "vue-router";
const router = useRouter();
const username = ref('');
const password = ref('');
const otp = ref('');
const username = ref("");
const password = ref("");
const otp = ref("");
const error = ref('');
const error = ref("");
const requestOtp = ref(false);
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
async function login() {
error.value = '';
if (username.value === '' || password.value === '') {
error.value = 'Email and/or Password missing';
return;
}
const res = await (requestOtp.value
? Auth.auth_login(username.value, password.value, otp.value)
: Auth.auth_login(username.value, password.value));
if (isErrorResponse(res)) error.value = 'Login failed: ' + res.message;
else if ('jwt' in res) {
const root = await FS.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 }
});
} else {
error.value = '';
requestOtp.value = true;
}
error.value = "";
if (username.value === "" || password.value === "") {
error.value = "Email and/or Password missing";
return;
}
const res = await (requestOtp.value
? Auth.auth_login(username.value, password.value, otp.value)
: Auth.auth_login(username.value, password.value));
if (isErrorResponse(res)) error.value = "Login failed: " + res.message;
else if ("jwt" in res) {
const root = await FS.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 },
});
} else {
error.value = "";
requestOtp.value = true;
}
}
</script>
<template>
<div v-if="error !== ''" v-text="error"></div>
<template v-if="!requestOtp">
<input type="email" placeholder="Email" v-model="username" />
<input type="password" placeholder="Password" v-model="password" />
<a href="/api/auth/gitlab">Login with gitlab</a>
<router-link to="signup">Signup instead?</router-link>
</template>
<template v-else>
<div>Please input your 2 factor authentication code</div>
<input type="text" placeholder="Code" v-model="otp" />
</template>
<button @click="login()">Login</button>
<div v-if="error !== ''" v-text="error"></div>
<template v-if="!requestOtp">
<input type="email" placeholder="Email" v-model="username" />
<input type="password" placeholder="Password" v-model="password" />
<a href="/api/auth/gitlab">Login with gitlab</a>
<router-link to="signup">Signup instead?</router-link>
</template>
<template v-else>
<div>Please input your 2 factor authentication code</div>
<input type="text" placeholder="Code" v-model="otp" />
</template>
<button @click="login()">Login</button>
</template>
<style scoped></style>

174
frontend/src/views/ProfileView.vue
View File

@@ -1,124 +1,112 @@
<script setup lang="ts">
import { ref, inject, onBeforeMount } from 'vue';
import { ref, inject, onBeforeMount } from "vue";
import {
Auth,
User,
check_token,
isErrorResponse,
TokenInjectType,
Responses
} from '@/api';
import { onBeforeRouteUpdate } from 'vue-router';
Auth,
User,
check_token,
isErrorResponse,
TokenInjectType,
Responses,
} from "@/api";
import { onBeforeRouteUpdate } from "vue-router";
const error = ref('');
const oldPw = ref('');
const newPw = ref('');
const newPw2 = ref('');
const error = ref("");
const oldPw = ref("");
const newPw = ref("");
const newPw2 = ref("");
const user = ref<Responses.User.UserInfoResponse | null>(null);
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
onBeforeRouteUpdate(async () => {
await updateProfile();
await updateProfile();
});
onBeforeMount(async () => {
await updateProfile();
await updateProfile();
});
async function updateProfile() {
const token = await check_token(jwt);
if (!token) return;
const token = await check_token(jwt);
if (!token) return;
const res = await User.get_user_info(token);
if (isErrorResponse(res)) return jwt.logout();
user.value = res;
const res = await User.get_user_info(token);
if (isErrorResponse(res)) return jwt.logout();
user.value = res;
}
async function deleteUser() {
const token = await check_token(jwt);
if (!token) return;
await User.delete_user(token);
jwt.logout();
const token = await check_token(jwt);
if (!token) return;
await User.delete_user(token);
jwt.logout();
}
async function logoutAll() {
const token = await check_token(jwt);
if (!token) return;
await Auth.logout_all(token);
jwt.logout();
const token = await check_token(jwt);
if (!token) return;
await Auth.logout_all(token);
jwt.logout();
}
async function changePw() {
if (oldPw.value === '' || newPw.value === '' || newPw2.value === '') {
error.value = 'Password missing';
return;
}
if (newPw.value !== newPw2.value) {
error.value = "Passwords don't match";
return;
}
const token = await check_token(jwt);
if (!token) return;
const res = await Auth.change_password(oldPw.value, newPw.value, token);
if (isErrorResponse(res))
error.value = 'Password change failed: ' + res.message;
else jwt.logout();
if (oldPw.value === "" || newPw.value === "" || newPw2.value === "") {
error.value = "Password missing";
return;
}
if (newPw.value !== newPw2.value) {
error.value = "Passwords don't match";
return;
}
const token = await check_token(jwt);
if (!token) return;
const res = await Auth.change_password(oldPw.value, newPw.value, token);
if (isErrorResponse(res))
error.value = "Password change failed: " + res.message;
else jwt.logout();
}
async function tfaDisable() {
const token = await check_token(jwt);
if (!token) return;
await Auth.tfa_disable(token);
jwt.logout();
const token = await check_token(jwt);
if (!token) return;
await Auth.tfa_disable(token);
jwt.logout();
}
</script>
<template>
<template v-if="user">
<div v-if="error !== ''" v-text="error"></div>
<div>User: {{ user.name }}</div>
<div>Signed in with {{ user.gitlab ? 'gitlab' : 'password' }}</div>
<template v-if="!user.gitlab">
<div>
<input
type="password"
placeholder="Old password"
v-model="oldPw"
/>
<input
type="password"
placeholder="New password"
v-model="newPw"
/>
<input
type="password"
placeholder="Repeat new password"
v-model="newPw2"
/>
<button @click="changePw">Change</button>
</div>
<div>
<div>
2 Factor authentication:
{{ user.tfaEnabled ? 'Enabled' : 'Disabled' }}
</div>
<div>
<a href="#" v-if="user.tfaEnabled" @click="tfaDisable">
Disable
</a>
<router-link to="/profile/2fa-enable" v-else>
Enable
</router-link>
</div>
</div>
</template>
<div>
<a href="#" @click="logoutAll">Logout everywhere</a>
<a href="#" @click="deleteUser">Delete Account</a>
</div>
</template>
<template v-else>
<div>Loading...</div>
</template>
<template v-if="user">
<div v-if="error !== ''" v-text="error"></div>
<div>User: {{ user.name }}</div>
<div>Signed in with {{ user.gitlab ? "gitlab" : "password" }}</div>
<template v-if="!user.gitlab">
<div>
<input type="password" placeholder="Old password" v-model="oldPw" />
<input type="password" placeholder="New password" v-model="newPw" />
<input
type="password"
placeholder="Repeat new password"
v-model="newPw2"
/>
<button @click="changePw">Change</button>
</div>
<div>
<div>
2 Factor authentication:
{{ user.tfaEnabled ? "Enabled" : "Disabled" }}
</div>
<div>
<a href="#" v-if="user.tfaEnabled" @click="tfaDisable"> Disable </a>
<router-link to="/profile/2fa-enable" v-else> Enable </router-link>
</div>
</div>
</template>
<div>
<a href="#" @click="logoutAll">Logout everywhere</a>
<a href="#" @click="deleteUser">Delete Account</a>
</div>
</template>
<template v-else>
<div>Loading...</div>
</template>
</template>
<style scoped></style>

14
frontend/src/views/SetTokenView.vue
View File

@@ -1,19 +1,19 @@
<script setup lang="ts">
import { inject } from 'vue';
import { TokenInjectType } from '@/api';
import { useRoute, useRouter } from 'vue-router';
import { inject } from "vue";
import { TokenInjectType } from "@/api";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
if ('token' in route.query) jwt.setToken(route.query['token'] as string);
router.replace({ path: '/' });
if ("token" in route.query) jwt.setToken(route.query["token"] as string);
router.replace({ path: "/" });
</script>
<template>
<router-link to="/">Click here to go home</router-link>
<router-link to="/">Click here to go home</router-link>
</template>
<style scoped></style>

48
frontend/src/views/SignupView.vue
View File

@@ -1,35 +1,35 @@
<script setup lang="ts">
import { ref } from 'vue';
import { Auth, isErrorResponse } from '@/api';
import { ref } from "vue";
import { Auth, isErrorResponse } from "@/api";
const username = ref('');
const password = ref('');
const password2 = ref('');
const error = ref('');
const username = ref("");
const password = ref("");
const password2 = ref("");
const error = ref("");
async function signup() {
if (username.value === '' || password.value === '') {
error.value = 'Email and/or Password missing';
return;
}
if (password.value !== password2.value) {
error.value = "Passwords don't match";
return;
}
const res = await Auth.auth_signup(username.value, password.value);
error.value = isErrorResponse(res)
? 'Signup failed: ' + res.message
: 'Signup successful, please wait till an admin unlocks your account.';
if (username.value === "" || password.value === "") {
error.value = "Email and/or Password missing";
return;
}
if (password.value !== password2.value) {
error.value = "Passwords don't match";
return;
}
const res = await Auth.auth_signup(username.value, password.value);
error.value = isErrorResponse(res)
? "Signup failed: " + res.message
: "Signup successful, please wait till an admin unlocks your account.";
}
</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" />
<input type="password" placeholder="Repeat password" v-model="password2" />
<button @click="signup()">Signup</button>
<router-link to="login">Login instead?</router-link>
<div v-if="error !== ''" v-text="error"></div>
<input type="email" placeholder="Email" v-model="username" />
<input type="password" placeholder="Password" v-model="password" />
<input type="password" placeholder="Repeat password" v-model="password2" />
<button @click="signup()">Signup</button>
<router-link to="login">Login instead?</router-link>
</template>
<style scoped></style>

132
frontend/src/views/TFAView.vue
View File

@@ -1,89 +1,89 @@
<script setup lang="ts">
import { ref, inject } from 'vue';
import { Auth, check_token, isErrorResponse, TokenInjectType } from '@/api';
import { ref, inject } from "vue";
import { Auth, check_token, isErrorResponse, TokenInjectType } from "@/api";
enum state {
SELECT,
MAIL,
TOTP
SELECT,
MAIL,
TOTP,
}
const currentState = ref<state>(state.SELECT);
const error = ref('');
const qrImage = ref('');
const secret = ref('');
const code = ref('');
const error = ref("");
const qrImage = ref("");
const secret = ref("");
const code = ref("");
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
async function selectMail() {
const token = await check_token(jwt);
if (!token) return;
error.value = 'Working...';
const res = await Auth.tfa_setup(true, token);
if (isErrorResponse(res))
error.value = 'Failed to select 2fa type: ' + res.message;
else {
error.value = '';
currentState.value = state.MAIL;
}
const token = await check_token(jwt);
if (!token) return;
error.value = "Working...";
const res = await Auth.tfa_setup(true, token);
if (isErrorResponse(res))
error.value = "Failed to select 2fa type: " + res.message;
else {
error.value = "";
currentState.value = state.MAIL;
}
}
async function selectTotp() {
const token = await check_token(jwt);
if (!token) return;
error.value = 'Working...';
const res = await Auth.tfa_setup(false, token);
if (isErrorResponse(res))
error.value = 'Failed to select 2fa type: ' + res.message;
else {
qrImage.value = res.qrCode;
secret.value = res.secret;
error.value = '';
currentState.value = state.TOTP;
}
const token = await check_token(jwt);
if (!token) return;
error.value = "Working...";
const res = await Auth.tfa_setup(false, token);
if (isErrorResponse(res))
error.value = "Failed to select 2fa type: " + res.message;
else {
qrImage.value = res.qrCode;
secret.value = res.secret;
error.value = "";
currentState.value = state.TOTP;
}
}
async function submit() {
const token = await check_token(jwt);
if (!token) return;
error.value = 'Working...';
const res = await Auth.tfa_complete(
currentState.value === state.MAIL,
code.value,
token
);
if (isErrorResponse(res))
error.value = 'Failed to submit code: ' + res.message;
else jwt.logout();
const token = await check_token(jwt);
if (!token) return;
error.value = "Working...";
const res = await Auth.tfa_complete(
currentState.value === state.MAIL,
code.value,
token
);
if (isErrorResponse(res))
error.value = "Failed to submit code: " + res.message;
else jwt.logout();
}
</script>
<template>
<div v-if="error !== ''" v-text="error"></div>
<template v-if="currentState === state.SELECT">
<div>Select 2 Factor authentication type:</div>
<div>
<button @click="selectMail">Mail</button>
<button @click="selectTotp">Google Authenticator</button>
</div>
</template>
<template v-else-if="currentState === state.MAIL">
<div>Please enter the code you got by mail</div>
<input type="text" placeholder="Code" v-model="code" />
<button @click="submit()">Submit</button>
</template>
<template v-else>
<img :src="qrImage" alt="QrCode" />
<details>
<summary>Show manual input code</summary>
{{ secret }}
</details>
<div>Please enter the current code</div>
<input type="text" placeholder="Code" v-model="code" />
<button @click="submit()">Submit</button>
</template>
<div v-if="error !== ''" v-text="error"></div>
<template v-if="currentState === state.SELECT">
<div>Select 2 Factor authentication type:</div>
<div>
<button @click="selectMail">Mail</button>
<button @click="selectTotp">Google Authenticator</button>
</div>
</template>
<template v-else-if="currentState === state.MAIL">
<div>Please enter the code you got by mail</div>
<input type="text" placeholder="Code" v-model="code" />
<button @click="submit()">Submit</button>
</template>
<template v-else>
<img :src="qrImage" alt="QrCode" />
<details>
<summary>Show manual input code</summary>
{{ secret }}
</details>
<div>Please enter the current code</div>
<input type="text" placeholder="Code" v-model="code" />
<button @click="submit()">Submit</button>
</template>
</template>
<style scoped></style>

20
frontend/vue.config.js
View File

@@ -1,12 +1,12 @@
const { defineConfig } = require('@vue/cli-service');
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
resolve: {
fallback: {
crypto: false,
stream: require.resolve('stream-browserify')
}
}
}
transpileDependencies: true,
configureWebpack: {
resolve: {
fallback: {
crypto: false,
stream: require.resolve("stream-browserify"),
},
},
},
});