Feature/onboarding emails

apps/start/src/components/auth/share-enter-password.tsx

@@ -4,7 +4,7 @@ import { type ISignInShare, zSignInShare } from '@openpanel/validation';
 import { useMutation } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
-import { LogoSquare } from '../logo';
+import { PublicPageCard } from '../public-page-card';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 
@@ -43,54 +43,27 @@ export function ShareEnterPassword({
     });
   });
 
+  const typeLabel =
+    shareType === 'dashboard'
+      ? 'Dashboard'
+      : shareType === 'report'
+        ? 'Report'
+        : 'Overview';
+
   return (
-    <div className="center-center h-screen w-screen p-4 col">
-      <div className="bg-background p-6 rounded-lg max-w-md w-full text-left">
-        <div className="col mt-1 flex-1 gap-2">
-          <LogoSquare className="size-12 mb-4" />
-          <div className="text-xl font-semibold">
-            {shareType === 'dashboard'
-              ? 'Dashboard is locked'
-              : shareType === 'report'
-                ? 'Report is locked'
-                : 'Overview is locked'}
-          </div>
-          <div className="text-lg text-muted-foreground leading-normal">
-            Please enter correct password to access this{' '}
-            {shareType === 'dashboard'
-              ? 'dashboard'
-              : shareType === 'report'
-                ? 'report'
-                : 'overview'}
-          </div>
-        </div>
-        <form onSubmit={onSubmit} className="col gap-4 mt-6">
-          <Input
-            {...form.register('password')}
-            type="password"
-            placeholder="Enter your password"
-            size="large"
-          />
-          <Button type="submit">Get access</Button>
-        </form>
-      </div>
-      <div className="p-6 text-sm max-w-sm col gap-0.5">
-        <p>
-          Powered by{' '}
-          <a href="https://openpanel.dev" className="font-medium">
-            OpenPanel.dev
-          </a>
-        </p>
-        <p>
-          The best web and product analytics tool out there (our honest
-          opinion).
-        </p>
-        <p>
-          <a href="https://dashboard.openpanel.dev/onboarding">
-            Try it for free today!
-          </a>
-        </p>
-      </div>
-    </div>
+    <PublicPageCard
+      title={`${typeLabel} is locked`}
+      description={`Please enter correct password to access this ${typeLabel.toLowerCase()}`}
+    >
+      <form onSubmit={onSubmit} className="col gap-4">
+        <Input
+          {...form.register('password')}
+          type="password"
+          placeholder="Enter your password"
+          size="large"
+        />
+        <Button type="submit">Get access</Button>
+      </form>
+    </PublicPageCard>
   );
 }

apps/start/src/components/public-page-card.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import { LoginNavbar } from './login-navbar';
+import { LogoSquare } from './logo';
+
+interface PublicPageCardProps {
+  title: string;
+  description?: ReactNode;
+  children?: ReactNode;
+  showFooter?: boolean;
+}
+
+export function PublicPageCard({
+  title,
+  description,
+  children,
+  showFooter = true,
+}: PublicPageCardProps) {
+  return (
+    <div>
+      <LoginNavbar />
+      <div className="center-center h-screen w-screen p-4 col">
+        <div className="bg-background p-6 rounded-lg max-w-md w-full text-left">
+          <div className="col mt-1 flex-1 gap-2">
+            <LogoSquare className="size-12 mb-4" />
+            <div className="text-xl font-semibold">{title}</div>
+            {description && (
+              <div className="text-lg text-muted-foreground leading-normal">
+                {description}
+              </div>
+            )}
+          </div>
+          {!!children && <div className="mt-6">{children}</div>}
+        </div>
+        {showFooter && (
+          <div className="p-6 text-sm max-w-sm col gap-1 text-muted-foreground">
+            <p>
+              Powered by{' '}
+              <a href="https://openpanel.dev" className="font-medium">
+                OpenPanel.dev
+              </a>
+              {' · '}
+              <a href="https://dashboard.openpanel.dev/onboarding">
+                Try it for free today!
+              </a>
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/start/src/hooks/use-cookie-store.tsx

@@ -35,7 +35,7 @@ const setCookieFn = createServerFn({ method: 'POST' })
   });
 
 // Called in __root.tsx beforeLoad hook to get cookies from the server
-// And recieved with useRouteContext in the client
+// And received with useRouteContext in the client
 export const getCookiesFn = createServerFn({ method: 'GET' }).handler(() =>
   pick(VALID_COOKIES, getCookies()),
 );

apps/start/src/modals/create-invite.tsx

@@ -102,7 +102,7 @@ export default function CreateInvite() {
             <div>
               <SheetTitle>Invite a user</SheetTitle>
               <SheetDescription>
-                Invite users to your organization. They will recieve an email
+                Invite users to your organization. They will receive an email
                 will instructions.
               </SheetDescription>
             </div>