refactor: auth flows

Author: flipvh

frontend/package.json

@@ -53,10 +53,10 @@
     "@sentry/react": "^8.48.0",
     "@t3-oss/env-core": "^0.11.1",
     "@tailwindcss/typography": "^0.5.16",
-    "@tanstack/query-sync-storage-persister": "5.62.7",
-    "@tanstack/react-query": "5.62.7",
-    "@tanstack/react-query-devtools": "5.62.7",
-    "@tanstack/react-query-persist-client": "5.62.7",
+    "@tanstack/query-sync-storage-persister": "5.64.1",
+    "@tanstack/react-query": "5.64.1",
+    "@tanstack/react-query-devtools": "5.64.1",
+    "@tanstack/react-query-persist-client": "5.64.1",
     "@tanstack/react-router": "^1.95.3",
     "@tanstack/router-devtools": "^1.95.3",
     "@types/lodash": "^4.17.14",

frontend/src/hooks/use-set-document-title.tsx

@@ -2,6 +2,10 @@ import { useMatches } from '@tanstack/react-router';
 import { config } from 'config';
 import { useEffect } from 'react';
 
+const isPWAInstalled = () => {
+  return window.matchMedia('(display-mode: standalone)').matches;
+};
+
 // Custom hook for setting document title
 export const useSetDocumentTitle = () => {
   const matches = useMatches();
@@ -15,7 +19,8 @@ export const useSetDocumentTitle = () => {
       .filter(Boolean);
 
     void Promise.all(breadcrumbPromises).then((titles) => {
-      document.title = titles.join(' › ') + (titles.length && ' · ') + config.name;
+      const append = isPWAInstalled() ? '' : (titles.length && ' · ') + config.name;
+      document.title = titles.join(' › ') + append;
     });
   }, [matches]);
 };

frontend/src/modules/auth/auth-page.tsx

@@ -34,7 +34,7 @@ const AuthPage = ({ children }: AuthPageProps) => {
         <div className="mx-auto mb-40 mt-8 flex flex-col justify-center gap-4 w-72 sm:w-96 transition-all will-change-transform duration-500 ease-out opacity-0 group-data-[started=false]:scale-95 translate-y-4 group-data-[started=true]:opacity-100">
           {children}
 
-          <Link to="/about" className="hover:opacity-90 p-4 active:scale-95">
+          <Link to="/about" className="hover:opacity-90 p-4 active:scale-95 mx-auto ">
             <Logo height={34} />
           </Link>
 

frontend/src/modules/auth/check-email-form.tsx

@@ -35,14 +35,15 @@ export const CheckEmailForm = ({ tokenData, setStep }: CheckEmailProps) => {
     onSuccess: (hasPasskey) => {
       setStep('signIn', form.getValues('email'), hasPasskey);
     },
+    //TODO: this is unclear what it does
     onError: (error) => {
       const nextStep = config.has.registrationEnabled || tokenData ? 'signUp' : config.has.waitlist ? 'waitlist' : 'inviteOnly';
       if (error.status === 404) return setStep(nextStep, form.getValues('email'), false);
     },
   });
 
-  const onSubmit = (values: z.infer<typeof formSchema>) => {
-    checkEmail(values.email);
+  const onSubmit = () => {
+    checkEmail(form.getValues('email'));
   };
 
   const title = config.has.registrationEnabled
@@ -53,11 +54,12 @@ export const CheckEmailForm = ({ tokenData, setStep }: CheckEmailProps) => {
       ? t('common:invite_sign_in')
       : t('common:sign_in');
 
+  // Directly forward to next step if email is in token
   useEffect(() => {
-    if (tokenData?.email) {
-      form.setValue('email', tokenData.email);
-      form.handleSubmit(onSubmit)();
-    }
+    if (!tokenData?.email) return;
+
+    const nextStep = config.has.registrationEnabled || tokenData ? 'signUp' : config.has.waitlist ? 'waitlist' : 'inviteOnly';
+    setStep(nextStep, tokenData.email, false);
   }, [tokenData]);
 
   return (

frontend/src/modules/auth/oauth-options.tsx

@@ -76,7 +76,7 @@ const OauthOptions = ({ email, actionType = 'signIn', showPasskey = false }: Oau
               key={provider}
               type="button"
               variant="outline"
-              className="gap-1.5"
+              className="gap-1"
               onClick={() => {
                 setLoading(true);
                 if (token) {
@@ -88,10 +88,11 @@ const OauthOptions = ({ email, actionType = 'signIn', showPasskey = false }: Oau
                 data-provider={provider}
                 src={`/static/images/${provider.toLowerCase()}-icon.svg`}
                 alt={provider}
-                className="w-4 h-4 group-data-[mode=dark]:data-[provider=github]:invert"
+                className="w-4 h-4 mr-1 group-data-[mode=dark]:data-[provider=github]:invert"
                 loading="lazy"
               />
-              {token ? t('common:accept') : actionType === 'signUp' ? t('common:sign_up') : t('common:sign_in_with', { provider: providerData.name })}
+              <span>{actionType === 'signIn' ? t('common:sign_in') : t('common:sign_up')}</span>
+              <span>{t('common:with').toLowerCase()}</span> <span>{providerData.name}</span>
             </Button>
           );
         })}

frontend/src/modules/auth/sign-up-form.tsx

@@ -78,7 +78,7 @@ export const SignUpForm = ({
         )}
       </h1>
 
-      <LegalNotice />
+      <LegalNotice email={email} />
 
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
         <FormField
@@ -120,7 +120,7 @@ export const SignUpForm = ({
   );
 };
 
-export const LegalNotice = () => {
+export const LegalNotice = ({ email }: { email: string }) => {
   const { t } = useTranslation();
 
   const openDialog = (mode: 'terms' | 'privacy') => () => {
@@ -137,7 +137,7 @@ export const LegalNotice = () => {
 
   return (
     <p className="font-light text-sm text-center space-x-1">
-      <span>{t('common:legal_notice.text')}</span>
+      <span>{t('common:legal_notice.text', { email })}</span>
       <Button type="button" variant="link" className="p-0 h-auto" onClick={openDialog('terms')}>
         {t('common:terms').toLocaleLowerCase()}
       </Button>

frontend/src/modules/auth/waitlist-form.tsx

@@ -84,7 +84,7 @@ export const WaitlistForm = ({
               <ChevronDown size={16} className="ml-2" />
             </Button>
           </div>
-          <LegalNotice />
+          <LegalNotice email={email} />
         </>
       )}
       <form onSubmit={form.handleSubmit(onSubmit)} className="max-xs:min-w-full flex flex-col gap-4 sm:flex-row">

frontend/src/modules/common/accept-invite.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import type { checkTokenSchema } from 'backend/modules/general/schema';
 import { config } from 'config';
-import { ArrowRight, Loader2 } from 'lucide-react';
+import { ArrowRight, Ban, Check, Loader2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import type { z } from 'zod';
@@ -65,17 +65,21 @@ const AcceptInvite = () => {
       {tokenData?.email && !error ? (
         <div className="space-y-4">
           <SubmitButton loading={isPending} className="w-full" onClick={onSubmit}>
+            <Check size={16} className="mr-2" />
             {t('common:accept')}
-            <ArrowRight size={16} className="ml-2" />
           </SubmitButton>
+          <Link to={config.defaultRedirectPath} preload={false} className={cn('w-full', buttonVariants({ variant: 'secondary' }))}>
+            <Ban size={16} className="mr-2" />
+            {t('common:decline')}
+          </Link>
         </div>
       ) : (
         <div className="max-w-[32rem] m-4 flex flex-col items-center text-center">
           {/* TODO: we should move this to a reusable auth error message component ? */}
           {error && (
             <>
               <span className="text-muted-foreground text-sm">{t(`common:error.${error.type}`)}</span>
-              <Link to="/auth/sign-in" className={cn(buttonVariants({ size: 'lg' }), 'mt-8')}>
+              <Link to="/auth/sign-in" preload={false} className={cn(buttonVariants({ size: 'lg' }), 'mt-8')}>
                 {t('common:sign_in')}
                 <ArrowRight size={16} className="ml-2" />
               </Link>

frontend/src/modules/navigation/menu-sheet/section.tsx

@@ -32,6 +32,7 @@ export const MenuSheetSection = ({ data, sectionType, sectionLabel, entityType,
   const archivedSectionType = `${sectionType}-archived`;
   const isArchivedVisible = activeSections?.[archivedSectionType] ?? true;
   const isSectionVisible = activeSections?.[sectionType] ?? true;
+  const inactiveCount = data.filter((i) => i.membership.archived).length;
 
   const createDialog = () => {
     if (isMobile) sheet.remove('nav-sheet');
@@ -78,13 +79,8 @@ export const MenuSheetSection = ({ data, sectionType, sectionLabel, entityType,
               <MenuSheetItems type={entityType} data={data} shownOption="unarchive" createDialog={createDialog} />
             )}
             {!!data.length && (
-              <div
-                className="group/archived"
-                data-has-inactive={!!data.filter((i) => i.membership.archived).length}
-                data-submenu={false}
-                data-archived-visible={isArchivedVisible}
-              >
-                <SectionArchiveButton archiveToggleClick={archiveToggleClick} inactiveCount={data.filter((i) => i.membership.archived).length} />
+              <div className="group/archived" data-has-inactive={!!inactiveCount} data-submenu={false} data-archived-visible={isArchivedVisible}>
+                {!!inactiveCount || (isEditing && <SectionArchiveButton archiveToggleClick={archiveToggleClick} inactiveCount={inactiveCount} />)}
                 <AnimatePresence initial={false}>
                   {isArchivedVisible && (
                     <motion.ul

frontend/src/modules/users/invite-users.tsx

@@ -60,20 +60,20 @@ const InviteUsers = ({ entity, callback, dialog: isDialog, mode, children }: Inv
         {!inviteMode && (
           <motion.div key="invite-initial" initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }}>
             <ToggleGroup type="multiple" onValueChange={updateMode} className="max-sm:flex-col">
-              <ToggleGroupItem size="tile" variant="tile" value="search" aria-label="Search users" className="h-auto">
-                <Search size={48} strokeWidth={1} />
+              <ToggleGroupItem size="tile" variant="tile" value="email" aria-label="Add by email" className="h-auto">
+                <AtSign size={48} strokeWidth={1} />
                 <div className="flex flex-col p-4">
-                  <div className="font-light">{t('common:invite_by_name')}</div>
+                  <p className="font-light">{t('common:invite_by_email')}</p>
                   <div className="flex items-center flex-row mt-1 opacity-50 transition-opacity group-hover:opacity-100">
                     <strong>{t('common:continue')}</strong>
                     <ChevronRight className="ml-1" size={16} />
                   </div>
                 </div>
               </ToggleGroupItem>
-              <ToggleGroupItem size="tile" variant="tile" value="email" aria-label="Add by email" className="h-auto">
-                <AtSign size={48} strokeWidth={1} />
+              <ToggleGroupItem size="tile" variant="tile" value="search" aria-label="Search users" className="h-auto">
+                <Search size={48} strokeWidth={1} />
                 <div className="flex flex-col p-4">
-                  <p className="font-light">{t('common:invite_by_email')}</p>
+                  <div className="font-light">{t('common:invite_by_name')}</div>
                   <div className="flex items-center flex-row mt-1 opacity-50 transition-opacity group-hover:opacity-100">
                     <strong>{t('common:continue')}</strong>
                     <ChevronRight className="ml-1" size={16} />

frontend/src/query/index.tsx

@@ -49,7 +49,8 @@ export const QueryClientProvider = ({ children }: { children: React.ReactNode })
       };
 
       for (const section of Object.values(menu)) {
-        await prefetchMenuItems(section);
+        // TODO: assertion for UserMenuItem[]
+        await prefetchMenuItems(section as UserMenuItem[]);
       }
     })();
   }, [offlineAccess]);

frontend/src/routes/auth.tsx

@@ -17,12 +17,12 @@ export const AuthRoute = createRoute({
 
 export const SignInRoute = createRoute({
   path: '/auth/sign-in',
-  validateSearch: z.object({ redirect: z.string().optional(), fromRoot: z.boolean().optional(), token: z.string().optional() }),
+  validateSearch: z.object({ redirect: z.string().optional(), token: z.string().optional() }),
   staticData: { pageTitle: 'Sign in', isAuth: false },
   getParentRoute: () => AuthRoute,
   beforeLoad: async ({ cause, search }) => {
     // Only check auth if entering
-    if (cause !== 'enter' || search.fromRoot) return;
+    if (cause !== 'enter' || search.redirect) return;
 
     // If stored user, redirect to home
     const storedUser = useUserStore.getState().user;

frontend/src/routes/general.tsx

@@ -94,7 +94,7 @@ export const AppRoute = createRoute({
       if (!onlineManager.isOnline() && storedUser) return console.info('Continuing as offline user with session');
 
       console.info('Not authenticated -> redirect to sign in');
-      throw redirect({ to: '/auth/sign-in', replace: true, search: { fromRoot: true, redirect: location.pathname } });
+      throw redirect({ to: '/auth/sign-in', replace: true, search: { redirect: location.pathname } });
     }
 
     // If location is root and has user, redirect to home
@@ -123,7 +123,7 @@ export const acceptInviteRoute = createRoute({
       throw redirect({
         to: '/auth/sign-in',
         replace: true,
-        search: { fromRoot: true, token: params.token },
+        search: { token: params.token },
       });
     }
   },

locales/en/common.json

@@ -218,7 +218,7 @@
   "leave_message.text": "Leave a message",
   "left_focus.text": "Normal view restored",
   "legal": "Legal",
-  "legal_notice.text": "By signing up with a new account, you agree to the",
+  "legal_notice.text": "By signing up with {{ email }}, you agree to the",
   "legal_notice_access_request.text": "By requesting access, you agree to the",
   "legal_text": "Overview of all legal documents. To understand your rights and responsibilities when using {{appName}}.",
   "less": "Less",
@@ -451,5 +451,7 @@
   "without_color": "Without color",
   "write": "Write",
   "year": "year",
-  "your_role": "Your role"
+  "your_role": "Your role",
+  "decline": "Decline",
+  "with": "With"
 }