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,10 +92,11 @@ 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 =
+          const pagePath = ['/respond-invite', '/befriend'].includes(
-            ['/respond-invite', '/befriend'].includes(window.location.pathname)
+            window.location.pathname
-              ? window.location.pathname + window.location.search
+          )
-              : window.location.pathname;
+            ? window.location.pathname + window.location.search
+            : window.location.pathname;
 
           localStorage.setItem(GOOGLE_REDIRECT_AT, Date.now().toString());
           localStorage.setItem(GOOGLE_LAST_PAGE, pagePath);

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,26 +33,43 @@ 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>
-              <span className="ml-1 hidden text-base sm:inline">
+              {!isAuthenticated && (
-                or &nbsp;
+                <>
-                <a
+                  <span className="ml-1 hidden text-base sm:inline">
-                  href="/login"
+                    or &nbsp;
-                  className="text-purple-600 underline  hover:text-purple-700"
+                    <a
-                >
+                      href="/login"
-                  Login to your account
+                      onClick={() => {
-                </a>
+                        localStorage.setItem('authRedirect', '/team/new');
-              </span>
+                      }}
-              <a
+                      className="text-purple-600 underline  hover:text-purple-700"
-                href="/login"
+                    >
-                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>
-                Login to your account
+                  </span>
-              </a>
+                  <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 />