diff --git a/package.json b/package.json index 576c7b427..177c0b9c2 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@astrojs/preact": "^2.1.0", "@astrojs/sitemap": "^1.2.2", "@astrojs/tailwind": "^3.1.1", + "@fingerprintjs/fingerprintjs": "^3.4.1", "@nanostores/preact": "^0.3.1", "astro": "^2.2.3", "astro-compress": "^1.1.35", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e62e1aff5..ae151ecc8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,7 @@ specifiers: '@astrojs/preact': ^2.1.0 '@astrojs/sitemap': ^1.2.2 '@astrojs/tailwind': ^3.1.1 + '@fingerprintjs/fingerprintjs': ^3.4.1 '@nanostores/preact': ^0.3.1 '@playwright/test': ^1.32.3 '@tailwindcss/typography': ^0.5.9 @@ -31,6 +32,7 @@ dependencies: '@astrojs/preact': 2.1.0_preact@10.13.2 '@astrojs/sitemap': 1.2.2 '@astrojs/tailwind': 3.1.1_ooi4vwztktmr2nba6g3hokplre + '@fingerprintjs/fingerprintjs': 3.4.1 '@nanostores/preact': 0.3.1_ntvucyavaortwycasiweu74jd4 astro: 2.2.3 astro-compress: 1.1.35 @@ -634,6 +636,12 @@ packages: dev: false optional: true + /@fingerprintjs/fingerprintjs/3.4.1: + resolution: {integrity: sha512-i3TqlaIdF+4qDHP6OStMtLXCnvnoo2C156rNPm9/kIglUtnLAF45+sGkZZmVQB+58dDF0mNpaiqvKHNSR8J1Hg==} + dependencies: + tslib: 2.5.0 + dev: false + /@gar/promisify/1.1.3: resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==} dev: false diff --git a/src/components/AuthenticationFlow/EmailSignupForm.tsx b/src/components/AuthenticationFlow/EmailSignupForm.tsx index 448f3f52e..5bdc3a637 100644 --- a/src/components/AuthenticationFlow/EmailSignupForm.tsx +++ b/src/components/AuthenticationFlow/EmailSignupForm.tsx @@ -1,5 +1,6 @@ import type { FunctionComponent } from 'preact'; import { useState } from 'preact/hooks'; +import { httpPost } from '../../lib/http'; const EmailSignupForm: FunctionComponent = () => { const [email, setEmail] = useState(''); @@ -9,12 +10,26 @@ const EmailSignupForm: FunctionComponent = () => { const [error, setError] = useState(''); const [isLoading, setIsLoading] = useState(false); - const handleRegisterResponse = async (res: Response) => { - const json = await res.json(); + const onSubmit = async (e: Event) => { + e.preventDefault(); - if (!res.ok) { - setError(json.message || 'Something went wrong. Please try again later.'); + setIsLoading(true); + setError(''); + + const { response, error } = await httpPost<{ status: 'ok' }>( + `${import.meta.env.PUBLIC_API_URL}/v1-register`, + { + email, + password, + name, + } + ); + + if (error || response?.status !== 'ok') { setIsLoading(false); + setError( + error?.message || 'Something went wrong. Please try again later.' + ); return; } @@ -24,30 +39,6 @@ const EmailSignupForm: FunctionComponent = () => { )}`; }; - const onSubmit = (e: Event) => { - e.preventDefault(); - - setIsLoading(true); - setError(''); - - fetch(`${import.meta.env.PUBLIC_API_URL}/v1-register`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - email, - password, - name, - }), - }) - .then(handleRegisterResponse) - .catch((err) => { - setIsLoading(false); - setError('Something went wrong. Please try again later.'); - }); - }; - return (