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

Fixed frontend

Browse Source
This commit is contained in:
Mutzi 2022-08-31 14:28:35 +02:00
parent df93c5e091
commit c290863e26
56 changed files with 1823 additions and 6370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/.eslintrc.cjs Normal file
View File

@ -0,0 +1,15 @@
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = {
root: true,
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/eslint-config-typescript/recommended",
"@vue/eslint-config-prettier",
],
parserOptions: {
ecmaVersion: "latest",
},
};

27
frontend/.gitignore vendored
View File

@ -1,21 +1,26 @@
.DS_Store # Logs
node_modules logs
/dist *.log
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
pnpm-debug.log* pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files # Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea .idea
.vscode
*.suo *.suo
*.ntvs* *.ntvs*
*.njsproj *.njsproj

7
frontend/.prettierrc
View File

@ -1,7 +0,0 @@
{
"tabWidth": 4,
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"endOfLine": "lf"
}

46
frontend/README.md Normal file
View File

@ -0,0 +1,46 @@
# frontend
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

3
frontend/babel.config.js
View File

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

1
frontend/env.d.ts vendored Normal file
View File

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

29
frontend/eslintrc.js
View File

@ -1,29 +0,0 @@
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
project: 'tsconfig.json',
tsconfigRootDir: __dirname,
sourceType: 'module'
},
plugins: ['@typescript-eslint/eslint-plugin', 'no-relative-import-paths'],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
],
root: true,
env: {
node: true,
jest: true
},
ignorePatterns: ['.eslintrc.js'],
rules: {
'@typescript-eslint/interface-name-prefix': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'no-relative-import-paths/no-relative-import-paths': [
'error',
{ allowSameFolder: true, rootDir: 'src' }
]
}
};

13
frontend/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

69
frontend/package.json
View File

@ -1,64 +1,41 @@
{ {
"name": "frontend", "name": "frontend",
"version": "0.1.0", "version": "0.0.0",
"private": true, "private": true,
"license": "suck my dick",
"scripts": { "scripts": {
"serve": "vue-cli-service build --watch --dest ../run/static", "dev": "vite build --outDir ../run/static --watch",
"build": "vue-cli-service build", "build": "run-p type-check build-only",
"lint": "vue-cli-service lint" "build-only": "vite build",
"type-check": "vue-tsc --noEmit",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
}, },
"dependencies": { "dependencies": {
"axios": "^0.27.2", "axios": "^0.27.2",
"class-transformer": "^0.5.1", "class-transformer": "^0.5.1",
"class-validator": "^0.13.2", "class-validator": "^0.13.2",
"core-js": "^3.8.3",
"filesize": "^9.0.11", "filesize": "^9.0.11",
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",
"naive-ui": "^2.32.1", "naive-ui": "^2.32.1",
"stream-browserify": "^3.0.0", "stream-browserify": "^3.0.0",
"util": "^0.12.4", "util": "^0.12.4",
"vue": "^3.2.13", "vue": "^3.2.37",
"vue-router": "^4.0.3" "vue-router": "^4.1.3"
}, },
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.4.0", "@rushstack/eslint-patch": "^1.1.4",
"@typescript-eslint/parser": "^5.4.0", "@types/node": "^18.7.14",
"@vue/cli-plugin-babel": "~5.0.0", "@vitejs/plugin-vue": "^3.0.1",
"@vue/cli-plugin-eslint": "~5.0.0", "@vue/eslint-config-prettier": "^7.0.0",
"@vue/cli-plugin-router": "~5.0.0", "@vue/eslint-config-typescript": "^11.0.0",
"@vue/cli-plugin-typescript": "~5.0.0", "@vue/tsconfig": "^0.1.3",
"@vue/cli-service": "~5.0.0", "eslint": "8.22.0",
"@vue/eslint-config-typescript": "^9.1.0", "eslint-plugin-vue": "^9.3.0",
"eslint": "^7.32.0", "npm-run-all": "^4.1.5",
"eslint-config-prettier": "^8.3.0", "prettier": "^2.7.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1",
"sass": "^1.32.7", "sass": "^1.32.7",
"sass-loader": "^12.0.0", "typescript": "~4.7.4",
"typescript": "~4.5.5", "vite": "^3.0.4",
"vfonts": "^0.0.3" "vue-tsc": "^0.39.5"
}, }
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
} }

22
frontend/public/index.html
View File

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!--suppress HtmlUnknownTarget -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't
work properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

18
frontend/src/App.vue
View File

@ -1,27 +1,27 @@
<script setup async lang="ts"> <script setup async lang="ts">
import { provide, ref } from 'vue'; import { provide, ref } from "vue";
import { useRouter } from 'vue-router'; import { useRouter } from "vue-router";
import { TokenInjectType } from '@/api'; import type { TokenInjectType } from "@/api";
const router = useRouter(); const router = useRouter();
const jwt = ref<string | null>(localStorage.getItem('token')); const jwt = ref<string | null>(localStorage.getItem("token"));
function setToken(token: string) { function setToken(token: string) {
jwt.value = token; jwt.value = token;
localStorage.setItem('token', token); localStorage.setItem("token", token);
} }
function logout() { function logout() {
jwt.value = null; jwt.value = null;
localStorage.removeItem('token'); localStorage.removeItem("token");
router.push({ name: 'login' }); router.push({ name: "login" });
} }
provide<TokenInjectType>('jwt', { provide<TokenInjectType>("jwt", {
jwt, jwt,
setToken, setToken,
logout logout,
}); });
</script> </script>

2
frontend/src/AppAsyncWrapper.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import App from './App'; import App from "./App.vue";
</script> </script>
<template> <template>

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

@ -1,7 +1,7 @@
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> => 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 = ( export const set_role = (
user: number, user: number,
@ -9,10 +9,10 @@ export const set_role = (
token: string token: string
): Promise<Responses.Admin.SetUserRole | Responses.ErrorResponse> => ): Promise<Responses.Admin.SetUserRole | Responses.ErrorResponse> =>
post_token<Requests.Admin.SetUserRole>( post_token<Requests.Admin.SetUserRole>(
'/api/admin/set_role', "/api/admin/set_role",
{ {
user, user,
role role,
}, },
token token
); );
@ -22,9 +22,9 @@ export const logout = (
token: string token: string
): Promise<Responses.Admin.LogoutAllUser | Responses.ErrorResponse> => ): Promise<Responses.Admin.LogoutAllUser | Responses.ErrorResponse> =>
post_token<Requests.Admin.LogoutAll>( post_token<Requests.Admin.LogoutAll>(
'/api/admin/logout', "/api/admin/logout",
{ {
user user,
}, },
token token
); );
@ -34,9 +34,9 @@ export const delete_user = (
token: string token: string
): Promise<Responses.Admin.DeleteUser | Responses.ErrorResponse> => ): Promise<Responses.Admin.DeleteUser | Responses.ErrorResponse> =>
post_token<Requests.Admin.DeleteUser>( post_token<Requests.Admin.DeleteUser>(
'/api/admin/delete', "/api/admin/delete",
{ {
user user,
}, },
token token
); );
@ -46,9 +46,9 @@ export const disable_tfa = (
token: string token: string
): Promise<Responses.Admin.DisableTfa | Responses.ErrorResponse> => ): Promise<Responses.Admin.DisableTfa | Responses.ErrorResponse> =>
post_token<Requests.Admin.DisableTfa>( post_token<Requests.Admin.DisableTfa>(
'/api/admin/disable_2fa', "/api/admin/disable_2fa",
{ {
user user,
}, },
token token
); );

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

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

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

@ -1,11 +1,11 @@
import axios from 'axios'; import axios from "axios";
import { Requests, Responses, UserRole } from '../dto'; import { Requests, Responses, UserRole } from "../dto";
export { Requests, Responses, UserRole }; export { Requests, Responses, UserRole };
export const post = <T extends Requests.BaseRequest>(url: string, data: T) => export const post = <T extends Requests.BaseRequest>(url: string, data: T) =>
axios axios
.post(url, data, { .post(url, data, {
headers: { 'Content-type': 'application/json' } headers: { "Content-type": "application/json" },
}) })
.then((res) => res.data) .then((res) => res.data)
.catch((err) => err.response.data); .catch((err) => err.response.data);
@ -18,9 +18,9 @@ export const post_token = <T extends Requests.BaseRequest>(
axios axios
.post(url, data, { .post(url, data, {
headers: { headers: {
Authorization: 'Bearer ' + token, Authorization: "Bearer " + token,
'Content-type': 'application/json' "Content-type": "application/json",
} },
}) })
.then((res) => res.data) .then((res) => res.data)
.catch((err) => err.response.data); .catch((err) => err.response.data);
@ -34,10 +34,10 @@ export const post_token_form = (
axios axios
.post(url, data, { .post(url, data, {
headers: { headers: {
Authorization: 'Bearer ' + token, Authorization: "Bearer " + token,
'Content-type': 'multipart/form-data' "Content-type": "multipart/form-data",
}, },
onUploadProgress: onProgress onUploadProgress: onProgress,
}) })
.then((res) => res.data) .then((res) => res.data)
.catch((err) => err.response.data); .catch((err) => err.response.data);
@ -52,7 +52,7 @@ export const get = (url: string) =>
export const get_token = (url: string, token: string) => export const get_token = (url: string, token: string) =>
axios axios
.get(url, { .get(url, {
headers: { Authorization: 'Bearer ' + token } headers: { Authorization: "Bearer " + token },
}) })
.then((res) => res.data) .then((res) => res.data)
.catch((err) => err.response.data); .catch((err) => err.response.data);

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

@ -4,13 +4,13 @@ import {
get_token, get_token,
post_token, post_token,
post_token_form, post_token_form,
isErrorResponse isErrorResponse,
} from './base'; } from "./base";
export const get_root = ( export const get_root = (
token: string token: string
): Promise<Responses.FS.GetRootResponse | Responses.ErrorResponse> => ): Promise<Responses.FS.GetRootResponse | Responses.ErrorResponse> =>
get_token('/api/fs/root', token); get_token("/api/fs/root", token);
export const get_node = ( export const get_node = (
token: string, token: string,
@ -30,10 +30,10 @@ export const create_folder = (
name: string name: string
): Promise<Responses.FS.CreateFolderResponse | Responses.ErrorResponse> => ): Promise<Responses.FS.CreateFolderResponse | Responses.ErrorResponse> =>
post_token<Requests.FS.CreateFolderRequest>( post_token<Requests.FS.CreateFolderRequest>(
'/api/fs/createFolder', "/api/fs/createFolder",
{ {
parent: parent, parent: parent,
name: name name: name,
}, },
token token
); );
@ -44,10 +44,10 @@ export const create_file = (
name: string name: string
): Promise<Responses.FS.CreateFileResponse | Responses.ErrorResponse> => ): Promise<Responses.FS.CreateFileResponse | Responses.ErrorResponse> =>
post_token<Requests.FS.CreateFileRequest>( post_token<Requests.FS.CreateFileRequest>(
'/api/fs/createFile', "/api/fs/createFile",
{ {
parent: parent, parent: parent,
name: name name: name,
}, },
token token
); );
@ -68,20 +68,15 @@ export const upload_file = async (
if (isErrorResponse(node)) return node; if (isErrorResponse(node)) return node;
const form = new FormData(); const form = new FormData();
form.set('file', file); form.set("file", file);
return post_token_form( return post_token_form(`/api/fs/upload/${node.id}`, form, token, onProgress);
`/api/fs/upload/${node.id}`,
form,
token,
onProgress
);
}; };
export function download_file(token: string, id: number) { export function download_file(token: string, id: number) {
const form = document.createElement('form'); const form = document.createElement("form");
form.method = 'post'; form.method = "post";
form.target = '_blank'; form.target = "_blank";
form.action = '/api/fs/download'; form.action = "/api/fs/download";
form.innerHTML = `<input type="hidden" name="jwtToken" value="${token}"><input type="hidden" name="id" value="${id}">`; form.innerHTML = `<input type="hidden" name="jwtToken" value="${token}"><input type="hidden" name="id" value="${id}">`;
document.body.appendChild(form); document.body.appendChild(form);
form.submit(); form.submit();

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

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

6
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 = ( export const get_user_info = (
token: string token: string
): Promise<Responses.User.UserInfoResponse | Responses.ErrorResponse> => ): Promise<Responses.User.UserInfoResponse | Responses.ErrorResponse> =>
get_token('/api/user/info', token); get_token("/api/user/info", token);
export const delete_user = ( export const delete_user = (
token: string token: string
): Promise<Responses.User.DeleteUserResponse | Responses.ErrorResponse> => ): Promise<Responses.User.DeleteUserResponse | Responses.ErrorResponse> =>
post_token('/api/user/delete', {}, token); post_token("/api/user/delete", {}, token);

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

@ -1,7 +1,8 @@
import jwtDecode, { JwtPayload } from 'jwt-decode'; import type { JwtPayload } from "jwt-decode";
import { Ref, UnwrapRef } from 'vue'; import type { Ref, UnwrapRef } from "vue";
import { isErrorResponse } from './base'; import jwtDecode from "jwt-decode";
import { refresh_token } from './auth'; import { isErrorResponse } from "./base";
import { refresh_token } from "./auth";
export async function check_token( export async function check_token(
token: TokenInjectType token: TokenInjectType

BIN
frontend/src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

1
frontend/src/assets/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 308 B

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

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

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

@ -1,26 +1,27 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineEmits, defineProps, inject, reactive, ref, watch } from 'vue'; import type { TokenInjectType } from "@/api";
import { FS, Responses, check_token, TokenInjectType } from '@/api'; import { defineEmits, defineProps, inject, reactive, ref, watch } from "vue";
import DirEntry from '@/components/FSView/DirEntry.vue'; import { FS, Responses, check_token } from "@/api";
import UploadFileDialog from '@/components/UploadDialog/UploadFileDialog.vue'; import DirEntry from "@/components/FSView/DirEntry.vue";
import { NModal } from 'naive-ui'; import UploadFileDialog from "@/components/UploadDialog/UploadFileDialog.vue";
import { NModal } from "naive-ui";
const props = defineProps<{ 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<{ const emit = defineEmits<{
(e: 'reloadNode'): void; (e: "reloadNode"): void;
(e: 'gotoRoot'): void; (e: "gotoRoot"): void;
}>(); }>();
const fileInput = ref<HTMLInputElement>(); const fileInput = ref<HTMLInputElement>();
const uploadDialog = ref(); const uploadDialog = ref();
const uploadDialogShow = ref(false); const uploadDialogShow = ref(false);
const new_folder_name = ref(''); const new_folder_name = ref("");
const files = ref<File[]>([]); const files = ref<File[]>([]);
const nodes = ref<Responses.FS.GetNodeResponse[]>([]); const nodes = ref<Responses.FS.GetNodeResponse[]>([]);
const hasParent = ref(false); const hasParent = ref(false);
@ -29,7 +30,7 @@ const parentNode = reactive<Responses.FS.GetNodeResponse>({
statusCode: 200, statusCode: 200,
isFile: false, isFile: false,
parent: null, parent: null,
name: '..' name: "..",
}); });
watch( watch(
@ -43,10 +44,7 @@ watch(
await Promise.all( await Promise.all(
to.children?.map(async (child) => { to.children?.map(async (child) => {
nodes.value.push( nodes.value.push(
(await FS.get_node( (await FS.get_node(token, child)) as Responses.FS.GetNodeResponse
token,
child
)) as Responses.FS.GetNodeResponse
); );
}) ?? [] }) ?? []
); );
@ -58,7 +56,7 @@ async function newFolder() {
const token = await check_token(jwt); const token = await check_token(jwt);
if (!token) return; if (!token) return;
await FS.create_folder(token, props.node.id, new_folder_name.value); await FS.create_folder(token, props.node.id, new_folder_name.value);
emit('reloadNode'); emit("reloadNode");
} }
async function uploadFiles() { async function uploadFiles() {
@ -69,18 +67,14 @@ async function uploadFiles() {
async function uploadFilesDialogOpen() { async function uploadFilesDialogOpen() {
await uploadDialog.value?.startUpload(props.node.id); await uploadDialog.value?.startUpload(props.node.id);
uploadDialogShow.value = false; uploadDialogShow.value = false;
if (fileInput.value) fileInput.value.value = ''; if (fileInput.value) fileInput.value.value = "";
emit('reloadNode'); emit("reloadNode");
} }
</script> </script>
<template> <template>
<div> <div>
<input <input type="text" placeholder="Folder name" v-model="new_folder_name" />
type="text"
placeholder="Folder name"
v-model="new_folder_name"
/>
<a href="#" @click="newFolder()">create folder</a> <a href="#" @click="newFolder()">create folder</a>
</div> </div>
<div> <div>

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

@ -1,12 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, inject } from 'vue'; import type { TokenInjectType } from "@/api";
import { check_token, FS, Responses, TokenInjectType } from '@/api'; import { defineProps, inject } from "vue";
import { check_token, FS, Responses } from "@/api";
const props = defineProps<{ 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() { async function del() {
const token = await check_token(jwt); const token = await check_token(jwt);

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

@ -2,8 +2,7 @@
<div class="hello"> <div class="hello">
<h1>{{ msg }}</h1> <h1>{{ msg }}</h1>
<p> <p>
For a guide and recipes on how to configure / customize this For a guide and recipes on how to configure / customize this project,<br />
project,<br />
check out the check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener" <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a >vue-cli documentation</a
@ -55,9 +54,7 @@
<h3>Essential Links</h3> <h3>Essential Links</h3>
<ul> <ul>
<li> <li>
<a href="https://vuejs.org" target="_blank" rel="noopener" <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
>Core Docs</a
>
</li> </li>
<li> <li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener" <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
@ -70,33 +67,23 @@
> >
</li> </li>
<li> <li>
<a <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
href="https://twitter.com/vuejs"
target="_blank"
rel="noopener"
>Twitter</a >Twitter</a
> >
</li> </li>
<li> <li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener" <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
>News</a
>
</li> </li>
</ul> </ul>
<h3>Ecosystem</h3> <h3>Ecosystem</h3>
<ul> <ul>
<li> <li>
<a <a href="https://router.vuejs.org" target="_blank" rel="noopener"
href="https://router.vuejs.org"
target="_blank"
rel="noopener"
>vue-router</a >vue-router</a
> >
</li> </li>
<li> <li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener" <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
>vuex</a
>
</li> </li>
<li> <li>
<a <a
@ -107,10 +94,7 @@
> >
</li> </li>
<li> <li>
<a <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
href="https://vue-loader.vuejs.org"
target="_blank"
rel="noopener"
>vue-loader</a >vue-loader</a
> >
</li> </li>
@ -127,13 +111,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
name: 'HelloWorld', name: "HelloWorld",
props: { props: {
msg: String msg: String,
} },
}); });
</script> </script>

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

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, defineExpose, ref } from 'vue'; import type { Status } from "naive-ui/es/progress/src/interface";
import { isErrorResponse, FS } from '@/api'; import { defineProps, defineExpose, ref } from "vue";
import { NProgress } from 'naive-ui'; import { isErrorResponse, FS } from "@/api";
import filesize from 'filesize'; import { NProgress } from "naive-ui";
import filesize from "filesize";
const props = defineProps<{ const props = defineProps<{
file: File; file: File;
@ -10,8 +11,8 @@ const props = defineProps<{
const progress = ref(0); const progress = ref(0);
const percentage = ref(0); const percentage = ref(0);
const err = ref(''); const err = ref("");
const status = ref('info'); const status = ref<Status>("info");
async function startUpload(parent: number, token: string) { async function startUpload(parent: number, token: string) {
const resp = await FS.upload_file(token, parent, props.file, (e) => { const resp = await FS.upload_file(token, parent, props.file, (e) => {
@ -20,13 +21,13 @@ async function startUpload(parent: number, token: string) {
}); });
percentage.value = 100; percentage.value = 100;
if (isErrorResponse(resp)) { if (isErrorResponse(resp)) {
err.value = resp.message ?? 'Error'; err.value = resp.message ?? "Error";
status.value = 'error'; status.value = "error";
} else status.value = 'success'; } else status.value = "success";
} }
defineExpose({ defineExpose({
startUpload startUpload,
}); });
</script> </script>

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

@ -1,14 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, defineExpose, ref, inject } from 'vue'; import type { TokenInjectType } from "@/api";
import { check_token, TokenInjectType } from '@/api'; import { defineProps, defineExpose, ref, inject } from "vue";
import UploadEntry from '@/components/UploadDialog/UploadEntry.vue'; import { check_token } from "@/api";
import { NCard } from 'naive-ui'; 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 entries = ref<typeof UploadEntry[]>([]);
const done = ref(false); const done = ref(false);
let canCloseResolve = null; let canCloseResolve: (value: unknown) => void = () => null;
const canClose = new Promise((r) => (canCloseResolve = r)); const canClose = new Promise((r) => (canCloseResolve = r));
async function startUpload(parent: number) { async function startUpload(parent: number) {
@ -22,7 +23,7 @@ async function startUpload(parent: number) {
} }
defineExpose({ defineExpose({
startUpload startUpload,
}); });
defineProps<{ defineProps<{
files: File[]; files: File[];
@ -32,15 +33,10 @@ defineProps<{
<template> <template>
<n-card title="Upload Files"> <n-card title="Upload Files">
<div> <div>
<UploadEntry <UploadEntry v-for="f in files" :key="f.name" ref="entries" :file="f" />
v-for="f in files"
:key="f.name"
ref="entries"
:file="f"
/>
</div> </div>
<div> <div>
<button v-if="done" @click="canCloseResolve()">Close</button> <button v-if="done" @click="canCloseResolve(null)">Close</button>
</div> </div>
</n-card> </n-card>
</template> </template>

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

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

6
frontend/src/dto/requests/admin.ts
View File

@ -1,6 +1,6 @@
import { BaseRequest } from './base'; import { BaseRequest } from "./base";
import { IsEnum, IsNumber } from 'class-validator'; import { IsEnum, IsNumber } from "class-validator";
import { UserRole } from '@/dto'; import { UserRole } from "@/dto";
export class AdminRequest extends BaseRequest { export class AdminRequest extends BaseRequest {
@IsNumber() @IsNumber()

6
frontend/src/dto/requests/auth.ts
View File

@ -1,11 +1,11 @@
import { BaseRequest } from './base'; import { BaseRequest } from "./base";
import { import {
IsBoolean, IsBoolean,
IsEmail, IsEmail,
IsNotEmpty, IsNotEmpty,
IsOptional, IsOptional,
IsString IsString,
} from 'class-validator'; } from "class-validator";
export class SignUpRequest extends BaseRequest { export class SignUpRequest extends BaseRequest {
@IsEmail() @IsEmail()

4
frontend/src/dto/requests/fs.ts
View File

@ -1,5 +1,5 @@
import { BaseRequest } from './base'; import { BaseRequest } from "./base";
import { IsInt, IsNotEmpty, IsString, Min } from 'class-validator'; import { IsInt, IsNotEmpty, IsString, Min } from "class-validator";
export class CreateFolderRequest extends BaseRequest { export class CreateFolderRequest extends BaseRequest {
@IsInt() @IsInt()

8
frontend/src/dto/requests/index.ts
View File

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

8
frontend/src/dto/responses/admin.ts
View File

@ -1,4 +1,4 @@
import { SuccessResponse } from './base'; import { SuccessResponse } from "./base";
import { import {
IsArray, IsArray,
IsBoolean, IsBoolean,
@ -6,9 +6,9 @@ import {
IsNotEmpty, IsNotEmpty,
IsNumber, IsNumber,
IsString, IsString,
ValidateNested ValidateNested,
} from 'class-validator'; } from "class-validator";
import { UserRole, ValidateConstructor } from '../utils'; import { UserRole, ValidateConstructor } from "../utils";
@ValidateConstructor @ValidateConstructor
export class GetUsersEntry { export class GetUsersEntry {

6
frontend/src/dto/responses/auth.ts
View File

@ -1,6 +1,6 @@
import { SuccessResponse } from './base'; import { SuccessResponse } from "./base";
import { IsBase32, IsJWT, IsNotEmpty } from 'class-validator'; import { IsBase32, IsJWT, IsNotEmpty } from "class-validator";
import { ValidateConstructor } from '../utils'; import { ValidateConstructor } from "../utils";
@ValidateConstructor @ValidateConstructor
export class LoginResponse extends SuccessResponse { export class LoginResponse extends SuccessResponse {

2
frontend/src/dto/responses/base.ts
View File

@ -1,4 +1,4 @@
import { IsNumber, Max, Min } from 'class-validator'; import { IsNumber, Max, Min } from "class-validator";
export class BaseResponse { export class BaseResponse {
constructor(statusCode: number) { constructor(statusCode: number) {

8
frontend/src/dto/responses/fs.ts
View File

@ -1,13 +1,13 @@
import { SuccessResponse } from './base'; import { SuccessResponse } from "./base";
import { import {
IsBoolean, IsBoolean,
IsInt, IsInt,
IsNotEmpty, IsNotEmpty,
IsOptional, IsOptional,
IsString, IsString,
Min Min,
} from 'class-validator'; } from "class-validator";
import { ValidateConstructor } from '../utils'; import { ValidateConstructor } from "../utils";
@ValidateConstructor @ValidateConstructor
export class GetRootResponse extends SuccessResponse { export class GetRootResponse extends SuccessResponse {

10
frontend/src/dto/responses/index.ts
View File

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

6
frontend/src/dto/responses/user.ts
View File

@ -1,6 +1,6 @@
import { SuccessResponse } from './base'; import { SuccessResponse } from "./base";
import { ValidateConstructor } from '../utils'; import { ValidateConstructor } from "../utils";
import { IsBoolean, IsNotEmpty, IsString } from 'class-validator'; import { IsBoolean, IsNotEmpty, IsString } from "class-validator";
@ValidateConstructor @ValidateConstructor
export class UserInfoResponse extends SuccessResponse { export class UserInfoResponse extends SuccessResponse {

12
frontend/src/dto/utils.ts
View File

@ -1,24 +1,24 @@
import { validate, validateSync as _validateSync } from 'class-validator'; import { validate, validateSync as _validateSync } from "class-validator";
export enum UserRole { export enum UserRole {
ADMIN = 2, ADMIN = 2,
USER = 1, USER = 1,
DISABLED = 0 DISABLED = 0,
} }
export function validateSync<T extends object>(data: T): void { export function validateSync<T extends object>(data: T): void {
const errors = _validateSync(data); const errors = _validateSync(data);
if (errors.length > 0) { if (errors.length > 0) {
console.error('Validation failed, errors: ', errors); console.error("Validation failed, errors: ", errors);
throw new Error('Validation failed'); throw new Error("Validation failed");
} }
} }
export async function validateAsync<T extends object>(data: T): Promise<void> { export async function validateAsync<T extends object>(data: T): Promise<void> {
const errors = await validate(data); const errors = await validate(data);
if (errors.length > 0) { if (errors.length > 0) {
console.error('Validation failed, errors: ', errors); console.error("Validation failed, errors: ", errors);
throw new Error('Validation failed'); throw new Error("Validation failed");
} }
} }

8
frontend/src/main.ts
View File

@ -1,8 +1,8 @@
import { createApp } from 'vue'; import { createApp } from "vue";
import router from './router'; import AppAsyncWrapper from "./AppAsyncWrapper.vue";
import AppAsyncWrapper from './AppAsyncWrapper.vue'; import router from "./router";
const app = createApp(AppAsyncWrapper); const app = createApp(AppAsyncWrapper);
app.use(router); app.use(router);
app.config.unwrapInjectedRef = true; app.config.unwrapInjectedRef = true;
app.mount('#app'); app.mount("#app");

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

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

6
frontend/src/shims-vue.d.ts vendored
View File

@ -1,6 +0,0 @@
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}

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

@ -1,16 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { inject, onBeforeMount, ref } from 'vue'; import type { TokenInjectType } from "@/api";
import { import { inject, onBeforeMount, ref } from "vue";
Responses, import { Responses, check_token, Admin, isErrorResponse } from "@/api";
check_token, import { onBeforeRouteUpdate } from "vue-router";
TokenInjectType, import router from "@/router";
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[]>([]); const users = ref<Responses.Admin.GetUsersEntry[]>([]);
@ -25,7 +20,7 @@ async function updatePanel() {
if (!token) return; if (!token) return;
const res = await Admin.get_users(token); const res = await Admin.get_users(token);
if (isErrorResponse(res)) return router.replace({ path: '/' }); if (isErrorResponse(res)) return router.replace({ path: "/" });
users.value = res.users; users.value = res.users;
} }
@ -77,23 +72,23 @@ async function deleteUser(user: number) {
</tr> </tr>
<tr v-for="user in users" :key="user.id"> <tr v-for="user in users" :key="user.id">
<td>{{ user.name }}</td> <td>{{ user.name }}</td>
<td>{{ user.gitlab ? 'Gitlab' : 'Password' }}</td> <td>{{ user.gitlab ? "Gitlab" : "Password" }}</td>
<td> <td>
<select @change="setRole(user.id, $event.target.value)"> <select @change="setRole(user.id, ($event.target as HTMLSelectElement).value)">
<option value="0" :selected="user.role === 0 ? true : null"> <option value="0" :selected="user.role === 0 ? true : undefined">
Disabled Disabled
</option> </option>
<option value="1" :selected="user.role === 1 ? true : null"> <option value="1" :selected="user.role === 1 ? true : undefined">
User User
</option> </option>
<option value="2" :selected="user.role === 2 ? true : null"> <option value="2" :selected="user.role === 2 ? true : undefined">
Admin Admin
</option> </option>
</select> </select>
</td> </td>
<td v-if="user.gitlab"></td> <td v-if="user.gitlab"></td>
<td v-else> <td v-else>
{{ user.tfaEnabled ? 'Enabled' : 'Disabled' }} {{ user.tfaEnabled ? "Enabled" : "Disabled" }}
</td> </td>
<td> <td>
<button v-if="user.tfaEnabled" @click="disableTfa(user.id)"> <button v-if="user.tfaEnabled" @click="disableTfa(user.id)">

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

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

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

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

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

@ -1,43 +1,44 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, inject } from 'vue'; import type { TokenInjectType } from "@/api";
import { Auth, FS, isErrorResponse, TokenInjectType } from '@/api'; import { ref, inject } from "vue";
import { useRouter } from 'vue-router'; import { Auth, FS, isErrorResponse } from "@/api";
import { useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
const username = ref(''); const username = ref("");
const password = ref(''); const password = ref("");
const otp = ref(''); const otp = ref("");
const error = ref(''); const error = ref("");
const requestOtp = ref(false); const requestOtp = ref(false);
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType; const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
async function login() { async function login() {
error.value = ''; error.value = "";
if (username.value === '' || password.value === '') { if (username.value === "" || password.value === "") {
error.value = 'Email and/or Password missing'; error.value = "Email and/or Password missing";
return; return;
} }
const res = await (requestOtp.value const res = await (requestOtp.value
? Auth.auth_login(username.value, password.value, otp.value) ? Auth.auth_login(username.value, password.value, otp.value)
: Auth.auth_login(username.value, password.value)); : Auth.auth_login(username.value, password.value));
if (isErrorResponse(res)) error.value = 'Login failed: ' + res.message; if (isErrorResponse(res)) error.value = "Login failed: " + res.message;
else if ('jwt' in res) { else if ("jwt" in res) {
const root = await FS.get_root(res.jwt); const root = await FS.get_root(res.jwt);
if (isErrorResponse(root)) { if (isErrorResponse(root)) {
error.value = 'Get root failed: ' + root.message; error.value = "Get root failed: " + root.message;
return; return;
} }
jwt.setToken(res.jwt); jwt.setToken(res.jwt);
await router.push({ await router.push({
name: 'fs', name: "fs",
params: { node_id: root.rootId } params: { node_id: root.rootId },
}); });
} else { } else {
error.value = ''; error.value = "";
requestOtp.value = true; requestOtp.value = true;
} }
} }

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

@ -1,22 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, inject, onBeforeMount } from 'vue'; import type { TokenInjectType } from "@/api";
import { import { ref, inject, onBeforeMount } from "vue";
Auth, import { Auth, User, check_token, isErrorResponse, Responses } from "@/api";
User, import { onBeforeRouteUpdate } from "vue-router";
check_token,
isErrorResponse,
TokenInjectType,
Responses
} from '@/api';
import { onBeforeRouteUpdate } from 'vue-router';
const error = ref(''); const error = ref("");
const oldPw = ref(''); const oldPw = ref("");
const newPw = ref(''); const newPw = ref("");
const newPw2 = ref(''); const newPw2 = ref("");
const user = ref<Responses.User.UserInfoResponse | null>(null); const user = ref<Responses.User.UserInfoResponse | null>(null);
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType; const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
onBeforeRouteUpdate(async () => { onBeforeRouteUpdate(async () => {
await updateProfile(); await updateProfile();
@ -48,8 +42,8 @@ async function logoutAll() {
} }
async function changePw() { async function changePw() {
if (oldPw.value === '' || newPw.value === '' || newPw2.value === '') { if (oldPw.value === "" || newPw.value === "" || newPw2.value === "") {
error.value = 'Password missing'; error.value = "Password missing";
return; return;
} }
if (newPw.value !== newPw2.value) { if (newPw.value !== newPw2.value) {
@ -60,7 +54,7 @@ async function changePw() {
if (!token) return; if (!token) return;
const res = await Auth.change_password(oldPw.value, newPw.value, token); const res = await Auth.change_password(oldPw.value, newPw.value, token);
if (isErrorResponse(res)) if (isErrorResponse(res))
error.value = 'Password change failed: ' + res.message; error.value = "Password change failed: " + res.message;
else jwt.logout(); else jwt.logout();
} }
@ -76,19 +70,11 @@ async function tfaDisable() {
<template v-if="user"> <template v-if="user">
<div v-if="error !== ''" v-text="error"></div> <div v-if="error !== ''" v-text="error"></div>
<div>User: {{ user.name }}</div> <div>User: {{ user.name }}</div>
<div>Signed in with {{ user.gitlab ? 'gitlab' : 'password' }}</div> <div>Signed in with {{ user.gitlab ? "gitlab" : "password" }}</div>
<template v-if="!user.gitlab"> <template v-if="!user.gitlab">
<div> <div>
<input <input type="password" placeholder="Old password" v-model="oldPw" />
type="password" <input type="password" placeholder="New password" v-model="newPw" />
placeholder="Old password"
v-model="oldPw"
/>
<input
type="password"
placeholder="New password"
v-model="newPw"
/>
<input <input
type="password" type="password"
placeholder="Repeat new password" placeholder="Repeat new password"
@ -99,15 +85,11 @@ async function tfaDisable() {
<div> <div>
<div> <div>
2 Factor authentication: 2 Factor authentication:
{{ user.tfaEnabled ? 'Enabled' : 'Disabled' }} {{ user.tfaEnabled ? "Enabled" : "Disabled" }}
</div> </div>
<div> <div>
<a href="#" v-if="user.tfaEnabled" @click="tfaDisable"> <a href="#" v-if="user.tfaEnabled" @click="tfaDisable"> Disable </a>
Disable <router-link to="/profile/2fa-enable" v-else> Enable </router-link>
</a>
<router-link to="/profile/2fa-enable" v-else>
Enable
</router-link>
</div> </div>
</div> </div>
</template> </template>

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

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { inject } from 'vue'; import type { TokenInjectType } from "@/api";
import { TokenInjectType } from '@/api'; import { inject } from "vue";
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
const route = useRoute(); 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); if ("token" in route.query) jwt.setToken(route.query["token"] as string);
router.replace({ path: '/' }); router.replace({ path: "/" });
</script> </script>
<template> <template>

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

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from "vue";
import { Auth, isErrorResponse } from '@/api'; import { Auth, isErrorResponse } from "@/api";
const username = ref(''); const username = ref("");
const password = ref(''); const password = ref("");
const password2 = ref(''); const password2 = ref("");
const error = ref(''); const error = ref("");
async function signup() { async function signup() {
if (username.value === '' || password.value === '') { if (username.value === "" || password.value === "") {
error.value = 'Email and/or Password missing'; error.value = "Email and/or Password missing";
return; return;
} }
if (password.value !== password2.value) { if (password.value !== password2.value) {
@ -18,8 +18,8 @@ async function signup() {
} }
const res = await Auth.auth_signup(username.value, password.value); const res = await Auth.auth_signup(username.value, password.value);
error.value = isErrorResponse(res) error.value = isErrorResponse(res)
? 'Signup failed: ' + res.message ? "Signup failed: " + res.message
: 'Signup successful, please wait till an admin unlocks your account.'; : "Signup successful, please wait till an admin unlocks your account.";
} }
</script> </script>

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

@ -1,31 +1,32 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, inject } from 'vue'; import type { TokenInjectType } from "@/api";
import { Auth, check_token, isErrorResponse, TokenInjectType } from '@/api'; import { ref, inject } from "vue";
import { Auth, check_token, isErrorResponse } from "@/api";
enum state { enum state {
SELECT, SELECT,
MAIL, MAIL,
TOTP TOTP,
} }
const currentState = ref<state>(state.SELECT); const currentState = ref<state>(state.SELECT);
const error = ref(''); const error = ref("");
const qrImage = ref(''); const qrImage = ref("");
const secret = ref(''); const secret = ref("");
const code = ref(''); const code = ref("");
const jwt = inject<TokenInjectType>('jwt') as TokenInjectType; const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
async function selectMail() { async function selectMail() {
const token = await check_token(jwt); const token = await check_token(jwt);
if (!token) return; if (!token) return;
error.value = 'Working...'; error.value = "Working...";
const res = await Auth.tfa_setup(true, token); const res = await Auth.tfa_setup(true, token);
if (isErrorResponse(res)) if (isErrorResponse(res))
error.value = 'Failed to select 2fa type: ' + res.message; error.value = "Failed to select 2fa type: " + res.message;
else { else {
error.value = ''; error.value = "";
currentState.value = state.MAIL; currentState.value = state.MAIL;
} }
} }
@ -33,14 +34,14 @@ async function selectMail() {
async function selectTotp() { async function selectTotp() {
const token = await check_token(jwt); const token = await check_token(jwt);
if (!token) return; if (!token) return;
error.value = 'Working...'; error.value = "Working...";
const res = await Auth.tfa_setup(false, token); const res = await Auth.tfa_setup(false, token);
if (isErrorResponse(res)) if (isErrorResponse(res))
error.value = 'Failed to select 2fa type: ' + res.message; error.value = "Failed to select 2fa type: " + res.message;
else { else {
qrImage.value = res.qrCode; qrImage.value = res.qrCode;
secret.value = res.secret; secret.value = res.secret;
error.value = ''; error.value = "";
currentState.value = state.TOTP; currentState.value = state.TOTP;
} }
} }
@ -48,14 +49,14 @@ async function selectTotp() {
async function submit() { async function submit() {
const token = await check_token(jwt); const token = await check_token(jwt);
if (!token) return; if (!token) return;
error.value = 'Working...'; error.value = "Working...";
const res = await Auth.tfa_complete( const res = await Auth.tfa_complete(
currentState.value === state.MAIL, currentState.value === state.MAIL,
code.value, code.value,
token token
); );
if (isErrorResponse(res)) if (isErrorResponse(res))
error.value = 'Failed to submit code: ' + res.message; error.value = "Failed to submit code: " + res.message;
else jwt.logout(); else jwt.logout();
} }
</script> </script>

8
frontend/tsconfig.config.json Normal file
View File

@ -0,0 +1,8 @@
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}

41
frontend/tsconfig.json
View File

@ -1,32 +1,19 @@
{ {
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"compilerOptions": { "compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": true,
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"strictPropertyInitialization": false,
"baseUrl": ".", "baseUrl": ".",
"types": ["webpack-env"], "experimentalDecorators": true,
"emitDecoratorMetadata": true,
"strictPropertyInitialization": false,
"paths": { "paths": {
"@/*": ["src/*"] "@/*": ["./src/*"]
}, }
"lib": ["esnext", "dom", "dom.iterable", "scripthost"] },
},
"include": [ "references": [
"src/**/*.ts", {
"src/**/*.tsx", "path": "./tsconfig.config.json"
"src/**/*.vue", }
"tests/**/*.ts", ]
"tests/**/*.tsx"
],
"exclude": ["node_modules"]
} }

14
frontend/vite.config.ts Normal file
View File

@ -0,0 +1,14 @@
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});

12
frontend/vue.config.js
View File

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

5370
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff