fileserver/frontend/src/api.ts

import axios from 'axios';
import {
	AuthLoginRequest,
	AuthSignUpRequest,
	BaseRequest,
	BaseResponse,
	CreateFileRequest,
	CreateFileResponse,
	CreateFolderRequest,
	CreateFolderResponse,
	DeleteRequest,
	DeleteResponse,
	ErrorResponse,
	GetNodeResponse,
	GetPathResponse,
	GetRootResponse,
	LoginResponse,
	RefreshResponse,
	SignupResponse,
	UploadFileResponse
} from '../../dto';
import jwtDecode, { JwtPayload } from 'jwt-decode';
import { Ref, UnwrapRef } from 'vue';

export * from '../../dto';

const post = <T extends BaseRequest>(url: string, data: T) =>
	axios
		.post(url, data, {
			headers: { 'Content-type': 'application/json' }
		})
		.then((res) => res.data)
		.catch((err) => err.response.data);

const post_token = <T extends BaseRequest>(
	url: string,
	data: T,
	token: string
) =>
	axios
		.post(url, data, {
			headers: {
				Authorization: 'Bearer ' + token,
				'Content-type': 'application/json'
			}
		})
		.then((res) => res.data)
		.catch((err) => err.response.data);

const post_token_form = (
	url: string,
	data: FormData,
	token: string,
	onProgress: (progressEvent: ProgressEvent) => void
) =>
	axios
		.post(url, data, {
			headers: {
				Authorization: 'Bearer ' + token,
				'Content-type': 'multipart/form-data'
			},
			onUploadProgress: onProgress
		})
		.then((res) => res.data)
		.catch((err) => err.response.data);

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const get = (url: string) =>
	axios
		.get(url)
		.then((res) => res.data)
		.catch((err) => err.response.data);

const get_token = (url: string, token: string) =>
	axios
		.get(url, {
			headers: { Authorization: 'Bearer ' + token }
		})
		.then((res) => res.data)
		.catch((err) => err.response.data);

//
// Api Requests
//

export const auth_login = (
	username: string,
	password: string
): Promise<LoginResponse | ErrorResponse> =>
	post<AuthLoginRequest>('/api/auth/login', {
		username: username,
		password: password
	});

export const auth_signup = (
	username: string,
	password: string
): Promise<SignupResponse | ErrorResponse> =>
	post<AuthSignUpRequest>('/api/auth/signup', {
		username: username,
		password: password
	});

export const get_root = (
	token: string
): Promise<GetRootResponse | ErrorResponse> => get_token('/api/fs/root', token);

export const get_node = (
	token: string,
	node: number
): Promise<GetNodeResponse | ErrorResponse> =>
	get_token(`/api/fs/node/${node}`, token);

export const get_path = (
	token: string,
	node: number
): Promise<GetPathResponse | ErrorResponse> =>
	get_token(`/api/fs/path/${node}`, token);

export const create_folder = (
	token: string,
	parent: number,
	name: string
): Promise<CreateFolderResponse | ErrorResponse> =>
	post_token<CreateFolderRequest>(
		'/api/fs/createFolder',
		{
			parent: parent,
			name: name
		},
		token
	);

export const create_file = (
	token: string,
	parent: number,
	name: string
): Promise<CreateFileResponse | ErrorResponse> =>
	post_token<CreateFileRequest>(
		'/api/fs/createFile',
		{
			parent: parent,
			name: name
		},
		token
	);

export const delete_node = (
	token: string,
	node: number
): Promise<DeleteResponse | ErrorResponse> =>
	post_token<DeleteRequest>(
		'/api/fs/delete',
		{
			node: node
		},
		token
	);

export const upload_file = async (
	token: string,
	parent: number,
	file: File,
	onProgress: (progressEvent: ProgressEvent) => void
): Promise<UploadFileResponse | ErrorResponse> => {
	const node = await create_file(token, parent, file.name);
	if (isErrorResponse(node)) return node;

	const form = new FormData();
	form.set('file', file);
	return post_token_form(
		`/api/fs/upload/${node.id}`,
		form,
		token,
		onProgress
	);
};

export function download_file(token: string, id: number) {
	const form = document.createElement('form');
	form.method = 'post';
	form.target = '_blank';
	form.action = '/api/fs/download';
	form.innerHTML = `<input type="hidden" name="jwtToken" value="${token}"><input type="hidden" name="id" value="${id}">`;
	document.body.appendChild(form);
	form.submit();
	document.body.removeChild(form);
}

export const refresh_token = (
	token: string
): Promise<RefreshResponse | ErrorResponse> =>
	post_token('/api/auth/refresh', '', token);

//
// Utilities
//

export async function check_token(
	token: TokenInjectType
): Promise<string | void> {
	if (!token.jwt.value) return token.logout();
	const payload = jwtDecode<JwtPayload>(token.jwt.value);
	if (!payload) return token.logout();
	// Expires in more than 60 Minute
	if (payload.exp && payload.exp > Math.floor(Date.now() / 1000 + 60 * 60))
		return token.jwt.value;
	const new_token = await refresh_token(token.jwt.value);
	if (isErrorResponse(new_token)) return token.logout();
	token.setToken(new_token.jwt);
	return new_token.jwt;
}

export const isErrorResponse = (res: BaseResponse): res is ErrorResponse =>
	res.statusCode != 200;

export type TokenInjectType = {
	jwt: Ref<UnwrapRef<string | null>>;
	setToken: (token: string) => void;
	logout: () => void;
};