🚸 Fixed #30

frontend/package.json

@@ -15,6 +15,7 @@
 	},
 	"devDependencies": {
 		"@beyonk/svelte-mapbox": "^8.1.4",
+		"@felte/reporter-tippy": "^1.0.7",
 		"@felte/validator-yup": "^1.0.5",
 		"@fontsource/marck-script": "^4.5.5",
 		"@sentry/browser": "^6.19.6",

frontend/pnpm-lock.yaml

@@ -2,6 +2,7 @@ lockfileVersion: 5.3
 
 specifiers:
     '@beyonk/svelte-mapbox': ^8.1.4
+    '@felte/reporter-tippy': ^1.0.7
     '@felte/validator-yup': ^1.0.5
     '@fontsource/marck-script': ^4.5.5
     '@sentry/browser': ^6.19.6
@@ -56,6 +57,7 @@ dependencies:
 
 devDependencies:
     '@beyonk/svelte-mapbox': 8.1.4
+    '@felte/reporter-tippy': 1.0.7_tippy.js@6.3.7
     '@felte/validator-yup': 1.0.5_yup@0.32.11
     '@fontsource/marck-script': 4.5.5
     '@sentry/browser': 6.19.6
@@ -159,6 +161,19 @@ packages:
             '@felte/common': 1.0.4
         dev: true
 
+    /@felte/reporter-tippy/1.0.7_tippy.js@6.3.7:
+        resolution:
+            {
+                integrity: sha512-bllgUIYyhpnqXwIYLCWYlGKmX3OfyUTAOSl3ebgGoKh0LjfJw+MT1ZVWWpXdGeO4Q7UwMl2BCJK47N+vj0z0IA==
+            }
+        engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
+        peerDependencies:
+            tippy.js: ^6.0.0
+        dependencies:
+            '@felte/common': 1.0.4
+            tippy.js: 6.3.7
+        dev: true
+
     /@felte/validator-yup/1.0.5_yup@0.32.11:
         resolution:
             {

frontend/src/routes/account/register.svelte

@@ -16,16 +16,17 @@
 	import { validateSchema } from '@felte/validator-yup';
 	import { navbarVisible } from '$lib/stores';
 	import Footer from '$lib/footer.svelte';
+	import 'tippy.js/dist/tippy.css';
 
 	const { t } = getLocalization();
-	// import reporter from '@felte/reporter-tippy';
+	import reporter from '@felte/reporter-tippy';
 
 	navbarVisible.set(true);
 	import * as yup from 'yup';
 
 	const registerSchema = yup.object({
-		email: yup.string().email().required(),
-		password1: yup.string().required().min(8, 'must be at least 8 characters long'),
+		email: yup.string().email('Email must be valid!').required(),
+		password1: yup.string().required().min(8, 'Password must be at least 8 characters long!'),
 		password2: yup
 			.string()
 			.required()
@@ -36,14 +37,15 @@
 		username: yup
 			.string()
 			.required()
-			.min(3, 'must be at least 3 characters long')
-			.max(20, 'must be at most 20 characters long')
+			.min(3, 'Username must be at least 3 characters long')
+			.max(20, 'Username must be at most 20 characters long')
 	});
 
 	const { form, errors, touched, isValid, isSubmitting } = createForm<
 		yup.InferType<typeof registerSchema>
 	>({
 		validate: validateSchema(registerSchema),
+		extend: [reporter()],
 		onSubmit: async (values) => {
 			const res = await fetch('/api/v1/users/create', {
 				method: 'post',