127 lines
4.0 KiB
TypeScript
127 lines
4.0 KiB
TypeScript
import { Or } from '@/components/auth/or';
|
|
import { SignInGithub } from '@/components/auth/sign-in-github';
|
|
import { SignInGoogle } from '@/components/auth/sign-in-google';
|
|
import { SignUpEmailForm } from '@/components/auth/sign-up-email-form';
|
|
import FullPageLoadingState from '@/components/full-page-loading-state';
|
|
import { LogoSquare } from '@/components/logo';
|
|
import { useTRPC } from '@/integrations/trpc/react';
|
|
import { PAGE_TITLES, createEntityTitle } from '@/utils/title';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { createFileRoute, redirect } from '@tanstack/react-router';
|
|
import { motion } from 'framer-motion';
|
|
import { MailIcon } from 'lucide-react';
|
|
import { z } from 'zod';
|
|
const validateSearch = z.object({
|
|
inviteId: z.string().optional(),
|
|
});
|
|
export const Route = createFileRoute('/_public/onboarding')({
|
|
head: () => ({
|
|
meta: [
|
|
{ title: createEntityTitle('Create an account', PAGE_TITLES.ONBOARDING) },
|
|
{ name: 'robots', content: 'noindex, follow' },
|
|
],
|
|
}),
|
|
beforeLoad: async ({ context }) => {
|
|
if (context.session.session) {
|
|
throw redirect({ to: '/' });
|
|
}
|
|
},
|
|
component: Component,
|
|
validateSearch,
|
|
loader: async ({ context, location }) => {
|
|
const search = validateSearch.safeParse(location.search);
|
|
if (search.success && search.data.inviteId) {
|
|
await context.queryClient.prefetchQuery(
|
|
context.trpc.organization.getInvite.queryOptions({
|
|
inviteId: search.data.inviteId,
|
|
}),
|
|
);
|
|
}
|
|
},
|
|
pendingComponent: FullPageLoadingState,
|
|
});
|
|
|
|
function Component() {
|
|
const { inviteId } = Route.useSearch();
|
|
const trpc = useTRPC();
|
|
const { data: invite } = useQuery(
|
|
trpc.organization.getInvite.queryOptions(
|
|
{
|
|
inviteId: inviteId,
|
|
},
|
|
{
|
|
enabled: !!inviteId,
|
|
},
|
|
),
|
|
);
|
|
return (
|
|
<div className="col gap-8 w-full text-left">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-foreground mb-2">
|
|
Create an account
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
Let's start with creating your account. By creating an account you
|
|
accept the{' '}
|
|
<a
|
|
target="_blank"
|
|
href="https://openpanel.dev/terms"
|
|
rel="noreferrer"
|
|
className="underline hover:text-foreground transition-colors"
|
|
>
|
|
Terms of Service
|
|
</a>{' '}
|
|
and{' '}
|
|
<a
|
|
target="_blank"
|
|
href="https://openpanel.dev/privacy"
|
|
rel="noreferrer"
|
|
className="underline hover:text-foreground transition-colors"
|
|
>
|
|
Privacy Policy
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
|
|
{invite && !invite.isExpired && (
|
|
<div className="bg-card border border-border rounded-lg p-6 mb-6">
|
|
<h2 className="text-xl font-semibold mb-2">
|
|
Invitation to {invite.organization?.name}
|
|
</h2>
|
|
<p className="text-muted-foreground">
|
|
After you have created your account, you will be added to the
|
|
organization.
|
|
</p>
|
|
</div>
|
|
)}
|
|
{invite?.isExpired && (
|
|
<div className="bg-destructive/10 border border-destructive/20 rounded-lg p-6 mb-6">
|
|
<h2 className="text-xl font-semibold mb-2 text-destructive">
|
|
Invitation to {invite.organization?.name} has expired
|
|
</h2>
|
|
<p className="text-muted-foreground">
|
|
The invitation has expired. Please contact the organization owner to
|
|
get a new invitation.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<SignInGithub type="sign-up" inviteId={inviteId} />
|
|
<SignInGoogle type="sign-up" inviteId={inviteId} />
|
|
</div>
|
|
|
|
<Or className="my-6" />
|
|
|
|
<div className="flex items-center gap-2 font-semibold mb-4 text-lg">
|
|
<MailIcon className="size-4" />
|
|
Sign up with email
|
|
</div>
|
|
<SignUpEmailForm inviteId={inviteId} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|