Setup redirects on the teams page

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -56,6 +56,12 @@ export function GitHubButton(props: GitHubButtonProps) {
           }
         }
 
+        const authRedirectUrl = localStorage.getItem('authRedirect');
+        if (authRedirectUrl) {
+          localStorage.removeItem('authRedirect');
+          redirectUrl = authRedirectUrl;
+        }
+
         localStorage.removeItem(GITHUB_REDIRECT_AT);
         localStorage.removeItem(GITHUB_LAST_PAGE);
         Cookies.set(TOKEN_COOKIE_NAME, response.token, {

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -55,6 +55,12 @@ export function GoogleButton(props: GoogleButtonProps) {
           }
         }
 
+        const authRedirectUrl = localStorage.getItem('authRedirect');
+        if (authRedirectUrl) {
+          localStorage.removeItem('authRedirect');
+          redirectUrl = authRedirectUrl;
+        }
+
         localStorage.removeItem(GOOGLE_REDIRECT_AT);
         localStorage.removeItem(GOOGLE_LAST_PAGE);
         Cookies.set(TOKEN_COOKIE_NAME, response.token, {
@@ -86,8 +92,9 @@ export function GoogleButton(props: GoogleButtonProps) {
         // For non authentication pages, we want to redirect back to the page
         // the user was on before they clicked the social login button
         if (!['/login', '/signup'].includes(window.location.pathname)) {
-          const pagePath =
-            ['/respond-invite', '/befriend'].includes(window.location.pathname)
+          const pagePath = ['/respond-invite', '/befriend'].includes(
+            window.location.pathname
+          )
             ? window.location.pathname + window.location.search
             : window.location.pathname;
 

src/components/AuthenticationFlow/LinkedInButton.tsx

@@ -55,6 +55,12 @@ export function LinkedInButton(props: LinkedInButtonProps) {
           }
         }
 
+        const authRedirectUrl = localStorage.getItem('authRedirect');
+        if (authRedirectUrl) {
+          localStorage.removeItem('authRedirect');
+          redirectUrl = authRedirectUrl;
+        }
+
         localStorage.removeItem(LINKEDIN_REDIRECT_AT);
         localStorage.removeItem(LINKEDIN_LAST_PAGE);
         Cookies.set(TOKEN_COOKIE_NAME, response.token, {

src/components/Authenticator/authenticator.ts

@@ -73,7 +73,10 @@ function handleAuthenticated() {
 
   // If the user is on a guest route, redirect them to the home page
   if (guestRoutes.includes(window.location.pathname)) {
-    window.location.href = '/';
+    const authRedirect = window.localStorage.getItem('authRedirect') || '/';
+    window.localStorage.removeItem('authRedirect');
+
+    window.location.href = authRedirect;
   }
 }
 

src/components/TeamMarketing/TeamHeroBanner.tsx

@@ -1,4 +1,5 @@
 import { CheckCircle, CheckCircle2, CheckIcon } from 'lucide-react';
+import { isLoggedIn } from '../../lib/jwt.ts';
 
 const featureList = [
   'Create custom roadmaps for your team',
@@ -8,12 +9,13 @@ const featureList = [
 ];
 
 export function TeamHeroBanner() {
+  const isAuthenticated = isLoggedIn();
   return (
     <div className="bg-white py-8 lg:py-12">
       <div className="container">
         <div className="flex flex-row items-center justify-start text-left lg:justify-between">
           <div className="flex flex-grow flex-col">
-            <h1 className="mb-0.5 sm:mb-2.5 text-2xl sm:text-4xl font-bold lg:mb-4 lg:text-5xl">
+            <h1 className="mb-0.5 text-2xl font-bold sm:mb-2.5 sm:text-4xl lg:mb-4 lg:text-5xl">
               Roadmaps for Teams
             </h1>
             <p className="mb-4 text-base leading-normal text-gray-600 sm:mb-0 sm:leading-none lg:text-lg">
@@ -31,15 +33,27 @@ export function TeamHeroBanner() {
 
             <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
               <a
-                href="/signup"
+                onClick={() => {
+                  if (isAuthenticated) {
+                    return;
+                  }
+
+                  localStorage.setItem('authRedirect', '/team/new');
+                }}
+                href={isAuthenticated ? '/team/new' : '/signup'}
                 className="flex w-full items-center justify-center rounded-lg border border-transparent bg-purple-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700 sm:w-auto sm:text-base"
               >
                 Create your Team
               </a>
+              {!isAuthenticated && (
+                <>
                   <span className="ml-1 hidden text-base sm:inline">
                     or &nbsp;
                     <a
                       href="/login"
+                      onClick={() => {
+                        localStorage.setItem('authRedirect', '/team/new');
+                      }}
                       className="text-purple-600 underline  hover:text-purple-700"
                     >
                       Login to your account
@@ -47,10 +61,15 @@ export function TeamHeroBanner() {
                   </span>
                   <a
                     href="/login"
+                    onClick={() => {
+                      localStorage.setItem('authRedirect', '/team/new');
+                    }}
                     className="flex w-full items-center justify-center rounded-lg border border-purple-600 px-5 py-2 text-base text-sm font-medium text-purple-600 hover:bg-blue-700 sm:hidden sm:text-base"
                   >
                     Login to your account
                   </a>
+                </>
+              )}
             </div>
           </div>
           <img

src/pages/teams.astro

@@ -7,7 +7,7 @@ import { TeamPricing } from '../components/TeamMarketing/TeamPricing';
 ---
 
 <BaseLayout title='Roadmaps for teams' permalink={'/teams'}>
-  <TeamHeroBanner />
+  <TeamHeroBanner client:load />
   <TeamTools />
   <TeamDemo client:load />
   <TeamPricing client:load />