feat(webapp): redesign auth pages

packages/types/lib/invitations/api.ts

@@ -1,4 +1,4 @@
-import type { Endpoint } from '../api.js';
+import type { ApiError, Endpoint } from '../api.js';
 import type { ApiInvitation, ApiTeam } from '../team/api.js';
 import type { ApiUser } from '../user/api.js';
 
@@ -34,6 +34,7 @@ export type GetInvite = Endpoint<{
             newTeamUsers: number;
         };
     };
+    Errors: ApiError<'not_found'>;
 }>;
 
 export type AcceptInvite = Endpoint<{

packages/webapp/src/App.tsx

@@ -13,7 +13,7 @@ import { EmailVerified } from './pages/Account/EmailVerified';
 import ForgotPassword from './pages/Account/ForgotPassword';
 import { InviteSignup } from './pages/Account/InviteSignup';
 import ResetPassword from './pages/Account/ResetPassword';
-import Signin from './pages/Account/Signin';
+import { Signin } from './pages/Account/Signin';
 import { Signup } from './pages/Account/Signup';
 import { VerifyEmail } from './pages/Account/VerifyEmail';
 import { VerifyEmailByExpiredToken } from './pages/Account/VerifyEmailByExpiredToken';

packages/webapp/src/components/ui/button/Auth/Google.tsx

@@ -29,7 +29,7 @@ export default function GoogleButton({ text, setServerErrorMessage, token }: Pro
         <button
             onClick={googleLogin}
             type="button"
-            className="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-xs w-full text-sm font-medium text-white bg-dark-600 hover:bg-gray-700"
+            className="flex items-center justify-center gap-2.5 p-3 bg-white text-gray-1000 font-roboto font-medium text-sm rounded w-full"
         >
             <svg xmlns="http://www.w3.org/2000/svg" width="18px" className="inline" viewBox="0 0 512 512">
                 <path

packages/webapp/src/hooks/useAuth.tsx

@@ -0,0 +1,294 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+
+import { APIError, apiFetch } from '@/utils/api';
+
+import type {
+    GetEmailByUuid,
+    GetOnboardingHearAboutUs,
+    PostForgotPassword,
+    PostOnboardingHearAboutUs,
+    PostSignin,
+    PostSignup,
+    PutResetPassword,
+    ResendVerificationEmailByEmail,
+    ResendVerificationEmailByUuid
+} from '@nangohq/types';
+
+export function useSigninAPI() {
+    return useMutation<
+        | {
+              status: 200;
+              json: PostSignin['Success'];
+          }
+        | {
+              status: 401 | 400;
+              json: PostSignin['Errors'];
+          },
+        APIError,
+        { email: string; password: string }
+    >({
+        mutationFn: async ({ email, password }) => {
+            const res = await apiFetch('/api/v1/account/signin', {
+                method: 'POST',
+                body: JSON.stringify({ email, password })
+            });
+
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostSignin['Success']
+                };
+            }
+
+            if (res.status === 401 || res.status === 400) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostSignin['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useResendVerificationEmail() {
+    return useMutation<ResendVerificationEmailByEmail['Success'], APIError, { email: string }>({
+        mutationFn: async ({ email }) => {
+            const res = await apiFetch('/api/v1/account/resend-verification-email/by-email', {
+                method: 'POST',
+                body: JSON.stringify({ email })
+            });
+
+            if (res.status === 200) {
+                return (await res.json()) as ResendVerificationEmailByEmail['Success'];
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useResendVerificationEmailByUuid() {
+    return useMutation<ResendVerificationEmailByUuid['Success'], APIError, { uuid: string }>({
+        mutationFn: async ({ uuid }) => {
+            const res = await apiFetch('/api/v1/account/resend-verification-email/by-uuid', {
+                method: 'POST',
+                body: JSON.stringify({ uuid })
+            });
+
+            if (res.status === 200) {
+                return (await res.json()) as ResendVerificationEmailByUuid['Success'];
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useLogoutAPI() {
+    return useMutation<undefined, APIError>({
+        mutationFn: async () => {
+            const res = await apiFetch('/api/v1/account/logout', { method: 'POST' });
+
+            if (res.status === 200) {
+                return undefined;
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useSignupAPI() {
+    return useMutation<
+        | {
+              status: 200;
+              json: PostSignup['Success'];
+          }
+        | {
+              status: 400;
+              json: PostSignup['Errors'];
+          },
+        APIError,
+        { name: string; email: string; password: string; token?: string }
+    >({
+        mutationFn: async ({ name, email, password, token }) => {
+            const res = await apiFetch('/api/v1/account/signup', {
+                method: 'POST',
+                body: JSON.stringify({ name, email, password, token })
+            });
+
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostSignup['Success']
+                };
+            }
+
+            if (res.status === 400) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostSignup['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useRequestPasswordResetAPI() {
+    return useMutation<
+        | {
+              status: 200;
+              json: PostForgotPassword['Success'];
+          }
+        | {
+              status: 400;
+              json: PostForgotPassword['Errors'];
+          },
+        APIError,
+        { email: string }
+    >({
+        mutationFn: async ({ email }) => {
+            const res = await apiFetch('/api/v1/account/forgot-password', {
+                method: 'POST',
+                body: JSON.stringify({ email })
+            });
+
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostForgotPassword['Success']
+                };
+            }
+
+            if (res.status === 400) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostForgotPassword['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useResetPasswordAPI() {
+    return useMutation<
+        | {
+              status: 200;
+              json: PutResetPassword['Success'];
+          }
+        | {
+              status: 400;
+              json: PutResetPassword['Errors'];
+          },
+        APIError,
+        { token: string; password: string }
+    >({
+        mutationFn: async ({ token, password }) => {
+            const res = await apiFetch('/api/v1/account/reset-password', {
+                method: 'PUT',
+                body: JSON.stringify({ token, password })
+            });
+
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PutResetPassword['Success']
+                };
+            }
+
+            if (res.status === 400) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PutResetPassword['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useEmailByUuid(uuid: string | undefined) {
+    return useQuery<GetEmailByUuid['Success'], APIError>({
+        queryKey: ['account', 'email', uuid],
+        queryFn: async () => {
+            const res = await apiFetch(`/api/v1/account/email/${uuid}`);
+
+            if (res.status === 200) {
+                return (await res.json()) as GetEmailByUuid['Success'];
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        },
+        enabled: !!uuid
+    });
+}
+
+export function useOnboardingHearAboutUs() {
+    return useQuery<GetOnboardingHearAboutUs['Success'], APIError>({
+        queryKey: ['account', 'onboarding', 'hear-about-us'],
+        queryFn: async () => {
+            const res = await apiFetch('/api/v1/account/onboarding/hear-about-us');
+
+            if (res.status === 200) {
+                return (await res.json()) as GetOnboardingHearAboutUs['Success'];
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function usePostOnboardingHearAboutUs() {
+    return useMutation<
+        | {
+              status: 200;
+              json: PostOnboardingHearAboutUs['Success'];
+          }
+        | {
+              status: 401 | 403;
+              json: PostOnboardingHearAboutUs['Errors'];
+          },
+        APIError,
+        { source: PostOnboardingHearAboutUs['Body']['source'] }
+    >({
+        mutationFn: async ({ source }) => {
+            const res = await apiFetch('/api/v1/account/onboarding/hear-about-us', {
+                method: 'POST',
+                body: JSON.stringify({ source })
+            });
+
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostOnboardingHearAboutUs['Success']
+                };
+            }
+
+            if (res.status === 401 || res.status === 403) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostOnboardingHearAboutUs['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}

packages/webapp/src/hooks/useInvite.tsx

@@ -1,21 +1,44 @@
-import useSWR from 'swr';
+import { useQuery } from '@tanstack/react-query';
 
-import { apiFetch, swrFetcher } from '../utils/api';
+import { APIError, apiFetch } from '../utils/api';
 
-import type { SWRError } from '../utils/api';
 import type { AcceptInvite, DeclineInvite, DeleteInvite, GetInvite, PostInvite } from '@nangohq/types';
 
 export function useInvite(token: string | undefined) {
-    const { data, error, mutate } = useSWR<GetInvite['Success'], SWRError<GetInvite['Errors']>>(token ? `/api/v1/invite/${token}` : null, swrFetcher);
+    return useQuery<
+        | {
+              status: 200;
+              json: GetInvite['Success'];
+          }
+        | {
+              status: 400;
+              json: GetInvite['Errors'];
+          },
+        APIError
+    >({
+        queryKey: ['invite', token],
+        queryFn: async () => {
+            const res = await apiFetch(`/api/v1/invite/${token}`);
 
-    const loading = !data && !error;
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as GetInvite['Success']
+                };
+            }
 
-    return {
-        loading,
-        error: error?.json,
-        data: data?.data,
-        mutate
-    };
+            if (res.status === 400) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as GetInvite['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        },
+        enabled: !!token
+    });
 }
 
 export async function apiPostInvite(env: string, body: PostInvite['Body']) {

packages/webapp/src/index.css

@@ -613,6 +613,12 @@
     font-weight: 600;
 }
 
+@utility text-body-small-light {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 300;
+}
+
 @utility text-body-small-regular {
     font-size: 12px;
     line-height: 16px;