diff --git a/frontend/package.json b/frontend/package.json index 96993c2..0078680 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index fdf8e4f..dc34aaa 100644 --- a/frontend/pnpm-lock.yaml +++ b/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: { diff --git a/frontend/src/routes/account/register.svelte b/frontend/src/routes/account/register.svelte index 8bff8fc..8105e16 100644 --- a/frontend/src/routes/account/register.svelte +++ b/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 >({ validate: validateSchema(registerSchema), + extend: [reporter()], onSubmit: async (values) => { const res = await fetch('/api/v1/users/create', { method: 'post',