Skip to content

Commit 339cb1e

Browse files
flipvhflipvh
committedJan 14, 2025
refactor: auth flows
1 parent 381cbe8 commit 339cb1e

15 files changed

+92
-82
lines changed
 

‎frontend/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,10 @@
5353
"@sentry/react": "^8.48.0",
5454
"@t3-oss/env-core": "^0.11.1",
5555
"@tailwindcss/typography": "^0.5.16",
56-
"@tanstack/query-sync-storage-persister": "5.62.7",
57-
"@tanstack/react-query": "5.62.7",
58-
"@tanstack/react-query-devtools": "5.62.7",
59-
"@tanstack/react-query-persist-client": "5.62.7",
56+
"@tanstack/query-sync-storage-persister": "5.64.1",
57+
"@tanstack/react-query": "5.64.1",
58+
"@tanstack/react-query-devtools": "5.64.1",
59+
"@tanstack/react-query-persist-client": "5.64.1",
6060
"@tanstack/react-router": "^1.95.3",
6161
"@tanstack/router-devtools": "^1.95.3",
6262
"@types/lodash": "^4.17.14",

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import { useMatches } from '@tanstack/react-router';
22
import { config } from 'config';
33
import { useEffect } from 'react';
44

5+
const isPWAInstalled = () => {
6+
return window.matchMedia('(display-mode: standalone)').matches;
7+
};
8+
59
// Custom hook for setting document title
610
export const useSetDocumentTitle = () => {
711
const matches = useMatches();
@@ -15,7 +19,8 @@ export const useSetDocumentTitle = () => {
1519
.filter(Boolean);
1620

1721
void Promise.all(breadcrumbPromises).then((titles) => {
18-
document.title = titles.join(' › ') + (titles.length && ' · ') + config.name;
22+
const append = isPWAInstalled() ? '' : (titles.length && ' · ') + config.name;
23+
document.title = titles.join(' › ') + append;
1924
});
2025
}, [matches]);
2126
};

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const AuthPage = ({ children }: AuthPageProps) => {
3434
<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">
3535
{children}
3636

37-
<Link to="/about" className="hover:opacity-90 p-4 active:scale-95">
37+
<Link to="/about" className="hover:opacity-90 p-4 active:scale-95 mx-auto ">
3838
<Logo height={34} />
3939
</Link>
4040

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

+8-6
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,15 @@ export const CheckEmailForm = ({ tokenData, setStep }: CheckEmailProps) => {
3535
onSuccess: (hasPasskey) => {
3636
setStep('signIn', form.getValues('email'), hasPasskey);
3737
},
38+
//TODO: this is unclear what it does
3839
onError: (error) => {
3940
const nextStep = config.has.registrationEnabled || tokenData ? 'signUp' : config.has.waitlist ? 'waitlist' : 'inviteOnly';
4041
if (error.status === 404) return setStep(nextStep, form.getValues('email'), false);
4142
},
4243
});
4344

44-
const onSubmit = (values: z.infer<typeof formSchema>) => {
45-
checkEmail(values.email);
45+
const onSubmit = () => {
46+
checkEmail(form.getValues('email'));
4647
};
4748

4849
const title = config.has.registrationEnabled
@@ -53,11 +54,12 @@ export const CheckEmailForm = ({ tokenData, setStep }: CheckEmailProps) => {
5354
? t('common:invite_sign_in')
5455
: t('common:sign_in');
5556

57+
// Directly forward to next step if email is in token
5658
useEffect(() => {
57-
if (tokenData?.email) {
58-
form.setValue('email', tokenData.email);
59-
form.handleSubmit(onSubmit)();
60-
}
59+
if (!tokenData?.email) return;
60+
61+
const nextStep = config.has.registrationEnabled || tokenData ? 'signUp' : config.has.waitlist ? 'waitlist' : 'inviteOnly';
62+
setStep(nextStep, tokenData.email, false);
6163
}, [tokenData]);
6264

6365
return (

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const OauthOptions = ({ email, actionType = 'signIn', showPasskey = false }: Oau
7676
key={provider}
7777
type="button"
7878
variant="outline"
79-
className="gap-1.5"
79+
className="gap-1"
8080
onClick={() => {
8181
setLoading(true);
8282
if (token) {
@@ -88,10 +88,11 @@ const OauthOptions = ({ email, actionType = 'signIn', showPasskey = false }: Oau
8888
data-provider={provider}
8989
src={`/static/images/${provider.toLowerCase()}-icon.svg`}
9090
alt={provider}
91-
className="w-4 h-4 group-data-[mode=dark]:data-[provider=github]:invert"
91+
className="w-4 h-4 mr-1 group-data-[mode=dark]:data-[provider=github]:invert"
9292
loading="lazy"
9393
/>
94-
{token ? t('common:accept') : actionType === 'signUp' ? t('common:sign_up') : t('common:sign_in_with', { provider: providerData.name })}
94+
<span>{actionType === 'signIn' ? t('common:sign_in') : t('common:sign_up')}</span>
95+
<span>{t('common:with').toLowerCase()}</span> <span>{providerData.name}</span>
9596
</Button>
9697
);
9798
})}

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export const SignUpForm = ({
7878
)}
7979
</h1>
8080

81-
<LegalNotice />
81+
<LegalNotice email={email} />
8282

8383
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
8484
<FormField
@@ -120,7 +120,7 @@ export const SignUpForm = ({
120120
);
121121
};
122122

123-
export const LegalNotice = () => {
123+
export const LegalNotice = ({ email }: { email: string }) => {
124124
const { t } = useTranslation();
125125

126126
const openDialog = (mode: 'terms' | 'privacy') => () => {
@@ -137,7 +137,7 @@ export const LegalNotice = () => {
137137

138138
return (
139139
<p className="font-light text-sm text-center space-x-1">
140-
<span>{t('common:legal_notice.text')}</span>
140+
<span>{t('common:legal_notice.text', { email })}</span>
141141
<Button type="button" variant="link" className="p-0 h-auto" onClick={openDialog('terms')}>
142142
{t('common:terms').toLocaleLowerCase()}
143143
</Button>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export const WaitlistForm = ({
8484
<ChevronDown size={16} className="ml-2" />
8585
</Button>
8686
</div>
87-
<LegalNotice />
87+
<LegalNotice email={email} />
8888
</>
8989
)}
9090
<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

+7-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
33

44
import type { checkTokenSchema } from 'backend/modules/general/schema';
55
import { config } from 'config';
6-
import { ArrowRight, Loader2 } from 'lucide-react';
6+
import { ArrowRight, Ban, Check, Loader2 } from 'lucide-react';
77
import { useEffect, useState } from 'react';
88
import { toast } from 'sonner';
99
import type { z } from 'zod';
@@ -65,17 +65,21 @@ const AcceptInvite = () => {
6565
{tokenData?.email && !error ? (
6666
<div className="space-y-4">
6767
<SubmitButton loading={isPending} className="w-full" onClick={onSubmit}>
68+
<Check size={16} className="mr-2" />
6869
{t('common:accept')}
69-
<ArrowRight size={16} className="ml-2" />
7070
</SubmitButton>
71+
<Link to={config.defaultRedirectPath} preload={false} className={cn('w-full', buttonVariants({ variant: 'secondary' }))}>
72+
<Ban size={16} className="mr-2" />
73+
{t('common:decline')}
74+
</Link>
7175
</div>
7276
) : (
7377
<div className="max-w-[32rem] m-4 flex flex-col items-center text-center">
7478
{/* TODO: we should move this to a reusable auth error message component ? */}
7579
{error && (
7680
<>
7781
<span className="text-muted-foreground text-sm">{t(`common:error.${error.type}`)}</span>
78-
<Link to="/auth/sign-in" className={cn(buttonVariants({ size: 'lg' }), 'mt-8')}>
82+
<Link to="/auth/sign-in" preload={false} className={cn(buttonVariants({ size: 'lg' }), 'mt-8')}>
7983
{t('common:sign_in')}
8084
<ArrowRight size={16} className="ml-2" />
8185
</Link>

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

+3-7
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const MenuSheetSection = ({ data, sectionType, sectionLabel, entityType,
3232
const archivedSectionType = `${sectionType}-archived`;
3333
const isArchivedVisible = activeSections?.[archivedSectionType] ?? true;
3434
const isSectionVisible = activeSections?.[sectionType] ?? true;
35+
const inactiveCount = data.filter((i) => i.membership.archived).length;
3536

3637
const createDialog = () => {
3738
if (isMobile) sheet.remove('nav-sheet');
@@ -78,13 +79,8 @@ export const MenuSheetSection = ({ data, sectionType, sectionLabel, entityType,
7879
<MenuSheetItems type={entityType} data={data} shownOption="unarchive" createDialog={createDialog} />
7980
)}
8081
{!!data.length && (
81-
<div
82-
className="group/archived"
83-
data-has-inactive={!!data.filter((i) => i.membership.archived).length}
84-
data-submenu={false}
85-
data-archived-visible={isArchivedVisible}
86-
>
87-
<SectionArchiveButton archiveToggleClick={archiveToggleClick} inactiveCount={data.filter((i) => i.membership.archived).length} />
82+
<div className="group/archived" data-has-inactive={!!inactiveCount} data-submenu={false} data-archived-visible={isArchivedVisible}>
83+
{!!inactiveCount || (isEditing && <SectionArchiveButton archiveToggleClick={archiveToggleClick} inactiveCount={inactiveCount} />)}
8884
<AnimatePresence initial={false}>
8985
{isArchivedVisible && (
9086
<motion.ul

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -60,20 +60,20 @@ const InviteUsers = ({ entity, callback, dialog: isDialog, mode, children }: Inv
6060
{!inviteMode && (
6161
<motion.div key="invite-initial" initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }}>
6262
<ToggleGroup type="multiple" onValueChange={updateMode} className="max-sm:flex-col">
63-
<ToggleGroupItem size="tile" variant="tile" value="search" aria-label="Search users" className="h-auto">
64-
<Search size={48} strokeWidth={1} />
63+
<ToggleGroupItem size="tile" variant="tile" value="email" aria-label="Add by email" className="h-auto">
64+
<AtSign size={48} strokeWidth={1} />
6565
<div className="flex flex-col p-4">
66-
<div className="font-light">{t('common:invite_by_name')}</div>
66+
<p className="font-light">{t('common:invite_by_email')}</p>
6767
<div className="flex items-center flex-row mt-1 opacity-50 transition-opacity group-hover:opacity-100">
6868
<strong>{t('common:continue')}</strong>
6969
<ChevronRight className="ml-1" size={16} />
7070
</div>
7171
</div>
7272
</ToggleGroupItem>
73-
<ToggleGroupItem size="tile" variant="tile" value="email" aria-label="Add by email" className="h-auto">
74-
<AtSign size={48} strokeWidth={1} />
73+
<ToggleGroupItem size="tile" variant="tile" value="search" aria-label="Search users" className="h-auto">
74+
<Search size={48} strokeWidth={1} />
7575
<div className="flex flex-col p-4">
76-
<p className="font-light">{t('common:invite_by_email')}</p>
76+
<div className="font-light">{t('common:invite_by_name')}</div>
7777
<div className="flex items-center flex-row mt-1 opacity-50 transition-opacity group-hover:opacity-100">
7878
<strong>{t('common:continue')}</strong>
7979
<ChevronRight className="ml-1" size={16} />

‎frontend/src/query/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ export const QueryClientProvider = ({ children }: { children: React.ReactNode })
4949
};
5050

5151
for (const section of Object.values(menu)) {
52-
await prefetchMenuItems(section);
52+
// TODO: assertion for UserMenuItem[]
53+
await prefetchMenuItems(section as UserMenuItem[]);
5354
}
5455
})();
5556
}, [offlineAccess]);

‎frontend/src/routes/auth.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@ export const AuthRoute = createRoute({
1717

1818
export const SignInRoute = createRoute({
1919
path: '/auth/sign-in',
20-
validateSearch: z.object({ redirect: z.string().optional(), fromRoot: z.boolean().optional(), token: z.string().optional() }),
20+
validateSearch: z.object({ redirect: z.string().optional(), token: z.string().optional() }),
2121
staticData: { pageTitle: 'Sign in', isAuth: false },
2222
getParentRoute: () => AuthRoute,
2323
beforeLoad: async ({ cause, search }) => {
2424
// Only check auth if entering
25-
if (cause !== 'enter' || search.fromRoot) return;
25+
if (cause !== 'enter' || search.redirect) return;
2626

2727
// If stored user, redirect to home
2828
const storedUser = useUserStore.getState().user;

‎frontend/src/routes/general.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export const AppRoute = createRoute({
9494
if (!onlineManager.isOnline() && storedUser) return console.info('Continuing as offline user with session');
9595

9696
console.info('Not authenticated -> redirect to sign in');
97-
throw redirect({ to: '/auth/sign-in', replace: true, search: { fromRoot: true, redirect: location.pathname } });
97+
throw redirect({ to: '/auth/sign-in', replace: true, search: { redirect: location.pathname } });
9898
}
9999

100100
// If location is root and has user, redirect to home
@@ -123,7 +123,7 @@ export const acceptInviteRoute = createRoute({
123123
throw redirect({
124124
to: '/auth/sign-in',
125125
replace: true,
126-
search: { fromRoot: true, token: params.token },
126+
search: { token: params.token },
127127
});
128128
}
129129
},

‎locales/en/common.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@
218218
"leave_message.text": "Leave a message",
219219
"left_focus.text": "Normal view restored",
220220
"legal": "Legal",
221-
"legal_notice.text": "By signing up with a new account, you agree to the",
221+
"legal_notice.text": "By signing up with {{ email }}, you agree to the",
222222
"legal_notice_access_request.text": "By requesting access, you agree to the",
223223
"legal_text": "Overview of all legal documents. To understand your rights and responsibilities when using {{appName}}.",
224224
"less": "Less",
@@ -451,5 +451,7 @@
451451
"without_color": "Without color",
452452
"write": "Write",
453453
"year": "year",
454-
"your_role": "Your role"
454+
"your_role": "Your role",
455+
"decline": "Decline",
456+
"with": "With"
455457
}

0 commit comments

Comments
 (0)