Created signup form

frontend/src/api.ts

@@ -16,6 +16,7 @@ import {
 	GetRootResponse,
 	LoginResponse,
 	RefreshResponse,
+	SignupResponse,
 	UploadFileResponse
 } from '../../dto';
 import jwtDecode, { JwtPayload } from 'jwt-decode';
@@ -94,7 +95,7 @@ export const auth_login = (
 export const auth_signup = (
 	username: string,
 	password: string
-): Promise<LoginResponse | ErrorResponse> =>
+): Promise<SignupResponse | ErrorResponse> =>
 	post<AuthSignUpRequest>('/api/auth/signup', {
 		username: username,
 		password: password

frontend/src/router/index.ts

@@ -1,5 +1,6 @@
 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';
@@ -19,6 +20,11 @@ const routes: Array<RouteRecordRaw> = [
 		name: 'login',
 		component: LoginView
 	},
+	{
+		path: '/signup',
+		name: 'signup',
+		component: SignupView
+	},
 	{
 		path: '/fs/:node_id',
 		name: 'fs',

frontend/src/views/LoginView.vue

@@ -13,7 +13,7 @@ const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
 
 async function login() {
 	if (username.value === '' || password.value === '') {
-		error.value = 'Username and/or Password missing';
+		error.value = 'Email and/or Password missing';
 		return;
 	}
 	const res = await auth_login(username.value, password.value);
@@ -38,6 +38,7 @@ async function login() {
 	<input type="email" placeholder="Email" v-model="username" />
 	<input type="password" placeholder="Password" v-model="password" />
 	<button @click="login()">Login</button>
+	<router-link to="signup">Signup instead?</router-link>
 </template>
 
 <style scoped></style>

frontend/src/views/SignupView.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { auth_signup, isErrorResponse } from '@/api';
+
+let username = ref('');
+let password = ref('');
+let 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_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>
+</template>
+
+<style scoped></style>